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 11 of 11
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation active state on thumbnail?

    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:

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

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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    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:
    Code:
    <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>

  • #3
    New to the CF scene
    Join Date
    May 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks old pendant but that didn't seem to work. Below is my new code.

    Code:
    <body id="portfolio" onload="document.getElementById('portfolio-nav').getElementsByTagName('A')[0].click();">
    Code:
    <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>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    Ugh...you are right.

    But I think there's an easy workaround:
    Code:
    <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?

  • #5
    New to the CF scene
    Join Date
    May 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    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.

    Code:
    <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
    Last edited by mike182uk; 06-30-2009 at 10:51 AM.

  • #7
    New to the CF scene
    Join Date
    May 2004
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    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

  • #9
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    give all your thumbnails a unique ID and the mainImage a unique id

    Code:
    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.

  • #10
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Can you try this in the onload:
    <body onload="setMainImage(133);document.getElementById('thumbnail_image').className=focus;">

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    Firefox is just plain weird!

    If I have this on a page:
    Code:
    <!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.


  •  

    Posting Permissions

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