Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 19 of 19
  1. #16
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Quote Originally Posted by harbingerOTV View Post
    rafiki, are you referencing jQuery before the script? ie: <script src='YOUR-PATH/jQuery.js'></script>

    knightcoder, again, he posted in the frameworks section. So giving him an example using a framework is what I did. When I say pure JS, I mean no framework. And, thank you for clarifying what jQuery is.
    This is my whole code so far.

    Code:
    <!DOCTYPE html >
    <html>
    <head>
    
    <meta charset="utf-8">
    <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
    <link rel="stylesheet" type="text/css" href="theme.css">
    <title>Drycore Preservation</title>
    
    
    </head>
    <body>
    	<div id="head1"> 
    				<img src="images/drycore_logo.png" alt="description" width="250" height="105" >
    			<div id="nav_bar"><ul>
    <li ><a href="#home" class="selected">Home</a></li>
    
    
    <li><a href="#news">News</a></li>
    
    
    <li><a href="#contact">Contact</a></li>
    
    <li><a href="#about">About</a></li>
    </ul>
    			<!--end nav_bar--></div></div>
    		<div id="head2">
    		<!--end head2--></div>
    	<!--end head1--><div id="border_left"></div>
    	<div id="cycler">
    	<img src="images/image1.jpg" alt="roof" class="active">
    	<img src="images/image2.jpg" alt="Description" >
    	<!--<img src="images/image3.jpg" alt="Description" >-->
    	
    	</div>
    	
    	<script type="text/javascript">
    
    function cycleImages(){
         var $active = $('#cycler .active');
         var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
         $next.css('z-index',2);//move the next image up the pile
         $active.fadeOut(1500,function(){//fade out the top image
             $next.css('z-index',3).addClass('active');//make the next image the top one
         });
        }
    
    $(document).ready(function(){
     //run every 7s
    setInterval('cycleImages()', 7000);
    })
    
    
    </script>
    	</body></html>
    exactly as it is in the demo source code at: http://www.simonbattersby.com/demos/...demo_basic.htm

  2. #17
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,190
    Thanks
    10
    Thanked 569 Times in 550 Posts
    add a jQuery script to your head and it should work.


    ex:

    Code:
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  3. #18
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,042
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Quote Originally Posted by rnd me View Post
    add a jQuery script to your head and it should work.


    ex:

    Code:
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    Knew it would be something so simple, damn tiredness...
    It is working now, both versions but the non jQuery isn't repeating (I shown the code), the thing is I prefer the fading of the jQuery, (straight into the next picture, not to white first).
    Thanks.
    Rafiki.

  4. #19
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by harbingerOTV View Post
    And, thank you for clarifying what jQuery is.
    no problem, a lot of people mistake lquery for another language when it's actually just javascript itself.

    Another thing to keep in mind is that when you use jquery, the amount of code that is actually executed to perform a task is far, far greater when coding in jquery as opposed to coding the task in "pure" javascript.


 
Page 2 of 2 FirstFirst 12

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •