I bet this is really simple and im gonna try to explain it the best I can:
I am trying to build a gallery to show different transitions and reveals ( making an overlayed div transition out of sight, for instance ), and I want there to be a button that the user can click to experience the same transition with hover and with clicks.
To achieve this I simply created a new variable that I called toggleButton, initialized it at 0, and made a conditional statement saying that should the variable be 0, the transition should be working on hover, and, should toggleButton be 1, the transition would work with clicks.
I am logging the variable changes on the console everytime the button to change them is pressed, and it works fine, no errors, but I can't achieve what i wanted to, the transition never changes, it always stays the way i initialize it ( if i init it at 1 then the transition works with clicks ).
I made a fiddle with a little example of what I'm talking about, I hope you can understand what I want by looking at it in case i failed at explaining it with words: http://jsfiddle.net/mcczrbgg/1/
Thanks in advance!
That If/Else that sets up mouseovers on line 21 only runs once.
Try making a .mouseenter() function AND the .click() function, but in each one, check the state of toggle button:
$(".thumb").mouseenter(function() {
if (toggleButton === 0) {
}
}
$(".thumb").click(function() {
if (toggleButton === 1) {
{
}
Is that what you had in mind?
The reason it is not working is because youre only running the function once at load. You need to also make sure the function runs every time you run the toggle event.
This is what I would do:
$(function(){
var toggleButton = 0 ;
console.log(toggleButton);
$('.switchButton').toggle(function(){
toggleButton = 1 ;
$('.toggleButton').css({'transform' : 'rotateZ(0deg)'});
$('#hover').removeClass('active');
$('#click').addClass('active');
console.log(toggleButton);
runTransition();
}, function(){
toggleButton = 0 ;
$('.toggleButton').css({'transform' : 'rotateZ(180deg)'});
$('#hover').addClass('active');
$('#click').removeClass('active');
console.log(toggleButton);
runTransition();
});
runTransition();
// thumb hover
function runTransition(){
if ( toggleButton == 0 ) {
$('.thumb').mouseenter(function(){
$('.overlay').css({'left' : '-100%'});
}).mouseleave(function(){
$('.overlay').css({'left' : '0%'});
});
} else {
$('.thumb').unbind('mouseenter mouseleave');
$('.thumb').toggle(function(){
$('.overlay').css({'left' : '-100%'});
}, function(){
$('.overlay').css({'left' : '0%'});
});
}
}
});
Related
What I want to do is to make the button value to be "1" if the section opened by pressing it is visible, and make it show "2" if the section is not visible. (visible/not visible - hidden/visible).
Here is my failed attempt that I think got the closest to the truth:
$(document).ready(function(){
$(".doc1").hide();
$(".doc").click(function(){
$(".doc1").slideToggle("fast");
if($('.doc1').is(':visible')) {
document.getElementById('doc').value = '1';
}
else
document.getElementById('doc').value = '2';
});
});
The value is stuck on "2" whether the section is opened (visible) or hidden (.hide).
There are a couple things. First you have $(".doc").click. Do you mean $("#doc").click?
Secondly, if you start the animation before you check :visible, it will always be considered visible. You either need to make the value change the callback of the slideToggle call, or just reverse the assignment order and do slideToggle afterwards:
http://jsfiddle.net/95nKw/
According to jquery documentation:
During animations that hide an element, the element is considered to be visible until the end of the animation. During animations to show an element, the element is considered to be visible at the start at the animation.
May be you should wait until the animation is completed
$(".doc").click(function(){
$(".doc1").slideToggle("fast", function(){
if($('.doc1').is(':visible')) {
document.getElementById('doc').value = '1';
}
else
document.getElementById('doc').value = '2';
});
});
If you are going to use jquery, continue to use it through out. Makes it much easier to go back and fix/read.
Below might be what you are looking for.
$(document).ready(function(){
$(".doc1").hide();
$(".doc").click(function(){
$(".doc1").slideToggle("fast", function() {
if($(this).is(':visible')) {
$('#doc').val('1');
} else {
$('#doc').val('2');
}
});
});
});
Not tested, but i would try something like this:
$(document).ready(function(){
$(".doc1").hide();
$(".doc").click(function(){
$(".doc1").slideToggle("fast");
if($('.doc1').is(':visible')) {
$(".doc").val("1"); //or .val(1);
}
else
$(".doc").val("2");
});
});
Do you know any dropdown menu scripts out there written in plain javascript, but not relying on jQuery?
I know how to achieve this with CSS, but I'd also like to add a nice fade effect and make it wait 1 second after the mouse is outside the menu, then close it if the mouse doesn't come back within the menu area.
I think I could implement the fade effect using the CSS "transition" property, but I have no clue on how to add the delay on mouseOut
I like this one, it's only 1.2 KB, the code is simple to modify:
http://www.scriptiny.com/2008/11/drop-down-menu/
You can change the time by modifying the "t" variable.
You could use the transition-delay-property and do the following:
remove the "delay-class", when the user enters the menu
add the "delay-class" when the user leaves the menu
See: https://developer.mozilla.org/en/CSS/transition-delay
Or you could do it like this (note: just pseudo code):
var timer = null;
function onenter() {
showSubMenu();
clearTimeout(timer);
timer = null;
}
function onleave() {
overMenu = false;
timer = setTimeout( function () { hideSubMenu(); } , 1000 );
}
I am programming a section of a website using jquery, where when you mouse over a button it hides a specific div and shows another one, then when the mouse leaves it hides that one and shows the original, and it works great, but when you go over the buttons to fast it gets flickery and starts showing all the divs(doesnt hide some)
My code:
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1").toggle();
$(element2).fadeIn(700);
},
function(){
$(element2).toggle();
$("#add-content-desc1").fadeIn(700);
});
}
any ideas ? thanks
Edit: I updated the code to the current version.
Try this
function changeAddPanelText(element, element2) {
$(element).hover(function(){
$("#add-content-desc1, element2").stop().toggle();
}, function(){
$("#add-content-desc1, element2").stop().toggle();
});
}
I need to prevent link from being clicked for let's say 2 seconds.
Here is an example http://jsbin.com/orinib/4/edit
When you look at the rendered mode you see next and prev links. When you click next, it slides with a nice transition. However if you click multiple times there is no transition sort of, which is expected. But my question: is this how can I prevent clicking on the next link, for about 2 seconds (or what ever time it takes for transition to happen) so that no matter what transition will occur.
This is what I tried to use, but did not work:
function(){
var thePreventer = false;
$("#next").bind($(this),function(e){
if(!thePreventer){
thePreventer = true;
setTimeout(function(){
thePreventer = false;
}, 2000);
}else{
e.preventDefault();
}
});
}
Which I got from here "Disable" a link temporarily when clicked? I think. I believe that i cannot achieve this effect with this code (although it works on other links). I believe this is due to the fact that cycle-plugin got a hold of that link, and I understand that I have to bind/tap-into this functionality of the plugin. Please note: that this code may not work I just used it to show that I tried it and it did not work, you can reuse it if you have to or give me your own stuff.
Please help, if you can.
EDIT:
As mrtsherman proposed this simple yet elegant ANSWER: http://jsfiddle.net/LCWLb.
Take a look at the cycle options page. There are a number of ways to do this. I would consider using the pager event onPrevNextEvent. You can assign a callback function.
$('#slideshow').cycle({
pager: '#nav',
onPrevNextEvent: function(isNext, zeroBasedSlideIndex, slideElement) {
//disable controls
},
after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
//reenable controls
}
});
The following will temporarily prevent clicks while a slideshow is running, as shown in this fiddle:
$.fn.extend({
delayClick: function(callback) {
this.bind('click', function(e) {
$self = $(this);
if( $self.hasClass('disabled') ) {
$('#log').append('<p>click prevented on '+$self.attr('id')+'</p>');
}
else {
$self.addClass('disabled');
callback.call(this, [arguments]);
setTimeout(function() {
$self.removeClass('disabled');
}, 1000);
}
return false;
});
}
});
I want that when mouse is over an image, an event should be triggered ONCE, and it should be triggered again only after mouse is out of that image and back again, and also at least 2 seconds passed.
If I leave my mouse over the image,it gets called like every milisecond,and by the logic of my function once you hover on the variable 'canhover' becomes 0 until you move mouse out
This code seems to have a bug and I cant see it. I need a new pair of eyes, but the algorithm is kinda logical
Working code :
<script type="text/javascript">
var timeok = 1;
function redotimeok() {
timeok = 1;
}
//
function onmenter()
{
if (timeok == 1)
{
enter();
timeok = 0;
}
}
//
function onmleave()
{
setTimeout(redotimeok, 2000);
leave();
}
//
$('#cashrefresh').hover(onmenter,onmleave);
function enter(){
$("#showname").load('./includes/do_name.inc.php');
$("#cashrefresh").attr("src","images/reficonani.gif");
}
function leave(){
$("#cashrefresh").attr("src","images/reficon.png");
}
</script>
I don't know if this will solve your entire problem (since we don't have a detailed description of what it is), but instead of:
$('#cashrefresh').hover(onmenter(),onmleave());
try:
$('#cashrefresh').hover(onmenter,onmleave);
And the same thing here:
setTimeout(redotimeok, 2000); // just the function name
Also, I don't see where you ever set timeok to zero. Do you mean to set timeok = 0 in onmenter()?
There are two methods in jquery for your problem:
.mouseenter() and .mouseleave()
Check out the demos there.
EDIT:
I thought hover was for mouseover and mouseout, sorry for confusion.
I checked your code again. And it seems that you're changing the image when mouse gets over the image, which forces browser to load the new image and the old image disappears for a very little while till the new one appears and i think this must be triggering both handlers continuosly and you're getting this behaviour.
Try not to change the source of the image, comment out that line and instead console.log("some message") there and see if the message is repeated as much as .load() was fired before.
Hope this helps.
Try changing onmleave function as follows:
function onmleave()
{
setTimeout(redotimeok, 2000);
leave();
}