active state on thumbnail?

dakey

06-28-2009, 12:40 PM

Hello, i have a list of thumbnails that are created dynamically from a database which have an transparency state when the thumbnail is in the active state (ie when someone clicks on it)

I wondered is there anyway that the first one could be set to active by default when the page initially loads. My code is below:

<script language="JavaScript" type="application/javascript">
<!--

function setMainImage(imageId) {
document.getElementById('main_image').src = "http://office.domain.com/images/portfolio/images/" + imageId + ".jpg";
}
</script>

<a href='#' id='thumbnail_image' onclick='setMainImage(133)' title=''>

this is the css that goes with it

a:active, a:focus {
background-color: #000;
opacity:0.4;
filter:alpha(opacity=20);
}

thanks

Old Pedant

06-29-2009, 03:13 AM

Just invoke the click method in code.

You'd probably want to give the first thumbnail's <a> a unique id, or maybe put all the thumbnails into an enclosing div.

Maybe like this:

<body onload="document.getElementById('wrapper').getElementsByTagName('A')[0].click();">

...
<div id="wrapper">
<a ....><img...></a>
<a ....><img...></a>
<a ....><img...></a>
<a ....><img...></a>
...
</div>

dakey

06-29-2009, 09:07 AM

thanks old pendant but that didn't seem to work. Below is my new code.

<body id="portfolio" onload="document.getElementById('portfolio-nav').getElementsByTagName('A')[0].click();">

<div class="portfolio-nav" id="portfolio-nav">
<ul>

<?
while ($row3=mysql_fetch_assoc($result_images)) {
print "<li><a href='#' id='thumbnail_image' onclick='setMainImage($row3[imageId])' title=''><img src='/images/tn_$row3[imageId].jpg' alt='' title='' /></a></li>";
}
?>

</ul>
<div id="next_thumbnail">
<a href="#" onclick='ajaxFunction()' title="Next" class="float-right clear-right"><strong>Next ></strong></a>
</div>
</div>

Old Pedant

06-29-2009, 10:33 PM

Ugh...you are right.

But I think there's an easy workaround:

<html>
<head>
<style>
a {
background-color: yellow; color: blue;
}
a:active, a:focus {
background-color: wheat;
}
</style>
</head>
<body onload="var x=document.getElementById('HOLD').getElementsByTagName('A')[0];x.click();x.focus();">

Stuff here
<hr>
<div id="HOLD">
<a href="#" onclick="this.style.color='red';">ONE</a>
<br/>
<a href="#" onclick="this.style.color='red';">TWO</a>
<br/>
<a href="#" onclick="this.style.color='red';">THREE</a>
<br/>
</div>
</body>
</html>

How's that?

dakey

06-30-2009, 09:08 AM

Sorry that doesn't work either. I created a page just on it's own with your code and it doesn't default the first one to active?

http://new.harrietdewinton.com/test.php

Here is the page that i need it on. The thumbnails at the bottom i need the first one to be transparent by default when the page initially loads.

http://new.harrietdewinton.com/portfolioNEW.php

thanks

mike182uk

06-30-2009, 10:47 AM

if i was doing it i would use the php to figure this out. because each page has its own id i would set a conditional in the navigation that sets a class on this element.

<a href="whatever" class="<?php if $_GET["id"] == 13 echo "CLASSNAME" ?>">First Link</a>

so...

each page is appeneded on the url http://new.harrietdewinton.com/portfolio.php?id=13

so use php to check this variable (id) and if id = 13 which is your home page write out the class name otherwise do nothing. so in between the quotes will be your defualt class.

this code may not be exact as ive done minimal php. but the thoery should be enough for you to work it out in php

dakey

06-30-2009, 12:41 PM

but that wouldn't work because when you clicked on one of the other thumbnails that first thumbnail would still remain in it's active state. Which is why i need it only on page load, then when another thumbnail is clicked the new one becomes active as it does now.

thanks

mike182uk

06-30-2009, 12:55 PM

sorry i didnt read your post correctly. for some reason i thought we were on about navigation lol

what about something like this

when the page loads run a script that compares the main-image src to the thumbnails src and which ever thumbnail src matches the main-image src set a class on that thumbnail

mike182uk

06-30-2009, 01:03 PM

give all your thumbnails a unique ID and the mainImage a unique id

window.onload = function(){

thumbnails = [];
thumbnails[0] = document.getElementById("thumbnail1").src
thumbnails[1] = document.getElementById("thumbnail2").src
thumbnails[2] = document.getElementById("thumbnail3").src
thumbnails[3] = document.getElementById("thumbnail4").src

mainImage = document.getElementById("mainImage").src

for(var i=0; i=thumbnails.length-1; i++){
if(thumbnails[i] == mainImage){
thumbnails[i].style.opacity: 0.5 //or whatever code you want to put in
}
}

}

so when the page loads if one of the thumbnails src matches the src of the main image apply opacity to that thumbnail.

ckeyrouz

06-30-2009, 05:48 PM

Can you try this in the onload:
<body onload="setMainImage(133);document.getElementById('thumbnail_image').className=focus;">

Old Pedant

06-30-2009, 09:12 PM

Firefox is just plain weird!

If I have this on a page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
a {
background-color: yellow; color: blue;
}
a:active, a:focus {
background-color: wheat;
}
</style>
</head>
<body>
Stuff here
<hr>
<div id="HOLD">
<a href="#" onfocus="alert('got focus');" onclick="alert('click one');this.style.color='red';">ONE</a>
<br/>
<a href="#" onclick="this.style.color='red';">TWO</a>
<br/>

<a href="#" onclick="this.style.color='red';">THREE</a>
<br/>
</div>
</body>
</html>

Then indeed if I click on either TWO and THREE both the background changes (to indicate active/focus) and the foreground changes (reflecting the onclick).

But if I click on ONE, I get the alert for the onfocus call but the color DOES NOT CHANGE! And the alert('one') does not show. That is, the "onfocus" has ABSORBED the click!

And it's the same thing when you invoke both from JS code.

Go figure.

But, hey, it's better than Chrome. Where the active state (background color change) only happens while the mouse is on the link.

Only MSIE supports both actions happening from a single click.

I'm sure there is some obscure rule, somewhere, that both FF and Chrome would site as the reason for their behavior. But quite frankly, the MSIE actions make more sense to me. (For once. This is not an endorsement of all of MSIE's many sins.)

Sorry.