can javascript be in tableless page... (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Lazykatz -> can javascript be in tableless page... (3/26/2005 3:19:12)

Hi all,

I resently posted several issues in need of assistance with.
http://www.frontpagewebmaster.com/m-259009/tm.htm

javascript:
I managed to get it to position, it looked ok in all browsers on desktop, but when moved to server, it all went bonkers again. It does work like a news ticker, but it shows all content as a page, hiding most due hiding overflow in #Div, and in all browsers, something else changes, usually the fonts of page.
http://fpwm.lazykatz.com/blue/new_page_4a.htm

After numberous edits to the page and CSS to no prevail, I used an i-frame.[:'(][:(][:@] Opera still reduces font in that cell, but is livalbe because it use to destroy everything on page.
http://fpwm.lazykatz.com/blue/new_page_44.htm

I-frame may have been a resolution, I don't/didn't want to use because my current site, http://lazykatz.com, has multiple i-frames, goal was to eliminate them, so I am still looking for a way to do this with CSS if there is a way to do so.

Thankz in Advanze,
Grizz [8D]



Giomanach -> RE: can javascript be in tableless page... (3/26/2005 20:02:33)

Grizz

In answer to the initial question - Yes you can use JavaScript on a tableless page. JS can be applied to any web page, as long as it is done correctly and effectively. You can't just throw it in "as is" and expect it to work. The simple reason being most JS scripts these days are written for IE.

To the pages:

4a.htm

IMO you have far too many DIVs on the page which will, in the end, cause you no end of problems. This page also does not validate in either HTML or CSS - I would sort those before looking any further into the coding of it.

At the bottom of this page you have a Valid CSS button that's not relevant to the page? You should really remove that and not replace it until the page does validate.

You have a grand total of 61 DIVs and a serious case of ID syndrome and Classitis, I'm not really sure you need all of those IDs and classes applying, you could also cut down on the number of DIVs used. There is also no need for the spacer DIVs that you have, they can be replaced with additional padding/margins.

If you cut down on the number of DIVs and reduce the number of Classes & IDs on this page, you should see an improvement on the layout, and parsing time.

With the news ticker/JS marquee; they never have been designed to work well with Gecko browsers, and you have two main flaws with your coding on these. You are defining an exact JS language for the Gecko engine to parse, this causes no end of problems. You also have not declared what type of coding/script it is. The language attribute is for the older browsers to parse the JS without a hitch and should always be filled with the content of JavaScript - you don't need the 1.2 or whatever version number. You also need to apply type="text/javascript" for the newer browsers (especially FF, MZ, OP, NN) to parse it, otherwise, it will either be ignored or parsed incorrectly, which is happening to you right now.

44.htm

This page doesn't even have a DTD. You are using XHTML, and you haven't closed off all the tags - this will cause a parsing problem with XHTML, and needs to be corrected. The CSS on this page does not validate at all due to the non-valid XHTML coding. You can view the validation pages via the w3c validators.

This is the page with the iFrame, and it fails the validation process with flying colours. No DTD, no character set, no type attribute on the JS, no quotes round the border/background color, therefore rendering it as black. No title element on this page. The list goes on with just the iFrame, and that will also fail the validation. Also I would love to know where you managed to learn JavaScript1.3?

If you want it to really work, try applying the method you used in the iFrame to 4a.htm - it might just work then.

JS, CSS & HTML will all work in harmony if used correctly, and effectively. The changes in browser are usually due to messy coding, too much coding, bad coding, or just plain ignorance from the web editor. Here I am only offering advice on what to do, and how I would code the page.

And as a request, can you please type in normal English and spell correctly. Ex-plorer is a nonexistent program, it is spelled as Explorer, i-frames is iFrames and Advanze is advance.

Dan



d a v e -> RE: can javascript be in tableless page... (3/27/2005 2:14:53)

good advice Dan! ...particularly the bit about speeling ;)



Lazykatz -> RE: can javascript be in tableless page... (3/27/2005 6:37:00)

Thanks Giomanach,

Since posting, I was doing editing in cpanel, got frustrated and left it all a mess without putting back the previous code, I apologize. The page has changed, and everything does validate except the iframe. I'll bring it up to validate if I can't get the javascript to work on page without it.

css validates:
http://jigsaw.w3.org/css-validator/validator?uri=http://fpwm.lazykatz.com/blue/new_page_44.htm

xhtml validates:
http://validator.w3.org/check?uri=http%3A%2F%2Ffpwm.lazykatz.com%2Fblue%2Fnew_page_44.htm

quote:

If you want it to really work, try applying the method you used in the iFrame to 4a.htm - it might just work then.
The iframe page is created with tables, I did try to add tables to page, looked fine on desktop, but went back to screwing page up the same way as before when I put it on server. I also tried using tables with current validated page, .44htm, and it went bonkers the same as .4a did. So I put iframe back. I am trying to go tableless and frameless. Page 4a.htm is just an example of what the javascript does to the page. It does not validate.

quote:

If you cut down on the number of DIVs and reduce the number of Classes & IDs on this page, you should see an improvement on the layout, and parsing time.
I tried to use .classes in right column, but the only way I could get the positioning to work was to #div them multiple times and position 140 190 etc.. from top. The same gif is used thoughout the page in .spacer, #spacer, .ttl,h3, #topbar ..etc, but with different sizes in the id and classes. I'm new to css and I know to try to keep coding to a minimum, but it just seems to never work right without adding more. If you or anyone else can help or suggest how to cut coding down, I would appreciated it greatly.

quote:

With the news ticker/JS marquee; ........know where you managed to learn JavaScript1.3?
The javascript in question, is how do I say this, I do not have the script, it is/comes from another site, http://codeamber.org, like an xml feed. I have no control over it eccept placing code in page. I wish I knew how to create any type of javascript.. lol

quote:

And as a request, can you please type in normal English
Just trying to be humorous, i-frame is spelled like that in my tutorials, thought it was right. I'd have to agree with this one, Ex-plorer is a nonexistent program, in more ways than anyone can count.

All kidding aside, can the javascript in question be put into a tableless and frameless page.

Grizz [8D]



caz -> RE: can javascript be in tableless page... (3/27/2005 6:50:31)

quote:

JS, CSS & HTML will all work in harmony if used correctly, and effectively. The changes in browser are usually due to messy coding, too much coding, bad coding, or just plain ignorance from the web editor.


If you are taking in a feed type of thing you can usually adjust it to fit your page and validate at the same time. It may be that you are trying to run before you can walk, Grizz; Dan offered some good advice- my advice is to take it and troubleshoot your existing pages to reduce the CSS coding to sensible level. Start with the nested divs maybe?

Carol



Lazykatz -> RE: can javascript be in tableless page... (3/28/2005 20:23:12)

quote:

If you are taking in a feed type of thing you can usually adjust it to fit your page and validate at the same time. It may be that you are trying to run before you can walk
I can edit it to fit, have tried for 2 weeks editing, reading, and trial/error to get it to work on page without table or inline.

Here is the script.. nothing to it ..
<SCRIPT LANGUAGE="JavaScript1.3" src="http://www.codeamber.com/js/codea.js"></script>

Run before I can walk... a turtle has a 10 mile lead.. going on 3 months and still don't have a single page of 600+ worth publishing. I'll bite my tounge on what else is on my mind.



Giomanach -> RE: can javascript be in tableless page... (3/29/2005 12:45:56)

quote:

<SCRIPT LANGUAGE="JavaScript1.3" src="http://www.codeamber.com/js/codea.js"></script>

Try this:

<script language="JavaScript" type="text/javascript" src="http://www.codeamber.com/js/codea.js"></script>

If you had read my post correctly in the first place, I wouldn't be spoon feeding it to you right now.[X(]



caz -> RE: can javascript be in tableless page... (3/29/2005 13:12:36)

quote:

SCRIPT LANGUAGE="JavaScript1.3


If you look at the url you gave, you will find the script and tags well formed and it is 1.2, but you don't put the version number because that will cause problems.



Lazykatz -> RE: can javascript be in tableless page... (3/29/2005 20:31:00)

quote:

If you had read my post correctly in the first place, I wouldn't be spoon feeding it to you right now.
I read your post correctly and had already tried it before posting.

I used/copied validated page above...

I used the script but removed the version by itself..
http://fpwm.lazykatz.com/blue/new_page_44b.htm
ticker effect works, but it is working/showing as an entire page scroll instead of single line marquette. Explorer shows what happens the best, and Opera simply puts it on page as stationary text.

then I tried putting script inside its own div (#am at bottom of stlyesheet)..
http://fpwm.lazykatz.com/blue/new_page_44c.htm
same results but Opera did put it in the div, but with a 20px red border, the script only has 1px border, and only shows in Opera and explorer.

I have tried using inline css div, but it also did same as above and then I found out even if it did work, the hyperlink would not have worked without modifying it somehow. Even with the version number, it doesn't matter, same results with 1.1, 1.2, 1.3. I have tried everything I know of and then some.

quote:

If you look at the url you gave, you will find the script and tags well formed and it is 1.2
I contacted them to see if I could get a script with blue borders to match site. They sent me 1.3, it still has red border, and they will consider offering different styles. Using well formed literally destroys page.

As for div count in stylesheet.. there is some there that are not in page. They are there basically for notes to help this noobie edit other divs.

Grizz



Giomanach -> RE: can javascript be in tableless page... (3/30/2005 13:01:05)

quote:

I read your post correctly and had already tried it before posting.

You can't have done. If you had, you would have read and understood that:

1) JavaScript 1.3 DOES NOT EXIST as a standard form of JS
2) You NEED the type attribute on the <script> tag

