I'm trying to make a checkbox check when I click not only the checkbox, but also the container it's in. The problem I faced is that when I checked a checkbox, it fired it twice because it was also clicking the container. I've come up with the following solution that seems to work fine, but I have a feeling there's a simpler way to do this and I'm looking to learn to really why short and compact javascript, so any advice would be helpful :)
http://jsfiddle.net/masedesign/8q5TQ/
$(function(){
$('td.cell input').click(function(e){
e.stopPropagation();
});
$('td.cell').click(function(){
$(this).find('input').click();
});
});
The e.stopPropagation() method prevents the event from bubbling.
just for fun I tried to achieve the same effect without javascript: if you're interested in a pure CSS solution working only on newer browser (it relies on :checked pseudoclasses) look at this fiddle: http://jsfiddle.net/g6Sx7/2/ (but if you're interested I can improve it with a js fallback for old IE)
Edit: a fiddle with js fallback: http://jsfiddle.net/g6Sx7/7/ this code should work fine also on IE6 but here the problem is about CSS support (the adjacent sibling operator + is not supported on IE6) : the whole effect won't work there, but anyway you cannot have a box shadow in that browser... so I think it's not a great problem.
If you are not performing any other task when the checkbox is checked i.e. the js that you have written is just for the sake of making the box clickable then i would suggest to take a CSS approach rather then JS.
here's a working example http://jsfiddle.net/8q5TQ/6/
Note: this works in IE7/8/9 FF (latest installed in my machine) and Chrome (latest installed in my machine)
Update: (after reading ur comment) i don't have IE 6 (sorry) but tried in quirk's mode and is working fine. Hope this helps :)
Related
I have a clickable span that works perfectly on Android and desktop etc, but it does not work on iphones.
$('#spanname').on("click", function() {
/* do something */
});
I have tried touchstart, touchend and added hover pointers as per some other suggestions for this weird behaviour after researching, but nothing works.
Any ideas? If not, I guess I'll have to do away with the span and use a div.
(the reason I'm using a span is because I am using a large » instead of an arrow image).
Try to add an empty onclick attribute to the span or apply cursor: pointer to the element in the style sheet. ;)
More information here
The answer is check the silly and obvious things first. The device I was checking my updates on was actually pulling down an older iteration of the site and therefore wasn't showing my updates. The procedures did work, but only when I made sure I was actually looking at the correct version.
Apologies to anyone that took the time to look and also thank you.
I am trying to get .focus() to work in Firefox (version 33.1.1) on a Mac. Some similar questions mentioned solutions that had the effect of .focus() without the visuals; with each of the tests below, I wasn't even able to accomplish that.
The various tests listed out below all work in Chrome but not in Firefox. The HTML used was:
<input type="text" id="test" tabindex="1">
Setting tabindex was based on this suggestion, but it didn't seem to have any effect.
I also considered using autofocus, but that won't work because I need to manipulate the focus of multiple fields as the user uses the webpage, not just for a single field on load.
Update: Rhumborl suggested below that the issue might have to do Firefox's treatment of focus events when using iframes, and sure enough that seems to be the issue. Each of the following tests works when you take it out of JSFiddle's iframe "Edit fiddle" window and instead view the output full screen. Below I've added links to the working full-screen version of each.
A. .focus()
$("#test").focus();
Fiddle (update: this works in full screen).
B. setTimeout with .focus()
setTimeout(function(){
$("#test").focus();
},100);
Fiddle (update: this works in full screen). As suggested here, here, and here.
C. .trigger('focus')
$("#test").trigger('focus');
Fiddle (update: this works in full screen). As suggested here.
D. setTimeout with .trigger('focus')
setTimeout(function(){
$("#test").trigger('focus');
},100);
Fiddle (update: this works in full screen). As suggested here.
E. Plain JavaScript
document.getElementById("test").focus();
Fiddle (update: this works in full screen).
F. setTimeout with plain JavaScript
setTimeout('document.getElementById("test").focus();',100)
Fiddle (update: this works in full screen). As suggested here.
G. .select()
$("#test").select();
Fiddle (update: this works in full screen). As suggested here.
H. setTimeout with .select()
setTimeout(function(){
$("#test").select();
},100);
Fiddle (update: this works in full screen).
This may be an issue that Mozilla is going to need to fix (see here), but there do seem to be workarounds. For example, if you go to Google.com in Firefox on a Mac, focus goes to the input field (I wasn't able to puzzle out how Google was doing it, although they seem to be dealing with focus in this script).
So does anyone know of a workaround?
<input type="text" id="test" autofocus="autofocus">
If you add the autofocus attribute to the input it may do what you are trying to do.
alert($('#Content_tab form .form-group:nth-last-child(2)').html());
this and more selection on nth-last-child(n) not working in chrome !!
How ever they are working fine in all other browsers, like in IE8, Mozilla.
Please review my Site and source code
you can find the code near line no. 502
Use this
$('#Content_tab form .form-group').eq(-2).html()
As a javascript developer, I don't like that selector at all. It is agains my rules to use that kind of selector. It will be very non performant. You can give some class to that element while building your markup or this is even better.
$("#Content_tab").find(".form-group").eq(-2).html()
On my page I'm currently doing something like this: http://jsfiddle.net/FBCSt/6/ I really don't know why, but in Chrome I got some strange issues with that - sometimes the contents of the div elements are not loaded correctly. In IE, Safari and Firefox it work fine, but as I said, in Chrome it is causing some trouble.
That's why I want to know, if there is a more sleek way to do this? (There are three buttons, every one is assigned to one div. Only one div should be visible)
I am thankful for every answer =)
EDIT: Thanks everybody. This is the solution. It works well =)
"a better way: jsfiddle.net/FBCSt/13 – #Mohammed ElSayed 20 mins ago"
Try this: http://jsfiddle.net/FBCSt/10/
In IE, Safari and Firefox it work fine, but as I said, in Chrome it is
causing some trouble.
I really don't see an issues when testing under Google Chrome 19.0.1084. But in any case,
That's why I want to know, if there is a more sleek way to do this?
Yep, there is. Since one of your tags is jQuery, I suggest you take a look at jQuery UI's tabs.
Why don't you use show() instead of toggle()? Maybe the issue is related to using toggle(). And you can combine the elements to be hidden: For example,
$('#page2,#page3').hide();
$('#page1').show();
Or as nicely put by Mohammad,
$('#page1').show().siblings().hide();
I have working solution on this url : pastebin it works in chrome and also in FF.also it will work even if you add 1000 id with page#100 but still it will not have too much code. thanks.
Like Abody97 said: try JQuery UI tabs
If you're looking for a "more sleek" way of doing this, try this fiddle: http://jsfiddle.net/NCbW6/
It doesn't bother with specific ids for each element so you can add as many as you'd like without changing the JS.
hey dudes recently i came across a bizzare problem while trying to learn tabbing .. my code worked like charm in firefox and chrome it didn't work in any version of ie ...There will be two tabs and related contents when i click on tab1 corresponding content should be shown hiding other one ..same goes for tab2 it worked in ff and chrome .. but ie add all contents as i switch to other tabs my code goes like this http://jsfiddle.net/myth/PZZ6a/16/
The calls to "getElementsByName" aren't working for you. I think that's because "name" is not a proper attribute for <a> elements, but I have not found any MSDN documentation supporting that notion. The behavior, however, very strongly suggests that that's the case.
edit — well no, it doesn't seem that "name" is improper for <a> elements after all; however, for whatever reason that's the cause of your problems. The calls to "getElementsByName" are returning empty node lists, so your "for" loops don't do anything.
It definitely has to do with getElementsByName not working with the div element in IE. Easy fix though since you already have classes on those two things, use getElementsByClassName.
var tabs = document.getElementsByClassName("tab");
var seltabs= document.getElementsByClassName("seltab");
Working Fiddle: http://jsfiddle.net/CeVa9/1/
Note: Tested in IE9.