Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Static and Dynamic part of a page using css?

    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.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You could either choose from these:


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

    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    highflying (11-12-2008)

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rangana View Post
    You could either choose from these:


    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!

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You could use anchor pseudos in the exact same order:
    Code:
    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:
    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>
    <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>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by rangana View Post
    ...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...

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Quote Originally Posted by CyanLight View Post
    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:
    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:
    Code:
    <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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #7
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!!


    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>
     
     	<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>
    Last edited by highflying; 11-13-2008 at 03:27 AM.

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by rangana View Post
    ...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.

  • #9
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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?
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,724
    Thanks
    6
    Thanked 1,013 Times in 986 Posts
    Quote Originally Posted by rangana View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •