So I have this now and it works, but I wanted to know if there is an optimal way of writing this as I writing a mobile site and performance if a big thing.
Think tool-tip that slides down (toggles) under the element, I also have about 30 tool tip divs on the page as this will be for multiple elements
JS:
$('.mobile-tool-tip').each(function() {
$(this).hide();
$(this).prev().focus(function() {
$(this).next().slideToggle('fast');
});
$(this).prev().blur(function() {
$(this).next().slideToggle('fast');
});
});
HTML for mobile-tool-tip function
<div data-role="fieldcontain">
<input type="text" name="telephone" id="telephone" placeholder="Phone Number*" />
<div class="mobile-tool-tip" id="telephone_tip">Valid format <strong>999-999-9999</strong>. Please include the area code.</div>
</div>
Have been using this (Thanks Hunter) to toggle elements but cant get it to work with the next() and I don't want to code each tool tip div by hand
$("[name=field_name]").change(function() {
var show = $(this).val();
$("#hidden_div").toggle(show);
});
Some simple thoughts.
So you might end up with something like this...
jsfiddle that shows a slight performance gain when triggering the event with a closure.
You can try to combine some of the calls to the DOM by using a variable to hold the $(this).next() element. Depending on how big the file is, this can cut a substantial amount of time not having to make that call twice.
A few suggestions:
.mobile-tool-tip
elements with CSS.next
orprev
elements, and it's an specific element, I always suggest to use `nextAll(".mobile-tool-tip")$(this).prev()
. Don't do it twice. A lot of functions in jQuery returns a reference to the last query made, this is what enables you to chain calls (something like$(".anElement").hide().remove()
). Make use of it to save time.focus
and other toblur
, use an deterministic method to hide/show or enable/disable elements. This'll ensure that you didn't miss any event or special occasion, and will prevent for any bug related to it.So:
});
Good luck!