I recently made a (responsive) redesign for a website of mine.
Oddly there is a strange behaviour of the links in some places which every tester missed (because they thought they had missed the link I imagine):
If you click on these links they only get "activated" -- but they aren't followed. If you click them again, then they work fine.
This even works if you click say 7 links in a row and then the first one again.
This only happens on ios 8.x (Tested on 8.4.1.) but not on 7.x and not on android or any desktop-browser.
With remote debugging I see nothing.
I don't even know where to start debugging this ...
Effect can be seen (with an 8.x iPhone) here: http://www.plamundo.de in the listed products.
I've seen the same behaviour, but only with 8.4.1 not with 8.4. This also seems to be the case on your site. An 8.4.1 device requires a double tap, with 8.4 only one tap is needed. This is a minimal testcase I built:
<html>
<head>
<title>Minimal testcase iOS 8.4.1 hover double tap problem</title>
<style>
body { font-size: 2em; } /* Only needed for a readable font-size */
a { display: block; font-decoration: none;}
a:hover { font-decoration: underline; }
</style>
</head>
<body>
<a href="http://www.apple.com/" >Click me</a>
</body>
</html>
We solved this by making the 'a:hover' conditional. You can do this with a media-query (but that's hard if you also want to target iPads) or with some JavaScript that adds a class which you can use to make the CSS selective. Example:
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}
with:
.iamanobnoxiousiphonedevice *:hover{
text-decoration: inherit !important;
}
An easier way to solve this is by removing the 'display: block', but I don't know if that's an option for you.
A strange trick solution that works in a project I am working on is to reset the z-index:
* { z-index: 0 }
Found that hack by Ryan Ou (thx) in an Angular google group
I suspect that it might be Adobe Analytics on our site that "steals" some clicks. Had issues because of Adobe also when trying to set focus on a text field and reveal the keyboard after a click. They caught the initial click so that our became synthetic and became restricted by iOS.
I'm surprised to have encounted this same issue so many years after the original post. I'm exploring solving this as follows:
const onHover = useCallback(
(evt) => {
// ios browsers intercept the tap/click event and instead trigger a mouseover event.
// This happens ONLY if we subscribe to onHover events.
// But we can grab the original event target and directly call click.
if (isIos()) {
evt.target.click?.();
}
// whatever your normal onHover code is can now be called:
onOriginalOnHover();
},
[onOriginalOnHover],
);
This works in my test app. Will need further validation though.
Related
I would like to move the href assignment to CSS.
Something like <a style="href: url('Home.htm');">Home</a> instead of Home.
Is it possible to do this in CSS?
I have a button at several places in my site whose corresponding URL value, might change in the future. I want to change the target address only in one place, i.e. my CSS file, instead of having to manually change them for every instance of that button.
This behaviour isn't really supported, as explained in other answers. But if you really need this on a page, it's possible to add it using some JavaScript. Used-defined custom variables/properties in CSS need to start with --, and I'll use the name --href-override.
We'll listen for all mousedown and touchstart events on links in the document. These events are useful because they'll always occur before the click is registered. Each time we handle one of these events, we check if the associated link has a --href-override property/variable defined in CSS. If so, we replace the HTML href with the CSS --href-override value, and the browser will automatically use that new value when handling the click event.
function overrideEventTargetHref(event) {
// if it's the beginning of a click on a link...
if (event.target.tagName === 'A') {
var link = event.target;
var override = getComputedStyle(link).getPropertyValue('--href-override').trim();
// if the link has an CSS href-override and it's different than the HTML href...
if (override && override != link.href) {
// replace the HTML href with the CSS href-override
link.href = override;
}
}
}
window.addEventListener('mousedown', overrideEventTargetHref, false);
window.addEventListener('touchstart', overrideEventTargetHref, false);
.override {
--href-override: https://stacksnippets.net/;
}
actually example.com
secretly stacksnippets.net
This also work properly for things like middle-clicking to open in a new tab.
This is quite a hack and you usually wouldn't want to do it. But if your situation requires it, you can.
CSS is a styling sheet, so the short answer is no. Also not entirely sure as to what your reason for wanting to is, but if it's due to changing data, use JavaScript or PHP to do this instead. Much easier, logical, and possible.
The href property stands for hypertext reference. It is not an entity that lends itself to styling; see this resource. If you wish to style how that location's text value appears on a page, you could write code that styles the a tag and if you want to get fancier you could add on a pair of span tags, as follows:
CSS:
a {
font: 14px Arial,Helvetica;
color: #00c;
text-decoration:none;
border: 4px dotted #009;
}
a:hover {
border: 3px solid #009;
}
span {
color: #f0f;
}
<span>Home</span>
As for changing the values of the buttons, if you run Linux, it provides various helpful utilities, such grep; see this discussion. Also, see this article.
I'm using JavaEE with Maven and Primefaces and i want to hide (HTML hidden) a menuitem in Primfaces tabMenu.
Something like the answer in this (prior) question would be good:
.ui-tabmenuitem: {
visibility: hidden !important;
}
Just another small hint:
Adding a style class doesn't work, adding a containerStyle is not supported: See primefaces github page
Your code works for hiding them if I remove the invalid ":"
.ui-tabmenuitem {
visibility: hidden !important;
}
Tested on PF 6.0 and 5.3.
If you want to do it dynamically you can conditionally add a styleClass to the relevant menuitem's;
<p:menuitem styleClass="#{bean.something ? 'ui-tabmenuitem-hidden' : ''}" value="Social">
and hide it with some script:
<script>
$('.ui-tabmenuitem-hidden').parent().css('visibility', 'hidden'); // or toggle()
</script>
Getting the parent is not possible with pure css, that's why the script is needed (as far as I can see..). Use the inspector i Firebug or similar to figure out what's needed.
Either just put the script in the page for running at load time, or put it in an onclick-listener on a button (or somewhere else).
I'm experiencing a major bug in IE 11 (latest version 11.0.9600.16521 on Windows 7). When on any form if I open a select dropdown all the other form fields on the page freeze. I can 'unfreeze' them by adjusting the Window size (causing a redraw). This seems to happen on any form what-so-ever.
To reproduce:
Open IE 11.0.9600.16521
Go to http://www.wikipedia.org/
Select any language from the language dropdown
Result:
language dropdown does not appear to get updated on the screen
the search box appears to be frozen - i.e. focus on select box and start typing but no text appears. However if you adjust the window size the form fields are updated and go back to working as normal (until you interact with another select element)
I can't find much in Google for this issue so maybe it's just something specific to my settings. Only thing that sounds somewhat similar to what I'm experiencing is this: http://connect.microsoft.com/IE/feedback/details/806679/ie-11-desktop-selecting-an-item-from-a-drop-down-list-on-a-webpage-causes-the-tab-to-crash. Anyone else able to reproduce this?
I had a similar issue with IE11 that turned out to be any modification to the .text property of an SELECT-option element. I eventually found the "hint" on stackoverflow here
How to fix IE select issue when dynamically changing options.
In my case I use straight JavaScript, and with so many inter-dependent SELECT boxes had to come up with a generic solution, so my solution was to intercept (defineGetter) assignment to any .text property of an HTMLOptionElement, and set a 1 ms timer to perform an add element and remove element as in the referenced post that is titled "I have the fix. We have to add and remove options list to trigger the rendering in IE8." Notice the reference to IE8, AFAIK IE has had several issues with SELECT boxes since at least IE7, possibly earlier.
So the code I added to one of my global scripts is as follows:
try { var IE11; // IE10 and IE11 removed ActiveXObject from the window object but it can still be instantiated
IE11 = new ActiveXObject('MSXML2.DOMDocument.6.0');
IE11 = null;
if (typeof(HTMLOptionElement) != "undefined") {
try { HTMLOptionElement.prototype.__defineSetter__(
'text',
function(original) {
return function(newValue) { var sel;
original.call(this, newValue);
if (!(sel=this.parentElement).fixIE) sel.fixIE = window.setTimeout(_fixIE_(sel), 1);
}
}(HTMLOptionElement.prototype.__lookupSetter__('text')));
} catch(e) {};
}
} catch(e) {}
}
// IE11 broke SELECT boxes again, modifying any options .text attribute "freezes" the SELECT so it appears disabled
function _fixIE_(selBox) {
return _fixIE_;
function _fixIE_(){ var lc = selBox.options.length;
selBox.options.add(new Option('',''));
selBox.options.remove(lc);
selBox.fixIE = undefined;
}
}
Phil
Go to programs
Then widdcom folder
Right click bttray
Go compatibility
Tick run as admin
Restart
I had the same problem in IE 11 on Dell Windows 7.
It was solved by turning off hardware rendering in IE, as you suggested in your link.
I have a site that requires two themes to be loaded. The second theme can be toggled on/off by the user. I'm currently accomplishing this by using the disabled tag in the link like so:
<link rel="stylesheet" href="{{main css}}">
<link rel="stylesheet" title="theme-white" href="{{2nd theme css}}" disabled>
I then toggle disabled in JavaScript.
This works great in Safari (Mac), Chrome (Mac/Windows), and IE10. However, Firefox (both Mac and Windows) seems to ignore the disabled tag on page load and displays the second theme on initial load (as it is loaded second). When I manually toggle disabled, however, Firefox does respond to the tag and will begin to switch the second theme on/off.
How can I accomplish this goal?
I found a workaround that seems to be functional in all browsers. This does NOT seem like it should be the best way to do it but I wanted to share.
This is not ideal for a few reasons but I tried to make it streamlined and without any external library dependency like jQuery because this needs to be placed in your head tag and you probably have not loaded your JS libraries at that point.
<script>
window.onload = function() {
var path = "css";
var style = document.createElement( 'link' );
style.rel = 'stylesheet';
style.href = '/your/css/url.css';
document.getElementsByTagName( 'head' )[0].appendChild( style );
style.disabled = true;
};
</script>
NOTE: Firefox seems to only respond to the disabled tag if it is applied to the stylesheet after it has been added to the DOM. I still feel like I'm missing something because that seems crazy.
So, if you were to put style.disabled = true; before you add the style to your document then Firefox does not recognize the disabled state of the stylesheet.
This is fixed in Firefox 68. You can now set the disabled attribute on <link> elements that also contain the ref=stylesheet attribute value. This will prevent the browser from loading that stylesheet until the disabled attribute is set to false or removed via JavaScript or some other method.
This brings Firefox in line with Chrome, Edge, Safari on support for this feature.
More info on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#Attributes
Bugzilla report: https://bugzilla.mozilla.org/show_bug.cgi?id=1281135
Late to the party here, but I just encountered this problem as well in Firefox. Turns out it had to do with HOW the disabled attribute is applied to the stylesheet via Javascript.
See the below code, assuming some trigger to swap disabled state between two stylesheets. The first function is what I tried first, and the latter is what ended up working for me.
var myStyles = document.getElementById('my-default-style');
var myOtherStyles = document.getElementById('my-other-style');
function thisFailsInFirefox() {
myStyles.setAttribute('disabled', true);
myOtherStyles.removeAttribute('disabled');
}
function thisWorksInFirefox() {
myStyles.disabled = true;
myOtherStyles.disabled = false;
}
The thisWorksInFirefox function seemed to do the trick, maintaining functionality in Chrome / Safari / Edge, while making Firefox match in its behavior.
Everything in your theme stylesheet could be prefixed with a class. For instance, if you have the following in your theme css:
h1 {color: red;}
h2 {color: green;}
It becomes something like:
.theme-white h1 {color: red;}
.theme-white h2 {color: green;}
Then, to toggle your theme, you can use the following:
if (show theme) {
$('body').addClass('theme-white');
} else {
$('body').removeClass('theme-white');
}
As the title explains,
I need to disable pausing when clicked on the video viewing area, since i'm trying to attach other events when clicked on that area.
I tried using this videojs.com But found no solution
in video.dev.js (version 4.1) line 3399 comment function body
// OnClick - Toggle between play and pause
vjs.PlayToggle.prototype.onClick = function(){
/*if (this.player_.paused()) {
this.player_.play();
} else {
this.player_.pause();
}*/
};
in video.js line 80 column 403 its the same function , comment function body
function(){/*this.a.controls()&&(this.a.paused()?this.a.play():this.a.pause())*/}
The easiest way - just add this to css file:
.video-js.vjs-playing .vjs-tech {
pointer-events: none;
}
If you don't mind editing the videojs files directly you can either set the CSS for bigPlayButton to none instead of block, or comment out the following:
// Make a click on the video act as a play button
this.activateElement(this.video, "playToggle");
and this behaviour will be gone.
I wanted to comment on Ashot his answer for the solution on Video JS 4.6.3, but my reputation is not high enough yet.
MrHunter provided the answer for Video JS 4.3.
In version 4.6.3 the same code is on line 99 of the file video.js and looks like this:
function(a){0===a.button&&this.m().controls()&&(this.m().paused()?this.m().play():this.m().pause())};
After commented out it looks like this:
function(a){/*0===a.button&&this.m().controls()&&(this.m().paused()?this.m().play():this.m().pause())*/};
This worked perfectly for me. Thanks to Ashot and MrHunter for leading me to the solution on the newest version of Video JS!
If you want to prevent pause on click on the video,
Just add these 2 lines in the script.
var videoEle = document.getElementById("videoTagId");
videoEle.onpause = () => { videoEle.play(); }