[RESOLVED] JavaScript for rollover images acting weird in PHP

GurlAnna

I have 2 navigation bars (top and bottom) on the site I'm working on that uses JavaScript functions to display a rollover image for the tabs. (Changes them from gray to white tabs.) There are 6 tabs on each nav bar. For some reason, only the last tab on each bar is functioning correctly in terms of the rollover...

The JavaScript functions are contained in header.php. Just to make sure there weren't any problems with the code itself, I tried putting the JavaScript in each of the files directly (topnav.php and bottomnav.php). When called directly on the server by themselves, the rollover worked fine but when called through index.php, only the last tab works. This is the case regardless of if the JavaScript is contained in the files themselves or in header.php...

Anyone have any ideas? This one is stumping me- seems weird that 2 out of the 12 tabs are working but not the others. Usually it's all or nothing! Thanks so much in advance for any help you can offer!!🙂

The problem is at [Sorry, but the Acceptible Use Policy does not allow such links. -- MOD]
{Please note, the site contains ADULT IMAGES}

RESOLVED: Removed JavaScript and used CSS to set link class attributes for achieving rollover images.

dougal85

I think you double posted this by mistake...

Anyway, I would imagine, since you have it working by adding it in directly, its before the javascript isn't getting loaded properly or its trying to do something before the files are loaded.

GurlAnna

I did and I can't find where to delete the duplicate post! Do you know how??

But about my issue - with the JavaScript in the file directly, it only works when the file is called independently on the server. It still didn't work when called through index.php...

Thanks - anymore ideas?

bpat1434

I see a few errors popping up:

1: The stylesheet ... was loaded as CSS even though its MIME type, "text/html", is not "text/css".

2: Error parsing value for property 'font-weight'. Declaration dropped.

3: redeclaration of function MM_swapImgRestore (line 26)

4: deprecated arguments usage (line 22)

Now, from what I remember, JS works best on well-formed documents. Notice that if you view your source, you have a <table> tag at the top, then you have a <body> tag, and later you have your HTML Doctype declaration followed by the <head> section.

I strongly urge you to rework your page(s) so that it's properly formatted. Also, try and get away from dreamweaver as it may be the culprit. Your "roll-over" effect can be achieved in a set of classes in CSS and an unordered list (or in your current table layout).

Essentially you'd have 1 background image for your button. Then, directly underneath it (say like 25 pixels down) is the "active" or "hover" styled button. In your CSS you'd declare a new background image for a link with a class "blog" and when rolled over, you'd move the background image up 25 pixels:

a.blog, a.blog:link, a.blog:visited {
    background:#fff url(/images/regular.jpg) no-repeat 0 0;
    width:100px;
    height:25px;
    display:block;
    color:#000;
}

a.blog:hover, a.blog:active {
    background-position: 0 -25px;
}

Do that for every link you want a roll-over for, and you're golden. Or, use one image and one class and just actually use the text "blog", "cast", "podcasts". Then you're down to 4 CSS declarations (two for the top, two for the bottom) and you're on your way to an easier site maintenance!!

bpat1434

GurlAnna: Please note that you can't link directly to your site because it's an adult oriented site. According to the Acceptable User Policy you can not post links to any adult oriented sites. As such, your links have been removed, and other links have been "cleaned".

Please adhere to this, or you risk being banned. We will help you, but please don't link (or post the URL) to your adult site.

GurlAnna

Sorry about the link - I won't post them again. Actually, in my other posts, I hadn't but so many people kept saying "need to see the code"...

Anyway, I have been meaning to just do it with CSS for ages but hadn't gotten around to it. I finally did it though and it works perfectly. Thanks! Still a couple little bugs to work out but I'll get to them. One of them, if you have any suggestions for a fix, is that on the bottom nav, I can't get the text link to be vertically centered on the image. Any ideas?

