Develop Reference

<button type="submit"> not working in FireFox

This is a really odd bug that I just cannot seem to figure out. I'm trying to copy the expandable search from http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/
I pretty much have it finished up except for one annoying bug. It does absolutely nothing in FireFox. In Chrome, IE and Edge when I click on the little search icon, the search expands out and I can type something and then submit it.
However, when I hover over the search icon in FireFox, absolutely nothing happens. My cursor doesn't even change to tell me it's clickable.
There is a ton of code to all of this and I don't have really any experience in Javascript, which is what I imagine is causing the problem.
It's also worth noting that I am integrating it with my wordpress site and wordpress search. And as I stated earlier, it works beautifully in all of the browsers I have tested except FireFox.
This is the HTML that I have included in my wordpress navigation menu:
<li id="sb-search" class="sb-search">
<form name="search-form" role="search" method="get" id="searchform" class="searchform" action="/">
<input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="s" id="s" />
<button type="submit" form="searchform" formmethod="get" ><i class="fa fa-search"></i></button>
</form>
</li>'
This is the javascript I have included in the header of my wordpress site:
<script>
$( document ).ready(function() {
new UISearch( document.getElementById( 'sb-search' ) );
});
</script>
And here are the three javascript files that are associated with making it work:
classie.js - http://pastebin.com/Wk5nXfkV
modernizr.custom.js - http://pastebin.com/5A7NXWLV
uisearch.js - http://pastebin.com/bQc4XkEd
There is also a lot of CSS that goes along with styling it but I can't imagine that being the problem. But if anyone would like the CSS then just let me know and I'll update the post.

I was able to figure this out after spending 2 hours this morning scouring the internet for answers to this mysterious problem.
I came across this article.
I scrolled down to the bottom and what he says to do after the Update (07-April-2013) worked perfectly for me. I had to change a few of my styles but other than that it worked flawlessly.
Here is an excerpt of what worked for me:
As several commenters mentioned, my recommendation results in an empty element. I wasn’t too concerned about that at first, but as I thought about it more and more, the purist in me got a little bit upset. Yes, in an ideal world, you should be able to remove all JavaScript and CSS and the page still make sense. In this case, you’d be left with a button that has no descriptive text whatsoever. That turned my stomach and I went back to the drawing board to try and find a way to have text inside of the element without hiding it offscreen. After some tinkering, here’s what I came up with:
<style>
.btn-label {
font-size: 0;
height: 1px;
overflow: hidden;
display: block;
}
</style>
<button class="icon-envelope"><span class="btn-label">Email</span></button>
The idea is to have the descriptive text inside of the <button> element while placing the Font Awesome class on the <button> itself. This allows you to modify the inner <span> element separately from the <button>. The <span> is set to be practically invisible by using a font-size of 0, a height of one pixel (to make VoiceOver happy). The rest is used to ensure the <span> never grows any larger.
In all browsers and screenreaders mentioned in this post, the text “Email button” is announced using this pattern. The solution is something that makes the purist side of me very comfortable. You aren’t tempting fate by moving text offscreen yet the <button> element still has text inside of it. You don’t have to use ARIA to provide additional context for screen readers in this case.
--Source
So my new code is:
<li id="sb-search" class="sb-search">
<form name="search-form" role="search" method="get" id="searchform" class="searchform" action="/">
<input class="sb-search-input" placeholder="Enter your search term..." type="text" value="" name="s" id="s" />
<button type="submit" aria-label="Submit" class="fa fa-search"><span class="btn-label">Submit</span></button>
</form>
</li>

dynamic window.find not working with jQuery

I can't for the life of me figure out why this isn't working.
I want to search the current page for text using a search box. I googled and found this: http://www.javascripter.net/faq/searchin.htm . I implemented the code into my site, but it doesn't work. the function ( findString() ) works, but only when I hard-code a string (as in i can't use javascript or jquery to get the value of a text input). I made this fiddle: http://jsfiddle.net/alyda/CPJrh/4/ to illustrate the problem.
You can uncomment different lines to see what I've tested.

jQuery has a method :contains() that will make easier what you are looking for.
Take a look here: fiddle
$("button[type='submit']").click(function () {
var string = $('#search').val();
var matched = $('li:contains(' + string + ')');
matched.css('color','red');
console.log(matched);
return false;
});

I found a fix (sort of). It seems that the input needs to be placed well AFTER the content to be searched in the DOM. That means I've done the following:
<section class="content">
<h2>Fire</h2>
<h3>Fire Extinguishers</h3>
<ul>
<li>Model 240</li>
<li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
</ul>
...
<div id="navbar">
<ul>
...
</ul>
<input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
<button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
</div>
as you can see, I've moved the input (which is in the navbar div) BELOW all of the text I want to search, and used CSS to programmatically place the navbar at the top of the page. I don't particularly like this setup (as it messes with the flow of content) but since I was looking for the quickest and simplest implementation of a single-page search, it will have to do.
I would still love to know why this happens, when the javascript is at the end of the DOM where it belongs...

