How do I insert a div into a random location inside a container of divs? Similar to Insert a div in a random location in a list of divs except I'm not using a list.
Right now it appears inside a random container div, not randomly inside the container itself:
http://jsfiddle.net/frank_o/QXdL3/15/
HTML:
<div class="template" style="display: none;">
<div class="image">
<img src="http://placekitten.com/75/150">
</div>
</div>
<div class="main">
<div class="image">
<img src="http://lorempixel.com/75/150">
</div>
<div class="image">
<img src="http://lorempixel.com/75/150">
</div>
<div class="image">
<img src="http://lorempixel.com/75/150">
</div>
</div>
JS:
var template = $('.template').find('.image').clone(),
target = $('.main'),
targetChildren = target.find('.image'),
random = Math.floor(Math.random() * targetChildren.length);
targetChildren.eq(random).append(template);
You're almost there. You just need to change append to after; change:
insertionTargetChildren.eq(random).append(insertionTemplate);
To:
insertionTargetChildren.eq(random).after(insertionTemplate);
Your current code inserts the new div into another div as follows:
<div class="image" style="position: absolute; left: 150px; top: 310px;">
<img src="http://lorempixel.com/75/150">
<div class="image" style="position: absolute; left: 225px; top: 310px;">
<img src="http://placekitten.com/75/150">
</div>
</div>
The new version will produce the following:
<div class="image" style="position: absolute; left: 150px; top: 310px;">
<img src="http://lorempixel.com/75/150">
</div>
<div class="image" style="position: absolute; left: 225px; top: 310px;">
<img src="http://placekitten.com/75/150">
</div>
You were very close!
Instead of .clone(), try using .html() like my example below.
Also, I slightly changed your loop along with the random number generator.
Works very well now. Refresh the page to see three random kitty photos added somewhere within the other images.
WORKING EXAMPLE
This will put it in random position:
random = Math.floor(Math.random() * (targetChildren.length+1));
if(random > targetChildren.length){
target.append(template);
}else{
targetChildren.eq(random).before(template);
}
The targetChildren.length+1 is to add the possibility of appending in the last place ;)
Related
So I have a bunch of elements like:
<div class="hover-icon one">
<img class="original" src="sswe-images/Circle_Customer Notifications.png"/>
<img class="hovered one" src="sswe-images/Customer-Notifications.gif" />
</div>
<div class="hover-icon two">
<img class="original" src="sswe-images/Circle_Field Service Tools.png" />
<img class="hovered" src="sswe-images/Field-Service-Tools.gif" />
</div>
<div class="hover-icon three">
<img class="original" src="sswe-images/Circle_Remote Connectivity.png" />
<img class="hovered" src="sswe-images/Remote-Connectivity.gif" />
</div>
where the .original are placeholders and the .hovered are gifs that I want to animate on hover, then go back to their normal state after the mouse leaves. My attempt is:
$('div.hover-icon').hover(function(){
var orig = $(this).find('.original');
orig.hide();
var hov = $(this).find('.hovered');
hov.attr('src', hov.attr('src') + "?x=" + Math.random());
setTimeout(function(){ hov.show(); }, 100);
/* $(this).mouseleave(function(){
hov.hide();
orig.show();
});*/
});
but the reason for the commented out section is because it's not working. It's causing all kinds of craziness. What is the proper pattern I should be using here?
The basic HTML structure is correct. Use CSS only though , like this codepen http://codepen.io/ryanpcmcquen/pen/gGqdI does
.hover-icon {
position: relative;
margin: 0 auto;
}
.hover-icon img {
position: absolute;
}
.hover-icon img.original:hover {
opacity: 0;
}
I have following slider code in html;
<div class="carousel-inner" style="position: relative;">
<div class="item">
<img src="forsidebanner_gf39.jpg" alt="">
<a class="overlay" style="position: absolute; top: 0%; left: 0%; width: 101.4%; height: 103.31491712707%;" href="domain.com" title="">
</a>
</div>
<div class="item active">
<img src="forsidebanner_50fifty_somvistpaafarmen.jpg" alt="">
<a class="overlay" style="position: absolute; top: 0%; left: 0%; width: 100.8%; height: 102.76243093923%;" href="domain.com/one.html" title="">
</a>
</div>
What I want to achieve is to console log the div number of class "item" so for example if clicked on image 1 of parent class "item" it will print 1, and if click on second image it will print 2.
I tried this code but its printing only 1
$(".item").click(function(){
var numitem = $(this).length;
console.log(numitem);
});
This is the demo link -> https://jsfiddle.net/ru44voeq/
Any help will be highly appreciated.
Thanks
The problem were the overlays. Because of that you could not retrieve the index of the clicked element. Since you can not hide them by removing the html the jquery then took care of that.
Because the overlays were hidden, you can not navigate to your URL. By retrieving the URL attribute
window.location.href = $(this).find(".overlay").attr("href");
from the overlay which is shown again that is made possible and the page is shown.
Full jquery code and example,
fiddle example: https://jsfiddle.net/eugensunic/ru44voeq/3/
$(".overlay").hide();
$(".item").click(function(){
var numitem = $(this).index()+1;
$(".overlay").show();
window.location.href = $(this).find(".overlay").attr("href");
alert(numitem);
});
Using the index() function work but the problem you have is the style of overlays like #GrafiCode Studio mentioned in comment, so when removing the style the link will not work, that true.
Try this solution that copy the img tag and remove the original and append the copy of the img to the link, it work see the code bellow.
//Restructuring the HTML code on ready
$(".carousel-inner").find('.item').each(function(){
//make a copy of img
var img = $(this).find('img').clone(true);
//remove image
$(this).find('img').remove();
//append copy to the link
$(this).find('a').removeAttr('style').html(img);
});
//Handle the click event
$(".item").click(function(){
var numitem = $(this).index()+1;
alert(numitem);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="carousel-inner" style="position: relative;">
<div class="item">
<img src="http://web.ccpgamescdn.com/newssystem/media/67432/1/100_-Twitter.jpg" alt="">
<a class="overlay" style="position: absolute; top: 0%; left: 0%; width: 101.4%; height: 103.31491712707%;" href="domain.com" title="">
</a>
</div>
<div class="item active">
<img src="http://www.elcomcms.com/Images/UserUploadedImages/664/facebookicon_100x100.jpg" alt="">
<a class="overlay" style="position: absolute; top: 0%; left: 0%; width: 100.8%; height: 102.76243093923%;" href="domain.com/one.html" title="">
</a>
</div>
</div>
Hope this helps.
You can use inArray function to solve this. Check it out the code below.
$(".item").click(function(){
console.log($.inArray(this,$(".item")));
});
Doing this, you will add to every item the click event. The function inArray works with a element on the first parameter, on this case the item, and a list of elements on the second parameter, this function will return the index of the item on the given array.
You are setting a click listener to each of the items.
When the callback function gets executed the context (what this refers to) is the clicked element, the node itself.
Then you call the jQuery function on the node with $(this) which returns you a jQuery element, with only that node in it.That's why length is 1.
If you want to get the number of the .item you should do something like:
var items = $('.item')
items.click(function (){
.....
items.length //number of items
$(this).index() //index of the node in its parent, not relative to the `.items`
var itemIndex = $.inArray(this, items) //as suggested by #Franklin Satler
})
The docs say:
Search for a specified value within an array and return its index (or -1 if not found).
i am attempting to display images when the corresponding thumbnail is hover over using only css and am having trouble with the logic and don't know if it is even possible. i can do it in javascript if absolutely necessary.
Here is my latest attempt.
<div id='img-container' class='grd12'>
<img id='img1' class='slide-images' src='images/10086115704_15ab56a165_o.jpg' alt='1'>
<img id='img2' class='slide-images' src='images/9917938624_0a8778f8b1_o.jpg' alt='2'>
<img id='img3' class='slide-images' src='images/PIA18847.jpg' alt='3'>
<img id='img4' class='slide-images' src='images/sun-large.jpg' alt='4'>
</div>
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb1' class='grd3 thumbnail' src='images/10086115704_e36e457d2b_q.jpg' alt='##'>
<!-- </div>-->
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb2' class='grd3 thumbnail' src='images/9917938624_1ed12deaa2_q.jpg' alt='##'>
<!-- </div>
<div class='grd3 thumbnail'>-->
<img id='thumb3' class='grd3 thumbnail' src='images/PIA18847.jpg' alt='##'>
<!--</div>
<div class='grd3 thumbnail'>-->
<img id='thumb4' class='grd3 thumbnail' src='images/sun-large.jpg' alt='##'>
<!--</div>-->
And the CSS
#img-container{
position:relative;
top:0px;
left:0px;
height:950px;
}
.slide-images{
position:absolute;
top:0px;
left:0px;
}
.thumbnail > img{
margin-left:auto;
margin-right:auto;
display: inherit;
}
img#thumb4:hover ~ #img4>#image4{
display:none;
}
I believe this is possible using CSS alone, however it is not very scaleable and it might end up being easier and more appropriate to use Javascript for this. For example:
img#thumb1:hover ~ #img4>#image4{
display:none;
}
Your selector here is incorrect. The general sibling selector selects only elements after the first match. In this case, your image thumb is after your image, but this selector is looking for an image after an image thumb. This is the opposite of what you have. There is no 'sibling before' selector in CSS.
An easier solution, rather than fiddling around with CSS selectors, would just be to bind each thumbnail to a click event that changes the source of a single image tag each time (or alternatively, scrolls across/fades, whatever animation you're looking for). This way, you save on markup, don't need to worry about positioning as much, and can dynamically generate the image display.
For example, to get the ID of an image, you could bind a click event to each thumbnail and then grab the ID of the image which could stored in a data attribute:
$('.thumbnail').on('hover', function() {
var activeImg = $(this).data('imgid');
// From here, set the main image to have the associated image source
}
This is very possible to achieve with just CSS. The layout of your HTML is what needs to change. In this example:
Each thumbnail and full-size image is placed inside a div container
The full-size image is hidden with opacity: 0;
When the div container is hovered, the full-size image is given opacity: 1 and will fade-in thanks to the transition
z-index: 1 keeps the full-size images above the thumbnails
Full Example
.item {
float: left;
position: relative;
}
img {
display: block;
cursor: pointer;
margin: 5px;
}
.fullsize {
position: absolute;
opacity: 0;
transition: opacity 0.6s;
z-index: 1;
top: 0;
left: 0;
pointer-events: none;
}
.item:hover .fullsize {
opacity: 1;
}
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
I am developing an app with many draggable and droppable elements. They all work except in this one case:
This should be draggable:
<div id="8093244595324" class="insertion ui-draggable" style="z-index: 4; position: relative;">
Test Accou...<br />0.330H
</div>
And here's some surrounding HTML.
<div class="paginationPageMargin" style="">
<div id="8195443196587" class="paginationPage" style="">
<div id="8290907158934" class="oneEighthPageLayer" style=""></div>
<div id="8222242963571" class="oneSixthPageLayer" style=""></div>
<div id="8460851026264" class="oneThirdPageLayer" style="">
<div id="8072616373566" style="height: 33%;">
<div id="8686623363113" class="oneThird insertionBlock" value=" " style="">
<div id="8093244595324" class="insertion ui-draggable" style="z-index: 4; position: relative;">
Test Accou...<br />0.330H
</div>
</div>
</div>
<div id="8810410276771" style="height: 33%;">
<div id="8605800682859" class="oneThird insertionBlock" value=" "></div>
</div>
<div id="8509644301764" style="height: 33%;">
<div id="8708665901661" class="oneThird insertionBlock" value=" "></div>
</div>
</div>
</div>Page 1
</div>
Note that there's some z-index stuff going on here. The draggable element itself is index 4. Each page layer div also has a z-index:
.oneThirdPageLayer {
z-index: 1;
height: 100%;
}
.oneSixthPageLayer {
z-index: 2;
height: 100%;
}
.oneEighthPageLayer {
z-index: 3;
height: 100%;
}
I'm not sure if the z-index stuff is relevant or not, as I've taken care to ensure that the element that I'm binding draggable to is on the top of the stack.
Here's the draggable binding:
$('.insertion').draggable({
start: handleDragStart
});
And handleDragStart:
function handleDragStart( event, ui ) {
var $insertion = ui.helper,
insertion = getInsertion($insertion.attr('id'));
// This insertion is in the air now... it has no blocks
insertion.insertionBlocks = [];
}
Any insight would be much appreciated.
I removed all z-index values except for the insertions.
A div in which I would be sliding in images , I want the images to appear in only a certain area of the div, say a triangle shaped area. The rest of the div should just show whatever is underneath the div.
CSS:
#overlay {
width: 700px ;
height: 300px ;
position: absolute;
top: 50px;
left: 50px;
z-index: 100;
background: url("img/overlay.png");
background-repeat: no-repeat;
}
HTML:
<div class="boxcat" id="websitesbox">
<div id="overlay"></div>
<div id="websitesSlider">
<img src="img/seanswers.PNG" alt="Seanswers screenshot">
<img src="img/stories.png" alt="Seanswers screenshot">
<img src="img/PerfectUpload_1.png" alt="Seanswers screenshot">
</div>
</div>
Here I would be sliding in the images into overlay, BUT I don't want the images to show up completely , instead just a part of the overlay div should be covered in the image.
Not sure If I am making any sense. If I am is this possible ?
Thanks
You want to use mask-image however it isn't widely supported by the browsers.
Here you can read about the spec: http://www.w3.org/TR/css-masking/
And here you can see the support: http://caniuse.com/#search=mask
you can next websitesSlider into overlay:
<div class="boxcat" id="websitesbox">
<div id="overlay">
<div id="websitesSlider">
<img src="img/seanswers.PNG" alt="Seanswers screenshot">
<img src="img/stories.png" alt="Seanswers screenshot">
<img src="img/PerfectUpload_1.png" alt="Seanswers screenshot">
</div>
</div>
</div>