My head hurts

	Home Register Search Help Login

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

My head hurts

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> My head hurts

Page: [1]


curious monkey Posts: 660 Joined: 4/28/2006 From: The lower handle of US Status: offline	My head hurts - 7/28/2009 14:00:58 Distinguished posters of OF, I have a problem. I want to have a hidden div that uses minimal Javascript, as I don't know it well or at all really. This is the issue. I have found tutorials that work fine for item clicking, but I want to use it to access galleries. Basically, click "Gallery 1" that gallery opens, click "Gallery 2" that gallery opens and closes Gallery1. As I said I have got it working but it only works for one button. I know flash or javascript would be the way to go but I don't know javascript and the client doesn't want flash. .... Help! _____________________________ "I became insane, with long intervals of horrible sanity. " -Edgar Allan Poe

womble

Posts: 6287
Joined: 3/14/2005
From: Living on the edge
Status: offline

RE: My head hurts - 7/28/2009 17:55:41

I think I understand what you're trying to do...

Have you tried Dynamic Drive (http://www.dynamicdrive.com) - they have loads of different Javascript scripts and galleries etc., as well as a CSS library.

I've recently been trying to hide a div containing my skip links on a site so they're not visible to 'normal' visitors, but the links are still available to screen-readers etc. A couple of pages I found on hiding divs were:

- http://www.parkscomputing.com/dhtml/showhide.aspx
- http://andylangton.co.uk/articles/javascript/jquery-accessible-show-hide/

They're just simple show/hide divs though, although depending on how your galleries are set up that might be a possiblity (if you were using CSS positioning to display the two galleries on the same page). I'm guessing though that you'll probably need something more sophisticated. That said, it should be relatively easy to do with some javascript.

Unfortunately my Javscript skills aren't good, but the link below's to an exercise I did for a course I did a couple of years ago. It uses a rollover to display text when you hover over an image (which could be a button or something). Different text displays depending on which image you hover over on the left - the text is actually images, which I guess you could extend to display more than one image for a gallery (or display a div I'd imagine), and it should be fairly simple to adapt it to work onclick if you want onclick rather than hover.

Leonardo's inventions

This is the code for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
	<title>A Complex Rollover</title> 
	<script language="Javascript" type="text/javascript"> 
	<!-- Hide script from old browsers
 
	if (document.images) {
		flyText = new Image
		tankText = new Image
		bgText = new Image
		heliText = new Image
 
		flyText.src = "images/fmText.gif"
		tankText.src = "images/tankText.gif"
		bgText.src = "images/bg.gif"
		heliText.src = "images/heliText.gif"
	}
	else {
		flyText = ""
		tankText = ""
		bgText = ""
		heliText = ""
		document.textField = ""
	}
 
	// End hiding script from old browsers -->
	</script>	
</head> 
<body bgcolor="#EECC99"> 
<table> 
<tr valign="top"> 
	<td> 
		<img src="images/leoText.gif" width="375" height="26" alt="Leonardo's Inventions" /><br /> 
		<a href="flyPage.html" onmouseover="document.textField.src=flyText.src" onmouseout="document.textField.src=bgText.src"><img src="images/flyer.gif" width="293" height="165" border="0" vspace="20" alt="Flying Machine" /></a><br /> 
		<a href="tankPage.html" onmouseover="document.textField.src=tankText.src" onmouseout="document.textField.src=bgText.src"><img src="images/tanks.gif" width="325" height="92" border="0" alt="Tank" /></a><br /> 
		<a href="heliPage.html" onmouseover="document.textField.src=heliText.src" onmouseout="document.textField.src=bgText.src"><img src="images/helicopter.gif" width="224" height="160" border="0" vspace="20" alt="Helicopter" /></a> 
	</td> 
	<td> 
		<img src="images/DaVinci.jpg" width="144" height="219" hspace="50" alt="DaVinci" /><br /> 
		<img src="images/bg.gif" width="208" height="27" name="textField" vspace="20" alt="Text Field" /> 
	</td> 
</tr> 
</table> 
</body> 
</html>

Depending on how you've got your galleries set up and how you're displaying them (I presume you're displaying them on the same page?) another option is to use depending on your server etc. is a PHP include. I have a couple of sites where I use an included page with the different gallery pages and use a PHP 'switch' to display galleries depending on which link is clicked.

This is the code for the gallery pages of a site I did a few months ago and maintain, where I've used PHP includes to display a number of 'gallery' pages...

        <p>The quicklinks below will take you to each set of photos...click the link, and away you go! Enjoy!</p>
	         <ul class="gallery_quicklinks">
	             <li><a href="gallery.php?id=page1" title="March 2009 Race Day photos">Race Day March 2009</a></li>	         
	             <li><a href="gallery.php?id=page3" title="The first photos of the Club's brand new track">Our brand new track (November 2008)</a></li>	         
	             <li><a href="gallery.php?id=page4" title="Photos from the club's big day out at the 2008 Championships">British Championships 2008</a></li>
	             <li><a href="gallery.php?id=page5" title="Photos of our club members in action">Action shots</a></li>
	             <li><a href="gallery.php?id=page6" title="Photos from a day of racing at the club">October 2007 Race Day</a></li>
	         </ul>               
  <div class="photosblock-top">
	  <!-- <p>Page: <a href="gallery.php?id=page1" title="Click here for the first page of the club photo gallery">1</a> ¦ <a href="gallery.php?id=page2" title="Click here for second page of the club photo gallery">2</a> ¦ <a href="gallery.php?id=page3" title="Click here for third page of the club photo gallery">3</a> ¦ <a href="gallery.php?id=page4" title="Click for the 4th page of the photo album">4</a> ¦ <a href="gallery.php?id=page5" title="Click for the fifth page of the photo album">5</a> ¦ <a href="gallery.php?id=page6" title="Click for the sixth page of the photo album">6</a></p> -->
    

    <?php $id = $_GET["id"]; switch($id) { default: include('includes/gallery_page5.php');
		break; case "page1": include("includes/gallery_page5.php");
		break; case "page2": include("includes/gallery_page6.php");		
		break; case "page3": include("includes/gallery_page1.php");
		break; case "page4": include("includes/gallery_page2.php");
		break; case "page5": include("includes/gallery_page3.php");
		break; case "page6": include("includes/gallery_page4.php");
		} ?>	

    		  
                                    
     
   </div><!-- end 'page' div -->  
    <p style="text-align: right; clear: both;">Page: <a href="gallery.php?id=page1" title="Click for 1st page of the photo album">1</a> ¦ <a href="gallery.php?id=page2" title="Click for 2nd page of the photo album">2</a> ¦ <a href="gallery.php?id=page3" title="Click for 3rd page of the photo album">3</a> ¦ <a href="gallery.php?id=page4" title="Click for the 4th page of the photo album">4</a> ¦ <a href="gallery.php?id=page5" title="Click for the 5th page of the photo album">5</a> ¦ <a href="gallery.php?id=page6" title="Click for the 6th page of the photo album">6</a></p>
    <p style="text-align: left; clear: both;"><a href="javascript:history.back(1)">Back to previous page</a></p>

This is the page in action: Gosport BMX Club Photo gallery

By default the page loads a specific gallery page (the first line of the PHP bit of the page). It was an idea I picked up from an online tutorial and adapted to display different include pages in a page (originally I used it for an online glossary). I can't remember where I found the tutorial now (I'm sure I'll have bookmarked it, but I have that many bookmarks and a rather complicated filing system for them it could be anywhere!

),

Hope that helps! (or have I just confused you even more?

)

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~

(in reply to curious monkey)


curious monkey Posts: 660 Joined: 4/28/2006 From: The lower handle of US Status: offline	RE: My head hurts - 7/30/2009 9:00:42 quote: ORIGINAL: womble I think I understand what you're trying to do... -http://www.parkscomputing.com/dhtml/showhide.aspx That link is the closest to what I want. I have to make it "clickable" so the gallery pages stay open. Thanks my furry friend. The Mistrals are in the post. _____________________________ "I became insane, with long intervals of horrible sanity. " -Edgar Allan Poe (in reply to womble)


TexasWebDevelopers Posts: 761 Joined: 2/22/2002 From: Dallas, TX Status: offline	RE: My head hurts - 7/30/2009 9:35:01 This works but you must manually close the open galleries: <script type="text/javascript"> <!-- function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'none') e.style.display = 'block'; else e.style.display = 'none'; } //--> </script> <a onMouseOver="this.className='over'" onMouseOut="this.className='out'" onclick="toggle_visibility('content1');" style="cursor:pointer; color:#03C; text-decoration:underline;">GALLERY 1 LINK</a><br> <div id="content1" style="display:none;"> GALLERY 1 CONTENT</div><br> <a onMouseOver="this.className='over'" onMouseOut="this.className='out'" onclick="toggle_visibility('content2');" style="cursor:pointer; color:#03C; text-decoration:underline;">GALLERY 2 LINK</a><br> <div id="content2" style="display:none;"> GALLERY 2 CONTENT</div><br> <a onMouseOver="this.className='over'" onMouseOut="this.className='out'" onclick="toggle_visibility('content3');" style="cursor:pointer; color:#03C; text-decoration:underline;">GALLERY 3 LINK</a><br> <div id="content3" style="display:none;"> GALLERY 3 CONTENT</div> _____________________________ Follow us on TWITTER (in reply to curious monkey)


