web help

**StiligeCecilie** · 30-05-2009 05:22 PM

Originally Posted by kneeto

im working on the site now, you wouldnt happen to have any working examples of the hidden div thing would you? just makes it easier if i could see the coded and stuff.

cheers

With W3Schools you can try out CSS examples:
CSS Examples

**graphicsAZ** · 01-06-2009 03:21 PM

to hide a div you will target the display or visibility properties with css:
display uses "none" for hiding, and visibility uses "hidden"

Inline

HTML Code:

  <div style="display:none"></div>  or  <div style="visibility:hidden"></div>

Separate

HTML Code:

</div>  (html)

(linked css file)
.contentBox1 {
font:normal 8pt Arial;
color:#000;
width:350px;
text-align:justify;
display:none;
}

Using an external css doc and linking it in the HEAD of the page is a better route.

HTML Code:

<link href="locationOfCssFile" rel="stylesheet" />

**Scriptage** · 02-06-2009 05:22 PM

That doesn't achieve the same effect at all, using CSS you would need to use Javascript to show / hide divs without reloading the page. If you must use frames use the XHTML 1.0 Frameset doctype, there's a simple primer here: DevGuru XHTML Tag: frameset.

**graphicsAZ** · 02-06-2009 07:55 PM

That doesn't achieve the same effect at all...

That was to simply hide an object with CSS. I agree, if you want to toggle the visibility it would take javascript as well.

Kneeto here is a working example:
(maybe someone could write it better, but this works)

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle Visibility</title>
<script type="text/javascript">
function toggleDiv(num) {
    var obj = document.getElementById('div' + num);
    if (obj.style.display == ''){
    obj.style.display =  'none';
    } else {
    obj.style.display =  '';
    }
}
</script>
<style type="text/css">
.btn {
font: bold 10pt Arial;
color:#0099FF;
text-decoration:none;
}
.btn:hover
{
font: bold 10pt Arial;
color:#0066FF;
text-decoration:underline;
cursor:pointer;
}
a{
font: bold 10pt Arial;
color:#0099FF;
text-decoration:none;
}
a:hover{
font: bold 10pt Arial;
color:#0066FF;
text-decoration:underline;
}
.cntDiv
{
width:200px;
height:200px;
background-color:#0033CC;
color:#fff;
padding:10px;
}
</style>
</head>
<body>
<div class="btn" onclick="javascript:toggleDiv(1)">Toggle 1</div> <!-- Div acting as a Link -->
<a href="javascript:toggleDiv(1)" class="btn">Toggle 2</a> <!-- Standard Link -->
<div id="div1" class="cntDiv">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam cursus vehicula. </div>
</body>
</html>

**Scriptage** · 03-06-2009 03:24 PM

That's inaccessible, if someone has Javascript disabled they won't be able to see the content, I'd use AJAX:

HTML Code:

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JS</title>
<style type="text/css">

#left{
float:left;
width: 150px;
height: 600px;
}

#right{
float:left;
width: 550px;
height: 600px;
}

</style>
<script type="text/javascript">
/* <![CDATA[ */
function GetRequestObject(){
   var XMLHttp;
   /*@cc_on
    @if (@_jscript_version >= 5)
    try {
      XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        XMLHttp = false;
      }
    }
   @else
   XMLHttp = false;
   @end @*/
   if (!XMLHttp && typeof XMLHttpRequest != 'undefined') {
    try {
      XMLHttp = new XMLHttpRequest();
    } catch (e) {
      XMLHttp = false;
    }
   }
   return XMLHttp;
}
 
function GetPage(linkObj){
   Request = GetRequestObject();
   if(!Request){
   window.location.href = linkObj.href;
   }
   Request.open("GET", linkObj.href ,true);
 
   Request.onreadystatechange = function(){
   if(Request.readystate == 4 || Request.readyState == 4){ // Successfully sent
   var File = Request.responseText.substring(Request.responseText.indexOf('<body>'), Request.responseText.indexOf('</body>')+7);    
   document.getElementById("right").innerHTML = File;
 
   }
   };
 
Request.send(null);
 
 
}
/* ]]> */
</script>
</head>
<body>
<div id="left">
<a href="one.html" onclick="GetPage(this); return false;">One</a>

<a href="two.html" onclick="GetPage(this); return false;">Two</a>
</div>
<div id="right">
</div>
</body>
</html>

Of course it would be better to create a template file, seperate the JS into a seperate file and use an XML object and parser to target the content ("right") div but that's for another discussion.

**Harry** · 03-06-2009 05:43 PM

**graphicsAZ** · 04-06-2009 11:12 PM

Originally Posted by PR Design

:hmm:

**Harry** · 04-06-2009 11:13 PM

I'm laughing at the fact that Scriptage knows everything, and over-delivers, as usual.

**Scriptage** · 16-06-2009 02:15 PM

Easy, accessible, AJAX. for a more advanced and easy to use implementation

**kneeto** · 16-06-2009 03:54 PM

thanks for the responses guys, im just waiting to pay for webhosting, then the site should be up withing a couple of days. ill try using the ajax method. nudes otw ;p

Thread: web help

LinkBack

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions