I have an HTML element with some padding. I would like to detect for clicks on that element's padding. That is, I don't want the event to fire when the user clicks on the content, just the padding.
I needed this as well, but also wanted a "real" solution. The accepted answer does really not target the question "Detecting click event on padding only" but suggests an intrusive change to the markup.
A "padding click" can be detected simply by retrieving the elements padding settings, computed width and height and compare those values to the mouse click offsets :
function isPaddingClick(element, e) {
var style = window.getComputedStyle(element, null);
var pTop = parseInt( style.getPropertyValue('padding-top') );
var pRight = parseFloat( style.getPropertyValue('padding-right') );
var pLeft = parseFloat( style.getPropertyValue('padding-left') );
var pBottom = parseFloat( style.getPropertyValue('padding-bottom') );
var width = element.offsetWidth;
var height = element.offsetHeight;
var x = parseFloat( e.offsetX );
var y = parseFloat( e.offsetY );
return !(( x > pLeft && x < width - pRight) &&
( y > pTop && y < height - pBottom))
}
demo here -> http://jsfiddle.net/er5w47yf/
jQuery :
$('#element').on('click', function(e) {
if (isPaddingClick(this, e)) {
console.log('click on padding')
} else {
console.log('click on element')
}
})
native :
document.getElementById('element').addEventListener('click', function(e) {
if (isPaddingClick(this, e)) {
console.log('click on padding')
} else {
console.log('click on element')
}
}, false)
For convenience, this can be turned into a jQuery pseudo event handler :
(function($) {
var isPaddingClick = function(element, e) {
var style = window.getComputedStyle(element, null);
var pTop = parseInt( style.getPropertyValue('padding-top') );
var pRight = parseFloat( style.getPropertyValue('padding-right') );
var pLeft = parseFloat( style.getPropertyValue('padding-left') );
var pBottom = parseFloat( style.getPropertyValue('padding-bottom') );
var width = element.offsetWidth;
var height = element.offsetHeight;
var x = parseFloat( e.offsetX );
var y = parseFloat( e.offsetY );
return !(( x > pLeft && x < width - pRight) &&
( y > pTop && y < height - pBottom))
}
$.fn.paddingClick = function(fn) {
this.on('click', function(e) {
if (isPaddingClick(this, e)) {
fn()
}
})
return this
}
}(jQuery));
Now paddingClick works "natively" :
$('#element').paddingClick(function() {
console.log('padding click')
})
demo -> http://jsfiddle.net/df1ck59r/
Create an inner element which has 100% height/width so it fills out the whole element. Then register a click event handler on this event and prevent bubbling of the event.
Here's an example (using jQuery): http://jsfiddle.net/ThiefMaster/QPxAp/
The markup:
<div id="outer">
<div id="inner"></div>
</div>
and the JS code:
$('#outer').click(function() {
alert('click');
});
$('#inner').click(function(e) {
e.stopPropagation();
});
Since events bubble, the click event on the inner element hits this element first - stopping its propagation will prevent it from ever reaching the outer element, so its click event handler only triggers if the are that belongs to the element but is not covered by the inner element is clicked.
I think this is what ThiefMaster intended to describe. In this scenario, a click on the content will do nothing but a click on the div with lots of padding will yield an action.
Basic markup:
<div id="divWithPadding" style="padding:30px;">
<div>Content content content</div>
</div>
then
click listener for content div that prevents bubbling to divWithPadding:
$("#divWithPadding > div").click(function(e){
e.stopPropagation();
});
click listener for divWithPadding that does something:
$("#divWithPadding").click(function(){
//do something
});
Related
I'm defining a class Session that is created for every new session.
In window.onload, the Session object has a mouse click event listener , on click, it fires the handler and 1. checks if anchor tag was clicked and saves href 2. saves the x and y of mouse click.
The problem: The function user.onclick is not working. Doesn't call the anchorLinkClickHandler(); OR window.addEventListener i.e. the click event handler that saves x and y. NO ERRORS. I think there is a syntactical issue with the below code.. don't know what. Ideas?
As shown (in window.onload):
var user = new UserSession('001');
user.onclick = function(event) {
// check if an anchor tag link is clicked, if so, save the href.
user.aTagHref = anchorLinkClickHandler();
// CLICK event listener - save the x and y of mouse click
window.addEventListener("load", function(event){
document.body.addEventListener("click", handleClick)
});
}
Here is the full code:
function UserSession(campaignId) {
this.campaignId = campaignId;
var aTagHref = aTagHref;
this.greeting = function() {
alert('Hi! I\'m ' + this.name + '.');
};
// get the position of click - Event Listener Function
this.getPosition = function(el) {
var xPosition = 0;
var yPosition = 0;
while (el) {
if (el.nodeName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScrollPos = el.scrollLeft || document.documentElement.scrollLeft;
var yScrollPos = el.scrollTop || document.documentElement.scrollTop;
xPosition += (el.offsetLeft - xScrollPos + el.clientLeft);
yPosition += (el.offsetTop - yScrollPos + el.clientTop);
} else {
xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPosition += (el.offsetTop - el.scrollTop + el.clientTop)
}
el = el.offsetParent;
}
return {
x: xPosition,
y: yPosition,
a: "hahah",
};
};
// On click handler
this.handleClick = function(event) {
// Return the current element clicked on
var el = event.currentTarget;
// Return the offset values of the element clicked on
var relOffsetValues = getPosition(el);
// Find the true value of x and y by adding the offset and the to clicked value of x and y
var realValueX = (relOffsetValues.x + event.clientX );
var realValueY = (relOffsetValues.y + event.clientY);
// display the x and y of the mouse click
alert("Clicks x:" + realValueX + ", y:" + realValueY);
// alert("clientx:" + event.clientX + ", real valie:" + realValueX);
}
// On click ANCHOR TAGS SAVE THEM
// Anchor Tags - Capture the href of the link clicked
this.anchorLinkClickHandler = function() {
var aTags = document.getElementsByTagName('a');
for (var i = aTags.length - 1; i >= 0; --i) {
aTags[i].onclick = function() {
aTagHref[i] = this.getAttribute("href");
alert(aTagHref);
};
}
}
// END OF CLASS
}
Window.onload function (where everything is called)
window.onload = function() {
var user = new UserSession('001');
user.onclick = function(event) {
// check if an anchor tag link is clicked, if so, save the href.
user.aTagHref = anchorLinkClickHandler();
// CLICK event listener - save the x and y of mouse click
window.addEventListener("load", function(event){
document.body.addEventListener("click", handleClick)
});
}
// SCROLL Event Listener
// Get the x and y of the scroll
window.addEventListener("scroll", function(event) {
// document.getScroll= function(){
var sx, sy;
if(window.pageYOffset!= undefined){
sx = pageXOffset;
sy = pageYOffset;
console.log(sx +" if " + sy);
// return [pageXOffset, pageYOffset];
}
else{
var d= document, r= d.documentElement, b= d.body;
sx= r.scrollLeft || b.scrollLeft || 0;
sy= r.scrollTop || b.scrollTop || 0;
console.log(sx +" else " + sy);
// return [sx, sy];
}
// }
});
};
Take a look at https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick to better understand.
The click event is raised when the user clicks on an element. The click event will occur after the mousedown and mouseup events.
You will have to create a HTML element first and when that element is clicked you have to execute a function that does all the actions you want.
HTML:
<button id="btn">Click me</button>
JavaScript:
document.querySelector("#btn").onclick = function(event) {
// do things here
}
Hi I am trying to make drag drop feature in JS, It works fine in Firefox, but it doesn't work on chrome. I Think it is something to do with Event Deligation, I am attaching the link of my code base. Following are the steps to reproduce the problem:
Create a new Task
Drag it to another column
Now click on Edit or Delete Icon(E and D in circle).
Following are the Code highlights(Code is a bit bigger You can check it on Codepen):
JS:
$(function(){
function init(){
var mouseX = 0, // Mouse Position
mouseY = 0,
elmX = 0, // Element Position
elmY = 0,
pillers = $('.pillers'), // Task Container
pillerWidth = $('.pillers:nth-child(1)').width(), // Taks Container width
currentElm; // Current Element
/* When Left Mouse Button is Pressed */
$('.dragable').on('mousedown', function(e){
var temp;
$(this).addClass('rel');
mouseX = e.clientX; // Current Mouse Position and Store it to global variables
mouseY = e.clientY;
temp = +($(this).css('left').slice(0, -2)); // Get Element Position and if it not a number then change it to 0
elmX = null || isNaN(temp) ? 0 : temp;
temp = +($(this).css('top').slice(0, -2));
elmY = null || isNaN(temp) ? 0 : temp;
$(this).css({'z-index':'9999'}); // Increase the Z-Index of the Element so that it wont be overlapped by other element.
currentElm = $(this); // set the current value so that it could be use by mouse move
/* Some Hack for not let heighlight the data(Copied from net) */
document.body.focus();
document.onselectstart = function () { return false; };
$(this).ondragstart = function() { return false; };
return false;
}).on('mouseup',function(e){ // This will be fired when Mouse Button release back
if(currentElm !== null){
currentElm.removeClass('rel').prependTo('.arrived .tasks').css({ // Resetting the Position Object
left: 0,
top: 0
});
currentElm.css({'z-index' : '1'}); // Set Z-Index back to normal value.
currentElm = null; // Finally Set the Current Element to null so that it won't get dragged any more
}
}).on("mousemove", function(e){ // Mouse Move Event .. This is the main part, It will reposition the element with mouse pointer
if(currentElm !== undefined && currentElm !== null){
currentElm.addClass('draged').css({ // This sets the position of div element
left : (elmX + e.clientX - mouseX)+'px',
top : (elmY + e.clientY - mouseY)+'px'
});
/* Set Appropriate Class to Piller to Which The Element is going to be added */
if( e.clientX >= $('.pillers:nth-child(1)').offset().left && e.clientX < ($('.pillers:nth-child(1)').offset().left+pillerWidth) && e.clientY < $('.pillers:nth-child(1)').outerHeight()){
$('.pillers:nth-child(1)').addClass('arrived').siblings('.pillers').removeClass('arrived');
}else if(e.clientX >= $('.pillers:nth-child(2)').offset().left && e.clientX < ($('.pillers:nth-child(2)').offset().left+pillerWidth) && e.clientY < $('.pillers:nth-child(2)').outerHeight()){
$('.pillers:nth-child(2)').addClass('arrived').siblings('.pillers').removeClass('arrived');
}else if(e.clientX >= $('.pillers:nth-child(3)').offset().left && e.clientX < ($('.pillers:nth-child(3)').offset().left+pillerWidth) && e.clientY < $('.pillers:nth-child(3)').outerHeight()){
$('.pillers:nth-child(3)').addClass('arrived').siblings('.pillers').removeClass('arrived');
}else if(e.clientX >= $('.pillers:nth-child(4)').offset().left && e.clientX < ($('.pillers:nth-child(4)').offset().left+pillerWidth) && e.clientY < $('.pillers:nth-child(4)').outerHeight()){
$('.pillers:nth-child(4)').addClass('arrived').siblings('.pillers').removeClass('arrived');
}
}
});
$('a.remove').on('click',function(){
console.log('hey')
$(this).parents('.dragable').remove();
});
$('.add_task_button').on('click',function () {
var place= $(this).closest('.create_task_box'),
titl=place.find('input#title').val(),
disc=place.find('textarea#discription').val(),
time = new Date(),
format = time.toLocaleDateString();
if(titl || disc){
var val = $('.temp').clone(true).removeClass('temp hide').insertBefore(place);
val.find('#TaskHeading').val(titl).end().find('#task-discription').text(disc).end().find('.time').text(format).css({
left: 0,
top: 0
});
}
$('input#title, textarea#discription').val('');
});
$(document).on("click", ".edit", function(){
e.stopPropagation();
if($(this).is('.done')){
$(this).removeClass('done');
$(this).closest('.task-unit').addClass('dragable').find('input, textarea').attr('readonly', 'readonly').addClass('readonly');
}else{
$(this).addClass('done');
var task = $(this).closest('.dragable');
task.removeClass('dragable').find('input, textarea').removeAttr('readonly').removeClass('readonly');
}
});
}
init();
});
I am not mentioning the HTML and CSS part here because it will take a lot of space.. You can see full code Here on Codepen.
Let me know if anything else required.
The problem is, you have an object (parent) with a mousedown event and inside it, another object (children) with a click event. It seems that in Chrome, the first event (mousedown) is capturing the click over the buttons.
As a workaround, you can do this:
have a function for the mousedown event on the parent element.
unbind the mousedown event when the user does a mouseover event on the children.
bind again the function to the parent when the user does a mouseout off the parent.
As an example:
$(".theparent").on("mousedown",function(){
doThings();
});
$(".thechildren").on("click",function(){
alert("Child");
});
$(".thechildren").on("mouseover",function(){
$(this).closest(".theparent").off("mousedown");
console.log("Off");
});
$(".thechildren").on("mouseout",function(){
$(this).closest(".theparent").on("mousedown",doThings);
console.log("on");
});
function doThings(){
alert("Parent");
}
.theparent{
width:200px;
height:100px;
background-color:#3a3a3a;
position:absolute;
}
.thechildren{
position:relative;
background-color:#FF0000;
width:50px;
height:50px;
cursor:pointer;
left:50px;
top:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="theparent">
<div class="thechildren">Child</div>
</div>
See it working on fiddle.
I've got the following Script:
<div id=tbl name=tbl style="overflow:hidden;display:none">
<script language="JavaScript" type="text/javascript">
<!--
function sizeTbl() {
var tbl = document.getElementById('tbl');
var icon = document.getElementById('toggle-table');
if (icon.src === 'up_arrow.png'){
tbl.style.display = 'none';
icon.src = 'down_arrow.png';
}
else {
tbl.style.display = 'block';
icon.src = 'up_arrow.png';
}
}
// -->
</script>
<br>
<img src="down_arrow.png" id="toggle-table">
This does exactly what I want by having a section of a website hidden from a user's view until the click the "down" arrow. Then when they click said arrow, the content expands and the "down" arrow changes to an "up" arrow. Once the user hits the "up" arrow, the content hides again and the arrow returns to a "down" arrow.
The trick is that the content is quite long so when the user closes the section by hitting the "up" arrow, the section the table resides in shifts further up than the user's view. I'd like to solve that using Anchor tags so whenever either arrow is hit, the user's view is adjusted to the top of the section. Any ideas how I can go about that using the current setup?
have you tried using slideUp and slideDown with jQuery?
EDIT:
I'm going to suggest window.scrollto() JsFiddle
Instead of using an anchor with a hash, use any element with an id
function sizeTbl() {
var tbl = document.getElementById('tbl');
var icon = document.getElementById('toggle-table');
if (icon.innerText === 'hide'){
tbl.style.display = 'none';
icon.innerText = 'show';
}
else {
tbl.style.display = 'block';
icon.innerText = 'hide';
}
var x = getOffset( document.getElementById('bottom') );
console.log(x);
window.scrollTo(x.left, x.top); // values are x,y-offset
}
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
I have a div, with a scroll bar, When it reaches the end, my page starts scrolling. Is there anyway I can stop this behavior ?
You can inactivate the scrolling of the whole page by doing something like this:
<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>
Found the solution.
http://jsbin.com/itajok
This is what I needed.
And this is the code.
http://jsbin.com/itajok/edit#javascript,html
Uses a jQuery Plug-in.
Update due to deprecation notice
From jquery-mousewheel:
The old behavior of adding three arguments (delta, deltaX, and deltaY)
to the event handler is now deprecated and will be removed in later
releases.
Then, event.deltaY must now be used:
var toolbox = $('#toolbox'),
height = toolbox.height(),
scrollHeight = toolbox.get(0).scrollHeight;
toolbox.off("mousewheel").on("mousewheel", function (event) {
var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
return !blockScrolling;
});
Demo
The selected solution is a work of art. Thought it was worthy of a plugin....
$.fn.scrollGuard = function() {
return this
.on( 'wheel', function ( e ) {
var event = e.originalEvent;
var d = event.wheelDelta || -event.detail;
this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
};
This has been an ongoing inconvenience for me and this solution is so clean compared to other hacks I've seen. Curious to know how more about how it works and how widely supported it would be, but cheers to Jeevan and whoever originally came up with this. BTW - stackoverflow answer editor needs this!
UPDATE
I believe this is better in that it doesn't try to manipulate the DOM at all, only prevents bubbling conditionally...
$.fn.scrollGuard2 = function() {
return this
.on( 'wheel', function ( e ) {
var $this = $(this);
if (e.originalEvent.deltaY < 0) {
/* scrolling up */
return ($this.scrollTop() > 0);
} else {
/* scrolling down */
return ($this.scrollTop() + $this.innerHeight() < $this[0].scrollHeight);
}
})
;
};
Works great in chrome and much simpler than other solutions... let me know how it fares elsewhere...
FIDDLE
You could use a mouseover event on the div to disable the body scrollbar and then a mouseout event to activate it again?
E.g. The HTML
<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();">
content
</div>
And then the javascript like so:
var body = document.getElementsByTagName('body')[0];
function disableBodyScroll() {
body.style.overflowY = 'hidden';
}
function enableBodyScroll() {
body.style.overflowY = 'auto';
}
As answered here, most modern browsers now support the overscroll-behavior: none; CSS property, that prevents scroll chaining. And that's it, just one line!
Here's a cross-browser way to do this on the Y axis, it works on desktop and mobile. Tested on OSX and iOS.
var scrollArea = this.querySelector(".scroll-area");
scrollArea.addEventListener("wheel", function() {
var scrollTop = this.scrollTop;
var maxScroll = this.scrollHeight - this.offsetHeight;
var deltaY = event.deltaY;
if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
event.preventDefault();
}
}, {passive:false});
scrollArea.addEventListener("touchstart", function(event) {
this.previousClientY = event.touches[0].clientY;
}, {passive:false});
scrollArea.addEventListener("touchmove", function(event) {
var scrollTop = this.scrollTop;
var maxScroll = this.scrollHeight - this.offsetHeight;
var currentClientY = event.touches[0].clientY;
var deltaY = this.previousClientY - currentClientY;
if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
event.preventDefault();
}
this.previousClientY = currentClientY;
}, {passive:false});
I wrote resolving for this issue
var div;
div = document.getElementsByClassName('selector')[0];
div.addEventListener('mousewheel', function(e) {
if (div.clientHeight + div.scrollTop + e.deltaY >= div.scrollHeight) {
e.preventDefault();
div.scrollTop = div.scrollHeight;
} else if (div.scrollTop + e.deltaY <= 0) {
e.preventDefault();
div.scrollTop = 0;
}
}, false);
If I understand your question correctly, then you want to prevent scrolling of the main content when the mouse is over a div (let's say a sidebar). For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.
This possibly requires some markup changes in the following manner:
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
See it's working in this sample fiddle and compare that with this sample fiddle which has a slightly different mouse leave behavior of the sidebar.
See also scroll only one particular div with browser's main scrollbar.
this disables the scrolling on the window if you enter the selector element.
works like charms.
elements = $(".selector");
elements.on('mouseenter', function() {
window.currentScrollTop = $(window).scrollTop();
window.currentScrollLeft = $(window).scrollTop();
$(window).on("scroll.prevent", function() {
$(window).scrollTop(window.currentScrollTop);
$(window).scrollLeft(window.currentScrollLeft);
});
});
elements.on('mouseleave', function() {
$(window).off("scroll.prevent");
});
You can inactivate the scrolling of the whole page by doing something like this but display the scrollbar!
<div onmouseover="document.body.style.overflow='hidden'; document.body.style.position='fixed';" onmouseout="document.body.style.overflow='auto'; document.body.style.position='relative';"></div>
$this.find('.scrollingDiv').on('mousewheel DOMMouseScroll', function (e) {
var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;
var scrollTop = this.scrollTop;
if((delta < 0 && scrollTop === 0) || (delta > 0 && this.scrollHeight - this.clientHeight - scrollTop === 0)) {
e.preventDefault();
}
});
Based on ceed's answer, here is a version that allows nesting scroll guarded elements. Only the element the mouse is over will scroll, and it scrolls quite smoothly. This version is also re-entrant. It can be used multiple times on the same element and will correctly remove and reinstall the handlers.
jQuery.fn.scrollGuard = function() {
this
.addClass('scroll-guarding')
.off('.scrollGuard').on('mouseenter.scrollGuard', function() {
var $g = $(this).parent().closest('.scroll-guarding');
$g = $g.length ? $g : $(window);
$g[0].myCst = $g.scrollTop();
$g[0].myCsl = $g.scrollLeft();
$g.off("scroll.prevent").on("scroll.prevent", function() {
$g.scrollTop($g[0].myCst);
$g.scrollLeft($g[0].myCsl);
});
})
.on('mouseleave.scrollGuard', function() {
var $g = $(this).parent().closest('.scroll-guarding');
$g = $g.length ? $g : $(window);
$g.off("scroll.prevent");
});
};
One easy way to use is to add a class, such as scroll-guard, to all the elements in the page that you allow scrolling on. Then use $('.scroll-guard').scrollGuard() to guard them.
If you apply an overflow: hidden style it should go away
edit: actually I read your question wrong, that will only hide the scroll bar but I don't think that's what you are looking for.
I couldn't get any of the answers to work in Chrome and Firefox, so I came up with this amalgamation:
$someElement.on('mousewheel DOMMouseScroll', scrollProtection);
function scrollProtection(event) {
var $this = $(this);
event = event.originalEvent;
var direction = (event.wheelDelta * -1) || (event.detail);
if (direction < 0) {
if ($this.scrollTop() <= 0) {
return false;
}
} else {
if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight) {
return false;
}
}
}
I have this simple JavaScript to make a hidden div appear on img hover:
document.onmouseover = quickView;
function quickView(e) {
(!e) var e = window.event;
var target = e.target || e.srcElement;
var bWide = window.innerWidth || document.documentElement.clientWidth;
if(target.className == 'p-image') {
var dTarg = target.parentNode.lastChild;
dTarg.style.visibility = 'visible';
dTarg.style.top = (target.parentNode.offsetTop - 110) + 'px';
if (target.parentNode.offsetLeft < (bWide * .5)) {
dTarg.style.left = (target.parentNode.offsetLeft + 185) + 'px';
}
if (target.parentNode.offsetLeft >= (bWide * .1801)) {
dTarg.style.left = (target.parentNode.offsetLeft - 497) + 'px';
}
target.onmouseout = hideQuickView;
}
}
function hideQuickView(e) {
if (!e) var e = window.event;
var target = e.target || e.srcElement;
target.parentNode.lastChild.style.visibility = 'hidden';
}
What I need is to add a fadein and fadeout effect instead of just visible / hidden.
Also a delay in fadein would be great. I know some jQuery but this is old JS, how can I add the fade effects?
Thank you very much
EDIT:
i managed to fadein the hiddendiv but it will not allways fadein. If i move the mouse very fast to another hidden div the effect will not work anymore.I need to wait sometime for the fade to work again. I mean the code is not an accurate solution.
As i said the hover class is called p-image and the hidden class is called quickview.
This is the jQuery, but i would prefere if i can edit the original JavaScript somehow to include the delay fade there.
$(document).ready(function(){
$(".p-image").hover(function () {
jQuery(".quickview").css("opacity", .20);
jQuery(".quickview").fadeTo(430, 1);
});
return true;
});
add jQuery to your site and use $(selector).fadeIn(); and $(selector).fadeOut();
selector can be any css selector e.g. $('#element_id').fadeIn()
replace the bit of code where you hide/show the elements with the jquery bits. you can leave the rest in normal js. to change the duration of the fade add an argument to the function e.g. $(element).fadeIn(400); will make the fade last 400ms
more information here
You use jQuery's fadeIn function to fade elements in and fadeOut to fade them out. Then use delay with fadeIn if you want a delay, $( "selector" ).delay( 500 ).fadeIn()
$( document ).on( "mouseover", function( e ) {
e = e || window.event;
var $target = $( e.target || e.srcElement );
var bWide = $( window ).width();
if ( $target.hasClass( "p-image" ) )
{
var $dTarg = $target.parent().children().last();
var targOffset = $target.parent().offset();
$dTarg.fadeIn().css( "top", targOffset.top - 110 + "px" );
if ( targOffset.left < ( bWide * .5 ) )
{
$dTarg.css( "left", $targOffset.left + 185 + 'px' );
}
else if ( targOffset.left >= ( bWide * .1801 ) )
{
$dTarg.css( "left", $targOffset.left - 497 + 'px' );
}
$target.on( "mouseout", hideQuickView );
}
});
// You should be able to figure out hideQuickView implementation.
$(dTarg).fadeIn("1000")
This fades the stuff in in 1 sec.
You must also change the css for the dTarg item from
visibility:hidden
to
display:none