In firefox I noticed that the fiddle (v4) as given in the question worked, but not in the way the asker expected it to.
What happens in firefox is that the function does find the value..: you have just entered it in the input-field. Then the browser's find method seems to hang in the 'context' of the input 'control' and doesn't break out of it. Since the browser will continue to search from the last active position, if you select anything after the input-field, the function works as expected. So the trick is not to get 'trapped' in the input-field at the start of your search.
A basic (dirty) example on how to break out of it (not necessarily the proper solution nor pure jquery, but might inspire a useful routine, since you now know the root of the problem in FF):
$( "button[type='submit']" ).click(function(){
var tst=$('#search').val(); //close over value
$('#search').val(''); //clear input
if(tst){ //sanity check
this.nextSibling.onclick=function(){findString( tst );}; //example how to proceed
findString( tst ); //find first value
} else { alert('please enter something to search for'); }
return false;
});
Example fiddle is tested (working) in FF.
PS: given your specific example using <li>, I do feel Sergio's answer would be a more appropriate solution, especially since that would never run line: alert ("Opera browsers not supported, sorry..."), but the proper answer to your window.find question is still an interesting one!
PS2: if you essentially are using (or replicating) the browser's search-function, why not educate the user and instruct them to hit Ctrl+F?
Hope this helps!

I had same problem in an angularjs app and I fix it by changing DOM structure.
my HTML code was something like this:
<body>
<div class="content" >
<input class="searchInput" />
<p>
content ....
</p>
</div>
</body>
and I changed it to something like this:
<body>
<div class="search">
<input class="searchInput" />
</div>
<div class="content">
<p>
content ....
</p>
</div>
</body>
Note: I'm aware that this topic is old.

Why isn't my rollover image working?

I have a code for my site, when an image is clicked a pop up window displays which is working fine. However, whenever I roll over the first rollover works, but the original image before the rollover does not show anymore? why is this?
<input name="image" type="image" onMouseOver= src="http://japanesefriend.zxq.net/images/x11_title.gif" onMouseOut= src="http://japanesefriend.zxq.net/images/level4_nouns_08.gif'" value="Place Order" src="http://japanesefriend.zxq.net/images/level4_nouns_08.gif" onClick='styledPopupOpen("<img src=http://japanesefriend.zxq.net/flashcards/go.gif />")' align=middle width=164 height=154>

Use CSS sprites for rollovers.

Your HTML is invalid.
This...
onMouseOver= src="http://japanesefriend.zxq.net/images/x11_title.gif"
should be this...
onMouseOver="this.src='http://japanesefriend.zxq.net/images/x11_title.gif'"
Same for the onMouseOut...
onMouseOut="this.src='http://japanesefriend.zxq.net/images/level4_nouns_08.gif'"
DEMO: http://jsfiddle.net/XBLfN/
Or you can eliminate this. and just do src='http://...
onMouseOver="src='http://japanesefriend.zxq.net/images/x11_title.gif'"
onMouseOut="src='http://japanesefriend.zxq.net/images/level4_nouns_08.gif'"
DEMO: http://jsfiddle.net/XBLfN/1/

see: rollover image with buttons
this seems to be a duplicate - the solution in the above question shoudl work for you.
For chrome (and even for other browsers), it is always a good idea to validate your html:
http://validator.w3.org/

Highilight a button after pushing javascript

I'm trying to make simple image gallery with html/css and a bit of javascript.It's all up and working, but one function.
I want that when I open the index.html 'All' would be already highlighted by my custom style and if pushed on another button highlight would go to that particular button.
html of a button looks like this
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
edit: I ended up using OnResolve's method and it worked just fine!(even for someone who doesn't know any JS) Thank you all for help :)

Assuming your highlighted class is called activeButton, you could do the following with jQuery
$(function () {
$(".cat-itemem").click(function () {
$(".cat-itemem").removeClass('activeButton');
$(this).addClass('activeButton');
}
})

I've created an example with jsfiddle for you with simple jQuery. You can see each aspect (markup, css, and jquery).
http://jsfiddle.net/p5ZUv/7/

You can certainly append styles on button click via pure css, but to unhighlight others you need javascript.
HTML:
<input type='button' value='All' class="cat-itiem highlighted" id='filterAll'>
<input type='button' value='Design' class="cat-itiem" id='filterDesign'>
<input type='button' value='Logo' class="cat-itiem" id='filterLogo'>
<input type='button' value='Photography' class="cat-itiem" id='filterPhotography'>
CSS (Add yours)
.cat-itiem{}
.highlighted{background:green}
JS (Jquery is used)
$('.cat-itiem').click(function(){$('.cat-itiem').removeClass('highlighted'); $(this).addClass('highlighted')}

jquery before() is out of order?

I have a page where you can click a link that says "add a keyword" and an input will appear and you can enter the keyword, and then convert it into a span tag on blur or the "return" key. However, I've been adding onto it to allow for an "autocomplete" feature, so I'm trying to insert a
<ul></ul>
after my input in order to do a .load inside the list.
The relevant code I have is:
var addKeywordId = 0;
$('a.add_keyword').live('click', function(){
$(this).before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" /><ul><li>hi</li></ul>');
$('.add_keyword').focus();
addKeywordId++;
});
The problem is, that my HTML structure ends up looking like this:
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
<input id="addKeyword0" class="add_keyword" type="text />
INSTEAD OF
<input id="addKeyword0" class="add_keyword" type="text />
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
Anybody know why my HTML is added out of the order I specified??
Thanks
EDIT: This seems to be working fine in Google Chrome, but not in Mozilla Firefox.. :(

This is likely due to the weird rejiggering of code Firefox does to try to display things even when there are errors. I've seen it where I miss a closing div, IE freaks out (as it should) and Firefox looks fine, as it ignores that you missed adding the ending div and guesses.
You could try a 2 stage thing. I would add an id to the ul tag, then add the input before it.
$(this).before('<ul id="ulid"><li>hi</li></ul>');
$('#ulid').before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" />');
Happy haxin.
_wryteowl