Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to open a div on click of a search button exactly below the search box.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #146367
    stupid113
    Participant

    Here is my sample code http://jsfiddle.net/5NQCd/1/ What i want is, when user enters any location name (say New York) in search and press enter, div should be opened below it (in which i have plans to host google maps). The problem i am facing in placing the div. Can someone help me with it?

    Thanks in advance.

    #146377
    Tom Houy
    Participant

    You could apply a hover effect to the submit button with CSS, something like this:

    http://cdpn.io/bzope

    If you just use the Active state, it will only be visible when the button is pressed down. You would still need a little bit of javascript if you want the maps div to stay open after they release the mouse button.

    .testbox {
    background-color: #FF0;
    padding: 15px;
    height: 50px;
    width: 200px;
    display: none;
    }
    .testbutton:hover + .testbox, .testbutton:active + .testbox {
    display: block;
    }

    #146381
    stupid113
    Participant

    Hi Tom,
    You achieved this via padding, which would be good in fixed layouts. Since I am using bootstrap navbar, using padding won’t show div exactly below button. Can it be achieved with some other trick ?

    #146382
    Paulie_D
    Member

    Why is placing the div an issue?

    Just put it place as normal, however you would do that normally if it were visible all the time and then hide it.

    When the button is clicked, use JS/JQ to show it.

    Doesn’t seem that hard to me.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.