quote:

Explorer shows what happens the best, and Opera simply puts it on page as stationary text.

Would that be Windows Explorer or Internet Explorer.

Opera is displaying the page correctly.

I'm going to be really nice here, and show you the JavaScript that controls the news ticker...

The JS file you are linking to: 

<!-- Begin
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) 	{
document.write('<SCRIPT LANGUAGE="JavaScript1.2" src="http://www.codeamber.com/js/iecodea.js"></script>');
    		}
	    else {
document.write('<SCRIPT LANGUAGE="JavaScript1.2" src="http://www.codeamber.com/js/nscodea.js"></script>');
		}
// end -->


The JS file pulled: 
<!-- Begin

/*
Cross browser Marquee script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.com
Credit MUST stay intact
*/
var marqueewidth="460px"
var marqueeheight="20px"
var marqueespeed=2
var marqueebgcolor="#F7F7F7"
var pauseit=1
var onetime="yes"
var oneint=35

var marqueecontent='<nobr><a href=http://www.codeamber.org/?tck target="_blank" style="text-decoration:none;"><FONT SIZE=2 COLOR="#0080C0" FACE="VERDANA,ARIAL">This is the Code Amber </FONT><FONT SIZE=2 COLOR="#FF8000" FACE="VERDANA,ARIAL"><B>Amber Alert Ticker:</B></FONT><font face=verdana,arial size=2 color="#000000"> During an active AMBER Alert the ticker changes to a yellow background and provides details of the abduction. <U><B>Click Here</B></U>  to learn more about the AMBER Alert system and to add this ticker to your Web Site and your computer desktop, you could save a life. </a></FONT><a href=http://www.codeamber.org/get_wireless.html?tck target="_blank" style="text-decoration:none;"><font SIZE=2 color="#0080C0" face="VERDANA,ARIAL">New! Click here to receive Amber Alerts on your cell phone. </font></a><a href=http://www.codeamber.org/idkits.html?tck target="_blank" style="text-decoration:none;"><font SIZE=2 color="#0080C0" face="VERDANA,ARIAL">Protect your family with the Code Amber Digital ID System. </font></a> <a href=http://codeamber.org/support.html?tck target="_blank" style="text-decoration:none;">Code Amber is a free service funded by our supporters and sponsors. </a></nobr>'

