Hi i want to have my side slider button to smoothly slide back to position if the user clicks outside of it.
If you wanna check it here is the jfiddle of it
as of now it doesnt go back to position when you click outside of it.
JS
$(document).ready(function () {
$('#slideleft .mybutton').click(function () {
var $lefty = $(this).parent();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() + 31 : 0
});
});
});
Please try the below:
$(document).mouseup(function (e) {
var $lefty = $('#slideleft .mybutton').parent();
var container = $("#slideleft");
if (parseInt($lefty.css('left')) == 0) if (container.has(e.target).length === 0) {
animate();
}
});
Here is a working fiddle:
JSFiddle
Using some event.target trickery gives you this:
$(document).on('click', function (event) {
if (event.target !== $('#slideleft .mybutton')[0]) {
$('#slideleft .mybutton').hide(); //or slide however you want to.
}
});
If you notice this actually compares the actual HTML and not the jQuery object.
This is because .target give you back the actual HTML of what was clicked.
Adding this works:
$(document).click(function () {
var $lefty = $('#slideleft .mybutton').parent();
if(parseInt($lefty.css('left'), 10) == 0){
$lefty.animate({
left: -$lefty.outerWidth() + 31
});
}
});
Here is the fiddle
Related
I'm having a mobile menu that opens and closes using jquery by adding a css class that has display:block while the menu div has display:none.
The jquery code has a part where it is supposed to close the menu when a click is registered outside the menu div. Everything works execept the: $("body").scrollTop(scrollpos) . This was supposed to scroll the user back where he left off after the scrollTop(0) took place and the menu has closed, but it does not scroll at all the scroll is stuck at the top. Any help will be appreciated. Thank you.
EDIT: Here is an example: https://jsfiddle.net/mufwwudj/
$(function () {
var menutoggle = $(".menu-toggle");
var sidenav = $(".side-nav");
menutoggle.click(function () {
var scrollpos = $('body').scrollTop();
if (!$("body").hasClass("m-nav-open")) {
$("body").scrollTop(0).addClass("m-nav-open");
}
$(document).mouseup(function (e){
if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
if ($("body").hasClass("m-nav-open")) {
$("body").scrollTop(scrollpos).removeClass("m-nav-open");
}
}
});
});
});
One problem here is that you are assigning a new mouseup event every time the menutoggle.click function runs.
$(document).mouseup(function (e){
if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
if ($("body").hasClass("m-nav-open")) {
$("body").scrollTop(scrollpos).removeClass("m-nav-open");
}
}
});
Only the first one passes the conditional, even though each one will fire and scrollpos will always equal whatever it was in the first mouseup event listener.
I don't know how you are testing it, or what the HTML looks like but if you are at the top of the page the first time you click it, scrollpos in the mouseup event will always be 0.
Try assigning the mouseup event once, and putting scrollpos outside both so it can be accessed in both.
$(function () {
var menutoggle = $(".menu-toggle");
var sidenav = $(".side-nav");
var scrollpos;
menutoggle.click(function () {
scrollpos = $('body').scrollTop();
if (!$("body").hasClass("m-nav-open")) {
$("body").scrollTop(0).addClass("m-nav-open");
}
});
$(document).mouseup(function (e){
if (!sidenav.is(e.target) && sidenav.has(e.target).length === 0 && !menutoggle.is(e.target) && menutoggle.has(e.target).length === 0){
if ($("body").hasClass("m-nav-open")) {
$("body").scrollTop(scrollpos).removeClass("m-nav-open");
}
}
});
});
function ScrollOnTopo() {
window.scrollTo(0, 0); //It scrolls page at top
}
This function may be useful to you.
How can I target only one container?
The User should be able to change the Name and then confirm the change.
My function works fine but when I have more containers repeated and I confirm Its changing all the tags!
Please check the demo where you can also see the changeElementTypefunction
Demo:
http://jsfiddle.net/26qNq/1/
JS:
$('.replace').on('click', function (){
$("h2").changeElementType("textarea");
$(this).hide();
$(this).next('a').show();
$('.confirm').on('click', function(){
var $textarea = $('textarea');
$(this).hide();
$(this).prev('a').show();
$textarea.html($textarea.val()).changeElementType("h2");
});
if ($('textarea:visible')){
$(document).keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
$("textarea").changeElementType("h2");
$('.replace').css('opacity','1');
}
});
}
});
You need to identify the relevant h2/textarea
var container = $(this).closest('.rename')
container.find('h2').changeElementType("textarea");
and
var container = $(this).closest('.rename')
var $textarea = container.find('textarea');
You also should nest your handler binding because each time your try to edit, you add a new handler
Full changes
$(document).keypress(function (e) {
if ($('textarea:visible')) {
if (e.which == 13) {
alert('You pressed enter!');
$("textarea").changeElementType("h2");
$('.replace').css('opacity', '1');
}
}
});
$('.replace').on('click', function () {
var container = $(this).closest('.rename')
container.find('h2').changeElementType("textarea");
$(this).hide();
$(this).next('a').show();
});
$('.confirm').on('click', function () {
var container = $(this).closest('.rename')
var $textarea = container.find('textarea');
$(this).hide();
$(this).prev('a').show();
$textarea.html($textarea.val()).changeElementType("h2");
});
Demo at http://jsfiddle.net/26qNq/6/
Adding an ID to each of them seems to work.
All I needed to do was add a numeric ID to each element we were using and add this to your replace code:
var id = $(this).attr('id');
$("h2#" + id).changeElementType("textarea");
demo: http://jsfiddle.net/26qNq/12/
I have create custom toogle script to show/hide content.
Currently when you click first and then second text, icon mechanism working perfect. but when you click first text and again click first icon mechanism not working.
My JS Code:
$(document).ready(function() {
$('.togglelink').on('click', function(e) {
e.preventDefault();
var elem = $(this).next('.toggle');
$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');
if (elem.is(':visible')) {
var openslide = $(this).attr("id");
if (openslide == 'slideNavToggle') {
$("#where-slide-down").hide();
$("#where-slide-up").show();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideInspToggle') {
$("#inspiration-slide-down").hide();
$("#inspiration-slide-up").show();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideToggle') {
$("#need-slide-down").hide();
$("#need-slide-up").show();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
}
}
});
$('.toggle').hide('fast');
});
My Fiddle: Sample
Any ideas or suggestions? Thanks.
Here you go:
You just have to change from show/hide to toggle. Fiddle
$('.togglelink').on('click', function (e) {
e.preventDefault();
var elem = $(this).next('.toggle');
$('.toggle').not(elem).hide('fast');
elem.slideToggle('fast');
if (elem.is(':visible')) {
var openslide = $(this).attr("id");
if (openslide == 'slideNavToggle') {
$("#where-slide-down").toggle();
$("#where-slide-up").toggle();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideInspToggle') {
$("#inspiration-slide-down").toggle();
$("#inspiration-slide-up").toggle();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#need-slide-down").show();
$("#need-slide-up").hide();
}
if (openslide == 'slideToggle') {
$("#need-slide-down").toggle();
$("#need-slide-up").toggle();
$("#where-slide-down").show();
$("#where-slide-up").hide();
$("#inspiration-slide-down").show();
$("#inspiration-slide-up").hide();
}
}
});
$('.toggle').hide('fast');
I've been working on this jQuery effect heres the fiddle:
http://jsfiddle.net/abtPH/26/
Everything's pretty good so far, however when I click on the elements too fast it seems to get buggy and get weird behavior. If you take your time and click on the elements it works fine.
I've tried using :animate
stuff to make sure the animation ends before the user can click on the next one. I do not like this approach though because from a end user it seems like the effects are laggy. I want the user to be able to click on the elements fast and have the desired effect.
Here's my jQuery so far:
$('li').on('click', function (e) {
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').fadeIn('medium', function () {
active.toggleClass('active', 400).find('.outer').fadeOut('medium');
});
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
$('.outer').on('click', function (e) {
return false;
});
Use .finish() complete all the queued animation before beginning a new one
$('li').on('click', function(e){
e.preventDefault();
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
$(this).find('.outer').finish().fadeIn('medium', function(){
active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium');
});
} else {
$(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle();
$(this).find('.outer').finish().slideToggle();
}
} else {
$(this).find('.outer').finish().slideToggle();
}
$(this).finish().toggleClass('active', 400);
});
$('.outer').on('click', function(e){
return false;
});
Demo: Fiddle
I have a button that toggles a menu popup. I have can make the menu disappear if you click outside of the menu but now my button toggle does not work. If I click the button again the menu stays up. How can I make the menu disappear if you toggle the button or if you click off the container?
jsFiddle: http://jsfiddle.net/PPcfN/
$('.quicklinks-rollover').click(function () {
$('.quicklinks').toggle();
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});
The mouseup function has to take care of the click on the button (quicklinks-rollover).
If fixed the whole thing here:
http://jsfiddle.net/8VUnq/1/
$(document).mouseup(function (e) {
var popup = $('#quickLinksPopup'),
button = $('#quickLinksToggle');
if (popup.is(':visible')
&& !popup.is(e.target)
&& !button.is(e.target)
&& popup.has(e.target).length === 0
&& button.has(e.target).length === 0) {
popup.toggle();
}
});
Keep in mind those two things:
Use IDs to refer to the items quicker and prevent multiple popup conflicts
Using a mouse event on the whole page is not recommended as the event will get triggered very frequently, try using an alternative method such as adding a close button in the popup, or to be more effective, think about adding the mouseup listener on the show of the popup and removing it on the hide.
You can determine the state of the popup with: $(popup).is(':visible') or is(':hidden').
Try :
var $quicklinks = $('.quicklinks');
var msOverLinks = false;
$('.quicklinks-rollover').click(function () {
$quicklinks.toggle();
});
$quicklinks.mouseenter(function() {
msOverLinks = true;
}).mouseleave(function() {
msOverLinks = false;
});
$(document).mouseup(function (e) {
if( ! msOverLinks ) {
$quicklinks.toggle();
}
});
You can do this Normal hide and show method. Because mostly toggle() function wont works in proper manner...
put your HTML button with attribute p="closed" by default:
<button class="quicklinks-rollover" p="closed" title="Quick Links">toggle</button>
Change Your Jquery:
$('.quicklinks-rollover').click(function () {
var a = $(this).attr("p");
var container = $(".quicklinks");
if(a=="closed"){
container.show();
$(this).attr("p","open");
}else{
container.hide();
$(this).attr("p","closed");
}
});
$(document).mouseup(function (e) {
var container = $(".quicklinks");
if (container.has(e.target).length === 0) {
container.hide();
}
});
The reason for this behavior, the mouseup() is binded when I perform the click() on the div. You can check this behavior by adding console.log message in .mouseup event.
So instead try like below.
$('.quicklinks-rollover').on('click', function (e) {
$('.quicklinks').toggle();
e.stopImmediatePropagation();
});
$(document).click(function (e) {
var container = $(".quicklinks");
console.log(container.has(e.target).length);
if (container.has(e.target).length === 0) {
container.hide();
}
});
Working Fiddle