PDA

View Full Version : Step Carousel Navigation buttons issue in Firefox



adnor
11-17-2008, 03:18 PM
1) Script Title: Step Carousel Viewer v1.6.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

3) Describe problem: I have a problem with this script. The issue is that it works ok initially, but when the div of the carousell moves up or down because I change dinamically the content of a previous div, the navigation buttons remain in the previous position, unmatching the carousel. To be more specific it works perfectly on IE, but I have this problem when runing it on Firefox 3. I've seen similar issues but they were resolved in the latest version of the script, unfortunately I'm already running the latest version, and as I say it happens only on Firefox. Thanks for the help.

ddadmin
11-18-2008, 09:35 AM
Are you saying you're not only changing the contents of the Carousel Viewer, but also the main container's dimensions? Only then would the navigational buttons be out of place I reckon. Please post a link to the page on your site that contains the problematic script so we can check it out.

adnor
11-18-2008, 03:23 PM
Unfortunately I cannot post the site because it is not an online application. Anyway I'm not changing the contents of the carousel viewer, in fact the carousel works ok but for my problem we can consider that I don't press the naviagation buttons at all. See, there is a "main" container with two containers inside, call them "news" and "carousel". When the news div content is changed for a smaller set of news, for example, with javascript, no refresh. That's where the carousel div moves up as it's logical, to go just down the news div, but the navigation buttons remain lower, where they were before. Sorry I can't post a site to explaine better. Thanks anyway.

ddadmin
11-18-2008, 10:56 PM
Well, speaking in general, you can dynamically access the two nav buttons of your Carousel, then alter their CSS top positions, yes. The below is the default example you copied and pasted from the DD script page, with the code in red added that lets you modify the nav buttons' top offset from its current position by x amount:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="stepcarousel.js">

/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
border: 10px solid black;
overflow: scroll; /*leave this value alone*/
width: 270px; /*Width of Carousel Viewer itself*/
height: 200px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 250px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>

<body>

<script type="text/javascript">

stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})

</script>

<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<img src="http://i30.tinypic.com/531q3n.jpg" />
</div>

<div class="panel">
<img src="http://i29.tinypic.com/xp3hns.jpg" />
</div>

<div class="panel">
<img src="http://i26.tinypic.com/11l7ls0.jpg" />
</div>

<div class="panel">
<img src="http://i31.tinypic.com/119w28m.jpg" />
</div>

<div class="panel">
<img src="http://i27.tinypic.com/34fcrxz.jpg" />
</div>

</div>
</div>

<p>
<b>Current Panel:</b> <span id="statusA"></span> <b style="margin-left: 30px">Total Panels:</b> <span id="statusC"></span><br />

<a href="javascript:stepcarousel.stepBy('mygallery', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 1)" style="margin-left: 80px">Forward 1 Panel</a> <br />

<a href="javascript:stepcarousel.stepTo('mygallery', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('mygallery', 2)" style="margin-left: 80px">Forward 2 Panels</a>

</p>

<script type="text/javascript">

function movenavbuttons(amount){
var $leftnav=stepcarousel.configholder['mygallery'].$leftnavbutton
var $rightnav=stepcarousel.configholder['mygallery'].$rightnavbutton
var navposition_top=parseInt($leftnav.css('top'))
$leftnav.css('top', navposition_top+amount+'px')
$rightnav.css('top', navposition_top+amount+'px')
}

</script>

<a href="javascript:movenavbuttons(20)">Move nav buttons down 20px</a>

dev01
01-05-2010, 10:14 AM
Thanks very much for this solution - I had the same scenario as above.
I was using your Animated Collapsible DIV v2.4 code just above your Step Carousel code which caused the (absolute positioned) buttons to stay static while all other info moved as expected, as Adnor said the problem was only in Firefox.

I have just one question, is there a simple way to run the above script only once from a particular button incase a funny person hits the button more than once in which case the Step Carousel buttons/arrows will keep on moving!

My code for buttons:

