www.webdeveloper.com
Results 1 to 9 of 9

Thread: Switcharoo

  1. #1
    Join Date
    Apr 2012
    Posts
    11

    Switcharoo

    Hi,

    Been working on this for ages and can't get the hang of it.

    Basically I have two links 'menu' and 'buy this image'.
    At present when you click 'menu' it drops down a slider with the menu content on it. And also it hides the 'buysection' content that is on the slider.

    However.

    I can't figure out how to do it the other way round.
    So when you click 'buy this image' it drops down a slider with the 'buysection' content on it. And it hides the 'menu' content which will be called 'static'



    Code:
    	<div id="menu">
    		<a href="#" class="topMenuAction"><h>Menu</h></a>
           </div>
           
    	<div id="buy">
    		<a href="#" class="topMenuActionBuy"><h>Buy this image</h></a>
    	</div>
    	
    
    
    <script type="text/javascript">
    	$(document).ready(function() {
    		$("#sliderdrop").animate({ 
    		marginTop: "-295px"}); 
    	
    		$(".topMenuAction").click( function() {
    		$("#buysection").animate({ 
    		marginTop: "-295px", height:"330px" 
    		}, 900 )
    		$("#topMenuImage").html('-');
    			if ($("#openCloseIdentifier").is(":hidden")) {
    				$("#sliderdrop").animate({ 
    					marginTop: "-295px", height:"330px" 
    					}, 900 );
    					
              $("#openCloseIdentifier").show();
    			} else {
    				$("#sliderdrop").animate({ 
    					marginTop: "0px", height:"100%"
    					}, 600 );
    
    				$("#openCloseIdentifier").hide();
    			}
    		});  
    	});
    	</script>
    	
    
    	
    	
    	<div id="sliderWrap">
    		<div id="openCloseIdentifier"></div>
    		<div id="sliderdrop">
    			<div id="sliderContent">
    Any ideas? I'm at a real dead end.

  2. #2
    Join Date
    Apr 2012
    Posts
    11
    does this make sense to anyone?

  3. #3
    Join Date
    Nov 2010
    Posts
    1,029
    Quote Originally Posted by alexdpm View Post
    does this make sense to anyone?
    possibly... but not to me. You've showed about half the html that you are using, with some javascript mysteriously plonked into the middle of it.

    is that really what your code looks like?

  4. #4
    Join Date
    Apr 2012
    Posts
    11
    Ha yeh it's pretty messy at the mo as i'm just testing/playing with stuff.

    Basically here, when topMenuAction is clicked, #buysection moves to that position:

    Code:
    	$(".topMenuAction").click( function() {
    		$("#buysection").animate({ 
    		marginTop: "-295px", height:"330px" 
    		}, 900 )
    I want another option that is the opposite. So when topMenuActionBuy is clicked, #menusection moves to that position of marginTop: "-295px", height:"330px.

    But when i used this code nothing happens at all to anything:

    Code:
    	$(".topMenuActionBuy").click( function() {
    		$("#menusection").animate({ 
    		marginTop: "-295px", height:"330px" 
    		}, 900 )

  5. #5
    Join Date
    Nov 2010
    Posts
    1,029
    so show us your full code. dribbling out snippets like this is useless

  6. #6
    Join Date
    Apr 2012
    Posts
    11
    Excuse the mess!

    Code:
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
            <script type="text/javascript" src="js/jquery.easing.1.3.js" ></script>
    	<script type="text/javascript" src="js/menu.js" ></script>
    
    	<link rel="stylesheet" type="text/css" href="css/main.css" />
    
    </head>
    
    <body>
    
    <script type="text/javascript">
    	$(document).ready(function() {
    	$("#topMenuImage").html('+');
    					$("#sliderdrop").animate({ 
    					marginTop: "-295px"})
    					; 
    	
    		$(".topMenuAction").click( function() {
    		$("#buysection").animate({ 
    					marginTop: "-295px", height:"330px" 
    					}, 900 );
    					
    		$("#topMenuImage").html('-');
    			if ($("#openCloseIdentifier").is(":hidden")) {
    			$("#topMenuImage").html('+');
    				$("#sliderdrop").animate({ 
    					marginTop: "-295px", height:"330px" 
    					}, 900 )
    					;
    					
              $("#openCloseIdentifier").show();
    			} else {
    				$("#sliderdrop").animate({ 
    					marginTop: "0px", height:"100%"
    					}, 600 )
    		            ;
    
    				$("#openCloseIdentifier").hide();
    			}
    		});  
    	});
    	</script>
    
    
    <div id="menu">
    		<a href="#" class="topMenuAction"><h>Menu</h></a>
           </div>
           
           	<div id="topMenuImage">
    		<a href="#" class="topMenuAction"><h>+</h></a>
           </div>     
           
    	<div id="buy">
    		<a href="#" class="topMenuActionBuy"><h>Buy this image</h></a>
    	</div>
    
    
    <div id="sliderWrap">
    		<div id="openCloseIdentifier"></div>
    		<div id="sliderdrop">
    			<div id="sliderContent"></div>
    						
    								
       
       	<div id="static">
            <li><a href="http://www.google.com">Link</a></li>
            <li><a href="http://www.google.com">Link</a></li>
            <li><a href="http://www.google.com">Link</a></li>
    		</br>
    	</div>
       
    
       
          	<div id="buysection">
          	<li><a href="http://www.google.com">Buy Link</a></li>
            <li><a href="http://www.google.com">Buy Link</a></li>
            <li><a href="http://www.google.com">Buy Link</a></li>
    	</div>
    
    </body>
    </html>
    Code:
    body {
          overflow:hidden;/*Needed to eliminate scrollbars*/
          background:#000;
          height: 100%;
          font-family: helvetica neue, Arial, sans-serif;
          font-size: 11px;
          color: #fff;
          line-height: 15px;
          white-space: nowrap; 
          list-style:none;
    }
    
    
    #site { position: absolute; z-index: 10; }
    
    
    /*Top menu stuff*/
    
    
    #menu {
      position:fixed;
      width: 100px;
      left:239px;
      height:25px;
      padding: 10px 0px 0px 0px;
      z-index:700;
    }
    
    #topMenuImage {
      position:fixed;
      width: 100px;
      left:274px;
      height:25px;
      padding: 10px 0px 0px 0px;
      z-index:700;
    }
    
    
    #buy {
      position:fixed;
      width: 100px;
      left:450px;
      height:25px;
      padding: 10px 0px 0px 0px;
      z-index:700;
    }
    
    #buysection{
      position:fixed;
      width: 100px;
      left:450px;
      height:25px;
      padding: 10px 0px 0px 0px;
      z-index:700;
    }
    
    
    
    #static {
     position:fixed;
     left:239px;
     margin-top:10px;
    
    }
    
    #sliderWrap {
    
      width: 100%;
    }
    
    #sliderdrop {
      position: fixed;
      background:#000;
      color:#fff;
      width: 100%;
      height: 330px;
      margin-top: -295px;
      padding:0px 0px 0px 300px;
    
    }
    
    
    #sliderContent {
      margin: 0px 0px 0px 0px;
      position: fixed;
      padding-top: 25px;
      display:inline;
      width:100%;
    }
    
    
    /* End Top menu stuff*/

  7. #7
    Join Date
    Nov 2010
    Posts
    1,029
    you need to pay attention to what your divs are enclosing. I count two divs without closing tags - sliderWrap and sliderdrop - if you do not fix your html your script will never work

  8. #8
    Join Date
    Apr 2012
    Posts
    11
    Yeh just noticed that and corrected it but it still doesn't do what I want it to

  9. #9
    Join Date
    Nov 2010
    Posts
    1,029
    it's

    like

    pulling

    teeth



    show us your code. your full code. with the html corrected. presumably js/jquery.easing.1.3.js and js/menu.js do something, too, so show us them as well.

    do you call your mechanic up on the phone and say your car is making a funny noise and expect him to fix it without seeing it?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles