Welcome to WebDesignForums.net!
You're currently viewing WDF as a guest. By registering for a free account, you'll be able to participate with other members in our friendly community. Being a member allows you to ask questions and get answers for those troublesome web development tasks!

In addition, as a member you'll be able to post your websites up for review. Using our unique website review system you can gain some amazing feedback from some of the best web developers around. This is a completely free service to all registered members.

Ready to register yet? Registration is 100% free. Click Here To Join Now!

How do I create a defined area of a web page with an index above it that changes the area with each

Discussion in 'HTML and CSS Help' started by Glenn, May 10, 2012.

  1. Offline

    Glenn Member

    Message Count:
    135
    Likes Received:
    2
    Trophy Points:
    18
    Gender:
    Male
    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?


    Glenn, May 10, 2012
    #1

  2. WDF Go Premium, Drop Ads

  3. Offline

    TheGAME1264 The Displaced Web Redneck Moderator

    Message Count:
    9,419
    Likes Received:
    1,264
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Not from USA


    TheGAME1264, May 10, 2012
    #2
  4. Offline

    Glenn Member

    Message Count:
    135
    Likes Received:
    2
    Trophy Points:
    18
    Gender:
    Male
    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.


    Glenn, May 10, 2012
    #3
  5. Offline

    TheGAME1264 The Displaced Web Redneck Moderator

    Message Count:
    9,419
    Likes Received:
    1,264
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Not from USA
    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.)


    TheGAME1264, May 10, 2012
    #4
  6. Offline

    Ronald Roe Well-Known Member

    Message Count:
    1,122
    Likes Received:
    281
    Trophy Points:
    83
    Gender:
    Male
    Location:
    Oklahoma City/Norman/Midwest City


    Ronald Roe, May 10, 2012
    #5
  7. Offline

    Glenn Member

    Message Count:
    135
    Likes Received:
    2
    Trophy Points:
    18
    Gender:
    Male


    Glenn, May 11, 2012
    #6
  8. Offline

    TheGAME1264 The Displaced Web Redneck Moderator

    Message Count:
    9,419
    Likes Received:
    1,264
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Not from USA


    TheGAME1264, May 11, 2012
    #7
  9. Offline

    Glenn Member

    Message Count:
    135
    Likes Received:
    2
    Trophy Points:
    18
    Gender:
    Male
    No, the drop down on the menu.
    I like the way it lines up and can have lots of details.


    Glenn, May 11, 2012
    #8
  10. Offline

    TheGAME1264 The Displaced Web Redneck Moderator

    Message Count:
    9,419
    Likes Received:
    1,264
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Not from USA
    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.)


    TheGAME1264, May 11, 2012
    #9
  11. Offline

    Glenn Member

    Message Count:
    135
    Likes Received:
    2
    Trophy Points:
    18
    Gender:
    Male
    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


    Glenn, May 11, 2012
    #10
(You have insufficient privileges to reply here.)

Share This Page