JavaScript - Function Display Image

So I want this function to return the date in the format: 4-Jan-2011. I feel like I have to make the variables strings or something but I can't figure it out, I'm kinda new to javascript.

Code:

function calander(TheDay) {
                var theDate = new Date();
                var day = new theDate.getDay();
                var month = new theDate.getMonth();
                var year = new theDate.getFullYear();
                
                if (month == 0) {month = "Jan";}if (month == 1) { month = "Feb"; }
                if (month == 2) { month = "March"; }if (month == 3) { month = "April"; }
                if (month == 4) { month = "May"; }if (month == 5) { month = "June"; }
                if (month == 6) { month = "July"; }if (month == 7) { month = "Aug"; }
                if (month == 8) { month = "Sept"; }if (month == 9) { month = "Oct"; }
                if (month == 10) { month = "Nov"; }if (month == 11) { month = "Dec"; }

                TheDay.value = day + "-" + month + "-" + year;
}

Hi,

I am just a noob and this is my first go at javascript and html

I am trying to figure out how to display info from an array in the <textarea>, I have tried a number of things nothings worked and I know it must be something simply but have tried a number of things

I also have to clear the <textarea> after it displays the info mentioned above and I think I have that sorted but I also have to have the <textarea> display all signup info stored in the array when a user clicks on a button

Here's the code

Code:

function show()
{
var myArray = new Array(); 
myArray[0] = document.getElementById('fullname').value; 	myArray[1] = document.getElementById('Address').value;	myArray[2] = document.getElementById('Phone').value;	

document.writeln('Thank you for signingup,' + ' ' + myArray[0] + '. Your details will be confirmed by E-mail to ' + myArray[2] );
	
document.writeln("<br>")
document.writeln('Details:')	
document.writeln("<br>")
	
for (var i=0; i<myArray.length; i++)
{document.write(myArray[i] + "<br />");	} 
}

Thanks

Hey guys, I'm trying to make a function that will display certain elements when a paragraph is clicked. As of right now, the function is called, and only the first line gets executed properly. The rest don't work. $postCount is a counter variable setup by a for loop that it is in. When I view source, it is working properly.

Code:

	function newComment".$postCount."()
	{
		document.getElementById('postComment$postCount').style.display = 'none';
		document.getElementById('newCommentProfilePicture$postCount').style.display = '';
		document.getElementById('commentBox$postCount').style.display = '';
		document.getElementById('submitComment$postCount').style.display = '';
		document.getElementById('addCommentContainer$postCount').style.display = '';
		document.getElementById('commentBox$postCount').rows = '3';
	}

PHP Code:
echo "<div class='viewComment' id='viewCommentButton".$postCount."'>

    <div class='leftCommentControl'>";

    if ($numComments > 0)
    {
    echo "<p class='viewCommentLink' id='viewCommentLink".$postCount."' onclick='showComment".$postCount."()' 
        onmouseover=\"this.style.textDecoration='underline';
         this.style.cursor='pointer'\" onmouseout=this.style.textDecoration='none'>
        View ".$numComments." Hidden Comments!</p>";
    }

    echo "</div>

    <div class='rightCommentControl'>

    <p class='postComment' id='postComment".$postCount."' onclick='newComment".$postCount."()' onmouseover=\"this.style.textDecoration='underline';
         this.style.cursor='pointer'\" onmouseout=this.style.textDecoration='none'>Add Comment</p>

    </div>

    </div>

    <div class='addCommentContainer' id='addCommentContainer".$postCount."' style='display: none'>

    <form action='processComment.php?userid=".$_SESSION['userid']."&postid=".$row['postid']."&sentFrom=$currentPage' method='POST'>
    
    <img class='newCommentProfilePicture id='newCommentProfilePicture".$postCount."' 
    src='uploadPic/mini".$_SESSION['picture']."' style='display: none'></img>

    <textarea id='commentBox".$postCount."' class='commentTextArea' name='commentBox'
     rows='1' cols='49' onfocus='newComment".$postCount."()'></textarea>

    <input type='submit' class='button' id='submitComment".$postCount."' name='submit' ALT='Submit button' value='Comment'
        style='display: none'>

    </form>

    </div>
    </div>
    </div>"; 

