Changing slider image on mouseover of a div - javascript

I need advice on the following issue:
We are using wordpress as backend for a website and a theme that comes with a slider. I use that slider with some css to let divs slide up and show hidden content on mouseover (divs are displayed in front of a background image). This works great so far after searching for it here in stackoverflow.
What I would need now is a functionality that changes the image of the slider on mouseover of a div that is inside the slider-div.
HTML looks like this (extremely simplified):
<div class="ls-wp-fullwidth-container" style="height: 692px;">
<div class="ls-wp-fullwidth-helper" style="height: 692px; width: 1383px; left: 0px;">
<div id="layerslider_3" class="ls-wp-container ls-container ls-fullwidth" style="margin: 0px auto; visibility: visible; width: 1383px; height: 691.5px;">
<div class="ls-webkit-hack">
</div>
<div class="ls-inner" style="width: 1383px; height: 692px;">
<div class="ls-layer ls-active" style="left: auto; right: 0px; top: 0px; bottom: auto; width: 1383px; height: 692px; display: none; visibility: visible;">
<img src="http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Zürich.jpg" class="ls-bg" alt="Slide background" style="padding: 0px; border-width: 0px; width: 1660px; height: 922px; margin-left: -830px; margin-top: -461px;">
<div class="ls-s-1 Highlight1" style="position: absolute; color: rgb(0, 111, 0); border-radius: 20px; white-space: nowrap; opacity: 1; transform: rotate(0deg) scale(1, 1); display: block; visibility: visible; margin-left: 0px; margin-top: 0px; width: 253.55px; height: auto; font-size: 23.05px; line-height: 23.05px; padding: 0px; border-width: 0px; left: 138.3px; top: 507.1px; background: rgb(255, 255, 255);">
<div id="parent">
<center>
<br>
<br>
<h1>Siebdruck</h1>
<ul>
<li>Content</li>
</ul>
</center>
<br>
<br>
<div id="hover-content">
<center>
<ul>
<li>Content shown on hover</li>
</ul>
<br>
<br>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What I want to do now is to change the image within the
<div class="ls-layer ls-active>
<img src="...">
</div>"
I figured out this would only be possible by using javascript so I tried the following:
Using this code in a header file:
var elem = document.getElementById("parent");
elem.addEventListener("mouseover",mouseOver);
elem.addEventListener("mouseout",mouseOut);
function mouseOver() {
document.getElementByClassName("ls-layer ls- active").style.backgroundImage="url(http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/04/slider_stockfoto_3.jpg)";
}
function mouseOut() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Z%C3%BCrich.jpg)";
}
Didn't work, so I tried this:
function MouseIn() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(img/http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/04/slider_stockfoto_3.jpg) no-repeat";
}
function MouseOut() {
document.getElementByClassName("ls-layer ls-active").style.backgroundImage = "url(img/http://bauer-bauer.at.w0126e5a.kasserver.com/wordpress/wordpress/wp-content/uploads/2015/05/Siebdruck-Werkstatt-Winterthur-Z%C3%BCrich.jpg) no-repeat";
}
Didn't work as well, so I messed around with names and ids but couldn't figure out what I am doing wrong.
So, long story short: Is it possible to change the image within the structure stated above (<div class="ls-layer ls-active><img src="..."></div>") when hovering <div id="parent"></div>? And if so, what am I obviously doing wrong?
As mentioned before, transitions created using css are working perfectly fine...
I hope you can help me, I'm growing more and more desperate about this.

Just try this:
$("#parent").on({
"mouseover" : function() {
$( ".ls-bg" ).attr( "src", "http://placehold.it/350x150" );
},
"mouseout" : function() {
$( ".ls-bg" ).attr( "src", "http://placehold.it/950x150" );
}
});
HTML:
<div id="parent">
<img src="http://placehold.it/950x150" class="ls-bg" alt="Slide background">
</div>
UPDATE ---
Looking at your question I modified my code. I think this is what you want:
JSFIDDLE

Related

Laravel & JQuery : Get the correct positions of draggables in a droppable image

