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.
Related
We're using the javascript plugin Simple-ajax-uploader to upload files on your web site and it suddenly stopped working today (09/05/2019).
The upload div/button can't be clicked on anymore.
This is happening on our site and even on the official plugin site.
This is only happening on Chrome and only on computers where Chrome has been closed and restarted today.
We found out this article indicating that Chrome Dev tools have just been updated today but our version of Chrome hasn't changed since the restart (76.0.3809.132). However the restart definitely triggered the bug so something happened there. But what?
Same problem here found this morning.
Quick jQuery fix...
$('input[type=file]').css('position','relative');
UPDATE: Issue has been fixed with version 2.6.5 of the plugin. Ignore the below.
Plugin maintainer here. A short term fix is to remove or comment out line 2002:
'position' : 'absolute',
Alternatively: the issue does not appear to be present in Firefox. At any rate, I'll try to have a fix pushed soon.
I've just checked on Chrome and you're right about the button not working. It is a problem with the Stacking Context, unfortunately each browser has its own implementation.
Basically the outer div is preventing the click events from reaching the inner input.
My suggestion would be to use a custom button or to restyle the current one (I've found that if you remove the position property from the outer div it will work again. Consider that many properties can cause stacking context problems: position, transform, opacity, z-index. Try adding/removing/modifying some of them, in the outer div and in the inner input).
Anyway, it is guaranteed to be a style problem and not a JavaScript problem.
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.
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 :)
Problem: A div with visibility:visible inside a parent div with position:fixed and visibility:hidden causes rendering problems in Google Chrome. Images and examples can be found here.
A week ago you could just add the -webkit-transform:translateZ(0) to the parent div and bug solved. But it isn't working anymore:
Without -webkit-transform
With the hack.
Both are bugged.
So, is there any solution? When you resize the window, it repaints the divs, also when you open the developer tools the bug disappears.
So I've been trying to force a repaint with javascript (jQuery):
jQuery(window).scroll( function() {
jQuery("#parentDiv").addClass("nothing");
jQuery("#parentDiv").removeClass("nothing");
});
And it sometimes works (when a textfield is displayed inside the inner div). Really weird. Also tried hiding and displaying the div, adding css properties (fixed, bottom:0...)
But nothing works fine.
Any ideas?
EDIT2: Seems like it only happens to me: 2 friends, using windows and the latest version (17.0.963.79) don't see the bug in the second link. But I still see it. I've reinstalled chrome under windows, and the bug is still there.
I also have cleared the cache, but nothing changes. Am I the only one????
from my own experience when working with scroll(), all form-elements behave strangely, or do not function anymore.
You solution -webkit-transform:translateZ(0) will fix it for webkit browsers, but all others browsers will trow a translated layer above all form-elements, result is that form-element are not accessible anymore.
scroll() is a great solution for just plain info (text- images), not for forms.
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.