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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation With <a> class cannot change...

    Good day to everybody!

    I got stucked with changing class "onclick", because it's appeared to be not working when I use tag <a>. For example, if I take instead of <a> tag <span> it will work, but I need "href". I even tried with "location.replace", but it have the same problem. So here it is:

    - This I tried to use it for the first time:
    HTML:
    Code:
    <div class="menu" onclick="CngClass(this,'menua');"><a href="index">Главная</a></div>
    CSS:
    Code:
    .menu {
    
    			background: url(pics/lapa.jpg) no-repeat center;
    }
    
    .menua {
    
    			background: url(pics/lapah.jpg) no-repeat center;
    }
    - Another try I was more precisely, trying to change only style:
    Code:
    <div class="menu" onclick="this.style = 'background-image: URL(pics/lapah.jpg);';"><a href="index">Главная</a></div>
    If there is a way to make it out?

    Beforehand, thank you very much, wish all of you positive and nice mood!

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Would definitely help to see exactly what that CngClass function does. I tested it locally with a function I wrote myself, and it works okay with any kind of element... <a> included, so... give us a code to look at, please.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    The <a> is "eating" the click, so your <DIV> never *sees* it, so of course nothing changes.

    You could do this:

    <a onclick="CngClass(this,'menua');return true;" href="index">Главная</a>

    But I have to ask: What is the point??? When the user clicks on the link, you *will* be moving to another page (where the href points to), so the color change will only last for a fraction of a second.

    You might, instead, want to do this:
    Code:
    a.menu { 	background: url(pics/lapa.jpg) no-repeat center; }
    
    a.menu:visited { background: url(pics/lapah.jpg) no-repeat center; }
    Now, when you come *back* to this page, the background will have changed since you have visited the site. If that's not what you are after, you could also OR INSTEAD do:
    Code:
    a.menu { 	background: url(pics/lapa.jpg) no-repeat center; }
    
    a.menu:hover { background: url(pics/lapah.jpg) no-repeat center; }
    In either case, just use
    <a class="menu" ...>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Eldarrion: But what's the point of changing the background if the whole page is going away instantly??

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by Eldarrion View Post
    Would definitely help to see exactly what that CngClass function does. I tested it locally with a function I wrote myself, and it works okay with any kind of element... <a> included, so... give us a code to look at, please.
    What do you do? Get by class? and then how do you swap the class? Can you show me how you do it?

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow! Thanks guys, didn't thought, where will be so quick replies.

    I think, I'm getting dizzy and dummy in this question And you right about "But what's the point of changing the background if the whole page is going away instantly", I understood, that once I make a pause

    Ok, the thing is, I want to make menu with buttons, that looks like "small picture + text" and picture should be changed on one of the menu button that is active right now, so it noticed, that I'm at the exact page, if I'll click on on another button menu, button's picture of previous page will get as usual, and another picture of the button will be active, accordingly page that I'm in at the moment.

    I hope I've been explained

    With best and positive regards! Respect for your experience!

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    In other words:

    You want the button/link *FOR THE PAGE YOU ARE NOW ON* to appear differently than all the other buttons/links.

    Is that right?

    This is generally something that's easier to do in server side coding (it's very easy in ASP and PHP coding). But you can probably do it without too much work in JavaScript.

    I've always done it server side, but if that is not an option for you--and if I *do* understand what you want--then ask again and I think I can hack up an answer.

    I *assume* that you want this code so you can put it into a file that is included on all your pages, so you only have to code it once, yes?

  • #8
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, correct "button/link *FOR THE PAGE YOU ARE NOW ON* to appear differently than all the other buttons/links".

    PHP will be great then, can you send me private message, so there will not be any off topic.

    I understand, that PHP much better than JAVA, how roughly differ it will be?

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Not a PHP user, sorry.

    And I disagree about PHP being better than Java. Java is, I believe, much more powerful than PHP and has better tools, better diagnostics, and more.

    NOW...If you *meant* javaSCRIPT, then maybe I could agree, but they are really for completely different purposes. Each has an important use.

    Mayhap somebody else can show you how to do this in PHP.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I hope I've been explained
    Could you post a link to your page, so that we may be able to know how the things are arranged at your end.
    Specifically
    Code:
    <a href="index">Главная</a>
    what does that mean? What is that supposed to do?
    Last edited by abduraooft; 03-24-2009 at 11:25 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    I think he was just being sloppy and really meant href="index.html" or equivalent.

    Read my assumption as to what he *REALLY* wants. He says I'm right.

    Scenario:
    -- You have a set of navigation links that you are #include-ing in all your pages (.shtml pages or whatever).
    -- The llinks are all simple <a ...> links.
    -- You want the *appearance* of the link that represents the page you are currently on to be different from all the other links.

    Now, the best way to do that, my opinion, is to use server-side code and not even *HAVE* a link for the current page (just have text that looks like a link but isn't). And while you could do that with JS, it's simpler to do it in server-side processing.

  • #12
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    I prefer giving each page a class or id and then styling the active page's links using CSS. That way you can server-side include your menu (because it never changes a single character) and still be able to style your "active" page's menu item/link. There's no need for server-side coding and definitely no need for JS. (Not to bash Pedant, server-side handling is definitely an acceptable route, just not quite as slick in my opinion.)

    Something like:
    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=iso-8859-1" />
    <title>Example</title>
    <style type="text/css">
    #home #nav .home,#page1 #nav .page1,#page2 #nav .page2
    {
    /* active page menu item style */
    background-color: #ff0000;
    }
    </style>
    </head>
    <body id="home">
    
    <ul id="nav">
    	<li class="home"><a href="#">Home</a></li>
    	<li class="page1"><a href="#">Page 1</a></li>
    	<li class="page2"><a href="#">Page 2</a></li>
    </ul>
    
    </body>
    </html>
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,603
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    The only problem with that approach is that the user *CAN* still click on the link to the current page and thus cause a re-load of the page. Ehhh...okay, that's nit-picky, but still... I prefer to keep the current page's link inactive.

    Now, we could easily combine itsallkizza's answer with JS: Just have the JS code check the style (e.g., the backgroundColor?) and not allow the click if it indicates the current page. And that's probably the most elegant solution, actually.

  • #14
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Ah actually I didn't think of that (didn't pick up on your point in your previous post). I don't think that's nit-picky at all and since you can't disable a link via CSS alone perhaps Pedant's server-side approach is indeed better.

    Combining JS with CSS could also work... It's a bit less bullet-proof though, for future maintenance purposes.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #15
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    It's javascripts thread... but well, if no budy be angry at it

    So I got my solution by that way:


    .HTACCESS

    Code:
    # Various rewrite rules.
    <IfModule mod_rewrite.c>
    
    Options +FollowSymLinks
    
      RewriteEngine on
    
      # Rewrite current-style URLs of the form 'index.php?page=x'.
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteRule ^(.*)$ index.php?page=$1 [L,QSA]
    </IfModule>

    INDEX.PHP

    PHP Code:
    <!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>

    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>123</title>
    <link href="style.css" rel="stylesheet" type="text/css" media="all">

            <?php 

            $fot 
    ="/foto/";

            if( isset( 
    $HTTP_GET_VARS 'page' ])) 
            { 
            
    $sel $HTTP_GET_VARS 'page' ]; 
            } 
            else 
            { 
            
    $sel 'index' 
            }

            if (
    $sel == 'index'$menu1='h';
            if (
    $sel == 'news'$menu2='h';
            if (
    $sel == 'history'$menu3='h';
            if (
    $sel == 'science'$menu4='h';
            if (
    preg_match($fot,$sel)) $menu7="h";
            
            if (
    $sel == "foto"$foto 'fotoa';
            if (
    $sel == "foto1"$foto1 'fotoa';
            if (
    $sel == "foto2"$foto2 'fotoa';
            if (
    $sel == "foto3"$foto3 'fotoa';
            if (
    $sel == "foto4"$foto4 'fotoa';
            
    ?>

    </head>

    <body>

    <a name="top"></a>

    <div class='main'>

    <!-- ------------------------------------------- Left Column --------------------------------------------------- -->
        <div class='left_c_menu'>

            <img src="pics/bears.gif" class='menu_p' />

            <div class="menu_table">
                <img src="pics/lapa<?php echo $menu1?>.jpg" class="lapa" /><a href="index">Main</a>
                <br />
                <img src="pics/lapa<?php echo $menu2?>.jpg" class="lapa" /><a href="news">News</a>
                <br />
                <img src="pics/lapa<?php echo $menu3?>.jpg" class="lapa" /><a href="history">History</a>
                <br />
                <img src="pics/lapa<?php echo $menu4?>.jpg" class="lapa" /><a href="science">Science</a>
                <br />
                <img src="pics/lapa<?php echo $menu5?>.jpg" class="lapa" /><a href="education">Education</a>
            </div>

            <?php

            
    if ($sel == 'history') print '<a href="#" onclick="return GB_showImageSet(case5, 15)"><img src="pics/history/v01_p.jpg" class="foto_history" /></a>';
            if (
    $sel == 'science') print '<img src="pics/biol-tree.gif" class="foto_science1" />';
            if (
    $sel == 'science') print '<img src="pics/biol-bear.gif" class="foto_science2" />';
            
    ?>
        
        </div>

    <!-- ------------------------------------------- Main Column --------------------------------------------------- -->

        <div class='main_c'>

            <img src="pics/headers/

            <?php 

            
    if( isset( $HTTP_GET_VARS 'page' ])) 
            { 
            
    $sel $HTTP_GET_VARS 'page' ]; 
            } 
            else 
            { 
            
    $sel 'index' 
            }

            switch (
    $sel)

            {
            case 
    'index':
            echo
    'header.jpg"  /><img src="pics/epigraf.jpg" class="epigraf" />';
            echo
    '<img src="pics/les.jpg" class="les" />';
            break;

            case 
    'news':
            echo
    'history.jpg" />';
            break;

            case 
    'history':
            echo
    'history.jpg" />';
            include (
    "history_.html");
            break;

            case 
    'science':
            echo
    'nauka.jpg" />';
            include (
    "science_subjects.html");        
            include (
    "science_.html");
            break;

            case 
    'foto':
            echo
    'foto.jpg" />';
            include (
    "foto_subjects.html");        
            include (
    "foto_.html");
            break;

            case 
    'foto1':
            echo
    'foto.jpg" />';
            include (
    "foto_subjects.html");
            include (
    "foto1_.html");
            break;

            case 
    'foto2':
            echo
    'foto.jpg" />';
            include (
    "foto_subjects.html");
            include (
    "foto2_.html");
            break;

            case 
    'foto3':
            echo
    'foto.jpg" />';
            include (
    "foto_subjects.html");
            include (
    "foto3_.html");
            break;

            case 
    'foto4':
            echo
    'foto.jpg" />';
            include (
    "foto_subjects.html");
            include (
    "foto4_.html");
            break;;
            };
            
    ?>

        </div>

    </div>

    </body>
    </html>
    STYLE.CSS

    Code:
    body { color: black;  font-family:Geneva, Arial, Helvetica, sans-serif;}
    
    img {
    	border:0;
    }
    
    a:link { color: #000;outline:0; text-decoration:none}
    
    a:visited { color:#000;outline:0; text-decoration:none}
    
    a:hover { color:#c58c6c;outline:0; text-decoration:none}
    
    a:active { color:#c58c6c;outline:0;text-decoration:none}
    
    #links{color: blue; text-decoration: underline}
    
    .link:hover { color: #c58c6c}
    
    .link {color: black}
    
    /*	border-right:1px solid red;
    	border-left:1px solid red;
    	border-bottom:1px solid red;
    	border-top:1px solid red;
    */
    
    .main {
    	padding:0;
    	margin:auto;
    	width: 1000px;
    }
    
    /* ------------------------------------------- Left Column --------------------------------------------------- */
    
    .menu_p {
    	position:absolute;
    }
    
    .left_c_menu {
    			float:left;
    			width:360px;
    			height:100%;
    			text-align:top;
    }
    
    .menu_table {
    				width:140px;
    				line-height:35px;
    				margin: 220px 0px 0px 170px;
    				font-size:9pt;
    				position:relative;
    }
    
    .lapa {
    	margin: 0px 10px 0px 0px;
    	vertical-align:middle;
    
    }
    
    .foto_history {position:absolute; padding:2370px 0px 0px 30px}
    
    .foto_science1 {position:absolute; padding:870px 0px 0px 30px}
    
    .foto_science2 {position:absolute; padding:1870px 0px 0px 30px}
    
    /* ------------------------------------------- Main Column --------------------------------------------------- */
    
    .main_c {
    			float:left;
    			width:520px;
    			height:100%;
    			text-align:top;
    }
    
    .epigraf {
    	margin: 80px 0px 40px 0px;
    }
    
    .les{
    	position:relative; 
    	margin:0px 0px 15px 330px;
    }
    
    h1 { 
    	padding:0px 0px 0px 0px;	
    }
    
    .podrazdel {
    			padding:5px 0 5px 0;
    			margin: 0 0 10px 0;
    			border-top:6px groove #cccccc;
    			border-bottom:6px ridge #cccccc;
    			font-size:8pt;
    			line-height:20px;
    			font-weight:bold;
    }
    
    .podrazdel a:hover {color:#6bb460}
    
    #fotoa { color: #018e02}
    
    .foto_pr {
    	margin: 5px 5px 5px 5px;
    	}
    /* ------------------------------------------- Right Column --------------------------------------------------- */
    
    .right_c {
    			float:left;			
    			width:100px;
    			height:100%;
    			text-align:top;
    }

    FOTO_.HTML

    Code:
    <a href="#" onclick="return GB_showImageSet(case1, 1)"><img src="pics/museum/h01.jpg" class="foto_pr"/></A>
    <a href="#" onclick="return GB_showImageSet(case1, 2)"><img src="pics/museum/h02.jpg" class="foto_pr"/></A>
    <a href="#" onclick="return GB_showImageSet(case1, 3)"><img src="pics/museum/h03.jpg" class="foto_pr"/></A>
    <a href="#" onclick="return GB_showImageSet(case1, 4)"><img src="pics/museum/h04.jpg" class="foto_pr"/></A>
    FOTO_SUBJECTS.HTML

    PHP Code:
    <div class="podrazdel">
    <a href="foto" id="<?php echo $foto?>">• Bear House</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="foto1" id="<?php echo $foto1?>">• Ecoschool</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="foto2" id="<?php echo $foto2?>">• Nature</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="foto3" id="<?php echo $foto3?>">• Bears</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="foto4" id="<?php echo $foto4?>">• History</a>
    </div>
    Here we go...

    I used "isset( $HTTP_GET_VARS [ 'page' ]", is it a good idea? So it checks the name of the page and put according picture (active or passive significance) in the link menu. Did I write it correctly in a CODE upon?

    I will expand my thread for some questions:

    - If there is a way, to assign active and passive css style somehow also to the page "foto_subjects.html"? Right now I have for each link different style and precognition code in "index.php".

    - Is it the best way of putting link "foto" active by checking it with "if (preg_match($fot,$sel)) $menu7="h";"?

    - Does somebody know, another solution to put a picture with a style ".foto_history {position:absolute; padding:2370px 0px 0px 30px}" in place I want?

    - I used "isset( $HTTP_GET_VARS [ 'page' ]" for the including html pages, is it a best choice to do it?

    - Can I optimize somehow "foto" page, so I don't need to create html files for each foto page?

    Again... thank you very much, for suggestions and ideas beforehand!

    Positive respect, wish all of you sunny and bright smiles!
    Last edited by timuryn; 03-25-2009 at 07:43 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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