I try to put slide bar inside jquery fancybox popup but some events like mouseup, mouseover not work. But if I put slider div outside fancybox popup, if work normally. So how can I fix this problem? Appreciate your helps.
try using:
.live('mouseup', function() {
.live('mouseover', function() {
instead of:
.mouseup(function() {
.mouseover(function() {
as the content inside fancybox is created dynamically.
You could also put your slider initialization code inside of the fancybox onComplete function. See fancybox.net/api
Related
I have added a CodePen Demo
I'm trying to make the lightbox close when the close button is clicked. Currently, the lightbox will only "close" or trigger the close function on the background only.
Not sure what I'm doing wrong.
CodePen Demo
So far I have tried these slectors that don't trigger the closing function:
$('.lightbox-item > .close-button')
$('.lightbox-item .close-button')
$('.close-button')
You should bind the click event on the document using $(document).on('click', '.lightbox-item .close-button', function(){ closeLightbox(); }); because the div lightbox-item is empty when you run $('.lightbot-item .close-button').click(function(){ closeLightbox(); }); at the end of your code.
You can also bind the click event after you append the content in the function openLightbox. It would look like this
$(".lightbox-item").append(content);
$('.lightbox-item .close-button').click(function(){ closeLightbox(); });
I created a fork of your pen using the first solution.
I have zero experience in jQuery or js but I am trying to learn, so any help is much appreciated. I have a jQuery slide out (for live chat) that I would like to have slide out once a link is clicked. Ideally
Click Here
And this will make the chat slide out. The only code that is in the HTML is the onload
<body onload="initializeLiveHelp();">
You can see how it works here Link Fixed
If you need the jQuery I can get that as well but I was not sure if that was needed or not. Thank You
Try it by toggling the width. So write CSS for the closed state and use this jquery snippet to open it
Toggle width with jQuery
Add an ID to your link so
Click Here
becomes
Click Here
And the jquery something like this (but not exactly). Reference the SO thread for more info and check out the fiddle. Or post more HTML here and I can help further.
$(document).ready( function(){
$('#mylink').click( function() {
var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
$('#toggle').animate({ width: toggleWidth });
});
});
Trigger a click when someone clicks a link:
$("li a").on("click", function(event) {
event.preventDefault();
$(".livehelpslideout a").trigger("click");
}
Preventdefault() disables default behaviour when clicking on a link, otherwise browser will load another page. Your desired behaviour for that is unclear, so you'll need to think about your logic.
I want to refresh the flexslider on click event. Actually i add flexslider in bootstrap pop so i want to refresh the slider on click event. Problem is that when i refresh the slider then it does not showing, because slider loss the in line styles of li. I debugged every thing is fine but in-line css are rendering when i refresh the slider.
For Refresh Slider
$(function() {
$(".sidebar-button").click(function(evt) {
$(".custom-popup-personalize").load(window.location + " .custom-popup-personalize");
})
});
I will really appreciate if someone give me solution of this problem.
after read plugin doc , something like so maybe help you :
$('myslider-inner-div').data('flexslider').setup();
OR
trigger your function on tab show event :
$('#case-1').on('shown', function () {
$(window).trigger( 'resize' );
});
How do I get jQuery(document).ready(function() to fire again when an overlay div is activated?
I'm using this function to hide the a.button:
jQuery(function($) {
jQuery(document).ready(function() {
jQuery(
'.theme-actions a.button.button-primary.customize.load-customize.hide-if-no-customize'
).css("display","none");
});
});
The same button with the same class exists in a "overlay" called .theme-wrap, and within .theme-wrap, the a.button CSS looks like this (the difference being .active-theme ):
.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
If I reload the page with the .theme-wrap overlay open, the button disappears, because the jQuery document ready function fires again.
I tried adding both CSS rules to the one function
jQuery(
'.theme-actions a.button.button-primary.customize.load-customize.hide-if-no-customize,
.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
').css("display","none");
but it doesn't work.
How do I get document ready to fire again when the overlay opens?
Update 10/14/14
As was pointed out in the answer below: there is no need for jQuery in this instance. The CSS I'm using is the same for each div - the original and the overlay - so a simple {display:none} rule added to the admin stylesheet will suffice.
Instead of using the $(document).ready() function again, try adding the CSS directly to your stylesheet.
Once the overlay is activated run the following:
jQuery('.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
').css("display","none");
Or better still create a function:
function hideElement( sel) {
$( sel ).hide(); //.hide() is equiv to .css('display', 'none');
}
Then call the function at DOM ready with first selector:
$(document).ready(function() {
hideElement( 'selector-1' );
});
And then when the overlay is fully activated, call the function with the appropriate selector:
hideElement( 'selector-2' );
at the moment Im only learning javascript and could do with some help here as Im a little confused as to where to go from here.
I have a site with a modal using jquery, I can get it to show when I click on the image, but when I click elsewhere it doesnt turn it off.
Ive tried toggle, but that makes it turn on and off no matter where I click.
Ive tried hide but that stops it working at all (assuming its applying the hide function even when I click on the link)
Heres what I have so far, any help would be great...
jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});
make an function that checks for youtubemodal that is shown and then hide.
$("document").click(function() {
if( $('#youtubemodal').is(':visible') ) {
$('#youtubemodal').hide();
}
});
Here's what you need to do:
$('#youtube').click(function(){
$('#youtubemodal')
.show()
.on("click", function(e){
e.stopPropagation();
});
$(document).on("click.youtubemodal", function(){
$(this).off(".youtubemodal");
$('#youtubemodal').hide();
});
});
This is how it will behave:
When you click on the image, the modal appears
When the modal appears, we add a listener to document so that when you click anywhere, the modal is hidden (and the listener is removed as well)
When the modal appears, we also add a listener to it, so that if you click on the modal if doesn't hide it: the modal is only hidden if you click outside of it
Note: if you're not using jQuery 1.7 or above, replace .on() with .bind(), and .off() with .unbind()
I came up with my own workaround for this, where I set up a div with a dark background with an opacity of 40%,that appears throughout the page when the modal is loaded.
#modalbackground {
width:100%;
height:100%;
background-image: url('images/modalbackground.png');
background-repeat: repeat;
position:fixed;
z-index:600;
display:none;
}
I then put this div outside of everything to insure it covers the entire page
<div id="modalbackground"> </div>
I then applied this code to make sure the div and the modal closes when I click on the new dark "background".
jQuery('#youtube').click(function(){
jQuery('#youtubemodal').show();
});
jQuery('#youtube').click(function(){
jQuery('#modalbackground').show();
});
jQuery('#modalbackground').click(function(){
jQuery('#modalbackground').hide();
});
jQuery('#modalbackground').click(function(){
jQuery('#youtubemodal').hide();
});