jQuery Cycle applied to div to scroll its contents in a loop - javascript

I have elements like this
<div id="screen">
<div class="post">Post1......etc</div>
<div class="post">Post2......etc</div>
<div class="post">Post3......etc</div>
<div class="post">Post4......etc</div>
<div class="post">Post5......etc</div>
<div class="post">Post6......etc</div>
<div class="post">Post7......etc</div>
<div class="post">Post8......etc</div>
<div class="post">Post9......etc</div>
<div class="post">Post10.....etc</div>
</div>
But in screen box, size is limited to show only 5 elements. So at first Post1 to Post5 will be displayed. Rest is overflow hidden. At a interval of 2 seconds next element should show by scrolling up. That is after 2 seconds this contents of screen will scroll up 1 item. Now it will show Post2 to Post6. And this continues every 2 seconds like a loop. After Post10, Post1 should show up then Post2 and so.
I donot know how to do this. I read documentation of jQuery cycle: http://jquery.malsup.com/cycle/
But i didnot how to do this. This effect is like a news scroller.
Please help

Cycle is the wrong plugin to use for this as it only display one image at the time, it doesn't do sliding effects which is what you seem to want. Try jCarousel it's quite popular and easy to use (many examples and good doc)
http://sorgalla.com/projects/jcarousel/
In general rules if there isn't a demo close to what you want to achieve there is big chance that the plugin won't work as expected.

jCarousel is a nifty plugin for displaying tickers! But you'll need a bit of skinning to get it displayed as per your requirements.
To use jCarousel to get your scroller running, you'll have to make a little modification on your current HTML structure.
I have replaced the DIV type structure with an unordered list.
<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
<li>Post1......etc</li>
<li>Post2......etc</li>
<li>Post3......etc</li>
<li>Post4......etc</li>
<li>Post5......etc</li>
<li>Post6......etc</li>
<li>Post7......etc</li>
<li>Post8......etc</li>
<li>Post9......etc</li>
</ul>
To run this plugin at its very basic, you'll need to add the jCarousel script and a CSS theme to your page (I've used jCarousel's Tango theme).
Here's how you use the plugin:
$(document).ready(function(){
$('#mycarousel').jcarousel({
vertical: true, //Display a vertical carousel
auto: 2, //Scroll up automatically after every 2 seconds
scroll: 1, //No. of items to scroll up
visible: 5, //No. of visible items
wrap: 'last' //Go back to the 1st items after you've scrolled down to the last item
});
});
You will need to modify the CSS for the plugin to display it as per your need though.
Here's a fiddle I created using jCarousel: http://jsfiddle.net/kayen/VFdL8/

Related

jQuery UI Splitter/Resizable for unlimited amount of columns

