Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

flash and hidden div loading problem

Status
Not open for further replies.
btween

btween

Programmer
Aug 7, 2003
338
US
I have a flash movie that's about 9 megs. The movie is nested in a div that has display set to none.

The problem is that when I try to load the page in the browser, it hangs for about 30 seconds when it gets to the html part that contains the hidden div.

If I make the div visible and try to load the page in the browser, the page loads right away and the flash starts playing.

I don't know why this is happening but I think that the page is trying to load the flash into memory completely before it continues loading the rest of the page. Is there a way to make the page load faster, ignoring loading the whole flash. The flash does not need to start loading until the div is made visible by pressing a button on the html page.

-------------------------------

My second question is, and I don't know whether I should post this here or in the javascript page, I need to create a flash button that 1 stops the movie, and 2 simultaneously sets the encapsulating div display to none.

thanks for your help

 
Sort by date Sort by votes
can you please be more specific. I'm not sure what the innerHTML property can do for me.

 
Upvote 0 Downvote
Flash content "invisible":
yourDIV.innerHTML = ""

Flash content "visible":
yourDIV.innerHTML = "<object> and <embed> ..."

This strategy may work for you because when innerHTML is empty initially, there's no Flash object and it won't download your Flash content until you create one by changing innerHTML. Just an idea.


Kenneth Kawamoto
 
Upvote 0 Downvote
so you're saying use a javascript that toggles between the 2 versions of the div?

right now this is what I have:

Code: 
<div id="1" style="position:absolute; display:none; left:305px; top:0px; width:492px; height:382px; z-index:1">
		  <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#333333">
            <tr>
              <th bgcolor="#333333" scope="col"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <th bgcolor="#FFFFFF" scope="col"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"[/URL] width="490" height="360" title="expander">
                      <param name="movie" value="flash/expander.swf" />
                      <param name="quality" value="high" />
                      <embed src="flash/expander.swf" quality="high" pluginspage="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer"[/URL] type="application/x-shockwave-flash" width="490" height="360"></embed>
                    </object><script type="text/javascript" src="fixit.js"></script></th>
                </tr>
                <tr>
                  <th bgcolor="#FFFFFF" scope="col"><a href="#" onclick="blah('1'); return false;"><img src="images/close.jpg" width="168" height="20" border="0" /></a></th>
                </tr>
              </table></th>
            </tr>
          </table>
		</div>

the function that toggles it is this:

Code: 
function blah(openID) {

    var d = document.getElementById('myCell').getElementsByTagName("div");

    for ( var i = 0; i < d.length; i++ ) {

        d[i].style.display = (d[i].id == openID) ? '' : 'none';

    }

}

how could I impolement the innerhtml?
 
Upvote 0 Downvote
I'm sorry,

there are actually 2 divs, one overlapping the other. I will post the code below. Regardless though, I could invoke this from outside the div. It would be great if you could help me figure out how to use this innerhtml.

Code: 
<div id="1" style="position:absolute; display:none; left:550px; top:147px; width:150px; height:160px; z-index:1">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <th scope="col"><img src="images/choose.gif" width="197" height="28" /></th>
                  </tr>
                  <tr>
                    <th scope="col"><a href="#" onClick="blah('2'); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('women','','images/want_over.gif',1)"><img src="images/want_down.gif" name="women" width="178" height="29" border="0" id="women" /></a></th>
                  </tr>
                  <tr>
                    <th scope="col"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('national','','images/national_over.gif',1)"><img src="images/national_down.gif" name="national" width="178" height="31" border="0" id="national" /></a></th>
                  </tr>
                </table>
            </div>
			<div id="2" style="position:absolute; display:none; left:305px; top:0px; width:492px; height:382px; z-index:1">
		  <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#333333">
            <tr>
              <th bgcolor="#333333" scope="col"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <th bgcolor="#FFFFFF" scope="col"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"[/URL] width="490" height="360" title="expander">
                      <param name="movie" value="flash/expander.swf" />
                      <param name="quality" value="high" />
                      <embed src="flash/expander.swf" quality="high" pluginspage="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer"[/URL] type="application/x-shockwave-flash" width="490" height="360"></embed>
                    </object><script type="text/javascript" src="fixit.js"></script></th>
                </tr>
                <tr>
                  <th bgcolor="#FFFFFF" scope="col"><a href="#" onclick="blah('1'); return false;"><img src="images/close.jpg" width="168" height="20" border="0" /></a></th>
                </tr>
              </table></th>
            </tr>
          </table>
		</div>
 
