pass window width to iosSlider when hidden - javascript

I'm making a site that makes use of the iosSlider plugin. I have a few sliders inside of a jquery accordion so some of them start out "display:none" when the page first loads. As a result the sliders inside the accordions are not getting the proper screen width. When you open one of the hidden accordions the slider inside is tiny.
I was curious if there was a better method to solving this issue then the one I am currently using. Right now I am simply destroying the slider and recalling it but this looks ugly and I'm sure there is probably a better approach to solving this.
Any input would be great, thanks
Current code:
$(".acheader").click(function(e) {
//e.preventDefault();
e.stopPropagation();
acords.slideUp();
$(".menuarrow").attr('src','/themes/images/arrow_down.png');
var image = $(this).find(".menuarrow");
if(image.attr('src') === "/themes/images/arrow_down.png"){
image.attr('src','/themes/images/arrow_up.png');
}
if ($(this).next().is(":hidden")) {
$(this).siblings(".accontent").slideToggle(100);
$('.iosSlider2').iosSlider('destroy');
$('.iosSlider2').iosSlider({
snapToChildren: true,
desktopClickDrag: true,
keyboardControls: true,
navNextSelector: $('.next'),
navPrevSelector: $('.prev'),
onSlideChange: slideChange2
});
}
else image.attr('src','/themes/images/arrow_down.png');
});
EDIT: this is for a mobile site so there are no static widths I can refer to. The sliders parents inherit their widths from their parents.. etc.

Taking a look at the iosSlider docs, under public methods, it looks like there is an update command which should resize it. Use $('.iosSlider2').iosSlider('update'); instead of destroying. Does that help?

Related

Why is bxslider duplicating my divs

My designer put a bxslider to scroll through 3 divs nicely on my page.
When the page runs, in the html I see it generates 6 divs on the page. It shows div 3, div2, div1, div3, div2, div1.
Just because the duplicated fields on my page now mess up my programing.
Is that neccesary, and is there any way I can touch the code that it shouldn't duplicate my divs?
The page is full of complex code , with an ajax passing the data-serialize to a post form.
Becuase it's all duplicated, now all fields are coming through as 'value,value'. Therefore it's not giving me accurate respones, and well as undefined when it's supposed to be numeric.
My form posts looks like this:
function submitCart () {
$.post(
"scripts/savecart.asp",
$("#form1").serialize()
);}
How could I add that not bx- to it?
As commented in the source code of bxSlider:
if infinite loop, prepare additional slides
So I was able to fix this by adding infiniteLoop: false to the config object:
$(".js-slider").bxSlider({
infiniteLoop: false
});
BxSlider duplicates elements to allow infinite scrolling, etc. For example, say you only have two elements in your slider. Element one might be sliding out on the left, but also sliding in on the right. Therefore, duplicates are required.
If this is a problem, you can usually interact with the duplicates using their bx-clone classes. If you could clarify the actual problem, we could probably give more specific advice.
Update: To eliminate cloned elements from your set, try something like:
$('.bxslider li:not(.bx-clone)')....
I had such problem with bx-clone
I want to use it for an image gallery. So I had a thumbnail image slider and for slider I used bx-slider and on each click on small image , that image in bigger size must show in a div , But on bx-clone clicked nothing happened
I solved that problem with this :
var slider = $('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 92,
moveSlides: 1,
pager: false,
slideMargin: 10,
onSliderLoad: function(){
$('li.bx-clone').click(function() {
/** your code for bx clone click event **/
});
}
});
Adding to #antongorodezkiy's answer, there is a way to have infiniteLoop: false and still get a non-stopping slide changing: using the onSlideAfter event of the last slide you can, after a few seconds, go back to the first slide and re-start the auto mode:
var pauseTime = 4000; //Time each slide is shown in ms. This is the default value.
var timeoutId;
var slider = $('.bxslider').bxSlider({
auto: true,
infiniteLoop: false,
pause: pauseTime,
onSlideAfter: function ($slideElement, oldIndex, newIndex) {
if (newIndex === slider.getSlideCount() - 1) { //Check if last slide
setTimeout(
function () {
slider.goToSlide(0);
slider.startAuto(); //You need to restart the "auto" mode
},
pauseTime //Use the same amount of time the slider is using
);
}
else { //In case the user changes the slide before the timeout fires
clearTimeout(timeoutId);
slider.startAuto(); //Doesn't affects the slider if it's already on "auto" mode
}
}
});
The difference between this solution and the infiniteLoop: true option is that instead of smoothly transitioning back to the first slide as if it was the next, the slider quickly "rewinds" until reaching the first slide.
for above query: Is it possible to keep having the infinite loop, but remove the clones?
try using below code: if more than 1 item infiniteloop: true else :false
infiniteLoop: ($j("...selector...").length < 2) ? false : true,
Just to answer here, so if some one is struggling and cannot fix the duplication issue. I was facing the same problem that all of my HTML from my page was duplicating inside the first slide under the image tag like bellow:
<img src="public/admin/scr3.png" ><div>..... all of my page HTML...</div></img>
I just found that I was writing the image tag not properly
Meaning my code was something like this for image tag
<img src="public/admin/scr3.png" >
I just replaced my image tag with valid HTML like bellow:
<img src="public/admin/scr3.png" />
and it fixed the content duplication issue.
Hope it will help someone.
Cheers!
I´m not sure if it´s the same issue I was facing, but here´s my case:
My code was using bx slider together with fancybox. And it was duplicating my slides. The solution was to put the secodary code (fancy box), which was generated in my image loop, inside the tag. That did it for me.

