The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Cant center slideshow
Cobra
post Aug 29 2014, 08:37 PM
Post #1





Group: Members
Posts: 3
Joined: 29-August 14
Member No.: 21,479
Hello all, im a newbie here. Im having some difficulty getting my slide show to center on my page. When I do get it to center, the slide show actually stops ohmy.gif I was hoping someone would be able to tell me why this is happening. Thank you for your time. Here is the code.



<html>
<head>
<script language="JavaScript1.1">
<!--
var slideimages=new Array()
var slidelinks=new Array()

function slideshowimages()
{
for (i=0;i<slideshowimages.arguments.length;i++)
{
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}


function slideshowlinks()
{
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}


function gotoshow()
{
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
</head>


<body>
<a href="java script:gotoshow()"><img src="http://princesspartiespgh.com/Pics/img1.jpg" name="slide" border=0 ></a> <!--Change the name of the first pic which is here "sunflower.png"-->
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("http://princesspartiespgh.com/Pics/img1.jpg","http://princesspartiespgh.com/Pics/img2.jpg","http://princesspartiespgh.com/Pics/img3.jpg","http://princesspartiespgh.com/Pics/img4.jpg","http://princesspartiespgh.com/Pics/img5.jpg","http://princesspartiespgh.com/Pics/img6.jpg","http://princesspartiespgh.com/Pics/img7.jpg","http://princesspartiespgh.com/Pics/img8.jpg","http://princesspartiespgh.com/Pics/img9.jpg","http://princesspartiespgh.com/Pics/img10.jpg")
slideshowlinks("http://princesspartiespgh.com","http://princesspartiespgh.com","http://princesspartiespgh.com")
//configure the speed of the slideshow, in miliseconds

var slideshowspeed=2000
var whichlink=0
var whichimage=0

function slideit()
{
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 30 2014, 04:18 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
All images in the slideshow are of all kind of different sizes, in width and height. Usually, for a slideshow, they should be the same size.

For a start, set up a good structure for the page, meaning add the necessary and required elements, such as a DOCTYPE and a TITLE.

The language attribute on the SCRIPT tag is obsolete, use type="text/javascript".

I don't see, how you tried to center the slideshow here. Links and images are inline elements.

To center, I'd wrap a DIV around the A link, give it a width and set margin left and right to auto in CSS. Also adding a CLASS to the image tag. See the necessary snippets below:

HTML
CODE
<div class="slides">
    <a href="java script:gotoshow()"><img src="http://princesspartiespgh.com/Pics/img1.jpg" class="slide" name="slide" border=0 ></a> <!--Change the name of the first pic which is here "sunflower.png"-->
</div>

CSS
CODE
<style type="text/css">
.slides {
    width: 960px;
    margin: 20px auto;
    outline: 1px solid red;
}
.slides a {
    display: block;
    text-align: center;
}
.slide {
    text-align: center;
}
</style>


And use a HTML validator regularly to check the correct structure of your page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 30 2014, 04:23 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
What have you done to center it?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 30 2014, 08:26 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Yeah, I already wondered about that too.

BTW, you can delete the outline property I set on .slides. I only added that to better see what happened upon testing.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Cobra
post Aug 30 2014, 02:39 PM
Post #5





Group: Members
Posts: 3
Joined: 29-August 14
Member No.: 21,479
Fredrick & Christian I forgot to add that I am relatively new to making web pages also. I actually look at someone else s code and made my changes. As far as centering I tried putting the <center></center> both at the very begining and the end as well as in front of and behind where the pictures actually start. I am in the process of trying to get all of the pictures the same size as I know it currently looks horrible lol. Just have some difficulty finding a good free program to resize the mall the same. As far as DOCTYPE and a TITLE please forgive me but I'm clueless






<body><center>
<a href="java script:gotoshow()"><img src="http://princesspartiespgh.com/Pics/img1.jpg" name="slide" border=0 ></a> <!--Change the name of the first pic which is here "sunflower.png"-->
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("http://princesspartiespgh.com/Pics/img1.jpg","http://princesspartiespgh.com/Pics/img2.jpg","http://princesspartiespgh.com/Pics/img3.jpg","http://princesspartiespgh.com/Pics/img4.jpg","http://princesspartiespgh.com/Pics/img5.jpg","http://princesspartiespgh.com/Pics/img6.jpg","http://princesspartiespgh.com/Pics/img7.jpg","http://princesspartiespgh.com/Pics/img8.jpg","http://princesspartiespgh.com/Pics/img9.jpg","http://princesspartiespgh.com/Pics/img10.jpg")
slideshowlinks("http://princesspartiespgh.com","http://princesspartiespgh.com","http://princesspartiespgh.com")</center>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 30 2014, 02:55 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
QUOTE(Cobra @ Aug 30 2014, 09:39 PM) *

<body><center>
<a href="java script:gotoshow()"><img src="http://princesspartiespgh.com/Pics/img1.jpg" name="slide" border=0 ></a> <!--Change the name of the first pic which is here "sunflower.png"-->
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("http://princesspartiespgh.com/Pics/img1.jpg","http://princesspartiespgh.com/Pics/img2.jpg","http://princesspartiespgh.com/Pics/img3.jpg","http://princesspartiespgh.com/Pics/img4.jpg","http://princesspartiespgh.com/Pics/img5.jpg","http://princesspartiespgh.com/Pics/img6.jpg","http://princesspartiespgh.com/Pics/img7.jpg","http://princesspartiespgh.com/Pics/img8.jpg","http://princesspartiespgh.com/Pics/img9.jpg","http://princesspartiespgh.com/Pics/img10.jpg")
slideshowlinks("http://princesspartiespgh.com","http://princesspartiespgh.com","http://princesspartiespgh.com")</center>

The <center> start tag seems OK, but you can't put the </center> end tag in the middle of the script. I'd put it after the link's </a> end tag, or after the </script> end tag.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Cobra
post Aug 30 2014, 03:10 PM
Post #7





Group: Members
Posts: 3
Joined: 29-August 14
Member No.: 21,479
QUOTE(Christian J @ Aug 30 2014, 03:55 PM) *

The <center> start tag seems OK, but you can't put the </center> end tag in the middle of the script. I'd put it after the link's </a> end tag, or after the </script> end tag.



Thank you, that seemed to work nicely.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 30 2014, 04:28 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
QUOTE(Cobra @ Aug 30 2014, 09:39 PM) *

As far as DOCTYPE and a TITLE please forgive me but I'm clueless

The purpose of Doctypes (there are many different ones) is explained here: http://htmlhelp.com/faq/html/basics.html#doctype . For a beginner I suggest starting with this one:

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Here's a sample HTML document that shows where to put both the Doctype (the example uses another one, with terser HTML syntax rules) and TITLE: http://www.htmlhelp.com/reference/html40/structure.html#doc
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 31 2014, 03:19 AM
Post #9


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You could download Gimp, a free graphic editor, to resize your images. Get it at http://www.gimp.org .

BTW, the <center> tag is deprecated in favour of stylesheets. See http://htmlhelp.com/reference/html40/block/center.html .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 06:12 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC