Wow, thanks for your work on this. Sorry but it's a little confusing as to what is happening in the preview, I have uploaded the pages I've done before just so you can visualize what I'm going for. 1. http://www.democraticunionfordesign.com/test/index_refresh.html
2. http://www.democraticunionfordesign.com/test/index_simple.html Number 1 is really how I'd like it the content to slide in and out but as you'll see the process div leaves a latent image for some reason and also it shifts the menu down too, I figure the shifting menu is a div positioning problem. What I'm actually after is simply a single click on and off when each div is called. Really appreciate what you've done, I'll try and work through it a little more see if I can make more sense of it. Thanks again. On Jan 12, 7:42 pm, bill <ozzi...@gmail.com> wrote: > the jquery: > > <script type="text/javascript"> > $(function() { > $('.sectionTitle').click(function() { > $('.sectionBody').hide("slow"); > $(this).next("div").show("slow"); > }); > > }); > > the clickable parts: > > it is unclear what you want the visitors to click on to > hide/show your sections, so i created an <h1> element and > gave it a class of .sectionBody for the task. you can > certainly use whatever you like. > > the content: > > i wrapped the content following the <h1 class="sectionTitle> > elements in '<div class="contentBody"></div>' so > that you could easily show/hide the content. > > the cleanup: > > remove all of your jquery code referencing your divs. > > the working example: > > below is your code with the new code added in: > (please note that i removed some of your flash code as it was > aborting in my environment. you will need to add it back in.) > > <!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";> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> > <title>stripy divs</title> > > <style type="text/css"> > @import"css/stripy_simple.css"; > </style> > > <script type="text/javascript" src="jquery-1.3.2.min.js"></script> > > <script type="text/javascript"> > $(function() { > $('.sectionTitle').click(function() { > $('.sectionBody').hide("slow"); > $(this).next("div").show("slow"); > }); > > }); > > </script> > > </head> > > <body> > > <div id="container"> > > <div id="subframe"> > > <div id="contentpane"> > > <div id="header"> > <noscript> > <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" > codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ > swflash.cab#version=9,0,0,0" width="550" height="48" id="stripy_ident" > align="middle"> > <param name="allowScriptAccess" value="sameDomain" /> > <param name="allowFullScreen" value="false" /> > <param name="movie" value="stripy_ident.swf" /><param > name="quality" > value="high" /><param name="wmode" value="transparent" /><param > name="bgcolor" value="#ffffff" /> <embed src="stripy_ident.swf" > quality="high" bgcolor="#ffffff" width="550" height="48" > name="stripy_ident" align="middle" allowScriptAccess="sameDomain" > allowFullScreen="false" type="application/x-shockwave-flash" > pluginspage="http://www.macromedia.com/go/getflashplayer"; /> > </object> > </noscript> > </div> > > <!--<div id="stripes"> > </div>--> > > <div id="sidebar"> > GRAPHIC DESIGN > </div> > > <div id="workhide" class="work"> > </div> > ------------------------------------------------------------------------- > who > <h1 class='sectionTitle'>WHO</h1> > <div class='sectionBody'> > <!--ABOUT--> > <div id="about" class="who">there is something here now</div> > </div> > > ------------------------------------------------------------------------- > me > <h1 class='sectionTitle'>Me</h1> > <div style='display: none;' class='sectionBody'> > <div id="history" class="me divs"> > <h4 class="heading">WINK</h4> > <p>STRIPY EYE is a one person design compendium, Im an individual > working on a freelance basis. > My experience spans roughly ten years working in a variety of > backgrounds from exhibition, print and web based media, to teaching at > FE level and recently working in flash and 3d rendering. > <br /> > The site contains a selection of my work, illustrating a broad range > of skills in communication media. > <br /> > <br /> > If you wish to talk or simply seek advice about a project please > contact me > <br /> > > t...@stripyeye.com > <br /><br /> > > If you would like further information about me, my cv is available as > a download > </p> > </div> > > <!--PROCESS--> > <div id="processbutton" class="slide"> > </div> > </div> > > ------------------------------------------------------------------------- > view > <h1 class='sectionTitle'>VIEW</h1> > <div style='display: none;' class='sectionBody'> > > <div id="main" class="view"> > > <h4 class="heading"> PROCESS</h4> > > <div class="divfloats"> > <b>Mind</b><br /> > Our perceptions of something can be both enlightening and perplexing. > We can present something that will communicate different things to > different people. Unifying the perceptions of an idea is an important > process that requires thought and a guiding hand on how it is > received. It requires someone who can take the idea in hand and enrich > it, so that it resonates in the receivers mind. > </div> > > <div class="divfloats"> > <b>Ears</b><br /> > Listening to what you have to say about your design needs is of utmost > importance. > My approach is about listening to your needs and aspirations for the > design and how best to launch it in the public domain. Without > listening there is no presenting. > </div> > > <div class="divfloats"> > <b>Mouth</b><br /> > Discussion and partnership through the process is equally important. > It's essential to communicate and discuss each stage of the process > and maintain constant correspondence throughout the implementation, > ensuring the project grows in the right way for you. > </div> > > <div class="divfloats"> > <b>Eyes</b><br /> > The work is there for all to see, so if we get the first three right > the eyes will have it. > > Help me to help you present your idea to the world. > </div> > > </div> > > <!--CONTACT--> > <div id="contact" class="call"> > </div> > </div> > ------------------------------------------------------------------------- > callme > <h1 class='sectionTitle'>CALLME</h1> > <div style="display: none;" class='sectionBody'> > > <div id="contactview" class="callme"> > <h1>TALK</h1> > <P> > t...@stripyeye.com > </P> > <P> > 07964 355 158 > </P> > > </div> > > <!--STARTPICS--> > <div id="pics" class="images"> > </div> > > <div id="picsview" class="imagesview"> > <p>This is me and I am here for you</p> > > </div> > > <div class="menu"> > </div> > > <!--<div id="logo"> > </div>--> > > <!--WORKFOLIO--> > > <div id="workspace" class="showwork"> > > Hello I am exposed!!!!!!! > > </div> > > <div id"footer"> > > </div> > > <!--CONTENTPANE-END--></div> > <!---SUBFRAME--END----></div> > <!--CONTAINER--END----></div> > > </body> > </html>
