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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    code in external file

    Hello,
    I found script for lightbox-
    http://www.sohtanaka.com/web-design/.../modal-window/

    I want to take the code that inside the <script type="text/javascript">.....</script> tags (the one that start with "$(document).ready(function(){", and put it inside new file call "lightbox.js", and than call this file with this code:
    <script type="text/javascript" src="lightbox/lightbox.js"></script>

    I did it but for some reason, when I take the code out of the " <script type="text/javascript">....</script> " tag and put it in other file, the script doesn't work.

    Should I change anything in the script for that?

    Thank you in advance.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I did it but for some reason, when I take the code out of the " <script type="text/javascript">....</script> " tag and put it in other file, the script doesn't work.
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Its still under building.
    Can you please take a look at the first link that I gave above?
    in the source of it you have the JS code:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    						   		   
    	//When you click on a link with class of poplight and the href starts with a # 
    	$('a.poplight[href^=#]').click(function() {
    		var popID = $(this).attr('rel'); //Get Popup Name
    		var popURL = $(this).attr('href'); //Get Popup href to define size
    				
    		//Pull Query & Variables from href URL
    		var query= popURL.split('?');
    		var dim= query[1].split('&');
    		var popWidth = dim[0].split('=')[1]; //Gets the first query string value
    
    		//Fade in the Popup and add close button
    		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
    		
    		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
    		var popMargTop = ($('#' + popID).height() + 80) / 2;
    		var popMargLeft = ($('#' + popID).width() + 80) / 2;
    		
    		//Apply Margin to Popup
    		$('#' + popID).css({ 
    			'margin-top' : -popMargTop,
    			'margin-left' : -popMargLeft
    		});
    		
    		//Fade in Background
    		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
    		
    		return false;
    	});
    	
    	
    	//Close Popups and Fade Layer
    	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    	  	$('#fade , .popup_block').fadeOut(function() {
    			$('#fade, a.close').remove();  
    	}); //fade them both out
    		
    		return false;
    	});
    
    	
    });
    
    </script>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Are you using the <script> tags inside your external js file?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No,
    the external file start with:
    $(document).ready(function(){

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Make sure you include the jquery js first then the lightbox.js

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="lightbox/lightbox.js"></script>
    Also check if the path to the lightbox.js is correct. And check the javascript console or firebug for any errors.

    Does the code work before you added lightbox as an external js?


  •  

    Posting Permissions

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