SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Div not showing

  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div not showing

    Hi chaps..
    I have divs that move in and out, depending on the nav clicks

    The html structure:
    HTML Code:
    <div id="contentContainer">
    <div id="content">
    <div id="home">
    <div class="image"></div>
    <h1> Title</h1>
    <p> copy </p>
    </div>// home
    </div>// content
    </div>// contentContainer
    
    
    ....and the links are simply
    
    <a href="#home" </a> etc etc
    and the js:
    Code:
    	$('p a').each(function(){
    		$(this).attr('target','_blank');
    	});
    
    	
    	var curLoaded = 'home';
    	$('#contentContainer').hide();$('#contentContainer').delay(5200);
    	// start by showing the about us section
    	$('#contentContainer').show();$('#contentContainer').animate({
    		left: 175
    	},"slow", function(){
    		// fade in the content
    		$('#' + curLoaded).fadeIn();
    	});
    
    	// navigation trigger
    	$('.mb_menu a').each(function() {
    		var $this = $(this)
    		var target = $this.attr('href').split('#')[1];
    		var $contentContainer = $('#contentContainer');
    		var oldPos = -100;
    		var newPos = 175;
    
    		// add a click handler to each A tag
    		$this.click(function(){
    		
    			if ($contentContainer.css('left') == '201px') {
    				// trigger the animation
    				$contentContainer.animate({
    					left: newPos
    				},"slow", function(){
    					// fade in the content
    					$('#' + target).fadeIn();
    				});
    			} else {
    				if (curLoaded == target) {
    					$contentContainer.animate({
    						left: oldPos
    					},"fast", function(){
    						
    						$('#content div').hide();
    					});
    				} else {
    					$contentContainer.animate({
    						left: oldPos
    					},"fast", function(){
    						$('#content div').hide();
    						$contentContainer.animate({
    							left: newPos
    						},"slow", function(){
    							$('#' + target).fadeIn();
    						});
    					});
    				}
    			}
    
    			curLoaded = target;
    
    			return false;
    		});
    
    	});
    The problem is that the h1 a p tags load...however the image div isnt showing......any ideas?

    Thanks in advance

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what error messages are you getting in the browser error console?

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    what error messages are you getting in the browser error console?
    There are no errors in Firebug


    Ive noticed that i can add a image within the 'home' div, but when i add a div (that holds the image) it doesnt show....ive done something wrong somewhere in the script

    EDIT: ok, ive changed the image div to <div class="image" style ="display: block;"> and its showing


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
  •