I wrote a script that creates 2 absolutely positioned divs, in perfect alignment, one on top of the other. I want to use javascript to manipulate the display property of each div to show one div at a time by toggling each div's display property between none and block with an onClick event handler attached to the link.


This script works fine when the javascript function has no parameters, because the div id's are inserted directly into the getElementById function.

When I say it works, I mean the div with id=cal2 displays onload, then disappears when the Show Calendar link is clicked. The div that appears in its place has a link that does the reverse when clicked.

I want to create multiple pairs of overlapping divs that toggle their visibility, so I want to put parameters inside the functions that identify the specific pair of divs that need to be toggled per function call.

When I try to use variables/parameters in the functions to insert specific div id's into getElementById, it does not work.




PLEASE NOTE, the code below has div id's in green that don't have quotes of any kind. It still works in my firefox browser. I thought id's needed quotes, but it works without. I don't know why.

The code below works, but has no parameters in the functions:

Code:

<!DOCTYPE html>

<xhtml>
<head>
<title>Practice Calendar</title>

<style type="text/css">

.practicecalendar
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #B3FF99;
text-align: center;
}

.practiceschedule
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #99E6FF;
text-align: center;
}

</style>

<script type="text/javascript">
<!--

function showSchedule(){
document.getElementById('sch2').style.display = 'block';
document.getElementById('cal2').style.display = 'none';
}

function showCalendar(){
document.getElementById('cal2').style.display = 'block';
document.getElementById('sch2').style.display = 'none';
}
//-->
</script>
</head>

<body>


<div id= cal2  class='practicecalendar' style='
display: block;
'>
<p>Calendar</p>
<p><a href='' onClick='showSchedule(); return false'>Show Schedule</a></p>
</div>

<div id= sch2  class='practiceschedule' style='
display: none;
'>
<p>Schedule</p>
<p><a href='' onClick='showCalendar(); return false'>Show Calendar</a></p>
</div>
</body>
</xhtml>

When I add the information in red to the same script above, I get the script below that does not work.

Code:

<!DOCTYPE html>

<xhtml>
<head>
<title>Practice Calendar</title>

<style type="text/css">

.practicecalendar
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #B3FF99;
text-align: center;
}

.practiceschedule
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #99E6FF;
text-align: center;
}

</style>

<script type="text/javascript">
<!--

function showSchedule( sch,cal ){
document.getElementById( 'sch' ).style.display = 'block';
document.getElementById( 'cal' ).style.display = 'none';
}

function showCalendar( cal,sch ){
document.getElementById( 'cal' ).style.display = 'block';
document.getElementById( 'sch' ).style.display = 'none';
}
//-->
</script>
</head>

<body>


<div id= cal2  class='practicecalendar' style='
display: block;
'>
<p>Calendar</p>
<p><a href='' onClick='showSchedule( 'sch2','cal2' ); return false'>Show Schedule</a></p>
</div>

<div id= sch2  class='practiceschedule' style='
display: none;
'>
<p>Schedule</p>
<p><a href='' onClick='showCalendar( 'cal2','sch2' ); return false'>Show Calendar</a></p>
</div>
</body>
</xhtml>

When I remove the single quotes from the blue code , it does not work either.

Code:

<!DOCTYPE html>

<xhtml>
<head>
<title>Practice Calendar</title>

<style type="text/css">

.practicecalendar
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #B3FF99;
text-align: center;
}

.practiceschedule
{
position: absolute;
top: 0px;
left: 0px;
margin: 0;
width: 18em;
background: #99E6FF;
text-align: center;
}

</style>

<script type="text/javascript">
<!--

function showSchedule(sch,cal){
document.getElementById('sch').style.display = 'block';
document.getElementById('cal').style.display = 'none';
}

function showCalendar(cal,sch){
document.getElementById('cal').style.display = 'block';
document.getElementById('sch').style.display = 'none';
}
//-->
</script>
</head>

<body>


<div id=cal2 class='practicecalendar' style='
display: block;
'>
<p>Calendar</p>
<p><a href='' onClick='showSchedule( sch2,cal2 ); return false'>Show Schedule</a></p>
</div>

<div id=sch2 class='practiceschedule' style='
display: none;
'>
<p>Schedule</p>
<p><a href='' onClick='showCalendar( cal2,sch2 ); return false'>Show Calendar</a></p>
</div>
</body>
</xhtml>

