|
JavaScript - Add Fullscreen Function To Random Background Code
Found this random background img code that works great:
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function changeImg(imgNumber) {
var myImages = ["images/image0.jpg", "images/image1.jpg", "images/image2.jpg", "images/image3.jpg"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
</script>
<style type="text/css">
.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:0% 0%;}
</style>
</head>
<body class="bg">
<p>Some text</p>
<!-- put a lot text lines here to see that the background stays fixed. -->
<p>Some text</p>
</body>
The only problem i have is making the background image width and height 100% so that the entire image fills in the screen and fills in on resize of window. Please Help...thanks in advance Similar TutorialsI need help adding an additional function to some existing java script code I already have. In addition to the functions already on this js, I want make it so the banner displays one of the images randomly on each new page load. I have an external js file that this page also links too. Not sure if I need to post that also. I was hoping to just add to this code. Any help is greatly appreciated <script type="text/javascript" src="js/homepage-banners/simplegallery.js"> </script> <script type="text/javascript"> var mygallery=new simpleGallery({ wrapperid: "simplegallery1", dimensions: [250, 180], imagearray: [ ["img/headers/automotive.jpg", "http://www.visionsystem.com/applications/automotive_metal.php", "", ""], ["img/headers/electrical.jpg", "http://www.visionsystem.com/applications/electronics.php", "", ""], ["img/headers/food-packaging.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""], ["img/headers/medical-pharmaceutical.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""], ["img/headers/semiconductor.jpg", "http://www.visionsystem.com/applications/electronics.php", "", ""], ["img/headers/automation.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""] ], autoplay: [false, 2500, 2], persist: false, fadeduration: 500, oninit:function(){ }, onslide:function(curslide, i){ } }) </script> 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?
I have 3 background images, and 1 is picked at random to be the background image of the body when loading the page.My code is below. Right now it's just white, can't get any pictures to load. I have checked the URLs and they are correct. Can someone help out? Here is my code in the header: Code: <script type="text/javascript">
function getBackground(){
var bgimg = new Array();
bgimg[0] = "background1";
bgimg[1] = "background2";
bgimg[2] = "background3";
var random = Math.floor(Math.random() * bgimg.length);
var imgurl = bgimg[random];
document.body.style.backgroundImage = 'url(' + imgurl + ')';
}
</script>
body: Code: <body onload="getBackground()"> can you explain someone step by this code?i didn't get it. <script language="Javascript"> <!-- function backcolor(form){ temp = "" for (var i = 0; i < 16; i++) { temp = form.color[i].value if (form.color[i].checked){ document.bgColor = temp } } } function randombackground(){ document.bgColor = getColor() } function getColor(){ currentdate = new Date() backgroundcolor = currentdate.getSeconds() if (backgroundcolor > 44) backgroundcolor = backgroundcolor - 45 else if (backgroundcolor > 29) backgroundcolor = backgroundcolor - 30 else if (backgroundcolor > 15) backgroundcolor = backgroundcolor - 16 if (backgroundcolor == 0 ) return "olive"; else if (backgroundcolor == 1 ) return "teal"; else if (backgroundcolor == 2 ) return "red"; else if (backgroundcolor == 3 ) return "blue"; else if (backgroundcolor == 4 ) return "maroon"; else if (backgroundcolor == 5 ) return "navy"; else if (backgroundcolor == 6 ) return "lime"; else if (backgroundcolor == 7 ) return "fuschia"; else if (backgroundcolor == 8 ) return "green"; else if (backgroundcolor == 9 ) return "purple"; else if (backgroundcolor == 10 ) return "gray"; else if (backgroundcolor == 11 ) return "yellow"; else if (backgroundcolor == 12 ) return "aqua"; else if (backgroundcolor == 13 ) return "black"; else if (backgroundcolor == 14 ) return "white"; else if (backgroundcolor == 15 ) return "silver"; } // --> </script> I placed this code in an external js file. Nothing happens. What do I need to change? Code: var randomPic = new Array();
randomPic[0] = "images/home/binoculars.jpg";
randomPic[1] = "images/home/conductor.jpg";
randomPic[2] = "images/home/dandelion.jpg";
randomPic[3] = "images/home/dog.jpg";
var whichPic = Math.floor((Math.random() * randomPic.length));
document.getElementById('tag').style.backgroundImage = randomPic[whichPic];
Hi CodingForum! For my website, I have a working script that changes the background image of my website every time it is reloaded. However, I would also like the image to dynamically resize as the user resizes the browser window. here is a code snippet: Code: <head>
<script type="text/JavaScript">
/*<![CDATA[*/var el="bgImg";var bgimg=new Array("../00home/06home.jpg","../00home/07home.jpg");var random=Math.round((bgimg.length-1)*Math.random());var cssStr="#"+el+" { background: url("+bgimg[random]+") no-repeat center } ";var style=document.createElement("style");style.setAttribute("type","text/css");if(style.styleSheet){style.styleSheet.cssText=cssStr;}else{var cssText=document.createTextNode(cssStr);style.appendChild(cssText);}document.getElementsByTagName("head")[0].appendChild(style);/*]]>*/
</script>
<style type="text/css">
.rotatebg {
z-index:0;
position:fixed;
top:0; left:0;
width:1378px; height:1178px;
background-repeat: no-repeat;
background-position:inherit;
overflow:hidden;
}
</style>
</head
<body>
<div class="rotatebg" id="bgImg" style="width:100%; height:100%" ></div>
</body>
Does anyone know how I can augment/alter this coded setup to enable the randomly loaded background image to proportionately fill the browser window? Brand new to the forum, so first off... Hello all!! I have been working on a project which randomly changes the text font of a word submitted (Color and Size). At present the code works fine, using the below Javascript. Code: <SCRIPT LANGUAGE="JavaScript">
function randomise(){
var words=document.myform.wordlist.value;
var spacer="";
words=words.split(document.myform.randomiseby.value)
document.myform.code.value=" ";
var colourscheme=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F")
for(var time=0;time<=(words.length-1);time++){
{var c1=Math.round(Math.random()*(colourscheme.length-1));
var c2=Math.round(Math.random()*(colourscheme.length-1));
var c3=Math.round(Math.random()*(colourscheme.length-1));
var c4=Math.round(Math.random()*(colourscheme.length-1));
var c5=Math.round(Math.random()*(colourscheme.length-1));
var c6=Math.round(Math.random()*(colourscheme.length-1));
var size=1+Math.round(Math.random()*6);
document.myform.code.value+="<font color=\"#"+colourscheme[c1]+colourscheme[c2]+colourscheme[c3]+colourscheme[c4]+colourscheme[c5]+colourscheme[c6]+"\" size=\""+size+"\">"+words[time]+"</font>"+spacer+" ";
}
}
looks_like.innerHTML=document.myform.code.value;
}
</script>
To really highlight the text i would like to keep the font white and change the background colour but i don't have a clue how to do it... Please note: i am a complete noob to Javascript and the above code has been bodged together from a number of tutorials. Can anyone help? ***I need to randomise the order of some questions that are in this format. Any ideas? Thank you!*** <CODE> <!---Question4---> <form name="form4" method="post" action=""> <h3><p>First One</p></h3> <p> <label><input type="radio" name="q4" id="w1" value="1" </label> <label><input type="radio" name="q4" id="w2" value="2" </label> <label><input type="radio" name="q4" id="w3" value="2" </label> </p> </form </CODE> Hey all, I have a sentence generator running on a site. I am using sort to shuffle the array and pop to return the item. All is well, except Safari does not shuffle the array. Here is the technique I am using: Code: <script type = "text/javascript">
var adj=["invisible", "running", "eating", "mad", "talking", "jumping", "living", "weird", "super"];
for (i = 1; i <= 4; i++){
adj.sort(function(){return Math.round(Math.random());});
document.write( [
"Bob is" + " " + adj.pop() + "." + "<br>"
]);
}
</script>
In most browsers it generates 4 unique sentences. But in Safari it does not shuffle the array so it will always output: Bob is super. Bob is weird. Bob is living. Bob is jumping. Any ideas as to what is happening? I've a list of questions and i want them to appear in random order but I'm unable to do so at the moment. Is there a way of randomizing them by ID name or similar seem as each Question has Three answers via radio buttons and I've them grouped together by ID name?
Another homework assignment that I can't quite seem to get to work... I've been asked to do the following using javascript: -Create a function named randInt() with one parameter of "size". Declare a variable named "rNum" equal to a random integer between 1 and the value of the size variable. Return the value of the "rNum" varialbe from the function. -Create a function named getQuote() with one parameter anemd "qNum". The function should create an array named mtQuotes with five quotes; there should be no quote for the array index "0". Return the value of the mtQuotes array for the qNum index. - In the div element of "quotes" insert a script with the following commands: Declare a variable named "randValue" which is euqal to a random integer between 1 and 5 (use the randInt() function). Declare a variable named "quoteText" containing the quote whose array index value is equal to randValue. Write the value of quoteText to the web page. Here is what I have...it returns undefined. thanks. Code:
<html>
<head>
<script type="text/javascript">
function randInt(size) {
var rNum=Math.ceil(Math.random()*5);
return(rNum);
}
</script>
<script type="text/javascript">
function getQuote(qNum);
var mtQuotes = new Array();
mtQuotes[0] = "";
mtQuotes[1] = "I smoke in moderation, only one cigar at a time.";
mtQuotes[2] = "Be careful of reading health books, you might die of a misprint.";
mtQuotes[3] = "Man is the only animal that blushes or needs to.";
mtQuotes[4] = "Clothes make the man. Naked people have little or no influence on society.";
mtQuotes[5] = "One of the most striking differences between a cat and a lie is that a cat has only nine lives.";
return mtQuotes[qNum];
</script>
</head>
<body>
<div id="quotes">
<script type="text/javascript">
var randValue=randInt(5);
var quoteText=getQuote(randValue);
document.write(quoteText);
</script>
</div>
Hi there! I'm trying to retrieve the integer value in the string: #10 So I'm using the JS Split function Code: <script type="text/javascript">
var str="#10";
document.write(str.split("#"));
</script>
Is the code I'm using, but I keep getting a comma before my result.. in this case, my result is ",10" What should I do? Thanks! Kind Regards Matthew P.S. I know that it's an array, but is there still anyway for me to get rid of the comma? I need help with a code that will generate a random number or integer (from 1-9). Does anybody know of a short random generator without having to import anything? thank you.
This little snippet of code produces random quotes but sometimes gives a missing quote between two quote marks. Code: <HTML>
<HEAD>
<TITLE>Javascript - RANDOM QUOTES</TITLE>
<script type="text/javascript">
function quote() {
//Random Quotes
} ; q = new quote() ; n = 0
// Quote database------------------------------------
q[n++]= "<FONT FACE =\"Trebuchet MS\" SIZE=\"2\" COLOR='#0006C7'>'QUOTE 1' (PERSON 1)</FONT>";
q[n++]= "<FONT FACE =\"Trebuchet MS\" SIZE=\"2\" COLOR='#0006C7'>'QUOTE 2' (PERSON 2)</FONT>";
</script>
</HEAD>
<BODY>
<HR>
<script type="text/javascript">
i=Math.floor(Math.random() * n) ;
document.write( q[i] );
</SCRIPT>
<HR>
</BODY>
</HTML>
Can someone explain why? I use around 50 quotes in the real thing. I have a tutorial I have to complete for my web class out of the "New Perspectives HTML, XHTML, and Dynamic HTML 4th edition book" (the tutorial I'm doing is number 10) and I can't figure out how to get the numbers to show up. Here is the code that is given to start out with. Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on HTML and XHTML 5th Edition
Tutorial 10
Review Assignment
Monroe Public Library
Author:
Date:
Filename: mpl2.htm
Supporting files: mpl2.jpg, mplstyles.css, random.js, 0.jpg - 9.jpg
-->
<title>Monroe Public Library</title>
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageContent">
<div id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</div>
<div id="links">
<span>Quick Links</span>
<a href="#">Home Page</a>
<a href="#">Online Catalog</a>
<a href="#">Friends of MPL</a>
<a href="#">New Books and Other Good Reading</a>
<a href="#">Ohio Virtual Library</a>
<a href="#">Internet Public Library</a>
<a href="#">Services and Collection</a>
<a href="#">Adult Programs</a>
<a href="#">Teen Central</a>
<a href="#">Children's Room</a>
<a href="#">Computers at MPL</a>
<a href="#">Computer Rules and Procedures</a>
<a href="#">Staff Directory</a>
<a href="#">Library Records</a>
</div>
<div id="main">
<h2>Library Records</h2>
<p>To view the library records, enter your username and password.</p>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Username</th>
<td><input size="20" /></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" size="20" /></td>
</tr>
<tr>
<td>As a final security check, enter the 5 numbers
you see displayed below.</td>
<td><input size="6" /></td>
</tr>
<tr>
<td colspan="2" class="center">
<input type="button" value="View Library Records" />
</td>
</tr>
<tr>
<td colspan="2" class="center">
</td>
</tr>
</table>
</div>
<address>
<b>Monroe Public Library</b>
580 Main Street, Monroe, OH 45050
<b>Phone</b>(513) 555-0211
<b>Fax</b>(513) 555-0241
</address>
</div>
</body>
</html>
Then these are the directions given in the book. 1. In the head section, just above the closing </head> tag, insert a script element that accesses the code in the random.js file. 2. add a second script element for the cod e that you'll add to the mpl2.htm file 3. Within the second script element, create a function named showImg(). The purpose of this function is to write an inline image tag into the current document. The function has no parameters. Add the following statements to the function: a. Add the following multiline comment to the start of the function, just below the opening showImg() function statement. The showImg() function displays a random image from the 0.jpg through 9.jpg files. The random image is designed to thwart hackers attempting to enter the library records database by requiring visual confirmation. b. Declare a variable named imgNumber equal to the value returned by the randomInteger() function. Use 9 as a value of the size parameter in the randomInteger() function. c. append the statement that creates the imgNumber variable with the following single-line comment: Return a random number from 0 to 9 d. inster a command that writes the text <img src='imgNumber.jpg' alt='' /> to the document, where imgNumber is the value of the imgNumber variable. 4. scroll down to the bottom of the file and locate the last table cell in the document. Within this empty table cell, insert a script element. 5. within the script element, call the showImg() function five times. YOu do not need to specify a parameter value. ___________________________ It's a lot of info but I just can't figure out how to get the images to show up, any help will be appreciated, I think I gave all the info needed. Hi, well making a page fullscreen is one of my favorite topics but whenever I have thought of doing it, I have always received one answer and that is, it is only done with flash. For the first time today I saw one that is not done with flash, can someone tell me how exactly it is done, so I could atlast full my dream of using it ^^ here is the image http://content.screencast.com/users/...04-13_0001.png and here is the link to the page where this fullscreen button exists. http://tutorialzine.com/2010/09/html...deshow-jquery/ I need what this... Code: $('#gatewayDimmer').width($('html').width());
$('#gatewayDimmer').height($('html').height());
$('#gatewayDimmer').css('display','block');
...is controlling to occupy the full screen/scrollable window. In FireFox, it does except for maybe...11px thats initially under the vertical scrollbar(when you use the horizontal scrollbar and scroll right, you can see the area under the vertical scrollbar was never occupied). In IE(7 at least), it occupies everything in the initial window, even the area underneath the vertical & horizontal scrollbars, but after scrolling down past the area the horizontal scrollbar would've covered, it doesn't occupy anything(it stops). I need every inch, pixel, etc. covered, from head to toe. To lock it, if you will. Is there something I can add, change here? Thanks in advance Hi, I've investigated contacting the author, but it doesn't look like I'll get a swift response. The script I'm using is hosted here The script is designed to create a fullscreen, scaling background that can be used as a carousel gallery for images, with a caption that floats next to the mouse pointer that either reads 'next' or 'previous'. It works fine but I am attempting to alter the script to do a few things: 1.Make the image take up a proportionate amount of window space - 85% (done) 2.Get rid of the text which appears on rollover(done) 3.Assign an image flip for the proportionally scaled image (this is the one I'm having problems with) I'm trying not to include too much information but it's hard to know where the problem is. I'm fairly sure this is used to set the scaler up on the page: Code: (function(){
var bg=document.getElementById('bg'),float=document.createElement('span'),scale=Scaler(bg); //Create and bind scaler-function
addEvent=function(el,on,fn){el.attachEvent?el.attachEvent('on'+on,fn):el.addEventListener(on,fn,false)}, //Function for cross-borwser addEvent
move=function(e){
float.style.left=(e=e||window.event).clientX+20+'px';
float.style.top=e.clientY+20+'px';
if(float.nxt!=(e.clientX>(document.body.offsetWidth/2)))float.innerHTML=(float.nxt=!float.nxt)?'':''; //Change html only if needed
},
swap=function(e){
var key=(e=e||window.event).type=='MouseOver'?(e.clientX>(document.body.clientWidth/2)?40:37):e.keyCode;
if(key>36&&key<41){
var data=scale(key>38?'+1':'-1'),l=data.els.length;
for(var i=0;i<l;i++)data.els[i].style.height=i==data.to?'85%':'0px';
}
}
I've then used a simple imageflip function and implemented it here Code: addEvent(bg,'mouseout',function('BNB_mouseon()'){float.style.display='none'}); //Hide floater when not over image
addEvent(bg,'mouseover',function('BNB_mouseon()'){float.style.display='block'});
Where 'bg' stands for the background image div. I've been scratching my head about this for quite a while now, so any advice is appreciated! I'm attempting to impliment it on the website http://www.freddydewemathews.com/, for a little context Hey fellow coders. I've been searching for a script, but I'm coming up empty. The script will display products in a single row full screen left to right. To slide the products there is a pull bar. You can see how the exact script works on http://www.logitech.com/en-us/keyboards/keyboards. Does anybody know of a complete script, or at least one that is close enough to alter. Thanks much.
|
|||||||