Using jQueryUI Splitter or Resizable functions I want to create a layout that allows an unlimited amount of columns to be added and all columns need to be resizable.
So it is like this fiddle: https://jsfiddle.net/f3gLh3mw/
But in this fiddle the HTML contains out of nested sets instead of inline. Which limits the possibilities as with the above fiddle you can only have equal widths for 2,4,8,16,32 etc columns. Everything in between shows up crooked as you can see in the Fiddle.
When researching this I came on this SO question: jQuery UI and Splitter
If you look at the top answer then it shows a structure like:
<div class="wrap">
<div class="resizable resizable1"></div>
<div class="resizable resizable2"></div>
</div>
Full fiddle: http://jsfiddle.net/8qzTJ/86/
Which is the structure I want but the Javascript is hardcoded for only 2 resizable items.
So here is the question:
How to modify the last fiddle so it works with any amount of .resizable divs.
Or does anyone know of a plugin that can do this.
Thanks everyone for helping!
So far I found this plugin: http://www.bacubacu.com/colresizable/
Which does exactly what is says and is very close to the functionality that I want. Only it is in a table layout and not a div layout.
Working fiddle: http://jsfiddle.net/2h4kLzgj/6/
It is activated by this:
$("#sample2").colResizable({
fixed:true,
liveDrag:true,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging" });

Swiper JQuery if statement involving .hasClass and .toggleClass

Without writing a novel of a backstory, using Swiper, I'm trying to call .toggleClass on an HTML element, whenever one of my swiper slides has the class of swiper-slide-active. This is so that I can have text appear on single slides, instead of all slides at the same time.
Here is a visual of what I'm describing: studioyonis.com — if you click the caption at the bottom so that the project information comes up, then drag RTL, you'll notice that the project information for the second project was also visible for a short time. It disappears (correctly) because of some other code I have, but l would like it to not appear at all (until I click the caption on that slide).
I've been trying this if statement to single out the active slide and help set up a subsequent click function, but its not working and I can't figure it out for the life of me. Can JQuery, for some reason, not see the swiper-slide-active when it happens?
if ($('.swiper-slide').hasClass('swiper-slide-active')) {
$('.overlay-caption', this).toggleClass('overlay-caption-active');
$('.overlay-caption-box', this).toggleClass('overlay-caption-box-active');
};
Here is a sample of my HTML structure. There are ~7 different slides like this, all with overlay-caption and overlay-caption-box classes.
<div class=“swiper-slide”>
<div class=“caption-box information-00”>
<a class=“caption links”>
Text Text Text Text Text Text
</a>
<div class=“overlay-caption-box”>
</div>
</div>
<div class=“overlay-caption”>
<div class=“project-information”>
Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</div>
</div>
Hopefully this makes sense! Been a long 10-12 hours of work on this site today, only to realize this problem near the end of the night.
Cheers!
Instead of changing the display, I just locked swiping to different slides while the project information is visible. That way the user doesn't know all of the captions are open because s/he can't scroll to them. This forces the user to slow down and look at each project, instead of quickly swiping through. Since its a portfolio site, maybe thats a good thing in this case.

slimScroll hidden on page load

I'm developing an application that uses the slimScroll jQuery plugin (http://rocha.la/jQuery-slimScroll) to essentially add a nice overflow to div containers.
Everything works apart from a small, almost insignificant annoyance: when the page is loaded for the first time, the plugin is initiated on the div and automatically displays the scrollbar. After hovering in then out of the container, the scrollbar is hidden.
Is there any way to make the scrollbar start in a hidden state on page load?
The developer was asked this a number of times but I can't find a solution on the website.
Any help would be much appreciated.
This code work for multiple elements that have same classes.
JS:
$(document).ready(function() {
$('.inner').slimScroll({
//your options
opacity: 0
}).mouseover(function() {
$(this).next('.slimScrollBar').css('opacity', 0.4);
});
});
for such HTML code like this.
<div id='box'>
<div class='inner'>
some paragraph
</div>
</div>
The result show here: https://jsfiddle.net/ATR616/4Lnr3fju/2/

How to properly initialize the jQuery Tools' Scrollable component for a single item?

I have created a web page which uses the jQuery Tools' Scrollable component, and the page is based on the minimal setup demo. As in this demo my page also uses scrollable items with room for five thumbnail images, but when my page loads for the first time I want only a single scrollable item containing only three thumbnail images, with the remaining two image slots empty. I assumed that I could simply replace the three scrollable item divs from the demo with a single scrollable item div and everything would look fine, however when I do that I end up seeing inoperable left/previous and right/next icons, even though there are no previous or next scrollable items to scroll to.
I have an example of what I'm trying to do on the jsfiddle site here. It's essentially the above referenced demo with the non-applicable scrollable item divs and child imgs commented out.
How can I initialize the scrollable such that I only have a single scrollable item on the page without having the non-applicable left/previous and right/next icons appear?
Thanks in advance for your help, suggestions, etc.
best I can come up with is
if($(".scrollable .items div").length < 2) $("a.browse").hide();
after the initialization.
I wanted the browse buttons to be hidden by default, then only display them if needed.
In the css, default the a.browse to visibility: hidden
Then in the initialization:
$(".scrollable").scrollable().each( function() {
var scroller = $(this).data("scrollable");
scroller.getNaviButtons().css('visibility', 'visible');
if (scroller.getSize() <= 1) {
scroller.getNaviButtons().addClass('disabled');
}
});
This seems a bit hacky, but avoids temporarily displaying the browse buttons if they are not going to be seen.

IE8 jQuery text changes on z-index divs

I'm using the jQuery Cycle plugin to cycle through some images on a webpage.
Each image also has various meta-data (title, description) that is also displayed on the page. Whenever the image changes, the title and description text also change to the title and desc for that image.
<div id='slides'>
<a href="http://whatever.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide1.jpg"/>
</a>
<a href="http://somewhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide2.jpg"/>
</a>
<a href="http://nowhere.com">
<img src="http://localhost/wordpress/wp-content/uploads/2010/09/slide3.jpg"/>
</a>
</div>
<div id='slideshow_text'>
<div id='ss_title'>The title goes here</div>
<div id='ss_desc'>The description goes here</div>
</div>
The javascript is pretty simple:
jQuery(document).ready(function(){
jQuery('#slides').cycle({
fx: 'fade',
speed: 1000,
timeout: 10000,
after: alterSlideText,
});
});
The alterSlideText javascript function is very simple. Basically its just running this:
jQuery('div#ss_title').html(slides_array[slideNum]['title']);
jQuery('div#ss_desc').html(slides_array[slideNum]['desc']);
The slides_array is simply an array of the title and description for each slide. So depending on what slide is currently being shown, it picks the appropriate title and description to put in the divs.
So overall the setup is very simple and straightforward. Image changes. Then the text changes.
Now the problem - This all works perfectly in Moz and Webkit. But in IE, the text div's will not change UNTIL I move my mouse over the slides div or slideshow_text div. The text will just not change at all if I just let it sit there. Once I move my mouse into that div, boom it changes to the appropriate text.
One maybe important note, the slideshow_text div has a very high z-index value (1000) and it actually floating over part of the image. I have just confirmed that text in other div's with normal z-index values changes just fine. It's only these divs with the high z-index value that aren't changing until I mouse over it.
Does anyone have any clue as to why this is and how to fix it?
I fixed this by adding the following to the end of the alterSlideText function:
// Force IE to refresh itself
jQuery('div#slides').blur();
jQuery('div#slides').focus();
Great job IE developers. Go find a different job.

Categories