|
JavaScript - Image Display To Number Range
So I've got my code ready to generate a random number between a certain range and printing it out in text. What I'm trying to accomplish with this code is to print the actual image as well as the text.
I'm aware that there is an error in my document.write line, and that it's not the best solution. I was hoping for some suggestions to change/improve this last bit. Thanks in advance! Code: <html>
<title>RANDOM IMAGE TO NUMBER RANGE</title>
<body>
<center>
<script language="javascript" type="text/javascript">
var ranges = [
{ from: 11, image: "image4.jpg" },
{ from: 1, image: "image3.jpg" },
{ from: -9, image: "image2.jpg" },
{ from: -20, image: "image1.jpg" }
];
var random_num = (Math.round((Math.random()*41)+-20));
var image = "default";
for(var i = 0; i < ranges.length; ++i) {
if(random_num >= ranges[i].from) {
image = ranges[i].image;
break;
}
}
{
document.write("Text: " + random_num + " Text, " + " Image: = " + image);
{
document.write('<img src="images/' + ranges[i].image);
}
}
</script>
<br></br>
<div>
CLICK <a href="javascript:history.go(0);">REFRESH or F5</a> FOR A RANDOM IMAGE on NUMBER-RANGE.
</div>
</center>
</body>
</html>
Similar TutorialsI have a function below where every time a question is submitted, it will add a new row in the table with a textbox which allows numbers entry only. My question is that I don't know how to code these features in this function: 1: I want the text box to be between 0 and 100, so if text box contains a number which is above 100, it will automatically change the number to the maximum number which is 100. Does any one know how to code this in my function below in javascript: Code: function insertQuestion(form)
{
var row = document.createElement("tr");
var cell, input;
cell = document.createElement("td");
cell.className = "weight";
input = document.createElement("input");
input.name = "weight_" + qnum;
input.onkeypress = "return isNumberKey(event)";
cell.appendChild(input);
row.appendChild(cell);
}
I'm wanting to put a piece of code on my website that will display when our next meeting will be. We have 2 meetings per month. I'm thinking what I need to do is create a code that gets the current month, day of month, and year then combines it together somehow, and if that combination is in a certain range a particular statement, "Next meeting is MM, DD YY." or "Next meeting is today." is displayed. If date is equal to or between 01012012 and 01112012, "Next meeting is January, 12 2012" is displayed. If date is equal to 01122012, "Next meeting is today" is displayed. If date is equal to or between 01132012 and 01252012, "Next meeting is January, 26 2012" is displayed. If date is equal to 01262012, "Next meeting is today" is displayed. ...that kind of thing. How would I combine the month, day of month, and year? Would 48 if statements be what I need to do? Sorry, I'm pretty new to javascript. If there's a better way to do this, please let me know. Thanks, CJ Just wondering what the code is for a phone number to be displayed nn-nnnnnnnn for example: 67 43289482 current code is Code: var pn = document.contact_form.phonenum.value;
if ((pn.length != 10) || (/[^0-9]/g.test(pn))) { // 10-digit phone number
alert ( "Please fill in your 10-digit telephone number" );
return false;
}
So never done this one before so I am having a bit of a time trying to figure this one out. Say I have a list of LI element and only a few of them have a inline style of display block, the rest have a display of none. How would I go about looping through and dertmining the number of elements that have a display of block? Code: for(var m = 0; m < li.style.display.length; i++)
{
alert(m);
};
The above is just crazy but where my mind melts.. Hi there, I found this thread on the forum its from a few years back but the code works, but I can't seem to get the image that appears as you rollover the button to display in the correct place. I'm not sure if its because I'm using tables within tables? Should I recode in divs? Any help is greatly appreciated!! http://www.codingforums.com/archive/...p/t-95847.html I am trying to figure out how to make a random number I can plug into a script count down from that number at certain times of the day until it reaches 0. I would like it to reset itself at midnight every day. I'm trying to make it work with a script I found on here that resets itself at midnight every day. So instead of it counting down too fast, it would count down to the next number after a randomly generated number of minutes until it reaches 0. But it wouldn't necessarily have to end at 0 at midnight. It could go from 845 to 323 at the end of the day at a slower pace. Is that possible?
When I used toFixed() method on a number, I thought that this method round a number to a specified approximation, but I got a surprising result, the number became string! 15.23689 .toFixed ( 2 ) ==> "15.24" So does it convert the number into string? hi, i am currently doing a program that will display the image continuously. the image name will be like pic1.jpg , pic2.jpg , pig3.jpg untill pic10.jpg this is my code so far : <html> <head> <script type="text/JavaScript"> var fileName; function display() { fileName = new Array(); for( i=0; i<5; i++) { fileName[i] = new Image(); fileName[i].src = "screenshot_" + i + ".jpeg"; } } display(); </script> </head> <body> </body> </html> but when i run it, it give me infinity loop, can anyone tell me what is the problem of that ? thanks in advance for the reply Hi all, Could someone explain the W3C DOM Range to me? Please note that I want to know how to do it with a standard W3C range, NOT an MSIE text range. Please don't simply point me to a web link ... I've seen all of those and I still don't get it. What I am trying to do is get a user's selection range (which I can already do), then modify it by adding information to the beginning and ending of the range. Specifically, I am trying to "wrap" a range with some extra text... like this: (1) This is a sentence written by the user. <- original (2) This is a sentence written by the user. <- user's selection (3) This is a [bbcode] sentence written [/bbcode] by the user. <- added text. note that the user's selection REMAINS SELECTED after the bbcode is added. What I need to know is how to add the information to the range. Do I change the range start and end points? Do I have to convert the text into an element (i.e. document.createElement('span')) before I insert it? Please explain to me how to use the DOM range... and do it in a "DOM range for dummies" manner, because I simply am not understanding what I see in web searches. Thanks! -- Roger Hi guys I'm really stumped on this, and I haven't been able to find a tutorial online anywhere. I'm trying to create an XML news feed for a company's website I am currently building. I have created the XML, and gotten the text to display perfectly in the HTML by using javascript. Now I want to add a thumbnail image for each news story, to make updating simpler, I wanted the url for the thumbnail to be entered into the XML, from which the javascript could read and then display in the corresponding area in the HTML. Is this even possible? Every tutorial I get when I use the terms "Image" and "Javascript" gives me a tutorial for a gallery or a slideshow which is not what I want at all. Below is the javascript code, followed by the XML code; Code: <script type="text/javascript">
var xmlDoc;
<!--
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
var x=xmlDoc.getElementsByTagName("NEWS");
i=0;
function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}
//-->
</script>
XML code Code: <?xml version="1.0" encoding="ISO-8859-1"?> <BULLETIN> <NEWS> <PIC>"/newssmall.jpg"</PIC> <DATE>14/3/2010</DATE> <TITLE>News Story 1</TITLE> <STITLE>This is a short sentence to describe the story in brief</STITLE> <STORY>This is the text of the news story</STORY> </NEWS> </BULLETIN> Thanks to anyone that even reads this, I'm probably making a nooby mistake, I only started using JS and XML on Monday so I'm still learning lol Hi people, I'm building an online psychological experiment in which I need to display an image for 5 seconds on the screen. Does anyone has a simple script for that? I found some script that does image rotation but its not exactly what I am looking for. First, the rotation of the images doesn't stop and second I don't need something so elaborate. This is the script that I found. Code: <SCRIPT LANGUAGE="JavaScript">
<!--
var dimages=new Array();
var numImages=2;
for (i=0; i<numImages; i++)
{
dimages[i]=new Image();
dimages[i].src="images/image"+(i+1)+".jpg";
}
var curImage=-1;
function swapPicture()
{
if (document.images)
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete)
{
var rel="nofollow" target=0;
if (document.images.myImage)
rel="nofollow" target=document.images.myImage;
if (document.all && document.getElementById("myImage"))
rel="nofollow" target=document.getElementById("myImage");
// make sure target is valid. It might not be valid
// if the page has not finished loading
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
setTimeout("swapPicture()", 5000);
}
else
{
setTimeout("swapPicture()", 500);
}
}
}
setTimeout("swapPicture()", 5000);
//-->
</SCRIPT>
Thanks Hello, First, I'm new to the Javascript (and to this forum). I am trying to use a Javascript to display a randomly selected image located in a folder of my site. I need to fit these images (which may have quite diverse dimensions) into a frame of 280x280 px. Here is the code of the current script which does not currently work: Code: // JavaScript Document
<script language="JavaScript"><!--
function random_imglink(){
var myimages=new Array()
var imagetitle=new Array()
urlimage="http://www.mysite.fr/Images/RandomPictures/"
var i=0
//specify here the total number of random images which should be names 1.jpg, 2.jpg etc
nbrandompic=140
for (i=0;i<= nbrandompic;i++)
{
myimages[i]=urlimage + i +".jpg"
imagetitle[i]=urlimage + i +".txt"
}
//Randomly select an image
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
var reduction = 1
var maxWidth=280
var maxHeight=280
//Calculate the reduction that should be applied
if(myimages[ry].width > maxWidth || image.height > maxHeight)
reduction = Math.max(myimages[ry].width/maxWidth,myimages[ry].height/maxHeight)
// New dimensions
iw = Math.round(myimages[ry].width / reduction)
ih = Math.round(myimages[ry].height / reduction)
//Display image
document.write('<a><img src="'myimages[ry]'" title="" border=0 width='+iw+' height='+ih+'></a>')
}
random_imglink()
//-->
</script>
I am sure that you guys can help me solve this problem. Many thanks in advance!! Antonino trying to display an image using an img tag which uses the array value as the image path here is where i set up the array called " img_path " in the head <script type="text/javascript"> var img_path = [ 'images/west/Home.png', 'images/west/Cold.png', 'images/west/Ocean.png', 'images/west/Beach.png' ]; </script> later, in the body, i'm trying to use the array value to splash the image on the web page, like this <img src=" img_path[0] " width="250" height="250"> the result splashes a 250x250 image area on the webpage but not the image (?). why not the image ? i tested the value of "img_path[0]" and it prints out correctly as 'images/west/Home.png' i even cut/pasted this code in and the image splashed out just fine. <img src=" images/west/Home.png " width="250" height="250"> not sure why this won't work? anyone have any suggestions? thanks, Paul weather in Kalispell, MT this morning........not to bad, about 28deg. Merry Christmas and Happy New Year to all. How do I get a function in the head to turn on or show an image in the body area? I am a struggling noob, but tutorials will not teach me. If I wanted to document.write, or in this case use an alert box, I would not have a question. I feel I understand the functions below, but these are not real world examples of anything, at least that I would ever use. I don't know how to help myself. But I do know, I need to get the part of alert("Hello") changed into something somehow the image will act on, see and display after the 3 second delay. This is the website I got this code from. http://www.w3schools.com/js/js_timing.asp If I can see how to get a function to really do something, would be a big help for me in understanding JS. This is not a school project, my school doesn't offer any programming. I have been at this all day trying to find a tutorial that would help me. Thanks so much for your help. Code: <html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
alert("Hello"); Somehow this has to show my image.
}
</script>
</head>
<body">
<form>
<input type="button"
value="show my Image"
onClick="timeMsg()" />
</form>
<img />
</body>
</html>
I AM TRYING TO VALIDATE THE AGE RANGE SO THAT IT CAN ACCEPT AN AGE BETWEEN 16 - 99 BUT SOME HOW IM NOT GETTING THROUGH CAN ANYONE HELP ME WITH THAT PLEASE THANKS IN ADVANCE Code: <html>
<head>
<title>Registration</title>
<script type="text/javascript">
function validation(form) {
var invalid =" ";
var minlength = 6;
var emailchar =/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var numchar =/(^\d+$)|(^\d+\.\d+$)/;
var userName = registration.u_name.value;
var firstName = registration.f_name.value;
var lastName = registration.l_name.value;
var yourage = registration.age.value;
var pw1 = registration.pwd.value;
var pw2 = registration.pwd1.value;
var em_adss = registration.e_address.value;
if (userName.length ==""){
alert("Please enter your USERNAME.");
return false;
}
if ((userName.length < 5) || (userName.length > 15)) {
alert("User name must be between 5 and 15 characters");
return false;
}
if (firstName.length ==""){
alert("Please enter your FIRSTNAME.");
return false;
}
if (lastName.length ==""){
alert("Please enter your LASTNAME.");
return false;
}
if (yourage.length ==""){
alert("Please enter your AGE.");
return false;
}
if (! registration.age.value.match(numchar)){
alert ("Please enter a valid age.");
return false;
}
if ((age < 16) && (age >99)){
alert ("Please enter and valid age range");
return false;
}
if (pw1 == '' || pw2==''){
alert ("Please enter password twice");
return false;
}
if (registration.pwd.value.length < minlength){
alert ("Your password must be at least" + minlength + "characters in length.");
return false;
}
if (registration.pwd.value.indexOf (invalid) > -1) {
alert("Spaces are not allowed in the password");
return false;
}
if (pw1 != pw2) {
alert ("Your passwords didn't match. Please re-enter");
return false;
}
if (em_adss.length ==""){
alert("Please enter your EMAIL.");
return false;
}
if (! registration.e_address.value.match(emailchar)){
alert("Stop playing games.\n Please enter a valid email address");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="registration" action="response.html" method="get" onSubmit="return validation(this);">
USERNAME:<br>
Between 5-15 characters.
<input name="u_name" type="text" size="35" maxlength="50">
<br><br>
FIRSTNAME:
<br>
Enter your first name.
<input name="f_name" type="text" size="35" maxlength="50">
<br><br>
LASTNAME:
<br>
Enter your last name.
<input name="l_name" type="text" size="35" maxlength="50">
<br><br>
AGE:
<br>
Enter your age. (16-99)
<input name="age" type="text" size="35" maxlength="50">
<br><br>
PASSWORD:
<br>
Enter your password.
<input name="pwd" type="password" size="35" maxlength="50">
<br><br>
VERIFY PASSWORD:
<br>
Verify your password.
<input name="pwd1" type="password" size="35" maxlength="50">
<br><br>
EMAIL:
<br>
Enter your email address.
<input name="e_address" type="text" size="35" maxlength="50">
<br><br>
<input type="submit" value="Submit Information" name="submit">
<input name="reset" type="reset" value="Reset Information">
</form>
</body>
</html>
Hi, Is it possible in Javascript to verify a range of IP's for open port 80 and show as a hiperlink? The ideia is similar to ip scanners but it's for a web spider... Thanks Reply With Quote 01-11-2015, 01:04 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Not possible IMO. Javascript cannot access or interact with the operating system. All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit. Hi all, First of all, I am not a student and this is not homework. Secondly, I've been programming in C, Motorola assembler, Intel assembler and even GWBasic for years. I recently (this year) got into Web / Javascript / PHP / HTML programming and I'm clawing up the learning curve. I know a fair amount, but have a long way to go. OK here's my problem: I've been trying to integrate a WYSIWYG editor (TinyMCE) into a bulletin board software package (PHPBB3). All is working well except for one big stumbling block that I've been battling for the past MONTH!...: I want to support the original BBCode system of PHPBB3 (mostly because of the ability for the admin to add custom BBCodes). So, what I need to do is this: (1) Select a range of text. (2) Either REPLACE it with "[tag]selection[/tag]" or else INSERT "[tag]" before and "[/tag]" after. (3) Lastly, the original selection must remain selected so that additional BBCodes can be wrapped without the need to re-select. The purpose of (3) is, say, the user clicks "bold" and "italic" and "underline".... all they should have to do is click those 3, not re-select each time. I've tried doing this: (1) get the selection range (2) get the selection text (3) delete the range contents (4) create two "contextual fragments" (one for the opening tag, the other for the closing tag). (5) create a <span> element containing the selection text (6) Insert it all into the range with range.insertNode() (7) finally select the new span element This seems to work fine, but Internet Explorer fails (it complains when I try to get the selection range). I just don't know what I'm doing wrong... and worse I'm not even sure if I'm attacking the problem the proper way. Any ideas would be greatly appreciated! Thanks! -- Roger Filename: front.htm Supporting files: ads1.jpg - ads5.jpg, ads.js, fp.jpg, front.htm, logo.jpg, random.js, styles.css --> <title>The Ridgewood Herald Tribune</title> <link href="styles.css" rel="stylesheet" type="text/css" /> <script src="random.js" type="text/javascript"></script> <script src="ads.js" type="text/javascript"></script> </head> <body> <div id="links"> <h1>Contents</h1> <p class="section">Main</p> <p class="linksub"> <a href="#">Home</a><br /> <a href="#">Subscriptions</a><br /> <a href="#">Contact Us</a><br /> <a href="#">News Sources</a><br /><br /> </p> <p class="section">News</p> <p class="linksub"> <a href="#">Local</a><br /> <a href="#">National</a><br /> <a href="#">International</a><br /> </p> <p class="section">Sports</p> <p class="linksub"> <a href="#">Baseball</a><br /> <a href="#">Basketball</a><br /> <a href="#">Football</a><br /> <a href="#">Golf</a><br /> <a href="#">Hockey</a><br /> <a href="#">Miscellaneous</a><br /> </p> <p class="section">Opinion</p> <p class="linksub"> <a href="#">Editorials</a><br /> <a href="#">Columnists</a><br /> <a href="#">Letters</a><br /> </p> <p class="section">Classifieds</p> <p class="linksub"> <a href="#">Employment</a><br /> <a href="#">For Sale</a><br /> <a href="#">Personals</a><br /> <a href="#">Real Estate</a><br /> <a href="#">Wanted</a><br /> </p> <p class="section">Other</p> <p class="linksub"> <a href="#">Business</a><br /> <a href="#">Weather</a><br /> <a href="#">Entertainment</a> </p> </div> <div id="main"> <div id="ads"> <script type="text/javascript"> /* generate a random integer from 1 to 5 */ var rNumber = randInt(5); /* description of the random ad */ var rAd = adDescription(rNumber); /* URL of the random ad */ var rLink = adLink(rNumber); document.write('<a href="'+rLink+'">'); document.write(rLink+"'ads'"+rNumber+"'.jpg'" alt="'rAd'" />); document.write(adLink); document.write("</a>"); </script> </div> <div id="request"><a href="#">Contact us today to place your ad</a></div> <p id="logo"> <img src="logo.jpg" alt="Ridgewood Herald Tribune" /> </p> <p id="fp"> <img src="fp.jpg" alt="" /> </p> <h2>Park Opens</h2> <p id="intro">The <i>Adventure Island</i> theme park opened its doors on Monday near Ridgewood. The park, one of the biggest in New Jersey, drew large crowds, but the long lines didn't deter anyone. "I've been watching them put up the rides over the last year, it's really exciting to finally get inside the gates!" said Ridgewood resident, Denise Brooks.</p> <p class="cont"><a href="#">story continues on page 2...</a></p> <address id="footer"> <b>Ridgewood Herald Tribune</b> ° 10010 Atwood Ave. ° Ridgewood, NJ 07451<br /> Phone: (201)555-1101 ° Fax: (201)555-1102 </address> </div> </body> </html> |
|||||||