here is my fiddle
the '.item' click function that shows the '.pull_down_content' doesn't always work why is this?
i've found that if you click the first 'tile' this will work fine and whilst that is open click the next tile still works fine but if you then go back to the original tile the click function stops working and only the hover works?
why is this?
here is part of my code..
$(this).children('.item').on('mouseenter mouseleave click', function(e) { e.stopPropagation();
if ($('.timelineTile').hasClass("clicked")) {
if (!$(this).data('clicked')) {
var Height = e.type==='mouseenter' ? '60px' : e.type==='click' ? '300px' : '0px';
$(this).siblings('.pull_down_content').stop().animate({'height': Height}, 300);
$(this).siblings('.pull_down_content').children('.inner').css({'display': 'block'}, 300);
if (e.type==='click') $(this).data('clicked', true);
}else{
if (e.type==='click') {
$(this).data('clicked', false);
$(this).siblings('.pull_down_content').stop().animate({'height': '0px'}, 300);
$(this).siblings('.pull_down_content').children('.inner').css({'display': 'none'}, 300);
}
} }
});
It looks like you are adding additional click events on the children every time you click on '.timelineTile'. You should move the above code outside of the '.timelineTile' click event. At the very least remove the existing events before re-adding them.
Related
I created a panel (div) that slides in and out of my nav bar. Right now, it'll open and close once just fine but then it won't respond to clicks anymore.
$('.work-link').mouseover(function(){
if($('.work-link').css('left') === '0px')
{
$('.work-link').off('click');
}
else if($('.work-link').css('left') === '-750px')
{
$('.work-link').on('click');
};
});
$('.work-link').on('click', function(){
$('.work-link').animate({left: '0px'}, 600);
$('.work-link').css('cursor', 'default');
$('.sort-container').animate({marginLeft: '0px'}, 800);
$('.exit-sort').fadeIn(600);
$('.port-type').animate({marginRight: '140px'}, 600);
$('.port-type').text("CLICK THE X TO CLOSE").fadeIn();
});
$('.exit-sort').on('click',function(){
$('.work-link').animate({left: '-750px'}, 600);
$('.work-link').css('cursor', 'pointer');
$('.sort-container').animate({marginLeft: '-750px'}, 700);
$('.exit-sort').fadeOut(600);
$('.port-type').animate({marginRight: '70px'}, 600);
$('.port-type').text("SORT THIS PORTFOLIO BY TYPE").fadeIn();
});
I figured the problem has to do with how I used the .on() and .off() events but I don't know how else to approach it. What am I doing wrong?
The click eventhandler is discarded when you call .off(). To turn it back on, you have to call the .on() function again with the event callback (as if you are calling for the first time).
That is, your .mouseover() call needs to be changed like this:
$('.work-link').mouseover(function(){
if($('.work-link').css('left') === '0px')
{
$('.work-link').off('click');
}
else if($('.work-link').css('left') === '-750px')
{
$('.work-link').on('click', function(){
$('.work-link').animate({left: '-750px'}, 600);
$('.work-link').css('cursor', 'pointer');
$('.sort-container').animate({marginLeft: '-750px'}, 700);
$('.exit-sort').fadeOut(600);
$('.port-type').animate({marginRight: '70px'}, 600);
$('.port-type').text("SORT THIS PORTFOLIO BY TYPE").fadeIn();
});
};
});
PS: Validate syntax/typos as I couldn't test your code.
You can try this : instead of having mouseover handler just use if conditions in click handler as shown below so that you don't have to on / off click handlers again and again.
NOTE:- You should use $(this) instead of $('.work-link') which will be extra load on script. $(this) is the object of clicked element.
$('.work-link').on('click', function(){
if($(this).css('left') === '0px')
{
return true;
}
else if($(this).css('left') === '-750px')
{
$('.work-link').animate({left: '0px'}, 600);
$('.work-link').css('cursor', 'default');
$('.sort-container').animate({marginLeft: '0px'}, 800);
$('.exit-sort').fadeIn(600);
$('.port-type').animate({marginRight: '140px'}, 600);
$('.port-type').text("CLICK THE X TO CLOSE").fadeIn();
}
});
I'm working on this website.
Here is the code for the menu trigger on the left sidebar:
jQuery(document).ready( function(){
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function(){
jQuery('#dimmer').fadeToggle(500);
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {direction: "left"}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if(jQuery(".nav-animate").is(":visible")) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
// The above part works perfectly, however the part below doesn't:
if(!jQuery(".nav-animate").is(':visible')) {
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
I tried using if(jQuery(".nav-animate").is(":hidden")) {//...}, and if(jQuery(".nav-animate").css('display') == 'none') {//...} but both doesn't work.
My guess, when you click to "CLOSE" it does the :visible or :hidden check, but the menu is still open at the time you click so it still doesn't have the display:none until the click event performs that. In that case, what can I do?
Thanks in advance for your time and suggestions.
animation related methods will affect the visibility check, so check the state before call to toggle
jQuery(document).ready(function () {
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function () {
jQuery('#dimmer').fadeToggle(500);
//negate since fadetoggle will toggle the state
var visible = !jQuery('.nav-animate').stop().is(':visible');
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {
direction: "left"
}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if (visible) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
} else {
// The above part works perfectly, however the part below doesn't:
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
Just add condition else on one your block condition right.. It's mean will be run if first condition block not true.
if(!jQuery('.nav-animate').stop().is(':visible')) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
else{
// to do
}
Ok so my original question got answered and now my slide effect only happens when I click in anywhere in my div region..here is the code:
$(document).ready(function(){
$('#tabs').tabs();
$("#tabs").click(function() {
$(this).effect( "slide", "medium" );
});
});
Now I'm wondering what if somebody wants to copy text from one of my tab regions? Every single time they try to highlight, the tab will slide away. How do I make it so that the tab region only slides when the actualy tab ul is clicked?
Use combination of mousedown and mouseup:
Demo Fiddle
var down=0;
$(document).ready(function(){
$("#tabs").mousedown(function(event){
down=event.clientX+"||"+event.clientY;
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});
Updated code which prevent slidedown on right-click copy text:
Demo Fiddle 2
var down="||";
$(document).ready(function(){
$("#tabs").mousedown(function(event){
switch(event.which){
case 1:/*Left mouse button pressed*/
down=event.clientX+"||"+event.clientY;
break;
default:/*middle or right mouse button pressed*/
down="||";
}
});
$("#tabs").mouseup(function(event){
var up=event.clientX+"||"+event.clientY;
if(up==down)
$(this).slideUp("medium" );
});
});
You can use the event capturing option on click method. By using that, you can get the element on which the mouse is clicked. And then you can use the target object as below,
$('#tabs').click(function(e){
if(e.target.nodeName == 'P') {
e.stopPropagation();
return;
}
$(this).effect( "slide", "medium" );
});
Hope it will help.
I have a side bar which when you mouseover it slides over the content, when you mouseout it slides back. All working great.
I then have a button which when you click it, it locks the sidebar in place, pushing the content behind over. Locking the sidebar in place. Also works great..
My problem is that I wish for when the sidebar to be locked, to disable the hover, and keep it in the expanded state, then when you unlock it, to go back and re-enable hovering.
Fiddle
Thanks
$('.sec-sidebar-toggle').click(function (e) {
e.preventDefault();
if ($(this).closest('.sec-sidebar').hasClass('sidebar-locked')) {
//unlocked
$(this).closest('.sec-sidebar').removeClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({
width: '38px'
}, 300).css({
'overflow': 'visible'
});
} else {
//locked
$(this).closest('.sec-sidebar').addClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({
width: '253px'
}, 300).css({
'overflow': 'visible'
});
}
});
//Hover
$('.sec-sidebar').mouseover(function () {
$(this).find('.sec-nav').stop().animate({
marginLeft: '0px'
}, 300);
}).mouseout(function () {
$(this).find('.sec-nav').stop().animate({
marginLeft: '-215px'
}, 300);
});
You can unbind the mouseover and mouseout events.
http://jsfiddle.net/3n1gm4/VEUe9/
$('.sec-sidebar-toggle').click(function(e){
e.preventDefault();
if( $(this).closest('.sec-sidebar').hasClass('sidebar-locked') ){
//unlocked
$(this).closest('.sec-sidebar').removeClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({width: '38px'}, 300).css({'overflow': 'visible'});
// ADD EVENT HANDLERS
setupHover();
} else{
//locked
$(this).closest('.sec-sidebar').addClass('sidebar-locked');
$(this).closest('.sec-sidebar').stop().animate({width: '253px'}, 300).css({'overflow': 'visible'});
// REMOVE EVENT HANDLERS
$('.sec-sidebar').unbind('mouseover');
$('.sec-sidebar').unbind('mouseout');
}
});
function setupHover() {
//Hover
$('.sec-sidebar').mouseover(function(){
$(this).find('.sec-nav').stop().animate({marginLeft: '0px'}, 300);
}).mouseout(function(){
$(this).find('.sec-nav').stop().animate({marginLeft: '-215px'}, 300);
});
}
setupHover();
I have wrapped the mouseout function in an IF statement to check whether the sidebar has the sidebar-locked class. If it does the following animation will not be executed.
if(!$('.sec-sidebar').hasClass('sidebar-locked')){
$(this).find('.sec-nav').stop().animate({marginLeft: '-215px'}, 300);
}
Is this what you were hoping to achieve?
Here is the JsFiddle.
Note: The ! at the start of the IF statement is to say IF NOT. So, If not this class in the above example.
There are two easy solutions in my head.
1: You could check the classes of the sidebar if 'sidebar-locked' is present with .hasClass() in the mouseevents.
2: You could remove the mouse events completely by unbinding them when you lock it and rebinding them when you unlock it.
See jQuery API: unbind.
Sidenote:
Consider using the hover event instead of the two seperate mouse events.
You should to clear mouseover event handler, and reassign it back when it needs.
Remove an event handler.
I have make this: This In the right you see a red button. When you click on the red button. The content screen with the text is coming. But i have a question of this. Can i make this with a other animation. If you hold your mouse. Then you can slide open. With your mouse button to left. Then the content box open. Do you understand it? I hope you can help me.
You can see the code on jsfiddle. And you can change it there. I hope you can help me. I am a starting javascripter. And how And have no idea how I can make this.
To implement dragging, you can make use of mousedown/mouseup/mousemove like this: http://jsfiddle.net/pimvdb/25y4K/8/.
$(function () {
"use strict";
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
var mouseDown = false,
grabbed = 0,
start = -303;
button.mousedown(function(e) {
mouseDown = true;
$('*').bind('selectstart', false); // prevent selections when dragging
grabbed = e.pageX; // save where you grabbed
$("body").append('<div class="background-overlay"></div>');
});
$('body').mouseup(function() {
mouseDown = false;
$('*').unbind('selectstart', false); // allow selections again
$(".background-overlay").remove();
start = parseInt(box.css('right'), 10); // save start for next time
// (parseInt to remove 'px')
}).mousemove(function (e) {
if(mouseDown) { // only if you are dragging
// set right to grabbed - pageX (difference) + start 'right' when started
// dragging. And if you drag too far, set it to 0.
box.css("right", Math.min(grabbed - e.pageX + start, 0));
}
});
});
Here is an updated fiddle. Basically I just did a couple of things:
Changed the handler from "click" to "mouseenter"
Added a "mouseleave" handler that does the opposite thing
Put the handlers on the "what-is-delicious" container instead of the <a>
The code:
$(function () {
"use strict"
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
box.mouseenter(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
} else {
$("body").append('<div class="background-overlay"></div>');
button.addClass("open");
box.animate({ right: "0"}, 750);
}
}).mouseleave(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
$("body").find('div.background-overlay').remove();
button.removeClass("open");
box.animate({ right: -303}, 750);
} else {
}
});
});
The "preventDefault()" calls aren't really necessary anymore but I left them there.
I would assume you are toggling the Style.Display of the DIV currently in an OnClick() event.
The same code can be called from a Hover() or MouseOver()