If i hover on the <div> means the whole <div> get expand and shows as bigger size like goole image.
Now i need to do that with time delay.
1.If i hover on the div the popup should come after 5 seconds.
2.If i hover on other div before the 5 seconds of complete of the ol div the old div should not expand after the 5 second the
current div only should get expand.
How can i do that in Jquery.
If i use this,
"setTimeout(function() {alert('hello');},5000);"
I am facing a issue,If i hover first div before 5 seconds complete i go for the another div by hover.so after 5 seconds the old div and the current div both are expand.
$.fn.hoverpulse = function(options) {
// in 1.3+ we can fix mistakes with the ready state
if (this.length == 0) {
if (!$.isReady && this.selector) {
var s = this.selector, c = this.context;
$(function() {
$(s,c).hoverpulse(options);
});
}
return this;
}
var opts = $.extend({}, $.fn.hoverpulse.defaults, options);
if (navigator.userAgent.indexOf("Firefox")!=-1){
this.parent().css({ position: 'relative' });
}
else
{
// parent must be relatively positioned
this.parent().css({ position: 'relative' });
// pulsing element must be absolutely positioned
this.css({ position: 'absolute', top: 0, left: 0 });
}
this.each(function() {
var $this = $(this);
var w = $this.width(), h = $this.height();
$this.data('hoverpulse.size', { w: parseInt(w), h: parseInt(h) });
});
////////////////////////Expanding depend upon width and height///////////////////
var curheight=$(this).height();var curwidth=$(this).width();//getting the current height and width of image
if(curheight>50)
{var growheight=curheight-50; //increasing value for the div depend upon the images
finalheight=190+growheight;
//alert('need to add is'+growheight);
}
else{finalheight=220;}
// var curwidth=$(this).width();
if(curwidth>100)
{var growwidth=curwidth-100;var finalwidth=300+growwidth;}
else{finalwidth=289;}
//alert('The current images height is'+curheight+'width is'+curwidth);
////////////////////////Expanding depend upon width and height Ends///////////////
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
$('table tr td div').css('position','absolute');//added for FF MOUSEOVER
}
var $this = $(this);
$this.parent().css('z-index', opts.zIndexActive);
var size = $this.data('hoverpulse.size');
var w = size.w, h = size.h;
$this.stop().animate({
//$this.delay(2000).animate({
padding:(8+'px'),
function() {
var $this = $(this);
var size = $this.data('hoverpulse.size');
var w = size.w, h = size.h;
$this.stop().animate({
top: 0,
left: 0,
height: (heightfire+'px'),
width: (widthfire+'px')
}, opts.speed, function() {
$this.parent().css('z-index', opts.zIndexNormal);
});
var hoverOutId = $(this).attr('id');
var splitedHoverOutId=hoverOutId.split('_');
document.getElementById('divDynamic' + splitedHoverOutId[1]).style.display='none';
$(this).css("background", "white");
$(this).css("border","none");
$(this).css("padding","0px");
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
$('#divSpaceGrabber table tr td .clsDiv').hoverpulse({
// size: 110, // number of pixels to pulse element (in each direction)
speed: 100 // speed of the animation
});
ssjGanesh
Participant
1928 Points
1352 Posts
Div expand issue in jquery.
Apr 25, 2012 07:40 AM|LINK
I have bulk of images in a page.Each <img> have a separate <div> like,
<div><img/></div>,<div><img/></div>.<div><img/></div>.
<div>I have done the hover effect for the div.
If i hover on the <div> means the whole <div> get expand and shows as bigger size like goole image.
Now i need to do that with time delay.
1.If i hover on the div the popup should come after 5 seconds.
2.If i hover on other div before the 5 seconds of complete of the ol div the old div should not expand after the 5 second the
current div only should get expand.
How can i do that in Jquery.
If i use this,
"setTimeout(function() {alert('hello');},5000);"
I am facing a issue,If i hover first div before 5 seconds complete i go for the another div by hover.so after 5 seconds the old div and the current div both are expand.
but i need to expand only the current div only.
</div> </div>Mark as answer,if it helped U!
gopakumar.r
Participant
959 Points
193 Posts
Re: Div expand issue in jquery.
Apr 25, 2012 08:50 AM|LINK
I think you can use a jquery plugin hoverIntent
http://cherne.net/brian/resources/jquery.hoverIntent.html
Post if this helps your scenario.
Gopakumar
| Please click “Mark as Answer” on the post(s) if it helps |
kedarrkulkar...
All-Star
34247 Points
5505 Posts
Re: Div expand issue in jquery.
Apr 25, 2012 09:31 AM|LINK
try this
define javascript variable globally (outside any function)
var timer=false;
onhover of each div, write this javascript code
function onmouseover()
{
if(timer!=false)
{
clearTimeout(timer);
timer = setTimeout(function() {alert('hello');},5000);
}
}
cleartimeout function will cancel the setTimeout and old div will not be expanded
hope this helps...
KK
Please mark as Answer if post helps in resolving your issue
My Site
ssjGanesh
Participant
1928 Points
1352 Posts
Re: Div expand issue in jquery.
Apr 25, 2012 11:34 AM|LINK
Hello Mr.kulkarni.
Thanks for ur reply,
<div class="post-rating Participant" title="1479 Points"></div> <div class="comment-right-col">I here post my code for hover and hoverout.
Can u give me assist that where i should implement ur code in this?
var timer = false;
var adSpaceId;
var widthfire;
var heightfire;
var ImgWidth;
var ImgHeight;
var hoveredId = $(this).attr('id');
$(document).ready(function () {
$('#divSpaceGrabber').on('mouseover', 'img', function () {
// setTimeout(function () {
// alert('hello');
// },5000);
widthfire = $(this).width(); //alert(widthfire+'initial width');
heightfire = $(this).height(); //alert(heightfire+'initial height');
hoveredId = $(this).attr('id');
adSpaceId = hoveredId.split('_');
//alert('adspaceid ' + adSpaceId[1]);
var dynamicDivId = '#divDynamic' + adSpaceId[1];
//if ($('.clsDiv_' + adSpaceId[1]).find(dynamicDivId).length > 0) {
if ($('#div_' + adSpaceId[1]).find(dynamicDivId).length > 0) {
if (dynamicDivId == '#divDynamicundefined') {
document.getElementById('divDynamic' + adSpaceId[1]).style.display = 'none';
}
else {
document.getElementById('divDynamic' + adSpaceId[1]).style.display = '';
}
}
else {
if (dynamicDivId == '#divDynamicundefined') { //alert('undefined id');
}
else {
var divDetails = "<div id='divDynamic" + adSpaceId[1] + "' class='divDynamicClass'><table class='tblCollageImg'><tr style='display: none;'><td><span id='adSpaceId" + adSpaceId[1] + "'></span></td></tr><tr><td class='tbBusinessPadding' ><span id='BusinessName" + adSpaceId[1] + "' ></span></td></tr><tr><td><a id='Website" + adSpaceId[1] + "' href='' /></td></tr><tr><td id='tdAddres" + adSpaceId[1] + "' colspan='2'><span id='Address" + adSpaceId[1] + "' class='tdAddress'></span></td></tr><tr><td ><a id='anchorAdsId" + adSpaceId[1] + "' href='#'></a></td></tr></table></div>";
// var divDetails = "<div id='divDynamic" + adSpaceId[1] + "' class='divDynamicClass'><table class='tblPopUpImage'><tbody class='inner'><tr> <td class='tdImagePopup' colspan='2'> <div id='mydiv'><img src='' alt='' id='imgSelected"+adSpaceId[1]+"' width='100px' height='50px' /></div></td></tr></tbody> </table><table class='tblCollageImg'><tr style='display: none;'><td><span id='adSpaceId" + adSpaceId[1] + "'></span></td></tr><tr><td class='tbBusinessPadding'><span id='BusinessName" + adSpaceId[1] + "' ></span></td></tr><tr><td><a id='Website" + adSpaceId[1] + "' href='' /></td></tr><tr><td id='tdAddres" + adSpaceId[1] + "' colspan='2'><span id='Address" + adSpaceId[1] + "' class='tdAddress'></span></td></tr><tr><td ><a id='anchorAdsId" + adSpaceId[1] + "' href='#'>View More</a></td></tr></table></div>";
///Calling WEBSERVICE to bring results of a CollageImage.
CallService(adSpaceId[1]);
$(divDetails).insertAfter($(this));
document.getElementById('divDynamic' + adSpaceId[1]).style.display = '';
}
}
});
});
(function($) {
$.fn.hoverpulse = function(options) {
// in 1.3+ we can fix mistakes with the ready state
if (this.length == 0) {
if (!$.isReady && this.selector) {
var s = this.selector, c = this.context;
$(function() {
$(s,c).hoverpulse(options);
});
}
return this;
}
var opts = $.extend({}, $.fn.hoverpulse.defaults, options);
if (navigator.userAgent.indexOf("Firefox")!=-1){
this.parent().css({ position: 'relative' });
}
else
{
// parent must be relatively positioned
this.parent().css({ position: 'relative' });
// pulsing element must be absolutely positioned
this.css({ position: 'absolute', top: 0, left: 0 });
}
this.each(function() {
var $this = $(this);
var w = $this.width(), h = $this.height();
$this.data('hoverpulse.size', { w: parseInt(w), h: parseInt(h) });
});
// bind hover event for behavior
//////////////////////////////////////////////////////////////////////// hover over///////////////////////////////////////////////////////////////////
return this.hover(
function() {
////////////////////////Expanding depend upon width and height///////////////////
var curheight=$(this).height();var curwidth=$(this).width();//getting the current height and width of image
if(curheight>50)
{var growheight=curheight-50; //increasing value for the div depend upon the images
finalheight=190+growheight;
//alert('need to add is'+growheight);
}
else{finalheight=220;}
// var curwidth=$(this).width();
if(curwidth>100)
{var growwidth=curwidth-100;var finalwidth=300+growwidth;}
else{finalwidth=289;}
//alert('The current images height is'+curheight+'width is'+curwidth);
////////////////////////Expanding depend upon width and height Ends///////////////
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
$('table tr td div').css('position','absolute');//added for FF MOUSEOVER
}
var $this = $(this);
$this.parent().css('z-index', opts.zIndexActive);
var size = $this.data('hoverpulse.size');
var w = size.w, h = size.h;
$this.stop().animate({
//$this.delay(2000).animate({
padding:(8+'px'),
top: ('-'+opts.size+'px'),
left:('-'+25+'px'),
//height: (220+'px'),
height:(finalheight),
//width:(320+'px')
width:(finalwidth)
}, opts.speed);
$(this).css("position","absolute");
$(this).css("background", "white");
$(this).css("border","1px solid #CCC");
$(this).css("box-shadow", "0 4px 16px rgba(0,0,0,0.2)")
// $(this).css("padding","8px");
$(this).css("padding","0px");
$(this).css("overflow","hidden");
},
///////////////////////////////////// hover out//////////////////////////////////////////////////////////
function() {
var $this = $(this);
var size = $this.data('hoverpulse.size');
var w = size.w, h = size.h;
$this.stop().animate({
top: 0,
left: 0,
height: (heightfire+'px'),
width: (widthfire+'px')
}, opts.speed, function() {
$this.parent().css('z-index', opts.zIndexNormal);
});
var hoverOutId = $(this).attr('id');
var splitedHoverOutId=hoverOutId.split('_');
document.getElementById('divDynamic' + splitedHoverOutId[1]).style.display='none';
$(this).css("background", "white");
$(this).css("border","none");
$(this).css("padding","0px");
if (navigator.userAgent.indexOf("Firefox")!=-1)
{
$('table tr td div').css("position","relative");
}
}
);
};
$.fn.hoverpulse.defaults = {
size: 20,
speed: 100,
zIndexActive: 100,
zIndexNormal: 1
};
})(jQuery);
</div>Mark as answer,if it helped U!
kedarrkulkar...
All-Star
34247 Points
5505 Posts
Re: Div expand issue in jquery.
Apr 25, 2012 11:51 AM|LINK
is it your complete code?
where have u implmented setTimeOut?
when hover function is being called?
KK
Please mark as Answer if post helps in resolving your issue
My Site
ssjGanesh
Participant
1928 Points
1352 Posts
Re: Div expand issue in jquery.
Apr 25, 2012 12:10 PM|LINK
$('#divSpaceGrabber table tr td .clsDiv').hoverpulse({
// size: 110, // number of pixels to pulse element (in each direction)
speed: 100 // speed of the animation
});
This is the place the hover function called.
Mark as answer,if it helped U!