• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1298
  • Last Modified:

Help with Jquery scroll & Jquery fade effects

I am a newbie to Jquery & Javascript and need some help. I have two parts that need help. The first part is Jquery scroll. I found a Jquery scroll effect on the Jquery Tools site (http://flowplayer.org/tools/demos/scrollable/index.html). I was able to get this to work as a standalone page with no problem, but when I add to the final page it is not working as it should. I have a 3 divs and 3 images in each div. Then there are left arrow and right arrow, clicking on these it is supposed to move the div's left or right displaying the next divs with the next set of three images. The issue that I am having is that the images are progressing left or right, but only one image at a time and never display the the second or third set of images. Here is what I would like the finished effect to work like (http://www.pdesignz.com/scroll/scroll.html). Here is the working copy where you can see the effect is only scrolling one image at a time (http://www.pdesignz.com/scroll/default.asp).

The second part of my questions is I have an effect using Jquery Cycle (http://jquery.malsup.com/cycle/) effect works great, only issue I would like is to be able to stop at a certain point or stop after all images have cycled through rather than continually cycling through or maybe cycling in a random order (http://www.pdesignz.com/scroll/default.asp). If possible to have this in a single script or function would be great, if not no big deal. Just would like these to work together...

Any help is much appreciated.
0
Pdesignz
Asked:
Pdesignz
  • 16
  • 16
1 Solution
 
Dushyant SharmaCommented:
for the first point, i think you are missing the below lines in the css. this is causing the images to go down instead of being at left.

ul { margin:0px; padding:0px 0px 0px 50px; }
li {list-style:none; margin-right: 50px; display:inline;}
0
 
Dushyant SharmaCommented:
for the second one you can do as below
$(this).cycle('stop');
or
$(this).cycle('pause');


you can refer below

http://stackoverflow.com/questions/1225467/jquery-cycle-return-to-the-first-slide
0
 
PdesignzAuthor Commented:
Great that helps, but adding that screws up the navigation that is also using ul li tags.
/*Style from scroll*/


<style>
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 900px;
	height:282px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.*/

.items div {
	float:left;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse { background:url(images/hori_large02.png) no-repeat; display:block; width:30px; height:30px; float:left; margin:125px 10px 40px; cursor:pointer; font-size:1px; }

/* right */
a.right 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ background:url(images/vert_large.png) no-repeat; float: none; margin: 10px 50px; }

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	
ul { margin:0px; padding:0px 0px 0px 50px; }
li {list-style:none; margin-right: 50px; display:inline;}
</style>


/*CSS file*/


body { font: 12px Arial, Helvetica, sans-serif; color: #FFF; background: #333; }
#galleries { margin: 0px auto; width: 800px; }

#container { width: 955px; margin: 0px auto; border: 1px solid #FFF; background: #000; padding: 25px; }
#header-content { width: 620px; float: right; display: inline; }
#header-content #starchive { margin-left: 50px; }
#header-content #nav { background: url(images/nav_bg.jpg) no-repeat; width: 617px; height: 32px; margin-top: 50px; }
#header-content ul { padding: 6px 0px 0px 15px; margin: 0px; }
#header-content li { list-style: none; display: inline; padding-right: 15px; padding-left: 15px; text-transform: uppercase; font: bold 16px Arial, Helvetica, sans-serif; }


#header-content h1 { font-size: 14px; text-transform: uppercase; margin-left: 50px; }


#left { width: 450px; float: left; margin-right: 25px; }
#right { display: inline; float: left; width: 450px; }
#rotate { margin: 0px auto 10px; height: 373px; width: 867px; }
#header { margin-bottom: 25px; }

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
PdesignzAuthor Commented:
ddsh7,

Where would I add this in the function, I am newbie to Jquery.

Thanks
0
 
Dushyant SharmaCommented:
for the css problem you can add class to the ul and write the style on that class for example as below

<ul class="listing">
<li>....</li>
</ul>

.listing {margin:0px; padding:0px 0px 0px 50px;}
ul.listing li {list-style:none; margin-right: 50px; display:inline;}
0
 
Dushyant SharmaCommented:
to stop the plugin you must know when to call it.

say at buttons call you can do it like

$('#buttonid').click(function() {
  $("#rotate").cycle('stop');
});
0
 
PdesignzAuthor Commented:
can we do without the click or button, if possible to cycle through and then just automatically stop

Thanks
0
 
PdesignzAuthor Commented:
on the arrows is possible to display both buttons no matter what div you are on, rather than hiding one and then the depending what step you are on, am trying to get to line up like in standalone example thanks
0
 
Dushyant SharmaCommented:
try
autostop:1,

in the options


0
 
Dushyant SharmaCommented:
for making the buttons in line change the style and reduce the width from 900px to 875px in .scrollable class

for autostop use the below
 
$(document).ready(function () {
            $("#rotate").cycle({
                fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                autostop:1
            });
        });
0
 
PdesignzAuthor Commented:
works great! Seems left arrow jumps much higer than right arrow, can you help in assting to get to line up, thanks
0
 
Dushyant SharmaCommented:
looking inline to me. have you updated that?
0
 
PdesignzAuthor Commented:
I just cleared cache, tried in Chrome and Firefox the left arrow is displaying high left and right arrow is displaying in the middle right, so need to lower left arrow
0
 
Dushyant SharmaCommented:
i still see them inline. by the way you can use firebug inspect element to see what is causing this at your local machine.
0
 
PdesignzAuthor Commented:
strange here is a screenshot of the arrows, same on my local machine as well as web link that I loaded earlier as well
arrow-display.jpg
0
 
Dushyant SharmaCommented:
the url below still show it inline

http://www.pdesignz.com/scroll/default.asp

and have you checked it using firebug?
0
 
PdesignzAuthor Commented:
This is the link I took the screenshot from, am trying firebug, but sure what am looking for, they look same as far as top margin and other aspects, but then left is higher than right
0
 
Dushyant SharmaCommented:
strange!! i can see the url perfectly fine. the top margin for both of the buttons are set to 125px;

What is the effect if you try increasing or decreasing the margin.
0
 
PdesignzAuthor Commented:
just goes up and down, I think I am getting close, I created a new class adjusted the margin so that the left is lower than right, so when viewed match up pretty close
0
 
Dushyant SharmaCommented:
oh dear... now i see the left one way below the right one...
0
 
PdesignzAuthor Commented:
hmm, what browser are you using? or is there a jquery scroll built into the regular jquery library that we could use to do same thing
0
 
Dushyant SharmaCommented:
i'm using FF 3.0.18. This problem is purely related to css and html. There is nothing related to jquery here. i believe you should put the two buttons and the images inside a container.

or may be put a break just below the "featured collections" image. some class with clear both of something.
0
 
PdesignzAuthor Commented:
ah, I am on FF 3.6.10
0
 
Dushyant SharmaCommented:
try in IE
0
 
PdesignzAuthor Commented:
IE 8 ok, but Ie7 all screwy, I see arrow much lower and cycle not working
0
 
Dushyant SharmaCommented:
i think you need to do some re-work on html and css.

it is working fine in ie7 for me.
0
 
PdesignzAuthor Commented:
I had missed your last posting for the autostop on the cycle function, now working fine
0
 
Dushyant SharmaCommented:
cool
0
 
PdesignzAuthor Commented:
I put the entire the scroll within a div, can you see if they are lining up on your side, seem to be fine on mine
0
 
Dushyant SharmaCommented:
yup... both in ff and ie
0
 
PdesignzAuthor Commented:
Cool, I really appreciate your help... Much appreciated
0
 
PdesignzAuthor Commented:
Great work, very patient and helpful. Awesome work!!!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 16
  • 16
Tackle projects and never again get stuck behind a technical roadblock.
Join Now