DreamWeaver does make a mess sometimes but I try not to use most of it's functions and stick to writing from scratch. I know, I definitely need to get the code cleaned up and formatted properly; working on it! Thanks for the tips. Also wondering if you could explain some of those errors to me...

1: The stylesheet ... was loaded as CSS even though its MIME type, "text/html", is not "text/css".

In the call to the CSS from header.php, it's referenced as "text/css." Where is the improper mime type / how do I change it?

2: Error parsing value for property 'font-weight'. Declaration dropped.

What is wrong with that value?

3: redeclaration of function MM_swapImgRestore (line 26)

Removed it.

4: deprecated arguments usage (line 22)

What does this mean?

And sorry but one more thing: the next step in getting the nav to work how it should is that when you're on one of the pages that has a tab, I want yet another background image to be displayed for that tab. How can I make a different image displayed based on what page the visitor is on?

Thanks so much for all your help 🙂

bpat1434

1.) It could be a weird thing with Apache not recognizing the CSS extension. Not really sure. Nothing to be really too worried about, just something that should probably be fixed if it can be.

2.) Font-weight should be bold, bolder, normal, light, or lighter. It can't be "none".

4.) It just means that the usage of allowing an arbitrary number of args in the function call is an old way, and there probably is a new way. I'm not too large on the JS stuff since I like to stay away from it and use pure CSS. The only JS I use is for AJAX and even that is fail-safed by my regular HTML & php pages....

As for highlighting the current tab, you can just create a new class called "current" or whatever you like and then define the background image for that class. Then, when you know what tab they're on, just add the class to that particular HTML element. i.e.:

<ul>
<li class="current"><a href="?p=home">Home</a></li>
<li><a href="?p=about">About Us</a></li>
</ul>

Vertically centering text inside an image can be tricky. Depending upon the browser means different positions. Your best bet is to use margins (as 90% of the browsers interpret them the same way) and get it as close as you can. If you're talking about an inline <img> tag, you can use vertical-align: center; to align the image vertically within the text.

GurlAnna

1.) It's css.php, which is what I thought I was supposed to do so maybe it's the PHP extension that's confusing things. Should it be .css?

2.) The value was "heavy" so I changed it to "bold." Don't even know why it was like that to begin with.

4.) Since I removed all of the JS, I guess this error should be gone now...

