Unable to get Images visible, Chrome says Element is hidden

Question

jreddick82 0 Newbie Poster

15 Years Ago

I am unsure what is going on with my website? I had flash on it, and I have removed the flash and installed javascript. Everything is installed correctly from what I can see, when I go to the view page button on Dreamweaver the images rotate. When I upload it to my server they stop rotating.I have download all of the files needed for this to work, and have added them all to my server. Here is a copy of the coding.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="fadeslideshow.js"> 
 
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
 
</script> 
 
<script type="text/javascript"> 
 
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [795, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["Courthouse.jpg", "", "_new", "Olivos Del Mar Ranch 12477 Calle Real $8,999,000"],
["harbor.jpg", "", "", "Exceptional Contemporary Hacienda $2,195,000 1656 Las Canoas"],
["harborlights.jpg", "", "", "Spanish Style Properties Available"],
["dolphins - Copy.jpg", "", "", "Luxury Santa Barbara Estates"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script> 
<script type="text/javascript"> <script type="text/JavaScript" src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<!-- InstanceEndEditable -->
<meta name="Description" content="Real Estate in Santa Barbara, Hope Ranch, Montecito, Goleta, Carpinteria & Summerland California.">
<meta name="KeyWords" content="santa barbara real estate, video, santa barbara, ojai, montecito real estate,
summerland real estate, goleta real estate, santa barbara wineries, hope ranch california real estate, 
Ocean Views, Oceanfront, Luxury Homes, santa barbara hotels, beach house">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel=stylesheet type=text/css href="css/home.css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">

<!--
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

//-->
</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="MM_preloadImages('/images/home-worth-over.jpg')">
<table align="center">
  <tr>
    <td><a href="sitemap.html" class="Drop-Dow-Text"> sitemap</a> </td>
  </tr>
  <tr>
    <td align="center" valign="top" class="home_bgtop" style="height: 149px"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="580" align="center" valign="bottom" background="images/background-header.jpg"><img src="images/Santa-Barbara.jpg" width="500" height="56"></td>
          <td width="580" height="48" align="left" valign="bottom" background="images/background-header.jpg"><a href="http://www.phototoursidx.com/sb/search.php?cid=379"><img src="images/searchmls.gif" name="Image2" width="200" height="56" border="0" id="Image2"></a></td>
        </tr>
      </table>
      <br>
      <div id="jm-menu" style="width:1160px;margin:0 auto;background-color:#687D98;height:28px;border:1px solid #ccc;">
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="index.htm">Home </a></li>
        <li><a href="http://www.phototoursidx.com/sb/search.php?cid=379" class="MenuBarItemSubmenu">Listings</a>
          <ul>
            <li><a href="http://www.phototoursidx.com/sb/search.php?cid=379">Search MLS</a></li>
            <li><a href="santa_barbara_real_estate.htm">Santa Barbara Real Estate</a></li>
            <li><a href="montecito_california_real_estate.htm">Montecito Real Estate</a></li>
            <li><a href="hope_ranch_california_real_estate.htm">Hope Ranch Real Estate</a></li>
            <li><a href="goleta_real_estate.htm">Goleta Real Estate</a></li>
            <li><a href="summerland_ca_real_estate.htm">Summerland Real Estate</a></li>
            <li><a href="video.htm">Video</a></li>
          </ul>
        </li>
        <li><a href="santa_barbara_real_estate.htm" class="MenuBarItemSubmenu">Santa Barbara</a>
          <ul>
            <li><a href="santa_barbara_real_estate.htm">Santa Barbara Real Estate</a></li>
            <li><a href="local_attractions.htm">Local Attractions</a></li>
            <li><a href="santa_barbara_shopping.html">Shopping Paradise</a></li>
            <li><a href="santa_barbara_events.html">Santa Barbara Events</a></li>
            <li><a href="santa_barbara_city_utilities.html">Santa Barbara City &amp; Utility Contacts</a></li>
            <li><a href="transportation_health-services.htm">Transportation &amp; Health Services</a></li>
            <li><a href="news_media.htm">Local News Media</a></li>
            <li><a href="Santa_Barbara_activities.pdf">Complete Relocation Guide to Santa Barbara</a></li>
          </ul>
        </li>
        <li><a href="montecito_california_real_estate.htm" class="MenuBarItemSubmenu">Montecito</a>
          <ul>
            <li><a href="montecito_california_real_estate.htm">Montecito Real Estate</a></li>
            <li><a href="montecito_hotels.htm">Montecito Hotels</a></li>
            <li><a href="montecito_inn_santa_barbara.htm">Montecito Inn Santa Barbara</a></li>
          </ul>
        </li>
        <li><a class="MenuBarItemSubmenu" href="summerland_california.htm">Summerland</a>
          <ul>
            <li><a href="summerland_ca_real_estate.htm">Summerland Real Estate</a> </li>
            <li><a href="summerland_california_bed_and_breakfast.htm">Summerland Bed and Breakfast</a></li>
            <li><a href="summerland_california.htm">Summerland California</a></li>
          </ul>
        </li>
        <li><a href="hope_ranch_california_real_estate.htm" class="MenuBarItemSubmenu">Hope Ranch</a>
          <ul>
            <li><a href="hope_ranch_ca_real_estate.htm">Hope Ranch Real Estate</a></li>
            <li><a href="hope_ranch_homes.htm">Hope Ranch Homes</a></li>
            <li><a href="hope_ranch_santa_barbara.htm">Hope Ranch Santa Barbara</a></li>
          </ul>
        </li>
        <li><a href="testimonials.htm">Testimonials</a></li>
        <li><a href="contact.htm">Contact</a></li>
        <li><a class="MenuBarItemSubmenu" href="video.htm">Jons Videos</a>
          <ul>
            <li><a href="attractions.htm">Santa Barbara Area Attractions</a> </li>
          </ul>
        </li>
      </ul>
      </div>
      <br>
      <br>
      <script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle"><!-- InstanceBeginEditable name="EditRegion1" -->
      <table width="786" border="0">
        <tr visible="true"><div id="fadeshow1"></div>
          <th width="780" bgcolor="#43576F" enableviewstate="true" visible="true"> 
		  <div id="fadeshow1" visible="true" enableviewstate="true"></div>
</th>
        </tr>
      </table>

Besides making a website in tables which I know is not SEO friendly, can someone please assist with what I may be doing wrong here? I have tested it on my other site and it works just fine.

graphics:image html-css javascript

Edited 15 Years Ago by jreddick82 because: Did not want links to website in the coding

1 Contributor
1 Reply
245 Views
6 Hours Discussion Span
Latest Post 15 Years Ago Latest Post by jreddick82

Dani AI

Generated 7 Months Ago

Good catch, — when a slideshow works in Dreamweaver’s preview but not on the live host it usually comes down to environmental differences between local and server. The following compact checklist explains the frequent culprits and how to verify them quickly so the same problem is less likely to recur.

Use Chrome’s DevTools first: the Network tab shows missing resources (404/403) and blocked requests, and the Console shows JavaScript errors. Right‑click a broken image and “Open image in new tab” to see the exact URL the server is returning. A live 404 or a blocked resource almost always points to an upload, path, or permissions issue rather than the slideshow code itself.

Pay attention to host differences: many local dev machines are case‑insensitive while Linux servers are not, so filename capitalization must match exactly. Filenames containing spaces or special characters create URL‑encoding headaches — rename to hyphens/underscores. Verify file permissions (files readable by the webserver, typically 644). Also check for mixed‑content blocking (loading HTTP assets from an HTTPS page) and confirm external libraries are loaded with correct protocol.

Check the markup and script wiring: the slideshow needs a single container and the plugin script loaded after its library dependency (jQuery). Malformed or nested <script> tags, duplicate element IDs, CSS rules that set display:none/visibility:hidden or zero width/height, and z‑index positioning can all cause Chrome to report the element as hidden. Inspect the computed styles in DevTools to see which rule is hiding the element. Clear caches or use an incognito window to avoid stale files.

These steps cover the most common differences between local preview and a live server. They make it straightforward to isolate whether the problem is a missing file, a server permission/case issue, a blocked mixed resource, or a markup/CSS/JS sequencing problem.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jreddick82 0 Newbie Poster · Answer 1 · 2011-03-17T13:02:55+00:00

The problem was the links to the images and the javascript file. I did not put a / before everything so what ended up happening was that it was just a black background.