Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    Transparent windows in IE

    Hi Alex

    I have the following

    Code:
    isc.Window.create({
   	ID: "treeWindow",
   	width: "20%",
             height: "95%",
	title: "Navigation",
	headerStyle: "windowHeader",
	autoSize: false,
	autoDraw: false,
	allowResize: true,
	animateMinimize: true,
	showResizer: false,  
	showMaximizeButton: true,      
	canDragReposition: true,
	canDragResize: true,
             backgroundColor: null,
             bodyBackgroundColor: null,
             backgroundImage: null,
             styleName: null,
	showEdges:false,
	showShadow:true,
            shadowDepth:6,
             shadowOffset:5,
	items: [
	
		NavigationModule.create({
		    ID: "navigationModule",
		    width: "100%",
		    height: "100%",	
		    dataSource: tree,
		    autoFetchData: true,
		    showConnectors: true,
		    showHeader:false,
		    selectionType:"single",	    
		    showRoot: false,
		    autoDraw: false,
		    autoSize: false,
		    allowResize: false,
		    animateFolders: true,
		    animateFolderSpeed: 50,
		    showDetailFields: false,
		    border: "1px solid #BBBBFF",
		    backgroundColor: null,
		    bodyBackgroundColor: null,
		    backgroundImage: null		})
		
	]
});
    which ends up creating a transparent window in Firefox. The same does not happen in IE7 although the following will

    Code:
    		NavigationModule.create({
		    ID: "navigationModule",
		    width: "100%",
		    height: "100%",	
		    dataSource: tree,
		    autoFetchData: true,
		    showConnectors: true,
		    showHeader:false,
		    selectionType:"single",	    
		    showRoot: false,
		    autoDraw: false,
		    autoSize: false,
		    allowResize: false,
		    animateFolders: true,
		    animateFolderSpeed: 50,
		    showDetailFields: false,
		    border: "1px solid #BBBBFF",
		    backgroundColor: null,
		    bodyBackgroundColor: null,
		    backgroundImage: null
		})
    After looking at WATCH in the Developer Console - it looks like windows in IE have an <IFRAME> which causes the window to render with a white background. Was wondering why IE uses an IFRAME and if there is a workaround (other than emulating a window)?
    My background window is done the following way -

    Code:
    <style type='text/css'>
#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
</style>
<SCRIPT LANGUAGE='Javascript' SRC='resources/pngfix.js'></SCRIPT>
</HEAD>

<BODY>
<div id="bg_image"> 
<img src="resources/bg_gradient.png" style="width: 100%; height: 100%;"> 
</div>

...

    Thanks
    Kam
    Tags: None
    #2
    Hi Kam,

    The IFRAME element you spotted is a workaround for IE pre-7.0 which prevents "burn through" of HTML <select> controls. This workaround is not necessary so long as you use the SmartClient "synthetic" SelectItem (the default), and don't use multiple select controls (SelectItem with multiple:true), which cause SmartClient to use the native HTML <select> via NativeSelectItem.

    So long as you never use the NativeSelectItem and/or don't care about visual glitches in IE pre-7.0, you can disable this workaround by setting useBackMask:false on any components you want to be transparent.

    Comment

      #3
      What is meant here with "components you want to be transparent" ? I know that I can change the transparency/opacity of WHOLE SC components via the "opacity" property.
      But what if I want to have a transparent window background only, with the window's content being as opaque as it is outside the window ? So that I can see the webpage the window is hovering over ? Without making its content transparent, too ?

      This is the SC window component code of which I thought it could do exactly that; but it doesn't; I always have a fully opaque window background ...

      Code:
      	  isc.defineClass("HelpCanvas", "Canvas").addProperties({
                autoDraw: false,
		defaultWidth: 300,
		padding: 10,
		useBackMask:false,
		contents: "<b>Everything under this window shall be visible since it is meant" +
				  " to be a window with transparent background. And this sentence is" +
				  " its only content</b>."
	  });


	  isc.Window.create({
               width:"50%", 
		height:"50%",
		ID: "transWindow",
		title: "Transparent Window",
		autoCenter: true,
		autoSize: false,
		contentsType: null, 
		allowResize: true,
		animateMinimize: true,
		showResizer: true,  
		showMaximizeButton: true,
		useBackMask:false,
		items: [
		  isc.HelpCanvas.create()
		]
		});

      Comment

        #4
        Your example below doesn't set opacity at all, so not sure what you were expecting :)

        When you do set opacity, be sure you have also set backgroundColor or other properties that could introduce a backgroundColor (eg edgeCenterBackgroundColor if showEdges is true). These differ by skin - see the load_skin.js file for the skin you are using to see the defaults.

        Comment

          #5
          O.K., maybe I got led to the wrong thread ...
          What I want to achieve/know is, simply put:
          - Can I make the background of a SC component - e.g. the SC window component - transparent WITHOUT making the WHOLE SC component transparent via the opacity property ?

          Comment

            #6
            useBackMask:false --&gt; doesnt work in IE7

            Hi, I use useBackMask:false in creating htmlPane but it doesnt work in IE7, how am I going to create transparent background in htmlPane specifically browser IE7?

            Comment

              #7
              can anybody help me on this?

              can anybody help me on this?

              Comment

                #8
                An HTMLPane with contentsType:"page" is an IFrame and cannot be made translucent. The docs encourage you not to use contentsType:"page" and point to several alternatives - look into those.

                Comment

                Previous template Next
                Working...
                X