Upvote 0 Downvote
Here's the code example. I simplified your Div1 to avoid clutter. I also changed Div1 z-index to 2 so that it goes on top of Div2, otherwise you cannot click anything in Firefox as Div1 will be covered by Div2.

Javascript
Code: 
var div1html = "";
div1html += "<table width='100%' border='0' cellspacing='0' cellpadding='0'>\n";
div1html += "<tr><th scope='col'><img src='images/choose.gif' width='197' height='28' /></th></tr>\n";
div1html += "<tr><th scope='col'><a href='#' onclick='blah(2); return false;'><img src='images/want_down.gif' name='women' width='178' height='29' border='0' id='women' /></a></th></tr>\n";
div1html += "<tr><th scope='col'><a href='#'><img src='images/national_down.gif' name='national' width='178' height='31' border='0' id='national' /></a></th></tr>\n";
div1html += "</table>";

var div2html = "";
div2html += "<table width='100%' border='0' cellpadding='0' cellspacing='1' bgcolor='#333333'>\n";
div2html += "<tr><th bgcolor='#333333' scope='col'><table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0'>\n";
div2html += "<tr><th bgcolor='#FFFFFF' scope='col'>\n";
div2html += "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0'[/URL] width='490' height='360' title='expander'>\n";
div2html += "<param name='movie' value='flash/expander.swf' />\n"
div2html += "<param name='quality' value='high' />\n";
div2html += "<embed src='flash/expander.swf' quality='high' pluginspage='[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer'[/URL] type='application/x-shockwave-flash' width='490' height='360'></embed>\n";
div2html += "</object>\n";
div2html += "<script type='text/javascript' src='fixit.js'></script>\n";
div2html += "</th></tr>\n";
div2html += "<tr><th bgcolor='#FFFFFF' scope='col'><a href='#' onclick='blah(1)'; return false;'><img src='images/close.jpg' width='168' height='20' border='0' /></a>						</th></tr>\n";
div2html += "</table></th></tr></table>";

var innerHTMLArray = [div1html, div2html];

function blah(openID) {
	var d = document.getElementById("myCell").getElementsByTagName("div");
	for ( var i = 0; i < d.length; i++ ) {
		d[i].id == openID ? d[i].innerHTML = innerHTMLArray[i] :  d[i].innerHTML = "";
	}
}

HTML
Code: 
<div id="1" style="position:absolute; left:550px; top:147px; width:150px; height:160px; z-index:2" ></div>
<div id="2" style="position:absolute; left:305px; top:0px; width:492px; height:382px; z-index:1"></div>

Kenneth Kawamoto
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

69ashton
  • Locked
  • Question
put items in correct boxes code for flash
Replies
3
Views
330
Elia Watson
Elia Watson
dazz179
  • Locked
  • Question
Flash Website Problem
Replies
0
Views
272
dazz179
dazz179
DDD707
  • Locked
  • Question
Flash Replacement Software
Replies
0
Views
274
DDD707
DDD707
mariegoround
  • Locked
  • Question
Bone Tool Problem Flash CS6 (Please Help)
Replies
0
Views
285
mariegoround
mariegoround
jefargrafx
  • Locked
  • Question
porting a C# app into flash
Replies
0
Views
273
jefargrafx
jefargrafx

Part and Inventory Search

Sponsor

Back
Top