HTML Geniouses?

[flatmatt]

Hey, does anyone know code to allow vertical scrollbar but not allow horizontal scrollbar?

[Devil dud]

Put this in your body tag.......

Scroll=vertical


Simple no?

[flatmatt]

Hmmmm, nothing. Horizontal bar still shows.

The other alternative is, does anyone know how to make an image take up the full space between the left side of the window and the right scroll bar without going over? If I try width=100%, it still doesn't take up the whole width.

Here's my stolen-from-Geocities-PageBuilder HTML for the header of the new flatmatt.com, it's 1024 wide, but this allows people to scroll right into nothingness.

code:


<div id="layer2" style="position:absolute;left:0;top:0;width:1024;height:50;">

<table width=100% height=50 border=0 cellpadding=0 cellspacing=0 background="header.png">

<tr valign="top">

	<td></td>

</tr></table></div>

[Forevever]

Originally posted at www.htmlgoodies.com
scrollbars are part of the Web and differing screen sizes make it nil to impossible to never attain a scroll bar.

If you don't mind getting rid of all of the scroll bar - you could choose a solid background color and use the following style sheet

<STYLE type=text/css>BODY {
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000
}
</STYLE>

this is based on a black background and should make the entire bar itself black and not show up - example

but if you click where the scroll bar should be, it should still scroll down

[The Only Lynx]

i dont know how flatmatt, sorry

[Mr. Bojanglez]

its not what forever said, i know that

[flatmatt]

The thing is, I know how to get rid of both scrollbars (Thanks Jones), but I need to get rid of horizontal while leaving vertical.

Argh...

Options, with problems:

- Leave as is
Prob: Horiz. scrollbar

- Change to width = 100%
Prob: Doesn't fill whole width

- Frames
Prob: Would have to use pop-up ads instead of page-top ads. Darn Angelfire.

- Change title display
Prob: I don't want to.

Dang.

[edit]Wait, idea, I'll try tomorrow and get back to you guys.[/edit]

[skinme!]

It's not possible.

Ideas

-: popup window set to 100x700 (or whatever) you control size so you can build for it

