CSS Loading Images Issue

Sorry URL is here http://www.1tm.com/index2.html

No, it’s not good. W/o JS, your .panel divs are covering the content.

I believe the problem really is your markup. It’s a complete nonsense that should be redone starting NOW! :slight_smile:



<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3">                                                                  </font></font></font></font></font></font></font></font></font></font></font><p style="line-height: 240%; margin: 10px 15px 0pt;" align="justify">
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3">                                                                  <font color="#666666" face="Arial" size="3">Welcome to 1 Tech Media the leader of cheap WHM / cPanel™ hosting, professional web design, and professional script installation services on the internet. We offer </font><font color="#666666" face="Arial" size="3"> 
                                                                  <a href="cpanel_web_hosting.html"><font color="#737373"><b>Cheap cPanel™ Web Hosting</b></font></a><font size="3"> to help you make your online presence get noticed.</font><font face="Arial" size="3"> We offer cPanel™ web hosting with unlimited storage space and unlimited file transfer so you can rest assured you will never be billed for going over the limits.</font></font></font></font></font></font></font></font></font></font></font></font></font></p>

<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3">                                                                  </font></font></font></font></font></font></font></font></font></font></font></font><p style="line-height: 240%; margin: 10px 15px 0pt;" align="justify">
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3">                                                                  <font color="#666666" face="Arial" size="3">Our
                                                                  <a href="whm_cpanel_reseller_hosting.html"><font color="#737373"><b>Cheap WHM / cPanel™ Reseller Hosting</b></font></a><font size="3"> solution was designed to help you to improve your sales by offering superior support and fast servers. WHM / cPanel™ reseller accounts come with unlimited storage space and unlimited file transfer so you can watch your business grow without boundaries.</font></font></font></font></font></font></font></font></font></font></font></font></font></font></p>

<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  </font></font></font></font></font></font></font></font></font></font></font></font></font><p style="line-height: 240%; margin: 10px 15px 0pt;" align="justify">
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  <font color="#666666" face="Arial" size="3">1 Tech Media  offers&nbsp; unlimited 
                                                                  <a href="whm_cpanel_master_reseller_hosting.html"><font color="#737373">
                                                                  <b>WHM / cPanel™ Master Reseller Hosting</b></font></a><font color="#666666" size="3"> which is designed for serious web hosting companies who would like to create reseller accounts for their clients. Instantly create unlimited reseller accounts from your master WHM / cPanel™ control panel.</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></p>
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  
                                                                  </font></font></font></font></font></font></font></font></font></font></font></font></font></font><p style="line-height: 240%; margin: 10px 15px 0pt;" align="justify">
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  <font color="#666666" face="Arial" size="3">One of our most unique plans is our unlimited
                                                                   <a href="whm_cpanel_alpha_reseller_hosting.html"><font color="#737373">
                                                                  <b>WHM / cPanel™ Alpha Reseller Hosting</b></font></a><font color="#666666" size="3"> solution where you can create unlimited WHM / cPanel™ master reseller accounts, unlimited WHM / cPanel™ reseller accounts, and unlimited regular cPanel™ accounts for your clients.</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></p>
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  
                                                                  </font></font></font></font></font></font></font></font></font></font></font></font></font></font></font><p style="line-height: 240%; margin: 10px 15px 0pt;" align="justify">
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  <font color="#666666" face="Arial" size="3">We offer
                                                                  <a href="whm_cpanel_virtual_private_server.html">
                                                                  <font color="#737373"><b>WHM / cPanel Virtual Private Server</b></font></a><font face="Arial" size="3"> service where you get complete control over the server. This cheap virtual private server "VPS"  includes WHM / cPanel™ where you can create unlimited cPanel™ accounts. Also included is Fantastico which automates the installation of scripts for your websites.</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></p>
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  
                                                                  </font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font><p style="line-height: 240%; margin: 10px 15px 0pt;" align="justify">
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  <font color="#666666" face="Arial" size="3">If you have allot of server activity we recommend our
                                                                  <a href="cpanel_semi_dedicated_server.html">
                                                                  <font color="#737373"><b>Semi-Dedicated Server</b></font></a><font size="3"> where you get massive amounts of server resources and very small amount of clients on the server. This will make your website a powerhouse and it includes 5,000 GB file transfer.</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></p>

<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  </font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font><p style="line-height: 240%; margin: 10px 15px 0pt;" align="justify">
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  <font color="#666666" face="Arial" size="3">Our
                                                                  <a href="professional_web_design.html">
                                                                  <font color="#737373"><b>Professional Web Design</b></font></a><font face="Arial" size="3"> service is very popular for creating high-end websites that deliver results. We will work with you to create your perfect website using advanced designing software and creative designers.</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></p>
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  
                                                                  </font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font><p style="line-height: 240%; margin: 10px 15px 0pt;" align="justify">
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  <font color="#666666" face="Arial" size="3">Our
                                                                  <a href="professional_script_installation.html">
                                                                  <font color="#737373"><b>Cheap Professional Script Installation</b></font></a><font face="Arial" size="3"> is very affordable and most script installations are installed in less then 12 hours. We have installed many scripts for clients and use advance installation techniques.</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></p>

