Grow your CSS skills. Land your dream job.

viewing the content by fading in to the right

  • # April 6, 2013 at 2:02 am

    hi guys, have some problem here. i’ve been trying to fade in content using jQuery, but everytime i clicked the link on the left, the page view went wrong.

    Let say when i click “CSS” link on the left, the content faded in but the header is pushed away.

    This is the [example](http://cdpn.io/kBvFt “example” )

    Check out this Pen!

    I want to create something like the [SNIPPETS](http://css-tricks.com/snippets/ “sinppets”) page. Where the page view is static when we click the menu on the left.
    Please help….
    Another more simple methods are welcome. Thanks in advanced. :)

    # April 6, 2013 at 4:09 am

    what makes your page jump on link click is the href of #and id which has a special meaning in browsers . takes the page to the point where that id is found.your content changes and the id is found right next to the navigation making the header disappear from view.

    this code does what you want

    $(‘a’).click(function(e){
    e.preventDefault();
    $(‘#intro’).hide();
    $(‘.hideAll’).hide();
    var to_show = $(this).attr(‘id’)+’Play’;
    console.log(to_show);

    $(‘#’+to_show).show();

    });
    1 click doesnt do anything
    2 hides the into text ass well as every other open article
    3 shows the text related to the link

    # April 6, 2013 at 7:14 am

    Thank you for helping me pixelgrid! Your code works. But i have another problem if i add another link in the page. Let say i add links (Home, About, Contact, Forum) in the header. The links are dead if i click it. How am i gonna resolve this matter? thanks again in advanced.

    # April 6, 2013 at 7:28 am

    give the ul in the sidebar a special class like this(class given is content)

    ul class = ‘content’>

  • HTML
  • CSS
  • PHP
  • Java Script
  • JQuery
  • and change your javascript to this

    $(‘.content a’).click(function(e){
    e.preventDefault();
    $(‘#intro’).hide();
    $(‘.hideAll’).hide();
    var toShow = $(this).attr(‘id’)+’Play’;
    $(‘#’+toShow).show();
    });

# April 6, 2013 at 8:01 am

ok i get it. Thanks again pixelgrid! you are very helpfull

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".