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

    Cookies lagging/reading the wrong input?

    Hello folks!

    I've been stuck on this problem for days now, finally decided to seek out pro help before banging my head bloody. Super grateful for any kind of fix or nudges in the right direction!

    I have a collapsable sidebar, and cookies to remember whenever the it should be open or not. Then one button at the very top of the page to either open or close it (.icon-menu), and one button on the actual sidebar to just close it (.icon-close), should you want to close it while in the middle of a page without having to scroll to the top.

    My problem is, if you close the sidebar, and then click somewhere else, the sidebar shows up for a second before disappearing again. Seeing as it moves the entire page's content with it, it's a rather annoying bug. Here is my testing site.

    So without further ado, the code
    Code:
    <script type='text/javascript' src='http://yourjavascript.com/1211131136/jquery.cookie.js'></script>
    <script type='text/javascript'>
    /**code written by kismet of RPG-Directory.com**/
    
    
    $(function(){
        var cookie1 = 'sky';
    
    
    if($.cookie(cookie1) === 'on' ||
    $.cookie(cookie1) === null){
    $('.menu').animate({
        left: "-240px"
        }, 200);
    
    $('body').animate({
        left: "0px"
        }, 200); }
    
    else {
    $('.menu').animate({
        left: "0px"
        }, 200);
    
    $('body').animate({
        left: "240px"
        }, 200); }
    
    
    $('.icon-close').click(function(){
    
        $.cookie(cookie1, 'on');
    
    $('.menu').animate({
        left: "-240px"
        }, 200);
    
    $('body').animate({
        left: "0px"
        }, 200);
    
    });
    
    
    $('.icon-menu').click(function(){
    
    if($.cookie(cookie1) === 'on' ||
    $.cookie(cookie1) === null){
    
        $.cookie(cookie1, 'off');
    
    $('.menu').animate({
        left: "0px"
        }, 200);
    
    $('body').animate({
        left: "240px"
        }, 200); }
    
    else {
    
        $.cookie(cookie1, 'on');
    
    $('.menu').animate({
        left: "-240px"
        }, 200);
    
    $('body').animate({
        left: "0px"
        }, 200); }
    
    });
    });
    </script>
    Thank you so much && big cheers!!

  2. #2
    Senior Coder
    Join Date
    Aug 2010
    Posts
    1,129
    Thanks
    30
    Thanked 252 Times in 250 Posts
    Code:
    <html>
    <head>
        <meta charset="utf-8">
        <title>While</title>
        <script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js></script>
        <script type='text/javascript' src=http://yourjavascript.com/1211131136/jquery.cookie.js></script>
    </head>
    <body>
        <div class=menu>
            watch this
            <div class=icon-close>IC</div>
        </div>
        <div class=container>
        <div class=icon-menu>IM</div>
        <div>wwwwwww</div></div>
        <script type='text/javascript'>
            /**code written by kismet of RPG-Directory.com**/
            /**edited by Davey Erwin of daveyerwin.com **/
                $(function () {
                    $('.menu').css({position:'absolute',left:0});
                    $('.container').css({position:'relative'});
                    if ($.cookie('cookie1') == 'on' || $.cookie('cookie1') == null) 
                           $('.container').css({left:240});  
                    else   $('.menu').css({left:-240});
         })
                $('.icon-close').click(function () {
                    $.cookie('cookie1', 'off');
                    $('.menu').animate({
                        left: "-240px"
                    }, 200); 
                    $('.container').animate({
                        left: "0px"
                    }, 200);
                });
                $('.icon-menu').click(function () {
                    if ($.cookie('cookie1') === 'on' ||
                    $.cookie('cookie1') === null) {
                        $.cookie('cookie1', 'off');
                        $('.menu').animate({
                            left: "-240px"
                        }, 200);
                        $('.container').animate({
                            left: "0px"
                        }, 200); 
                    } else {
                        $.cookie('cookie1', 'on');
                        $('.menu').animate({
                            left: "0px"
                        }, 200);
                        $('.container').animate({
                            left: "240px"
                        }, 200);
                    }
                });
        </script>
    </body>
    </html>
    
    
    
    
    
    
    
    
    
    
    
    
    
    Last edited by DaveyErwin; 11-06-2015 at 03:49 AM.

  3. Users who have thanked DaveyErwin for this post:

    Halloween (11-06-2015)

  4. #3
    New to the CF scene
    Join Date
    Nov 2015
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Wow, that was fast! Thank you!

    Unfortunately, this didn't work for me; making a custom html file with your code, I could only close the menu, not open it again through the IM, and on-site, replacing .container with body, it moved the entire site 240px to the left and the icon menu disappeared. I need it to be in the body tag since I'm building off a specific structure from the host site.

    But thank you still, recoding this as you did must have been a hassle

  5. #4
    Senior Coder
    Join Date
    Aug 2010
    Posts
    1,129
    Thanks
    30
    Thanked 252 Times in 250 Posts
    If you animate the body the
    menu will follow no need
    to animate menu

    Code:
    <html>
    <head>
        <meta charset="utf-8">
        <title>While</title>
        <script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js></script>
        <script type='text/javascript' src=http://yourjavascript.com/1211131136/jquery.cookie.js></script>
    </head>
    <body>
        <div class=menu>
            watch this
            <div class=icon-close>IC</div>
        </div>    
        <div class=icon-menu>IM</div>
        <div>wwwwwww</div>
        <script type='text/javascript'>
            /**code written by kismet of RPG-Directory.com**/
            /**edited by Davey Erwin of daveyerwin.com **/
    $(function () {
         $('.menu').css({position:'absolute',left:-240});
         $('body').css({position:'relative'});
         if ($.cookie('cookie1') == 'on' || $.cookie('cookie1') == null) 
             $('body').css({left:240});  
         else   $('.menu').css({left:-240});
    })
    $('.icon-close').click(function () {
         $.cookie('cookie1', 'off');                 
         $('body').animate({
             left: "0px"
             }, 200);
    });
    $('.icon-menu').click(function () {
           if ($.cookie('cookie1') === 'on' ||
           $.cookie('cookie1') === null) {
              $.cookie('cookie1', 'off');                    
              $('body').animate({
                  left: "0px"
              }, 200); 
            } else {
               $.cookie('cookie1', 'on');                    
               $('body').animate({
                    left: "240px"
                    }, 200);
            }
     });
        </script>
    </body>
    </html>
    
    
    Last edited by DaveyErwin; 11-06-2015 at 12:58 PM.


 

Tags for this Thread

Posting Permissions

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