-: javascript scrolling w/ scrollbars=no (you'd have to find the script) try wsabstract.com USENET etc.

-: Get a different host... Who do you use to dialup? I bet they offer free webspace, w/o ads, and with other cool stuff.

[skinme!]

When you set it to 100% width did you set margins to 0? If ntot try again, and add the following to the body tag:

code:
LEFTMARGIN="0" MARGINWIDTH="0"

TOPMARGIN="0" MARGINHEIGHT="0"

You can do this is in CSS if you want. Just add the following to the CSS code for the BODY tag:

code:
margins: 0px;

[marc falk]

try using this:

*****

<div id="Layer1" style="position:absolute; left:0px; top:x%; width:100%; height:xpx; z-index:1; overflow: hidden">
<img src="x" width="x" height="x">
</div>

*****

<plug mode>taken from my website</plug mode>

i'm not sure how you could do the scrollbar thing without losing both...

fsnl
marc

eo: Alicia Keys - Falling

[bobo]

i dont think its possible. get rid of all the scrollbars and then use some javascript to scroll instead perhaps

[flatmatt]

skinme! You're a genious! The margins worked perfectly! Thank you very much, now that I've got that layer sized horizontally to exactly the whole window, it's great! Not only that, but the vertical margin code makes it so I don't have to use a spacer.gif. One thing: I feel dumb, but what is this CSS?

Thanks to everyone else for trying, too.

In case you were confused, the issue with the scrollbar was that the header layer ran off the right of the page, causing the horizontal scrollbar to show up. Now that nothing goes to the right of the page, it doesn't show up.

[PeaceMaker]

CSS = Cascading Style Sheet = used in htm/l documents to save you time changing the colour/style/font/size etc of paragraphs, headings and other elements commonly seen in these pages.
You can set mutiple htm/l files to one CSS of all the headings/ body and whatever you want changed instead of doing it manually for each html file.. which becomes tedious if you have a large amount.
There are programs to create the "x.css" files with..

check out: http://www.w3.org/Style/css
for current development.

[skinme!]

It's a seperate technology to HTML that integrates with it like um, say OREOs and MILK, WINAMP and SKINS, etc.

It is a way of setting the default style of the document, and creating styles for certain classes or ids. You could set all text to be red and size 15pt except anything in a DIV tag with a class of "momma" which could be size 36pt. You dig?

Cool new stuff happening in CSS2 - the ability to control how your page prints, setting how it is read in in browsers for the blind, and lots more.

It is a technology to take HTML into media where it was before unsuitable, printed and voice, for example.

But it's damn nifty at setting margins, scrollbar colours (IE5+ only), etc.

[Nini]

It's cool, but Netscape 4 is with css
(what's a general css browser interpretation problem - you'll never use all these cool functions....or maybe some day...?)

[Mr. Bojanglez]

nini, whats thatin your avatar?

[garetjax]

within netscape use javascript/css as your type declaration...

example: <style type="text/javascript"></style>
by default the interpretation by the DOM is <style type="text/css"></script>. Using the above declaration it will force a Netscape browser to load an alternate setting for the DOM (the javascript interpreter rather than the standard settings. This scenario would allow the netscape browser to use and include the functions that IE alread supports natively.)

Understandly the javascript/css method may require you to identify the 'elements' by name rather than by simple declare. Meaning <div id="dumb"></div> would have to be declared by the following:

document.body.dumb.[something]

Joe G.

added:

There is another way here that will allow you to embed other documents with the current & active page as follows:
<object type="text/x-scriptlet" width=100% height=140 data="includes/header.shtml"></object>

This will allow you to embed within the page another page. The benefit here is the page is considered a scriptlet and is not interpreted for elements etc...so, style declrations defined from within your page will effect the embedded page or so I think...heh.



for your example a good use would be to do the following

instead of:
<div id="layer2" style="position:absolute;left:0;top:0;width:1024;height:50;">
<table width=100% height=50 border=0 cellpadding=0 cellspacing=0 background="header.png">
<tr valign="top">
<td></td>
</tr></table></div>

do the following
(also note to have the margins set to 0 on the main/sub page).
<object vspace="0" hspace="0" type="text/x-scriptlet" width=100% height=140 data="image.html"></object>

**Note: THe object height="" will need to be set to the exact pixel width of the image. ie 140 in the example above.

the page would be as follows:
<img height="140" width="1024" src="someimage.png">

[skinme!]

Sorry, Jax. Regarding the embedding the image as an object, could you please explain the advantages? I'm not sure I quite understood what you were getting at. Thanks

[Digipak]

Originally posted by Mr. Bojanglez
nini, whats thatin your avatar?

Well, I wasn't asked, but I'll answer anyway....

That is Galadriel, Lady of Lothlorien, from LOTR. She is played by Cate Blanchett.

[Neko]

this might help

code:








// magtt, change this to whereever you place the java .class files

//----------------------------------------------------------------

<script language="JavaScript" src="dhtmllib.js"></script>

          <script language="JavaScript" src="scroller.js"></script>

          <script language="JavaScript">

// ---------------------------------------------------------------

var myScroller1 = new Scroller(0, 0, 400, 17, 0, 0);

myScroller1.setColors("#333333", "#B4CDCA", "#B4CDCA");

myScroller1.setFont("Verdana,Arial,Helvetica", 1);

//-------------------vert text/links------------------------------

myScroller1.addItem("<b>look linktext! click <a href='http://www.winamp.com/' target='blank'>here</a> now!</b>");

myScroller1.addItem("<b>look, more linktext, click <a href='http://www.deviantart.com' target='blank'>here</a> now!</b>");

myScroller1.addItem("<b>bah, more links <a href='http://www.winamp.com/components/detail.jhtml?componentId=81199' target='blank'>here 6</a></b>");

myScroller1.addItem("<b>Customise your windowz now at <a href='http://customize.org' target='blank'>Customize.org!</a></b>");

//--------code----------------------------------------------------

function runmikescroll() {



  var layer;

  var mikex, mikey;



  // Locate placeholder layer so we can use it to position the scrollers.



  layer = getLayer("placeholder");

  mikex = getPageLeft(layer);

  mikey = getPageTop(layer);



  // Create the first scroller and position it.



  myScroller1.create();

  myScroller1.hide();

  myScroller1.moveTo(mikex, mikey);

  myScroller1.setzIndex(100);

  myScroller1.show();

}



window.onload=runmikescroll

window.onLoad=show_clock()

</script>

[flatmatt]

Hmmmm, perhaps I didn't make myself clear.

It's done!

http://www.flatmatt.com

[skinme!]

YAY! I WIN! I WIN! I'M THE HTML GENIOUS!

Nah, only joking, although my solution worked best, it is damn easy overlook the simple things,like setting the margins, pluging the computer in, getting up in the morning, going to sleep at night, etc.

[flatmatt]

Not quite an oversight; never heard of that HTML before, hehe.

[garetjax]

Element: <object>
Start tag: required
End tag: required
Attributes: declare, classid, codebase,
data, type, codetype, archive, standby,
height, width, usemap, border, hspace,
vspace. id, class, lang, title, style,
onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown,
onkeyup

<object> is used to embed objects within a document. The object could need an application to render it or the user agent might already be able to do so. Attributes are declare, classid, codebase, data, type, codetype, archive, standby, height, width, usemap, border, hspace, vspace.

declare makes the object a declaration. classid is used to specify the location of the objects data. codebase specifies the base URL for classid, archive, and data. data is used to specify the location of the objects data. type specifies the type of data. codetype specifies the objects data type. archive specifies a URL to information on the object. standby specifies a message that the user agent should display until the object renders. height sets the height of the object. width sets the width of the object. usemap is used for client side imagemaps. border sets the border around the object. hspace sets the horizontal space around the object. vspace sets the vertical space around the object.

Optionally,

<iframe frameborder="0" scrolling="No" src="content.html">
<ilayer src="content.html">
Sorry, your browser does not support the iframe or ilayer tags,
which are required for this section of the page to be visible.
</ilayer>
</iframe>


The advantages are as follows:

The object tag is reserved as a plugin tag. Meaning it is supported by both browsers and styles are applied to embedded objects. (nested doc's).

In the second example two tags are replacing the 1 tag needed in my first example to do the same thing in both browsers. Basically, using SSI (Server Side Includes) without the server being setup for it.

The two methods actuallly are used when you would like to use one of the following however, server limitations do not allow it:

<!--#include file="someimage.html"-->
<!--#include virtual="script/somescript.js"-->

The real advantage here is that by using the any of the above you can of course use a single file to be for example a header file. (ie the navigation on top or left of your screen). Having no need for many copies of the same code for each page you lessen the load to the client by not having to send the client a new copy of every page. Rather, you use what they have already cached locally.