Hello I'm implementing a basic esignature for our client using documents from their users, and i'm trying to use jquery UI draggable over an image. Here are my sample code
<style>
h5 {
border: 2px solid gray;
border-radius: 5px;
padding: 5px;
white-space: nowrap;
z-index: 2;
}
img {
width: 100%;
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
<body>
<div>
<div class="container-fluid" style="position: absolute;bottom: 0px;left: 0px;right: 0px;top: 0px;">
<h1>ProClient ESignature</h1>
<div class="row" style="height: 100%;margin-left: -15px;margin-right: -15px;position: relative;">
<div class="col-xs-1" style="position:absolute; height: 100%; width: 25%; position: absolute; top:0px; bottom: 0px; left: 0px;">
<h5 class="draggable">Signature</h5>
<h5 class="draggable">Date</h5>
<h5 class="draggable">Name</h5>
</div>
<div class="col-xs-11 droppable" style="height: 100%; width: 75%; position: absolute; top:0px; bottom: 0px; right: 0px">
<img id="imagesrc" src="{{ url($files[0]) }}" width="100%" style="padding:0px; margin:0px">
</div>
</div>
</div>
</div>
</body>
<script>
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable"
}).resizable();
$('.droppable').droppable({
accept: ".draggable",
});
</script>
Yes I'm able to drag and simulate a signature box, and I know that droppable has an api DROP function that has event and ui parameters where I can get the position object with X and Y coordinates. However it seems that these coordinates as specifically for the image container that contains the image not relative to the image itself. Is there a way to get it correctly or I need to compute for it given the values that I have ? also if I scaled the image to a lower version then will the coordinates need to be multiplied by the scale value/percentage ?

How can i change the width of the image from the nth class using a script?

<div class="curbaT">
<img src="avertizare/1.png" class="img" >
<p class="p1">Curba la stanga </p>
</div>
.img{
left: 10px;
height: 100px;
width: 120px;
margin-top: auto;
margin-bottom: auto;
position: absolute;
}
I have several such divs (multiple classes "curbaT") and I want the image of the 2th, 6th, 7th, 15th and 22th div to be 150 wide.
I don't know javascript, just html and css, but this is what i would like to do using a script. From what I understood, you can select anything and change the respective characteristics. Thx!
Use the :nth-child(n) selector. Reference here.
.curbaT:nth-child(1) img,
.curbaT:nth-child(3) img {
width: 150px;
height: 30px;
}
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>

CSS issues. Stop displacinng of the button

I have some issues with a website of my business.
So I bought a theme for my website(Wordpress) and downloaded few extension to that, because it was included to the theme. Unfortunately I saw some issue, when I zoom out by my browser Chrome/Firefox, the right picture "Teilen" displace to the next line, and I want to force it to stay as it is by original one.
And here is the code:
.products li.product.grid.with-hover .product-actions {
top: 5px;
left: 19px;
right: 19px;
padding-top: 13px;
text-align: center;
position: absolute;
border-top: 0;
}
<div class="product-actions">
<a class="out-of-stock" title="Vergriffen">Vergriffen</a> Quick View <div class="buttons buttons_3 group">
Details
<div class="yith-wcwl-add-to-wishlist add-to-wishlist-2150">
<div class="yith-wcwl-add-button hide" style="display: none;">
<a href="/?add_to_wishlist=2150" rel="nofollow" data-product-id="2150" data-product-type="simple" class="add_to_wishlist" style="zoom: 1;">
Wunschliste<div class="blockUI" style="display:none"></div><div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.6; cursor: none; position: absolute; background: url("http://lockpick.ch/wp-content/themes/bazar/theme/assets/images/ajax-loader.gif") center center no-repeat rgb(255, 255, 255);"></div><div class="blockUI blockMsg blockElement" style="z-index: 1011; display: none; position: absolute; left: 32px; top: 25px;"></div></a>
<img src="http://lockpick.ch/wp-admin/images/wpspin_light.gif" class="ajax-loading" alt="loading" width="16" height="16" style="visibility: hidden;">
</div>
<div class="yith-wcwl-wishlistaddedbrowse show" style="display: block;">
<span class="feedback">Produkt hinzugefügt!</span>
<a href="http://lockpick.ch/wishlist/view/">
Wunschliste ansehen </a>
</div>
<div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none">
<span class="feedback">Dieses Produkt ist bereits in der Wunschliste vorhanden.</span>
<a href="http://lockpick.ch/wishlist/view/">
Wunschliste ansehen </a>
</div>
<div style="clear:both"></div>
<div class="yith-wcwl-wishlistaddresponse"></div>
</div>
<div class="clear"></div>
Teilen </div>
</div>
CSS issue
Website: www.lockpick.ch
Hope you can help me, because I am totaly newbie to CSS/HTML...
Greetings
Lucia
The issue comes from the use of a width of 33.3333% for these elements. While in most cases this approximation of 1/3 works, in some settings it ends up being problematic and the 3 elements end up being slightly more than 100% width.
A simple fix would be to edit this 33.3333% to 33%. Visually the users shouldn't see the 1% missing on the right and it solves your issue.
From the website link you provided, it is located in style.css line 675:
ul.products li.product.grid.with-hover .product-actions .buttons.buttons_3 > *,
.product-box .buttons.buttons_3 > * {
width: 33%;
}
Please try so :) Because by default the box-sizing is content-box which is meaning width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included.
These element has border-left: 1px solid #e0dfdf; and width: 33.333%. In the smaller screen, each element will has small width, e.g less than 100px lead to 1px border costs more than 1% of width. Then the last element is pushed down to next line.
ul.products li.product.grid.with-hover .product-actions .buttons a.details, .product-box .buttons a.details {
box-sizing: border-box;
}

