...

View Full Version : With <a> class cannot change...



timuryn
03-23-2009, 10:18 PM
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:
<div class="menu" onclick="CngClass(this,'menua');"><a href="index">Главная</a></div>
CSS:
.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:

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

Eldarrion
03-23-2009, 10:50 PM
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.

Old Pedant
03-23-2009, 10:56 PM
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:


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:


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" ...>

Old Pedant
03-23-2009, 10:56 PM
Eldarrion: But what's the point of changing the background if the whole page is going away instantly??

TinyScript
03-23-2009, 10:56 PM
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?

timuryn
03-24-2009, 03:20 AM
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!

Old Pedant
03-24-2009, 03:56 AM
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?

timuryn
03-24-2009, 04:32 AM
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?

Old Pedant
03-24-2009, 10:59 AM
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.

abduraooft
03-24-2009, 11:22 AM
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

<a href="index">Главная</a> what does that mean? What is that supposed to do?

Old Pedant
03-24-2009, 09:55 PM
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.

itsallkizza
03-24-2009, 10:36 PM
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:


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

Old Pedant
03-24-2009, 11:32 PM
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.

itsallkizza
03-24-2009, 11:47 PM
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.

timuryn
03-25-2009, 07:37 AM
It's javascripts thread... but well, if no budy be angry at it :)

So I got my solution by that way:


.HTACCESS


# 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


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


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


<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


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

Old Pedant
03-25-2009, 09:04 PM
Exactly what I was talking about!

I'm surprised it was so complex. I was expecting an answer in maybe 5 to 6 lines of PHP code (would have been about that in ASP), but never mind. If it works, it works.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum