Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Help Debugging code

  1. #1
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Wink Help Debugging code

    Problem: Keep getting errors on my site. Could someone check my site/'code and see if you can find my problem?

    here is the link to my site: http://www.rezzurrectiontaxidermy.com

    Here is my code:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Rezzurrection Taxedermy</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="css/media-queries.css" type="text/css"/>
    <link rel="stylesheet" href="css/magnific-popup.css" type="text/css"/>
    <style type="text/css">
    #fadeshow1 {
    	position: absolute !important;
    	bottom: 30px;
    	left: 50%;
    	margin-left: -500px;
    }
    #slideshowtoggler {
    	position: absolute;
    	bottom: 0;
    	text-align: center;
    	width: 100%;
    }
    #slideshowholder {
    	position: fixed;
    	bottom: -530px;
    	left: 0;
    	width: 100%;
    }
    #coninfo {
    	position: absolute !important;
    	bottom: 30px;
    	left: 50%;
    	margin-left: -500px;
    }
    
    #map_canvas {
    	position: absolute;
    	bottom: 30px;
    	left: 125%;
    	margin-left: -1000px;
    	width: 500px;
    	height: 500px;
    }
    
    #contactholder{
    	position: fixed;
    	bottom: -550px;
    	left: 0;
    	width: 100%;
    }
    
    #popupholder{
    	position:fixed;
    	bottom: -530px;
    	left: 0;
    	width: 100%;
    }
    
    #popup{
    	position:absolute;
    	bottom: 30px;
    	left: 50%;
    	margin-left: -500px;
    }
     
    html, body {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	overflow:hidden;
    } 
    
    #filter{
    	position: fixed;
    }
    
    </style>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.delay.js"></script>
    <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
    <script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
    
    
    
    <script>
    	$(document).ready(function() {	
    		$('.item0 a').click(function(){
    			$('#Main').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item0 a').click(function(){
    			$('#Main').animate({bottom: -630});
    		});
    
    		$('.item1 a').click(function(){
    			$('#popupholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item1 a').click(function(){
    			$('#popupholder').animate({bottom: -530});
    
    		$('.item2 a').click(function(){
    			$('#slideshowholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item2 a').click(function(){
    			$('#slideshowholder').animate({bottom: -530});
    		});
    
    		$('.item4 a').click(function(){
    			$('#contactholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item4 a').click(function(){
    			$('#contactholder').animate({bottom: -550});
    		});
    		
    		
    
    
    
    		$("#menu, #white_line, #logo, #Main").css("opacity","0");
    		$("#menu").stop().animate({
    				opacity: 0.9,
    				marginLeft: '50px' 
    		}, 2400, 'easeInSine');
    		$("#white_line, #logo, #Main").stop().animate(
    			{opacity: 0.7},
    			{duration:2400,easing: 'easeInSine'
    		})
    	
    		$('#menu span').mouseenter(function(element) {
    			$("#menu ul li").css("opacity","1");
    			$('#white_line').stop().animate(
    				{top: 40, height:290},
    				{duration:500,easing: 'easeOutBack'}
    			)
    			$("#menu ul li").eachDelay(function(){ 
    				$(this).stop().animate({
    				opacity: 1,
    				marginLeft: '0px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'easeOutBack');			
    			}, 30);			
    		});
    		
    		$('#menu').mouseleave(function(element) {
    			$("#menu ul li").eachDelay(function(index){ 
    				$(this).stop().animate({
    				opacity: 0,
    				marginLeft: '-200px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'linear');	
    				if(index == $("#menu ul li").size() -1){
    					$('#white_line').stop().animate(
    						{top: 79, height:1},
    						{duration:600,easing: 'easeInBack'
    					})
    				}
    			}, 30);
    			
    			
    		});
    		
    		
    		
    		
    		$('#menu ul li').mouseenter(function(element) {			
    			$('#menu ul li').not(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '0.5' 
    			}, 500, 'linear');
    			$(this).stop().animate({
    				backgroundPosition: "300px 0px",
    				opacity: '1' 
    			}, 600, 'easeOutBounce');	
    			$(this).find('a').css("color","#916153");
    		});
    		
    		$('#menu ul li').mouseleave(function(element) {			
    			$(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '1' 
    			}, 200, 'linear');	
    			$(this).find('a').css("color","#000");
    		});
    		
    	});
    </script>
    
    <script type="text/javascript" src="js/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    var $ = jQuery;
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [1000, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["./Rez_Pics/Slide1.png"],
    		["./Rez_Pics/Slide2.png"],
    		["./Rez_Pics/Slide3.png"],
    		["./Rez_Pics/Slide4.png"],
    		["./Rez_Pics/Slide5.png"],
    		["./Rez_Pics/Slide6.png"],
    		["./Rez_Pics/Slide7.png"],
    		["./Rez_Pics/Slide8.png"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1000, //transition duration (milliseconds)
    	descreveal: "none",
    	togglerid: "slideshowtoggler"
    })
    
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$('.popup-gallery').magnificPopup({
    		delegate: 'a',
    		type: 'image',
    		tLoading: 'Loading image #%curr%...',
    		mainClass: 'mfp-img-mobile',
    		gallery: {
    			enabled: true,
    			navigateByImgClick: true,
    			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    		},
    		image: {
    			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
    		}
    	});
    })
    </script>
    <!--[if lt IE 9]>
    <style type="text/css">
    #bg, {
    	background-image: none !important;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
    }
    
    #Main {
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Main_Body.png', sizingMethod='scale');
    }
    </style>
    <![endif]-->
    </head>
    <body >
    
    <div id="pagewrap">
    		
    	<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;overflow:hidden;"></div>
    		
    
    	<div id="content1">		
    		<div id="filter"></div>		
    		<div id="white_line"></div>
    		<div id="menu">
    			<span></span>
    			<ul>
    				<li class="item0"><a href="#">Home</a></li>
    				<li class="item1"><a href="#">Gallery</a></li>
    				<li class="item2"><a href="#">Field Care</a></li>
    				<li class="item3"><a href="#">Braggin' Rights</a></li>
    				<li class="item4"><a href="#">Contact</a></li>
    				
    			</ul>
    			
    		</div>
    		
    	</div>
    		<div id="logo">
    			<a href="./index.html"><img src="./Rez_Pics/RezzTax-Black2.png" style="border: 0;"></a>
    		</div>
    		<div id="Main">
    			<img src="./Rez_Pics/Main_Body.png" style="position:absolute; width:100%;">
    		</div>
    		<div id="FaceBook">
    			<a href="https://www.facebook.com/RezzurrectionTaxidermy" rel="external" >
    				<img src="./Rez_Pics/camo-facebook-icon.png" style="position:absolute; width:100%; border: 0;"/>
    			</a>
    		</div>
    </div>
    		
    			<div id="slideshowholder">
    				<div id="fadeshow1"></div>
    					<div id="slideshowtoggler">
    						<a href="#" class="prev">		
    							<img src="./Rez_Pics/left.png" style="border-width:0" /></a> 
    								<span class="status" style="margin:0 50px; font-weight:bold"></span> 
    						<a href="#" class="next">
    							<img src="./Rez_Pics/right.png" style="border-width:0" /></a>
    					</div>
    			</div>
    			<div id="contactholder">
    				<div id="coninfo"><img src="./Rez_Pics/ContactInfo.png"></div>
    				<div id="map_canvas">
    					<iframe width="500" height="500" frameborder="0" scrolling="no" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=2788+highway+ff,+eureka+mo&amp;aq=&amp;sll=38.304661,-92.437099&amp;sspn=6.886173,9.876709&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=2788+FF,+Eureka,+Missouri+63025&amp;ll=38.460982,-90.65094&amp;spn=0.033604,0.04283&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
    				</div>
    			</div>
    						
    			<div id="popupholder">
    				<div id="popup" class="popup-gallery">
    					<a href="./Rez_Pics/DeerHead1.png"><img src="./Rez_Pics/1789tn.png" width="75" height="75"></a>
    					<a href="./Rez_Pics/"><img src="./Rez_Pics/" width="75" height="75"></a>
    				</div>
    			</div>
    
    
    
    </body>
    </html>
    Last edited by Beverleyh; 09-05-2013 at 09:00 AM. Reason: formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,999
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    Do you mean errors in the w3 markup validator? http://validator.w3.org/

    The error-fixes are given by the validator, but I find it easier to work down the errors once I've ticked the "Show Source" option. This will give hyperlinked line numbers to the lines in your markup where the errors are present and you can fix them more easily.

    The error explanations given by the validator are 'standard' so you will find the answers if you Google them, for example, the first JavaScript error can be fixed from this search: http://stackoverflow.com/questions/1...rror-caused-by

    If you need further help, please ask a more specific question - your original one is too vague.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Sorry for being so vague, but I coming up with 2 errors.

    1st error
    Message: Expected '}'
    Line: 185
    Char: 1
    Code: 0
    URI: http://rezzurrectiontaxidermy.com/
    On this first one Ive checked it several times and I don't see where I'm missing a closing bracket. That's why I think I need an extra set of eyes.

    2nd error
    Message: Object doesn't support property or method 'magnificPopup'
    Line: 222
    Char: 2
    Code: 0
    URI: http://rezzurrectiontaxidermy.com/
    Then this one I'm not really understanding.

    Thanks Beverley

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    The first error is here, add the highlighted:

    Code:
    <script>
    	$(document).ready(function() {	
    		$('.item0 a').click(function(){
    			$('#Main').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item0 a').click(function(){
    			$('#Main').animate({bottom: -630});
    		});
    
    		$('.item1 a').click(function(){
    			$('#popupholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item1 a').click(function(){
    			$('#popupholder').animate({bottom: -530});
    		});
    		$('.item2 a').click(function(){
    			$('#slideshowholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item2 a').click(function(){
    			$('#slideshowholder').animate({bottom: -530});
    		});
    
    		$('.item4 a').click(function(){
    			$('#contactholder') . . .
    It doesn't show up for the script parsers until the end of that script block though, that's why it's so confusing. There could be other problems with that block. We won't know for sure until you fix that one. But in limited testing, that appears to fix it.

    The browser cache may need to be cleared and/or the page refreshed to see changes.

    The other error is pretty straightforward. magnificPopup is not defined. That means that you forgot to add either the external script or the on page code that defines it.

    Upon closer inspection I see you do have:

    Code:
    <link rel="stylesheet" href="css/magnific-popup.css" type="text/css"/>
    and:

    Code:
    <script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
    but both are 404 Not Found.

    You can get those files for this script here:

    https://github.com/dimsemenov/Magnif...ee/master/dist

    And the docs for it are here:

    http://dimsemenov.com/plugins/magnif...mentation.html
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    On the first one, I swear I looked at that a hundred times but couldn't see where I needed a closing bracket!

    On the second error I think I forgot to upload those files to my server, so we'll see about that one. Thanks for the help. Ill let you know if something still isn't right

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I still see a problem. That jquery.magnific-popup.js requires jQuery at least version 1.7 or later because it uses the newer .on() and .off() syntax when assigning/removing events from elements. The page is currently using jQuery 1.3.2, which is rather outdated.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Ok, added the following:

    <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
    Now the menu won't work right. Any ideas on why?

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    rezzurrectiontaxidermy.com/js/jquery.backgroundPosition.js is out of date. Either update it or find a more current version. Or use two versions of jQuery, one for it and the menu and other stuff, another for the magnific pop script:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Rezzurrection Taxedermy</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="css/media-queries.css" type="text/css"/>
    <link rel="stylesheet" href="css/magnific-popup.css" type="text/css"/>
    <style type="text/css">
    #fadeshow1 {
    	position: absolute !important;
    	bottom: 30px;
    	left: 50%;
    	margin-left: -500px;
    }
    #slideshowtoggler {
    	position: absolute;
    	bottom: 0;
    	text-align: center;
    	width: 100%;
    }
    #slideshowholder {
    	position: fixed;
    	bottom: -530px;
    	left: 0;
    	width: 100%;
    }
    #coninfo {
    	position: absolute !important;
    	bottom: 30px;
    	left: 50%;
    	margin-left: -500px;
    }
    
    #map_canvas {
    	position: absolute;
    	bottom: 30px;
    	left: 125%;
    	margin-left: -1000px;
    	width: 500px;
    	height: 500px;
    }
    
    #contactholder{
    	position: fixed;
    	bottom: -550px;
    	left: 0;
    	width: 100%;
    }
    
    #popupholder{
    	position:fixed;
    	bottom: -530px;
    	left: 0;
    	width: 100%;
    }
    
    #popup{
    	position:absolute;
    	bottom: 300px;
    	left: 50%;
    	margin-left: -200px;
    }
     
    html, body {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	overflow:hidden;
    } 
    
    #filter{
    	position: fixed;
    }
    
    </style>
    
    <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    	$('.popup-gallery').magnificPopup({
    		delegate: 'a',
    		type: 'image',
    		tLoading: 'Loading image #%curr%...',
    		mainClass: 'mfp-img-mobile',
    		gallery: {
    			enabled: true,
    			navigateByImgClick: true,
    			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    		},
    		image: {
    			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
    		}
    	});
    })
    </script>
    
    <script type="text/javascript">
    jQuery.noConflict();
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.delay.js"></script>
    <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
    
    <script>
    	$(document).ready(function() {	
    		$('.item0 a').click(function(){
    			$('#Main').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item0 a').click(function(){
    			$('#Main').animate({bottom: -630});
    		});
    
    		$('.item1 a').click(function(){
    			$('#popupholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item1 a').click(function(){
    			$('#popupholder').animate({bottom: -530});
    		});
    
    		$('.item2 a').click(function(){
    			$('#slideshowholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item2 a').click(function(){
    			$('#slideshowholder').animate({bottom: -530});
    		});
    
    		$('.item4 a').click(function(){
    			$('#contactholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item4 a').click(function(){
    			$('#contactholder').animate({bottom: -550});
    		});
    		
    		
    
    
    
    		$("#menu, #white_line, #logo, #Main").css("opacity","0");
    		$("#menu").stop().animate({
    				opacity: 0.9,
    				marginLeft: '50px' 
    		}, 2400, 'easeInSine');
    		$("#white_line, #logo, #Main").stop().animate(
    			{opacity: 0.7},
    			{duration:2400,easing: 'easeInSine'
    		})
    	
    		$('#menu span').mouseenter(function(element) {
    			$("#menu ul li").css("opacity","1");
    			$('#white_line').stop().animate(
    				{top: 40, height:290},
    				{duration:500,easing: 'easeOutBack'}
    			)
    			$("#menu ul li").eachDelay(function(){ 
    				$(this).stop().animate({
    				opacity: 1,
    				marginLeft: '0px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'easeOutBack');			
    			}, 30);			
    		});
    		
    		$('#menu').mouseleave(function(element) {
    			$("#menu ul li").eachDelay(function(index){ 
    				$(this).stop().animate({
    				opacity: 0,
    				marginLeft: '-200px',
    				backgroundPosition: "150px 0px"
    				}, 600, 'linear');	
    				if(index == $("#menu ul li").size() -1){
    					$('#white_line').stop().animate(
    						{top: 79, height:1},
    						{duration:600,easing: 'easeInBack'
    					})
    				}
    			}, 30);
    			
    			
    		});
    		
    		
    		
    		
    		$('#menu ul li').mouseenter(function(element) {			
    			$('#menu ul li').not(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '0.5' 
    			}, 500, 'linear');
    			$(this).stop().animate({
    				backgroundPosition: "300px 0px",
    				opacity: '1' 
    			}, 600, 'easeOutBounce');	
    			$(this).find('a').css("color","#916153");
    		});
    		
    		$('#menu ul li').mouseleave(function(element) {			
    			$(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '1' 
    			}, 200, 'linear');	
    			$(this).find('a').css("color","#000");
    		});
    		
    	});
    </script>
    
    <script type="text/javascript" src="js/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    var $ = jQuery;
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [1000, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["./Rez_Pics/Slide1.png"],
    		["./Rez_Pics/Slide2.png"],
    		["./Rez_Pics/Slide3.png"],
    		["./Rez_Pics/Slide4.png"],
    		["./Rez_Pics/Slide5.png"],
    		["./Rez_Pics/Slide6.png"],
    		["./Rez_Pics/Slide7.png"],
    		["./Rez_Pics/Slide8.png"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1000, //transition duration (milliseconds)
    	descreveal: "none",
    	togglerid: "slideshowtoggler"
    })
    
    </script>
    
    <!--[if lt IE 9]>
    <style type="text/css">
    #bg, {
    	background-image: none !important;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
    }
    
    #Main {
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Main_Body.png', sizingMethod='scale');
    }
    </style>
    <![endif]-->
    </head>
    <body >
    
    <div id="pagewrap">
    		
    	<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;overflow:hidden;"></div>
    		
    
    	<div id="content1">		
    		<div id="filter"></div>		
    		<div id="white_line"></div>
    		<div id="menu">
    			<span></span>
    			<ul>
    				<li class="item0"><a href="#">Home</a></li>
    				<li class="item1"><a href="#">Gallery</a></li>
    				<li class="item2"><a href="#">Field Care</a></li>
    				<li class="item3"><a href="#">Braggin' Rights</a></li>
    				<li class="item4"><a href="#">Contact</a></li>
    				
    			</ul>
    			
    		</div>
    		
    	</div>
    		<div id="logo">
    			<a href="./index.html"><img src="./Rez_Pics/RezzTax-Black2.png" style="border: 0;"></a>
    		</div>
    		<div id="Main">
    			<img src="./Rez_Pics/Main_Body.png" style="position:absolute; width:100%;">
    		</div>
    		<div id="FaceBook">
    			<a href="https://www.facebook.com/RezzurrectionTaxidermy" rel="external" >
    				<img src="./Rez_Pics/camo-facebook-icon.png" style="position:absolute; width:75%; border: 0;"/>
    			</a>
    		</div>
    </div>
    		
    			<div id="slideshowholder">
    				<div id="fadeshow1"></div>
    					<div id="slideshowtoggler">
    						<a href="#" class="prev">		
    							<img src="./Rez_Pics/left.png" style="border-width:0" /></a> 
    								<span class="status" style="margin:0 50px; font-weight:bold"></span> 
    						<a href="#" class="next">
    							<img src="./Rez_Pics/right.png" style="border-width:0" /></a>
    					</div>
    			</div>
    			<div id="contactholder">
    				<div id="coninfo"><img src="./Rez_Pics/ContactInfo.png"></div>
    				<div id="map_canvas">
    					<iframe width="500" height="500" frameborder="0" scrolling="no" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=2788+highway+ff,+eureka+mo&amp;aq=&amp;sll=38.304661,-92.437099&amp;sspn=6.886173,9.876709&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=2788+FF,+Eureka,+Missouri+63025&amp;ll=38.460982,-90.65094&amp;spn=0.033604,0.04283&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
    				</div>
    			</div>
    						
    			<div id="popupholder">
    				<div id="popup" class="popup-gallery">
    					<a href="./Rez_Pics/DeerHead1.png"><img src="./Rez_Pics/1789tn.png" width="75" height="75"></a>
    					<a href="./Rez_Pics/"><img src="./Rez_Pics/" width="75" height="75"></a>
    				</div>
    			</div>
    
    
    </body>
    </html>
    Done like that, you don't need migrate, which only helps with some deprecated functions Others, like $.curCSS (used by the background script), was dropped too long ago to be covered by migrate.

    BTW, the:

    Code:
    <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
    is a 404 Not Found. But you do have the:

    Code:
    <script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
    and that's there. You only need one or the other, not both. The min version is better though for faster page load. But of course, to use it you would have to have it, and also of course, if you use it, get rid of the not min one's script tag.

    In the above example page I've used the not min one and gotten rid of the min one's tag.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Apr 2011
    Posts
    65
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    Thanks, that worked out great. But now it's giving me the .magnificpopup is not defined error again. I've include the right files from the links you provided above so I'm not sure as to why.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I'm not sure why either, it was working fine here in a local mock up. The idea was to copy the entire page from my previous post as is, maybe you changed something. Anyways, I was unhappy with needing 2 versions of jQuery, so I looked into the background script a little. It is a lot of outdated code, more than just that $.curCSS. The animation properties it relies upon have also changed and either use a different syntax or are unavailable in later jQuery versions. In any case it was a lot of code to allow for a little bit of laziness when calling backgroundPosition animations. All it does is allow you to do things like:

    Code:
    			$('#menu ul li').not(this).stop().animate({
    				backgroundPosition: "150px 0px",
    				opacity: '0.5' 
    			}, 500, 'linear');
    instead of:

    Code:
    			$('#menu ul li').not(this).stop().animate({
    				backgroundPositionX: 150, backgroundPositionY: 0,
    				opacity: '0.5' 
    			}, 500, 'linear');
    But, since all of your Y's are zero anyway, you can just do (and similar for the other X values):

    Code:
    			$('#menu ul li').not(this).stop().animate({
    				backgroundPositionX: 150,
    				opacity: '0.5' 
    			}, 500, 'linear');
    Here's the full working update:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Rezzurrection Taxedermy</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="css/media-queries.css" type="text/css"/>
    <link rel="stylesheet" href="css/magnific-popup.css" type="text/css"/>
    <style type="text/css">
    #fadeshow1 {
    	position: absolute !important;
    	bottom: 30px;
    	left: 50%;
    	margin-left: -500px;
    }
    #slideshowtoggler {
    	position: absolute;
    	bottom: 0;
    	text-align: center;
    	width: 100%;
    }
    #slideshowholder {
    	position: fixed;
    	bottom: -530px;
    	left: 0;
    	width: 100%;
    }
    #coninfo {
    	position: absolute !important;
    	bottom: 30px;
    	left: 50%;
    	margin-left: -500px;
    }
    
    #map_canvas {
    	position: absolute;
    	bottom: 30px;
    	left: 125%;
    	margin-left: -1000px;
    	width: 500px;
    	height: 500px;
    }
    
    #contactholder{
    	position: fixed;
    	bottom: -550px;
    	left: 0;
    	width: 100%;
    }
    
    #popupholder{
    	position:fixed;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    }
    
    #popup{
    	position:absolute;
    	bottom: 30px;
    	left: 50%;
    	margin-left: -200px;
    }
     
    html, body {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	overflow:hidden;
    } 
    
    #filter{
    	position: fixed;
    }
    
    </style>
    
    <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.delay.js"></script>
    <script type="text/javascript" src="js/fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    	$('.popup-gallery').magnificPopup({
    		delegate: 'a',
    		type: 'image',
    		tLoading: 'Loading image #%curr%...',
    		mainClass: 'mfp-img-mobile',
    		gallery: {
    			enabled: true,
    			navigateByImgClick: true,
    			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    		},
    		image: {
    			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
    		}
    	});
    
    		$('.item0 a').click(function(){
    			$('#Main').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item0 a').click(function(){
    			$('#Main').animate({bottom: -630});
    		});
    
    		$('.item1 a').click(function(){
    			$('#popupholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item1 a').click(function(){
    			$('#popupholder').animate({bottom: -530});
    		});
    
    		$('.item2 a').click(function(){
    			$('#slideshowholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item2 a').click(function(){
    			$('#slideshowholder').animate({bottom: -530});
    		});
    
    		$('.item4 a').click(function(){
    			$('#contactholder').animate({bottom: 0}, 800); return false;
    		});
    		$('#menu li a').not('.item4 a').click(function(){
    			$('#contactholder').animate({bottom: -550});
    		});
    		
    		
    
    
    
    		$("#menu, #white_line, #logo, #Main").css("opacity","0");
    		$("#menu").stop().animate({
    				opacity: 0.9,
    				marginLeft: '50px' 
    		}, 2400, 'easeInSine');
    		$("#white_line, #logo, #Main").stop().animate(
    			{opacity: 0.7},
    			{duration:2400,easing: 'easeInSine'
    		})
    	
    		$('#menu span').mouseenter(function(element) {
    			$("#menu ul li").css("opacity","1");
    			$('#white_line').stop().animate(
    				{top: 40, height:290},
    				{duration:500,easing: 'easeOutBack'}
    			)
    			$("#menu ul li").eachDelay(function(){ 
    				$(this).stop().animate({
    				opacity: 1,
    				marginLeft: '0px',
    				backgroundPositionX: 150, backgroundPositionY: 0
    				}, 600, 'easeOutBack');			
    			}, 30);			
    		});
    		
    		$('#menu').mouseleave(function(element) {
    			$("#menu ul li").eachDelay(function(index){ 
    				$(this).stop().animate({
    				opacity: 0,
    				marginLeft: '-200px',
    				backgroundPositionX: 150, backgroundPositionY: 0
    				}, 600, 'linear');	
    				if(index == $("#menu ul li").size() -1){
    					$('#white_line').stop().animate(
    						{top: 79, height:1},
    						{duration:600,easing: 'easeInBack'
    					})
    				}
    			}, 30);
    			
    			
    		});
    		
    		
    		
    		
    		$('#menu ul li').mouseenter(function(element) {			
    			$('#menu ul li').not(this).stop().animate({
    				backgroundPositionX: 150,
    				opacity: '0.5' 
    			}, 500, 'linear');
    			$(this).stop().animate({
    				backgroundPositionX: 300,
    				opacity: '1' 
    			}, 600, 'easeOutBounce');	
    			$(this).find('a').css("color","#916153");
    		});
    		
    		$('#menu ul li').mouseleave(function(element) {			
    			$(this).stop().animate({
    				backgroundPositionX: 150,
    				opacity: '1' 
    			}, 200, 'linear');	
    			$(this).find('a').css("color","#000");
    		});
    		
    	});
    
    var $ = jQuery;
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [1000, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["./Rez_Pics/Slide1.png"],
    		["./Rez_Pics/Slide2.png"],
    		["./Rez_Pics/Slide3.png"],
    		["./Rez_Pics/Slide4.png"],
    		["./Rez_Pics/Slide5.png"],
    		["./Rez_Pics/Slide6.png"],
    		["./Rez_Pics/Slide7.png"],
    		["./Rez_Pics/Slide8.png"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1000, //transition duration (milliseconds)
    	descreveal: "none",
    	togglerid: "slideshowtoggler"
    })
    
    </script>
    
    <!--[if lt IE 9]>
    <style type="text/css">
    #bg, {
    	background-image: none !important;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Logo2.jpg', sizingMethod='scale');
    }
    
    #Main {
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Rez_Pics/Main_Body.png', sizingMethod='scale');
    }
    </style>
    <![endif]-->
    </head>
    <body >
    
    <div id="pagewrap">
    		
    	<div id="bg" style="height:100%;background:#f5e6d3 url(./Rez_Pics/Logo2.jpg) center no-repeat;background-size:contain;overflow:hidden;"></div>
    		
    
    	<div id="content1">		
    		<div id="filter"></div>		
    		<div id="white_line"></div>
    		<div id="menu">
    			<span></span>
    			<ul>
    				<li class="item0"><a href="#">Home</a></li>
    				<li class="item1"><a href="#">Gallery</a></li>
    				<li class="item2"><a href="#">Field Care</a></li>
    				<li class="item3"><a href="#">Braggin' Rights</a></li>
    				<li class="item4"><a href="#">Contact</a></li>
    				
    			</ul>
    			
    		</div>
    		
    	</div>
    		<div id="logo">
    			<a href="./index.html"><img src="./Rez_Pics/RezzTax-Black2.png" style="border: 0;"></a>
    		</div>
    		<div id="Main">
    			<img src="./Rez_Pics/Main_Body.png" style="position:absolute; width:100%;">
    		</div>
    		<div id="FaceBook">
    			<a href="https://www.facebook.com/RezzurrectionTaxidermy" rel="external" >
    				<img src="./Rez_Pics/camo-facebook-icon.png" style="position:absolute; width:75%; border: 0;"/>
    			</a>
    		</div>
    </div>
    		
    			<div id="slideshowholder">
    				<div id="fadeshow1"></div>
    					<div id="slideshowtoggler">
    						<a href="#" class="prev">		
    							<img src="./Rez_Pics/left.png" style="border-width:0" /></a> 
    								<span class="status" style="margin:0 50px; font-weight:bold"></span> 
    						<a href="#" class="next">
    							<img src="./Rez_Pics/right.png" style="border-width:0" /></a>
    					</div>
    			</div>
    			<div id="contactholder">
    				<div id="coninfo"><img src="./Rez_Pics/ContactInfo.png"></div>
    				<div id="map_canvas">
    					<iframe width="500" height="500" frameborder="0" scrolling="no" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=2788+highway+ff,+eureka+mo&amp;aq=&amp;sll=38.304661,-92.437099&amp;sspn=6.886173,9.876709&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=2788+FF,+Eureka,+Missouri+63025&amp;ll=38.460982,-90.65094&amp;spn=0.033604,0.04283&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
    				</div>
    			</div>
    						
    			<div id="popupholder">
    				<div id="popup" class="popup-gallery">
    					<a href="./Rez_Pics/DeerHead1.png"><img src="./Rez_Pics/1789tn.png" width="75" height="75"></a>
    					<a href="./Rez_Pics/"><img src="./Rez_Pics/" width="75" height="75"></a>
    				</div>
    			</div>
    
    
    </body>
    </html>
    Last edited by jscheuer1; 09-07-2013 at 01:23 PM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    chadlexmorgan (09-07-2013)

Similar Threads

  1. Debugging Techniques
    By marain in forum PHP
    Replies: 3
    Last Post: 05-13-2012, 09:21 PM
  2. ASP page Debugging
    By shekhar in forum ASP
    Replies: 0
    Last Post: 01-11-2010, 06:59 AM
  3. need help debugging javascripts...
    By sethwb in forum JavaScript
    Replies: 0
    Last Post: 04-18-2009, 11:30 PM

Bookmarks

Posting Permissions

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