|
JavaScript - Using A Div To Shade The Background
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. Similar TutorialsHi, 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. 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. 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?
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 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 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;"> 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?
Is there a way to make a popup appear behind the current window?
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> 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 all, I am doing an image/data rotating script. I get the data from a XML. I parse that data and build the divs and such. Data Set 1 --- background image in a div, with a button and some text overlayed on the div. ... ... Data Set 4 -- etc.. The thing is, I load the script and the div appears, BUT the text overlay appears first THEN the image pops up for the first Data Set. I can't have that. I need them both to appear at once. Is there a way to determine that a div background image is loaded? -- I have access to the prototype js library. thanks. Hi, I need to change the background and the header of a website on which i display ads (by an adserver) It works with this code : <script type="text/javascript"> parent.document.getElementsByTagName("body")[0].style.backgroundImage="url(http://example.jpg)"; parent.document.getElementsByTagName("body")[0].style.backgroundPosition="center 0"; parent.document.getElementsByTagName("body")[0].style.backgroundRepeat="no-repeat"; parent.document.getElementsByTagName("body")[0].style.backgroundColor = "#85bc21"; parent.document.getElementById("header").style.backgroundImage="url(http://example.jpg)"; </script> But i need those elements become clickable. Have you any solutions ? Thanks a lot. Sorry for my %"*!?& english Benoo Alright I give up! I'm not the type that easily asks for help but I just spent an ungodly amount of time trying to figure this out. This script fades a web pages background when you mouseover a graphic. The problem I'm having is it goes from white to black and I need it to go from black to white. I was able to reverse it like I wanted but the page still initially starts off white instead of black. Setting the pages background to black doesn't fix the problem either. I imagine its easy enough to do but JavaScript is not my forte. Any help would be very much appreciated. Code: <HTML>
<HEAD>
<script language="JavaScript">
<!--
hexa = new Array(16);
for(var i = 0; i < 10; i++)
hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
function hex(i)
{
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}
function setbgColor(r, g, b)
{
document.bgColor = "#"+hex(r)+hex(g)+hex(b);
}
// 1 -- white --> black
// -1 -- black --> white
var inc = 1;
var cur_i = 20;
var max_step = 20;
var in_progress = false;
function msover()
{
inc = -1;
if( !in_progress )
step();
}
function msout()
{
inc = 1;
if( !in_progress )
step();
}
function step()
{
// alert(document.bgColor);
setbgColor( Math.floor(255 * cur_i / max_step),
Math.floor(255 * cur_i / max_step),
Math.floor(255 * cur_i /max_step) );
// alert("2:" + document.bgColor);
cur_i += inc;
if( (inc > 0 && cur_i > max_step) || (inc < 0 && cur_i < 0) )
{
cur_i -= inc;
inc = -inc;
in_progress = false;
}
else
{
in_progress = true;
setTimeout("step()", 3);
}
}
// -->
</script>
</HEAD>
<BODY TEXT="#888888" LINK="#1b1b1b" VLINK="#1b1b1b" ALINK="#1b1b1b" bgcolor="white">
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<CENTER><a href="example.com" onMouseOver="msover()"
onMouseOut="msout()"><IMG SRC="example.gif" border=0></A></CENTER>
</HTML>
I've prepared the following page: http://www.ko-go.gr/restaurant/index1a.html but I would prefer the background images to fade in and out rather than change abruptly. I've spent hours searching for appropriate code, but have met a dead end so far. Incidentally, I presume that the delay before the first background image appears is because of all the images pre-loading. Can anyone suggest a way to immediately display the first image? Thanks for taking the time to read this... How am I able to have a gallery of images fading in and out as the background of a DIV? It's currently just a static background using CSS. You can view the HTML page in question he http://aksdesigns.co.uk/temp/template.html The DIV container is the one with the ID of #MainContent Code: #MainContent {
width: 980px;
height: 550px;
margin: 0 auto;
padding: 0px;
background-image: url(images/Content-bg-1.jpg);
background-repeat: no-repeat;
background-position: top center;
border-left: 2px solid #153365;
border-right: 1px solid #FFF;
}
It probably couldn't be done using CSS be how could I achieve this with Javascript? I am trying to recreate this functionality on my website where you can drag a background image around and when you get ot the edges of the image it bounces back to the edge of that corrosponding side. have a look at the site in question - http://irrland.sonntagskunst.de/# so far i have recreated the top left and right edges using Code: var window_width = $(window).width();
var window_height = $(document).height();
var image_height = $("#background").height(); (2914px)
var image_width = $("#background").width(); (3920px)
$("#background").draggable({
scroll: false,
stop: function (event, ui) {
var animate_to = {};
var window_width_resized = $(window).width();
if (ui.position.left > 0) {
animate_to.left = '0px';
}
if (ui.position.top > 0) {
animate_to.top = '0px';
}
//initial size for width
var image_width_gap = window_width - (image_width + ui.position.left);
if (image_width_gap > 0) {
animate_to.left = (0 - (image_width - window_width)) + 'px';
}
//after window gets resized for width
var image_width_gap_resized = window_width_resized - (image_width + ui.position.left);
if (image_width_gap_resized > 0) {
animate_to.left = (0 - (image_width - window_width_resized)) + 'px';
}
$("#background").animate(animate_to, { duration: 1000, easing: "easeOutElastic" });
then i am using the same logic to do the bottom edge but it doesnt work any ideas here is how i thought the bottom would work Code: //initial size for height
var image_height_gap = window_height - (image_height + ui.position.top);
if (image_height_gap > 0) {
// animate_to.top = (0 - (image_height - window_height)) + 'px';
}
help would be greatly appreciated fixed.. my bg image was infact smaller Looking for a way to have background music play automatically when my site loads, with the music being randomly picked from a list of several songs.. So each time the page loads, a different song should play.. Can be JavaScript or Flash, whichever way works the best.. Any ideas?
Hello, I've just finished my website. But my random background images load properly sometimes, and sometimes they load as a half. Here is my website: http://www.finnhaverkamp.com/ Here is the relevant HTML: Code: <!--open random background script-->
<script type="text/javascript">
var randnum = Math.random();
var inum = 7;
var rand1 = Math.round(randnum * (inum-1)) + 1;
var images = new Array;
images[1] = "background1.jpg";
images[2] = "background2.jpg";
images[3] = "background3.jpg";
images[4] = "background4.jpg";
images[5] = "background5.jpg";
images[6] = "background6.jpg";
images[7] = "background7.jpg";
var image = images[rand1];
function chBackgr()
{
document.body.style.backgroundImage = 'url(' + image + ')';
}
onload = chBackgr;
<!--close random background script-->
It's weird. Because my background image is certainly random. It's just that sometimes only half of the image loads. Really strange. Any help is appreciated. Thank You. I want to use an image as a CSS background-image so I used the Image constructor to load the image: Code: (new Image()).src="http://www.mediafire.com/imgbnc.php/432b35f2cc3340ea03d25128ada294476c92189353679dfb7e9cc9dfde6498f06g.jpg"; but I noticed that the browser (Firefox) load the image from the URL and not from the memory when changing the background-image property (it takes about 1.5 seconds before showing the image, and every time I reload the page!) |
|||||||