...

View Full Version : Static and Dynamic part of a page using css?



highflying
11-12-2008, 08:21 AM
Dear All,

I have a question -

Background : I used the E-book "designing without tables" and created a page with 2 columns. A 200 px column on the left for the links and the rest on the right for the data.

There is also a header column on the top with has main menu.

Question 1 : If there are 5 links on the left column, how can I link the pages such that when I click on a link on the left column..only the right column should refresh. Meaning, I want the left column to be static with the links and only the right column should be refreshed? Is it possible to do so using only CSS and HTML ?

Thanks in advance. Regards.

rangana
11-12-2008, 08:41 AM
You could either choose from these:

Use AJAX:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
Use serverside includes. For PHP, take a look on the include method (http://us.php.net/include/).
If you want to stick with HTML, copy and past all the codes and change the part to which you want the content be changed.
Use an iframe - but frames are evil (http://apptools.com/rants/framesevil.php).


If I were to ask, I would choose the second option.

Hope that helps.

highflying
11-12-2008, 09:10 AM
You could either choose from these:

Use AJAX:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
Use serverside includes. For PHP, take a look on the include method (http://us.php.net/include/).
If you want to stick with HTML, copy and past all the codes and change the part to which you want the content be changed.
Use an iframe - but frames are evil (http://apptools.com/rants/framesevil.php).


If I were to ask, I would choose the second option.

Hope that helps.



Thanks for the help!! Appreciate it!

I would say I am decently versed in HTML / CSS, but i have no clue as to what PHP is.

I have 1 question though -

If you look at the ajax example. What should be done, if I would like to apply a different font color to the active / choosen menu?

I.e...(refer to example) If I clicked on "Ferrari Page", what should I do so that the it turns a different color when clicked?.......hope my question is understandable..

Thanks!

rangana
11-12-2008, 09:27 AM
You could use anchor pseudos in the exact same order:


a:link{} /* Link rule */
a:visited{} /* Rule for link which are visited */
a:hover{} /* Rule for link which are hovered upon*/
a:active{} /* Rule for active element */


...but that would only work on IE. To make it work cross-browser, we need a little help using JS:


<style type="text/css">
ul
{
list-style-type:none;
font-family:Tahoma;
font-size:10pt;
}
a{font-weight:bold;}
a:link{ color:#f00;} /* Link rule */
a:visited{ color:#f00;} /* Rule for link which are visited */
a:hover{ text-decoration:none;color:#00f;} /* Rule for link which are hovered upon*/
a:active{ color:#0f0} /* Rule for active element */
</style>
<script type="text/javascript">
window.onload=function()
{
var accept=document.getElementById('nav').getElementsByTagName('a');
for(var i=0;i<accept.length;i++)
{
accept[i].onclick=function()
{
for(var i=0;i<accept.length;i++)
{
accept[i].style.color='#f00';
{
this.style.color='#0f0';
}
}
}
}
}
</script>
<ul id="nav">
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>

Apostropartheid
11-12-2008, 09:02 PM
...but that would only work on IE.
Whoa there, hang on. Since when have pseudoclasses worked only in IE? It's always worked in Firefox for me, and any self-respecting standards-based browser...

rangana
11-13-2008, 12:13 AM
Whoa there, hang on. Since when have pseudoclasses worked only in IE?

Pseudoclass worked well on both IE and FF. Except a lot of circumstance (for example that hover pseudo for IE which only works on anchor tags...), this time FF doesn't render the active pseudo-class well as IE does. Please find time to run this code:


<style type="text/css">
ul
{
list-style-type:none;
font-family:Tahoma;
font-size:10pt;
}
a{font-weight:bold;}
a:link{ color:#f00;} /* Link rule */
a:visited{ color:#f00;} /* Rule for link which are visited */
a:hover{ text-decoration:none;color:#00f;} /* Rule for link which are hovered upon*/
a:active{ color:#0f0} /* Rule for active element */
</style>
<ul id="nav">
<li><a href="#">link one</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">link four</a></li>
<li><a href="#">link five</a></li>
</ul>


...and please let me know if it looks identical on both FF and IE (at least).

when having this code, please tell me the behavior:


<script type="text/javascript">
window.onload=function()
{
var accept=document.getElementById('nav').getElementsByTagName('a');
for(var i=0;i<accept.length;i++)
{
accept[i].onclick=function()
{
for(var i=0;i<accept.length;i++)
{
accept[i].style.color='#f00';
{
this.style.color='#0f0';
}
}
}
}
}
</script>


Hope I was making sense.

highflying
11-13-2008, 03:14 AM
Thanks all for reply!

I took the ajaxcode and simplified it as below -

What am I doing wrong? Why does the links still look blue and when i hover over them nothing happens and when I click them they are RED!!!

Where the heck is the red coming from???

Oh I am trying all this on MAC safari and Firefox.

Thanks!!



<!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>

<title>Ajax Rotating Includes Script</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="cars_css.css" />

<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

<style type="text/css">

#leftcolumn a:link { color: red;}
#leftcolumn a:visited { color: yellow;}
#leftcolumn a:hover { color: blue; }
#leftcolumn a:active {color: black;}



#rightcolumn{
float:left;
width:550px;
min-height: 400px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}

* html #rightcolumn{ /*IE only style*/
height: 400px;
}

</style>




</head>

<body>

<div id="leftcolumn">
<a href="javascript:ajaxpage('external.htm', 'rightcolumn');">Porsche Page</a>
<a href="javascript:ajaxpage('external2.htm', 'rightcolumn');">Ferrari Page</a>
<a href="javascript:ajaxpage('external3.htm', 'rightcolumn');">Aston Martin Page</a>

</div>

<div id="rightcolumn"><h3>Choose a page to load.</h3></div>


</body>

</html>

Apostropartheid
11-13-2008, 07:38 PM
...and please let me know if it looks identical on both FF and IE (at least).
...Well yes, it does. The link goes green in its active state, but Firefox applies a CSS outline--which you can remedy.

rangana
11-14-2008, 12:10 AM
Cyan, I seemed to hijack the thread, but could you please provide a working solution where active link stays green in the same way that IE does that?

VIPStephan
11-14-2008, 12:33 AM
Cyan, I seemed to hijack the thread, but could you please provide a working solution where active link stays green in the same way that IE does that?

I havenít actually tested it right now but as always Iíd say IE is wrong (or itís a matter of interpretation). As far as I know the active state of an element is the time when the element is clicked and only as long as the mouse button is held down. Itís kinda like pushing a button where the active state is when the button is pushed down and as soon as you release it itís coming back up and not active anymore; in CSS this state is then ďvisitedĒ.

However, itís a little too late for me now to think of a solution that would behave like IE does. Maybe tomorrow.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum