SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member Trav5567's Avatar
    Join Date
    Dec 2012
    Location
    Atlanta
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Confusion on how to make this work(sliding with query)

    I am trying to get it where you hover over a box it stretches out to display more information. I am still considered a nube when it comes to jquery and was hoping someone could tell me the best way of doing this.
    I set up a JSFIDDLE account as well: http://jsfiddle.net/eKszw/


    Any help wold be greatly appreciated, thanks.

  2. #2
    SitePoint Member Trav5567's Avatar
    Join Date
    Dec 2012
    Location
    Atlanta
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It currently reveals all the boxes with the same class name instead of just revealing the info on the box that was hovered. trying to make it so it gracefully degrades when jquery is off too

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    Aveiro, Portugal
    Posts
    164
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    If you want to expand the div for more info, you can't use the class name as more than one box can have the same class name for styling.
    Apply an individual id for each box and then access them for animation via jquery.

    So, add an id to the div:
    HTML Code:
    <div class="work">
        <div id="bottom">
              <div id="workwrapper">
                   <div class="work">
                      <div id="web1" class="web"> <img src="images/portfolio/web-inhealth.jpg" alt="InHealth CDS">
                         <div class="info1">
                           <h2>Web Design</h2>
                           <p>A flash based website using the Gaia Framework. This site was initially built for a young entertainment company out of Atlanta.</p>
                           <a href=""><span>Read more</span></a> </div>
    and then in jquery, replace calls:
    Code:
     $('.work #bottom .work .info').hide();
    to something like:
    Code:
     $('#info1').hide();
    HTH
    Yours truely
    Mário Ramos

  4. #4
    SitePoint Member Trav5567's Avatar
    Join Date
    Dec 2012
    Location
    Atlanta
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that would work except that i am going to have allot of those boxes and would have to create a hover event for each id and wold become redundant after a while.
    Thanks

  5. #5
    SitePoint Member Trav5567's Avatar
    Join Date
    Dec 2012
    Location
    Atlanta
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Figured out the answer to my problem
    i was able to use the find selector and select the specific element with-in the current selector.
    $(this).find(".info").show(0);

    Take a look at my JSfiddle account to see it fixed http://jsfiddle.net/eKszw/2/

    thanks

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    Aveiro, Portugal
    Posts
    164
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Trav5567 View Post
    Figured out the answer to my problem
    i was able to use the find selector and select the specific element with-in the current selector.
    $(this).find(".info").show(0);

    Take a look at my JSfiddle account to see it fixed http://jsfiddle.net/eKszw/2/

    thanks
    Nice
    Yours truely
    Mário Ramos


Tags for this Thread

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
  •