www.webdeveloper.com
Results 1 to 6 of 6

Thread: Help on Sliding Panel

  1. #1
    Join Date
    May 2014
    Posts
    3

    Help on Sliding Panel

    Hello!

    I'm new in the javascript world, still trying to get myself around that.

    I found this script online http://jsfiddle.net/bWTwL/ and i need help. It works but I need to create more than one link. how can I do that??

    Thanks

  2. #2
    Join Date
    Feb 2014
    Location
    india
    Posts
    14
    you can same thing how much ever you want if you know how to copy paste analyse the codes and create how many ever links you want.
    code:<!doctype html>
    <html lang="en">
    <html>
    <body>
    <ul class="menu">
    <li><a id="home" href="#">Home</a></li>
    <li><a id="about-me" href="#">About Me</a></li>
    <li><a id="copy" href="#">just copy</a></li>
    <li><a id="paste" href="#">paste</a></li>
    </ul>

    <div class="panel">
    <div class="home">
    <span class="close">X</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
    </div>
    </div>

    code: $(document).ready(function() {
    $('#home').on('click', function() {
    $('div.panel').animate({
    'width': 'show'
    }, 1000, function() {
    $('div.home').fadeIn(500);
    });
    });
    $('#copy').on('click', function() {
    $('div.panel').animate({
    'width': 'show'
    }, 1000, function() {
    $('div.home').fadeIn(500);
    });
    });
    $('#paste').on('click', function() {
    $('div.panel').animate({
    'width': 'show'
    }, 1000, function() {
    $('div.home').fadeIn(500);
    });
    });



    $('span.close').on('click', function() {
    $('div.home').fadeOut(500, function() {
    $('div.panel').animate({
    'width': 'hide'
    }, 1000);
    });
    });
    });

  3. #3
    Join Date
    May 2014
    Posts
    3
    Hey

    Thanks for the reply. I've tried and it didn't work. What am I doing wrong here?


    <!-- code -->
    <div class="panel">
    <div class="gallery">
    <span class="close">X</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
    </div>
    </div>

    <div class="panel">
    <div class="rates">
    <span class="close">X</span>
    <p>RATES Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam</p>
    </div>
    </div>

    <script>
    $(document).ready(function() {
    $('#gallery').on('click', function() {
    $('div.panel').animate({
    'width': 'show'
    }, 1000, function() {
    $('div.gallery').fadeIn(500);
    });
    });

    $('#rates').on('click', function() {
    $('div.panel').animate({
    'width': 'show'
    }, 1000, function() {
    $('div.rates').fadeIn(500);
    });
    });

    $('#about').on('click', function() {
    $('div.panel').animate({
    'width': 'show'
    }, 1000, function() {
    $('div.home').fadeIn(500);
    });
    });

    $('#contacts').on('click', function() {
    $('div.panel').animate({
    'width': 'show'
    }, 1000, function() {
    $('div.contacts').fadeIn(500);
    });
    });



    $('span.close').on('click', function() {
    $('div.gallery').fadeOut(500, function() {
    $('div.panel').animate({
    'width': 'hide'
    }, 1000);
    });
    });

    $('span.close').on('click', function() {
    $('div.rates').fadeOut(500, function() {
    $('div.panel').animate({
    'width': 'hide'
    }, 1000);
    });
    });

    $('span.close').on('click', function() {
    $('div.about').fadeOut(500, function() {
    $('div.panel').animate({
    'width': 'hide'
    }, 1000);
    });
    });

    $('span.close').on('click', function() {
    $('div.contacts').fadeOut(500, function() {
    $('div.panel').animate({
    'width': 'hide'
    }, 1000);
    });
    });

    });
    </script>
    <!-- -->

    Thanks

  4. #4
    Join Date
    May 2014
    Posts
    3
    Can anybody help me in that problem please??

    I've tried everything I could and it doesn't work. What I need is to able to slide a div when someone click on the menu, however if you have something "opened" it should close before show the next content. Does it make sense??

    Thanks for you help! I really really appreciate it.

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,346
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  6. #6
    Join Date
    May 2014
    Posts
    899
    This really looks like another case of "javascript for nothing" in modern browsers, and a slew of redundant jQuery nonsense as well. The only reason there should be any JS is for legacy browsers, or to help with letting CSS3 do the animations for you (since FF and chrome are re-re's about resizing to height or width:auto)

    Though the other thing wrong is trying to stuff multiple pages into a mess of inaccessible scripting all to avoid those "evil pageloads" -- replicating fieldset behavior with JS is NOT good coding or accessible design -- it's scripting for nothing and just making the page harder to use.

    That said, if you REALLY insist on doing this, the answer is :target for modern browsers, with a scripting fallback for IE9/earlier. (since IE9 also can't do transitions).

    http://www.cutcodedown.com/for_other.../template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/iconio

    Is unlocked for access to the gooey bits. Because the scripting is inside IE conditionals the IE9/earlier scripting will only work in REAL IE9/earlier, and not IE 11's emulation mode.

    Works well in all modern browsers and IE 10/newer WITHOUT resorting to JavaScript or any silly library like jQuery. The polyfill I wrote for IE9/earlier appears to run properly all the way back to IE 5.5, though naturally the scripted animation is jerky compared to the native CSS3 equivalent thanks to JS' crummy timer resolution. That too doesn't rely on any fat bloated library, and since it auto-attaches itself so long as your #mainMenu anchors point at a valid ID on the page, they'll automatically be added so you don't have to target each one manually.

    Fun, huh?

    -- edit -- oops, forgot to snag the 'close' buttons in the polyfill. Heading for some grub, but I'll try to address that afterwards since it's a nice lazy hazy summer sunday afternoon.

    -- edit edit -- ok, fixed now. Also fixed a depth sorting bug in the polyfill.
    Last edited by deathshadow; 06-01-2014 at 12:59 PM.
    Java is to JavaScript as Ham is to Hamburger.

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