PDA

View Full Version : Feature Content Glider: Did I Screw Up The Code?



David Henson
12-16-2011, 03:54 PM
1) Script Title: Feature Content Glider

2) Script URL (on DD): Feature Content Glider (http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm)

3) Describe problem: I think I must have screwed up the code.

My Page (http://thetheist.webs.com/indextext.html)

I checked the script demo here and it was fine on the computer I am having the problem with on my site.

Also on my 1st PC using Firefox with a resolution of 1280x720 it is fine.

On my 2nd PC using IE8 with a resolution of 1024x768 my page the content of the Glider comes up half hidden.

My CSS (http://thetheist.webs.com/css/featuredcontentglider.css)


<center><script type="text/javascript">

featuredcontentglider.init({
gliderid: "introduction", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: false, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

David Henson
12-17-2011, 01:38 AM
Your skilled assistance would be greatly appreciated. Your work is profoundly awesome to the unskilled such as myself in creating websites we can only imagine.

ddadmin
12-17-2011, 10:51 AM
Hmm try adding a doctype to the top of your page to start:


<!DOCTYPE HTML>

djr33
12-17-2011, 11:12 AM
1. The tag that ddadmin mentions needs to go at the VERY beginning, before <html>.

2. You have a <center> tag before the <script> block, and that is never closed anywhere. You should either remove it or find where you need to add the </center> close tag.

HTML-formatting errors like this will be caught by the validator:
http://validator.w3.org/

Also, some of your code is not standard. <center> is an outdated tag and should be replaced by a <div> with CSS styling that can center the contents. It may behave oddly in different browsers. I haven't looked through everything, but if there is anything else like that it might be an issue too.

Are you writing this code by hand or are you using a program (a "WYWIWYG" program, or "preview-based editor")? If you're using a program, I recommend that you at least start watching the code it generates-- programs like that often generate odd code, and sometimes make mistakes. In the future when you have time, writing the code by hand will result in better pages. Computers just aren't smart enough to write code that works really well. It's passable, but not great.

None of this is meant to sound harsh-- welcome to the website and to web designing, since it looks like you're new to this. There's plenty of time to learn (and we've all been there).

David Henson
12-17-2011, 05:52 PM
1. The tag that ddadmin mentions needs to go at the VERY beginning, before <html>.

I did that and it seems to have messed everything up. I haven't changed anything else and now a portion of the block of text I have within the glider isn't visible. That is easy enough to fix, I will just shorten the text adding the remainder to the next panel.

Also on my other PC the glider box itself is now too big and I have to subtract the width to prevent the need of a horizontal scroll. Also easy to fix.


2. You have a <center> tag before the <script> block, and that is never closed anywhere. You should either remove it or find where you need to add the </center> close tag.

The center tag was closed, at the end of the script after the toggle. I want a very simple design, with my logo at the top and an image on one page and the next page is the text in the glider, so all I did was put the code for the glider within the center tags where the image had been.


HTML-formatting errors like this will be caught by the validator:
http://validator.w3.org/

Also, some of your code is not standard. <center> is an outdated tag and should be replaced by a <div> with CSS styling that can center the contents. It may behave oddly in different browsers. I haven't looked through everything, but if there is anything else like that it might be an issue too.

I don't typically like the results of a validator, it often prevents me from using code that is supported by all browsers and works but for some reason isn't "cool" to people who know code. I never have understood that because the center tag, for example works so why would I go to the trouble of adding complicated CSS when a simple center tag works.

If there is some CSS that I could add to center the glider box I could do that though, if there is a real problem with the center tag. Give me the code and I will try it.


Are you writing this code by hand or are you using a program (a "WYWIWYG" program, or "preview-based editor")? If you're using a program, I recommend that you at least start watching the code it generates-- programs like that often generate odd code, and sometimes make mistakes. In the future when you have time, writing the code by hand will result in better pages. Computers just aren't smart enough to write code that works really well. It's passable, but not great.

I agree with you there. I have always done the coding by hand. But most of the coding is from DD. Otherwise all I have is simple background and a logo.


None of this is meant to sound harsh-- welcome to the website and to web designing, since it looks like you're new to this. There's plenty of time to learn (and we've all been there).

Thanks. I've been doing this for about 20 years. Since about 1996, but I'm no code buff. I just rig it for my own use. Whatever produces the results I want as browser friendly as I can.

djr33
12-17-2011, 09:06 PM
I generally agree with "whatever works". And the validator is annoying. But it is useful in that it guarantees standard code. There may very well be other things that also could be valid, but if the validator says it is valid, then it's good code and should work in all browsers. Of course there are exceptions, but generally if there's an error and there's no harm in fixing it (very rarely is there a reason to avoid fixing it except time), then it will either not change your page or improve it.

A doctype must go at the beginning of a page. All valid pages need one (even if you don't care about the details of the validator), or the browsers will have to guess what kind of code you're using-- the opposite of standards. The particular doctype you use (eg, HTML 5 [as above], or HTML5, XHTML) is up to you, and they WILL have different results.

Not using a doctype can give the impression that a certain kind of code works in all (most) browsers, but once you actually tell them to use a specific format (via a doctype), then some things won't work any more. It may seem backwards to use a doctype then, but it is a good idea.

The easiest solution to this is possibly to try out a few doctypes until you find one that works nicely. HTML 4 transitional is probably going to be the closest to what you have.


Note: even if you don't like all of the notifications from the validator, it is important to use it so that you know what the "errors" are-- if you ignore them, then you should have a reason for doing so (and there ARE some legitimate reasons once in a while). Most importantly, it will catch anything like any tags left open. From my quick visual scan of your page I didn't see a close tag for that <center> block, but the validator could check that for sure easily.

jscheuer1
12-18-2011, 01:20 PM
Perhaps you just need to clear the browser's cache and/or refresh the page because it looks fine to me in IE 8 at 1024x768 except that the bottom half of the page (including sometimes the:


| Cover | Prologue | Lyceum |

menu) is not in view and cannot be scrolled into view because of:


<style type="text/css">
<!--
body { overflow:hidden; }
-->
</style>

in the head of the page. Get rid of that.

I see another problem. In all IE and in Google Chrome, probably others, once the video is seen it cannot be covered by the other content. To fix that in those browsers mentioned add the wmode=opaque parameter highlighted in the below to the video query string:


. . .
Raymond Sheen was an android who lived on the space station Laurasia. In human form he had been the great, great, great grandson of Christian Lehrer, who’s family would have a great deal to do with the global revolution. Our story, then, begins with him. In a revolution much earlier. The revolution of the German States known as the March Revolution in 1848.</font></p></div>

<div class="glidecontent">

<iframe width="880" height="400" src="http://www.youtube.com/embed/4Z9WVZddH9w?rel=0&amp;wmode=opaque" frameborder="0" allowfullscreen></iframe></div>

</div>

<div id="p-select" class="glidecontenttoggler">
| <a href="#" class="toc" title="Int . . .