JavaScript - What Do I Need To Make The Background Transparent In Fadeslideshow.js
Code:
/* Ultimate Fade-in slideshow (v2.4) * Last updated: May 24th, 2010. This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/ * Visit http://www.dynamicdrive.com/ for full source code */ //Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize //May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added. var fadeSlideShow_descpanel={ controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images fontStyle: 'normal 11px Verdana', //font style for text descriptions slidespeed: 200 //speed of description panel animation (in millisec) } //No need to edit beyond here... jQuery.noConflict() function fadeSlideShow(settingarg){ this.setting=settingarg settingarg=null var setting=this.setting setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500 setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0 setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only) setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0) setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide) setting.oninit=setting.oninit || function(){} setting.onslide=setting.onslide || function(){} if (setting.displaymode.randomize) //randomly shuffle order of images? setting.imagearray.sort(function() {return 0.5 - Math.random()}) var preloadimages=[] //preload images setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains "" for (var i=0; i<setting.imagearray.length; i++){ //preload images preloadimages[i]=new Image() preloadimages[i].src=setting.imagearray[i][0] if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length) setting.longestdesc=setting.imagearray[i][3] } var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always" setting.closebutton=(setting.descreveal=="always")? '<img class="close" src="'+closebutt[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+closebutt[1]+'px;height:'+closebutt[2]+'px;margin-left:2px" title="Hide Description" />' : '' var slideshow=this jQuery(document).ready(function($){ //fire on DOM ready var setting=slideshow.setting var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.") return } setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide .css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'}) .appendTo(setting.$wrapperdiv) var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />') .css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif .appendTo(setting.$wrapperdiv) var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image if (setting.longestdesc!="" && setting.descreveal!="none"){ //if at least one slide contains a description (versus feature is enabled but no descriptions defined) and descreveal not explicitly disabled fadeSlideShow.routines.adddescpanel($, setting) if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight}) setting.$descinner.click(function(e){ //asign click behavior to "close" icon if (e.target.className=="close"){ slideshow.showhidedescpanel('hide') } }) setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon slideshow.showhidedescpanel('show') $(this).css({visibility:'hidden'}) }) } else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover) setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')}) setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')}) } } setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false}) if ($curimage.get(0).complete){ //accounf for IE not firing image.onload $loadingimg.hide() slideshow.paginateinit($) slideshow.showslide(setting.curimage) } else{ //initialize slideshow when first image has fully loaded $loadingimg.hide() slideshow.paginateinit($) $curimage.bind('load', function(){slideshow.showslide(setting.curimage)}) } setting.oninit.call(slideshow) //trigger oninit() event $(window).bind('unload', function(){ //clean up and persist if (slideshow.setting.persist) //remember last shown image's index fadeSlideShow.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage) jQuery.each(slideshow.setting, function(k){ if (slideshow.setting[k] instanceof Array){ for (var i=0; i<slideshow.setting[k].length; i++){ if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div slideshow.setting[k][i].innerHTML=null slideshow.setting[k][i]=null } } }) slideshow=slideshow.setting=null }) }) } fadeSlideShow.prototype={ navigate:function(keyword){ var setting=this.setting clearTimeout(setting.playtimer) if (setting.displaymode.type=="auto"){ //in auto mode setting.displaymode.type="manual" //switch to "manual" mode when nav buttons are clicked on setting.displaymode.wraparound=true //set wraparound option to true } if (!isNaN(parseInt(keyword))){ //go to specific slide? this.showslide(parseInt(keyword)) } else if (/(prev)|(next)/i.test(keyword)){ //go back or forth inside slide? this.showslide(keyword.toLowerCase()) } }, showslide:function(keyword){ var slideshow=this var setting=slideshow.setting if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause) return } var totalimages=setting.imagearray.length var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0) : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1) : Math.min(keyword, totalimages-1) var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image $slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0}) $slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0}) if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown clearTimeout(setting.hidedesctimer) //clear hide desc panel timer slideshow.showhidedescpanel('hide', 0) //and hide it immediately } setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete: clearTimeout(setting.playtimer) try{ setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage) }catch(e){ alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e) } if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ slideshow.showhidedescpanel('show') setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed) } setting.currentstep+=1 if (setting.displaymode.type=="auto"){ if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0) setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause) } }) //end callback function setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background setting.fglayer=setting.bglayer setting.bglayer=(setting.bglayer==0)? 1 : 0 setting.curimage=imgindex if (setting.$descpanel){ setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'}) if (setting.imagearray[imgindex][3]) //if this slide contains a description setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3]) } if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){ this.paginatecontrol() } if (setting.$status) //if status container defined setting.$status.html(setting.curimage+1 + "/" + totalimages) }, showhidedescpanel:function(state, animateduration){ var setting=this.setting var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1] setting.$descpanel.stop().animate({top:endpoint}, (typeof animateduration!="undefined"? animateduration : fadeSlideShow_descpanel.slidespeed), function(){ if (setting.descreveal=="always" && state=="hide") setting.$restorebutton.css({visibility:'visible'}) //show restore button }) }, paginateinit:function($){ var slideshow=this var setting=this.setting if (setting.togglerid){ //if toggler div defined setting.$togglerdiv=$("#"+setting.togglerid) setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev') setting.$next=setting.$togglerdiv.find('.next').data('action', 'next') setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls var $rel="nofollow" target=$(this) slideshow.navigate($target.data('action')) e.preventDefault() }) setting.$status=setting.$togglerdiv.find('.status') } }, paginatecontrol:function(){ var setting=this.setting setting.$prev.css({opacity:(setting.curimage==0)? 0.4 : 1}).data('action', (setting.curimage==0)? 'none' : 'prev') setting.$next.css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1}).data('action', (setting.curimage==setting.imagearray.length-1)? 'none' : 'next') if (document.documentMode==8){ //in IE8 standards mode, apply opacity to inner image of link setting.$prev.find('img:eq(0)').css({opacity:(setting.curimage==0)? 0.4 : 1}) setting.$next.find('img:eq(0)').css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1}) } } } fadeSlideShow.routines={ getSlideHTML:function(imgelement){ var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" rel="nofollow" target="'+imgelement[2]+'">\n' : '' //hyperlink slide? layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n' layerHTML+=(imgelement[1])? '</a>\n' : '' return layerHTML //return HTML for this layer }, getFullHTML:function(imagearray){ var preloadhtml='' for (var i=0; i<imagearray.length; i++) preloadhtml+=this.getSlideHTML(imagearray[i]) return preloadhtml }, adddescpanel:function($, setting){ setting.$descpanel=$('<div class="fadeslidedescdiv"></div>') .css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'}) .appendTo(setting.$wrapperdiv) $('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs .css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'}) .eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div .eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div .appendTo(setting.$descpanel) setting.$descinner=setting.$descpanel.find('div.descpanelfg') setting.panelheight=setting.$descinner.outerHeight() setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'}) if (setting.descreveal=="always"){ //create restore button setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />') .appendTo(setting.$wrapperdiv) } }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document.cookie = name+"=" + value + ";path=/" } } Similar TutorialsI am assuming that this is an issue with the js on my index page: http://www.yourbusybee.com/fb/ The main menu on this page has a sub-menu under "About". I've tried changing the CSS for the menu in order to make that sub-menu background be 50% transparent, but nothing is fixing it. I see things about "fade" within the js code, but I just don't see how to set how far it fades in or out. Can anyone assist me with this? I'd be awfully appreciative! Thanks in advance. ~Laura Hi everyone, I'm new on this forum. I really need help in coding an part of my website. I want to make the logo background image fade to another background image on hover. Here is the code I have until now: Code: #logo {margin-top:0px; margin-bottom:0px; margin-left:auto; margin-right:auto; width:600px; height:515px;} #logo h1 {display:block; background:url(img/logo.jpg) no-repeat; width:600px; height:515px; text-indent:-10000px; margin:0px;} #logo h1 a {display:block; width:100%; height:100%;} #logo h1 a:hover {background:url(img/logo.jpg) no-repeat 0px -515px;} I want the background:url(img/logo.jpg) no-repeat; to fade to {background:url(img/logo.jpg) no-repeat 0px -515px;}. I haven't found any tutorial which explains how to do that properly. I'd be really greatful if you could help me. Thank you very much, Alex Hi, I'm faced with a problem trying to set background color under IE7. I have the following Javascript: Code: function showLayer793BKColor(id) { var txtObj = document.all(id); if (txtObj.style.display == 'none') { txtObj.style.display = '' txtObj.style.backgroundColor = 'grey'; } } function hideLayer793BKColor(id) { var txtObj = document.all(id); if ( txtObj.style.backgroundColor == 'grey' ) txtObj.style.display = 'none'; } These functions are used to show or hide div blocks. These blocks are, for example, specified in the following way: Code: <div id="l_gct5tekst" style="display:none"> <b>GCT 5. Eerste verkenning problematiek</b> and, for example, Code: <div id="l_Keuze" style="display:none"> <br/> <b>GCT 5</b> <br/> </div> The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then. In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other. Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ? Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ? Thanks in advance, Diederick van Elst I need a code that makes the following: 1. I need a link to a certain website 2. If someone click that link it opens in new tab and it makes 1. link invisible and show a another link on the same place with a time delay of 5 seconds I recently installed a dynamic slideshow on my server and tried eliminating the background from "black" to "none" in the fadeslideshow.js so I could use transparent images to reveal the blue background on my site, but for some reason slide 1 stays on screen when switching to slide 2... not sure what to do, would appreciate any help. Thanks, Josh. please visit to view slideshow error http://www.scannmarketing.com I am creating a page on which I have several div's. They contain an image as background. When I do a mouseover on a div, I want a div (with an image semitransparant), to be placed ontop of it's hovered div. When mouseout the semitransparant div should be hidden. Now I have the following code, it does work, but sometimes on mouseout the semitransparant div isn't hidden (when the mouse moves to quick). Is there a solution for it? PHP Code: echo '<div id="block-'.$BlockNums.'" class="blok '.$BlockStyle.'" onmouseover="document.getElementById(\'message\').style.display=\'block\';" ><img src="images/'.$BlockImg.'.png" width="181"/></div>'; echo '<a href="'.$BlockLink.'" style="display:block;cursor:pointer;"><div id="message" class="disMessage" style="display:none;" onmouseout="document.getElementById(\'message\').style.display=\'none\';"><p>'.$BlockMouse.'</p></div></a>'; And the css: Code: .disMessage { width: 163px; height: 168px; z-index: 1000; position: absolute; padding: 10px 10px 10px 10px; text-align: center; background-image: url("../images/hoverTrans.png"); } .blok { width: 181px; height: 186px; /*border: 1px solid #FE7701;*/ background-image: url("../images/blok.png"); padding: 1px 9px 9px 1px; } Thanks Hi I have a problem where I have a drop down menu above a flash banner. The drop down is being hidden by the banner when you hover over it. I added the following to stop that <param name='wmode' value='transparent'>. Its working fine in IE 6 where the drop down options are over the banner but it wont work with IE7/8 or firefox. Any suggestions for code that will work for all browsers? Code: document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='381' height='130'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='/content/images/flash/abc.swf'><param name='quality' value='high'><param name='wmode' value='transparent'><embed src='/content/images/flash/abc.swf' wmode='transparent' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='381' height='130'></embed></object>"); Hi there, I am trying to open some SWF videos from an HTML page. When the user clicks the link, I would like to have the videos open in a transparent window (not a separate browser wndow). I have figured out how to embed the files and have them open in a transparent window as soon as you load/refresh the page but I want to open the SWF using a link. Any suggestions? Thank you all. B Hi, There is a live search on my web page but the box of available options which falls below the 'input' field has a transparent background color. How can it be changed to non-transparent? This line below makes the background white, but all the text on the page shines through, since the default is transparent. [CODE] document.getElementById("linksearch").style.backgroundColor="#FFFFFF"; [CODE] This instruction line does not help much 'cos I can't figure out the correct way to make it work: [CODE] Object.style.backgroundColor="color|inherit|transparent". [CODE] Thanks. I found this copy and paste java script for slide shows... I can only put 1 on the page then the other don't work... how do i edit it so i can put multiple on 1 page? http://www.javascriptkit.com/script/.../jsslide.shtml Code: <script language="JavaScript1.1"> <!-- /* JavaScript Image slideshow: By JavaScript Kit (www.javascriptkit.com) Over 200+ free JavaScript here! */ var slideimages=new Array() var slidelinks=new Array() function slideshowimages(){ for (i=0;i<slideshowimages.arguments.length;i++){ slideimages[i]=new Image() slideimages[i].src=slideshowimages.arguments[i] } } function slideshowlinks(){ for (i=0;i<slideshowlinks.arguments.length;i++) slidelinks[i]=slideshowlinks.arguments[i] } function gotoshow(){ if (!window.winslide||winslide.closed) winslide=window.open(slidelinks[whichlink]) else winslide.location=slidelinks[whichlink] winslide.focus() } //--> </script> Code: <a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a> <script> <!-- //configure the paths of the images, plus corresponding target links slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg") slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010") //configure the speed of the slideshow, in miliseconds var slideshowspeed=2000 var whichlink=0 var whichimage=0 function slideit(){ if (!document.images) return document.images.slide.src=slideimages[whichimage].src whichlink=whichimage if (whichimage<slideimages.length-1) whichimage++ else whichimage=0 setTimeout("slideit()",slideshowspeed) } slideit() //--> </script> <p align="center"><font face="arial" size="-2">This free script provided by</font><br> <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript Kit</a></font></p> I want the dynamically add fields can be appear with a contain of php code, but I have not found the way, I wondering there who are willing to help me. my code as fallowing: Code: <!-- // another fields here //--> <div id="new_field"--></div> <script type="text/javascript"> var inputs = { fields: 0, target: "new_field", addInput: function() { if (this.fields != 5) { this.fields++; var newElement = document.createElement('div'); newElement.id = this.target + this.fields; newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?>' size='auto' maxlength='100%' /><?php } } ?>"; document.getElementById(this.target).appendChild(newElement); } else { alert("Only 5 fields allowed."); } }, };</script> i know it does not appear because the php code Quote: newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?' size='auto' maxlength='100%' /><?php } } ?>"; but please let me know is there another idea and pointer to make it work?, I would appreciate it and many thanks. I need the rolling and the displaying in a loop and i am clueless. If anyone could help it would be much appreciated. <html> <head> <title> Die Rolls </title> <script type="text/javascript" src="http://balance3e.com/random.js"> </script> <script type="text/javascript"> function RollDice() { var roll1, roll2, roll3, roll4, roll5; roll1 = RandomInt(1, 6); roll2 = RandomInt(1, 6); roll3 = RandomInt(1, 6); roll4 = RandomInt(1, 6); roll5 = RandomInt(1, 6); document.getElementById('die1Img').src = 'http://balance3e.com/Images/die' + roll1 + '.gif'; document.getElementById('die2Img').src = 'http://balance3e.com/Images/die' + roll2 + '.gif'; document.getElementById('die3Img').src = 'http://balance3e.com/Images/die' + roll3 + '.gif'; document.getElementById('die4Img').src = 'http://balance3e.com/Images/die' + roll4 + '.gif'; document.getElementById('die5Img').src = 'http://balance3e.com/Images/die' + roll5 + '.gif'; document.getElementById('rollSpan').innerHTML = parseFloat(document.getElementById('rollSpan').innerHTML) + 1; } </script> </head> <body bgColor="lime"> <div style="text-align:center"> <p> <img id="die1Img" alt="die image" src="http://balance3e.com/Images/die1.gif"> <img id="die2Img" alt="die image" src="http://balance3e.com/Images/die2.gif"> <img id="die3Img" alt="die image" src="http://balance3e.com/Images/die3.gif"> <img id="die4Img" alt="die image" src="http://balance3e.com/Images/die4.gif"> <img id="die5Img" alt="die image" src="http://balance3e.com/Images/die5.gif"> </p> <input type="button" value="Click to Roll" onclick="RollDice();"> <hr> <p> Number of rolls: <span id="rollSpan">0</span> </p> </div> </body> </html> I have code like: PHP Code: function NewWindow(mypage, myname, w, h, scroll) { var winl = (screen.width - w) / 2; var wint = (screen.height - h) / 2; winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable' win = window.open(mypage, myname, winprops) if (parseInt(navigator.appVersion) >= 4)} } What is correct code to work in IE like V8? Hi guys! I have a situation where 2 scripts run perfectly when run independently - the first one loads up a "video", running at 30 fps, made up of images, the second one uses accelerometer data from the iPhone to throw a blue sphere around the screen, depending on movement of the iPhone. However, when I put these 2 scripts inside one HTML page, the "video" runs, but the blue sphere is "frozen" - but the scripts are still the same (one inside the head, as before, and the other in the body, again as before) How can I get them to run in a parallel way? I'd be very pleased indeed if someone could come up with a solution!! Here's the complete code: Code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Accelerometer Javascript Test</title> <link rel="stylesheet" href="app.css" type="text/css"> <meta name=viewport content="width=device-width,user-scalable=yes"/> <!--<meta name="viewport" content="initial-scale=1.6; maximum-scale=1.0; width=device-width; "/>--> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <style> body { } #sphere { position: absolute; width: 20px; height: 20px; border-radius: 50px; -webkit-radius: 50px; background-color: blue; left: 161px; top: 207px; } </style> <script type="text/javascript"> var frames = new Array(); //load frames into array for(var i = 0; i < 176; i++){ frames[i] = new Image(480,320); frames[i].src ="images/track" + (i+1) + ".png"; } //playback var currentFrameNumber = 0; var fps = 30; // frames / second const speed = 1000 / fps; // milliseconds //var speed = 33; function nextFrame( ) { document.getElementById("display").src = frames[currentFrameNumber].src; currentFrameNumber = ( currentFrameNumber + 1 ) % frames.length; setTimeout( nextFrame, speed ); } window.onload = nextFrame; </script> </head> <body> <script type="text/javascript"> var x = 0, y = 0, vx = 0, vy = 0, ax = 0, ay = 0; var sphere = document.getElementById("sphere"); if (window.DeviceMotionEvent != undefined) { window.ondevicemotion = function(e) { ax = event.accelerationIncludingGravity.x * 5; ay = event.accelerationIncludingGravity.y * 5; document.getElementById("accelerationX").innerHTML = e.accelerationIncludingGravity.x; document.getElementById("accelerationY").innerHTML = e.accelerationIncludingGravity.y; document.getElementById("accelerationZ").innerHTML = e.accelerationIncludingGravity.z; if ( e.rotationRate ) { document.getElementById("rotationAlpha").innerHTML = e.rotationRate.alpha; document.getElementById("rotationBeta").innerHTML = e.rotationRate.beta; document.getElementById("rotationGamma").innerHTML = e.rotationRate.gamma; } } setInterval( function() { var landscapeOrientation = window.innerWidth/window.innerHeight > 1; if ( landscapeOrientation) { vx = vx + ay; vy = vy + ax; } else { vy = vy - ay; vx = vx + ax; } vx = vx * 0.98; vy = vy * 0.98; y = parseInt(y + vy / 50); x = parseInt(x + vx / 50); boundingBoxCheck(); sphere.style.top = y + "px"; sphere.style.left = x + "px"; }, 25); } function boundingBoxCheck(){ if (x<0) { x = 0; vx = -vx; } if (y<0) { y = 0; vy = -vy; } if (x>document.documentElement.clientWidth-20) { x = document.documentElement.clientWidth-20; vx = -vx; } if (y>document.documentElement.clientHeight-20) { y = document.documentElement.clientHeight-20; vy = -vy; } } </script> <img id="display"src="images/track1.png" width="480" height="320"> <div id=content> <div id="sphere"></div> </div> </body> </html> Code: <script type="text/javascript"> <!-- NS4 = (document.layers) ? true : false; function launchVsee2() { try { location='vsee:'; } catch (err) { location='http://www.vsee.com'; return true } } //--> </script> This app works as a URI and can be triggered to run in an address bar, when launched it will launch the app. Now, I can get this script to run in Firefox; it will test for the URI and if not avail it will redirect to the site website of that app. However when I run this in IE it will just load a page that says the site is in valid and not redirect. Anyone have any tips on how to get this working in IE. ALSO in addition this will not run in Safari either; same issue as IE. Thanks in advance here is the source of my plugin, OSX Style Dialog http://www.ericmmartin.com/projects/simplemodal-demos/# here is my code... my problem is the content is so long... and i can't scroll the page down.. Code: <!DOCTYPE html> <html> <head> <title> SimpleModal OSX Style Dialog </title> <meta name='author' content='Eric Martin' /> <meta name='copyright' content='2009 - Eric Martin' /> <!-- OSX Style CSS files --> <link type='text/css' href='css/osx.css' rel='stylesheet' media='screen' /> <!-- JS files are loaded at the bottom of the page --> </head> <body> <div id='osx-modal'><h2>OSX Style Modal Dialog</h2> <p>A OSX style modal dialog demonstrating the felxibility of SimpleModal.</p> <input type='button' name='osx' value='Demo' class='osx demo'/> or <a href='#' class='osx'>Demo</a> </div> <div id="osx-modal-content"> <div id="osx-modal-title">OSX Style Modal Dialog</div> <div id="osx-modal-data"> <table width="477" border="0"> <tr> <td width="471"><h1>Terms & Conditions</h1></td> </tr> <tr> <td><p><strong>IMPORTANT -- READ CAREFULLY BEFORE USING THE SERVICES PROVIDED ON THIS WEB SITE: This End User Agreement ("Agreement") is a legal agreement between you (either an individual or an entity) and PNRC . By accepting the Terms and Conditions of this Agreement you agree to be bound by the terms and conditions of this Agreement. If you do not agree with the terms of this agreement, you will not be permitted to use this Web Site.</strong></p></td> </tr> <tr> <td><p><strong>YOU AGREE THAT YOUR USE OF THIS WEB SITE ACKNOWLEDGES THAT YOU HAVE READ THIS AGREEMENT, UNDERSTAND IT, AND AGREE TO BE BOUND BY ITS TERMS AND CONDITIONS.</strong></p></td> </tr> <tr> <td><p>1. Restrictions - You may not download, copy, modify, adapt, translate, reverse engineer, decompile, disassemble or modify the Software nor attempt to gain knowledge of the source code of the Software in any manner. You shall permit the PNRC to audit your compliance with this Agreement as the PNRC deems reasonably necessary. All rights not expressly granted to you are reserved to the PNRC.</p></td> </tr> <tr> <td><p>2. Content. - You acknowledge that the content on the Web Site is provided by third parties and that the PNRC acts as a passive conduit for the distribution and publication of such content. The PNRC does not endorse any content on or accessible through the Web Site and is not responsible or liable to you or to any third party for the truthfulness or accuracy such content.</p></td> </tr> <tr> <td><p>3. Advertisements - The Web Site may contain advertisements by third parties which may contain links to other sites. Unless otherwise specifically stated, the PNRC does not endorse any product or make any representation regarding the content or accuracy of any materials contained in, or linked to, any advertisement on the PNRC website.</p></td> </tr> <tr> <td><p>4. No Warranty - THE WEB SITE AND THE SOFTWARE ARE PROVIDED ON AN "AS IS" BASIS WITHOUT ANY WARRANTIES OF ANY KIND. THE PNRC MAKES NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE USE OF THE WEB SITE OR THE SOFTWARE. THE PNRC DOES NOT AND CANNOT WARRANT THE PERFORMANCE OR RESULTS YOU MAY OBTAIN BY USING THE WEB SITE OR THE SOFTWARE AND THE PNRC MAKES NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED, AS TO NON-INFRINGEMENT OF THIRD PARTY RIGHTS, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. IN NO EVENT WILL THE PNRC BE LIABLE TO YOU FOR ANY CONSEQUENTIAL, INCIDENTAL OR SPECIAL DAMAGES, INCLUDING ANY LOST PROFITS OR LOST SAVINGS, EVEN IF THE PNRC HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES, OR FOR ANY CLAIM BY ANY THIRD PARTY.</p></td> </tr> <tr> <td><p>5. Limitation of Liability - UNDER NO CIRCUMSTANCES WILL THE PNRC, ITS OFFICERS, DIRECTORS, EMPLOYEES, CONTRACTORS, LICENSORS OR SUPPLIERS BE LIABLE TO YOU OR ANY OTHER PERSON FOR ANY CONSEQUENTIAL, INDIRECT, PERSONAL INJURY OR DEATH, SPECIAL, PUNITIVE OR INCIDENTAL DAMAGES, WHETHER FORESEEABLE OR UNFORESEEABLE, BASED ON YOUR CLAIMS OR THOSE OF ANY THIRD PARTY (INCLUDING, BUT NOT LIMITED TO, CLAIMS FOR LOSS OF DATA, GOODWILL, PROFITS, USE OF MONEY OR USE OF THE SOFTWARE, INTERRUPTION IN USE OR AVAILABILITY OF DATA, STOPPAGE OF OTHER WORK OR IMPAIRMENT OF OTHER ASSETS) ARISING OUT OF A BREACH OR FAILURE OF AN EXPRESSED OR IMPLIED WARRANTY, BREACH OF CONTRACT, MISREPRESENTATION, NEGLIGENCE, STRICT LIABILITY IN TORT OR OTHERWISE. IN NO EVENT WILL THE AGGREGATE LIABILITY WHICH THE PNRC, ITS OFFICERS, DIRECTORS, EMPLOYEES, CONTRACTORS, LICENSORS OR SUPPLIERS MAY INCUR IN ANY ACTION OR PROCEEDING EXCEED THE TOTAL AMOUNT ACTUALLY PAID BY YOU TO THE PNRC FOR THE USE OF THE WEB SITE SOFTWARE IN THE THREE MONTHS IMMEDIATELY PRECEDING THE EVENT GIVING RISE TO THE ACTION OR PROCEEDING.<br /> YOU ARE RESPONSIBLE FOR ALL MATTERS RELATED TO THE SECURITY OF YOUR COMPUTERS, SYSTEMS AND COMPONENTS THEREOF, AND ALL DATA AND BUSINESS RELATED TO THE OPERATION OF THE SOFTWARE. THE WEB SITE AND THE SOFTWARE ARE MADE AVAILABLE OVER THE INTERNET, WHICH IS AN "OPEN" ENVIRONMENT IN WHICH THIRD PARTY ACCESS IS POSSIBLE, AND OFTEN PERMITTED. YOU ARE RESPONSIBLE FOR ENSURING THE SECURITY OF YOUR SYSTEMS, INCLUDING, BUT NOT LIMITED TO "FIREWALL" CONFIGURATIONS AND ANTI-VIRUS PROTECTIONS, AND the PNRC SHALL HAVE NO RESPONSIBILITY OR LIABILITY FOR ANY LOSS, COST, EXPENSE OR DAMAGE YOU MAY SUFFER RELATED TO THE USE OF THE SOFTWARE.</p></td> </tr> <tr> <td><p>6. Indemnity. You agree to idemnify the PNRC, its directors and officers from any damages, costs and/or losses they or it may suffer as a result of any breach on your part (or on the part of your employees or agents) of the terms and conditions of this Agreement.</p></td> </tr> <tr> <td><p>7. Exclusion from the United Nations Convention on Contracts for the International Sale of Goods - The rights and obligations under this agreement shall not be governed by the United Nations Convention on Contracts for the International Sale of Goods and/or any local implementing legislation, the application of which is expressly excluded.</p></td> </tr> <tr> <td><p>8. Governing Law - This agreement shall be governed by the laws of the Province of Ontario, Canada, excluding applicable conflict of law rules. You hereby submit to the exclusive personal jurisdiction and venue of the courts of the Province of Ontario with respect to matters related to this agreement.</p></td> </tr> <tr> <td><p>9. Force Majeure - Except for payment obligations hereunder, neither you nor the PNRC will be liable for any failure or delay in performing an obligation under this Agreement that is due to causes beyond its reasonable control, such as natural catastrophes, governmental acts or omissions, laws or regulations, labour strikes or difficulties or transportation stoppages or slowdowns. If any of these causes continues to delay or prevent performance for more than 90 days, the affected party may terminate this Agreement, effective immediately, upon notice in writing to the other party, which notice may be delivered by E-mail.</p></td> </tr> <tr> <td><p>10. Termination - This Agreement will automatically terminate if you fail to comply with any term hereof. No notice shall be required from the PNRC to effect such termination. You may also terminate this agreement at any time by notifying the PNRC in writing of termination, which notice may be delivered by E-mail. Upon any termination of this Agreement you shall immediately discontinue use of the Software.</p></td> </tr> <tr> <td><p>11. Miscellaneous - This Agreement shall constitute the complete and exclusive agreement between you and the PNRC and supersedes all other proposals, prior understandings or agreements between the parties pertaining to the Software. The terms and conditions of this Agreement may not be amended except by the PNRC providing you with at least 30 days written notice of amendment, which notice may be delivered by e-mail. If any provision of this Agreement is held to be unenforceable for any reason, such provision shall be reformed only to the extent necessary to make it enforceable and such decision shall not affect the enforceability of such provision under other circumstances, or of the remaining provisions hereof under all circumstances. </p></td> </tr> <tr> <td><INPUT type="button" value="Close Window" onClick="window.close()"> </td> </tr> </table> <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p> </div> </div> <!-- Load JavaScript files --> <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.simplemodal.js'></script> <script type='text/javascript' src='js/osx.js'></script> </body> </html> here is the CSS Code: body {height:100%; margin:0;} #osx-modal-content, #osx-modal-data {display:none;} /* Overlay */ #osx-overlay {background-color:#000; cursor:wait;} /* Container */ #osx-container {background-color:#eee; color:#000; font-family:"Lucida Grande",Arial,sans-serif; font-size:.9em; padding-bottom:4px; width:600px; -moz-border-radius-bottomleft:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-right-radius:6px; -moz-box-shadow:0 0 64px #000; -webkit-box-shadow:0 0 64px #000;} #osx-container a {color:#ddd;} #osx-container #osx-modal-title {color:#000; background-color:#ddd; border-bottom:1px solid #ccc; font-weight:bold; padding:6px 8px; text-shadow:0 1px 0 #f4f4f4;} #osx-container .close {display:none; float:right;} #osx-container .close a {display:block; color:#777; font-size:.8em; font-weight:bold; padding:6px 12px 0; text-decoration:none; text-shadow:0 1px 0 #f4f4f4;} #osx-container .close a:hover {color:#000;} #osx-container #osx-modal-data {padding:6px 12px;} #osx-container h2 {margin:10px 0 6px;} #osx-container p {margin-bottom:10px;} #osx-container span {color:#777; font-size:.9em;} Hey guys, im in need of some more java script help (by the way thanks for all the other times you guys have helped me) need to create a search box that whatever is in the search box will come up at the end of the URL https://****/DirectConnect/Getpremie...Chassis|X##### the last 6 charecters should be replaced with what ever number that in the search box so X##### should be replaced by 123456 for example or any other number Hi I found a website that has an awesome link highlighter thing, but I can't quite understand how they did it. I'm 99% sure its javascript, but I could be wrong. Here is the website: http://www.sosfactory.com/web-design/amazium/ The part I want to emulate is the links in the top right. When you mouse over it the highlight bounces to the link you hover over. I tried looking at the code and here is what it says: Code: <!--/header --> <div id="header"> <h1><a href="index.html">AMAZIUM: IT and Management Consulting</a></h1> <div id="lava"> <ul> <li class="selected"><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Services</a></li> <li><a href="#">Consulting</a></li> <li><a href="#">Contact</a></li> </ul> <div id="box"><div class="head"></div></div> </div> </div> I found the CSS file it is referencing, and I believe the LAVA part has something to do with the effect. Here it is: Code: /*=== Header ===*/ #header { background: #e0d6c8 url(../images/body-bg.gif) repeat-y center ; height: 125px; margin: 0 auto; width: 963px; } #header h1 a { background: url(../images/header-logo.png) no-repeat top left; display: block; width: 343px; height: 125px; text-indent: -9999px; float: left; cursor: pointer; } #lava { position:relative; text-align:center; width:450px; height:35px; float: right; margin: 65px 19px 0 0; font-weight: bold; } #lava ul { margin:0; padding:0; list-style:none; display:inline; position:absolute; top:1px; z-index:100; right: 0px; } #lava li { margin:0 15px; float:left; } #lava a, #lava a:visited { color: #464646; text-decoration: none; display: block; font-size: 15px; } #lava a:hover {color: #fff;} #lava #box { position:absolute; left:0; top:0; z-index:50; background:url(../images/tail.gif) no-repeat right center; height:20px; padding-right:8px; margin:1px 0 0 -10px; } #lava #box .head { background:url(../images/head.gif) no-repeat 0 0; height:20px; padding-left:10px; } Anyone have any ideas about how to do this? Here is a link to the css file: http://www.sosfactory.com/web-design...css/styles.css Also, there is a folder called js that has a few scripts but I'm not sure what they do. Here's the link: http://www.sosfactory.com/web-design/amazium/js/ Any help is greatly appreciated! Code: function get_check_value() { var c_value = ""; for (var i=0; i < document.callflow.flow.length; i++) { if (document.callflow.flow[i].checked) { c_value = c_value + document.callflow.flow[i].value + "\n"; } } c_value = "You did the following steps:\n" + c_value; alert(c_value); return false; } how do you make this code pop up the values of (c_value) instead of an alert?.. thanks I have a notification bar on a Blogger blog (so, little/no access to server side) that I would like to use JavaScript to make the notification bar appear only once per day for each user. The site is www.BenjerMcVeigh.com, and here is the code for the notification bar: Code: <style type='text/css'> #ut-sticky { background:url('http://3.bp.blogspot.com/-7oGSlq30cTw/Tv33CS4WGgI/AAAAAAAAA0w/HxId_tRUae8/s1600/ut-bg.png') repeat; color:#fff; text-align: center; margin:0 auto; border-top: 1px solid #fff; height:64px; font-size:13px; position:fixed; bottom:0; z-index:999; width:95%; border-top-left-radius:15px; border-top-right-radius:15px; display:block; font-weight: bold; font-family: arial,"Helvetica"; font-color:#fff; } #ut-sticky:hover {background:#333;} #ut-sticky p{line-height:5px; font-size:18px; text-align:center; width:95%; float:left;} #ut-sticky p a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#cfe7d1;} .ut-cross{display:block; position:relative; right:15px; float:right;} .ut-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#cfe7d1; line-height:30px;} </style> <div id='ut-sticky'> <p><a href='http://bit.ly/yq10RE' target='_blank'>Use Google Reader? Why not add www.BenjerMcVeigh.com to your Google Reader list?</a>*****<a href='http://bit.ly/yq10RE' target='_blank'><img alt='Add to Google' border='0' src='http://gmodules.com/ig/images/plus_google.gif'/></a></p> <div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div> </div> <script language='JavaScript'> function hide_cross() { crosstbox = document.getElementById("ut-sticky"); crosstbox.style.visibility = 'hidden'; } </script> I'm very much a novice and appreciate your help...not really sure where to start. Thanks! |