i have 2 css classes , left side and right side of screen and i need to put them togheter, in these classes i have images which look like a puzzle:
By dragging image from the right side to the left side.At drop,must fit with the image from left side. I read about drag and drop but didnt find something like that :(
What i've tried?
EDIT: http://postimg.org/image/je31ptb6d/ (this is an example with my pictures.On top are images separated as classes - class="left" for ca and class="right" for nă.On bottom are images after i drop the image from right to one from left.My question is how to specify the correct drop zone to make images look like bottom one from link after i drop image from right side? )
JS/Jquery:
// shuffle function for right side only
$(document).ready(function() {
var a = $(".right > img").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
var j = Math.floor(Math.random() * (i + 1));
var bi = a[i];
var bj = a[j];
a[i] = bj;
a[j] = bi;
}
$(".right").append(a);
});
// drag and drop
$(function() {
$( ".right img" ).draggable
({
cursor: 'move',
revert: 'invalid',
});
$( ".left img" ).droppable({
tolerance: 'fit',
});
});
HTML:
<div class="left">
<img class="piese" id="piesa1" src="images/Text_1.svg" />
<img class="piese" id="piesa2" src="images/Text_2.svg" />
<img class="piese" id="piesa3" src="images/Text_3.svg" />
<img class="piese" id="piesa4" src="images/Text_4.svg" />
</div>
<div class="right">
<img class="piese" id="piesa5" src="images/Text_5.svg" />
<img class="piese" id="piesa6" src="images/Text_6.svg" />
<img class="piese" id="piesa7" src="images/Text_7.svg" />
<img class="piese" id="piesa8" src="images/Text_8.svg" />
</div>
To solve your problem you must build a grid
and use drag drop by taking as a reference the location of the squares of the grid.
This is a simple example to give you an idea.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#grid{
background-color: #09F;
height: 130px;
width: 390px;
position:relative;
margin:100px auto;
}
.square{
height: 128px;
width: 128px;
border:1px solid #999;
float:left;
}
#first-image{
position: absolute;
left: 0px;
}
#second-image{
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<!--take two images by 120px with this class and id -->
<div id="grid">
<img class="dr" id="first-image" src="your-image.png" width="128" height="128">
<img class="dr" id="second-image" src="your-image.png" width="128" height="128">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(xx = 0; xx < 3; xx++) {
$("#grid").append($('<div class="square"></div>'));
};
$('.dr').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('div.square').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
de=$('#'+data).detach();
var x = $(this).position().left;
var y = $(this).position().top;
de.css({'position':'absolute','top':y+'px','left':x+'px'}).appendTo($(this));
};
});
});
</script>
</body>
</html>
Related
I'm trying to make a website where you can upload an image, then select another one and add it over the uploaded one. I'm using jquery to make the image draggable and resizable and everything works fine, except that I can't add it over the uploaded image.
Here's my code:
code:
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.blocks {
width: 10%;
z-index: 9999;
}
.block {
width: 100%;
height: 100%;
border: 1px solid #C8C8C8;
margin: 0px;
background-color: #F0F0F0;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upload">
<input type='file' onchange="readURL(this);" /> <br>
</div>
<br/>
<div class="block">
<div class="background">
<img id="bg" src="" alt="" width="50%" ; height="50%" ; class="center" />
</div>
</div>
<br/>
<div id="existingImges">
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://pngimg.com/uploads/car_wheel/car_wheel_PNG23300.png" width="200px;" /></a>
</div>
So here's the result in this case:
and here's what I'd like to be after adding a wheel:
As #Troy Bailey and I mentioned, the way to success is the css attribute z-index.
Here the changes:
First step:
Add this above z-index attribute to class .block: z-index: 1;.
Second step:
For your javascript you have to add some lines which increases the z-index attribute s of your created divs, with class .container.
$(document).ready(function() {
$(document).on('click', '.block-add', function() {
var src = $(this).find('img:first').attr('src');
//New line
//First, find out how many images has being added and dragged
var foundAddedDivs = $('.block').find('.container').size();
//New line
//Second, get the current value from recently added 'z-index' from fist step.
var backGroundDivIndex = $('.block').css("z-index");
//New line
//Third: Calulate a new value for 'z-index' for each draggable elements
var zIndex = backGroundDivIndex + foundAddedDivs;
//Modified line
//Forth: Creates a new div and add calculated z-index to draggable element
var elem = $('<div class="container" style="z-index: '+ zIndex +'">
<img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
.block-add {z-index: 99;}
/* just increase the z-index of the wheel so it can be in front of the car image */
I'm trying to make a jquery code where you can show different images (1-3 different images) when you move the mouse around.
The images will be right beside the cursor, and they will only appear 1-3, not more than that. And each time the mouse moves, these images will change.
I currently have this as my html code,
<div class="mainbody">
<section class="container">
<div class="img_div">
</div>
</section>
</div>
And my jquery code looks like this:
let img_array = ['./img/awards_icon.png', './img/norinuri_icon.png'];
$("div.mainbody").mousemove(function(e) {
for(i=0; i<img_array.length; i++){
$('.img_div').append("<img src='" + img_array[i] +"'/>");
$('.img_div').fadeIn("5000");
$('.img_div').finish().fadeOut("5000");
$('.img_div').offset({
left: e.pageX,
top: e.pageY + 20
});
}
});
The 2 images that I have in my jquery array appears when the mouse moves, but instead of only having 2 images these images add continuously, without stopping.
So each time I would move my mouse, the images would continue to add infinitely.
I will add more images in the jquery array for sure,
but how should I have only two images added, and change these images as I move the mouse?
Use background-image
var imageArr=["https://www.w3schools.com/css/paper.gif","https://www.w3schools.com/css/gradient_bg.png","https://www.w3schools.com/css/img_tree.png"];
var count=0;
$( ".mainbody" ).mouseover(function() {
$( ".img_div" ).css('background-image', 'url("' + imageArr[count] + '")');
if(count == imageArr.length-1)
count=0;
else
count++;
});
.mainbody{
width: 500px;
height: 500px;
border:1px solid red;
}
.img_div{
width: 200px;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainbody">
<section class="container">
<div class="img_div">
</div>
</section>
</div>
Here is working fiddle;
USING mousemove (to avoid the images to change so many times while mouse move I use timeout)
var imageArr=["https://www.w3schools.com/css/paper.gif","https://www.w3schools.com/css/gradient_bg.png","https://www.w3schools.com/css/img_tree.png"];
var count=0;
var timeoutid = 0;
function setImage() {
$( ".img_div" ).css('background-image', 'url("' + imageArr[count] + '")');
if(count == imageArr.length-1)
count=0;
else
count++;
}
$(".mainbody").mousemove(function() {
clearTimeout(timeoutid);
timeoutid = setTimeout(setImage, 100);
});
.mainbody{
width: 500px;
height: 500px;
border:1px solid red;
}
.img_div{
width: 200px;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainbody">
<section class="container">
<div class="img_div">
</div>
</section>
</div>
화이팅!
I have created a working example for you. You can try it now:
<div class="mainbody">
<section class="container">
<div class="img_div">
hello
</div>
</section>
css
.mainbody {
border:1px solid red;
display:block;
height:1000px
}
jquery
let img_array = ['https://anotherjavaduke.files.wordpress.com/2018/08/avataaars-2.png',
'https://images2.minutemediacdn.com/image/upload/c_crop,h_1192,w_2121,x_0,y_111/f_auto,q_auto,w_1100/v1554921884/shape/mentalfloss/22461-istock-176984635.jpg'];
$("div.mainbody").on('mousemove', function(e) {
var i;
$('.img_div').html('')
for (i = 0; i < img_array.length; i++) {
console.log($('.img_div').has('img').length)
if ($('.img_div').has('img').length < img_array.length) {
$('.img_div').append("<img style='width:100px; height:100px' src='" + img_array[i] + "'/>");
$('.img_div').fadeIn("5000");
$('.img_div').finish().fadeOut("5000");
$('.img_div').offset({
left: e.pageX,
top: e.pageY + 20
});
}
}
});
Working example
[Codepen] https://codepen.io/prashen/pen/ZEEqJEo
I am making a one page website and in the middle of the site i have a few images that i want to appear when the user is scrolling down. when the user is scrolling down, i want the image to fade in and stay at 100% opacity. Ive gone through loads of different scripts and none work. I have found a good code snipped but it still doesnt seem to be working. It just displays the image but with low opacity.
Here is the code:
<script>
var $win = $(window);
var $img = $('.fadeInScroll'); // Change this to affect your desired element.
$win.on('scroll', function() {
var scrollTop = $win.scrollTop();
$img.each(function() {
var $self = $(this);
var prev = $self.offset();
if (prev) {
var pt = 0;
pt = prev.top - $win.height();
$self.css({
opacity: (scrollTop - pt) / ($self.offset().top - pt)
});
} else {
$self.css({
opacity: 1
});
}
});
}).scroll();
</script>
<section id="about">
<h2><center>Header</center></h2>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;"> <img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555"></div>
</section>
Ok. So if I correctly understand what you want, you can block your fade effect when your images are already fade in this way :
var $win = $(window);
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
$('img.hidden').each(function () {
var $self = $(this);
var prev=$self.offset();
if(prev){
var pt=prev.top-$win.height();
var opacity = (scrollTop-pt) / ($self.offset().top-pt);
$self.css({
opacity: opacity
});
if(opacity >= 1) $self.removeClass('hidden');
}
else{
$self.css({
opacity: 1
});
}
});
}).scroll();
.wrapper {
background: orange;
height: 2000px;
}
.wrapper img {
width: 300px;
position: absolute;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<img class="hidden" style="top: 400px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"/>
<img class="hidden" style="top: 1000px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"/>
<img class="hidden" style="top: 1600px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg">
</div>
Try changing the part where you have the inline style of style="opacity: 0.1; . Usually inline styles override the CSS you might have in the style tag. Look at this example I set the inline style to blue but the set it in the css to red the blue wins. maybe that is what is cause your opacity to stay the same.
#element{
color:red;
}
<div id="element" style = "color:blue;">element</div>
That's one reason why it's better to add and remove classes for you styles
I see that your overriding the inline styles with other inline styles so the above may not have caused you problems anyways Here is your snippet working. I don't know exactly what you want. It fades in
$(function(){
var $win = $(window);
var $img = $('.fadeInScroll'); // Change this to affect your desired element.
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
$img.each(function () {
var $self = $(this);
var prev=$self.offset();
if(prev){
var pt=0;
pt=prev.top-$win.height();
$self.css({
opacity: (scrollTop-pt)/ ($self.offset().top-pt)
});
}
else{
$self.css({
opacity: 1
});
}
});
}).scroll();
})
.top{
height: 100vh;
background: rgba(120, 30, 200, 0.3);
}
.fadeInScroll{
width: 300px;
height: 500px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="top"></div>
<section id="about">
<h2><center>Header</center></h2>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
</section>
So I have this:
https://jsfiddle.net/ysr50m2m/1/
Html
class="photoset">
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>
<div class="photoset">
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals26.jpeg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals14.jpg" />
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion.jpg" />
<img src="https://framboisemood.files.wordpress.com/2013/04/fashion-zoo-animals13.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals9.jpg" />
</div>
CSS
.photoset > img:not(:first-child) {
display: none;
}
JavaScript
$(document).ready(function() {
$('.photoset').each(function(){
$(this).data('counter', 0);
});
var showCurrent = function(photoset) {
$items = photoset.find('img');
var counter = photoset.data('counter');
var numItems = $items.length;
var itemToShow = Math.abs(counter % numItems);
$items.fadeOut();
$items.eq(itemToShow).fadeIn();
};
$('.photoset').on('click', function(e) {
e.stopPropagation();
var photoset = $(this);
var pWidth = photoset.innerWidth();
var pOffset = photoset.offset();
var x = e.pageX - pOffset.left;
if (pWidth / 2 > x) {
photoset.data('counter', photoset.data('counter') - 1);
showCurrent(photoset);
} else {
photoset.data('counter', photoset.data('counter') + 1);
showCurrent(photoset);
}
});
});
and I want the images to overlap. When I click an image, the next one appears first on the bottom and then it appears in place of the first image.
How can I solve this issue? Thanks in advance.
Since 2 elements can't occupy the same position unless they're positioned to do so, I absolutely placed the other image above the previous one, and when the previous one disappears, I removed the absolute positioning.
Fiddle:
https://jsfiddle.net/qu1Lxjo1/
CSS:
.photoset {
position: relative;
}
.photoset img {
position: relative;
top: 0px;
left: 0pxx
}
JS:
$items.fadeOut();
$items.eq(itemToShow).fadeIn({done: function() {
$(this).css('position','relative')
}}).css('position', 'absolute');
};
I'm looking to achieve something like this demo here, but for each element of a class, it will stop scrolling and drag the next div up from the bottom. This could be a similar thing to a printer printing paper. I'm not sure how it will fully work for the JS side but what I have is below. I'm close, but it doesn't like doing more than 2 elements. Adding the support for the extra elements would be amazing because then this could be released as a library to achieve the effect.
If the below snippet doesn't look like it works quite right view it here on codepen.
$(document).ready(function() {
$('.container:first-child').css('position', 'relative');
});
$(window).scroll(function() {
$('.container').each(function(i) {
var winheight = $(window).scrollTop() + $(window).height();
var distToTop = $(this).position().top + $(this).height();
var dist = distToTop - winheight;
if ((dist) <= 0) {
$(this).css('position', 'fixed').css('top', ($(this).children().height() - $(window).height()) / (-2) + 'px');
} else if (dist == $(this).height()) {
$(this).css('position', 'relative').css('top', $(window).height() + 'px').css('z-index','1');
}
console.log(dist + ' ' + i);
});
});
body {
margin: 0;
padding: 0;
}
.container {
position: fixed;
top: 100%;
}
.container:first-child {
background: tan;
width: 100%;
height: 100%;
}
.container:nth-child(2) {
background: blue;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='big'>
<div class='container'>
<div class='t'>
<img src='http://placehold.it/500x250'>
<img src='http://placehold.it/500x250'>
</div>
</div>
<div class='container'>
<div class='t2'>
<img src='http://placehold.it/500x250/fff'>
<img src='http://placehold.it/500x250/fff'>
</div>
</div>
<div class='container'>
<div class='t'>
<img src='http://placehold.it/500x250'>
<img src='http://placehold.it/500x250'>
</div>
</div>
<div class='container'>
<div class='t2'>
<img src='http://placehold.it/500x250/fff'>
<img src='http://placehold.it/500x250/fff'>
</div>
</div>
</div>
The Demo on this site is currently a little wonky because of the difference in windows sizes.