Age Verify Javascript in Mobile Site Pop Up Overlap - javascript

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;
}

Related

How to troubleshoot a white flash between page loads

I'm working on a website, and it flashes a white screen between page loads, every time I click a link. I've read a lot of other posts on similar issues, but each scenario looks to be different. How do I best go about troubleshooting where this flash is coming from?
The site is using WordPress, custom built from the Genesis Child Sample theme. I'm not greatly versed in the Inspector tool. Anything I should be focusing on in reviewing/testing?
This issue ended up coming from an animation I was unaware of on the .site-container. I removed this CSS, and the issue was resolved.

Show images with javascript Help needed

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;
}

Modified Joomla Template now no main area links work in Chrome, but work fine in IE?

After being out of the web development game for over a decade, I'm back and now rebuilding a school's site based on a Joomla template. Now on Chrome even a basic HTML tag won't bring up a link in the main template. All mailto links disappear (literally anything with an email address disappears from the text of the site) as well-- and was giving some random "install javascript" message.
This is the site. We had to do a bunch of CSS cutting and hacking to get the template to fit the visuals we needed.
http://www.novaschool.org/index.php/nova-home
If anyone has any ideas, I'm forever in your debt!!! Most of the teachers use Chrome, so we're never going to get far.
Cheers,
sam (who started web programming in '94, but hasn't done much of anything hands-on since '98)
There are a great many issues with this site. Critically, it really needs to be updated to a current,secure, version of Joomla.
The issues you are referring to though are because 1) your links are white in colour and the background is white, rendering them invisible and 2) the menu is set to be 90% of the width of the body and uses absolute positioning, making it impossible to interact with any element beneath it.
Honestly, if I were you I'd start with a fresh current installation of Joomla and copy your content across, it will be far less work than bringing this one up to scratch.
p.s. For future reference, there's a Joomla specific Stack Exchange.

HTML Button Highlight With Jquery Not Working

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!

Trouble between an injected iframe and other web page (Google, Gmail, Pdf)

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;

Categories