How can i do this?

JavaScript
1

Hey,

Take a look at this page:

http://www.hangingditch.com/index.php

If you look at the “Monthly Specials” box, you will see a product. This is being pulled out of a database but there will be over 40 of the specials so i need to tab to next/previous with the arrows provided. Can this be done?

Currently i am only SELECTING one special to show you what i intend to do, but i need to select ALL of them which adds up to about 40 so is there a way possible to tab through to next and previous ??

Can you provide an example if possible so i can head in the right direction.

Thanks again

2

Hey,

It’s working now, i put the DIV inside the while loop and now it works :slight_smile:

Thanks again

3

Hey,

I have put a clear on the h3 but it doesn’t seem to work. I have this code:


		        <div class="boxesmiddle">   					
		        	<div class="links">
		      		<img src="http://<?=$_SERVER['SERVER_NAME'].$sitename?>images/prev.jpg" alt="" class="custom prev left" style="cursor:pointer"/>
		      		<img src="http://<?=$_SERVER['SERVER_NAME'].$sitename?>images/next.jpg" alt="" class="custom next right" style="cursor:pointer"/>
					</div>
			        <!-- panes -->
					<div id="flowpanes">				
						<!-- wrapper for scrollable items -->
						<div class="items">
							<div>		    
						    <?
					       $specials = Specials::SelectAllSpecials();
				       		while($row = mysql_fetch_array($specials)){
				       		$text = strip_tags($row['description']);
					   		$intro = substr($text, 0, 100);
				            ?>
					        <img src="http://<?=$_SERVER['SERVER_NAME'].$sitename?>specialsimages/<?=$row['theImage']?>" alt="" class="left marginright10px homepagespecialsimg"/>
					        <h3>monthly specials</h3>
						 	<p style="margin-bottom:8px"><strong><?=$row['theName']?></strong></p>
						    <p><?=$intro?>...</p>
			                <?  
					        }
							?>
				      		</div>
		 				</div>
	 				</div>
 				</div>

Now when i view source it does show all 4 specials, but if you look at the front end, now it has made the text disappear, and the image of the wine stays the same:

http://www.hangingditch.com/

Any ideas what i’m doing wrong?

Thanks again ScallioXTX

4

You should either put a <br clear=“all” /> at the end of each special (just before the <h3>montly special</h3> of the next one)

Or, put this in your CSS

#flowpanes h3 {
  clear: both;
}
5

You’re not doing anything wrong, I’m doing it wrong, putting a clear: both on the h3 clearly doesn’t work, I should have seen that :headbang:

That being said, I would would wrap a div around each special. No CSS required, just wrap it in a div (and remove the clear:both from the h3 of course). There might be better solutions, but I can’t think of any.

6

Hey,

Thanks for the link, i have almost got it working, however have a few styling issues but i think its best to post here.

If you look at this page now: http://www.hangingditch.com/index.php

Click on the arrows next/previous you will see the scrolling function working, however the next tab appears near the bottom of the first tab, and when i click next it doesn’t show the ACTUAL second tab it shows the first tab again.

How can i fix this css to increase the height so you cannot see the second tab ??

Thanks

7

http://flowplayer.org/tools/scrollable/index.html

right there. That and jquery is all you’ll need.