I have this script:
$('#tooncart').click(function() {
$('#top-cart').slideToggle('fast');
return false;
});
I need a hover on #tooncart, the #top-cart needs to fade-in.
When I move my cursor from the #tooncart the #top-cart needs to stay visible.
When I click on #tooncart again and click on some div with class .closing (which is into #top-cart) it needs to fade out again.
I think it needs to look a little like this:
$('#tooncart').hover(function() {
$('#top-cart').fadeIn('slow');
// when click on #tooncard or .closing then fade out!
// when directly hover on the #tooncart I think it shouldn't be visible.
});
maybe something like this:
$('.closing').click(function() {
$(this).parent().fadeOut();
Can anyone help me out?
I have this and it is good:
$('#tooncart').hover(function() {
$('#top-cart').fadeIn('slow');
});
$('.closing').click(function() {
$('#top-cart').fadeOut('slow');
});
Would be perfect if after click .closing or #tooncart then fadeOut!
$('.closing').click(function() // or #tooncart {
$('#top-cart').fadeOut('slow');
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 my fancybox close button diplay:none; when an iframe opens, I want the close button appears in a delay of x time. exactly like this DEMO.
Though it is solved in earlier version of fancy box in here, but in fancybox-3 It works for the first time and thereafter the close button doesn't appear until I refresh the page.
I use the following JS Code for delay:
$(document).ready(function() {
setTimeout(function() {
$(".fancybox-button--close").show();
}, 5000);
});
Any ideas? Thanks.
This is how you can access the toolbar and make it visible, if needed:
$('[data-fancybox="images"]').fancybox({
afterShow : function(instance, slide) {
setTimeout(function() {
instance.$refs.toolbar.show();
}, 3000);
}
});
Demo - https://codepen.io/anon/pen/oeWqrJ
But, if you want to toggle that small close button, here is an example:
$('[data-fancybox]').fancybox({
toolbar : false,
smallBtn : true,
afterShow : function(instance, slide) {
setTimeout(function() {
slide.$slide.find('.fancybox-close-small').show();
}, 3000);
}
});
Demo - https://codepen.io/anon/pen/oeWqRJ
Basically, you can access any element either from instance.$refs (collection of references to interface elements) or from slide.$slide (parent element of the content).
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");
}
});
}
Hello i'm working on a project that requires canvas manipulation. I need to draw an image and have to move it within the canvas. Which was not so hard to accomplish.. However i need to change my cursor into "move" when hovering the image like
img{
cursor:move;
}
I couldn't find any way to do this. Any suggestion??
Thanks in advance..
When you drag an Kinetic.Image, you get dragstart and dragend events.
You can change the cursor type in those event handlers:
// starting to drag -- display the move cursor
image1.on('dragstart', function () {
document.body.style.cursor = 'move';
});
// done dragging -- display the regular cursor
image1.on('dragend', function () {
document.body.style.cursor = 'default';
});
Basically you need an element which you can style on the page but with display: none, then put that element onto the canvas like this:
var image = document.getElementById('image');
context.drawImage(image, 0, 0);
I have some small canvas, and i have to show border around them, i did that using rollover and rollout evenets, (these canvas hold product images), here rollover and rollout are working perfectly fine, but when a user clicks on some canvas, it has to be selected, means it has show the border around it, and rest canvas should work as normal. but when i select another canvas the previously selected canvas should get unselected and new clicked canvas gets the selection,
but the problem which is coming the rollOut event which is applied on canvas, on a click the canvas get selected, but when rollOut takes place it unselect the canvas, i even removed the rollOut listner on the click of a canvas, but in that case, the clicked canvas will not get unselected , when other canvas will be clicked
can.addEventListener(MouseEvent.ROLL_OVER,onRollOverThumb);
can.addEventListener(MouseEvent.ROLL_OUT,onRollOutThumb);
//can.addEventListener(MouseEvent.CLICK,onRollOverThumb);
private function onRollOverThumb(event:MouseEvent):void
{
event.target.setStyle('borderColor','0x000000');
event.target.setStyle('borderThickness','3');
event.target.setStyle('borderStyle','solid');
}
private function onRollOutThumb(event:MouseEvent):void
{
event.target.setStyle('borderColor','0xCCCCCC');
event.target.setStyle('borderThickness','1');
event.target.setStyle('borderStyle','solid');
}
i hope some thing are clear in this, does n e one has worked on this, please reply
Thanks in advance
Ankur sharma
What about implementing a "flag" variable that is set to true when the click occurs. Then, when the ROLL_OUT occurs, check if the flag is true or false. If true, don't do anything, if false, remove/change the border.
private function onRollOverThumb(event:MouseEvent):void
{
if(event.type=='click')
{
for(var j:int=0;j<viewparent.numChildren;j++)
{
viewparent.getChildAt(j).name="false";
}
event.currentTarget.name="true";
for(var i:int=0;i<viewparent.numChildren;i++)
{
if(viewparent.getChildAt(i).name=="true")
{
Canvas(viewparent.getChildAt(i)).setStyle('borderColor','0x000000');
Canvas(viewparent.getChildAt(i)).setStyle('borderThickness','3');
Canvas(viewparent.getChildAt(i)).setStyle('borderStyle','solid');
}
else
{
Canvas(viewparent.getChildAt(i)).setStyle('borderColor','0xCCCCCC');
Canvas(viewparent.getChildAt(i)).setStyle('borderThickness','1');
Canvas(viewparent.getChildAt(i)).setStyle('borderStyle','solid');
}
}
}
else
{
event.currentTarget.setStyle('borderColor','0x000000');
event.currentTarget.setStyle('borderThickness','3');
event.currentTarget.setStyle('borderStyle','solid');
}
}
private function onRollOutThumb(event:MouseEvent):void
{
if(event.currentTarget.name=="false")
{
event.currentTarget.setStyle('borderColor','0xCCCCCC');
event.currentTarget.setStyle('borderThickness','1');
event.currentTarget.setStyle('borderStyle','solid');
}
}
i modified my own code, added one name property to the canvases
can.name="false"
and it's now working,
can n e one tell me, how to put some select and unselect(kind of fade effect) on the border, when the black selection get removed, it shld be removed in some fade manner, can we apply fade effect on border?