|
JavaScript - Cycling Images With A Random Start
I basically want a random image to show up on my webpage and start scrolling through more images i've set to that list.
Here's what I have thus far. However, It'll always start by bringing up the same image and then change to an error image: Code: <html>
<head>
<script type="text/javascript" language="javascript">
<!-- Hide script from old browsers
adImages = new Array("http://i155.photobucket.com/albums/s298/Connorconway/Office_Season_6_Blu-Ray.jpg","http://i155.photobucket.com/albums/s298/Connorconway/Halloween_Blu_Ray.jpg")
imgCt = adImages.length
firstTime = true
function rotate() {
if (document.images) {
if (firstTime) {
thisAd = Math.floor((Math.random * imgCt))
firstTime = false
}
else {
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}
}
document.myPicture.src=adImages [thisAd]
setTimeout("rotate()", 3 * 1000)
}
}
//--> End hiding script from old browsers </script>
</head>
<body onload="rotate()">
<img src="http://i155.photobucket.com/albums/s298/Connorconway/Office_Season_6_Blu-Ray.jpg" width="400" height="300" name="myPicture" alt="Ad Banner" />
</body>
</html>
Here's the Website I'm having problems on (So you can visually see what I mean - Under "TV ManiaX Home Page sub-heading): http://tvmaniax.myfastforum.org/index.html Thank you for any help you can give _________________ Similar Tutorialshi, I am now building my website as a final project for my year. I am doing graphic design, so the website is actually some kind of portfolio. The idea of this website (which is not yet online) is this : it is some kind of big pasteboard on which i will display all the work i have done in my academy since a couple of years. The pasteboard is at the moment a background image/color field of given dimension (i figure that was the only way to do what i wanted...see further) Every works/image load on a random place and then can be dragged, and dropped (this part i already figured out). At the moment, every image (for every project), is inside a <div>. What i need help for is this: at the moment, my function successfully load 1 element at random position. I now want this function to work separately, for every <div>, so that every image is randomly placed on load, on the background image (and not the browser window, which is smaller). Here is the code i have for the moment (sorry for the mess, i really am just beginning! and truely, i don't get half of this, i just know it is working at the moment): Code: <head>
<!--// function random start position-->
<script>
var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById; if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1; else { var nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;}}
function xDOM(objectId, wS) { if (stdDOM) return wS ? document.getElementById(objectId).style: document.getElementById(objectId); if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId]; if (nsDOM) return document.layers[objectId]; }
// More Object Functions
function setObjVis(objectID,vis) {var objs = xDOM(objectID,1); objs.visibility = vis;}
function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x; objs.top = y;}
// Browser Window Size and Position
function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;}
function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;}
function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;}
function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;}
// Random Position Script
var xxx = Math.floor(Math.random()* (pageWidth()-230));
var yyy = Math.floor(Math.random()* (pageHeight()-50));
function start()
{var x = (posLeft()+xxx) + 'px';
var y = (posTop()+yyy) + 'px';
moveObjTo('myobj',x,y);
setObjVis('myobj','visible');}
window.onload = start;
window.onscroll = start;// JavaScript Document
</script>
</head>
<body bgcolor="#9A9B95" background="../website/background.jpg">
<div id="myobj" style="position:absolute" >
<img src="oblique strategies holes.jpg" width="595" height="842" style="position:absolute" class="dragme"/>
</div>
<div id="div2">
<img src="oblique strategies choices.jpg" width="842" height="595" style="position:absolute" class="dragme" />
</div>
</body>
now, what i really want is this function to work for every <div> but i know there are also some flaws (that i'm unfortunately unable to fix myself): the integers "230 and 50" in the "random position script" should be replaced byt the width and heigh of the image/div (so i guess i should find a function that can get those numbers, name them "ImgWeidth" and "ImgHeigh" so that those integer can be called in this "random position" function. also, once the div 'myobj' is loaded, randomly, it behaves like if position=fixed (so stays on the spot when i scroll down the window). I think this is because it calculates the position according to the browser window and not my background. this has be fixed, because i don't want all my images to load only in the browser window (but on the whole pasteboard/background image). well, i guess this is already 3 questions in one. so i will let it like that for the moment. Sorry if i'm saying too much/not enough... beginners mistake!:confused: thanks in advance for any help you will give me! Hi I'm new to this and would like some help. I want to display 4 random images and I would like to get them to NOT repeat themselves. Any suggestions? So if image one is randomly selected as "aceclubs.png" I don't want image two to be the same and so on for the other images. This currently the code I'm using right now. I've been duplicating this function with different names for each of the 4 images. However it sometimes produces two of the same image and I don't want that. Code: function random_ace()
{
var cardace = new Array(4)
cardace[0] = "aceclubs.png";
cardace[1] = "acediamonds.png";
cardace[2] = "acehearts.png";
cardace[3] = "acespades.png";
var randomace = Math.floor(Math.random()*cardace.length);
var ace = cardace[randomace];
card1.src=ace
}
Random non-repeating images script. Hope this helps someone... you can see an example at http://www.empireelite.org/. Refresh and you'll see the PS3 boxarts on the top left will show randomly, with no repeats. In your html page in head tag Code: <style>
img.boxart{
margin:0;
border: none;
display:block;
float:left}</style>
<script type="text/javascript" src="ps3boxart.js"></script>
in body tag (place whereever in the body you want the pictures to show) Code: <script type="text/javascript"> randomorder(ps3ba, '') </script> In a seperate .js file in the same folder (this one I have as ps3boxart.js) Code: var ps3ba=new Array()
ps3ba[0]='<a href="http://www.amazon.com/God-War-III-Playstation-3/dp/B000ZK9QCS/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261056951&sr=8-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/gow3.jpg" class="boxart" title="God of War III"></a>'
ps3ba[1]='<a href="http://www.amazon.com/Heavy-Rain-Playstation-3/dp/B002CZ38KA/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059415&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/hr.jpg" class="boxart" title="Heavy Rain"></a>'
ps3ba[2]='<a href="http://www.amazon.com/Killzone-2-Playstation-3/dp/B000FQBF1M/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059510&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/kz2.jpg" class="boxart" title="Killzone 2"></a>'
ps3ba[3]='<a href="http://www.amazon.com/LittleBigPlanet-Game-Year-Playstation-3/dp/B002ELCUUG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059556&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/lbp.jpg" class="boxart" title="LittleBigPlanet"></a>'
ps3ba[4]='<a href="http://www.amazon.com/Metal-Gear-Solid-Patriots-Playstation-3/dp/B000FQ2D5E/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059605&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/mgs4.jpg" class="boxart" title="Metal Gear Solid 4"></a>'
ps3ba[5]='<a href="http://www.amazon.com/Ratchet-Clank-Future-Crack-Playstation-3/dp/B00275A7LI/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059662&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rcfacit.jpg" class="boxart" title="Ratchet & Clank Futu A Crack In Time"></a>'
ps3ba[6]='<a href="http://www.amazon.com/Resistance-Fall-Man-playstation-3/dp/B000JLIXIG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059703&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rfom.jpg" class="boxart" title="Resistance: Fall of Man"></a>'
ps3ba[7]='<a href="http://www.amazon.com/Uncharted-Drakes-Fortune-Playstation-3/dp/B000UW21A0/ref=sr_1_2?ie=UTF8&s=videogames&qid=1261059750&sr=1-2"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc.jpg" class="boxart" title="Uncharted: Drakes Fortune"></a>'
ps3ba[8]='<a href="http://www.amazon.com/Uncharted-2-Among-Thieves-Playstation-3/dp/B001JKTC9A/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059750&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc2.jpg" class="boxart" title="Uncharted 2: Among Thieves"></a>'
function randomorder(targetarray) {
var randomorder=new Array()
var the_one
var z=0
for (i=0;i<targetarray.length;i++)
randomorder[i]=i
while (z<targetarray.length) {
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
document.write(targetarray[the_one])
targetarray[the_one]="_selected!"
z++
}
}
}
Then obviously, you would use this as a baseline and change your .js file name to whatever your pictures are for, like ads.js or whichever. Change the links in ahref to whereever you want each page to link. Change the image locations in img src to whereever your images are saved. Remember, where it says var z=0... this is where you hide extra random images. For example, my 200px cell only fits 9 22px wide images (they equal 198px). I only have 9 in my ps3 boxart image folder. If I want 50 in there... I would upload the pics to the folder with the other ones, add them to the list in the .js file. Such as ps3ba[9]=, ps3ba[10]=, etc. up to [49] (49 + 1 for [0] = 50). Then since I can only fit 9 in my cell, I would have to change the variable to var z=41 (to hide 41 of them and only show 9). Hope this helps somebody. Good luck. Hi, I've got a game 99% finished, basically when the game start and the player clicks through to the game panel, there are 30 tiles (80x80px) each, and the object of the game is for the player to press the tile with the letter "X" on, the X can be on any 1 of 5 different coloured tiles at anyone time and of course there can be more than 1 tile having an X on it. The tiles currently are built via .css, and this works 100% perfectly. However now I want to use images, pulled in from my local website instead of tiles built via .css. A demo of what I'm kinda of after is here > Edit fiddle - JSFiddle - if you press "run" the images will keep changing their order. The code I currently have for the game is here.. //CODE// var TheColorArray = ['red', 'yellow', 'green', 'blue', 'orange'], TheScore = 0, TimerLength = 2500, GameTimer, ScoreMap = { 'red': 500, 'yellow': 50, 'green': 30, 'blue': 20, 'orange': 5 }; function DrawRow() { TheColorArray.sort(function () { return .5 - Math.random(); }); var TheHTML = '<div class="row">'; var MagicColumn = Math.floor(Math.random() * 6); for (var i = 0; i < 5; i++) { if (i === MagicColumn) { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>'; } else { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>'; } } TheHTML = TheHTML + '</div>'; return TheHTML; } You'll also see that "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';" and "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';" both state that if X is pressed the game basically carries on. I need this to use a chosen image from my server, i.e. URL/apple.png .... i have also managed to get to this point (with apples) but its just not working.. Edit fiddle - JSFiddle Any help would be great.. Many thanks in advance!!! I am stuck on some javascript homework I realize it is probably really easy but my stupid textbook is not clear on one point. I have to access code in an external javascript page (random.js) which I have done. But then i have to create a second script element to create the function showlmg() and within that I require statements to declare a variable named imgNumber equal to the value returned by the randomInteger() (which is from the external sheet found in data files from the textbook therefore I know they are right). I am supposed to use 9 as the value of the size parameter in the randomInteger() function. The second statement should be command that writes the following text to the document: <img src='imgNumber.jog' alt= ' '/>. So basically the coding I have done is : Code: <script type= "text/javascript" src= random.js"> </script>
<script type="text/javascript">
function showlmg() {
var imgNumber= randomInteger(9);// Return a random number from 0 to 9.
document.write("<img src='imgNumber.jpg' alt=''/>");
}
</script>
all in the head of the document and then Code: function randomInteger(size) {
return Math.floor((size+1)*Math.random());} from the external file.
and Code: <tr> <td colspan="2" class="center"> <script type= "text/javascript"> showlmg(); showlmg(); showlmg(); showlmg(); showlmg(); </script> </td> </tr> to post in a table on the page... I believe the issue is in the declaring a variable the is equal to the result of the function random integer which the text book or anywhere that I can find online fails to explain how to do. Thank you. I'm trying to show random images with a timer of 3 seconds. I'm still learning this (starting to :s) Any help will be highly appreciated. The code: Code: <script type="text/javascript">
var imagenRandom;
var imagenSrc;
var i;
function imagenAzar(){
imagenRandom = Math.floor(Math.random()*222);
imagenRandom++;
imagenSrc = "imagenes/fd/"+imagenRandom+".jpg";
document.getElementById('imagenSlideShow').src=imagenSrc;
}
function imagenAzarLoop(){
i=0;
while (i<=221) {
setTimeout("imagenAzar()", 3000);
i++;
}
}
</script>
</head>
<body onload="imagenAzarLoop()">
<img src="imagenes/fd/1.jpg" id="imagenSlideShow" width="300" height="225" alt="Imagen" title="Imagen" />
Hi guys! I need your help so much. I have this beautiful script for pocket pc that randomly rotates pictures in the background with fade in/out effect. Now, what I want it to do is to split all the pictures I have in groups so that on every refresh the script randomly chose a GROUP of pictures and THEN rotated only the pictures from this group. I want to do this because if you include say 30 pictures into the script this really hangs the RAM memory, and if there are only 5 pictures to choose from its much more faster. Here's the script from html page: Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: white;
margin: 0;
padding: 0;
}
img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
position: absolute;
width: 320px;
height: auto;
}
img.fade-out {
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head>
<body style="color: black">
<img src="01.jpg"/>
<img src="02.jpg"/>
<img src="03.jpg"/>
<img src="04.jpg"/>
<img src="05.jpg"/>
<img src="06.jpg"/>
<img src="07.jpg"/>
<img src="08.jpg"/>
<img src="09.jpg"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
<img src="12.jpg"/>
<img src="13.jpg"/>
<img src="14.jpg"/>
<img src="15.jpg"/>
<script>
var interval = 4 * 1; // Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 1000);
};
fade();
</script>
</body>
So here you can see there are 15 pictures, what should I include in this script to split them into say 3 groups of 5 pictures and make the script randomly select a group each time? Thanks for help! hi i would like to create gallery of 6 images that will show random images on page reload without repeating them. am not good in js so any help would be great. i found some code on web, just changed path for images and added lightbox code. it looks like this, but it shows same image few times. Code: <script language="JavaScript">
<!--
/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com)
Over 400+ free JavaScripts here!
Keep this notice intact please
*/
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="images/gallery/1.jpg"
myimages[2]="images/gallery/2.jpg"
myimages[3]="images/gallery/3.jpg"
myimages[4]="images/gallery/4.jpg"
myimages[5]="images/gallery/5.jpg"
myimages[6]="images/gallery/6.jpg"
for (i = 0; i < 6; i++) {
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href="'+myimages[ry]+'" rel="lightbox"><img src="'+myimages[ry]+'">')
}
//-->
</script>
thanks I want a certain amount of image spots to show a certain set of images (specifically 8) in a random order every time the page is refreshed. I do not want the images to be repeated, however. The solution I came up with was to create an array and generate a number one to eight and then compare that number to the numbers previously in the array, and if it matched one that was previously generated, to generate a new number and then compare it. This continues until i have an array of the numbers 1-8 in a random order. Code: var imgs=new Array(8);
for(i in imgs)
{
function generate()
{
return Math.floor(1+Math.random()*8);
}
var rand=generate();
function compare(i)
{
for(var n=i-1; n>=0; n--)
{
if (n<0)
{
imgs[i]=rand;
}
else
{
if (rand==n)
{
rand=generate();
compare(i);
}
}
}
}
}
This does not strike me as the most efficient way to go about this. If someone has a better solution, that would help a great deal. Hi All. I am new to all this and I am posting a problem up here that I think is quite rare or has not been looked into for a long time now. I am basically looking to create a background for my website and when you refresh the page the image changes to another picture for the background. I have asked one of my good friends to have a look at it and he gave me some code to work with and so I have changed bits here and there and it worked in firefox and safari but will not work in IE. When I asked him he had no clue what to do. So here I am now! I am hoping it is simple but I also know it wont be to an extent! Any help would be much appreciated here. I have attached the code here for you and also the html file. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<style type="text/css">
<!--
#myFlash {
position:absolute;
width:100%;
height:100%;
margin:0;
padding:0;
left:0;
right:0;
z-index:20;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Experts Connect</title>
<meta name="keywords" content="Experts connect Preston, Experts connect Lancashire, Medical reports, Preston medical and legal agency, Lancashire medical and legal agency, specialist providers of independent medical evidence, diagnostic and rehabilitation services to the personal injury market, Medico Legal, personal injury claims, refferers." />
<meta name="description" content="Experts Connect are an established legal and medical agency providing reports for persobal injury claims. We work to get the best possible examination we can to ensure your claim goes through with no fuss. We are based nationally and work all over the United Kingdom." />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="revisit-after" content="10 days" />
<link rel="stylesheet" type="text/css" href="/common/basic.css" />
<script type="text/javascript" src="crossfade.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf");
</script>
<style type="text/css">
body { width:auto; height:auto; background-color:#CCCCCC;}
#bgimage {
filter:alpha(opacity=40);
-moz-opacity:0.40;
-khtml-opacity:0.40;
opacity:0.40;
width:100%;
height:100%;
position:absolute;
margin:0;
padding:0;
left:0;
right:0;
}
</style>
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<SCRIPT/>
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'back4.jpg'
theImages[1] = 'back2.jpg'
theImages[2] = 'back5.jpg'
theImages[3] = 'back6.jpg'
theImages[4] = 'back8.jpg'
// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img id="bgimage" src="'+theImages[whichImage]+'">');
// End -->
</script>
</head>
<div id="myFlash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent" name="expertsconnect" align="middle">
<param name="movie" value="experts-connectwebsite.swf" />
<param name="quality" value="high" />
<param name="scale" value="exactfit" />
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="experts-connectwebsite.swf" width="100%" height="100%" align="middle">
<param name="quality" value="high" />
<param name="scale" value="exactfit" />
<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
showImage();
// End -->
</script>
<!-- Script Size: 1.49 KB -->
</body>
</html>
There is also a flash file embedded into this document! Any help would be great with this. Thank you, Mark Hi could someone please help?... I am a total beginner to javascript... but does anyone know of a code, including links to an image folder, for displaying 6 fullscreen images in random order without repeat for a given user? I've seen specific examples using shuffle on the site, but could anyone write a general code for any given images? Many thanks in advance Hi Guys, I'm currently working on a page working with separate categories and a whole lotta check boxes. My objective is to have one checkbox deselect the other checkboxes in its category without interfering with the rest. How would I go about doing this assuming the id tag is already in use and differs per tag? I was thinking about cycling through all checkbox tags and sorting them out via class but I'm looking for something possibly more efficient. I've got a table in which I want to have certain elements changeable if the user presses a button. The elements are stored in an array and I want to cycle through them when the button is pressed. Here's a section of what I'm working with so far: Code: <tr>
<td valign="top">
<dl>
<script type="text/javascript">
var w=0;
var s=0;
var c=0;
var slugga_replace_list = new Array("Slugga","Shoota","Shoota/Rokkit","Shoota/Skorcha","Twin-Linked Shoota");
var choppa_replace_list = new Array("Choppa","Big Choppa","Power Klaw");
var warboss_wargear = new Array();
warboss_wargear[0] = slugga_replace_list[s];
warboss_wargear[1] = choppa_replace_list[c];
warboss_wargear[2] = "Stikkbombz";
for (w=0; w<2; w++) {
document.write("<dt><input type='button' name='subtract' value='-' onclick='subtract()'>"+warboss_wargear[w]+"<input type='button' name='add' value='+' onclick='add()'/></dt>");
}
function add() {
s++
return s;
}
function subtract() {
s--
return s;
}
</script>
</dl>
</td>
</tr>
I've tried using the ++ and -- to change the value of s, but it's not changing the text. Am I in the neighborhood at least? I can get the code to open 'variouslinks()' when I click the 'Go HERE' link but I cannot get it to open them in a new window. I tried using HTML and JAVASCRIPT. Can someone please tell me what I am doing wrong???? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script> var variouslinks=new Array() variouslinks[0]="http://www.Facebook.com"; variouslinks[1]="http://www.Myspace.com"; variouslinks[2]="http://www.FriendFinder.com"; variouslinks[3]="http://www.AshleyMadison.com"; variouslinks[4]="http://www.Pets.com"; function variouslink(){ window.location=variouslinks[Math.floor(Math.various()*variouslinks.length)]; } function openNewWindow(){ var newWindow=window.open(this.getAttribute('href'), '_blank'); newWindow.focus(); return false;} </script> </head> <body> <a href="javascript:variouslink()" rel="nofollow" target="javascript:openNewWindow()">Go HERE</a> </body> </html> Can somebody please explain why when the lines of code that are commented out are reintroduced that this code breaks instead of resulting in each of the four circles being a different color? Code: <!DOCTYPE HTML>
<html>
<head><title>Circles</title></head>
<body>
<canvas id="myCanvas" width="512" height="128" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var i=0;
var axisX=128;
var axisY=64;
var radius=56;
//var colors=[red, green, blue, yellow];
//var currentColor;
function drawCircle(){
//currentColor=colors[i];
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//cxt.fillStyle=currentColor;
cxt.strokeStyle="black";
cxt.beginPath();
cxt.arc(axisX,axisY,radius,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.stroke();
}
for (i=0;i<4;i++){
drawCircle();
axisX=axisX+84;
}
</script>
</body>
</html>
What am I doing wrong? Thank you! Dear Forum Members HI, I am no coder, however I am modifying my website and changing the slideshow to the one found on this website, most wonderful, the Cut & Paste JavaScript Slideshow( http://www.javascriptkit.com/script/.../jsslide.shtml ) I have it working now, and I have but one question, does the code include a way to limit the number of times that it cycles through the slides? So it just freezes on one photo after x number of cycles? many thanks, and happy holidays... Here is the code I am working with, been at it for 3 days now. I am at a loss....cant see why it shouldnt work. window.onload = defineMarquee; var timeID; var marqueeTxt = new Array(); var marqueeOff = true; function defineMarquee(){ var topValue = 0; var allElems = document.getElementsByTagName("*"); for (var i=0; i < allElems.length; i++){ if (allElems[i].className =="marqueTxt") marqueeTxt.push(allElems[i]); } for (i = 0; i < marqueeTxt.length; i++) { if (marqueeTxt[i].getComputedStyle) { topValue = marqueeTxt[i].getPropertyValue("top"); } else if (marqueeTxt[i].currentStyle) { topValue = marqueeTxt[i].currentStyle("top"); } } document.getElementById("startMarquee").onclick = startMarquee; document.getElementById("stopMarquee").onclick = stopMarquee; } function startMarquee(){ if (marqueeOff == true) { timeID = setInterval("moveMarquee()", 50); marqueeOff = false; } } function stopMarquee(){ clearInterval(timeID); marqueeOff = true; } function moveMarquee(){ var topPos = 0; for (i=0; i < marqueeTxt.length; i++){ if (marqueeTxt[i].getComputedStyle) { topPos = parseInt(marqueeTxt[i].getPropertyValue("top")); } else if (marqueeTxt[i].currentStyle) { topPos = parseInt(marqueeTxt[i].currentStyle("top")); } if (topPos < -110) { topPos = 700; } else { topPos -= 1; } marqueeTxt[i].style.top = topPos + "px"; } } I've looked for a solution to this issue, but it seems like a little different scenario than other situations. I made a system for generating friend requests on Facebook. I have a grid that is 6 x 3, for a total of 18 cells. Each cell has a picture in it, and the picture is linked to the Facebook friend request page. My problem is that since each cell is populated at random from the array, I'm getting lots of repeats. For example, some picutures are in 5 cells, and some are in none. I'm trying to figure out how to make it so that once a picture is used once in the grid, it does not get used again in the same grid. I still want every cell filled at random on each page load, I just want to prevent the repeating. Here's my current code: Code: <script type="text/javascript">
var vip_list=new Array(
new Array('http://profile.ak.fbcdn.net/v225/1616/88/s1220771654_2158.jpg','http://www.facebook.com/addfriend.php?id=1220771654'),
new Array('http://profile.ak.fbcdn.net/v223/1233/29/s904885342_9055.jpg','http://www.facebook.com/addfriend.php?id=904885342'),
new Array('http://profile.ak.fbcdn.net/v229/1574/66/s1752031238_626.jpg','http://www.facebook.com/addfriend.php?id=1752031238'),
new Array('http://profile.ak.fbcdn.net/v223/768/71/n661155042_7325.jpg','http://www.facebook.com/addfriend.php?id=661155042'),
new Array('http://profile.ak.fbcdn.net/v226/732/26/n1827289885_2478.jpg','http://www.facebook.com/addfriend.php?id=1827289885'),
new Array('http://profile.ak.fbcdn.net/v229/1631/70/s1425313768_1140.jpg','http://www.facebook.com/addfriend.php?id=1425313768'),
new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1667023416'),
new Array('http://profile.ak.fbcdn.net/v225/1146/29/s506485704_9532.jpg','http://www.facebook.com/addfriend.php?id=506485704'),
new Array('http://profile.ak.fbcdn.net/profile6/270/32/s692160490_8745.jpg','http://www.facebook.com/addfriend.php?id=692160490'),
new Array('http://profile.ak.fbcdn.net/v229/114/83/s1218176198_7375.jpg','http://www.facebook.com/addfriend.php?id=1218176198'),
new Array('http://profile.ak.fbcdn.net/v226/946/4/s1470171885_4973.jpg','http://www.facebook.com/addfriend.php?id=1470171885'),
new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1329505888'),
new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1325496968'),
new Array('http://profile.ak.fbcdn.net/v223/1546/92/s1536913202_2017.jpg','http://www.facebook.com/addfriend.php?id=1536913202'),
new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1624715433'),
new Array('http://profile.ak.fbcdn.net/v228/1282/58/s713998257_3682.jpg','http://www.facebook.com/addfriend.php?id=713998257')
);
var chosen_vip=Math.floor(vip_list.length*Math.random());
var chosen_vip1=Math.floor(vip_list.length*Math.random());
var chosen_vip2=Math.floor(vip_list.length*Math.random());
var chosen_vip3=Math.floor(vip_list.length*Math.random());
var chosen_vip4=Math.floor(vip_list.length*Math.random());
var chosen_vip5=Math.floor(vip_list.length*Math.random());
var chosen_vip6=Math.floor(vip_list.length*Math.random());
var chosen_vip7=Math.floor(vip_list.length*Math.random());
var chosen_vip8=Math.floor(vip_list.length*Math.random());
var chosen_vip9=Math.floor(vip_list.length*Math.random());
var chosen_vip10=Math.floor(vip_list.length*Math.random());
var chosen_vip11=Math.floor(vip_list.length*Math.random());
var chosen_vip12=Math.floor(vip_list.length*Math.random());
var chosen_vip13=Math.floor(vip_list.length*Math.random());
var chosen_vip14=Math.floor(vip_list.length*Math.random());
var chosen_vip15=Math.floor(vip_list.length*Math.random());
var chosen_vip16=Math.floor(vip_list.length*Math.random());
var chosen_vip17=Math.floor(vip_list.length*Math.random());
document.write('<center>');
document.write('<a href="',vip_list[chosen_vip][1],'" target="_blank"><img src="',vip_list[chosen_vip][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip1][1],'" target="_blank"><img src="',vip_list[chosen_vip1][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip2][1],'" target="_blank"><img src="',vip_list[chosen_vip2][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip3][1],'" target="_blank"><img src="',vip_list[chosen_vip3][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip4][1],'" target="_blank"><img src="',vip_list[chosen_vip4][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip5][1],'" target="_blank"><img src="',vip_list[chosen_vip5][0],'" height="60" width="60"></a>');
document.write('<br>');
document.write('<a href="',vip_list[chosen_vip6][1],'" target="_blank"><img src="',vip_list[chosen_vip6][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip7][1],'" target="_blank"><img src="',vip_list[chosen_vip7][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip8][1],'" target="_blank"><img src="',vip_list[chosen_vip8][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip9][1],'" target="_blank"><img src="',vip_list[chosen_vip9][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip10][1],'" target="_blank"><img src="',vip_list[chosen_vip10][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip11][1],'" target="_blank"><img src="',vip_list[chosen_vip11][0],'" height="60" width="60"></a>');
document.write('<br>');
document.write('<a href="',vip_list[chosen_vip12][1],'" target="_blank"><img src="',vip_list[chosen_vip12][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip13][1],'" target="_blank"><img src="',vip_list[chosen_vip13][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip14][1],'" target="_blank"><img src="',vip_list[chosen_vip14][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip15][1],'" target="_blank"><img src="',vip_list[chosen_vip15][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip16][1],'" target="_blank"><img src="',vip_list[chosen_vip16][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip17][1],'" target="_blank"><img src="',vip_list[chosen_vip17][0],'" height="60" width="60"></a>');
document.write('<br>');
</script>
Any suggestions? Thank you! I'm a student and i missed first Javascript. Could someone please just put me into the right way to make it work, I can't honestly find an answer anywhere. E.g. I have following declaration in the head section of html: <script language="javascript" type="text/javascript" src="java1.js" </script> My aim is to initialize a string variable firstname in java.js to be displayed on a page. I declare it in java.js as: var firstname="Tom"; I put document.write statement to the head of html section as: <script language="javascript" type="text/javascript" src="java1.js"> document.write; </script> ....but it doesn't work. Could someone just point me into the right direction, I tried w3c and others but unsuccessfully, it looks like everyone just seamlessly go straight to the coding. Ok so i want to code something like this http://i45.tinypic.com/29y10s1.png I want it to where the user just clicks on one of the buttons and it changes to the thing. But then i want to be where if the user doesn't click anything then it just changes by itself. so like on a timer. Can anyone give me some references that might help me get started with coding this. I have no clue where tos tart. |
|||||||