HTML5 Design Problem

[neojiphre]

I have tried following this tutorial from TutorialZine

http://tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/

and implemented it on an html5 template that uses cufon.js

http://newsit.ulmb.com/

But it doesn't work very well. The images are messed up when they rotate and my navigation menu disappears every time I click the next or prev button.

Can anybody please help me? I would really appreciate it.

 

[CaldwellYSR]

omg so many ads! Could you post the significant code because I'm not going to sit on that loud @$$ page long enough to open up firebug and look through your code. Sorry

 

[PixelPusher]

Your nav is disappearing because the jquery script is set to find a generic "li" element. It is finding the first list item (<li>) in your nav element and setting the opacity to zero..hiding it.

My suggestion would be to adjust the .find() function in the javascript. Make it more specific. Try adding an id attribute to the list, so the js find function would look like this:

/* previous (too general)*/

.find("li")

/* more specific */
.find("ul#slideshow > li")

 

[PixelPusher]

FYI, your rotate will only work in a css3 (rotate) compliant browser. You might want to consider the jquery rotate plugin.

jQuery Rotate Plugin

 

[neojiphre]

omg so many ads! Could you post the significant code because I'm not going to sit on that loud @$$ page long enough to open up firebug and look through your code. Sorry

Your nav is disappearing because the jquery script is set to find a generic "li" element. It is finding the first list item (<li>) in your nav element and setting the opacity to zero..hiding it.

My suggestion would be to adjust the .find() function in the javascript. Make it more specific. Try adding an id attribute to the list, so the js find function would look like this:

/* previous (too general)*/

.find("li")

/* more specific */
.find("ul#slideshow > li")

Thanks guys for taking time to look at my problem. Sorry about the ads, I'm just going to post the code from now on.

@PixelPusher, I tried your suggestion, but it didn't work. The slideshow produced the same result. I also tried doing this:

script.js

var slideShow = $('#slideShow'),
		ul = slideShow.find('ul#[B]featured[/B]'),
		li = ul.find('li'),
		cnt = li.length;

<section id="gallery">
  		<div id="slideShowContainer">
	
    		<div id="slideShow">
    
    		<ul id="[B]featured[/B]">
        		<li><img src="img/photos/1.jpg" width="100%" alt="Fish" /></li>
        	    <li><img src="img/photos/2.jpg" width="100%" alt="Ancient" /></li>
        	    <li><img src="img/photos/3.jpg" width="100%" alt="Industry" /></li>
        	    <li><img src="img/photos/4.jpg" width="100%" alt="Rain" /></li>
        	</ul>
    
	    	</div>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
            <script src="js/jquery.rotate.js"></script>
			<script src="js/script.js"></script>
	    	<a id="previousLink" href="#">&raquo;</a>
	    	<a id="nextLink" href="#">&laquo;</a>
	    
		</div>
  		</section>

But there is still no change. Maybe you can take a look at the complete script.js file.