I know this issue might have been raised before but I still could not find the answer after long time searching..
I am trying to use jQuery sortable function to make my images swappable. The function works fine when the position of the img is not set. But when the position is set ( I want to fixed the images at some particular point on the viewpoint) the swap won't happen at all.
Is there a way to make sortable work while the position is set to either "absolute" or "fix?"
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
#sortable > div {
float: left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="sortable">
<div id="demo5" , class="card" , draggable="true" , style="
top: 135px;
left: 190px;
position: fixed;
z-index: 1;
cursor: move;
float:left;
visibility: show;">
Card 1
</div>
<div id="demo6" , class="card" , draggable="true" , style="
top: 135px;
left: 245px;
position:fixed;
z-index: 1;
cursor: move;
visibility: show;">
Card 2
</div>
</div>
Related
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 ?
I want to overlay image on another image and change the pixel(location) of it.
I search the google and wrote this code:
.background {
position: relative;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}
.overlay {
position: absolute;
left: 0;
top: 0;
transform: translate(440px, 340px);
z-index: 2;
}
<div class="container-fluid">
<div class="row" style="margin-top:10px;">
<div class="col-md-10 col-lg-10 col-sm-10 col-xs-10 col-xl-10 " id="test">
<img src="static/overlay.png" id="image_master" class="background" style="border: 4px solid lightgrey;">
<img src="static/overlay.png" id="overlay2" class="overlay">
</div>
This code gives me the result I want, but the problem is when I resized the page, the image-overlay get out from the background image.
I want to preserve the proportion between them.
Reason
The reason why the image overlay is not responsive because you are giving a specific value translate(440px, 340px) for transform and this is applicable for all the devices.
How to fix it
Use media queries (#media) for each viewports/devices.
or
Make the overlay-image absolute position with respect to it's container #test.
I've used this approach to achieve the result. You can have a look at the working fiddle.
Link: https://jsfiddle.net/Baliga/fme12tby/22/
Hope this might help you.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.image-container {
position: relative;
display: inline-block;
}
.image-overlay {
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="image-container">
<img class="image-content" src="https://images.pexels.com/photos/1532771/pexels-photo-1532771.jpeg?auto=compress&cs=tinysrgb&h=350">
<img class="image-overlay" src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?auto=compress&cs=tinysrgb&h=350">
</div>
</body>
so I have some HTML that looks like this:
<div id="container">
<svg id="chart1"></svg>
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
</div>
With corresponding CSS like,
svg {
/*display: block;*/
position: relative;
z-index: 1;
}
html, body, #container, svg {
margin: 0px;
padding: 0px;
height: 80%;
width: 100%;
}
#logo {
position: absolute;
z-index: 10;
top: 15px
left: 15px;
}
you would think that the div with the image would be placed on top, right? (there's no separate CSS styling for chart1)
But this is what it shows, and it won't budge.
Edit
#container {
position: relative;
}
didn't change anything sadly enough.
The whole code (minus Javascript underneth that makes the D3 graph/svg):
Have you tried following sequence to get logo to the top of the chart:
<div id="container">
<div id='logo'>
<img id="logo" src="cubs_best.png";>
</div>
<svg id="chart1"></svg>
</div>
Also, remove semicolon at the end of img holder <....src="cubs_best.png";>
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
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});
});
});