Stepcarousel not moving [Archive] - Dynamic Drive Forums

SolidSnake2003

12-24-2011, 12:59 PM

1) Script Title: Stepcarousel

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

3) Describe problem: I want to have a stepcarousel for the latest updates added to my website. Ive input the codes as listed on your page. The content shows up, and its in the belt, but it wont move at all.

Here is the code for the header of my site

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head profile="http://gmpg.org/xfn/11">
<title></title>
<link rel="shortcut icon" href="favicon.ico" />
<link href="admin/wp-content/themes/V1/style.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='http://jhn.legacy-designs.net/admin/wp-includes/js/jquery/jquery.js'></script>
<script type="text/javascript" src="admin/wp-content/themes/V1/js/jquery.form.js"></script>
<script type="text/javascript" src="admin/wp-content/themes/V1/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="admin/wp-content/themes/V1/js/jquery-ui-personalized-1.5.2.packed.js"></script>
<script type="text/javascript" src="admin/wp-content/themes/V1/js/bookmark.js"></script>
<script type="text/javascript" src="admin/wp-content/themes/V1/js/custom-form-elements.js"></script>
<script language="JavaScript" src="admin/wp-content/themes/V1/js/qTip.js" type="text/JavaScript"></script>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<script type="text/javascript" src="admin/wp-content/themes/V1/js/ddsmoothmenu.js"></script>

<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "topMenu", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#08429f", "#0858d8"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
<script type="text/javascript" src="admin/wp-content/themes/V1/js/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>
<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:false, moveby:1, pause:5000},
panelbehavior: {speed:500, wraparound:true, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ['admin/wp-content/themes/V1/images/layout/home/latest_site-updates/arrow-left.png', -22, 40], rightnav: ['admin/wp-content/themes/V1/images/layout/home/latest_site-updates/arrow-right.png', -1, 40]},
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>
<script type="text/javascript" src="admin/wp-content/themes/V1/js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [159, 139], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow01.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow02.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow03.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow04.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow_josh5.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow06.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow07.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow08.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow09.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow10.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow11.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow12.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow13.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow14.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow16.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow17.jpg"],
["admin/wp-content/themes/V1/images/layout/main/header/slideshow/jhnetwork_main-header_slideshow18.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})

</script>

<script type="text/javascript" src="admin/wp-content/themes/V1/js/cufon/cufon-yui.js"></script>
<script src="admin/wp-content/themes/V1/js/cufon/MyriadPro.js" type="text/javascript"></script>
<script src="admin/wp-content/themes/V1/js/cufon/CenturyGothic.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Century Gothic',hover: true});
Cufon.replace('h2', { fontFamily: 'Myriad Pro Condensed',hover: true});
Cufon.replace('h3', { fontFamily: 'Century Gothic',});
Cufon.replace('h4', { fontFamily: 'Myriad Pro Condensed',hover: true,textShadow: '#9fc4d0 1px 1px'});
</script>
<script type="text/javascript" src="admin/wp-content/themes/V1/js/tabcontent.js">

/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
</head>

Here is the code for where I want the stepcarousel to be:

<table cellpadding="0" cellspacing="0" width="874px" border="0">
<tbody>
<tr>
<td width="874px" height="220px" align="left" valign="top" name="Latest Site Updates">
<div id="carouselouter">

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

<?php if (have_posts()) : ?>
<?php $my_query = new WP_Query('cat=12special_cat&posts_per_page=8'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

<div class="panel"><h2><a href="<? echo get_post_meta($post->ID, 'Custom_URL', true) ?>" title="<?php the_title(); ?>"><? echo get_post_meta($post->ID, 'Custom_Title', true) ?></a></h2>
<a href="<? echo get_post_meta($post->ID, 'Custom_URL', true) ?>"><img src="<? echo get_post_meta($post->ID, 'Thumb', true) ?>" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" width="110px" height="100px" border="0" hspace="0" vspace="0" /></a></div>

<?php endwhile; ?>

<?php else : ?>
<?php endif; ?></div></div></div></td></tr>
<tr>
<td width="874px" height="20px" align="left" valign="top"></td></tr>
<tr>
<td width="874px" align="left" valign="top"></td></tr></tbody></table>

SolidSnake2003

01-01-2012, 07:01 AM

What did I wrong?

I tried removing the drop down menu, and the slideshow, but the stepcarousel still wont move.

ddadmin

01-01-2012, 10:03 AM

Please post a link to the page on your site that contains the problematic script so we can check it out.

SolidSnake2003

01-01-2012, 12:29 PM

http://jhn.legacy-designs.net/home/

vwphillips

01-01-2012, 04:45 PM

well I got it to move

but there are a number of problems on your page

1) there is no belt div

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

</div>
</div>

and it needs a position of 'absolute' so check your css

2) mygallery is a variable name of another script on your page so I used mygallery1

3) this line creates an error

Cufon.replace('h3', { fontFamily: 'Century Gothic',});

4) for some scripts you are using

<script language="JavaScript" >

this should be

<script type="text/javascript" >

5) this line needs sorting out

<td width="1010px" height="18px" background="http://jhn.legacy-designs.net/admin/wp-content/themes/V1/images/layout/main/main-table/main-table_end.jpg" background-repeat: no-repeat;" align="left" valign="top"></td></tr></tbody></table></td></tr></tbody></table></center>

there may be other errors

SolidSnake2003

01-01-2012, 05:18 PM

Thanks, your advice helped me, its moving now :D.