womble Posts: 6287 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: My head hurts - 7/30/2009 17:08:06 quote: ORIGINAL: curious monkey Thanks my furry friend. The Mistrals are in the post. Just for the record, it's the chocolate sweetie type Minstrels I like, not the wandering music playing Minstrels. That's a nice little script. Bit of an accessibility problem though (or if Javascript's disabled). Without Javascript there's nothing. I knew I'd got a bookmark for something I'd seen somewhere, but couldn't find it before. Not exactly what you're looking for, but this is an accessible form that uses javascript to show/hide some additional information: http://www.websemantics.co.uk/resources/accessible_form_help/ Whether it could be tweaked to show/hide a div I'm not sure, but it does say "only works with two adjacent <span> elements but is changeable for other elements" so it may be possible to use it or something similar to show and hide other types of elements on a page. _____________________________ ~~ "A cruel god ain't no god at all" ~~ ~~ Erase hate. Practice love. ~~ (in reply to curious monkey)


curious monkey Posts: 660 Joined: 4/28/2006 From: The lower handle of US Status: offline	RE: My head hurts - 7/31/2009 4:44:27 quote: Just for the record, it's the chocolate sweetie type Minstrels I like, not the wandering music playing Minstrels. :) Damn, not only did I spell it wrong but after all the effort taken to shove those people in funny hats carrying Lutes in a box that was wrong too! Oh well. Hmm, did I remember the air holes? Tex, do you mind if I call you 'Tex'? - Thanks a million. It is now evident more than ever that learning Javascript is a necessity for me. At least enough to write or manipulate simple code. _____________________________ "I became insane, with long intervals of horrible sanity. " -Edgar Allan Poe (in reply to womble)


womble Posts: 6287 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: My head hurts - 7/31/2009 11:46:49 Well I hope you did, because I don't want a load of dead musicians turning up in the post! I had the postman complaining this morning because one of the parcels he'd got for me was rather heavy, and I can imagine he might not be too happy with decomposing musicians. quote: It is now evident more than ever that learning Javascript is a necessity for me. At least enough to write or manipulate simple code. I have to say that although I've done two Javascript courses, I'm still hopeless with it (and somewhat amazingly passed both ). I know enough to be able to understand what it's doing when I see it, and sometimes tweak it a bit, but I'm hopeless at writing it from scratch. Having done various courses though now, I have to say it was useful doing it because although the syntax of all the different programming and scripting languages is different, the underlying structures of many of them are pretty similar, and knowing how to if/else statements, while loops, etc. in one language can make learning another one a little easier. _____________________________ ~~ "A cruel god ain't no god at all" ~~ ~~ Erase hate. Practice love. ~~ (in reply to curious monkey)