In terms of highlighting the current tab: the navbar isn't in the code for the individual pages, it is one file (topnav.php) that is called by index.php. So I can't change the html on the relative page for the class to accomplish that. (I hope I understood what you meant and that's what you were saying to do.) So is there a way to do it while still using the same topnav.php for each page?

For vertically centering, I will try your suggestions, play around with it and see what works.

Thanks again for your help - I'm obviously new to php 🙂

I tried adding a margin to the css for that class and it bumped the image down as well so that didn't work. And since the images are called from the css and not inline, I can't use the vertical-align:center; trick. Any other ideas?

bpat1434

If you are using PHP to dynamically create CSS, then you should send the Content-Type header and set it to text/css so that it's served as CSS. If you're not actually using PHP to dynamically create colors or settings, then just change it to a .css extension as it saves the PHP parser from having to go over it.

Well, surely there's got to be a way you can define what page you're on. Say if you're in about.php you set a variable called $page and have it's value set to "about". Then in topnav.php you just simply check to see what the value of $page is and if the link you're creating is the same one as in $page, then add the class. Something like:

<?php
$page = 'about';

include('topnav.php');
//... Continue with the rest of your page....

<?php

echo '<ul>
<li' . ($page == 'home' ? ' class="current"' : '') . '><a href="index.php">Home</a></li>
<li' . ($page == 'about' ? ' class="current"' : '') . '><a href="about.php">About Us</a></li>
<li' . ($page == 'contact' ? ' class="current"' : '') . '><a href="contact.php">Contact Us</a></li>
</ul>';

The usage here is a ternary operator that just checks for the value of $page and if it's the same as the link we're creating, then it adds the " class="current"" item. Hope that's understandable.

As for the images, you could wrap the text in a or tag and adjust the margins of the or tag and do it that way 🙂

GurlAnna

So I added the class 'topcurrent' to the css and added the $page="tgp" to the content page. My problem now lies in topnav.php. The links are actually in a table, each one in it's own cell, not an ordered list. So what I did was add the following inside the cell (and would presumably add the same snippet for each link):

<?php 
echo ' . ($page == 'tgp' ? ' class="topcurrent"' : '') . '><a href="index.php" class="topnav">TGP</a>; 
?>

But it gave me an unexpected T_STRING parse error. Is it a problem that the link also has a class ('topnav,' to accomplish the rollover)? Or is there something wrong with the code I put in there?

For the images, I tried enclosing the text in and also tried putting it in a and with the margin set but that didn't work either. What would the tag look like?

One other thing: you may have noticed that in a few of the boxes on the sidebar, the served ads push out of the box (which is set up as a table; working on making it a div class and pulling images from the css instead) and bleed the background image too. The table and cell has set widths so I can't figure out why it's still doing that. Any ideas?

Sorry I have so many questions 🙂

bpat1434

Oh, that's because you've messed up the quotes... it should be:

echo ($page == 'tgp' ? ' class="topcurrent"' : '') . '><a href="index.php" class="topnav">TGP</a>;

GurlAnna

I changed it to that and got an "unexpected $ in... line 21" parse error. What am I doing wrong!?

bpat1434

Oh, woops...try:

echo ($page == 'tgp' ? ' class="topcurrent"' : '') . '><a href="index.php" class="topnav">TGP</a>';

GurlAnna

Now the page loads with no parsing errors but it just put the text "class="topcurrent">" above the image/link...

bpat1434

Well, you have to put it in the right part of the HTML.....

GurlAnna

What do you mean? It's in a table cell like this:

<th width="98" height="26" scope="col">
<?php 
echo ($page == 'tgp' ? ' class="topcurrent"' : '') . '><a href="index.php" class="topnav">TGP</a>'; ?>
</th>

I'm sorry, I don't think I got what you meant. It seems like it is in the right part of the html.

bpat1434

It's in the right spot, but it's not necessarily outputting valid HTML. This is where you have to take time to look at the code, then look at what HTML is put onto the screen viewing the source. Then compare. You should notice invalid HTML....

So take the PHP and move the class outputting code to where it belongs. If it belongs in the <a> tag, then use this:

<th width="98" height="26" scope="col"><a href="index.php" class="topnav<?php $page=='tgp' ? ' topcurrent' : '' ?>">TGP</a></th>

GurlAnna

I used the code you gave me last but it didn't add anything to the html.
To get what looked like valid html when viewing the source, I tired this:

<th width="98" height="26" scope="col"><a href="index.php" class="topnav" <?php echo $page=='tgp' ? ' class="topcurrent"' : '' ?>>TGP</a></th>

But it didn't seem right to have 2 classes in the <a> tag. Plus, it didn't work. So I tried throwing it in a tag, which also output what looked like valid html, like this:

<th width="98" height="26" scope="col"><span <?php echo $page=='tgp' ? ' class="topcurrent"' : '' ?>><a href="index.php" class="topnav">TGP</a></span></th>

But it also didn't work. Can you have 2 classes in the <a> tag or would it be better to have it in a tag? I went ahead and posted the code I'm using in the CSS and in the page I'm trying to identify in case I'm making some other mistake.

.topcurrent {
    background:#fff url(/graphics/topnavact.jpg) no-repeat 0 0;
	width:98px;
    height:26px;
	display:block;
}

<?php 
$page = 'tgp';
?>

bpat1434

you can have as many classes as you want... the only thing is you can only use the "class" name once, and you separate multiple classes with a space:

<a href="index.php" class="topnav topcurrent">Home</a>

GurlAnna

Did that, html output looks right and changed it to a.topcurrent in the css. But it's not working...