Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Senior Member
    Join Date
    Aug 2011
    Posts
    166
    Member #
    29153
    Liked
    2 times
    How do I create a defined area of a web page with an index above it that changes the area with each rollover?
    I need to have an area that any overflow is hidden when nothing is done. I'd like, for example number 1 through 5 above it and as each number is hovered over, the overflow is shown as something different. How do I accomplish this?

    I remember using this with a "on mouse over" and "on mouse out". Could I use this with some type of overflow:hidden for the on mouse out?

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    11,541
    Member #
    425
    Liked
    1766 times
    http://api.jquery.com/hover/

    The demos aren't the greatest, but the general idea behind what you want should be there.
    I'm an expert in off-page SEO, social media optimization, and repeating everything everyone else says about these topics so that I sound like I know what I'm talking about.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  4. #3
    Senior Member
    Join Date
    Aug 2011
    Posts
    166
    Member #
    29153
    Liked
    2 times
    That didn't quiet do what I wanted it to do. I have done this before but forget how. If I have a div with a defined class, and have anchors with onmouseover and onmouseout, which would be outside of the div, as I move over each of these anchors, the contents of the div would change.

    Somehow I set the target inside the defined area even though the link was outside the area.

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    11,541
    Member #
    425
    Liked
    1766 times
    You can do that with the hover thing I posted. This is pseudo-code, but it'll give you the general idea.
    Code:
    <div class="foo"></div>
    <a href="#" class="hover-link">Link</a>
    ...
    Code:
    $("a.hover-link").hover(doStuff, doOtherStuff);
    function doStuff() {
         $(".foo").html("bar");
    }
    function doOtherStuff() {
         $(".foo").html("not bar");
    }
    Play with the jQuery version of it. If you do it right, your code will be much cleaner than the non-jQuery version and you'll be able to do a lot more stuff with it down the road (AJAX calls, etc.)
    I'm an expert in off-page SEO, social media optimization, and repeating everything everyone else says about these topics so that I sound like I know what I'm talking about.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    1,734
    Member #
    27197
    Liked
    429 times
    Roe Designs
    Web designer/Front-end developer (eat that, Game )
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Senior Member
    Join Date
    Aug 2011
    Posts
    166
    Member #
    29153
    Liked
    2 times
    That had a lot of awesome things in it. It's close to what I want, but I had rather do something like this.
    http://www.lnt.com/product/kids-bedd...ire-truck.html

  8. #7
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    11,541
    Member #
    425
    Liked
    1766 times
    Oh, you mean the zoom on the bed?

    http://www.mind-projects.it/projects/jqzoom/

    There you go.
    I'm an expert in off-page SEO, social media optimization, and repeating everything everyone else says about these topics so that I sound like I know what I'm talking about.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  9. #8
    Senior Member
    Join Date
    Aug 2011
    Posts
    166
    Member #
    29153
    Liked
    2 times
    No, the drop down on the menu.
    I like the way it lines up and can have lots of details.

  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    11,541
    Member #
    425
    Liked
    1766 times
    Ahhh. That's actually more HTML/CSS than it is Javascript. The Javascript is actually minimal in this case and can be accomplished using the jQuery hover effect that I posted before.

    The best thing you can do is to design the menus that you want without the Javascript, get them positioned and designed all nicely, then add in the Javascript afterward.

    There is a way to do this using pure CSS, but I've always found it to be flaky and I've never been a fan of it. It also is limited in what it can do (for example, you can't have the menu disappear on a timer as opposed to instantaneously, which is a problem when people hover off by accident.)
    I'm an expert in off-page SEO, social media optimization, and repeating everything everyone else says about these topics so that I sound like I know what I'm talking about.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link. Some of us are really insecure and need those likes so that we feel important and smart, so come on, help us out, huh?

  11. #10
    Senior Member
    Join Date
    Aug 2011
    Posts
    166
    Member #
    29153
    Liked
    2 times
    Quote Originally Posted by TheGAME1264, post: 235202
    Ahhh. That's actually more HTML/CSS than it is Javascript. The Javascript is actually minimal in this case and can be accomplished using the jQuery hover effect that I posted before.

    The best thing you can do is to design the menus that you want without the Javascript, get them positioned and designed all nicely, then add in the Javascript afterward.

    There is a way to do this using pure CSS, but I've always found it to be flaky and I've never been a fan of it. It also is limited in what it can do (for example, you can't have the menu disappear on a timer as opposed to instantaneously, which is a problem when people hover off by accident.)
    Here's what I have been working on. It may look a little messy as I keep changing things and trying new things. It may change from the time I post this and when you look at it, but it is what I have.

    http://www.glennbates.com/sites/site6


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:56 AM.
Powered by vBulletin® Version 4.2.0
Copyright © 2014 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com