My code is simple. It can be found at this jsFiddle:
<div id="tabs">
<ul>
<li>About</li>
<li>Fine Print</li>
<li>Location</li>
</ul>
<div id="highlights">
highlights
</div>
<div id="fineprint">
FiNEPRINT
</div>
<div id="location">
<ul>
<li>
<address>ADDRESS</address>
</li>
<li>
MAP
</li>
</ul>
</div>
<button class="btn-placeorder"><span id="maplink">View map</span></button>
<script>
$(function(){
$("#tabs").tabs();
});
$('#maplink').click(function(){
$("#tabs").tabs("option","active",2);
});
</script>
On Firefox you will notice, even in the fiddle the tabs don't change when the view map button is clicked.
I don't work with javascript much but I'd love to gain a better understanding of how to diagnose and solve these problems. Why is this happening, how can I solve it and how can I better educate myself?
First debugging tip: use tools. Most browser's nowadays include debugging tools you can call with F12. In Firefox, the short-cut is Cmd+Opt+K or Ctrl+Shift+K though I recommend you open the add-on manager and install Firebug.
Second tip: check whether your code runs. The console API is a good start:
$('#maplink').click(function () {
console.log("Button clicked");
$("#tabs").tabs("option", "active", 2);
});
Nothing gets printed so your event is not being called. We can see it isn't attached directly to the button but to an inner <span>:
<button class="btn-placeorder"><span id="maplink">View map</span>
</button>
So we wonder: is there something wrong with onclick events on spans?
$("span").on("click", function(){
console.log("click on span: %o", this);
});
Nothing printed, so there's apparently an issue. It is possible that the button is catching the onclick event?
<button class="btn-placeorder"><span id="maplink">View map</span>
</button><span>Test span</span>
click on span: <span>
So that it's! Weird... Well, why do you need a <span> in the first place?
$('.btn-placeorder').click(function () {
console.log("Button clicked");
$("#tabs").tabs("option", "active", 2);
});
It works! All we need now is some cleanup, such as assigning a proper ID to the <button> and getting rid of the redundant <span>.
Your #maplink selector matches your inner <span> element, not its <button> parent.
Try writing:
<button id="maplink" class="btn-placeorder"><span>View map</span></button>
Instead of:
<button class="btn-placeorder"><span id="maplink">View map</span></button>
Replace the id of the span with the actual class of the button, like this:
$('.btn-placeorder').click(function(){
$("#tabs").tabs("option","active",2);
});
Even if other answers are also correct, there could be another problem, the on click event handler registration is happening outside dom ready.
Try
$(function() {
$("#tabs").tabs();
$('#maplink').click(function() {
$("#tabs").tabs("option", "active", 2);
});
});
Demo: Plunker
Related
Here is a Boostrap navigation bar, containing a dropdown menu, containing itself an <input>.
When I click on the dropdown menu, it is succesfully displayed. The value of the <input> is successfully changed to Bonjour but this <input> doesn't get the focus. Why ?
http://jsfiddle.net/rzsmdg4f/1/
How to give the focus to a input contained in a dropdown menu with .focus() ?
Code :
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="dropdown"> Dropdown<span class="caret"></span>
<ul class="dropdown-menu" role="menu" style="min-width: 250px;">
<li>
<div style="padding:4px 20px;">Link:</div>
</li>
<li>
<div style="padding:4px 20px;">
<input class="form-control" id="ha" type="text" placeholder="blabla" />
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
JS :
{
var maa = document.getElementById('maa');
console.log(maa);
maa.addEventListener('click', function () {
console.log($('#ha'));
$('#ha').val('Bonjour');
$('#ha').focus();
});
};
jsFiddle Demo
The element exists at the time of the click, so changing its value and logging it will properly show the current state of the element. However, it has not been displayed yet and as a result focusing it will not really have any effect. You could probably refactor some small snippet in the library to expose a hook that you could use to make your focus work. Or, you could make the observation that in the very next event handler the element will be visible and use a small timeout.
maa.addEventListener('click', function () {
console.log($('#ha'));
$('#ha').val('Bonjour');
setTimeout(function(){$('#ha').focus();},10);//timeout here
});
the simplest solution i came in mind is to just delay the focus. the reason its not focusing is because the element is not yet visible.
http://jsfiddle.net/xab7Leoq/
setTimeout(function() {
$('#ha').focus();
}, 100);
another solution is to find out when its getting visible, and then do it. it may be a better solution yet more complicated. :)
edit1: stopping propagation:
// Prevents the propagation
$('#ha').click(function(ev) {
ev.stopPropagation();
});
like in http://jsfiddle.net/xab7Leoq/
Figured I might as well post an answer, even if late... since this seems to work well and doesn't require setTimeout: http://jsfiddle.net/cvLbfttL/
$("#maa").focus(function () {
$('#ha').val('Bonjour');
$('#ha').focus();
return false;
});
$('#ha').click(function(){return false;});
The anchor "maa" gets the focus when clicked, and it happens after the click callback/event returns. So you can do your code in the focus event instead. I couldn't figure out how to tab to the anchor inside JSFiddle, but I assume the code would also run if you set the focus to the anchor using some other method, but that should be fine I think, maybe even nice.
An example using callback function. Man avoid to use setTimeout() function, because the results are unpredictable.
http://jsfiddle.net/v62tdn9z/
var $maa=$('#maa'), $ha=$('#ha');
$maa.mousedown( function () {
$ha.val('Bonjour');
$maa.mousemove(function () { $ha.focus(); });
});
Having a tabindex on the element could be the solution. This worked in my case.
I am trying to use JQuery toggle, so when a user clicks the info icon, the hidden div containing item information is shown / hidden. For some reason it is not working for me.
While trying to debug, I noticed that show(), correctly shows the target element that I would like to toggle. However, when I replace show() with toggle(), it does not work and does not return any error.
I was wondering if someone can help me identify the cause of this problem.
My Markup
<div class="option">
<div class="prod-text">Toy Whistle </div>
<div>
<img class="info-icon" src="Info-icon.png">
</div>
<div class="option-info" style="display:none;">
<div>
<div class="price-text">Price: $100</div>
<div class="prod-id-text">Item Number: 231912</div>
<div class="quantity-text">Quantity: 72</div>
</div>
</div>
</div>
JQuery (does not work)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').toggle();
});
JQuery (works!)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').show();
});
Many thanks in advance!
Perhaps the click event handler is getting bound twice, and thus fire twice for each click. The show() would work fine in this case, but the toggle() would show and then immediately hide the element each time you click. Try this:
$(".info-icon").click(function(){
console.log('click handler fired');
$(this).parent().parent().find('.option-info').toggle();
});
And run this with Web Inspector or Firebug enabled to see how many messages are logged for each click.
Why will this refuse to work?
HTML stuff
<div id="nav-bar">
<ul>
<li>
<span>
Contact
</span>
</li>
</ul>
</div>
Javascript stuff
$('div#nav-bar').filter('a').click(function(event){
event.preventDefault();
});
Filter only filters what is already selected. In your case, the #nav-bar element.
You need this:
$('div#nav-bar a').click(function(event){
event.preventDefault();
});
filter is the wrong method to use here. you should either use find to look for elements in a selection:
$('div#nav-bar').find('a')...
or simply combine that into one selector:
$('div#nav-bar a')...
after you've fixed that, your preventDefault will actually get applied and work, theres nothing wrong with that piece of code directly.
I'm trying to bind a click event to an anchor and I can't figure out the right selector... Is bind() particularly picky with selectors?
Here's my code which does not work:
$(".ui-navbar").delegate("a.location-menu-btn", "click", function() {
navigateToPage("location.html", { });
});
The following code does work but causes the whole body to appear like it is being clicked on an Android smartphone (ugly yellow box around the anachor).
$("body").delegate("a.location-menu-btn", "click", function() {
navigateToPage("location.html", { });
});
This is the html:
<div data-role="navbar" class="ui-navbar ui-navbar-noicons" role="navigation">
<ul class="ui-grid-b">
<li class="ui-block-a">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-search">Search</span></span></span>
</li>
<li class="ui-block-b">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-location">Location</span></span></span>
</li>
<li class="ui-block-c">
<span class="ui-btn-inner"><span class="ui-btn-text"><span class="lang-nav-settings">Settings</span></span></span>
</li>
</ul>
</div>
live is deprecated. Use on instead.
If you want to have a click event on the anchor elements in .ui-navbar and the HTML is static HTML that exists at page load time, then you can just use this:
$(document).ready(function() {
$(".ui-navbar a").click(function() {
navigateToPage("location.html", { });
});
});
That will make the <a> tags in that piece of your HTML clickable. But, those <a> tags have no content to them and thus no size so nobody will be able to click on them until you give them some content.
If your problem is something different than this, please explain.
If the content is added dynamically via script, then you can use .live() like this:
$(document).ready(function() {
$(".ui-navbar a").live("click", function() {
navigateToPage("location.html", { });
});
});
After cobbling together a few questions I've managed to get this far to showing / hiding divs:
$(document).ready(function(){
$('.box').hide();
$('#categories').onMouseOver(function() {
$('.box').hide();
$('#div' + $(this).val()).show();
});
});
HTML:
<div id="categories">
<div id="btn-top20">Top 20 Villas</div>
<div id="btn-villaspec">Villa Specials</div>
<div id="btn-staffpicks">Our Staff Picks</div>
</div>
<div id="category-content">
<div id="divarea1" class="box">
Content 1
</div>
<div id="divarea2" class="box">
Content 2
</div>
<div id="divarea3" class="box">
Content 3
</div>
</div>
What am I missing?
This will work:
<div id="btn-top20" rel="area1">Top 20 Villas</div>
<div id="btn-villaspec" rel="area2">Villa Specials</div>
<div id="btn-staffpicks" rel="area3">Our Staff Picks</div>
with this code:
$(document).ready(function(){
$('.box').hide();
$('#categories div').mouseenter(function() {
$('.box').hide();
$('#div' + $(this).attr('rel')).show();
});
});
Corrections:
No such function onMouseHover.
Attached the event to every div, not the #categories parent, so this has the right context.
added rel for every div, because val is meaningless.
Working example: http://jsbin.com/ivuxo
You may also want to hide the div on mouse out, in wich case you can use hover:
$('#categories div').hover(
function() { //hover in
$('.box').hide();
$('#div' + $(this).attr('rel')).show();
}, function(){ //out
$('.box').hide();
});
Flexible, generic (and untested!) solution which works with any number of "tabbed" element groups. You just need to specify ".tab-handles a[href=#id_of_target_tab]" hierarchy. As a bonus, the selected tab is remembered between page loads.
$(function() { // Shortcut for $(document).ready()
$('.tab-handles a').mouseenter(function() {
// Trigger custom event 'hide' for sibling handles.
$(this).siblings().trigger('hide');
// Show current tab.
$($(this).attr('href')).show();
}).bind('hide', function() {
// Hide the corresponding tab on custom event 'hide'.
$($(this).attr('href')).hide();
}).each(function() {
// Show tab if its id is found in url as an anchor (or hash).
if (new RegExp($(this).attr('href') + '$')).test(window.location.href))
$(this).trigger('mouseenter');
});
})
Your page can contain any number of the following structure:
<ul class="tab-handles">
<li></li>
<li></li>
</ul>
<div>
<div id="top-villas"> Your tab content goes here. </div>
<div id="villa-specials"> ... </div>
</div>
onMouseOver isn't a valid jquery method, among other things.
I really recommend browsing with google chrome when you're looking to debug javascript, it's error console is very useful for not just determining errors like this, but also for pinpointing the location in the script that is throwing the error, which might be an advantage beyond Firebug in firefox.
(And you can always run firebug lite as well via the bookmarklet even while using chrome, as the firebug lite website will show: http://getfirebug.com/firebuglite)
I used this to toggle my divs:
html
<div class="content-item-news">..</div>
<div class="content-news-extra">...</div>
jquery
$(".content-item-news").click(function() {
$(this).next(".content-news-extra").slideToggle(100);
});
I know this has already had a decent answer and although this isn't jQuery/mooTools - I figured it was worth a mention:
Seven Ways To Hide An Element With Javascript:
http://www.dustindiaz.com/seven-togglers/
:)