JavaScript - Get Current Opacity Value In Ie

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>

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);

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);
		    });

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

Hi Guys,
Hope you can help. How do you simply output the current url in the browser i.e if i am in google.com I want google.com outputted and so on.

Also on multilanguage sites if my url is say www.mydomain.com/en/about.html or http://www.mydomain.com/en/animals/h...stallions.html I want to be able to manipulate the url so I can change en to fr for example when I jump between english and french pages. I want users to be able to switch the language of that particular page by clicking a link. I need to be able to switch segment one of the url (en,fr,de etc...)dynamically somehow instead of hardcoding a link into each page.

Any ideas?

THANKS

Hi, i need some help with this if is possible.

I make this dropdown:
Code:

<dl class="dropdown">
<dt><a><span>Select a Field</span></a></dt>
<dd>
<ul id="menu-tags-menu" class="menu">
<li id="menu-item-159" class="menu-item current-menu-item"><a href="http://myweb.com.ar/portfolio/">All Fields</a></li>
<li id="menu-item-54" class="menu-item"><a href="http://myweb.com.ar/tag/branding/">Branding</a></li>
<li id="menu-item-55" class="menu-item"><a href="http://myweb.com.ar/tag/print-design/">Print Design</a></li>
<li id="menu-item-57" class="menu-item"><a href="http://myweb.com.ar/tag/web-design/">Web Design</a></li>
<li id="menu-item-56" class="menu-item"><a href="http://myweb.com.ar/tag/ui-design/">UI Design</a></li>
<li id="menu-item-52" class="menu-item"><a href="http://myweb.com.ar/tag/motion-graphics/">Motion Graphics</a></li>
<li id="menu-item-53" class="menu-item"><a href="http://myweb.com.ar/tag/illustration/">Illustration</a></li>
</ul>
</dd>
</dl>

Working with jquery and this code:
Code:

$(document).ready(function() {
	$(".dropdown dt a").click(function() {
		$(".dropdown dd ul").toggle();
	});
	$(".dropdown dd ul li a").click(function() {
		var text = $(this).html();
		$(".dropdown dt a span").html(text);
		$(".dropdown dd ul").hide();
		$("#result").html("Selected value is: " + getSelectedValue("sample"));
	});
	function getSelectedValue(id) {
		return $("#" + id).find("dt a span.value").html();
	}
	$(document).bind('click', function(e) {
		var $clicked = $(e.target);
		if (! $clicked.parents().hasClass("dropdown"))
		$(".dropdown dd ul").hide();
	});
});

This works very well.. but i need the dt a span show me the value of the current li (<li class="current-menu-item">), so instead "Select a Field" must say "All Fields" (current value in this example), and when i go to "Motion Graphics" (for example), when page is load must say "Motion Graphics".

Can i do this adding a variable to take the value of current li and droping when document.ready?

Thanks

Hi. I am pretty sure this requires js, but if not and I am posting in the wrong section, I am sorry. Let me try to explain my situation so you know what i'm trying to accomplish. I am hosting a site on a home pc. My isp blocks inbound port 80 so I use no-ip services and port 80 redirect and cloak the address because it displays my ip instead of the domain name. For example, without the cloak it will show http://xxx.xxx.xxx.xxx:81/index.php instead of http://mydomain.com/index.php

I would like to display the current page the user is on somewhere on the page.

Example:
You are currently viewing index.php

How would I be able to accomplish this?

Presently am using below code, and it is showing an error message says "Cannot call method "getCurrentWindow" of undefined (<Unknown source>#4) in <Unknown source> at line number 4"

=========================================
function insertDataIntoHtmlEditorIE()
{

currentwindow = this.browserbot.getCurrentWindow(this);

var iFrame = currentwindow.getElementById

('ctl00_MainContent_editor_ctl02_ctl00');

var iFrameBody;

iFrameBody =

iFrame.contentWindow.document.getElementsByTagName('body')[0];

iFrameBody.innerHTML = "xyz";

}
================================================

please help me out to resolve this issue..
*am calling this script in Selenium RC through Eclipse

I am developing extension which should upload currently displayed html as a file to a remote web server, unfortunatelly so far i haven't suceeded. I think this should be done through XMLHttpRequest(), but neither I know how to upload files through XMLHttpRequest nor how to convert string to file. The HTML form that uploads a file:

<form method="POST" action="https://woodmin.catsone.com
/api/add_candidate" enctype="multipart/form-data">
<input name="resume" type="file">
</form>