Centering a div which has an image overlayed on top

I have a container div with an image overlayed on top of it.
I want to center this container div within a basic popin. I am sure it has something to do with the overlay approach I am using within the CSS, but I cannot figure it out. How can I center the container dev within the popin?
EDIT: There are several of these blocks placed in-line.
CSS and HTML are as follows:
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
.popin{
background:#fff;
padding:15px;
box-shadow: 0 0 20px #999;
border-radius:2px;
}
#underlay1 {
width: 320px;
height: 320px;
position: relative;
}
#underlay2 {
width: 320px;
height: 320px;
position: relative;
}
<div class="row">
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay1"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay2"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
</div>
Underlay is receiving an image from an API. overlayimage.gif is another image being placed on top.
Just remove float: left; from .containerdiv and give text-align: center; to .popin will solve your issue.
You can center absolute div like following way:
left: 50%;
transform: translate(-50%, 0px);
http://jsfiddle.net/5z2k1b1r/
Edit:
use margin: 0 auto; for #underlay as per your expected output.
Check Fiddle

binding a click event to jqzoom to launch fancybox

So I've been playing around with this for a while, but cannot get the binded click event to fire from a jqzoomed element.
HTML:
<div class="product-clicktozoom-image">
<div class="product-clicktozoom-image-main">
<img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/>
</div>
</div>
JS:
jQuery(document).load(function() {
jQuery('#mainimage').bind('click',function(){
var fancyImage = jQuery('#mainimage').attr('src');
jQuery.fancybox.open(fancyImage);
});
});
jqzoom creates a couple of extra div's so the final page structure actually looks like this:
<div class="product-clicktozoom-image-main">
<a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;">
<div class="zoomPad">
<img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;">
<div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"></div>
<div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;">
<div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;">
<div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div>
<div class="zoomWrapperImage" style="width: 100%; height: 355px;">
<img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;">
</div>
</div>
</div>
<div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;">Loading zoom</div>
</div>
</a>
</div>
I have tried binding the click event to the #mainimage, along with the zoomPad class and also the img within the zoomWrapperImage element as this appears to be the top element when you mouseover the image.
All I want to do is open the full image in a fancybox if they click on the zoom (currently the zoom happens on mouseover). I know the fancybox.open(fancyImage); works, I can run the code in the click function directly in the console successfully, I just can't get it to fire from the click event itself.
Help!
This turned out to be pretty simple in the end, the click event needs to bind on the .zoomPad, and I used window.load in place of (document).ready as that ensures all the elements have loaded.
Final JS:
jQuery(window).load(function() {
jQuery('.zoomPad').bind('click',function(){
var fancyImage = jQuery('.zoomWrapperImage img').attr('src');
jQuery.fancybox.open([{href : fancyImage}], {closeClick : true});
});
});

Categories