iosscripts / iosslider Goto Github PK

Let's say I have 5 slides and a pagination (similar to the demo you have on the demo site).

On a touchscreen device, if I go to the 3rd slide and swipe at the right edge of the viewport, it will unselect the 3rd active box and add the active class to the first.

Same thing happens if I swipe at the left edge, but it will activate the last navigator box.

Please let me know if that makes sense?

Thanks a lot.

Add option to be able to buffer all imagery on slides.

Add public methods to add and remove slides.

When a form is embedded into the slider, it cannot be filled.

methods attached to the changeSlide option are firing twice in stead of once. The issue is isolated to the changeSlide function fired by the autoslide and next/prev/slide selector buttons.

Certain webkit-based browsers seem to have problems with displaying text on slides after the first slide. For example, the following URL should display two slides of text, but on Safari Version 5.1.7 (7534.57.2) and in the standard Android browser only the first slide's text is shown. Graphics on the slides would display properly.

http://devenv61-temp.aldon.com/slider-test/

This is iosSlider 0.9.4.5, but 1.0 has the same issue.

If I open the "Web Inspector" and click the checkbox of any CSS property in the file, the 2nd slide text will appear.

The text renders properly in the Chrome browsers (even on Android), and it renders properly in the nightly Webkit builds.

Hi,

I'm new to Javascript and Jquery, so please excuse me for what might be a basic question. I'm trying to add a counter to the slider. I've managed to display the total number of slides using this:

Not sure if that was the right way to go but now I'm trying to determine the current slide that I'm on. Could you point me in the right direction? Any help would be great.

Thanks.

Line 1365: clickObject.click is undefined

Error fired on mouseup/touchrelease.

Intended functionality:
Suppress any click events once slide has started.

Minimize the number of frames required to animate/shorten loops.

Add a new variable to the args array for slide direction.

Fix for line 749:

//from this:
$(this).css({
float: ‘left’
});

//to this:
$(this).css({
‘float’: ‘left’
});

It seems to break yui compressor, since float is a reserved, though unused, keyword in js.

responsiveSlideWidth should be changed to:

• responsiveSlideContainer (control the responsive width/height of the container)
• responsiveSlides (control the responsive width/height of slide elements)

This would be useful for making a portion of a slide's inner text to be highlight-able/copy/paste friendly. This option would accept a jQuery selector, those selected elements would override the slide functionality when touched, the slider would do nothing and the content would revert back to default browser behavior.

Hello there,

I just tested this on Opera Mini (both on iPhones and Android) and the touch events do not seem to work.

It works if I click on the navigator thumbnail, but even that it behaves weird.

Have you experienced this at all?

Thanks a lot
Pedro

In both gallery demos, if you advance to the next slide while the previous transition is still completing, the thumbnail will not be updated past the previous slide.

If slider has snapToChildren enabled, Slider should resume and snap to closest element.

Add an option to be able to drag the scrollbar.

Ability to toggle vertical/horizontal/both slide directions.

Ability to embed live/static google maps into slides.

Hello,

I'm trying to move the pagination buttons outside the container div, if I do that, it still works. But, it don't add the "selected" class to the current slide.

Take a look at this screenshot: http://i.imgur.com/ACb6o.gif (this is just an example...)

Is there any way to still add the class "selected" to the current slide button even if they are outside the main container?

This is the JS code that I'm using: http://pastebin.com/SdT1ft0P
This is the HTML: http://pastebin.com/wbck2ULh
And this is what I want: http://pastebin.com/WF4Csrs7 (note that the .iosSliderButtons is outside of the .slider)

Thanks in advance for any help!

When the setting desktopClickDrag is true, text input fields are unusable on Mac browsers (tested on Chrome, Safari). The fields work fine on iOS simulator and device. With desktopClickDrag:false, the fields work fine on Mac browsers too.

On Firefox 12.0 on my Linux pc the onSlideComplete callback is not call every time.

On my iPod Touchon iOS 5 is it never called.

Here is how I use it:

onSlideComplete: function(args) {
  selectPageTab(args[currentSlideObject].find('a').attr('elearningExercisePageId'));
}