Thanks for reading all of this. Does anyone know what I'm missing?

Hi all - first post - I'm not too hot on javascript so I don't know if this can be done nor how to search for it in the forum because I don't know what keywords to use - but if I give an idea of what I want to do, perhaps someone can suggest an idea of how to proceed?

I have two left floated divs - in the left div I want a series of drop downs (possibly check boxes as well) about a series of products. When the user makes their decision and presses submit, I want the form to submit to a javascript function that says "Right, you will need, from your responses, product C" and in the right hand floated div, a series of hidden product info divs whose visibility is changed depending on which product the function determines is the one for you.

Broken down into parts I think I need to do the following:

a) Standard HTML form with drop downs etc and submit
b) Hidden divs
c) Submission process locally to javascript function to determine which product to show/hide
d) Javascript function that makes the decision
e) Javascript that hides/shows products

Unfortunately a server side option is not available; it has to be a client side solution and I only could think of javascript. I can probably handle all bar c) and d) - any pointers, help or suggestions would be great thanks!

cheers
frank

Hi All,

I have a button in my html form that will process some functions when user clicks on the button. The problem is after processing the functions, the result is not displayed in the form where I want it to be displayed. I want to ask whether we can create table in the function and display the result in the table row/column but in the same form. Is this possible to be done? And how to do this?

In this form cpiM, the input button will call function showIndex.
Code:

<tr>
 <td><input type="button" value="Enter" onclick="showIndex(document.cpiM.currFrom.options.selectedIndex, document.cpiM.currTo.options.selectedIndex, document.cpiM.base.options.selectedIndex, document.cpiM.country.options.selectedIndex)">
  </td>
  <td><input type="button" onclick="frmResetM()" value="Reset form" />
  </td>
</tr>

In this function, I want to display the result of calcIndex right below the button Enter in the form cpiM.
Code:

function showIndex(frm, to, base, country)
{
     for (i=frm; i<=to; i++)
     {
          document.write(calcIndex(i, base, country));
          document.write("<br/>");
     }	  
}

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

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.

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

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

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

Hi,
I have a table with 2 colums, the left column is to preview image and the right column is for 4 small thumbnails. Iwant the preview picture to change when clicked on the individual thumbnail.
Can someone please help me on this?
Code:

<table width="816" height="303" border="1">
  <tr>
    <td width="396" height="297">&nbsp;</td>
    <td width="404" valign="top"><table width="100%" border="1">
      <tr>
        <td width="52%" height="166"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200"/> </td>
        <td width="48%"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
      <tr>
        <td height="174"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
        <td><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
    </table></td>
  </tr>
</table>

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> &nbsp;°&nbsp; 10010 Atwood Ave.
&nbsp;°&nbsp; Ridgewood, NJ &nbsp; &nbsp; 07451<br />
Phone: (201)555-1101 &nbsp;°&nbsp; Fax: (201)555-1102
</address>
</div>

</body>
</html>

Hey all,

I am trying to get a code instead of php to display a image from a questionaire results page;

Say the url returns;
http://localhost/Myoka2/myokaTestResults.php?img=7

the 7 will show score2.png... this works fine with php, here is the code

<?php
$total = $_GET['img'];
if ($total < 7)
$total = 1;
elseif ($total < 13)
$total = 2;
elseif ($total < 18)
$total = 3;
elseif ($total < 20)
$total = 4;
?>

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Form</title>
<script src="rollover.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/25307673/myoka/myokaStyle.css" type="text/css" media="screen" />
</head>

<body>
<span style="color:#6A1E67;font: normal bold 12pt/14pt Arial, Helvetica, sans-serif;margin-left:140px;">
How stressed are you?
<h3>SCORES</h3>
</span>

<img src="http://dl.dropbox.com/u/25307673/myoka/myokaStress/score<?php echo $total; ?>.png" alt="" /><br />

<a href="http://www.facebook.com/myoka.spas?sk=app_128953167177144" target="_blank">
<img src="http://dl.dropbox.com/u/25307673/myoka/myokaFanPage//lastMin.jpg" style="padding-left:0px; padding-top:5px; border:0px" alt="" />
</a>
<br/>
</body>
</html>


What i need is this in javascript so that it will work in a iframe :-)