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 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts

    trouble fading in images onload of site

    I had this script that worked at one point, but now after chaing the content to load, nothing hides anymore or fades in or out. I have tried to revert it back to what it origanlly was but nothing works still.

    here is the code that I am currently using

    Code:
    <script type="text/javascript">
    <!-- we run in the footer so no need to use onload -->
      $('#photo img').load(function() {
      	$("span#options").hide();
      	$("span.gallery").hide();
      	$("table.contact").hide();
      	$("span.form").hide();
      	$("#zoe").hide();
      	$("img.gradualshine").hide();
        	$("#zoe").slideDown(3000, function(){
        	$("span#options").slideDown(1000);
            $("img#photo").slideDown(1000);
            $("img#illus").slideDown(1000);
            $("img#grphc").slideDown(1000);
          });
        });
    </script>
    The stuff I am slideDown is:

    Code:
      <span id="options" class="display">
      
      <img src="/photo_site/th_photo.png" class="gradualshine" 
     onmouseover="slowhigh(this)" style="opacity:0.6; filter: alpha(opacity=60);"
     onmouseout="slowlow(this)" alt="photographers" id="photo" hspace="5" vspace="5"/>
     
       <img src="/photo_site/th_illus.png" class="gradualshine" 
     onmouseover="slowhigh(this)" style="opacity:0.6; filter: alpha(opacity=60);"
     onmouseout="slowlow(this)" alt="illustrators" id="illus" hspace="5" vspace="5"/>
     
       <img src="/photo_site/th_grphc.png" class="gradualshine" 
     onmouseover="slowhigh(this)" style="opacity:0.6; filter: alpha(opacity=60);"
     onmouseout="slowlow(this)" alt="graphic designers" id="grphc" hspace="5" vspace="5"/>
      </span>
    
    so far the css="display" is set to none.
    
    Here is the link if you need anymore info.
    
    http://royalvillicus.com/photo_site/photo.html
    
    Thanks a lot for your help

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    And the problem comes from:

    Code:
    .display {
    	display: none;
    }
    If you remove that, it will definitely achieve the desired result. There really is no reason to have it either, considering you're hiding the same object here:

    Code:
    $("span#options").hide();
    Though why would you want to hide and show it again is really beyond me, but eh...
    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
    Regular Coder
    Join Date
    May 2008
    Posts
    446
    Thanks
    23
    Thanked 5 Times in 5 Posts
    well I originally had it set to display normal or default and it still didnt work. It seems that none of the functions I wrote in the jquery I provided no longer work at all. its like its being completely ignored. Right I have told jquery twice to hide() the two elements inside the contact table, but still it shows. The way I can get it to hide right now is with css.

    Thanks a lot for your help


  •  

    Posting Permissions

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