It can be tested live at:

http://www.learnintouch.com/elearning/exercise/55/page/225/subscription/

Kind Regards,

Stephane

Only happens on touchscreen device (not on desktop).
Error says:
'undefined' is not an Object.

Event happens on the iosSlider plugin website.

The iPhone inspector does not show line number or anything, very difficult to debug.

When snapToSlide is true, unable to release and slide beyond 1 slide. This issue is only a problem when slides are smaller than the slider.

I am using iosSlider to slide tiles across the screen, these tiles have inner vertical scroll bars among other content. Currently when touch scrolling vertically if the finger is slightly moved right and left the whole slider shifts, in addition to vertically scrolling the tile. This is creating a large performance hit.

Is there a method I can call to temporarily suspend sliding, and enable it again with another call?

Hi Marc,

Firstly - thanks. Your scroller does just what my client needs.

Unfortunately, I have an issue. I've created a simplified example here. It uses jQuery 1.4.4, as that's the version I'm stuck with, but it happens with the same version as the samples (1.6.1).

In essence, I have an infinitely-scrolling gallery with 4 slides and next/previous buttons. The first two slides scroll normally, but the third and fourth scroll 5 slides instead of one.

I had a quick look at the code, and it seems the current slide number in changeSlide() is not in sync with the current offset of the slider. For example, at the start of the third click, the startOffset is -600px, which corresponds to childrenOffsets[2], but slide is 7.

Thanks again,

Pete

Binding events with jQuery.bind(), jQuery.click(), etc. are not disabling like inline onclick attributes or anchor links.

Frame rate considerably lower on Android devices. Tested on Samsung Galaxy SII LTE.

There are methods for slideChange, complete, etc. But something that i think was overlooked is slideStart. An event that is fired when the user begins to slide the slider. Implementing this would be a good feature and greatly helpful with my current project. Hopefully it would not cause much lag.

Hi,

I was wondering how to go about adding multiple sliders on one page. I created alternate versions of iosSlider div but that didn't seem to work.

Do you have any suggestions?

Thanks so much.

I have the last version of IosSlider and I encoutered the following issue :

When sliding the slider was too sensitive, skipping the next slide and jumping to the next after very easily (even with very light finger swipe).

I tried to troubleshoot this issue and I discovered that unsetting the "onSlideChange" option fixed this issue, but I couldn't find any relation between the "onSlideChange" and the slider sensitivity.

Make thumbnail images in Double Slider infinitely loop, and auto increment so the selected one stays in the center. Also would be nice to be able to add slides via a JSON array.

On Firefox 12.0 under Windows XP, every 10th slide or so gets stuck half way when dragging with a mouse. Doesn't seem to happen with other browsers. This is with snapToChildren enabled.

Slides are jumping around when media queries are used to manipulate the slider onResize and onOrientationChange.

Option will accept a jQuery selection of elements which will become disabled to drag events driven by the slider.

It would be nice if it would support the fade effect.

While it doesn't make as much sense for touch devices, it would make it more useful as a general-purpose slider. This could also use CSS3 for the effect.

The environment that i'm working with is heavily dynamic, and i believe that is messing with some slider functionality as things inside it are being ajax loaded and moved quite often.

I am developing a web app for ipad, and it has two sliders on it so far. One for a top set of tiles, and another for a lower set. Three tiles are shown on screen at a time simply by setting their width to 33.333etc%

When i load the page without initializing slider, the tiles form perfectly as i had them set with css. But if i load the page and initialize slider, the slider loads with width 0. Even if i set it to a pixel width instead of percent (using the standard shown on your site).

Here is a snippet of the code, cant show it all for trade secret reasons but i'll do what i can.

