JavaScript masthead problem with timing

  ethelbert 17:17 PM 30 Jun 12
Locked

I am playing around with JavaScript for a masthead but I am having a few problems with this. When you open the site there is no image and then the images start. I have 12 images but when it reaches the end, there is a pause before it starts playing again.Test site

Can anyone advise how I get an image upon opening the site and make the whole smoother?

Many thanks.

  Ansolan 22:57 PM 30 Jun 12

Hi

The small symbol you see at the beginning and end represents a missing image (one the browser can not find). In the source code for the initial image you have:

"picture0.jpg"

Whereas the images are generally under the form:

/test/oxford/imagename.jpg.

This doesn't mean you can not have an image in the given location but unlikely in this case and in either event, not available. I did quickly check by swapping out the initial image for an available one and problem cured.

Quite likely the image at the end is the same issue. This is in a sense the same image referenced in a different way i.e. /test/oxford/picture0.jpg and still not available.

Once you have both situations pointing to the right location and available images, may be okay.

  ethelbert 10:36 AM 01 Jul 12

QUOTE Whereas the images are generally under the form:

/test/oxford/imagename.jpg.

Read more: http://www.pcadvisor.co.uk/forums/13/webdesign/4153398/javascript-masthead-problem-with-timing/?pn=1#newPost#ixzz1zMUg2gVs END QUOTE/

Many thanks. I have changed the picture0 to picture1 and that has certainly solved the end issue.

I am still not getting an image to show on my computer copy and have the expected red x in top left. I wonder if there is a way of solving this?

Can I put oxford/imagename.jpg within the JavaScript?

Many thanks for the help. === Ideally I would like the site name of the page to be above the images. I am new to Javascript as I am sure you understand. ;-))

  ethelbert 10:37 AM 01 Jul 12

Sorry the missing image mentioned above as red x is of course the first image.

  Ansolan 14:18 PM 01 Jul 12

Hi

The problem with the first image is still in one way the same. You now have an existing image but not correctly referenced. The source code shows:

src="picture1.jpg"

which should be

src="oxford/picture1.jpg"

No idea if this is due to being entered through an editor, or WYSIWYG site builder but you may be able to just go into the source code (HTML) and change manually.

"I am still not getting an image to show on my computer copy and have the expected red x in top left. I wonder if there is a way of solving this?"

Have you refreshed the page?

Are you using Internet Explorer? This can be odd about images with web pages stored locally. There are solutions which sometimes work but you might be as well to download a better browser for working locally on the site e.g. Chrome

As to moving the site name above the images, not a problem, you just need to move the section currently coded as:

div id="sitename" Oxfordshire Federation of Women's Institutes div

above the banner section, instead of below. There will need to be a little adjustment on margins and the background + border of the site name. This means basic adjustment to HTML and CSS.

If you are not comfortable with this, worth looking for another template, there are vast numbers available, often free, even if you are tied to a mainstream editor.

Another optin would be to contact your nearest college offering web design courses and see if any of the students want to help. They generally will for free on a non profit site such as yours. You get a nicely designed website, they increase experience and have a site to add to their portfolio.

An additional bonus is they are at present likely to design a responsive site i.e. one which can be used well on different devices, widescreen to smartphone.

  ethelbert 14:36 PM 01 Jul 12

Many thanks again for the help. I am using Expression Web4 and so easy access to the code. Changed the scr as you said and now have no image! Need to tweak I think. Will come back when this is OK. Thanks.

  ethelbert 14:44 PM 01 Jul 12

Here we go! Many thanks for the help.

11) picnum=1; // picnum = Math.floor(Math.random() * 13); document.getElementById("oxford").src = "oxford/picture" + picnum + ".jpg"; window.setTimeout('rotatepics();', 4000); } //-->

  ethelbert 14:45 PM 01 Jul 12

11) picnum=1; // picnum = Math.floor(Math.random() * 13); document.getElementById("oxford").src = "oxford/picture" + picnum + ".jpg"; window.setTimeout('rotatepics();', 3000); } //-->

  ethelbert 14:47 PM 01 Jul 12

Sorry about that, the Javascript will not stay on the page for you to see. http://www.shottle.plus.com/test/

Really pleased now I have an opening image. Many thanks.

Advertisement

This thread is now locked and can not be replied to.

How to get Windows 10 now: how to download and install Windows 10 even if GWX.exe is missing

1995-2015: How technology has changed the world in 20 years

Nokia rolls out spherical camera for virtual reality apps

7 best iPhone web browser apps: Why Safari for iOS is still a better option than Chrome, Dolphin,…