I am trying to implement basic sliding functionality using jQuery, pls find the code below:
HTML:
<div class="dashboard-crousel" id="spanCarousel">
<span>My Order</span>
<span class="selected">Recommendations</span>
<span>My Profile</span>
<div id="controls">
</div>
</div>
Javascript:
<script>
var slider = {
length: parseInt($("#spanCarousel").children("span").length),
current: 1,
width: $("#spanCarousel").width(),
next: function(){
if(this.current < this.length){
this.current = this.current + 1;
this.animation();
} else {
this.current = 1;
this.animation();
}
},
animation: function(){
var target = (0 - this.width) * (this.current - 1);
this.run("#spanCarousel", target);
},
prev: function(){
if(this.current > 1){
this.current = this.current - 1;
this.animation();
} else {
this.current = this.length;
this.animation();
}
},
run: function(part, target){
$(part + " .pan").stop().animate(
{"margin-left": target},
1000
);
},
initialize: function(){
$("#controls .dashboard-crouselLeftArrow").click(function(){slider.next();});
$("#controls .dashboard-crouselRightArrow").click(function(){slider.prev();});
}
}
slider.initialize();
</script>
I just want to slide content between the arrows as shown in the image.
I want to move text left to right endless. pls help
I see two mistake in your code. But since i do not have your css i could not make you a working exemple and try out.
The function parseInt is taking two parameters, string and radix. However you are never putting the second parameter.
Secondly a semi colon is missing at the very end of your programm.
initialize: function(){
$("#controls .dashboard-crouselLeftArrow").click(function(){slider.next();});
$("#controls .dashboard-crouselRightArrow").click(function(){slider.prev();});
}};
you might use JSFiddle to debbug your future code, it is a really effective tool.
Related
Ive been attempting to create my own Javascript slider plugin, (I realise there are many out there, but i wanted to treat it as a learning exercise),
an example can be seen here: http://jsfiddle.net/6GTGU/
the problem I'm having is that the animation goes round once, and then stops, Ive tried to examine this to see what i have done wrong but i can't find any reason for it, if anyone can help me i would be very grateful.
HTML
<div id="cjwSlider">
<div style="background-color: #6495ed"></div>
<div style="background-color: #62ed43"></div>
<div style="background-color: #ed5943"></div>
</div>
JAVASCRIPT
var cjwSlider = $('#cjwSlider');
var sliderItems = cjwSlider.children('div');
$(document).ready(function () {
sliderItems.each(function( index ) {
$(this).css('z-index', index);
});
window.setInterval(function(){
var maxValue = findMaxZIndex();
var currentItem = sliderItems.filter(function() {
return $(this).css('z-index') == maxValue;
});
currentItem.addClass("hiddenDiv").delay(1000).queue(function() {
sliderItems.each(function( index ) {
$(this).css('z-index', parseInt($(this).css('z-index')) + 1);
});
currentItem.css('z-index', 0);
currentItem.removeAttr('class');
});
}, 4000);
});
function findMaxZIndex() {
var maxValue = undefined;
$(sliderItems).each(function() {
var val = $(this).css('z-index');
val = parseInt(val, 10);
if (maxValue === undefined || maxValue < val) {
maxValue = val;
}
});
return maxValue;
}
PLUGIN DEMO IN ACTION
You said you want a plugin so here you go.
It even stops on mouseenter. (I personally hate when I cannot stop a gallery by just hovering it.)
I don't understand the need of z-index at all, so you can calmly remove it all from your HTML and don't bother at all.
<div class="cjwFader" id="el1">
<div style="background: red;"> 1 </div>
<div style="background: green;"> 2 </div>
<div style="background: gold;"> 3 </div>
</div>
CSS:
(the only needed, but you can also make jQ apply the children position)
.cjwFader > div {
position: absolute;
}
And finally the plugin:
(function($){
$.fn.cjwFader = function(opts){
// Default Settings
var S = $.extend({
fade: 400,
wait: 2000,
startAt: 0
//, need more? add more.
},opts);
return $(this).each(function(){
var that = $(this),
child = $('>*',that),
nOfChildren = child.length,
sI;
function animate(){
child.eq( S.startAt = ++S.startAt % nOfChildren )
.fadeTo( S.fade,1 )
.siblings().stop().fadeTo(S.fade,0);
}
function loop(){
sI=setInterval( animate, S.wait+S.fade );
}loop();
child.hover(function(e){
return e.type==='mouseenter'? clearInterval(sI) : loop();
}).eq(S.startAt).show().siblings().hide();
});
};
})(jQuery);
Plugin usage:
$(function(){ // DOM ready
// $('#el1').cjwFader(); // Use default plugin settings
$('#el1').cjwFader({ // Let's apply some custom stuff
startAt : 1,
fade : 1000,
wait: 700
});
});
Here is the working slideshow: http://jsfiddle.net/6GTGU/7/
I've updated the HTML slightly to remove the initialization code from your JS. You may decide to revert that back
HTML
<div id="cjwSlider">
<div style="background-color: #6495ed; z-index: 0;"></div>
<div style="background-color: #62ed43; z-index: 1;"></div>
<div style="background-color: #ed5943; z-index: 2;"></div>
</div>
I had to remove a lot of JS code to nail down the problem. I think the current JS is all you may need and don't need to go back to your original one:
var cjwSlider = $('#cjwSlider');
var sliderItems = cjwSlider.children('div');
$(document).ready(function () {
window.setInterval(function () {
var maxValue = $('#cjwSlider').find('div').length - 1;
var currentItem = sliderItems.filter(function () {
return $(this).css('z-index') == maxValue;
});
currentItem.addClass("hiddenDiv").delay(1000).queue(function () {
sliderItems.each(function (index) {
$(this).css('z-index', parseInt($(this).css('z-index')) + 1);
});
currentItem.css('z-index', 0);
currentItem.removeAttr('class');
$(this).dequeue();
});
}, 4000);
});
The crux of the problem was the missing call to dequeue() at the end of the function that was queued up. The function executed fine for the first time but then stayed at the head of the queue and prevented execution of functions queued later on. This is why your animation played for one cycle but not after that.
I am trying to make build my own carousel from scratch since I cant find a plugin that does what I want. Which is having a vertical and horizontal plugin that work at the same time both ways.
Anyway I decided to give it a shot and try to build my own. But right now I am stuck at trying to understand why my "next" button doesn't disappear when it has reached the end of the carousel.
here is the code:
$(document).ready(function() {
var sliderWidth = 300; // Give the size of the window
var sliderV = $('#slide-wrap-vertical'); // Assigns the container that has all the sectiosn that will be scrolled vertically
var sliderCount = $(sliderV).children().size(); // Gets the size of the verticla slider
//test();
$('a.nav-top-prev').on('click',function () {
$('#slide-wrap-vertical > div').animate({
top: '+=' + sliderWidth
}, 500);
showHideDirection();
});
$('a.nav-top-next').on('click', function () {
$('#slide-wrap-vertical > div').animate({
top: '-=' + sliderWidth
}, 500);
showHideDirection();
});
function showHideDirection() {
$(sliderV).children().each(function(){ // Checks all the children of the vertical carousel
if ($(this).position().top == 0) { // Finds the index of the children that is currently on view
if ($(this).index() == 0) { // If its the first one can't scroll back and hides the prev button
$('a.nav-top-prev').hide();
}
else if ($(this).index() >= sliderCount) { // If its the last one can't scroll forward and hides the next button
$('a.nav-top-next').hide();
}
else {
$('a.nav-top-prev').show();
$('a.nav-top-next').show();
}
}
});
}
});
http://jsfiddle.net/Dethdoll/WkFVs/8/
because sliderCount is 1 based and index() is zero based, it is impossible for index to be equal or greater than sliderCount. You need to subtract one.
else if ($(this).index() === sliderCount-1)
You can simplify those if/else checks with toggle
if ($(this).position().top == 0) {
var index = $(this).index();
$('a.nav-top-prev').toggle(index!==0);
$('a.nav-top-next').toggle(index!==sliderCount-1);
}
I'm putting together a quick little status board that shows active and upcoming github issues.
I have them all pulled in and formatted as a simple list and found a nice jQuery plugin that cycles through each item as a sort of slideshow. However, it was requested that it show multiple issues at once to fill up the screen more.
So on each slide swap it would display, say 5 LI items at once versus just 1. And then swap to show the next 5 and so on.
HTML
...
<ul id="issue-list">
<li class="issue"></li>
...
<li class="issue"></li>
</ul>
...
<script type="text/javascript">
$(function() {
$('#issue-list').swapmyli({
swapTime: 900, // Speed of effect in animation
transitionTime: 700, // Speed of Transition of ul (height transformation)
time: 4000, // How long each slide will show
timer: 1, // Show (1) /Hide (0) the timer.
css: 0 // Apply plugin css on the list elements.
});
});
</script>
JS
(function(e) {
e.fn.swapmyli = function(t) {
function s() {
var e = i.parent().find(".timer span");
e.animate({
width: "100%"
}, r);
var n = i.find("li:first").outerHeight(true);
i.find("li:first").fadeOut(120);
i.animate({
height: n
}, t.transitionTime);
i.find("li").hide();
e.animate({
width: "0%"
}, 60);
i.find("li:first").remove().appendTo(i).fadeIn(t.swapTime)
}
var n = {
swapTime: 300,
transitionTime: 900,
time: 2e3,
timer: 1,
css: 1
};
var t = e.extend(n, t);
var r = t.time - t.swapTime;
var i = this;
i.wrap('<div class="swapmyli clearfix"></div>');
i.after('<div class="timer"><span></span></div><br class="clear" />');
e(window).load(function() {
var e = i.find("li:first").outerHeight(true);
i.height(e);
i.find("li").hide();
s()
});
if (t.timer == 0) {
i.parent().find(".timer").hide()
}
if (t.css == 0) {
i.parent().addClass("nocss")
}
setInterval(s, t.time)
}
})(jQuery)
I'm not sure if outerHeight() will function correctly with slice, but you may try changing these lines:
var n = i.find("li:first").outerHeight(true);
i.find("li:first").fadeOut(120);
To the following:
var n = i.find("li").slice(0, 4).outerHeight(true);
i.find("li").slice(0, 4).fadeOut(120);
That's sort of a quick answer, but hopefully you're catching my drift. Probably need to play around with it a little bit :)
I want to make a menu like the one in this image:
On the left side there's the complete menu (where each button is a div), but the buttons are not displayed when I open the page. I want to display the buttons by holding and sliding (possibly with a touchslide?), but this must work on mobile devices. Also, it doesn't matter if it doesn't work on a PC.
I don't know if this is possible by using jQuery mobile, Hammer, or another library. I already did a menu which displays all the buttons with a single click on the first button, but the designer is not happy with just that. My code is something like this:
<div id="main_button">Button</div>
<nav id="main_menu">
<div id="b1">Yellow</div>
<div id="b2">Red</div>
<div id="b3">Blue</div>
<div id="b4">Green</div>
<div id="b5">Orange</div>
<div id="b6">Purple</div>
</nav>
Do you know if this is possible? If so, what can I use to accomplish this task?
EDIT 1
More possible partial solutions:
JQuery Mobile : Pull to refresh list view
https://github.com/watusi/jquery-mobile-iscrollview
EDIT 0
Similar question: Does anyone know of a pulldown menu plugin in javascript?
And the solution: http://jsfiddle.net/JXeWA/46/
I think it's possible but you might have to customize the code to your specifications. Here's one example I found: http://jsfiddle.net/vxvgH/3/light/
This example uses a similar effect to refresh the page. That might helpful in customizing your code.
Below you'll find the JavaScript from the first example. It's messy but it's somewhere to start.
var startPosition = 0;
var pagePosition = 0;
var scrollY = 0;
var scrollPrevented = false;
$(document).on('vmousedown', '.dragme', function(event) {
var startPosition = pagePosition;
$(document).on('vmousemove', function(event2) {
scrollY = event2.pageY;
pagePosition = startPosition + scrollY - event.pageY;
if (pagePosition > $("#menu").height()) {
pagePosition = $("#menu").height();
} else if (pagePosition < 0) {
pagePosition = 0;
}
if (scrollPrevented == false) {
scrollPrevented = true;
$(document).on('touchmove', function(ev) {
ev.preventDefault();
});
}
$("#menu").css({
'z-index': '-1'
});
menuSlide();
$("#menu").show();
});
});
$(document).on('vmouseup', function() {
if (scrollPrevented == true) {
$('body').unbind('touchmove');
scrollPrevented = false;
}
$(document).off('vmousemove', stopScroll());
});
function menuSlide() {
var newHeight = $(window).height() - pagePosition;
$("#page1").css({
top: pagePosition,
height: newHeight
}).page();
$("#page2").css({
top: pagePosition,
height: newHeight
}).page();
}
function stopScroll() {
if (pagePosition > $("#menu").height() / 2) {
pagePosition = $("#menu").height();
$("#menu").show();
$("#menu").css({
'z-index': '1500'
});
} else {
pagePosition = 0;
$("#menu").hide();
$("#menu").css({
'z-index': '-1'
});
}
menuSlide();
}
$("#menu").css({
position: "absolute",
width: $(window).width(),
height: $(window).height * .3,
left: 0,
'z-index': '-1',
'min-height': 'initial'
}).page();
$(document).on("click", ".page1", function(){
$("#menu").css({
'z-index': '-1'
});
pagePosition = 0;
menuSlide();
$("#menu").hide();
$.mobile.changePage("#page1", {transition:"slide",
reverse: true});
});
$(document).on("click", ".page2", function(){
pagePosition = 0;
menuSlide();
$("#menu").hide();
$.mobile.changePage("#page2", {transition:"slide"});
});
You can view my custom slider here: http://www.awaismuzaffar.com/examples/index.html
And below is the JQuery code for it:
$(document).ready(function() {
// Slider Function
var slideWidth = $('div.slide').width();
// Set the left position of each div element
$('div.slide').each(function(index){
$(this).css('left', index * slideWidth ); // Multiply each div element by the index(0, 1 etc) so each div is placed inline
});
// Next step is to animate the div elements
var clickCount = 1;
var slideCount = $('div.slide').length;
// Set the previous button to hide when loading with the first slide
if(clickCount == 1){
$('a#previous-button').css('background-color', '#cccccc');
}
$('a#next-button').click(function() {
if(clickCount < slideCount) {
$('div.slide').animate({"left":"-=" + slideWidth}, 'slow');
$('a#previous-button').css('background-color', '#ffffff');
clickCount++;
}
if(clickCount == slideCount) {
$('a#next-button').css('background-color', '#cccccc'); // Hide or grey out button
}
});
$('a#previous-button').click(function() {
if(clickCount > 1){
$('div.slide').animate({"left":"+=" + slideWidth}, 'slow');
$('a#next-button').css('background-color', '#ffffff');
clickCount--;
}
if(clickCount == 1){
$('a#previous-button').css('background-color', '#cccccc'); // Hide or grey out button
}
});
});
I am trying to modify this slider to allow continous scrolling.
I am not sure exactly how to achieve this, I am assuming I need to use append, but I am not sure how to make use of it.
Thanks.
You're doing things a little manually, I'm thinking someone else might've solved the problem. But in any case, in your click next button, you'd need to load in additional content when you hit the end. So if I were you, I'd do something like this:
$('a#next-button').click(function() {
...
if(clickCount == slideCount) {
$('a#next-button').css('background-color', '#cccccc');
$.get(moreContentUrl, objectRepresentingCurrentScrollPosition, loadContent);
spinner.show(); // show some kind of spinner here (you can also hook up a default spinner on all ajax events with a global ajax handler
}
});
function loadContent(response) {
// append your content (your controller should return just the <div class="slide" /> elements, and give them a class="slide newSlide" so you can distinguish them below
// you can also do client side templating here. would be more efficient, then just return the items as objects instead of html
$('#slide-container').append(response.itemsHtml);
// slide all new divs right
$('div.newSlide').animate({"left":"+=" + slideWidth}, 'fast');
$('div.newSlide').removeClass('newSlide');
// update variables and un-grey the next button
$('a#previous-button').css('background-color', '#ffffff');
slideCount += response.itemCount;
// hide the spinner shown when starting the load
spinner.hide();
}
Give it a shot, hope it works. Now, to clean up that code a little bit, I'd suggest using css classes instead of inline background colors, etc.
Here's a solution (somewhat like Shaz's), just less code :):
$(document).ready(function(){
$('#previous-button').click(function(){slidePanel(-1)});
$('#next-button').click(function(){slidePanel(1)});
var n = 0;
var animating = false;
$('#slide-'+n).css('display', 'block');
function slidePanel(delta)
{
if(!animating)
{
animating = true;
var d = (delta > 0 ? $('#slide-'+n).width()*-1 : $('#slide-'+n).width());
$('#slide-'+n).animate({
left: "+="+d
}, 'slow', function() { $(this).css('display', 'none'); animating = false; });
n = (n + delta) % $('div.slide').length;
n = n < 0 ? $('div.slide').length + n : n;
$('#slide-'+n).css('left', $('#slide-container').offset().left +(d*-1));
$('#slide-'+n).css('display', 'block');
$('#slide-'+n).animate({
left: 0
}, 'slow');
}
}
});
Check out the sample here.
(I know there's a way to figure out the "current slide" with a one liner equation, but I think I'm brain dead atm :P)
(Edited to account for repeatedly clicking)
Try something like this: http://fiddle.jshell.net/Shaz/dsBkf/