You are not logged in. Please login or register.
SimpleViewer Forum → SimpleViewer-Pro v2 → How do I give SimpleViewer a transparent background?
referring to this http://simpleviewer.net/simpleviewer/su … ml#embed_5
i had tried to add the code into the exiting html, but why mozilla cannot support it? only IE support the transparent command?
Using wmode to enable a transparent background works in firefox, the issue could be in how you are implementing it. What is the URL of the page you are having issues with?
this is the code i'm using
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SimpleViewer</title>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
body {
background-color: #ffffff;
font: .8em/1.3em verdana,arial,helvetica,sans-serif;
}
#header {
background-color: #dddddd;
width: 100%;
height: 60px;
}
#footer {
background-color: #dddddd;
width: 100%;
height: 40px;
}
#flashcontent {
width: 100%;
height: 640px;
}
</style>
<link rel="stylesheet" type="text/css" href="chromemenu/chrometheme/chromestyle.css" />
<script type="text/javascript" src="chromemenu/chromejs/chrome.js"></script>
</script>
</head>
<body>
<div id="header">This is the header. <a href="fixed_height.zip">Download this example here</a>.
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="">test1</a>
<a href="">test2</a>
<a href="">test3</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="">CNN</a>
<a href="">MSNBC</a>
<a href="">BBC News</a>
</div>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
<div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash.</a></div>
<script type="text/javascript">
params.wmode = "transparent";
var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");
// SIMPLEVIEWER CONFIGURATION OPTIONS
// To use an option, uncomment it by removing the "//" at the start of the line
// For a description of config options, go to:
// http://www.airtightinteractive.com/simpleviewer/options.html
//fo.addVariable("xmlDataPath", "gallery.xml");
//fo.addVariable("firstImageIndex", "5");
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
//fo.addVariable("preloaderColor", "0xFFFFFF");
fo.write("flashcontent");
</script>
<div id="footer">This is the footer</div>
</body>
</html><script type="text/javascript">
params.wmode = "transparent";
var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");
// SIMPLEVIEWER CONFIGURATION OPTIONS
// To use an option, uncomment it by removing the "//" at the start of the line
// For a description of config options, go to:
// http://www.airtightinteractive.com/simp … tions.html
//fo.addVariable("xmlDataPath", "gallery.xml");
//fo.addVariable("firstImageIndex", "5");
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
//fo.addVariable("preloaderColor", "0xFFFFFF");
fo.write("flashcontent");
</script>
The above is SimpleViewer 1.x embed code and params.wmode = "transparent"; is for the SimpleViewer 2.x embed code. Are you using SimpleViewer 1 or 2? If you are using Simpleviewer 1.x remove the prams.wmode line and add the following before fo.write, fo.addVariable("wmode", "transparent");. If you are using SimpleViewer 2 you need to change your embed code.
I'm using SimpleViewer 2.0. I had tried using this code
<object width="800" height="600">
<param name="movie" value="simpleviewer.swf?galleryURL=compact.xml"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="bgcolor" value="222222"></param>
<param name="wmode" value="transparent" />
<embed src="simpleviewer.swf?galleryURL=compact.xml" wmode="transparent" type="application/x-shockwave-flash" allowscriptaccess="always"allowfullscreen="true" width="800" height="600" bgcolor="222222">
</embed>
</object>now is working on Mozilla, but not IE :( . I'm using Mozilla 3.0 and IE 6
That embed code looks fine, looking at your HTML it looks like you don't have a doctype try adding the doctype below before your HTML tag.
Add the following to the top of your doc before your HTML tag and clear your browser's cache.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script type="text/javascript" src="chromemenu/chromejs/chrome.js"></script>
</script>
</head>
You also have an extra </script> tag just before your </head> tag.
If it continues to works in Firefox, but not IE you could try validating the page and fixing the errors, beyond I would need to take a look at a live page.
Even though i had tried edit the code from examples\HTML_embed\basic_embed.html and adding the embed code. it doesn't seem working :(
<!--original code-->
<object width="100%" height="100%"><param name="movie" value="simpleviewer.swf"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="bgcolor" value="222222"></param><embed src="simpleviewer.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%" bgcolor="222222"></embed></object>
<!--new added code-->
<object width="800" height="600">
<param name="movie" value="simpleviewer.swf?galleryURL=compact.xml"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="bgcolor" value="222222"></param>
<param name="wmode" value="transparent" />
<embed src="simpleviewer.swf?galleryURL=compact.xml" wmode="transparent" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="800" height="600" bgcolor="222222">
</embed>
</object>The "<!--original code-->"simpleviewer appeared in IE, but not the "<!--new added code-->". It just display a blank column at the bottom. Kindly please guide me ;)
what is the URL of the page you are having the issues with?
Hi Mike, the site haven't publish yet. i'm testing it locally. Can i have your email, so i can send the file to you and you might able to help out. You may email to piggy_102@hotmail.com
thanks
that's a great idea! so that every time we create galleries, we can use and apply it to any colored background... :D
SimpleViewer Forum → SimpleViewer-Pro v2 → How do I give SimpleViewer a transparent background?
Powered by PunBB, supported by Informer Technologies, Inc.
Currently installed 5 official extensions. Copyright © 2003–2009 PunBB.