Topic: 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?

Last edited by april (2010-06-27 06:30:42)

Re: How do I give SimpleViewer a transparent background?

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?

Mike Richards
SimpleViewer Support Team.

Re: How do I give SimpleViewer a transparent background?

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>

Re: How do I give SimpleViewer a transparent background?

<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.

Mike Richards
SimpleViewer Support Team.

Re: How do I give SimpleViewer a transparent background?

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  sad . I'm using Mozilla 3.0 and IE 6

Re: How do I give SimpleViewer a transparent background?

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.

Mike Richards
SimpleViewer Support Team.

Re: How do I give SimpleViewer a transparent background?

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 sad

<!--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  wink

Last edited by april (2010-06-30 14:49:21)

Re: How do I give SimpleViewer a transparent background?

what is the URL of the page you are having the issues with?

Mike Richards
SimpleViewer Support Team.

Re: How do I give SimpleViewer a transparent background?

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

Last edited by april (2010-07-01 09:27:43)

Re: How do I give SimpleViewer a transparent background?

that's a great idea! so that every time we create galleries, we can use and apply it to any colored background... big_smile