Forum Moderators: open
McDonalds in Seattle [google.com]
Notice how the businesses make a long list, so they are embedded in an <iframe> (or so I think from a brief glance at the code).
Is it possible implement this design pattern without using frames at all? I'm interested in the SEO friendliness of pages, and in general iframes are considered as separate entities. I'd like the content of the stuff within the scrollbar to be associated with the visible URL in the address bar. Any cute examples of Javascript or CSS tricks? I can't use Flash either.
Thanks,
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>example</title>
<style type="text/css">
div.example {
height: 200px;
overflow: auto;
width: 200px;
}
</style>
</head><body>
<div class="example">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
</div>
</body>
</html>
You must have a percentage or pixel set height and width along with overflow or use positioning (position, top, right, bottom, left). The value "auto" is the only value that does not create a horizontal scrollbar.
Notes: Using this in IE 6.0 and earlier requires JavaScript to actually get it to work with positioning. In which case you would use serverside coding to serve this for IE 6.0 and lower...
Opening...
<script type="text/javascript">
//<![CDATA[
function changeStyle()
{ document.getElementById("DivBody").style.height = document.body.clientHeight-10;
document.getElementById("DivBody").style.width = document.body.clientWidth-10;
}
document.writeln('<div class="bodyie" id="DivBody">'); changeStyle();
////]]>
</script>
<noscript><div></div></noscript>
Closing...
<script type="text/javascript">//<![CDATA[document.writeln('</div>');\/\/\/\/]]></script><noscript><div></div></noscript>
Related CSS...
div.bodyie {
background-color: #ccf;
border: #fff solid;
border-width: 52px 1px 1px 1px;
bottom: 5px;
left: 5px;
margin: 0px;
overflow: auto;
padding: 1px 2px 1px 2px;
position: absolute;
right: 5px;
top: 5px;
z-index: 1;
}
Hope this helps.
- John
I don't think that's quite accurate... I've seen overflow:auto create a horizontal scrollbar if the content is wider than its container, just as it will create a vertical scrollbar if the content is too tall. Also, I'm pretty sure I've seen that property work as expected in IE6, without the need to involve Javascript.
Using this in IE 6.0 and earlier requires JavaScript to actually get it to work with positioning.
So yes if you're using positioning in IE you DO need to use JavaScript but not if you're using height and width.
Of course too much horizontal spacing will create a horizontal scrollbar. The point was it was the only option that won't do so if you don't already have that horizontal spacing to begin with.
- John
*sighs*