////NO NEED TO EDIT BELOW THIS LINE////////////
//marqueespeed=(document.all)? marqueespeed : Math.max(1, marqueespeed-1) //slow speed down by 1 for NS
var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom) {
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee
}

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
}
else if (document.layers){
ns_marquee=document.ns_marquee.document.ns_marquee2
ns_marquee.left=parseInt(marqueewidth)+8
ns_marquee.document.write(marqueecontent)
ns_marquee.document.close()
actualwidth=ns_marquee.document.width
}
lefttime=setInterval("scrollmarquee()",oneint)
}

if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) 	{
window.onfocus=populate
    		}
	    else {
window.onload=populate
		}


function scrollmarquee(){
oneint=0
if (iedom){
if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else
cross_marquee.style.left=parseInt(marqueewidth)+8+"px"

}
else if (document.layers){
if (ns_marquee.left>(actualwidth*(-1)+8))
ns_marquee.left-=copyspeed
else
ns_marquee.left=parseInt(marqueewidth)+8
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+marqueewidth+' height='+marqueeheight+' name="ns_marquee" bgColor='+marqueebgcolor+'>')
write('<layer name="ns_marquee2" left=0 top=0 onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed"></layer>')
write('</ilayer>')
}
}
document.write('</td></table>')

}
// end -->

quote:

I have tried using inline css div, but it also did same as above and then I found out even if it did work, the hyperlink would not have worked without modifying it somehow. Even with the version number, it doesn't matter, same results with 1.1, 1.2, 1.3. I have tried everything I know of and then some.

You don't need those! Again, If you read my post, you would already know that.

Read and take heed.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375