bxslider wont stop

I am having an issue where the slider will not stop auto play when I click a link on my navigation menu. I start the slider via:
$('.bxslider1').bxSlider({auto: true,autoControls: true});
It auto plays and works, but if I try to stop the slider by creating an onclick function or .click() jQuery like:
$(".nav-portfolio").click(function() {
slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
It seems to do something for a split second and then start again. The reason I need to stop the slider is, I am using jQuery waypoints for anchor links to scroll smooth horizontally, and the panels start moving back and fourth by 1 or 2 pixels and its really annoying for the user.
Any help would be appreciated.
Try modifying your code to be:
$(".nav-portfolio").click(function() {
$('.bxslider1').stopAuto();
});
You were previously using the example from the bxSlider webpage which assumes you haven't already initialized the bxSlider. Since you previously initialized it perhaps the second initialization isn't handled gracefully.
Try adding var keyword before the slider declaration.
$(".nav-portfolio").click(function() {
var slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});

reload, refresh, unbind, destroy, live, javascript/jquery function... how should this be done?

My question title may seem confusing, let explain my situation. Any help would be much appreciated.
I have never done this before, hence why I can't pin point a solution in google.
I have a jquery slideshow, which I wrapped inside a function because I have some addition animation to go with it, please see below...
// my slider function
bikeSlider = function () {
var slider = $('#bike-minislider').bxSlider({
displaySlideQty: 5,
infiniteLoop: false,
hideControlOnEnd: true
});
$('#bike-minislider-fade').fadeIn();
};
// this runs the function
bikeSlider();
As you can see, immediately after the bikeSlider function, I run the function using... bikeSlider();
Now later on, I hide some slides within the slideshow using jquery .hide().
Because my jquery slideshow function, calculates the number of visible slides within the #bike-minislider div, it means that the new number of visible slides causes the slideshow to not work. I guess it needs to re-calculate the new number of slides.
In a nutshell, I think this can be resolved by running the bikeSlider(); function again.
So I tried this below, but it did not work.
bikeFilter = function (y) {
$('.bike').fadeOut();
$('.bike[data-group=' + y + ']').fadeIn();
bikeSlider();
return false;
}
As you can see I am trying to re-run the function bikeSlider(); - but it seems to be running this over the top of the old one, so my question is, how do you remove the original slide function before running it again.
Or reloading/refreshing the original function so it re-calculate the new number slides?
Any pointers would be so helpful.
Thank You.
As i understood you dont need re-create slider, but you do exectly this by calling twice
bxSlider()
According doc you need reinit slider by
reloadShow()
//Reinitialize a slide show
For more info take a look here bxslider in section Public functions
You need to call reloadShow() for slider-object
var mySlider;
$(function(){
mySlider= $('#bike-minislider').bxSlider({
auto: true,
controls: true
});
mySlider.reloadShow();
})

Enabling close pop up similar to markers in Google maps

I think my problem is fairly simple, however I am unable to figure it out. I want to close a note pop up with an "x" icon/div in the top right corner of the note.
Currently I have this as the code. The only solution to minimize the note is to double click on it, which obviously isn't a viable solution.
$('.note').click(function (event) {
$(this).find('.notepopup').show();
});
$('.note').dblclick(function (event) {
$(this).find('.notepopup').hide();
});
I tried changing the second part to target the '.close' div, like this:
$('.close').click(function (event) {
$(this).find('.notepopup').hide();
});
I am beginning to think it has something to do with the relationship between .close and .notepopup - as in - .close is within the popup, whereas .note is in a sense the parent element of .notepopup
Any help would be great. If you really want to get crazy, you can look at what I'm working on: http://www.scottefloyd.com/notewebapp/demo.php
The problem is that you're looking for '.notepopup' inside '.close'. You need $(this).parents('.notepopup'); and that should get the element.

jQuery tooltip with link inside

I have a grid of large images for products. I'm looking to have a tooltip appear when you rollover the image. Though the tooltip will need to stay visible because there will be content and links inside of it. The tooltip will be positioned partly on top of its respective large product image. How do I determine to hide the tooltip when the user is not over the tooltip and the product image and show the tooltip when the user is over the tooltip and image?
Is there a jQuery plugin that handles this already?
Any help is appreciated! Thanks!
Hey I had an issue like this once. Though not exactly what you need this is what I ended up using.
var over_picker = false; //var to store state of over or not over
$('.list_picker').live('mouseover mouseout', function(event){
if (event.type == 'mouseover') {
over_picker=true;
console.log('inside');
}else{
over_picker=false;
console.log('outside');
}
});
$('body').live('click', function(){
if(! over_picker) $('.list_picker').hide();
});
I hope this can be of some help.
As already suggested in another thread, the native design of the tooltip rely on different assumptions, so the behaviour you need (a sticky tooltip that allows the user to click its content) is not officially supported.
Anyway looking at this link you can see it's possibile to achieve what you need using jQuery Tools:
http://jquerytools.org/demos/tooltip/any-html.html
Here is a standalone demo
http://jquerytools.org/demos/tooltip/any-html.htm

Categories