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!
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'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;
}
Please see an example here:
http://jsfiddle.net/GmhHd/1/
Click the link to have the embedded player slide down. In my Chrome browser, the video is displayed as either a green or black box. It appears to work fine in Firefox.
Is there a way to get around this / should I be doing this another way?
Thanks in advance
Try this way: http://jsfiddle.net/PcfQY/.
It works for me.
Well i'm currently developping my Toolbar for Google Chrome as a Extension. The main principe is that i'm all the time injecting the toolbar as an iframe by using the Content Script.
But now i see a couple of bug with gmail, google map/search, pdf an maybe other that i've not yet see...
Let me explain, when i go on gmail, i don't see my toolbar at all...
When i open Google, it seems really normal :
But then when i start a search my toolbar seems to overide the top link (web, images, videos, maps,...) I can't click on them anymore...
Next problem is when i'm trying to go on google map or trying to open a PDF, it seems to give the same css to these web pages from my toolbar...
Google Maps :
PDF :
Hope i where clear enough, do not hesitate to ask me question if necessary ;)
Why don't you use absolute/fixed positioning and style attributes? Using style attributes would remove the issue of the possible spread of CSS.
To remove the toolbar from pdf, you could write something that removes the element when on pdf?
Well, i've find a good solution to resolve the problem with PDF and Google Map it was a problem on my CSS.
About the google Search now it works perfectly by setting the body webpage as a fixed page like NeXXeus tell me but there is still a problem.
Check this out :
EDIT : We don't really see, the argument select/deselect is top: 0px;