We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message
Contact Forum Editor

Send an email to our Forum Editor:


PLEASE NOTE: Your name is used only to let the Forum Editor know who sent the message. Both your name and email address will not be used for any other purpose.

Tech Helproom


It's free to register, to post a question or to start / join a discussion


 

JavaScript masthead problem with timing


ethelbert

Likes # 0

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.

Like this post
Ansolan

Likes # 1

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.

Like this post
ethelbert

Likes # 0

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. ;-))

Like this post
ethelbert

Likes # 0

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

Like this post
Ansolan

Likes # 0

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.

Like this post
ethelbert

Likes # 0

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.

Like this post
ethelbert

Likes # 0

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); } //-->

Like this post
ethelbert

Likes # 0

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

Like this post
ethelbert

Likes # 0

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.

Like this post

Reply to this topic

This thread has been locked.



IDG UK Sites

Very best Black Friday 2014 tech deals UK: Latest bargains on phones, tablets, laptops and more...

IDG UK Sites

Tech trends 2015: 3D printing grows up

IDG UK Sites

Will I be affected by VAT MOSS? Here are the facts for designers and artists

IDG UK Sites

Black Friday 2014 UK: Apple deals, Amazon deals & Black Friday tech offers