I've found this code to create some div randomly :
(function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').addClass("destruct").css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).appendTo( 'body' ).fadeIn(500, function(){
makeDiv();
});
})();
But I want the div turn to black on hover, one by one.
$(document).ready(function() {
$('.destruct').hover( function(){
$('.destruct', this).css({background: '#000'});
});
});
But it doesn't work...
Here is a http://jsfiddle.net/q6L7C/2/
Demo
Its because your div's are dynamically generated, try:
$(document).ready(function() {
$(document).on('mouseover', '.destruct', function(){
$(this).css({background: '#000'});
});
});
If you are on older versions of jquery, (>1.7), Use:
$(".destruct").live("mouseover", function(){
$(this).css({background: '#000'});
});
There are a couple of ways to go about doing this. One is event delegation:
http://jsfiddle.net/q6L7C/3/
This changes the binding to:
$(document).on('hover', '.destruct', function(){
$(this).css({background: '#000'});
});
...but I would try to use a more specific selector than document.
Another solution would be to bind the hover (or mouseover in this case, as it should be sufficient) callback to each of the divs individually as they get created, but that results in potentially a lot of separate event bindings.
You can bind .mouseenter() when you create divs or you can bind .mouseenter() to document (event delegation) as other answers pointed out. I will go with first method. Updated demo
(function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').addClass("destruct").css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color
})
// Magic happens here!
.mouseenter(function(){
$(this).css({background: '#000'});
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).appendTo( 'body' ).fadeIn(500, function(){
makeDiv();
});
})();
Related
I'm trying to replicate Zara's product functionality: (click on product image)
https://www.zara.com/es/en/woman/outerwear/view-all/tweed-coat-with-metal-buttons-c733882p5205048.html
I have it almost working from a jsfiddle I found:
https://jsfiddle.net/y6p9pLpb/1/
$(function() {
$('.product-wrapper a').click(function() {
$('.image-zoom img').attr('src', $(this).find('img').attr('src'));
$('.image-zoom').show();
$('.product-wrapper').css('display', 'none');
return false;
});
$('.image-zoom').mousemove(function(e) {
var h = $(this).find('img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight) / vptHeight) * e.pageY;
$('div img').css('top', y + "px");
});
$('.image-zoom').click(function() {
$('.image-zoom').hide();
$('.product-wrapper').css('display', 'block');
});
});
There's only one thing I can't solve.
When I click on the image and expands, this one jumps to match its respective position relative to the cursor.
Is there any way I can solve that? Like Zara does...
Thanks in advance!
The issue is that the image jumps to your cursor once you move it, right? This should do what you're looking for!
https://jsfiddle.net/8z67g96b/
I just broke out the position change as a function, and also call it when you click the thumbnail - that way, the image already has the cursor's position influencing it when it first appears.
function zoomTracking(event){
var h = $('.image-zoom img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight) / vptHeight) * event.pageY;
$('.image-zoom img').css('top', y + "px");
}
$('.product-wrapper a').click(function(e) {
$('.image-zoom img').attr('src', $(this).find('img').attr('src'));
$('.image-zoom').show()
zoomTracking(e);
$('.product-wrapper').css('display', 'none');
return false;
});
$('.image-zoom').mousemove(function(e) {
zoomTracking(e);
});
In the fiddle, it has a section relating to the position of the mouse and the width/height of the image:
$('.image-zoom').mousemove(function(e) {
var h = $(this).find('img').height();
var vptHeight = $(document).height();
var y = -((h - vptHeight) / vptHeight) * e.pageY;
$('div img').css('top', y + "px");
});
Simply remove this portion and it won't do any moving with the mouse, just expand onClick.
Using this - random position of divs in javascript as a starting point I am trying to randomly position divs containing text from an array.
Current code (predominately copied Ken Redler's answer in the linked post):
(function makeDiv(){
var divsize = 200;
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
//set up the array to hold the random div content
var boastsText = [];
var i = 0;
$(".boast ul li").each(function() { boastsText.push($(this).text()) });
$newdiv = $('<div/>').css({
'width':divsize+'px',
'height':divsize+'px',
'color': color
});
// make position sensitive to size and document's width
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).html(boastsText[i]).appendTo( 'body' ).fadeIn(100).delay(1000).fadeOut(500, function(){
$(this).remove();
makeDiv();
});
})();
The only thing I have really added is the setting up of the array var boastsText = [] and the each function that populates that array.
The problem I have is I need to iterate over the array so each new div created uses the next item as it's content i.e. div 1 uses array item 0, div 2 uses item 1 etc... until it reaches the end of the array and then starts the process again.
I've modified your script a little bit to use a recursive function in order to iterate over the array and maintain the delay and fadeIn/Out you have:
(function() {
//set up the array to hold the random div content
var boastsText = [];
$(".boast ul li").each(function () {
boastsText.push($(this).text());
});
function makeDiv(i){
var divsize = 200;
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
var $newdiv = $('<div/>').css({
'width':divsize+'px',
'height':divsize+'px',
'color': color
});
// make position sensitive to size and document's width
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).html(boastsText[i]).appendTo('body').fadeIn(100).fadeOut(500, function() {
$(this).remove();
if (i === boastsText.length) return;
makeDiv(++i);
});
}
//Start the recursion
makeDiv(0);
}());
Objective: Display many squares or any object (words, images, etc.) simultaneously fading in and out.
The example below shows only one square at a time flashing in and out.
http://jsfiddle.net/redler/QcUPk/8/
(function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(200, function(){
$(this).remove();
makeDiv();
});
})();
So if there was an array $data displaying names from a database, how would this be accomplished showing for examples James, John, Mary, and Peter. So for every entry a user enters in a form the name shows flashing in and out of the squares at different times all at once.
I have a website to build that features illustrated repeating borders. The border illustration is 232px high, and I need to ensure my content area is always divisible by this number in order to avoid clipping the border (always rounding up).
I have part of the solution thanks to a similar question asked a couple of years ago but it doesn't recalculate height when the browser window is re-sized; important this era of responsive web:
$(function(){
var curHeight = parseInt($("#content_area").height()),
newHeight = Math.ceil(curHeight/232) * 232;
$("#content_area").height(newHeight );
});
Can anyone help out?
$(window).resize(function() {
var curHeight = parseInt($("#content_area").height()),
newHeight = Math.ceil(curHeight/232) * 232;
$("#content_area").height(newHeight );
});
try .resize():
$(function(){
$(window).on('resize', function(){
var curHeight = parseInt($("#content_area").height()),
newHeight = Math.ceil(curHeight/232) * 232;
$("#content_area").height(newHeight );
}).resize(); // <---calculates on dom ready
});
as far as my understanding goes I think you shouldn't use
$(window).resize()
You should rather use
$(window).on('resize', function(){
// Alien Arrays Code
});
http://api.jquery.com/on/
Steve
use resize() and trigger()
$(function(){
/** first bind event on resize */
$(window).on('resize', function(){
var curHeight = parseInt($("#content_area").height()),
newHeight = Math.ceil(curHeight/232) * 232;
$("#content_area").height(newHeight );
});
/* then trigger on document load */
$(window).resize();
//or
$(window).trigger("resize");
});
Try this
function doResize() {
var curHeight = parseInt($("#content_area").height()),
newHeight = Math.ceil(curHeight / 232) * 232;
$("#content_area").height(newHeight);
}
$(document).ready(function (e) {
doResize();
});
window.onresize = doResize;
The following solves this issue:
$('document').ready(function() {
var heightAdj = (function() {
$('.auto-height').css('height', 'auto');
var curHeight = parseInt($(".auto-height").height());
var newHeight = Math.ceil(curHeight/232) * 232;
$(".auto-height").height(newHeight);
});
$(window).resize(heightAdj);
$(window).trigger('resize');
});
I have the follow jQuery event binding. Refer to the image below to see the DOM. The hover callbacks behave correctly when hovering over .gift-price, .gift-vendor, and .gift-name. However, when hovering over the image (.gift-photo), the mouseenter and mouseleave callbacks are called for every movement of the mouse. Why is this happening?
$('div.gift-gallery-item').hover(
function(e) {
var offset = $(this).offset();
var itemWidth = $(this).width();
var itemHeight = $(this).height();
var hoverItem = $('div#gift-gallery-item-hover');
hoverItem.height(140).width(itemWidth * 2);
hoverItem.css('left', offset.left).css('top', offset.top);
hoverItem.show();
console.log('in: ' + offset.left +', '+ offset.top);
console.log(this);
},
function(e) {
$('div#gift-gallery-item-hover').hide();
console.log('out!');
}
)
DOM Reference Image
The yellow boxes are .gift-gallery-item divs:
Solved my own problem. Basically hover was behaving correctly, but when the absolutely positioned hover info div was under the mouse, the mouseleave event was being trigged on the gift-gallery-item. Simple solution was to split up the hover into its mouseenter and mouseleave events, and bind mouseleave only once using one() instead of bind(). Then in the hover info div's mouseleave event, i rebind the mouseleave on the gift-gallery-item.
$('div.gift-gallery-item').bind('mouseenter', function(e) {
var offset = $(this).offset();
var itemWidth = $(this).width();
var itemHeight = $(this).height();
var hoverItem = $('div#gift-gallery-item-hover');
hoverItem.height(140).width(itemWidth * 2);
hoverItem.css('left', offset.left).css('top', offset.top);
hoverItem.show();
console.log('in: ' + offset.left +', '+ offset.top);
console.log(this);
});
$('div.gift-gallery-item').one('mouseleave', mouseLeaveEvent);
var mouseLeaveEvent = function() {
$('div#gift-gallery-item-hover').hide();
console.log('out!');
};
$('div#gift-gallery-item-hover').hover(
function(e) {
},
function(e) {
$('div.gift-gallery-item').one('mouseleave', mouseLeaveEvent);
}
);