<div id="sliderHolder">
    <div class="sliderHolder" id="TopSliderHolder">
        <div id="tileSlider_Top" class='tileSlider_Top'>
            <div class='slider'>
                <div class='sliderTile' id='item1'>
                    <div class='tilePadding'></div>
                </div>
                <div class='sliderTile' id='item2'>
                    <div class='tilePadding'></div>
                </div>
                <div class='sliderTile' id='item3'>
                    <div class='tilePadding'></div>
                </div>
                <div class='sliderTile' id='item4'>
                    <div class='tilePadding'></div>
                </div>
            </div>
        </div>
    </div>
    <div class="sliderHolder" id="BottomSliderHolder">
        <div id="tileSlider_Bottom" class='tileSlider_Bottom'>
            <div class='slider'>
                <div class='sliderTile' id='item1'>
                    <div class='tilePadding'></div>
                </div>
                <div class='sliderTile' id='item2'>
                    <div class='tilePadding'></div>
                </div>
                <div class='sliderTile' id='item3'>
                    <div class='tilePadding'></div>
                </div>
                <div class='sliderTile' id='item4'>
                    <div class='tilePadding'>
                                        </div>
                </div>
                <div class='sliderTile' id='item5'>
                    <div class='tilePadding'></div>
                </div>
            </div>
        </div>
    </div>
</div>

the sliderholder div has its height and width set to pixel dimensions by js on window resize, and the sliders are destroyed/restarted on window resize.

The initialization code is thus:

$('#tileSlider_Top').iosSlider({
        snapToChildren: true,
        desktopClickDrag: true,
        navSlideSelector: '#tileSlider_Top .slideSelectors .item',
        onSlideComplete: topSlideComplete,
        onSliderLoaded: topSliderLoaded,
        onSlideChange: topSlideChange,
        frictionCoefficient: '0.96',
        snapFrictionCoefficient: '0.96',
        elasticPullResistance: '.6'
    });
    $('#tileSlider_Bottom').iosSlider({
        snapToChildren: true,
        desktopClickDrag: true,
        frictionCoefficient: '0.96',
        snapFrictionCoefficient: '0.96',
        elasticPullResistance: '.6'
    });

great, having trouble showing html code github? one sec man while i fix this...

On the first click/drag, if you release on the first slide, the changeSlide event is fired inappropriately.

I implemented the slider and it works quite nicely :-)

But there is a big empty gap in the html content flow under the slider.

This occurs on Firefox 12.0 on my Linux pc and on iOS 5 on my iPod Touch.

It is solved, but not on my iPod Touch, only on my pc, with the following style:

display: inline;

as in:

.elearning_exercise_page_tabs {
position: relative;
top: 0;
left: 0;
overflow: hidden;
display: inline;
}

Here is my full implementation:

Kind Regards,

Stephane

images within slides natural drag drop function overriding click/drag of slider.

When moving between last/first slides while css wihin one of the last/first slides has changed, content does not get mirrored to last/first slide.

onSlideComplete returning inconsistent data sets between goToSlide function and click+drag behavior.

When orientation is changed on android, the slider does not respond and resize properly.

Just a suggestion that will help those who rely on your plugin updates. On your website you should have 3 links instead of just one. The version with examples, a direct link to the full js file, and a direct link to the minified JS file. I am having to unzip every time just to get the js files out of the example.

Just a convenience thing :)

Thanks for all your work.

Please list on the website what is actually exposed in the args array for onSlideChange, etc. If i missed it somewhere i apologize, but i do not see any documentation. Thanks.

The args variable should include the total number of slides.

When dragging the slider in my instance, on mouseup/release slider is throwing an error. Not sure why, or if it is affecting anything, but here is the error. I see no adverse effects.

Uncaught TypeError: Cannot read property '0' of undefined ( jquery.iosslider.min.js:35)
L.init.each.b.bind.b.css.cursor ( jquery.iosslider.min.js:35)
jQuery.extend.each ( jquery-1.7.2.js:660)
jQuery.fn.jQuery.each ( jquery-1.7.2.js:271)
L.init ( jquery.iosslider.min.js:35)
jQuery.event.dispatch ( jquery-1.7.2.js:3332)
jQuery.event.add.elemData.handle.eventHandle ( jquery-1.7.2.js:2941)

Great work on the benchmark demos, really great. Would like to have the slider launch in DESTROY mode activated only by INIT and stopped by DESTROY again. Unsure how to make this happen…

Look forward to your relpy.

Best regards