Slide Effects for Tabs Part 2 - javascript

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.

Related

how to close notification when trigger clicked twice or outside element in jquery

I have a notification widget that will appear when I click the trigger and disappear when I click the trigger twice or click elsewhere in outside element.
How to do that?
$('.swt').click(function(){
$('.swt').removeClass('active');
$('.ctx').removeClass('ctx-active');
$(this).addClass('active');
});
var ccd = 1;
$('#add').click(function(){
$('#ad').addClass('ctx-active');
});
$('#msg').click(function(){
$('#ms').addClass('ctx-active');
});
$('#notif').click(function(){
$('#no').addClass('ctx-active');
});
$('#sst').click(function(){
$('#show div').removeClass('ctx-active');
});
demo code
Just change the removeClass and addClass with toggleClass. Here's the Documentation on toggleClass.
Here's a fixed JSFiddle.
For 'close when click outside', you will have to add a transparent div with full width and height behind #tooltip, and add a click eventListener.
You can use dblclick for double-click event handler and inside the event handler you can add checking like this one:
$(document).dblclick(function(e) {
if (e.target.id != "show" && !$(e.target).parents("#show").size()) {
//remove class
}
});
For the implementation you can see here : JSFiddle
Thanks for answers.
Finally i find the result for all the problems.
i just use sibling() and toggleclass() to fix the problems.
this is the update demo.
demo code
$('#add').click(function(){
$('#ms').removeClass('ctx-active');
$('#no').removeClass('ctx-active');
$('#ad').toggleClass('ctx-active');
$('#add').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#msg').click(function(){
$('#no').removeClass('ctx-active');
$('#ad').removeClass('ctx-active');
$('#ms').toggleClass('ctx-active');
$('#msg').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#notif').click(function(){
$('#ms').removeClass('ctx-active');
$('#ad').removeClass('ctx-active');
$('#no').toggleClass('ctx-active');
$('#notif').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#sst').click(function(){
$('#show div').removeClass('ctx-active');
});
$('#ss').click(function(){
$('.ctx').removeClass('ctx-active');
$('.swt').removeClass('active');
});`

CSS animation add class and remove class using Jquery

I have one question about add and remove class using css animation.
I have created this DEMO from codepen.io
In this demo you can see there is six round div. Also there is one link (Click here).
If you click to Click here button then you can see the CSS animation. So i want to add a jquery code. Like first the six round div is display:none; when you click Click here button then six round div open with animation but only one time. after then when you click again Click here button then six round div automatically remove with css animation.
Anyone can help me here ?
Check to see if the added class is present and remove/do animation if it is. Check out hasClass();
Edit: Add something similar to this in your handler:
var circle = $('.circle');
if (circle.hasClass('bounceInUp')) {
circle.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
$('.circle').addClass('animated bounceOutDown');
circle.removeClass('bounceOutDown').addClass('bounceInUp');
}
codepen
$(document).ready(function() {
$('.wrap').css('display', 'none');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').css('display', 'block');
$('.circle').addClass('animated bounceInUp');
$(this).parent('.note a').removeClass('.circle bounceInUp');
$(".note a").off('click'); //remove click handler.
//Adding the new click handler
$(".note a").click(function(e) {
e.preventDefault();
$('.circle').addClass('animated bounceOutDown');
$(this).parent('.note a').removeClass('.circle animated bounceOutDown');
$(".note a").off('click'); //remove click handler again.
});
});
});
Add a second click handler to the button
First of all you need to do to delete the following line within the .circle
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;
Then you can use Mouser's and sareed's code:
$(document).ready(function() {
var circle = $('.circle');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').css('display', 'block');
if (circle.hasClass('bounceInUp')) {
circle.removeClass('bounceInUp').addClass('bounceOutDown');
}
else
{
$('.circle').addClass('animated bounceOutDown');
circle.removeClass('bounceOutDown').addClass('bounceInUp');
}
});
});
I hope this will help you.

jQuery - hover to show sidebar, but an option to lock it

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.

buttons not working when pressed consecutive times

I have the following slide effect that does not work when you press one of the same button more than twice in a row. Meaning, you select the red button to display its color, press red again to hide that color. When you press it for the third time, it will not work. To get the red to work again, you need to select a different color. This happens with all the buttons. How do I stop this?
fiddle demo
// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){
// Get a reference to the container.
var container = $( ".container" );
// Bind the link to toggle the slide.
$( "a" ).click(function( event ){
// Prevent the default event.
event.preventDefault();
var $this = $(this);
var $target = $("#target");
if ($target.attr("class") === $this.attr("data-color")) {
container.slideUp(500);
} else {
// Hide - slide up.
container.slideUp(500, function(){
$target.attr("class", $this.attr("data-color"));
// Show - slide down.
container.slideDown(500);
});
}
});
});
You have to remove the class attribute once the color slides back down, or else it passes your condition:
container.slideUp(500, function() {
$target.removeAttr("class");
});
Demo: http://jsfiddle.net/k5L5N/2/

JQuery drop down, remain down while hover over drop down

I setup a jquery dropdown menu that works perfect. It drops down when a user rolls over a link. The problem is that when the user rolls over the content area of the drop down menu, it slides back up. I need to set up the code so that the slidedown box remains in the down position while the user's cursor is still over it.
Here is my HTML:
<ul id="tabnav">
<li class="tab2">My Leases</li>
</ul>
<div id="leases">
<!-- slide down content here -->
</div>
JS Trigger:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").hover(function(){
$("#leases").slideToggle("medium");
$(this).toggleClass("active");
return false;
});
});
</script>
Any ideas?
EDIT: Here is a link to page in question: http://designvillain.com/testbed/600/601.html
I'm not sure if this is what you want, but I'll just drop it here. It waits 500ms before sliding up #leases, and only when appropriate
var isMousedOver;
var hideDropdown = function(a) {
setTimeout( function() {
if (isMousedOver) return;
$("#leases").slideUp("medium");
$(a).removeClass("active");
}, 500);
}
$(".btn-slide").hover(
function(){
$("#leases").stop(true,true).slideDown("medium");
isMousedOver = true;
$(".btn-slide").removeClass("active");
$(this).addClass("active");
var that = this;
$("#leases").data("mouseoutfn", function() { hideDropdown(that) });
},
function(){
isMousedOver = false;
hideDropdown(this);
}
);
$("#leases").hover(
function() {
isMousedOver = true;
},
function() {
isMousedOver = false;
$(this).data("mouseoutfn")();
}
);
Here's a demo: http://jsfiddle.net/mMRZc/
The .hover() binds two events, mouseenter and mouseleave.
I would instead go granular and use the mouseenter() on the .btn-slide and the mouseleave() on the .leases
$(function()
{
$(".btn-slide").mouseenter(function(){
$("#leases").slideToggle("medium");
$(this).toggleClass("active");
});
$("#leases").mouseleave(function(){
$(".btn-slide").toggleClass("active");
$(this).slideToggle("medium");
});
});
EDIT: Note, if the mouse never enters the #leases div, it will not get the mouseleave, and you may need to consider that.
EDIT2: fix my bad finger typing of funciton to function
I assume the div is hidden on page load and you want it to show when you hover over the link? Change toggle to down...
$(document).ready(function(){
$("#leases").hide();
$(".btn-slide").hover(function(){
$("#leases").slideDown("medium");
$(this).toggleClass("active");
return false;
});
});
Does it need to slide back up sometime?

Categories