But as I said i need my plugin to do it automatically and file must be made from html code.
Maybe you have some ideas, advices or good links which can help to solve my problem? This is a real headache for me! Thank you in advance.

I need to get an add on JS for this form to go with the current JS that is on it
I need the add on JS to Validate all the fields have been filled out and then pop up an error if any of the fields are not filled out

<FORM NAME="gather"><form onclick="return check(this);">
<fieldset>
</p>
<table width="200" border="0" cellpadding="10">
<tr>
<th scope="row"><p align="left" class="style1">First Name*</p>
<p>
<div align="left"><input type="text" name="data_NameFirstName2" id="data_NameFirstName2" value="[Fname]"/>
</p></th>
</tr>
<tr>
<th scope="row"><p align="left" class="style1">Last Name*</p>
<p>
<div align="left"><input type="text" name="data_NameLastName2" id="data_NameLastName2" value="[Lname]"/>
</p></th>
</tr>
<tr>
<th scope="row"><p align="left" class="style1">Phone*</p>
<p>
<div align="left"><input type="text" name="phone1" id="phone1" />
</p></th>
</tr>
<tr>
<th scope="row"><p align="left" class="style1">Email*</p>
<p>
<div align="left"><input type="text" name="email" id="email" />
</p></th>
</tr>
</table>
</p>
<p>

<p><span class="style5">Please confirm your contact information.</span>
<p><span class="style5"> (* = required) </span>
<br />
<br />
<span class="style1">
<input type = "radio" name = "rad1" value = "Contact me">

<strong> Please contact me</strong></span></p>
<p> <span class="style1">Please have my personal advisor</span></p>
<p class="style1">contact me as soon as possible. <br />
<br />
</p>
<p>
<span class="style1">
<input type = "radio" name = "rad1" value = "Send me more info">

<strong>Send me more info</strong> </span></p>
<p class="style1">I'm not ready to enroll yet, but</p>
<p class="style1">please continue to send me more</p>
<p class="style1">information and updates about </p>
<p class="style1">going back to school <br />
<br />
</p>
<p>
<span class="style1">
<input type = "radio" name = "rad1" value = "Remove me from your mailing list">

<strong> No thanks </strong></span></p>
<p class="style1"> Please remove me from your </p>
<p class="style1">mailing list. <br />
<br />
</p>
<label>
<input type = "button" value = "submit" onclick ="chkrads()">
</label>
</fieldset>
</form>






<script type = "text/javascript">
function chkrads() {
var chosen = "None";
var which = -1;
var len = document.gather.rad1.length;
for (i = 0; i < len; i++) {
if (document.gather.rad1[i].checked) {
chosen = document.gather.rad1[i].value;
which = i;
}
}
if (chosen == "None") {
alert("No Location Chosen");
}
else {

}
if (which == 0) {window.location = "http://www.hudsonsd.com/national2010/thankcontact.html"}
if (which == 1) {window.location = "http://www.hudsonsd.com/national2010/thanksend.html"}
if (which == 2) {window.location = "http://www.hudsonsd.com/national2010/thanknocontact.html"}

}


</script>

Thanks!

When I use the following script in my web page I do not get a print out. Can anyone tell me what is wrong?


<!-- Begin

// Get today's current date.
var now = new Date();

// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December');

// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

// Calculate four digit year.
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}

// Join it all together
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear())) ;

// Print out the data.
document.write(today);

// End -->

Hey,

i'm building my own wyiwyg-editor, and all works very good, exept getting the current focused element, i mean i wan't to show a path where the user is, and this function came out:
Code:

    wysiwyg.getPath = function(i) {
        if(wysiwyg.getMode(i) == 'source') return;
        curr = document.getElementById('wysiwyg_frame_' + i).contentWindow.document;
        sel = curr.selection;
        if(sel == undefined) return;
	if (sel.type=="Control") {
		// control selection
		range = sel.createRange();
		if (range.length==1) {
			elem = range.item(0);
		}
		else {
			// multiple control selection
			return;
		}
	} else {
		range = sel.createRange();
		elem = range.parentElement();
	}
	p = elem.tagName;
        while(elem == elem.parentNode && elem.tagName != 'BODY'){
            p = elem + ' > ' + p;
        }
        document.getElementById('wysiwg_path_' + i).innerHTML = p;
    }

unfortunaly sel is always undefined, how can i fix it? i hope you can help me

Morri