I'm using EasySlider, but unlike any of the examples of this plugin that I've found, I show multiple elements at any one time and the width is 100%. The separate images make up a full, long consecutive image, which is Photoshopped so even the borderline between first and last looks natural. It's configured to be a continuous slide automatically.
In the plugin there is this code:
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
My issue is that only the first element is cloned after the last one, so upon the second rotation of this slider, only the first element is shown, until it gets to the far left, then the other images appear to "pop" in. (similar: [EXAMPLE] if you imagine and all images to the right of the fairground not appearing until the fairground gets to the far left).
Is there any better way to manage this cloning of elements so that ALL the images are cloned? or perhaps someone can think of a better way? I'm new to JQuery
NOTE: I'm trying to create an operation whereby as an element leaves the screen on the left, it is placed back onto the right. Is there a way to ultimately achieve this?
I think you may want to consider a different plugin.
If you change the plugin, updating will require reapplying your patches.
I'd recommend
http://www.gmarwaha.com/jquery/jcarousellite/
or
http://sorgalla.com/jcarousel/
These both support what you are talking about.
I agree with troynt, in this case it would be better to use something that meets your requirements.
I just made a simple "plugin" what only does, what you need, maybe it's useful to you.
http://jsfiddle.net/doktormolle/4c5tt/
You can setup delay and duration and choose to pause on hover.
Given you have a list of items in your scroller like this:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
And assuming that every time you advance the scroller, the first-most li moves off screen, you can continuously pluck the first li off the front of the list and append it back to the end on each click of a "next" button or scroll event. If you're using jQuery >= 1.4, you can do this by using the detach() method, which will remove the element from the DOM but keep all its associated data so you can easily reattach it later:
$('ul li:first').detach().appendTo('ul');
Dont know, if I unterstand it the right way, you may try this:
//at first run add a class "init" to the inital li-elements,
//so that later only them will be cloned
if(!$('ul li.init',obj).length)$('ul li',obj).addClass('init');
//prepend clones of all li-elements with init-class and remove their init-class
$("ul", obj).prepend($("ul li.init", obj).clone().removeClass('init').css({}));
Related
I have been working with this script and its mind boggling as it looks as though it should work correctly, however it is not. So I turn to you all for an extra set of eyes on what I am missing.
Situation: Basically, what I am trying to do is on click detach a div, then when another radio button is selected, append the div back to its position.
I have included a JSFiddle so you can see that I may not be entirely off track : http://jsfiddle.net/heykate/pusk6ezx/
On load, the user is presented with two options, Support or Inflatable with the default size selected on the support size with the other models sizes hidden. Which is fine. I know ultimately I want to change that first line of code from hide() to detach().
Once I go to click on the second style option, it shows the second models widths like it is supposed to, however if I was to switch back to the first style option. The div I originally detached, is still hidden and will not .append() within my code.
Here is what my script looks like:
$(document).ready(function(){
$('#5e8a1520d82ed2834919fda63f4a3f84').hide();
$('input[type="radio"]').change(function(){
if($(this).attr("value")=="489"){
$( "#b6304c97422f08727702021e2c6c7cda" ).append( ".rightCol" );
$("#5e8a1520d82ed2834919fda63f4a3f84").detach();
}
if($(this).attr("value")=="488"){
$("#b6304c97422f08727702021e2c6c7cda").detach();
$("#5e8a1520d82ed2834919fda63f4a3f84").show();
}
});
});
Please let me know what I am missing. Basically the reason I am doing this to begin with is
To make it less confusing on the front end and
because the defaults are set (for both sizes) they get mashed up in the product order info, so if I could clear the other widths checked radio button or detach and prevent it from being seen, I think it would work out just fine.
.detach REMOVES the element from the DOM. Since it's no longer in the DOM, when you try to .show() it later, it's no longer in the dom, and therefore not findable/usable. That's why .detach() returns the node you've removed, in case you want to re-use it:
foo = $('#blahblah').detach(); // 'foo' now contains the detached now
$('#otherplace').attach(foo); // reinsert the foo element we detached.
//OR
$('#otherplace').append(foo);
I have a slider and I've organized it into a <ul> with the <li>s as the individual items to cycle through. Only the second <li> is visible, and if you scroll left, it takes the last <li> and removes it, puts it on the front, and vice versa if you scroll right.
Here's the Code Pen: http://codepen.io/anon/pen/kGBcr
The slider is on the right side, under "More Influencers." The problem is when I click on the 'follow' link, it changes the CSS and text like I want only until it gets to a <li> that has been removed and placed on the other end. It doesn't prevent the default link, and just reloads the page.
Thanks for any help!
The functions that rotate the slider are on lines 120 and 135. The function that changes the text and CSS background color is on line 78.
Whenever you remove an element with remove(), it loses its bindings, and you need to re-bind event listeners.
However, if you use appendTo() instead to move it, the event listeners will stick around.
Another alternative is using the detach() function:
var objectWithEvents = $('#old').detach();
$('#new').append(objectWithEvents);
Your situation is even worse than just removing, since you're using:
html = $('element').html();
newHtml = someEl.append('<li>'+html+'</li>');
Around line 127. This makes it even worse because not only you're deleting the element, but taking its html content making it even more difficult to keep event listeners associated with it.
Ok, this may have been asked dozens of times over. But I'm not exactly sure what technique or term I would have to search for in order to find out more information on this.
What I have is an Unordered list of Elements. Each one acting as a screen on a project I am working on. Each element is the size of the browser window, so its more like a power point presentation then anything if I were to describe it in any sense of the logic I have here. So what I am trying to do is find out when any particular slide is active in the view. One I have a few images I would like to load only when the view is active. But what I am really looking for is to highlight the navigation according to the slide I am on. The navigation is a fixed element so its always on the screen while everything else just floats on in, in a matter of speaking. Another reason I need this is, the navigation doesn't come into effect until the second slide. So I need a way to trigger the navigation into displaying itself only when every slide other than the first one is in view, and I will remove it when the first slide is in the view.
Hopefully I made some sense on this, anyone have any idea's?
try something like adding a class to the element in view when it enters view, removing all other instances of the same class when you put it in view.
something like
$('.active').removeClass('e_active');
$(this).addClass('e_active');
would enable you to find the current active element. alternatively if you are using element id's to find the element, you could do
$('#element').addClass('e_active')
where '#element' is the active element
if you are clicking elements to get the ID, you could use something like this:
HTML:
<ul class="slides">
<li id="elem1" class="e_active">content1</li>
<li id="elem2">content2</li>
<li id="elem3">content3</li>
<li id="elem4">content4</li>
</ul>
<ul class="nav">
<li data-link="elem1">Link1</li>
<li data-link="elem2">Link2</li>
<li data-link="elem3">Link3</li>
<li data-link="elem4">Link4</li>
</ul>
then with the script you could do something like this:
$('li', '.nav').click(function(){
elem = $(this).data('link');
$('.e_active').removeClass('e_active');
$('#'+elem, '.slides').addClass('e_active');
})
which would enable you to simply use .e_active in your stylesheet and any jquery code to alter the active element.
Of course, if you are doing it on scroll or keypress, the method is the same, you just need to attach the function to the relavent event handler.
also, with your 'navigation' issue, you just need to use $('.nav').hide() when the element id for the first slide also has the class e_active and $('.nav').show() it when it doesn't, adding and removing a class like nav_hidden from the nav element so it doesn't repeatedly show it.
I've got the following problem:
I have a set of LI elements that have to go from one state to another (two separate css classes) with a smooth transition. To do this, I'm using JQueryUI's Effect API (switchClass)
for every LI element, I've hooked two JQuery listeners: mouseover and mouseout, which change the state correspondingly. Clear enough. Now, I'm not of a JQuery expert, so I must be missing something pretty standard, but every time when I move the mouse out of the LI element BEFORE the transition has finished, the transition just kinda hangs midway, and the LI elem becomes irresponsive to further listening.
Please, help.
You can use .stop([clear queue],[jump to end]) to end the animation before the next one is called. Substitute true/false based on if you want to do that in your stop statement. Add it before the call, ie $('element').stop(true,true).animate({....
http://api.jquery.com/stop/
I have this scenario: Using an ajax query I fetch some data items and push them into a ul element as an li element. I use $("ulele").append(new_li_item). I wrote my own custom scroll for this ul element using the following whenever an event is detected:
$("ulele").animate({scrollTop: '+=' + 200}, 'slow');
The problem is when I fire that event and the list scrolls due to the animate function above, I want to keep it stable for at least a few seconds. When it scrolls down, elements are still being pushed so the list keeps scrolling no matter what. I am using the following way to add the li elements (which already have a display:none attribute):
$("#liele").delay(6000 * i).show("slow")
Is there a way I can pause this from happening without really stopping the activity of pushing elements into the ul list?
Maybe try .delay()?
http://api.jquery.com/delay/
Something like this:
$("ulele").animate({scrollTop: '+=' + 200}, 'slow').delay(1000);
Try putting the animation in a function and before adding an element to the ulele, remove the animation, and add it again after you get the data is one way. That is one way to do it, but from the looks of it, it sounds operational intensive.
The following should work better - When you create the new li element, start it out with display:none and after it is fetched using the AJAX call, update the display attribute to inline or how ever you need it. That should do better than the above one.