1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

No Fade in JAVASCRIPT!!!

Discussion in 'JavaScript' started by Farid Arabi, Jan 20, 2016.

0
  1. #1
    Hello
    I need to a effect "FADE" in this code , But I can not :(
    Do you help me?


    <?php
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <?php cryout_meta_hook(); ?>
    <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php
    cryout_header_hook();
    wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>

    <?php cryout_body_hook(); ?>

    <div id="wrapper" class="hfeed">
    <div id="topbar" ><div id="topbar-inner"> <?php cryout_topbar_hook(); ?> </div></div>
    <?php cryout_wrapper_hook(); ?>

    <div id="header-full">
    <header id="header">
    <?php cryout_masthead_hook(); ?>
    <div id="masthead">

    <script language="JavaScript">
    var i = 0;
    var path = new Array();
    // LIST OF IMAGES
    path[0] = "fq1.jpg";
    path[1] = "fq2.jpg";
    path[2] = "fq3.jpg";

    function swapImage()
    {
    document.slide.src = path;
    if(i < path.length - 1) i++; else i = 0;
    setTimeout("swapImage()",8000);
    }
    window.onload=swapImage;
    </script>
    <img height="180" name="slide" src="image_1.gif" width="1240" />

    <div style="clear:both;"></div>
    </div><!-- #branding -->
    <nav id="access" role="navigation">
    <?php cryout_access_hook();?>
    </nav><!-- #access -->
    </div><!-- #masthead -->

    </div><!-- #header-full -->

    <div style="clear:both;height:0;"> </div>

    <div id="main">
    <?php cryout_main_hook(); ?>
    <div id="forbottom" >
    <?php cryout_forbottom_hook(); ?>

    <div style="clear:both;"> </div>

    <?php cryout_breadcrumbs_hook();?>




    Thank You
     
    Farid Arabi, Jan 20, 2016 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    In order to have a fade that works, generally you have to have the images loaded FIRST -- all you're doing in this code is swapping the image directly, so there's no chance to trip scripttardery to do it, or to have CSS handle that.

    Of course the method you have there is also sleazing scripttardery into the markup when the script should be hooking the markup. (a subtle but important distinction)... but it's turdpress so you've got all sorts of broken outdated asshattery in there pissing on the markup from oribt. (not a fan)

    I'd gut the markup down to something like this:
    <div class="slideShow">
<img src="image_1.gif" alt="first Slide">
<img src="fq1.jpg" alt="second slide">
<img src="fq2.jpg" alt="third slide">
<img src="fq3.jpg" alt="fourth slide">
<!-- .slideShow --></div>
    Code (markup):
    I'd then be loading this script from an external file right before </body>

    (function(d){

	// first a little helper function
	
	function eventAdd(e, event, handler) {
		if (e.addEventListener) e.addEventListener(event, handler, false);
			else this.attachEvent('on' + event, handler);
	}
	
	// then our functionality
	
	var
		slideShow = d.getElementById('slideShow'),
		images = slideShow.getElementsByTagName('img'),
		current = 0;
	
	function nextImage() {
		images[current].className = '';
		current++;
		if (current >= images.length) current = 0;
		images[current].className = 'show';
	}

	images[current].className = 'show';
	
	eventAdd(window, 'load', function() { setInterval(nextImage, 8000); });

})(document);
    Code (markup):
    ... then have CSS provide the animation instead of scripting.

    #slideShow,
#slideShow img {
	width:1240px;
	height:180px;
}

#slideShow {
	position:relative;
}

#slideShow img {
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	opacity:0;
	filter:alpha(opacity=0);
	-webkit-transition:opacity 1s;
	transition:opacity 1s;
}

#slideShow img.show {
	z-index:256;
	opacity:1;
	filter:alpha(opacity=100);
}]/code]


Which of course you could then mix in all sorts of extra effects from the CSS. Notice I attach the event from the scripting instead of window.onload since **** knows what idiotic bekaptah asshattery turdpress might also be trying to load, which is why I wrapped the code in a self starting function so as to isolate its scope. Since it's basing off the markup you can add/remove img tags to the slideshow until blue in the face - WITHOUT having to change the scripting. 

Scripting off, currently only the first image would show if scripting is disabled but CSS is on. In a deployment environment I'd probably add a class to the outer wrapper to use as the hook for hide/show in the CSS instead of #slideShow.

You can't do what you want by just swapping one tag's SRC attribute.
    Code (markup):
     
    deathshadow, Jan 21, 2016 IP
  3. Farid Arabi

    Farid Arabi Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    deathshadow Thank you
    But , I can not edit this code,
    Can you complete my code? ( with fade effect )
     
    Farid Arabi, Jan 21, 2016 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Ok, I'm not even sure what you mean by that.
     
    deathshadow, Jan 22, 2016 IP
  5. Farid Arabi

    Farid Arabi Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    I mean that. Please fill you my code. Please send me the complete code.
    Please correct my code.



    <?php
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <?php cryout_meta_hook(); ?>
    <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" />
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php
    cryout_header_hook();
    wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>

    <?php cryout_body_hook(); ?>

    <div id="wrapper" class="hfeed">
    <div id="topbar" ><div id="topbar-inner"> <?php cryout_topbar_hook(); ?> </div></div>
    <?php cryout_wrapper_hook(); ?>

    <div id="header-full">
    <header id="header">
    <?php cryout_masthead_hook(); ?>
    <div id="masthead">

    <script language="JavaScript">
    var i = 0;
    var path = new Array();
    // LIST OF IMAGES
    path[0] = "fq1.jpg";
    path[1] = "fq2.jpg";
    path[2] = "fq3.jpg";

    function swapImage()
    {
    document.slide.src = path;
    if(i < path.length - 1) i++; else i = 0;
    setTimeout("swapImage()",8000);
    }
    window.onload=swapImage;
    </script>
    <img height="180" name="slide" src="image_1.gif" width="1240" />

    <div style="clear:both;"></div>
    </div><!-- #branding -->
    <nav id="access" role="navigation">
    <?php cryout_access_hook();?>
    </nav><!-- #access -->
    </div><!-- #masthead -->

    </div><!-- #header-full -->

    <div style="clear:both;height:0;"> </div>

    <div id="main">
    <?php cryout_main_hook(); ?>
    <div id="forbottom" >
    <?php cryout_forbottom_hook(); ?>

    <div style="clear:both;"> </div>

    <?php cryout_breadcrumbs_hook();?>
     
    Farid Arabi, Jan 23, 2016 IP