Image mouseover in header first html widget doesnt work on ipads. Is it my old javascript? All works perfect fine on other devices. Could it be my javascript? Anyone an idea to load over mouseover images on ipads. Is there any plugin? Just founded this way
http://jsfiddle.net/c_kick/s9rB4/
Image mouseover Ipad
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi,
Why you use javascript to change your image mouseover in header? It is better to do it with CSS, and more simple. Someone like this:
#image { /* Here the first image*/position: absolute;height: 200px;width: 200px;background:url(image1.jpg) no-repeat;}#image:hover { /* Here the second image*/background:url(image2.jpg) no-repeat;}#image a { /* Here if you use a link over image*/position: absolute;height: 200px;width: 200px;}This is just a suggestion.
Regards.
Hi,
Thanks I tried but somethings wrong. The image has a class named image and is placed in the widget like this:
In custom css I added:
#image { /* Here the first image*/position: absolute;height: 650px;width: 130px;background:url(http://www.ekatra.nl/wp-content/uploads/ekatra.jpg) no-repeat;}#image:hover { /* Here the second image*/background:url(http://www.ekatra.nl/wp-content/uploads/ekatra_f2.jpg) no-repeat;}#image a { /* Here if you use a link over image*/position: absolute;height: 650px;width: 130px;}Am i doing something wrong? Its not working yet so I took it offline again. Maybe you see a mistake in my code.
Thanks!
Sorry the image url started working for an offline image.
This is the code without brackets:
a href= “http://www.ekatra.nl”>
</a
Hi,
I had seen the sourcecode of your homepage, and I can detect that the javascript on the logo is not disabled. Comment using /* */, because you use , and that method is for HTML code. When the javascript for your logo will be disabled, use that CSS:
#ekatra{ /* Here the first image*/position: absolute;height: 650px;width: 130px;background:url(http://www.ekatra.nl/wp-content/uploads/ekatra.jpg) no-repeat;}#ekatra:hover { /* Here the second image*/background:url(http://www.ekatra.nl/wp-content/uploads/ekatra_f2.jpg) no-repeat;}#ekatra a { /* Here if you use a link over image*/position: absolute;height: 650px;width: 130px;}Be sure that the element whose id is ekatra don’t use javascript code (onclick, etc).
Regards.
SOLVED sofar. Tried adding different css an html and also the code you suggested. Thanks men… also tried different ways. Came out to this to get it responsuve all the way :-) :-) :) look better now also in ipad simulator http://www.responsimulator.com/?url=www.ekatra.nl
and i changed customm css while java is still working in header. Just dunnot have an ipad
: )
css:
a { text-decoration: none; }a:hover { text-decoration: none; }#masthead .site-title { display:none;}/* Header */@media (max-width: 780px) { header#masthead .hgroup { padding-top: 0px; padding-bottom: 10px; } body.responsive header#masthead .hgroup .logo { padding-top: 13px; }}.mobile-nav-frame { position: fixed; top: 0px; right: 0px; width: 100%; height: 100%; overflow: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #4ebac4; font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; z-index: 999999;}.mobile-nav-frame .title { padding: 14px 12px; margin-bottom: 25px; border-bottom: 1px solid #ffffff; background: #4ebac4;}.mobile-nav-frame .title h3 { margin: 0px 50px; text-align: center; color: white; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8); overflow: hidden; height: 1.25em; font: 200 20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}.mobile-nav-frame ul { margin: 0px 12px; background: #ff8000; border: 1px solid #fff; padding: 4px 10px; -webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.075); -moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.075); box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.075); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}.mobile-nav-frame ul li { display: block; padding: 15px 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); border-top: 1px solid rgba(255, 255, 255, 0.05);}.mobile-nav-frame ul li a.link { display: block; margin-right: 30px; text-decoration: none; color: #F3F3F3; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7); font-size: 17px; font-weight: 300;}/* Vantage Header Responsive Breakpoint */@media (max-width: 780px) { body.responsive header#masthead .hgroup { text-align: center; } body.responsive header#masthead .hgroup .logo { float: none; } body.responsive header#masthead .hgroup .logo img { margin: 0 auto; padding-top: 0px !important; padding-bottom: 0px !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } body.responsive header#masthead .hgroup .support-text img, body.responsive header#masthead .hgroup #header-sidebar img { max-width: 100%; height: auto; } body.responsive header#masthead .hgroup #header-sidebar { padding-top: 0 !important; padding-bottom: 0 !important; height: auto; } body.responsive header#masthead .hgroup #header-sidebar .widget { display: block; margin: 0 auto; float: none; }}Hi Edwin
Glad to see you’ve made progress on this challenge. Thanks for keeping your thread updated.
Thanks and till next time. Happy aniversaries and i come back tomorrow (lol) :-) …
For sure :) You too!
Got back :-) Actually previous post is my workaround. Seems mouseover on ipad and general mouseover on images and links works totally different. Happens also on common websites. Know I need to rebuild my website again. Get another custom css?
The following plugin works for touch on mobile:
https://wordpress.org/plugins/img-mouseover/
Here is an example listed: https://wordpress.org/support/topic/no-instructions-6. We tested using:
Unfortunately, the image only changes once when you touch it on mobile, it doesn’t change back. It works perfectly on desktop. It’s a potential solution.
Your formest script works fine on a new website created in 5 hours time. http://www.demonnick.info/ Also copied a workaround for the transparant menu in sixteen theme. See css… However the touch on ipad create the same effect as it did on my previous homepage script. Thanks for sofar. It seems in all ways that ipads don’t fit any toast roaster :-)
.Body {
color: rgb(88, 77, 77);
font-family: ‘Arial’, sans-serif;
}
.site-header {
padding: 0.25em 4.5455%;
}
.site-header-main {
border-width: 0px 0px 2px 0px;
border-style: solid;
border-color: #584d4d;
}
div.site-header-main {
height: 80px;
}
.widget, .page-header, .page-links a, .comments-title, .comment-reply-title {
border-color: #584d4d;
border-width: 0px;
}
/* Menu button & menu on small screens */
.main-navigation li { /* needed to fix bug on Menu’s dropdown being transparent */
background-color: white;
z-index: 2000;
}
.menu-toggle {margin: 7px 0;} /* position button */
button {text-transform: none; border-radius: 5px;}
.site-header-menu {
background:white;
}
.menu-item a {padding-left: 8px;}
.page-id-5 .entry-title {display: none;}
Unfortunately, that seems to be the position at the moment. Sorry we don’t have anything more on this challenge.