Creating a popup message onClick with jQuery

Question

So I want, when "search" is clicked, a little bar comes down from the top of the page with the search form, and a close button. Clicking the bar to the close button slides the popup back above the page. he code is below, however my question is "How can I do this better? It currently seems very messy! Is there a way to not use that hidden div on the page, and have it created just when the function is run on click?"

So it starts with an anchor that triggers a javascript function to topdown the search bar:

<a onClick="toggleSearch()">Search</a>

function toggleSearch() {
    $('#searchoverflow').slideToggle('fast')
};

It toggles up and down a hidden div, #searchoverflow (this is what I'd like to get rid of).

<div class="notification" id="searchoverflow">
    <a href="javascript:" onClick="toggleSearch()" style="width:100%; position:absolute;height:50px;"></a>
    <div style="width:0px"><form style="width:200px" role="search" method="get" id="searchform" action="http://thenozzle.net/"><input type="text" value="" name="s" id="s"><input style="left:5px" type="submit" id="searchsubmit" value="Search"></form></div>
    <a href="javascript:" class="notificationclose" onClick="toggleSearch()">CLOSE</a>
</div><!-- searchoverflow -->

he popup div explained: The notification class just styles it, it isn't related. The ID of search overflow is what I'm using in the javascript function, because I have other notifications on the page, and need to make this one specific. The first anchor inside the popup is what I'm using to make the search bar disappear when clicking its body. Below that, the other anchor is just case people don't realize the entire thing will make is hide. The middle div just has the search form in it.

Thanks in advance!

tl;dr I'm trying to simplify the above code in any way possible to it's more semantic, less messy, and I don't have to use that hidden popup div in the html unless necessary.

David Souther · Accepted Answer · 2011-09-06 04:28:21Z

1

I would answer by saying this is exactly what you want to be doing.

I think the code you have is very semantic. The div#searchOverflow might get renamed to div#searchbox, and I would have the click events get bound programatically, but the div absolutely should be in the DOM.

Edits, to your questions:

The insight I'm coming from is the concept of Model-View-Control from design patterns[1]. In Web development, the HTML is the model. It is the stuff you are working with, the physical parts of the page. The CSS is the view. CSS describes how you want that model displayed by default - blocks, colors, fonts, and whatnot. Javascript is the controller. It is the program code that manipulates the model and view based on the user's interactions with your web page.

We separate these concerns in different files so we can quickly change how we want each part to work. By having all the HTML in a single file, we don't need to hunt through even more code trying to find where the thing you need to edit is. Say you want to change the target of the form, because you've added a new search module on the back end. Where is someone who has never looked at your code going to look first, the .htm or .js file? I would look in the .htm file, because that's where the form tag should be (in my mind).

Then, I would move the onclick bindings to the JS. Currently, you have them in the html with onclick="toggleSearch()". Same reason- if I'm new to looking at your code, I'm going to want to look in the JS first for any programatic things. As far as how to do it:

$(function(){
    $("#searchoverflow > a").click(
        toggleSearch
    ); //'#searchoverflow > a' click handler
});  //doc ready

The wrapping $(function(){}) is a document ready handler- it will only get called once everything on the page is ready. $("#searchoverflow > a") selects just the anchors that are direct children of the containing div. .click(_function_) binds the click event, so that when anything matching that selector gets clicked, function gets run.

[1] http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

edited Sep 6, 2011 at 4:28

answered Sep 6, 2011 at 1:39

David Souther

8,1942 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

alt Over a year ago

Thanks. I wish I could get a bit more insight. It really seems like hiding a div from users and showing it with javascript isn't very nice.

alt Over a year ago

Also, what do you mean "bound programmatically"?

David Souther Over a year ago

@Jackson Gariety I added some words on MVC and why I made my recommendation. Also, I added a how-to on jquery's click function.

alt Over a year ago

However, the snippet at the bottom breaks the javascript on the page... I wonder why.

David Souther Over a year ago

Because I can't proofread my comments. I used toggleSearch(); which will run the function at bind time. You want just toggleSearch, to pass the reference to the function. I have edited my post. Sorry :/

Collectives™ on Stack Overflow

Creating a popup message onClick with jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related