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.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    need help calling external script

    so i'm very green when it comes to JavaScript and i realize this is probably an extremely basic question, but i'm at a loss and looking to learn.

    i have a content slider script that should rotate content slides at the given interval and also apply the '.current' class to the corresponding thumbnail when that particular slide is active.

    i'm just unsure how to call the script in my html. below i'll post, in order, what's in my html header (the script is called sliderscript.js), my first two html entries (there's five slides total), and my script.

    Code:
    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="scripts/sliderscript.js" type="text/javascript"></script>
    Code:
    <div class="slider-container">	
    			<div class="slides">	
    			
    				<div class="slide dummy1">
    					<div class="inside">
    						<div class="text">
    							<p>lorem ipsum</p>
    						</div><!--text-->
    					</div><!--inside-->
    				</div><!--slide dummy1-->
    		
    				<div class="slide dummy2" style="display: none">
    					<div class="inside">
    						<div class="text">
    							<h1 class="heading">lorem ipsum</h1>
    							<p>lorem ipsum</p>
    						</div><!--text-->
    					</div><!--inside-->
    				</div><!--slide dummy2-->
                             </div><!--slides-->
    
                 <div class="slidertray">
    		<div class="thumbs-container">
    				
    			  <ul>
    				<li id="dummy1-thumb" class="current first">
    					<a href="#">
    						<div class="thumbbox"><img src="path" ></div>
    						Dummy1 Tag
    					</a>
    				</li>
    
    				<li id="dummy2-thumb">
    					<a href="#">
    						<div class="thumbbox"><img src="path"  /></div>
    						Dummy2 Tag
    					</a>
    				</li>
                             </ul>
    
                       </div><!--thumbs-container-->
                   
                     </div><!--slidertray-->
    
    </div><!--slider-container-->
    Code:
    $(function() {
    
    	/* SLIDER */
    	var carousel = (function () {
    		
    		var	init = function () {
    			clickThumb($(thumbs + ' a'));
    			autoCycleOn = true;
    			pauseAutoCycle('.slides'); // Pause when hoversing over a slide
    			pauseAutoCycle(thumbs + ' a'); // Pause when hovering over a link
    			killAutoCycle('.video-box a'); // Stop when you play a video
    			$(document).ready(function(){ autoCycle; });
    			slidePointer($(thumbs + '.current'));
    		},
    			
    		thumbs = '.slidertray li',
    		thumbsList = '.slidertray ul',
    		noThumbs = $(thumbs).length,
    		killedAutoCycle = false,
    		cycleSpeed = 5000,
    		fadeSpeed = 750,
    		autoCycleOn,
    		
    		// Show slide
    		showSlide = function(currentThumb){ 
    			var id = currentThumb.attr('id').slice(0,-6); // remove "-thumb" from the id to get the name
    			var content = '.slide.'+id; 
    			if($(content).length !== 0){ 
    				$('.slide').fadeOut();
    				$(thumbs).removeClass('current');
    				$(content).fadeIn(.5*fadeSpeed);
    				currentThumb.addClass('current');
    				slidePointer(currentThumb);
    			}
    		},
    	
    		clickThumb = function(thumbLink){
    			thumbLink.click(function(){
    				thumb = $(this).parents('li'); 
    				showSlide(thumb);
    				//clearInterval(autoCycle);
    				//autoCycle = setInterval(cycleAll, cycleSpeed);
    				return false; 
    			});
    		},
    	
    			
    		// Cycle selected slide
    		cycleAll = function(){
    			if(autoCycleOn){
    				if (noThumbs > 4){
    					if ($(thumbs + '.current').index() < 4) {
    						nextThumb = $(thumbs + '.current').next();
    					}
    					else{
    						nextThumb = $(thumbs).eq(0);
    					}
    					showSlide(nextThumb);	
    				}
    			}
    		},
    		
    		//Auto-cycle Thumbs
    		autoCycle = setInterval(cycleAll, cycleSpeed);
    		
    		// Pause the auto-cycle
    		pauseAutoCycle = function(element){
    			if(autoCycleOn){
    				$(element).hover(function() {
    					 clearInterval(autoCycle);
    				}, function() {
    					if (!killedAutoCycle){
    						autoCycle = setInterval(cycleAll, cycleSpeed)
    					}
    				});
    			}
    		},
    		
    		// End the cycling if they click a slide, assuming that 
    		// it's a video or they're leaving the page
    		killAutoCycle = function(element){
    			$(element).click(function() {
    				killedAutoCycle = true;
    				clearInterval(autoCycle);
    			});
    		};	
    	
    		$(init);
    	}());
    	
    });
    any help would be appreciated!
    Last edited by cozart; 02-20-2013 at 09:32 PM.

  • #2
    New Coder
    Join Date
    Feb 2013
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Where on your page is this;

    Code:
    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="scripts/sliderscript.js" type="text/javascript"></script>
    it should be between <head> </head>

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,460
    Thanks
    0
    Thanked 632 Times in 622 Posts
    Quote Originally Posted by billboy View Post
    it should be between <head> </head>
    No it shouldn't.

    With rare exceptions all JavaScript should go immediately before the </body> tag. If you put it in the head then it slows the loading of the page and you need extra code to delay running it until after the page has loaded.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    cozart (02-20-2013)

  • #4
    New Coder
    Join Date
    Feb 2013
    Posts
    44
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    No it shouldn't.

    With rare exceptions all JavaScript should go immediately before the </body> tag. If you put it in the head then it slows the loading of the page and you need extra code to delay running it until after the page has loaded.
    correct, my bad sorry for any confusion to the OP

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    moving those two scripts to before the </body> tag did the trick.

    thanks!


  •  

    Posting Permissions

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