|
JavaScript - Help, Please!!! - Elem.style.top Not Working
This is killing me guys...
I want to take the current location of an position:absolute div and add 100 to its style.top value. However I can't get that value, I can set it but not retrieve its current value. Here is a sample.... Code: function moveit(elem){ alert(elem.style.top); alert(document.getElementById("question1").style.top); } Demo: http://campo.cc/stage.htm Please help!!! Jutboy Similar Tutorialshi all, i have some code that is not registering. thinking i'm missing something obvious, but i sure can't see it. can someone else's eyes peruse this for me? thanks! code for the combo box: PHP Code: select name="country" size="1" id="country" style="position:absolute; left:451px; top:260px; width:176px; color:#00008B; font-family:Arial; font-weight:bold; font-size:13px; z-index:13" onChange="PhoneMask();"> <option value="1">United States</option> <option value="2">Australia</option> <option value="3">China</option> <option value="4">Mexico</option> <option value="5">United Kingdom</option> </select> code for the different labels i want to display: PHP Code: /*THIS SECTION IS FOR THE DIFFERENT PHONE NUMBERS OF THE VARIOUS COUNTRY CHOICES*/ <div id="phoneLabelUS" style="position:absolute; left:10px; top:225px; width:207px; height:15px;" align="left"> <font style="font-size:12px" color="#FF0000" face="Arial"><b> *Telephone Number </b></font><font style="font-size:12px" face="Arial"><b><span class="style9">(xxx-xxx-xxxx)</span> </b></font></div> <div id="phoneLabelAU" style="position:absolute; left:10px; top:225px; width:207px; height:15px; visibility: hidden;" align="left"><font style="font-size:12px" color="#FF0000" face="Arial"><b>*Telephone Number </b></font><font style="font-size:12px" face="Arial"><b><span class="style9"> (xx-xxxx-xxxx)</span></b></font></div> <div id="phoneLabelOTHER" style="position:absolute; left:10px; top:225px; width:207px; height:15px; visibility: hidden;" align="left"> <font style="font-size:12px" color="#FF0000" face="Arial"><b> Telephone Number</b></font></div> /*------------------------------------------------------------------------------------*/ here is my PhoneMask() function: PHP Code: function PhoneMask() { if (document.getElementById("country").value == "1") { document.getElementById("phoneLabelOTHER").style.zIndex = 50; document.getElementById("phoneLabelOTHER").style.visibility = 'hidden'; document.getElementById("phoneLabelAU").style.zIndex = 50; document.getElementById("phoneLabelAU").style.visibility = 'hidden'; document.getElementById("phoneLabelUS").style.zIndex = 51; document.getElementById("phoneLabelUS").style.visibility = 'visible'; } elseif (document.getElementById("country").value == "2") { document.getElementById("phoneLabelOTHER").style.zIndex = 50; document.getElementById("phoneLabelOTHER").style.visibility = 'hidden'; document.getElementById("phoneLabelAU").style.zIndex = 51; document.getElementById("phoneLabelAU").style.visibility = 'visible'; document.getElementById("phoneLabelUS").style.zIndex = 50; document.getElementById("phoneLabelUS").style.visibility = 'hidden'; } else { document.getElementById("phoneLabelOTHER").style.zIndex = 51; document.getElementById("phoneLabelOTHER").style.visibility = 'visible'; document.getElementById("phoneLabelAU").style.zIndex = 50; document.getElementById("phoneLabelAU").style.visibility = 'hidden'; document.getElementById("phoneLabelUS").style.zIndex = 50; document.getElementById("phoneLabelUS").style.visibility = 'hidden'; } } Hi, on my site, I have added Style 1 and Style 2 in my menu at the top right http://www.thisisworthing.com/default.php# when I click on Theme 2, it doesn't work?! please help! I have this working on my other site: http://www.mypubspace.com what am i doing wrong?! // JavaScript Document function open_tab(el){ if(document.getElementById(el).style.display == "none"){ document.getElementById(el).style.display = "block"; } } function close_tab(el){ if(document.getElementById(el).style.display == "block"){ document.getElementById(el).style.display = "none"; } } Pretty basic code, works great in FireFox and Chrome in both HTML and ASPX pages. However in IE it only works properly in the .aspx pages. There are a series of links so when you click it hides the div's which are set to display:"block", except for one "div" which won't change to display"none" and I don't know why. Here is my code... Code: <html>
<head>
<script type="text/javascript">
function nameofmonth(month)
{
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
return monthname[month]
}
function monthdays(month,year)
{
var daysofmonth=new Array(31,28,31,31,30,31,31,31,30,31,30,31)
if(year%4==0)
daysofmonth[1]=29
return daysofmonth[month]
}
function close(){
document.getElementById("container").style.display='none'
}
function table()
{
var now=new Date()
var hour=now.getHours()
var minute=now.getMinutes()
var second=now.getSeconds()
var date=now.getDate()
var month=now.getMonth()
var year=now.getFullYear()
now.setFullYear(year,month,1)
var firstday=now.getDay()
var monthname=nameofmonth(month)
var daysofmonth=monthdays(month,year)
if(firstday>0)
var k=-(firstday-1)
else
k=1
var table="<table border=5 cellspacing=3cellpadding=8>"
table +="<tr><th colspan=7>"+monthname + date+"th</th> <td style='cursor:pointer' onclick='close()'>[close]</td></tr>"
table +="<tr><th>sun</th><th>mon</th><th>tue</><th>wed</th><th>thu</th><th>fri</><th>sat</th></tr>"
for(var i=0;i<5;i++)
{
table+="<tr>"
for(var j=0;j<7;j++)
{
if(k<=daysofmonth && k>0)
{ if(k==date)
table+='<td id="clock" bgcolor="aqua">'+k+'</td>'
else
table+='<td style="cursor:pointer">'+k+'</td>'
k=parseInt(k)
}
else
table+="<td></td>"
k++
}
table+="</tr>"
document.getElementById("calender").innerHTML=table
}
}
</script>
</head>
<body>
<input type="text" onclick="table()"/>
<table id="container"><tr><td id="calender"></td></tr></table>
</body>
</html>
HERE is a close cell in table.when it is clicked,the close() function will called and the calender will disappear.but it is not happening.please help me ,what is wrong.Thanks in advance... 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. if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them? eg Code: <html>
<head>
<title>expandable text area</title>
<style type="text/css">
#expandable{
height: 100px;
}
</style>
</head>
<body>
<form>
<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
document.getElementById('expandable').addEventListener('click',function(){
if(!this.style.height){
this.style.height = this.scrollHeight+'px';
}
alert(this.style.height);
}, true);
</script>
</html>
In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element Hi All, I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things. On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below. *working* link http://pics.boasbysatyra.com/access/spiders.php This one only works in FF, and the clip area is offset badly. Here is the template for the zc code: Code: <div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
And the JS for the page: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
$('#menu ul').hide();
$('#menu ul:first').show();
$('#menu li a').click(function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
//return false;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
});
}
$(document).ready(function() {
initMenu();
});
Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area! http://jb.boasbysatyra.com/forum-pic...cs/nature.html Code: div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
<a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
<img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
</a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
<div class="filecode" id="d_clip_button[+filename+]">[+filename+]
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
clip.addEventListener( 'onComplete', my_complete );
function my_complete( client, text ) {
$('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
}
</script>
</div>
</div>
</div>
On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking... Here is the JS: Code: var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
handleOversize: "resize",
modal: true,
initialHeight: 32,
initialWidth: 400,
overlayOpacity: 0.85,
onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
//When page loads...
$(".tab_content").hide(); //Hide all content
// $("ul.tabs li:first").addClass("active").show(); //Activate first tab
// $(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
(function($) {
$(document).ready(function(){
$('.menu1').ptMenu();
$('.menu2').ptMenu({vertical:true});
});
})(jQuery);
I have taken a look at this for a few days and tried many things with no luck, any help is appreciated. Thanks! Ok, here's the page as it is right now: http://www.crackin.com/dev/index.php The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/ The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/ And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images. I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing... First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine. Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing. Thanks for any help. I hope I have this post in the right place! Any help would be very much appreciated... I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website. This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser) My javascript is he http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces) The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces) In the head I have: <script type="text/javascript" src="../javascript/backgroundchange.js"></script> ...then I have: <body onload="set_style_from_cookie()"> ...and for users to choose which background: <form> <input type="image" src="../images/white-background-thumb.jpg" onclick="switch_style('bg1');return false;" name="theme" value="White" id="bg1"> etc... </form> My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally! I have tried putting the javascript directly onto each page but I still had the same problem. I hope someone can help, I will be so grateful if I can get this to work. Many thanks indeed! I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me? Thanx in advance. hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help hi internet! I got a problem here, there are three 'onmouseover' event, in the first, I put the style in the inline,it works; but the others don't work when use css. how to get it work without inline style ? Quote: <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> div{width: 100px; height: 30px;margin-bottom: 20px;} .blue{background:blue;} .green{background:green;} </style> </head> <script type="text/javascript" > function tdcc(tdcolor){ document.getElementById("x").style.color=tdcolor.style.backgroundColor; } </script> </head> <body> <div style="background:red;" onmouseover="tdcc(this)"></div> <div class="blue" onmouseover="tdcc(this)"></div> <div class="green" onmouseover="tdcc(this)"></div> <br /><br /> <textarea id="x">sdfsdgsdfsdfsdsdfdsfsdfsdf</textarea> </body> </html> Hi, I am trying to remove the padding-bottom from the last 2 <li> in my page using JQuery, here is the code I have written so far: Code: <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("#content .photos li").eq(-2).css("padding-bottom", "0px");
</script>
Hi all, On this page http://piximory.com/templates/locus/dark/bg2.html if you click the portfolio link in main nav you are presented with the various thumbnail images for the projects, if you select a category the thumbnails organise themselves using jquery, does anyone know what type of jquery style this is? Thanks in advance! Kyle Hi im a newbie to java so please don't laugh. And apologies in advance for my English. When i open my page the src of the iframe is home.html. Home.html is empty and its in the way of the interface of my .swf file. My swf triggers the iframe to change into 50 different URL. So at the beginning the iframe should be gone. But whenever the src changes it should come back. I tried it by changing the height of the iframe. But nothing changes. here is a preview http://boyswithbeards.net/xrc/pres/ I have something like this. <iframe name="MoinkOriginal" id="MoinkOriginal" src="home.html" frameborder="0" scrolling="auto"></iframe> <script type = "text/javascript"> var iframe = document.getElementById('MoinkOriginal'); if (src='home.html') { var iframeElement = parent.document.getElementById('MoinkOriginal'); iframeElement.style.height = "0px"; // or use px iframeElement.style.width = "500px"; // or use px iframeElement.style.marginHeight = "-563px"; // or use px iframeElement.style.marginLeft = "750px"; // or use px } else { var iframeElement = parent.document.getElementById('MoinkOriginal'); iframeElement.style.height = "300px"; iframeElement.style.width = "500px"; iframeElement.style.marginHeight = "-563px"; // or use px iframeElement.style.marginLeft = "750px"; // or use px } </script> Thank you for helping me. Im stuck on this for days. hello, I need some help. I created a table that has some drop down boxes and based on the user selection it will show the text on the bottom, the plain drop down box has (nomal/bold/italic/bold-italic) the large drop down box has (large/medium/small) can someone please guide me or provide me a little demo on how to get this working?> thanks May I put some style to an alert box ? for example . <html> <head> <style> #box { font-style: strong } </style> <script lenguaje="javascript"> var age; age = prompt("Type age : ", ""); if (edad<18) { <div id=box alert("Underage, get out !")> </div> } else { alert("You are Welcome, surf it it"); } </script> </head> </html> Thanks Hello. I need to make drop down box, with 2 statments: hide, show. And I need one table, that javascript set [style="display: none"](When the dorp dow is: hide) and [style="";](When the DDB is set to: show. Can any one help a little, please? Hi All, I'm using the following code to (try to) update the style of an element in javascript. As you'll no doubt gather from the code, I'm trying to edit the opacity of the element. This code executes fine in FF, Opera and Chrome. However, Internet explorer keeps responding with 'style is null or not an object'. Basically, I don't think it's returning the correct element from the DOM, or, for that matter, any element. To add some more specific guidance, on the homepage I call launch_randomise() in the onload method, which, after 5 seconds, calls randomise_bottom_images() which calls itself and the bottom image regeneration function every 5 seconds, ensuring the images are regenerated every five seconds. Regenerating the bottom images is a three-step process: 1, fade out, 2 switch innerHTML, 3, fade back in. My functions for altering the opacity or innerHTML quite obviously rely on being able to talk about a DOM object, I know no other way of achieving this. I tried straight out getElementById but this doesn't seem to work in IE8, fine in FF, Op, GC. So, after much googling I replaced getElementById(string) with my own getElement(string). However, this still doesn't work. Any thoughts? Any help would be much appreciated!! Getting elements/setting style functions Code: function getElement(id, type)
{
var inputs = document.getElementsByTagName(type);
var descField = null;
for(var i=0;i<inputs.length;i++)
{
if(inputs.item(i).getAttribute('id') == id )
{
descField = inputs.item(i);
break;
}
}
return descField;
}
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setStyleById(i, p, v) {
//var n = document.getElementById(i);
var n = getElement(i, 'div');
n.style[p] = v;
}
Full Code: Code:
function getElement(id, type)
{
var inputs = document.getElementsByTagName(type);
var descField = null;
for(var i=0;i<inputs.length;i++)
{
if(inputs.item(i).getAttribute('id') == id )
{
descField = inputs.item(i);
break;
}
}
return descField;
}
// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setStyleById(i, p, v) {
//var n = document.getElementById(i);
var n = getElement(i, 'div');
n.style[p] = v;
}
function replace_html(el, html) {
if( el ) {
oldEl = (typeof el === "string" ? document.getElementById(el) : el);
newEl = document.createElement(oldEl.nodeName);
// Preserve any properties we care about (id and class in this example)
newEl.id = oldEl.id;
newEl.className = oldEl.className;
//alert(newEl.id);
//set the new HTML and insert back into the DOM
newEl.innerHTML = html;
// alert(newEl.innerHTML);
if(oldEl.parentNode)
oldEl.parentNode.replaceChild(newEl, oldEl);
else
oldEl.innerHTML = html;
//return a reference to the new element in case we need it
return newEl;
}
};
function populate_array()
{
// this function's sole job is to populate the array of items to be used.
var da = new Array(8);
da[0] = new Array(3);
da[0][0] = "portfolio/garage_conversion_before.jpg";
da[0][1] = "portfolio/garage_into_kitchen.jpg";
da[0][2] = "pfimage1";
da[1] = new Array(3);
da[1][0] = "portfolio/refurb_old.jpg";
da[1][1] = "portfolio/refurb_new.jpg";
da[1][2] = "pfimage2";
da[2] = new Array(3);
da[2][0] = "portfolio/fireplace_old.jpg";
da[2][1] = "portfolio/fireplace_new.jpg";
da[2][2] = "pfimage3";
da[3] = new Array(3);
da[3][0] = "portfolio/bathroom1_old.jpg";
da[3][1] = "portfolio/bathroom1_new.jpg";
da[3][2] = "pfimage4";
da[4] = new Array(3);
da[4][0] = "portfolio/kitchen1_old.jpg";
da[4][1] = "portfolio/kitchen1_new.jpg";
da[4][2] = "pfimage5";
da[5] = new Array(3);
da[5][0] = "portfolio/bathroom2_old.jpg";
da[5][1] = "portfolio/bathroom2_new.jpg";
da[5][2] = "pfimage6";
da[6] = new Array(3);
da[6][0] = "portfolio/bathroom3_old.jpg";
da[6][1] = "portfolio/bathroom3_new.jpg";
da[6][2] = "pfimage7";
da[7] = new Array(3);
da[7][0] = "portfolio/ext1_old.jpg";
da[7][1] = "portfolio/ext1_new.jpg";
da[7][2] = "pfimage8";
return da;
}
function switchimage(folioItemNum, ImageState)
{
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}
// folioItemNum tells us which folio item to access,
// ImageState tells us which image to set.
// we will use ajax/dom to re-write the document.
var OldImageState = 1 - ImageState;
// 2d array of items.
var darray = populate_array();
// take one item and fade out
opacity(darray[folioItemNum][2], 100, 0, 500);
// re-arrange.
// with time delay.
window.setTimeout(function (a,b,c,d,e){
var y = "<a href=\"" + c + "\" rel=\"lightbox[" + d + "]\" class=\"hiddenimg\"><img src=\"" + c + "\" class=\"folioimghidden\"/></a><a href=\"" + b + "\" rel=\"lightbox[" + d + "]\"><img src=\"" + b + "\" class=\"folioimg\"/></a>";
replace_html(e, y);
opacity(e, 0, 100, 500);
},500,document.getElementById(darray[folioItemNum][2]),darray[folioItemNum][ImageState],darray[folioItemNum][OldImageState],folioItemNum,darray[folioItemNum][2]);
// done.
}
function regenbottomimgs()
{
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}
var array = Array(3);
array[0] = -1;
array[1] = -1;
array[2] = -1;
array[0] = get_unique_random_int(6, array, 3);
array[1] = get_unique_random_int(6, array, 3);
array[2] = get_unique_random_int(6, array, 3);
var darray = populate_array();
var imgstr = "<img src=\"" + darray[array[0]][1] + "\" class=\"scaleddown1\" /><img src=\"" + darray[array[1]][1] + "\" class=\"scaleddown2\" /><img src=\"" + darray[array[2]][1] + "\" class=\"scaleddown2\" />";
opacity("bottomimgs", 100, 0, 500);
window.setTimeout(function (a,b){
var x = replace_html(b, a);
opacity(b, 0, 100, 500);
},500,imgstr,"bottomimgs");
}
function get_random_int(Max)
{
var randomnumber = Math.round( Math.random() * Max );
return randomnumber;
}
function get_unique_random_int(Max, List, List_Length)
{
var stop = 1
var esc = 0
var x = 0;
var i = 0;
while ( stop == 1 )
{
esc = 0;
x = get_random_int(Max);
for ( i = 0; i < List_Length; i++ )
{
if ( x == List[i] )
{
esc = 1;
break;
}
}
if ( esc == 0 )
{
stop = 0;
}
}
return x;
}
function randomise_bottom_images()
{
regenbottomimgs();
setTimeout("randomise_bottom_images()",5000);
}
function launch_randomise()
{
setTimeout("randomise_bottom_images()", 5000);
}
function switchallnew()
{
switchimage(0,1);
switchimage(1,1);
switchimage(2,1);
switchimage(3,1);
switchimage(4,1);
switchimage(5,1);
switchimage(6,1);
switchimage(7,1);
}
function opacity(id, opacStart, opacEnd, millisec)
{
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if( opacStart > opacEnd )
{
for(i = opacStart; i >= opacEnd; i--) {
setTimeout(function (opacity, id) {
setStyleById(id, "opacity", (opacity / 100));
setStyleById(id, "MozOpacity", (opacity / 100));
setStyleById(id, "KhtmlOpacity", (opacity / 100));
setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
},(timer * speed), i, id);
timer++;
}
}
else if(opacStart < opacEnd)
{
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout(function (opacity, id) {
setStyleById(id, "opacity", (opacity / 100));
setStyleById(id, "MozOpacity", (opacity / 100));
setStyleById(id, "KhtmlOpacity", (opacity / 100));
setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
},(timer * speed), i, id);
timer++;
}
}
}
Thanks, A. I am struggeling to get this to work in both IE, Firefox and Opera. I have an ajax application that changes the tr row bgcolor if the row is clicked and thereby item is added successfully to another items-list. My problem is to determine if the bg-color has changed or not, if it has changed, do not append the ordinary bgcolor on onmouseout and do not change color if you roll mouse over the row after this is done. The following is my problem: Code: // $bgfarve is the default row color // this works in IE and Opera but not in Firefox style="background-color: $bgfarve;" onmouseout="javascript: if(this.style.backgroundColor!='#ccff66')this.style.backgroundColor='$bgfarve';" onmouseover="javascript: if(this.style.backgroundColor!='#ccff66')this.style.backgroundColor='#dddddd';" // this works in Firefox but not the others style="background-color: $bgfarve;" onmouseout="javascript: if(this.style.backgroundColor!='rgb(204, 255, 102)')this.style.backgroundColor='$bgfarve';" onmouseover="javascript: if(this.style.backgroundColor!='rgb(204, 255, 102)')this.style.backgroundColor='#dddddd';" I had one solution working by setting ordinary bg and onmouseover colors on the tbody tag, and the chart was setting tr-color - but IE was very very very slow on that. Any ideas ? Anyone ? |
|||||||