i'm making a wordpress theme with a slide out search box. I would like to hide/toggle the search box by clicking away. Here is my javascript
jQuery(document).ready(function($){
$("#flip").click(function(){
$("#searchbox").toggle("slide", { direction: "right" }, 500);
});
$("#flip2").click(function(){
$("#searchbox").toggle("slide", { direction: "right" }, 500);
});
});
jQuery('body').on('click', function(e){
{
$("#searchbox").toggle("slide", { direction: "right" }, 500);
});
jQuery('#searchbox').click(function(e)
{
e.stopPropagation();
});
I get an unexpected token error when trying this. Thanks for your help
this code should work-
jQuery(function() {
jQuery('#flip').click(function() {
jQuery("#searchbox").toggle("slide", { direction: "right" }, 500);
return false;
});
});
jQuery(document).click(function() {
jQuery("#searchbox").hide("slide", { direction: "right" }, 500);
});
jQuery("#searchbox").click(function(e) {
e.stopPropagation();
});
and here's a jsfiddle which I changed slightly for your purpose and for wordpress
You could do it with a window.onclick event:
(You didn't post any HTML code so this is just an example of using it)
var yourbox = document.getElementById('yourbox');
window.onclick = function(event) {
if (event.target == yourbox) yourbox.style.display = "none";
}
If this is the full code, the error is caused by the extra '{' character you have in this function:
jQuery('body').on('click', function(e){
{
$("#searchbox").toggle("slide", { direction: "right" }, 500);
});
You should remove the extra {
jQuery('body').on('click', function(e){
$("#searchbox").toggle("slide", { direction: "right" }, 500);
});
That said, this logic might not work for what you're trying to do, but this is probably the unexpected token error.
Related
How can I include a close button using jQuery UI toggle function?
$(".login").click(function () {
$(this).hide();
$("#myDiv").toggle("slide", {
direction: "left"
}, 500);
});
My jsFiddle
fiddle: http://jsfiddle.net/AtheistP3ace/TX55G/207/
$(".login, .close").click(function () {
$('.login').toggle();
$("#myDiv").toggle("slide", {
direction: "left"
}, 500);
});
Show/Hide click button after toggle: http://jsfiddle.net/AtheistP3ace/TX55G/208/
$(".login, .close").click(function () {
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () { $('.login').toggle(); });
});
If you want to hide the click prior to showing close and show the click after hiding close you can do this. Although I will point out using the visible/hidden selectors can be bad on performance but I was attempting to not make many changes to your code. You can do this without using them easily.
http://jsfiddle.net/AtheistP3ace/TX55G/209/
$(".login, .close").click(function () {
var hiding = $('.login:visible');
if (hiding.length == 1) {
$('.login:visible').toggle();
}
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () {
if (hiding.length == 0) {
$('.login').toggle();
}
});
});
This is the way I would do it instead of using those special selectors. I would use a class. http://jsfiddle.net/AtheistP3ace/TX55G/211/
CSS:
.hide {
display: none;
}
JS:
$(".login, .close").click(function () {
var login = $('.login');
var hiding = !login.hasClass('hide');
if (hiding) {
$('.login').addClass('hide');
}
$("#myDiv").toggle("slide", {
direction: "left"
}, 500, function () {
if (!hiding) {
$('.login').removeClass('hide');
}
});
});
$(".login, .close").click(function () {
Demo
for some reason I can't input text in my newsletter input field now that I display it in a fancybox popup window. Any idea what the issue is and how to fix this? See http://jsfiddle.net/6G8YR/
Many thanks,
function openFancybox() {
setTimeout( function() {$('#newspopup').trigger('click'); },1000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', { expires: 0.0001 });
$('#newspopup').fancybox({
helpers : {
overlay : {
css : {
'background' : 'rgba(58, 42, 45, 0.3)'
}
}
}
});
});
$(document).on('click', function(e) {
if(e.target === $('.visitwebsitebtn')[0]) {
$.fancybox.close();
}
});
Ok I figured out the problem, but only ran into other kinds of issues. The problem is that, there is an event that exists that causes your fancybox to refresh everytime someone happens to click on it.
This is why you are unable to write anything in the input. I have a temporary solution that is really ugly but it works.
$('#email').on('click', function(e){
e.stopPropagation();
});
Upon clicking the email input, your fancybox won't refersh. I tried applying this to your #newspopup but it blocs $('#newspopup').trigger('click'); so your fancybox never opens at the start.
Here is a Demo
Additional information:
I've worked with fancybox plugin before and I've never encountered this problem. You might want to think of adding options to your fancybox.. for example add this line :
'type':'iframe',
I would have tried on jsfiddle, but unfortunately they don't allow it, it seems.
You can optimize your code and get rid of unnecessary click events and triggers (so you won't need unnecessary e.stopPropagation() methods either) like :
function openFancybox() {
setTimeout(function () {
$.fancybox('#newspopup', {
modal: true, // this prevents fancybox to close unless close unless ".visitwebsitebtn" is clicked
helpers: {
overlay: {
css: {
'background': 'rgba(58, 42, 45, 0.3)'
}
}
},
afterShow: function () {
// enables a way to close fancybox
$(".visitwebsitebtn").on("click", function () {
$.fancybox.close()
});
}
});
}, 1000);
};
$(document).ready(function () {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', {
expires: 7
});
});
See JSFIDDLE
I am currently using the following code to initialize a lazy initialization version of Bootstrap tooltip. After the first hover everything works fine in regards to the delay, but on the initial hover it shows right away. I know this is because of the $(this).tooltip('show'); method, but I dont know how to use the delay and show at the same time. I have to use the $(this).tooltip('show'); because once hovered the element doesnt show the tooltip unless I move out and back in.
$(element).on('hover', '.item', function () {
matchup = ko.dataFor(this).Matchup;
if (matchup) {
if ($(this).attr('data-original-title') != '') {
$(this).tooltip({ title: matchup.Title, html: true, delay: 1000 });
$(this).tooltip('show');
}
}
});
Updated Answer
$(element).on('mouseenter', '.item', function (e) {
matchup = ko.dataFor(this).Matchup;
if (matchup) {
if ($(this).attr('data-original-title') != '') {
$(this)
.addClass('tooltip-init')
.tooltip({ title: matchup.Title, html: true, delay: { show: 1000, hide: 0 } })
.trigger(e.type);
}
});
try use trigger
try the following code
$(this).tooltip({
title: matchup.Title,
html: true,
trigger: 'hover',
delay: delay: { show: 2000, hide: 3000 }
}).trigger('hover');
I found Holmes answer using delay to work, but not reliably. When moving through a series of items, the hover seemed to stop showing. With the help of another stackoverflow answer leading to this jsfiddle by Sherbrow, I simplified the code and got it working in this jsfiddle. Simplified code below:
var enterTimeout = false;
$('[rel="tooltip"]').tooltip({trigger:'manual'}).on('mouseenter', function() {
var show = function(n) {
enterTimeout = setTimeout(function(n) {
var isHovered = n.is(":hover");
if (isHovered) n.tooltip('show');
enterTimeout = false;
}, 750);
};
if(enterTimeout) clearTimeout(enterTimeout);
show( $(this) );
});
$('[rel="tooltip"]').on('mouseout click',function() {
$(this).tooltip('hide');
});
is there any option to prevent slideUp() when hover its related div ?
$('#member1').hover(function () {
$("#memberdetails2").hide();
$("#memberdetails1").stop(true, true).slideDown();
}, function () {
$("#memberdetails1").stop(true, true).slideUp();
});
$('#memebr2').hover(function () {
$("#memberdetails1").hide();
$("#memberdetails2").stop(true, true).slideDown();
}, function () {
$("#memberdetails2").stop(true, true).slideUp();
});
DEMO http://jsfiddle.net/sweetmaanu/zDYyB/
Are you talking about something like this?
http://jsfiddle.net/zDYyB/2/
If you want the members detail to be always visible, remove
$('#company').on('mouseleave', function(e) {
$('.membersare').hide();
});
I'm having issues with two jQuery toggle buttons. They are used for mobile navigation buttons:
(function($) {
$(function() {
$('#mobile-nav-button').toggle(
function() {
$('#fullpage').animate({ left: 250 }, 'normal', function() {
$('#mobile-nav-button').html('Close');{
$('#social-nav-panel').hide();
}
});
},
function() {
$('#fullpage').animate({ left: 0 }, 'normal', function() {
$('#mobile-nav-button').html('Open');
});
}
);
$('#social-nav-button').toggle(
function() {
$('#fullpage').animate({ right: 250 }, 'normal', function() {
$('#social-nav-button').html('Close');
});
},
function() {
$('#fullpage').animate({ right: 0 }, 'normal', function() {
$('#social-nav-button').html('Open');
});
}
);
});
})(jQuery);
On their own they work fine. The first button #mobile-nav-button works perfectly each time. The second button #social-nav-button also works fine. However, if #mobile-nav-button is selected, then #social-nav-button will cease to work (this does not apply the other way round, as #mobule-nav-button will always work, even if #social-nav-button has been selected).
I've seen a lot of similar posts on stack overflow (though not the same problem), but my JS/jQuery knowledge is sadly nowhere near good enough to apply any fixes to my issue.
Any help would be massively appreciated!
You can check my example: Toggle Buttons show and hide
HTML:
<button type="button" id="mobile_bt">Mobile</button>
<button type="button" id="social_bt">Social</button>
JS using jQuery:
$('#mobile_bt').click(function() {
var help= $(this);
$('#social_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});
$('#social_bt').click(function() {
var help= $(this);
$('#mobile_bt').toggle('slow', function() {
help.hide();
$(this).show();
});
});