JavaScript - Get Ie Opacity
Hello. I know I get set opacity for IE using the CSS
Code: filter:alpha(opacity=50); and I set it with JS as Code: theObj.style.filter = "alpha(opacity=" + (opac * 100) + ")"; but how can I read it's initial value (and store it in a variable)? Andy. Added: I should mention I use this function to get the current style: Code: var GetStyle = function (el, strRule) { // e.g. "font-size" - robertnyman.com var elem = (typeof el === 'string') ? document.getElementById(el) : el; if (document.defaultView && document.defaultView.getComputedStyle ) { return document.defaultView.getComputedStyle(elem, '').getPropertyValue(strRule); } else if ( elem.currentStyle ) { strRule = strRule.replace(/\-(\w)/g, function (strMatch, p1) { return p1.toUpperCase(); }); return elem.currentStyle[strRule]; } else return ''; } ; Similar TutorialsHey all, I found this code but don't fully understand it. Can anyone take a brief moment to explain what is occuring in the clearMenu, setOpacity and fadeMenu functions: Code: // configuration variables var timeout = 250; // milliseconds var fadeSpeed = 500; // milliseconds var useFade = true; // timers array var timers = new Array(); // state array -- by id, value = active, false = inactive var state = new Array(); // lastOpacity: used to prevent multiple timers from making the fade flicker var lastOpacity = new Array(); // MSIE has its own way of setting opacity, so we have to detect it // all the other major browsers support the standard DOM opacity property var msie = false; if( navigator.appName == "Microsoft Internet Explorer" ) msie = true; // entry point: set element to visible and clear its timers function setMenu( id ) { var e = document.getElementById(id); //When the user rolls over one of horizontal menu items, the setMenu method is called and we pass in as an argument, the id of the associated ul element, which we then set its visibility attribute to visible. e.style.visibility = "visible"; state[id] = true; setOpacity( id, 1 ); if(timers[id]) { clearTimeout(timers[id]); timers[id] = undefined; } } // set element to hidden and reset its opacity // typically called by a timer // may be used as an entry point to bypass timers and fades function hideMenu( id ) { var e = document.getElementById(id); state[id] = false; e.style.visibility = "hidden"; if(useFade) setOpacity( id, 1 ); } // entry point: hide the menu using fade (if enabled) function clearMenu( id ) { if(useFade) timers[id] = setTimeout( 'fadeMenu( "' + id + '" )', timeout ); else timers[id] = setTimeout( 'hideMenu( "' + id + '" )', timeout ); } // set the opacity // special support for MSIE function setOpacity( id, value ) { var e = document.getElementById(id); if(state[id]) value = 1; // menu fade was interrupted else if(lastOpacity[id] && (lastOpacity[id] < value)) value = lastOpacity[id]; // prevents flicker if multiple timers set if(msie) e.style.filter = 'alpha(opacity=' + value * 100 + ')'; // MS Internet Explorer else e.style.opacity = (value); // Everyone else (standard DOM) if( value == 0 ) hideMenu( id ); // when all faded, reset the menu state lastOpacity[id] = value; } // fade a menu // typically called by a timer function fadeMenu ( id ) { var start = 0; var end = 0; var s = Math.round( fadeSpeed / 25 ); // fade in 25ms increments var timer = 0; var i; state[id] = false; for( i = s; i >= 0 ; i-- ) { setTimeout( "setOpacity('" + id + "'," + ( i / s ) + ")", timer++ * fadeSpeed / s ) } } Thanks for any response. Hey all, I am very new to javascript. I have been using this stacks menu I am sure you may have seen elsewhe http://net.tutsplus.com/tutorials/ja...ck-navigation/ I have modified it a bit though as I will want to use my own graphics and change a little bit how it works. I managed to make it so that the images become transparent when the stack is put back in place and then non transparent when they come back out. The problem I have is that I need the images to be transparent initially when they are in the stack. You can see the problem he http://bit.ly/cdelJu Here is the javascript for this: Code: $(function () { // Stack initialize var openspeed = 300; var closespeed = 300; $('.stack2>img').toggle(function(){ var vertical = 0; var horizontal = 90; var $el=$(this); $el.next().children().each(function(){ $(this).animate({top: vertical + 'px', left: horizontal + 'px', opacity: '10'}, openspeed); vertical = vertical + 40; horizontal = (horizontal+.75)*1.15; }); $el.next().animate({top: '40px', left: '10px'}, openspeed).addClass('openStack') .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed); $el.animate({paddingBottom: '0'}); }, function(){ //reverse above var $el=$(this); $el.next().removeClass('openStack').children('li').animate({top: '-33px', left: '-10px', opacity: '0'}, closespeed); $el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed); $el.animate({paddingBottom: '35px'}); }); // Stacks additional animation $('.stack2 li a').hover(function(){ $("img",this).animate({width: '56px'}, 100); $("span",this).animate({marginRight: '30px'}); },function(){ $("img",this).animate({width: '50px'}, 100); $("span",this).animate({marginRight: '0'}); }); }); and here is the css: Code: /* ================ STACK #2 ================ */ .stack2 { position: fixed; top: 28px; left: 90px;} .stack2 > img { position: relative; cursor: pointer; padding-bottom: 35px; z-index: 2; } .stack2 ul { list-style: none; position: absolute; top: 7px; cursor: pointer; z-index: 1; } .stack2 ul li { position: absolute; } .stack2 ul li img { border: 0; } .stack2 ul li span { display: none; } .stack2 .openStack li span { font-family: "Lucida Grande", Lucida, Verdana, sans-serif; display:block; height: 14px; position:absolute; top: 17px; right:60px; line-height: 14px; border: 0; background-color:#000; padding: 3px 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; color: #fcfcfc; text-align: center; text-shadow: #000 1px 1px 1px; opacity: .85; filter: alpha(opacity = 85); } #dock { top: 0; left: 100px; } a.dock-item { position: relative; float: left; margin-right: 10px; } .dock-item span { display: block; } .stack { top: 0; } .stack ul li { position: relative; } /* IE Fixes */ .stack2 { _position: absolute; } .stack2 ul { _z-index:-1; _top:-15px; } .stack2 ul li { *right:5px; } annd the html: Code: <div class="stack2"> <img src="images/stacks/stack-down.png" alt="stack"/> <ul id="stack2"> <li><a href=""><span>Aperture</span><img src="images/stacks/aperture.png" alt="Aperature" /></a></li> <li><a href="#"><span>All Examples</span><img src="images/stacks/photoshop.png" alt="Photoshop" /></a></li> <li><a href="example3.html"><span>Example 3</span><img src="images/stacks/safari.png" alt="Safari" /></a></li> <li><a href="example2.html"><span>Example 2</span><img src="images/stacks/coda.png" alt="Coda" /></a></li> <li><a href="index.html"><span>Example 1</span><img src="images/stacks/finder.png" alt="Finder" /></a></li> </ul> </div> Any help is greatly appreciated! Hello! I'm just starting to learn JavaScript, so don't take me too serious. I would like to set opacity of some element to 0 through JavaScript, using GetElementById function. This is my short code inside body of HTML: Code: <script> document.getElementById("element").style.opacity="0"; </script> <div id="element"> noopacity </div> It doesn't seem to work, what am I doing wrong? Thanks. Ok so I have two images class1 & class2 which both have opacity:0.3; and filter:alpha(opacity=30); added with css. I am trying to get it so when I click on class1 it will either fade in (ideally) or display as 100% opacity. I do not want both class's to be able to be 100% so if one is clicked the other would be 30%. I also have multiple instances of class1 and class2. If anyone can help me I will praise you on the highest mountain! Thanks, B Hey, I have a script that needs to see the current opacity value of divs but I can not find the code to make it work in IE. I've googled it for over an hour with no answer. Any suggestions? For non-IE browsers, here is the code I am using Code: div_opac = document.getElementById(some_div).style.opacity; Thanks for the help! Hi there. I just started out learning javascript and jQuery.. and here's one of those bump that Im unable to pass through.. So here's the problem.. I tried writing a simple modal effect on the site I was working on.. since I'm fairly new to javascript and jQuery so please bear with me The problem that I am having is that the opacity of the #dialog (the white part in the middle ) is being inherited from the #mask.. the black part that covers the page.. I tried setting the opacity to #dialog{opacity:1;} but to no avail it's not working.. I'm trying to change the opacity cause the opacity is affecting the readability of the content.. Here's the simple code that I wrote.. can you please check them up? Its been only two days since I started reading about Javascript and jQuery so please have some mercy you can check up the page here.. http://dev.crownshipping.com.ph/single_update.html just click on the boats.. and the modal thingy will pop up.. hope someone can help and enlighten me.. I'mma fast learner.. if you can give resource links.. except w3schools.. I already read the whole thing Thanks Andrew here's the html code.. Code: <div id="mask"> <div id="dialog" class="window"> <!-- close button is defined as close class --> <a href="#" class="close">Close X</a> <h1>Vessel Name - KiKi C</h1> <img src="images/single_update.jpg" alt="xxx"/> </div><!--dialog--> </div><!--mask--> here's the javascript code.. Code: <script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ //select all the a tag with name equal to modal $("a.modal").click(function(e) { //Cancel the link behavior e.preventDefault(); //Get the A tag var id = $(this).attr('href'); //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(document).width(); //Set height and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(1000); $('#mask').fadeTo("slow",.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $('#dialog').css('top', winH/2-$(id).height()/2); $('#dialog').css('left', winW/2-$(id).width()/2); //transition effect $('#dialog').fadeIn(2000); $('#dialog').fadeTo("slow",1); }); //if close button is clicked $('.close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask, .window').fadeOut(1000); }); }); </script> on my site he http://www.jbiddulph.com/niche/ I would like to apply an opacity on my navigation roll over, can someone help me here?! here is the code for my Home link: Code: $('#nav ul li.home').hover( function() { $(this).stop().animate({backgroundColor:'#ff8300'}, 1300); }, function () { $(this).stop().animate({backgroundColor:'#666666'}, 100); }); Hi Guys, Been stuck on this for too long now. I'm trying to write a function that rotates images with a fade. The function work properly, however I can't make the images fade back in. The fadein function won't add to the .style.opacity Here's the code with the php Code: function fadeout() { b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity = (b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity - 0.01); if(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity == 0.1) { clearInterval(fadeouttimer); b<?php echo ($AF_list_artist_id->artist_id); ?>.src = a<?php echo ($AF_list_artist_id->artist_id); ?>[starter<?php echo ($AF_list_artist_id->artist_id); ?>]; function fadein() { b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity = (b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity + 0.01); //alert(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity); if(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity == 1) { clearInterval(fadeintimer); setTimeout("rotate<?php echo ($AF_list_artist_id->artist_id); ?>("+(starter<?php echo ($AF_list_artist_id->artist_id); ?>+1)+")",6000); } } var fadeintimer = setInterval(fadein,10); } } var fadeouttimer = setInterval(fadeout,10); and without Code: function fadeout() { b7.style.opacity = (b7.style.opacity - 0.01); if(b7.style.opacity == 0.1) { clearInterval(fadeouttimer); b7.src = a7[starter7]; function fadein() { b7.style.opacity = (b7.style.opacity + 0.01); //alert(b7.style.opacity); if(b7.style.opacity == 1) { clearInterval(fadeintimer); setTimeout("rotate7("+(starter7+1)+")",6000); } } var fadeintimer = setInterval(fadein,10); } } var fadeouttimer = setInterval(fadeout,10); the following script works great in Chrome. very smooth... but in Firefox and IE it is very jittery/jumpy from 0 to 100 opacity too quickly... Code: function changeFadeLevel(newval){ document.getElementById("redbg").style.opacity=newval/100; document.getElementById("redbg").style.filter = "alpha(opacity=" + newval + ")"; } function changeBg(state){ if(state==1){ for(var i=0; i<=100; i++){ setTimeout("changeFadeLevel("+i+")",i*3); } document.getElementById("overlaystatus").value='on'; }else{ for(var i=0; i<=100; i++){ setTimeout("changeFadeLevel("+(100-i)+")",i*3); } document.getElementById("overlaystatus").value='off'; } } Code: <input type="hidden" id="overlaystatus" value="off" /> <img src="/bg.jpg" id="bg" border"0" /> <img src="/redbg.jpg" id="redbg" border="0" /> the images are 1596x1057 resolution stretched to 100% width with css Code: html, body { height: 100%; margin: 0; padding: 0; background:#000; font-family:Arial, Helvetica, sans-serif; } img#bg{ left: 0px; min-width: 1000px; position: absolute; top: 0px; width: 100%; z-index: 1; } img#redbg{ left: 0px; min-width: 1000px; position: absolute; top: 0px; width: 100%; z-index: 5; opacity:0.0; filter:alpha(opacity=0); } I'm using code based on these functions to fade images up from black as part of a slideshow: Code: function fade_down(id, millisec) { // fade image from 0% to 100% visible var speed = Math.round(millisec / 100); var timer = 0; for(i = 100; i >= 0; i--) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } } function fade_up(id, millisec) { // fade image from 0% to 100% visible var speed = Math.round(millisec / 100); var timer = 0; for(i = 0; i <= 100; i++) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } } function changeOpac(opacity, id) { //change the opacity for different browsers var object = document.getElementById(id).style; object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; } It works OK but there is often noticeable flicker, even when the images are preloaded. See here http://www.pwtphoto.com/flowers/slid.../D300_1873.jpg and click "Start Slidehow". This happens in all browsers - it's not the well documented Firefox glitch. The images are pretty large - typically 1000 x 670 pixels - which may be part of the problem. Is there a way to fade images up or down more smoothly? Is there any alternative to using opacity? Thanks. I have found that in IE8 I cannot give an element the alpha filter (opacity) if it has the position style set to something (relative or absolute). An element without the position style (it is the empty string) can have opacity in IE8. I have found that in IE7 I can only give an element the alpha filter if the position style is set to something (relative or absolute). An element without a position style will not take the alpha filter. This is a major conundrum. Does anyone have any insight into this bug? Given the above, I can only achieve opacity in one of the two browsers. I have both IE8 and IE7 running in standards mode. The opacity is being set programmatically with JS like so: obj.style.filter = "alpha(opacity="+opacity+")"; where opacity is an integer between 0 and 100. Obviously I don't have any problem with any other browser doing opacity because it is different styles for them and they don't care about the position style at all. Yeah that was a loooong title. Hopefully it's clear enough Right now, my div changes opacity if it's moused over qua the following code: Code: style="opacity:0.3;filter:alpha(opacity=30)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30 but this isn't quite optimal, cause if the user mouses out, it changes back to fade, and the user can't quite see what he's entering. So I would like the div to have opacity=1 when one of the textfields in it is active and opacity=0 when it's not. Is there a way to do that? //deafdigit |