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' );
});
Related
so apparently there is an issue regarding hover state of an element in tablet view.
I have made a sample where I have a position-fixed header, inside of it there is an element that can be hovered and will show dropdown content. I'm using additional class to show the dropdown content. Dropdown content will be shown on mouseenter and hidden on mouseleave or when window is scrolled like so:
$('.custom-dropdown').on('mouseenter', function(){
$(this).children('.dropdown-content').addClass('active');
}).on('mouseleave', function(){
$(this).children('.dropdown-content').removeClass('active');
})
$(window).scroll(function () {
document.activeElement.blur();
$('.custom-dropdown').trigger('mouseleave');
});
Here is the sample: https://jsfiddle.net/tja9scg4/
This works fine in desktop mode using mouse interaction, but the problem occurs only when using tablet view (I use Chrome's developer tools to replicate this).
So in tablet mode, if you click on the 'Hover Me', the dropdown content will show. Now try scrolling it and that should hide the dropdown content. But when you click on the 'Hover Me' again, it won't show. I think this happens due to the 'Hover Me' element that is still focused.
So I wonder if anyone can help me on this? Thanks in advance.
Thanks for the help,
I decided to add click event so the dropdown will always show regardless the hover state. Here's the code:
$('.custom-dropdown').on('mouseenter', function () {
$(this).children('.dropdown-content').addClass('active');
}).on('mouseleave', function () {
$(this).children('.dropdown-content').removeClass('active');
}).on('click', function () {
$(this).children('.dropdown-content').addClass('active');
});
If anyone has the best practice, feel free to share. For now, I think this will work fine..
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 have been working on this menu plugin, and its working fine, however there is one problem I've noticed, please see this JSFiddle Demo
When menu is opened, I have added a close button (x) on the top right corner of the menu, when I click on close its sliding to left and hiding but when I click on menu again its not opening but if you click once again it works perfectly.
Can somebody please guide how to make my custom close icon working perfectly, as its doing with outside menu click?
I found that on close click, its removing a class and adding inline css of translate3D which I have done same in my jquery, but no luck
Here is my close jQuery function
$(document).ready(function(){
$('.nav-close').click(function(){
$("#mp-pusher").removeClass('mp-pushed').css("transform","translate3d(0px, 0px, 0px)");
$(".mp-level").removeClass('mp-level-open');
});
});
What you want to do is keep a reference to the menu so you can close it in your event.
https://jsfiddle.net/ps855n8r/14/
var menuItem = new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
That way in your event you can close like so :
menuItem._resetMenu();
Don't try to close it manually using the DOM, which means your even function becomes like this :
$(document).ready(function(){
$('.nav-close').click(function(el){
menuItem._resetMenu();
});
});
Also helpful for calling other methods on the mlPushMenu object elsewhere. In the above example; menuItem is your reference.
Currenlty when a page is posting back or something else is going on I display a big grey div over the top of the whole page so that the user can't click the same button multiple times. This works fine 99% of the time, the other 1% is on certain mobile devices where the user can scroll/zoom away from the div.
Instead of trying to perfect the CSS so that it works correctly (this will be an on going battle with new devices) I've decided to just stop the user from being able to click anything. Something like $('a').click(function(e){e.preventDefault();}); would stop people from clicking anchor tags and navigating to the link but it wouldn't stop an onclick event in the link from firing.
I want to try to avoid changing the page too radically (like removing every onclick attribute) since the page will eventually have to be changed back to its original state. What I would like to do is intercept clicks before the onclick event is executed but I don't think that this is possible. What I do instead is hide the clicked element on mouse down and show it on mouseup of the document, this stops the click event firing but doesn't look very nice. Can anyone think of a better solution? If not then will this work on every device/browser?
var catchClickHandler = function(){
var $this = $(this);
$this.attr('data-orig-display', $this.css('display'));
$this.css({display:'none'});
};
var resetClickedElems = function(){
$('[data-orig-display]').each(function(){
$(this).css({display:$(this).attr('data-orig-display')}).removeAttr('data-orig-display');
});
};
$('#btn').click(function(){
$('a,input').on('mousedown',catchClickHandler);
$(document).on('mouseup', resetClickedElems);
setTimeout(function(){
$('a,input').off('mousedown',catchClickHandler);
$(document).off('mouseup', resetClickedElems);
}, 5000);
});
JSFiddle: http://jsfiddle.net/d4wzK/2/
You could use the jQuery BlockUI Plugin
http://www.malsup.com/jquery/block/
You can do something like this to prevent all actions of the anchor tags:
jQuery('#btn').click(function(){
jQuery('a').each(function() {
jQuery(this).attr('stopClick', jQuery(this).attr('onclick'))
.removeAttr('onclick')
.click(function(e) {
e.preventDefault();
});
});
});
That renames the onclick to stopclick if you need to revert later and also stops the default behavior of following the href.
document.addListener('click',function(e){e.preventDefault()})
Modified-
Its your duty to remove the click event from the document after you are done accomplishing with your task.
Eg -
function prevent(e){
e.preventDefault()
}
//add
document.addListener('click',prevent)
//remove
document.removeListener('click',prevent)
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