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.

Answer 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