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.

Web Design Help

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

View Forum Rules | Contact Forum Editor

 

JavaScript masthead problem with timing

ethelbert

Likes # 0

Posted June 30, 2012 at 5:17PM

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

Posted June 30, 2012 at 10:57PM

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

Posted July 1, 2012 at 10:36AM

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

Posted July 1, 2012 at 10:37AM

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

Like this post
Ansolan

Likes # 0

Posted July 1, 2012 at 2:18PM

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

Posted July 1, 2012 at 2:36PM

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

Posted July 1, 2012 at 2:44PM

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

Posted July 1, 2012 at 2:45PM

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

Posted July 1, 2012 at 2:47PM

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.



Check out PC Advisor's other tech forums

Send to a friend

Email this article to a friend or colleague:

PLEASE NOTE: Your name is used only to let the recipient know who sent the story. Both your name and the recipient's name and address will not be used for any other purpose.