<a href="javascript:animatedcollapse.show('advSearch');movenavbuttons(200)"><img src="[(site_url)]assets/images/darrow.gif"></a>
<a href="javascript:animatedcollapse.hide('advSearch');movenavbuttons(-200)"><img src="[(site_url)]assets/images/uarrow.gif"></a>


Thanks again for all your wonderful code, I find myself coming back here often. :D

Jaya
10-27-2010, 12:33 PM
Hi, the site is http://esseffx.softfirmstudios.net

One of the pages housing the beautiful stepcaoursel script you offer is
http://esseffx.softfirmstudios.net/projects/integrated-design-mithun-0

Everything works perfectly fine. Except when the contact or exchange button on top is clicked. Then the rest of the page moves down except the left and roght nav buttons. Is there anyway I can make the buttons position relative to the carousel div and not relative to the main page?

Thank you so much, not only for this script but for so many other useful ones. Even the top panel is thanks to your tab content script!

My sincere thanks in advance!

Warm regards
Jaya

ddadmin
10-28-2010, 08:28 AM
Java, you already have function movenavbuttons() defined on your page. Try calling it when the layout of your page changes to readjust the position of the two pagination links for the Carousel, such as the Exchanger link:


<li id="tab4" onClick="movenavbuttons"><a href="#" rel="tcontent3" rev="flowernote2">Exchanger</a></li>

Jaya
10-28-2010, 11:02 AM
hi, tried both your option of adding movenavbuttons onclick event and adding it to the href attribute, but both dont seem to work. Am not a javascript expert and am sorry for troubling you for somethign that must be quite simple for you! This is really very important to me as it is upsetting the whole layout...Thanks again, please do tell me where I am going wrong!

Warm regards
Jaya

Jaya
10-28-2010, 11:31 AM
Actually, the onclick works! But as mentioned in a previous comment in this same thread, if a person clicks contact, it gets pushed dowm, then if the user clicks exchanger, it goes down further 200px! And the -200px does not work, which I have assigned to the close button in the panel above. Any help would be greatly appreciated..

Thanks in advance
Jaya

ddadmin
10-31-2010, 05:43 AM
Try the below modified version of movenavbuttons() instead, which should move the nav buttons always from its original top coordinate, instead of relative to the last known one:

<script type="text/javascript">

function movenavbuttons(amount){
var $leftnav=stepcarousel.configholder['mygallery'].$leftnavbutton
var $rightnav=stepcarousel.configholder['mygallery'].$rightnavbutton
if (typeof navposition_top=="undefined")
navposition_top=parseInt($leftnav.css('top'))
$leftnav.css('top', navposition_top+amount+'px')
$rightnav.css('top', navposition_top+amount+'px')
}

</script>

Jaya
10-31-2010, 05:54 AM
HI,

thank you once again. I solved it just a few mins back, by changing the append(body) to append(carousel_container)...that way, the navbuttons position became relative to the carousel container and not to the body and was able to get it working just fine. Its not on for you to see as I am struggling to get the site working with multiple js (bgstretcher.js along with stepcarousel and tabcontent)..:(

Thank you once again..

Warm regards
Jaya

nullbreached
02-02-2012, 11:22 AM
Jaya, I know this is and old post but I was wondering if you or anyone could be specific with the solution you mentioned. It seemed to be a simple change in the js but it did not work for me.

Keeping the navigation buttons relative to the DIV seems the best solution.

I currently do have the additional function initially suggested in this thread in place.


HI,

thank you once again. I solved it just a few mins back, by changing the append(body) to append(carousel_container)...that way, the navbuttons position became relative to the carousel container and not to the body and was able to get it working just fine. Its not on for you to see as I am struggling to get the site working with multiple js (bgstretcher.js along with stepcarousel and tabcontent)..:(

Thank you once again..

Warm regards
Jaya

fackz
08-07-2012, 07:37 PM
Just in case someone runs into the same problem here's a modified version of the stepcarousel.js with the nav images relative to the stepcarousel content and not to the page body:

http://pastie.org/private/jhcpqo6prmzvwo3ouylvzg

Hope it helps.