Solved

Display Array No!!

Posted on 2006-11-17
6
214 Views
Last Modified: 2008-01-09
Hopefully this will be very simple for most for most of you, but I am not the best at js.

I am developing a site that displays an image with next and previous links to scroll through the images in my array. I am trying to display the image No that they are currently viewing / total images. Here is my code so far.

<script language="JavaScript">

var selectedImage = 1;
var numImages = 7;
var img = new Array();
img[1] = "img/prop/6/1.jpg";
img[2] = "img/prop/6/2.jpg";
img[3] = "img/prop/6/3.jpg";
img[4] = "img/prop/6/4.jpg";
img[5] = "img/prop/6/5.jpg";
img[6] = "img/prop/6/6.jpg";
img[7] = "img/prop/6/7.jpg";

function swapImageRight(){
      if (selectedImage < numImages){
            ++selectedImage;
            document.image.src=img[selectedImage];
            
      }
}

function swapImageLeft(){
      if (selectedImage > 1){
            selectedImage = selectedImage - 1;
            document.image.src=img[selectedImage];
      }
}

</script>

And in the body above the next and previous buttons I have:

<script language="JavaScript">document.write('1' + '/' + numImages);</script>

How do i get the '1' to change dynamicaly to show the array no im viewing?? here is my site so you can see what i mean:

http://www.homematch.co.uk/map/sample-detail.asp?PID=1

Thanks in advance for any help.

James.
0
Comment
Question by:james1977
  • 3
  • 3
6 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17966895
james1977,

The problem is using document.write.  The document (i.e. page) has already been written and closed.  That's OK though because there is a really cool way to do it.  Change the script tag and use a div or span tag instead.  Provide that tag with a unique id.  Then we use innerHTML to "write" the content of that div/span.  With that we can write the 1/7 and then change it as needed.  Whether you use a div or span tag for that spot depends on the page layout and if it needs to be inline (i.e. span) or not (i.e. div).

You write content to an element with script like this ...

document.getElementById("uniqueID").innerHTML = "1/7";

Put the div/span's id in place of uniqueID in the line above.

This should give you a basic idea at least.  Let me know if I misunderstood what you want or if you need help getting it to work in the page.  Let me know if you have any questions or need more information.

b0lsc0tt
0
 

Author Comment

by:james1977
ID: 17977774
Thanks for the reply B0lsc0tt, only just seen it, i'll have a little look and see if I can get my head round it.

Thanks again.

James.
0
 

Author Comment

by:james1977
ID: 17977878
Sorry b0lsc0tt, when I said im not the best at Javascript, what I actually meant was that im a complete dunce at it.

I had a quick go at what you said but i've not got a clue what im doing, would it be possible for you to run me through it?

Sorry again, I hate being rubbish at things! Better get a javascript for dummies book!
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 50 total points
ID: 17983522
I will make some changes to your code that you can try ...

                <tr>
                  <td colspan="2"><div align="center" id="picDisplay"><script language="JavaScript">document.write(selectedImage + '/' + numImages);</script></div></td>
                  </tr>

Then in the 2 swap image functions add a line like this ...

  document.getElementById("picDisplay").innerHTML=selectedImage + '/' + numImages;

That line should probably be one of the last lines.  It definitely needs to be after you change the selectedImage value.

Let me know if you have any questions or have a problem.

bol
0
 

Author Comment

by:james1977
ID: 17985979
Thanks B0lsc0tt that worked perfectly!!!

Really appreciate your help thanks again!

James.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17988531
Your welcome!  I'm glad that I could help you.  Thank you for the grade, the points and the fun question.  Enjoy learning Javascript and I'll see you around. :D

bol
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Mouse event to control image and transparency. 4 36
html Uncheck Checkbox 2 25
Html Newline 7 21
Fix Form size HTML 16 15
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question