<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  </font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font><p style="line-height: 240%; margin: 10px 15px 0pt;" align="justify">
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  <font color="#666666" face="Arial" size="3">
                                                                  With our WHM/cPanel web hosting services, web design, and script installation <b><a href="free_affiliate_program.html">
                                                                  <font color="#666666">Free Affiliate Program</font></a></b> clients get an affiliate control panel, affiliate campaign tracking, real-time statistics,  banners and links</font><font face="Arial" size="3">, and 24 / 7 support tickets &amp; chat. Payments are sent out weekly via check as long as you have made $25 or more. There is absolutely no setup cost and signing-up is 100% free.</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></p>
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">                                                                  </font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font><p style="line-height: 240%; margin: 10px 15px 0pt;" align="justify"><font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">&nbsp;</font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></p>
<font face="Tahoma"><font face="Arial"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font size="2"><font face="Arial"><font color="#666666" size="3"><font color="#666666" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3"><font color="#666666" face="Arial" size="3">    
    <img src="reseller_hosting_2.gif" class="loadpic">

    <img src="virtual_private_server_2.gif" class="loadpic">

    <img src="semi_dedicated_server_2.gif" class="loadpic">

    <img src="web_hosting_3.gif" class="loadpic">

    <img src="web_design_3.gif" class="loadpic">

    <img src="script_installation_3.gif" class="loadpic">

    <img src="whm_cpanel_reseller_hosting.gif" class="loadpic">
    
    <img src="whm_cpanel_master_reseller_hosting.gif" class="loadpic">
    
    <img src="whm_cpanel_alpha_reseller_hosting.gif" class="loadpic">
    
    <img src="whm_cpanel_virtual_private_server.gif" class="loadpic">
    
    <img src="cpanel_semi_dedicated_server.gif" class="loadpic">
    
    <img src="professional_web_design.gif" class="loadpic">
    
    <img src="professional_script_installation.gif" class="loadpic">

    </font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font></font>

lol

Lets just focus on fixing this first, im going to redo most of the code later.

Neh, the two are connected, that’s my point.

You complain the page is loading slow. First two steps: optimize code, optimize images. Period.

Hi noonope is right and your images in that panel are 50k each and I’m sure with a bit of optimising they could be reduced to half that. If you don’t have a capable paint package there are plenty of free image optimising sites about that you can use to optimise them.

As a temporary measure you could change the code I gave you to this.


<style type="text/css">
[B].hide {
    height:220px;[/B]
}
</style>
<script type="text/javascript">
if (document.getElementById) { // include all feature tests needed
                               // for your DOM script
   document.write('<style type="text/css">[B].hide {visibility:hidden}</style>')[/B];
}
</script>
<script type="text/javascript" src="http://www.1tm.com/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
 [B]  $(".hide").show(); [/B]
}
</script>


Then add that class to the div that is holding the table.


    <td style="vertical-align: middle" align="center">
     <div align="right" [B]class="hide">[/B]
          <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"  bordercolor="#111111" width="50">
                                                            <tr>
                                                                <td align="right"><p align="center">
                                                                    <div id="photos" class="galleryview">
                                                                        <div class="panel" s

I can’t test this locally buy hopefully it will hide anything else that is in that table.

Whatever happened to the re-write you said you were going to do :slight_smile:

Reduced the images by half and have it now live working on my website :slight_smile: I do get one error in IE:

Errors on this webpage might cause it to work incorrectly
Expected ‘)’

code: 0 URI http://www.1tm.com
Line: 24
Char: 1

Yes we have been really busy but the code will be gold in a month.

Justin

There’s a missing bracket at the end here before the closing script tag:


<script type="text/javascript">
$(document).ready(function() { 
   $(".hide").show(); 
[B]});[/B]
</script>

It worked thank you Paul. This sitepoint is the best forum on the entire net cause webmasterworld is out of the picture now.

One last thing the shadow border around the images are not showing anymore.

Thanks!

Justin

Hmm, try changing this:

$(“.hide”).show();

To this:

$(“.hide”).css(‘visibility’,'‘visible’);

e.g.


<script type="text/javascript">
$(document).ready(function() { 
     $(".hide").css('visibility','visible'); 
});
</script>


It’s hard to test locally because the shadow images don’t show when I copy locally for testing anyway.

No didn’t work same thing without the shadows.

Your page hasn’t been updated with the new code so I can’t check. Update the page and I’ll take another look.

I updated the code

Thanks

You added in an extra quote mark that wasn’t in my code above.


$(document).ready(function() { 
   $(".hide").css('visibility'[B],''visible'); [/B]  
});

It should be:


$(document).ready(function() { 
   $(".hide").css('visibility'[B],'visible'); [/B]  
});

Try that :slight_smile:

That was it Paul once again you pull threw with results.

Thanks!