Solved

Help with Jquery scroll & Jquery fade effects

Posted on 2010-09-23
32
1,277 Views
Last Modified: 2012-05-10
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
Comment
Question by:Pdesignz
  • 16
  • 16
32 Comments
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751398
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
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751427
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
 

Author Comment

by:Pdesignz
ID: 33751432
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
 

Author Comment

by:Pdesignz
ID: 33751436
ddsh7,

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

Thanks
0
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751468
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
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751492
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
 

Author Comment

by:Pdesignz
ID: 33751499
can we do without the click or button, if possible to cycle through and then just automatically stop

Thanks
0
 

Author Comment

by:Pdesignz
ID: 33751516
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
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751524
try
autostop:1,

in the options


0
 
LVL 14

Accepted Solution

by:
ddsh79 earned 500 total points
ID: 33751563
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
 

Author Comment

by:Pdesignz
ID: 33751580
works great! Seems left arrow jumps much higer than right arrow, can you help in assting to get to line up, thanks
0
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751594
looking inline to me. have you updated that?
0
 

Author Comment

by:Pdesignz
ID: 33751619
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
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751714
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
 

Author Comment

by:Pdesignz
ID: 33751734
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
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751739
the url below still show it inline

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

and have you checked it using firebug?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:Pdesignz
ID: 33751781
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
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751816
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
 

Author Comment

by:Pdesignz
ID: 33751875
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
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751901
oh dear... now i see the left one way below the right one...
0
 

Author Comment

by:Pdesignz
ID: 33751918
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
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751957
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
 

Author Comment

by:Pdesignz
ID: 33751968
ah, I am on FF 3.6.10
0
 
LVL 14

Expert Comment

by:ddsh79
ID: 33751972
try in IE
0
 

Author Comment

by:Pdesignz
ID: 33751983
IE 8 ok, but Ie7 all screwy, I see arrow much lower and cycle not working
0
 
LVL 14

Expert Comment

by:ddsh79
ID: 33752019
i think you need to do some re-work on html and css.

it is working fine in ie7 for me.
0
 

Author Comment

by:Pdesignz
ID: 33752022
I had missed your last posting for the autostop on the cycle function, now working fine
0
 
LVL 14

Expert Comment

by:ddsh79
ID: 33752025
cool
0
 

Author Comment

by:Pdesignz
ID: 33752039
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
 
LVL 14

Expert Comment

by:ddsh79
ID: 33752051
yup... both in ff and ie
0
 

Author Comment

by:Pdesignz
ID: 33752060
Cool, I really appreciate your help... Much appreciated
0
 

Author Closing Comment

by:Pdesignz
ID: 33752068
Great work, very patient and helpful. Awesome work!!!
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now