|
JavaScript - Desktop Background
Is it there way to set desktop background picture from web page? For example, i have wallpaper.php and there 6 wallpapers, is there javascript to install them directly pb click something on page? Like install button?
Similar TutorialsI am using the following code for my iframes: Code: <iframe frameBorder="0" height="100%" width="100%" src="http://the.url.com"></iframe> However, when you go to my Desktop sample and click on any of the icons it doesn't load the iframe at 100% height for some reason. You can see that he Code: http://www.zazavi.com/desktop/desktop.html If anyone could tell me what I am doing wrong, it would be greatly appreciated. Thanks for your time! Code: document.getElementById('desktop').onclick = "javascript:alert(1);";
getting very very annoyed at javascript!!! Why doesn't this work!? I am making a site HERE and I was using this: Code: <script>
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile/i.test(navigator.userAgent)) {
if (document.URL != "http://www.precisionpaintandcollision.net") {
window.location = "http://m.precisionpaintandcollision.net";
}
}
</script>
to auto-redirect mobile users to the mobile site and I want to keep that but I want them to be able to view the desktop site without that code affecting them. I know some apps have "force/request desktop site" but i'd like them to be able to just view the desktop site without auto redirecting to mobile site. Is this possible? Thanks -John Several of the iPhone features can be duplicated with Javascript. One such feature I'd like to see is the Bookmark feature. You click on the Bookmark or Favorite button and the page name (of the html page) is saved to a list, just like what you see in modern browsers. Clicking on the list row brings up the bookmarked page. However, the app is not a browser, but made up of html/css/js pages that function from within a /www/ folder of the app. I've searched for such a script online, but the only ones I see are for desktop browsers (they permit a visitor to click on a link to place the page in the Bookmarks tab or folder of the browser). Does anyone know of a script that'll work on html pages in the iPhone and Android devices? Thanks! Steve Hi, I have tried to figure this out but haven't had any luck.. I need a td (id="td1") to have a bgcolor of black when a variable is equal to 1. So: var x = equation that is equal to 1; if (x == 1) { Code to make td have a black bg; } else { Don't change anything.} I am stuck because all the resources that I could find are talking about td:hover CSS. - Waffles All, Say I have the following divs on my page: Code: <div class="fn-area" id="69" style="left: 133px; top: 81px; width:97px; height: 230px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="69" style="position:relative;"></div> <span class="fn-note-content">creep</span> </div> </div> <div class="fn-area" id="70" style="left: 386px; top: 143px; width:136px; height: 129px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="70" style="position:relative;"></div> <span class="fn-note-content">creep</span> </div> </div> <div class="fn-area" id="71" style="left: 43px; top: 344px; width:151px; height: 222px;"><div class="fn-note" style="position:relative;"><div class="fn-note_id" id="71" style="position:relative;"></div> For the class "fn-area" it's different sizes for each div on the page. Can I use Javascript to get these coordinates and when I onmouseover this div I'd like an image to be displayed with the same coordinates and same size as the div? I want to use the same image for each rollover so the image would have to get resized for each rollover. How can this be done? Thanks in advance. I 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 Hey guys! I have this website mmosaga.com and in need of some help to fix my BG. Im trying to get my BG to rescale to various of monitor sizes. My monitor width is 1440 and my BG images are Width: 1566 Height:768. I want that position to show up on all the other browsers including IE. Here the code I use PHP Code: <html> <head> <script language="javascript"> function randomBackground() { var myImages = Array(); myImages[0] = 'Florenga.jpg'; myImages[1] = 'pangar.jpg'; myImages[2] = 'GrandChaseBG.png'; myImages[3] = 'ADBG.png'; myImages[4] = 'AionBG.png'; myImages[5] = 'FiestaBG.jpg'; myImages[6] = 'GalaxyOnlineBG.jpg'; myImages[7] = 'GunzBG.png'; myImages[8] = 'IrisOnlineBG.png'; myImages[9] = 'MabinogiBG.png'; myImages[10] = 'APB.jpg'; myImages[11] = 'S4LeagueBG.jpg'; myImages[12] = 'APB.jpg'; myImages[13] = 'WorldOfTanksBG.jpg'; myImages[14] = 'Elsword.jpg'; myRandomNumber = Math.floor(Math.random()*myImages.length); document.body.style.backgroundImage = 'URL('+myImages[myRandomNumber]+')'; } </script> <style type="text/css"> body { background-attachment: fixed; background-repeat: no-repeat; } </style> </head> <body onload="randomBackground();"></body> A script like this is invoked for each html page presenting a different background picture. How can I extend/modify the script to make the pic fade in when page is loaded? window.onload = function() {var bodyTag = document.getElementsByTagName("body")[0]; bodyTag.style.backgroundImage ="url(bilder/bryggsol.jpg)"; bodyTag.style.backgroundAttachment = "fixed"; bodyTag.style.backgroundPosition = "100% 100%"; bodyTag.style.backgroundRepeat = "no-repeat";} Grateful for clues What I want to do is a button that, when clicked, shades the screen and opens a new box above it. The box code works fine alone, but if I add the javascript that shades the screen, the button won't work at all. I use a div as the button, with an onClick method that changes the box.display from none to block or the opposite. This is the function that changes the display. If I take out the whole first part (the background part), it works fine (though at the first time I have to click twice to show the box) Code: function showBox ( method ) {
background = document.getElementbyId( 'shade' );
if ( background != null ) {
background = background.style;
if ( background.display == 'none' ) background.display = 'block';
else background.display = 'none';
}
box = document.getElementById( method );
if ( box != null ) {
box = box.style;
if ( box.display == 'none' ) box.display = 'block';
else box.display = 'none';
}
}
Now this is the CSS formatting of the background and the box: Code: .box {
padding: <?php print $style -> getPadding( ); ?>;
display: none;
position: absolute;
z-index: 2;
<?php css_base_1_format ( $style , $colorset ); ?>
<?php css_setAlpha ( $style -> getAlpha( ) ); ?>
}
.background {
display: none;
position: absolute:
z-index: 1;
width: 100%;
height: 100%;
background-color: '#000000';
<?php css_setAlpha ( 0.5 ); ?>
}
Don't mind the PHP css_setAlpha method. It merely prints alpha settings for each browser. And the css_base_1_format prints things like border and background color. Now this is the HTML implementation of both: Code: <!-- fullscreen shading --> <div id="shade" class="background"></div> <!-- box_delete --> <div id="box_delete" class="box" style="width:300;" > <center> Are you sure you want to delete <?php print $mailboxname; ?>? <br /> <table border="0"> <td class="text" width="100" > <a href="webmail_deletebox.php?box=<?php print $mailboxname; ?>"> <center> Yes </center> </a> </td> <td class="text" width="100" onClick="return showBox( 'box_delete' );" > <center> No </center> </td> </table> </center> </div> I figure it's probably related to the double-click thing. I have no idea why it happens. EDIT: I had written getElementbyId instead of getElementById, sorry. Now the button works, but while the box appears, the shade does not. I am looking to have a panoramic image used as the background webpage scroll automatically while the page is open. I do not want the user to have to scroll the image or hover over a div. Is there a way to accomplish this in JS?
Hi, I have the following javascript codes. I have two textboxes with id "pano" and "pano2" My function creates numbers randomly and that if random number==1 let the background of textbox2 be pink and if random number==2 textbox1 be red. The code works fine for document.bgColor but it does not work for textboxes how can I modify the code so that I can change the background color of any textboxes ? thanks.. <script> aaa=setInterval("letsgo()",500); function letsgo() { rno=Math.floor(Math.random()*3)+1; document.getElementById("counter").value=rno; if(rno==3) { document.bgColor="green"; } if(rno==2) { var pano=document.getElementById("pano"); document.pano.bgColor="red"; } if(rno==1) { var pano2=document.getElementById("pano2"); document.pano2.bgColor="pink"; } } </script> <input type="text" id="counter" style="position:absolute;top:10px;left:50px;width:60px;height:20px;"> <input type="text" id="pano" style="position:absolute;top:100px;left:100px;width:200px;height:200px;"> <input type="text" id="pano2" style="position:absolute;top:100px;left:400px;width:200px;height:200px;"> Hi! all I have a js which change the background color onclick event. This is the code Code: function changeBackground2() {
document.body.style.backgroundColor = '#C6DB2B';
document.getElementById("logo").style.backgroundColor = '#2299EE';
document.getElementById("nav_bar").style.backgroundColor = '#C6DB2B';
document.getElementById("current-ex3").style.backgroundColor = '#2299EE';
document.getElementById("foot").style.backgroundColor = '#2299EE';
document.getElementById("ahead").style.backgroundColor = '#C6DB2B';
}
but i want it to occur slowly like in 3 seconds. I think it can be done with animate but not know how i am not a js expert. Thanks for your help. Hey, been racking my brain for about an hour now, and cant seem to work this one out... I need to in javascript, get the HEX value (#FFFFFF) of a div's background color... Code: style.backgroundColor doesnt seem to work... But it seems to be different in every browser, and i cant seem to make it work... (it must work in IE, FF, Chrome, Safari) I have tried using a couple of examples, but nothing seems to work... Any ideas? Thanks Is there a way to make a popup appear behind the current window?
Hey guys, So I have a top navigation bar with links in it and when I hoover over a link I want the navigation bars background image to change. The links are actually Images with an <a href=""></a> tag around them. The site isn't live so I can't give you a link. Here is the code: HTML ( I want the id="Nav" background to change when I hover over the "Home" "Forums" "Downloads" "Contact" Images ) Code: <div id="Nav"> <div id="Splitters" class="clearfix"> <div id="group1"> <img id="Layer_3_copy" src="images/Layer_3_copy.png" alt="" width="2" height="65" /> </div> <div id="group2"> <img id="Layer_3_copy_3" src="images/Layer_3_copy.png" alt="" width="2" height="65" /> </div> <div id="group3"> <img id="Layer_3_copy_4" src="images/Layer_3_copy_3.png" alt="" width="2" height="67" /> </div> </div> <div id="Nav_Text" class="clearfix"> <a href="#"> <img id="Home" src="images/Home.png" alt="" width="48" height="11" /> </a> <a href="#"> <img id="Forums" src="images/Forums.png" alt="" width="71" height="11" /> </a> <a href="#"> <img id="Downloads" src="images/Downloads.png" alt="" width="109" height="11" /> </a> <a href="#"> <img id="Contact" src="images/Contact.png" alt="" width="80" height="11" /> </a> </div> </div> CSS Code: #Nav {
background: url(images/Main.png) no-repeat;
left: 0;
min-height: 70px;
position: absolute;
top: 0;
width: 100%;
}
#Splitters {
left: 421px;
position: absolute;
top: 0;
width: 334px;
}
#group1 {
display: inline;
float: left;
margin: 0 0 0 107px;
width: 2px;
}
#Layer_3_copy {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#group2 {
float: left;
margin: 0 0 0 95px;
width: 2px;
}
#Layer_3_copy_3 {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#group3 {
float: right;
margin: 0;
width: 2px;
}
#Layer_3_copy_4 {
clear: both;
float: left;
margin: 0;
width: 2px;
}
#Nav_Text {
left: 449px;
position: absolute;
top: 29px;
width: 397px;
}
Hey everyone! My goal here is to have the user type in a color and have that color display as the background of the page. I don't believe the switch statement is being executed by the first function. I think I am overthinking the process - as always! Any help pointing out my mistake(s) would be greatly appreciated. Code:
function show_color()
{
var show_prompt = prompt("Please enter a color name");
var change_body = document.getElementById("body");;
show_prompt = change_body;
change_body = change(this.id);
}
function change(id)
{
switch (id)
{
case 'red':
document.body.bgColor = "red";
break;
case 'green':
document.body.bgColor = "green";
break;
case 'yellow':
document.body.bgColor = "yellow";
break;
case 'blue':
document.body.bgColor = "blue";
break;
case 'pink':
document.body.bgColor = "pink";
break;
}
}
I found a great little starfield script made with javascript and canvas3d. however i can't for the life of me figure out how to implement a background image inside the canvas. is there some command that tells it to use some feature of canvas, that if otherwise not called, won't allow normal graphics? his whole starfield is generated with a search engine form , and appears to just use a text period to represent stars. here's a link to his script: http://seb.ly/demos/canvas3d/canvas3d2.html how do i get a background image in that? or is it impossible? i tried putting it in the body tag, but it just flashed the background image on the screen for a half a second and then went back to showing only the black background. i tried removing the background body color and replacing it with only background-image ccs, same problem. i tried div positioning it, but the div just covered up the starfield. Hi all, I was wondering if anyone knew were I can get a javascript that will adjust the background image dependant on the users screen resolution like whats used on this site http://gregorywood.co.uk/journal/chilli-babies Thanks in advance!! Kyle Hi, is it possible to have a different background image on IE to firefox, I am doing my background image as shown below: Code: <body style="background-image: url(unbranded_bg.png);"> however I want script that says if IE, show unbranded_bg2.png and if firefox show unbranded_bg.png. Many Thanks, Simon |
|||||||