I'm making a website where the user sees a text when hovering over an image. Problem is, it doesn't work on mobile devices(touchscreen etc). So I have been coding a script which will detect wether the client is desktop or mobile, if it's mobile, it will show the text over the image instantly.
But it's not really working. Can someone find my mistake?
Here's the link to the test webpage: Link.
Code can be found in the head. (sorry i dont know how to paste it in)
Thanks!
something like bootstrap would automatically turn your hover events into click events on mobile
Another option would be to use #media queries to make them visible on mobile
use #media(min-width:768px){
.textOnHover{
visibility:visible;
}
}
Rather than browser detection you should be using feature detection for this kind of task. Take a look at Modernizr for detecting touch functionality on the client's browser. You can then use their JavaScript API to solve your problem.
If you opt for CSS class names in your Moderniser build, it will add helper classes to your <html> element so you'll be able to use an entirely CSS solution, like so:
.touch .text {
visibility:visible;
}
Related
I'm creating a website from this template and I've downloaded the template and uploaded it without modifications here.
I have this problem (confirmed by a ticket on templatemonster): on Iphone only (seems like both on safari and chrome), i cannot click on some links (e.g. "view charateristics" on the 4 boats images under "YACHTS FOR SALE".
I tried editing it:
adding a big z-index on the tags
creating a custom section with bootstrap and custom link
using <span> tags with onclick="window.location.href='test.php'"
using a <form> and a <button>
It really seems that the browser does not "catch" the click on the element.
But still, none of them work.
Unluckily, i cannot test on a real phone, but this simulator https://appetize.io/ seems to work pretty well. I did confirm that the problem is also on real devices, thanks to a customer.
I would like to know if anybody knows to fix this issue, without making the template look much different, thanks
EDIT
Here's the page where i'm trying to fix the bug. As you can see the <ontouchstart> is also not working.
I don't know if it would help, but you can also see that the carousel is not working on iphone (not a problem itself, i'm going to hide it).
It's a known Safari Mobile bug, you should add the ontouchstart event handler
More infos here
I needed a Pop up javascript for Age verification and found one, hosted it in google drive and successfully implemented it after so much of juggling. The script works fine in desktop but in the mobile version (link is below with m. ), the shopping cart button, tracking button etc, overlap the pop up age verify script. I dont know js, html etc but am learning a bit. Can Anyone Help?
Also, i noticed that the background coulor in the desktop somehow fades once the wepage fully loads- i am assuming once the JS loads or completely runs - the background theme colour goes away. Help would be appreciated.
Desktop Site:
http://electroniccigaretteaus.com.au/
Mobile Site:
http://m.electroniccigaretteaus.com.au/
I doont know much about js and how it works etc, but can do some of the stuffs myself if i get clear instruction. Help would be appreciated- thanks
There is an div element with id = "modal_content". Set CSS property z-index to it as below:
#modal_content{
z-index:10000
}
There is an div element with class="wCenterIn" set css property z-index to it as below:
.wCenterIn{
z-index:99;
}
I have made a simple carousal using an online script called "simplyScroll".
here is the link to the script:
http://logicbox.net/jquery/simplyscroll/#config
My Problem:
here is the link the page:
http://namdarshirazian.com/exhibition.php
Generally in desktop mode, when I click on each image, it runs a javascript and shows a popup. This javascript is written by myself. Simply a simple action of hide and show.
But when viewed with smartphone (android/firefox), it does not triggers click event. VERY STRANGE. Can anyone please help my why this does not work?
The click action is as simple as :
$("body").on("click", "element", function(){
});
You can experiment with touchup and touchdown events instead. It's actually a right mess caused by people worrying about touches being long. The fastclick library might smooth things out a bit.
i had the same problem when i did my website responsive for any device resolution, the solution is simple, you write your jQuery as standard but u have to include a script that will allow the jQuery to work on touch devices.
add this script into your website and check the magic result:
http://touchpunch.furf.com/
I am currently in the process of building a web app. I am trying to get an image when clicked to change image source and then hide one div and show another. This seems to work fine when viewing within a browser but when viewed on an iPad the button image change doesn't work. An example of what I am currently doing is below:
$("#pg3rgt_en_GB").click(function(){
$(this).css("background-image","url(images/right-button-down.jpg)");
setTimeout(function(){
$("#introduction_en_GB").hide();
$("#pg3rgt_en_GB").css("background-image","url(images/right-button.jpg)");
$("#customerinput_en_GB").show();},250);
I hope that this is something simple I am missing. I appreciate any help and thanks in advance!
Safari doesn't recognise the show and hide features that jQuery has to offer. The best way around this would be to assign different css classes - which safari does recognise!
I have a some trouble with iFrame.
Basically, I have drop down basic CSS menu and right underneath it I have iFrame with flash from external website.
Unfortunately whenever the menu drops down it goes underneath the iFrame.
Is there a way using jQuery , JavaScript or CSS to prevent the menu from disparaging behind the iframe?
Many Thank
Dom
You can try putting your Flash object into opaque window mode (wmode = 'opaque'), but because of the Iframe, I still expect some inconsistency.
http://www.communitymx.com/content/article.cfm?cid=e5141
You could also try coupling this with what's known as an "Iframe shim". It's definitely a hackish work-around, but one that Google themselves have used, sooo... take that as you will.
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/
iframe shimming or ie6 (and below) select z-index bug
http://www.google.com/search?q=iframe+shim
Good luck :) #Vili might still have the right idea with just hiding the Iframe when your menu opens. This is certainly the lowest level, and should probably happen for any browsers that don't support these other "fixes" (hacks).
(BTW, you can forget Z-Index helping on any platform or browser. Iframes and Flash both exist on macro-layers above the normal document flow. A DIV will never show in front of either without some finagling).
AFAICT it will always be broken on linux, since Flash doesn't play nicely with the z-index directive.
On other platforms you should be able to tweak z-index to your needs.
Maybe visibility: hidden; on the iframe, when the menu is opened?