I have a div that displays another content on hover using css transitions.
There is one text element <h3>Another Text</h3> that overlays link email adress. On desktop browser it's working correctly - I can click the link after hover is activated. On phone device where hover is replaced by clicking on the element, there's a problem - If I activate the hover by clicking on "Another Text" it opens the link right away.
My question is if there is any way how to restrict link opening on first click.
Ideal scenario on phone device is:
user clicks on "Another text"
hover is activated, link is displayedbut not fired
user click link and link is fired
Here is the code: https://jsfiddle.net/9bc0bcja/2/
I've partially solved it using javscript:
$(".team-social")
.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
function(e){
if($(this).hasClass("pointerA")){
if(is_touch_device()){
$(this).removeClass( "pointerA" );
}
}
else{
$(this).addClass( "pointerA" );
}
});
$('.team-social a').click(function() {
if(is_touch_device()){
$(this).parent().removeClass("pointerA");
}
});
It activates pointer-events after transition finishes, so it is not fired right away when I click overlay on phone device.
https://jsfiddle.net/9bc0bcja/4/
added javascript + jquery link
added class .pointerA
added pointer-events:none; to class .team-social
Try this Fiddle.
I simplified your code, keeping only the necessary elements.
This script only operates if you're using a mobile device, which is what you should want for performance reasons.
This code watches the hover event rather than transitionEnd, that way the function trigger timing is not dependent on the length of the transition.
if (is_touch_device()) {
var $wrap = $(".wrap"),
$pw = $wrap.find(".pointer-watch"),
$tc = $pw.find(".transition-container");
$pw.addClass("pointerN");
$('.wrap').hover(function wrapHovered() {
if ($pw.hasClass("pointerN")){
setTimeout(function enablePE() {
$pw.removeClass("pointerN");
}, 0);
}
else if (!$wrap.is(":hover")) {
$pw.addClass("pointerN");
}
});
}
Related
Situation: Wordpress theme mobile menu doesn't extend to the top. Since I have an image in the site header and it gets cut in half right now by the menu I would like to completely cover it by the menu when its open.
The fix: Change transparent-header class to white background on menu click.
My problem: The stock theme menu got an ease transition for closing the menu while my white background disappears nearly immediately. The timing when my white background color disappears is way to fast but the timing on opening the menu is good. So I need a different delay for closing. Do I need to go the if/else route here?
This is what I have right now:
jQuery(document).ready(function($) {
$(".mobile-menu").on("click", function () {
$(".transparent-header").toggleClass("white", 1000);})
});
This is one of the experiments that didn't work
jQuery(document).ready(function($) {
if($(".mobile-menu").hasClass("opened")){ //open function
$(".transparent-header").css("white", 1000);
}else{
$(".transparent-header").css("transparent", 4000);
}
});
Solution: What works for me. I let other decide if this thread should be deleted. I would find it quite helpful.
jQuery(document).ready(function($) {
$(".mobile-menu").on("click", function() {
if (jQuery(this).hasClass("opened")) {
$(".transparent-header").toggleClass("white", 1000);
}
else
{
$(".transparent-header").delay(480).queue(function (next) {
$(this).removeClass("white");
next();})
}
})});
I have an accordion and unfortunately there is no active or current class assigned to the qafp-faq div which serves as a container for each item.
My main objective is to add icons indicating toggle state.
I added:
$( ".qafp-faq-anchor" ).click(function() {
$( this).find( ".fa-caret-right" ).toggleClass( "open", 1000 );
return false;
});
Which works great for allowing me to target the title if I open a div via the title, but not when the accordion behavior hides an open div when clicking another div.
You can see the problem here: http://jsfiddle.net/Qzwvr/2/
The solution I'm really after is how I can add a class to the qafp-faq div whenevr it is toggled.
I've definitely been learning a lot about jQuery and hope I can figure this out. Thank you.
The easiest way to do this would be to change it from toggleClass into a removeClass and addClass
$(".qafp-faq-anchor").click(function () {
// Remove open class if this is open
if($(this).find('.fa-caret-right').hasClass('open')) {
$(this).find('.fa-caret-right').removeClass('open');
}
else {
// Removes open class no matter where it is
$('.open').removeClass( "open", 1000 );
// Adds open class to clicked element
$(this).find(".fa-caret-right").addClass("open", 1000);
return false;
}
});
Updated jsFiddle
If you have multiple accordions you could make the selector for removing the open class more specific if you want multiple open at the same time
I have some custom styles for buttons. To simulate the 3D look of it being pressed, I'm shifting the text down a few pixels using the :active pseudo-class, like this:
input[type=button] {
padding-top: 4px;
padding-bottom: 4px;
}
input[type=button]:active {
padding-top: 6px;
padding-bottom: 2px;
}
Trouble is, when I do this, in Chrome there are 2 pixels of dead space under the text. When those pixels are clicked, the "click" event is not triggered.
You can see it in action here: http://jsfiddle.net/yg775/ I exaggerated the shifting to make it more obvious. Click below the text on the button to see the effect.
Observations:
The size of the dead space is directly proportional to the number of pixels I am shifting the text.
The dead space is only under the text. Moving the mouse left or right on the X axis, you can see that the click event triggers when not directly under the text.
This only happens on Google Chrome
Someone else noticed this a while ago (Small dead space on a div button in chrome) but this problem is actually more pervasive than just the case he mentioned. Also the "answer" was to trigger on mousedown, but that won't work for me. "click" has different behavior than "mousedown", and I need "click".
Any thoughts how to get around this?
Unfortunately, it seems to be a bug with the .click() command: https://stackoverflow.com/a/5081144. In summary (quoted from above link):
If you mousedown on the padding move the mouse and mouseup on the padding, click event fires.
If you mousedown on the padding move the mouse but now mouseup on the text, there is no click event.
Since you need to use the .click() command, here may be a fix: http://jsfiddle.net/yg775/12/.
JQuery:
$('#button_box').mousedown(function() {
clicked = true;
});
$('#button_box').mouseup(function() {
if (clicked) {
paddingClicked = true;
$("#button_box").trigger( "click" );
}
});
$(document).mouseup(function() {
if (!paddingClicked) {
clicked = false;
}
});
$('#button_box').click(function() {
clicked = false;
if (paddingClicked) {
numClicks++;
$('#display').text(numClicks.toString()+' clicks');
paddingClicked = false;
}
});
I have a container div called button_box that gets used with .mousedown() and .mouseup(). These set two flags, which then calls .trigger( "click" ) that simulates a click.
The $(document).mouseup(...) is in place to catch if you click in the button and then drag the mouse outside before the .mouseup() buttons is called to reset the flag. Without it, you can then click outside of the button and then drag the mouse back in and it would register the .mouseup(). A bit hacky, but it works.
OK, so my problem is that I have a parallax website for a client and they would like a product description to fade-in when they scroll-down the parallax site. The problem I think I have is because the site is effectively one long page, the scripting is getting confused and fading the div in from "opacity:0" when the page is loaded. I have put a long fade-in on the div to understand what is happening and I have also made a rubbish box without proper formatting to test it. I have uploaded a temporary copy of the site (i'm working offline) to show what is happening.
http://ethicalincubator.com/parallax/parallax30.07/index_kmd.php#!images
Thank you for your help everyone!!! :-)
CSS
/* Hide any element */
.hideme {
Opacity:0;
}
HTML
<div
class="hideme fadein-on-view"
style="opacity:0;width:200px;height:80px;background-color:white;">Fade
In</div>
SCRIPT
<script>
// Scroller script for Fade-In when "div" is on screen
$(document).ready(function()
{
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.fadein-on-view').each( function(i){
var
bottom_of_object = $(this).position().top + $(this).outerHeight();
var
bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if(
bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},5000);
}
});
});
})
</script>
To check the bottom of the window, instead of using .scrollTop, try window.pageYOffset.
Plus I think you're making the JS work too hard - I would try to calculate the bottom_of_object outside the .scroll() function so that it's not calculating the position every time the user is scrolling.
And for simple fade in/out, I would just do a display:none, .fadeIn().
Seeking a solution to my problem...
I partially found an answer from another thread on here, using this script
$(function () {
$(".myclass").hover(function ()
{}, function ()
{
$(".myclass>li").fadeTo(200, 1)
});
$(".myclass>li").hoverIntent(function ()
{
$(this).attr("id", "current");
$(this).siblings().fadeTo(200, .6);
$(this).fadeTo(300, 1)
}, function ()
{
$(".myclass>li").removeAttr("id");
$(this).fadeTo(200, 1)
})})
When an item in the list is hovered, the script fades all other items out. Original demo is here http://jsbin.com/usobe
This works OK on my site, though the list ( a grid of thumbnails) is part of a bigger slider script, which loads "previews" via ajax. When a list item is clicked a hidden section expands on the page, and the slider script assigns the list item a class "active".
When the hidden section is open I would like the activated thumbnail to remain at 1 opacity, while the rest are faded to .6, exactly as it is with the hover effect using the script above. What I am trying to achieve becomes obvious when you click a thumbnail to activate the ajax script. Is it possible to use the active class to make this happen i.e. if class is not active set to .6 opacity?
Thanks in advance
----EDIT
Thanks everyone for suggestions - I am not having much luck so far! Using the code above, would it be possible to modify it so that when a list item is clicked it holds the specified levels of opacity? That would do nicely, I think. Then I could use onclick I guess to fade all items back to full opacity when the hidden div is closed.
I'm trying to guess how your code work, for what I understand you should do something like this:
// this is the selector that gets the click on the thumbnail
$('li.item').click(function() {
// fade all the thumbnails to op 1.0
$('#li.item').css('opacity', '.6');
// let the active thumbnail to 1.0
$(this).css('opacity', 1);
//show your hidden div
});
Then, when you close the hidden div:
$('div#hiddenDiv').onClose(function()
// about to close
$(this).fadeTo('fast', 1);
});
You could use an on click targeting the zetaThumbs li elements, set the current target to 1 and its siblings to .6
$('.zetaThumbs li').click(function(){
$(this).css({'opacity':1}).siblings().css({'opacity':.6});
})