Iframe and sprys

HTML & CSS
1

Hello to everybody,
I have to create a menu tied with some content on a single page (not load new page on every single link). The result that I need is similar to Olives .
The problem is that I don’t want to use sprys menus. The reason is that if I scroll to the bottom of tab 1, then select tab 2, the scrollbar remains at the bottom (or wherever it was last positioned on tab 1. You can see the problem on Olives .

So I came up with the following:
Index.html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>any</title>

<style type="text/css">
body {
    height: 1200px;
    padding: 0px;
    background: #ffffff;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#e6f3ea), to(#ffffff)) no-repeat;
    background: -moz-linear-gradient(top, #e6f3ea, #ffffff 100%) no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6f3ea', endColorstr='#ffffff',GradientType=0);
    background-image: -o-linear-gradient(#e6f3ea, #ffffff 100%);
}

#menu {
    clear: none;
    float: left;
    margin-top: 40px;
    height: 320px;
    width: 160px;
    margin-left: auto;
    background-color: #667C26;
    
}
#menu a {
    height: 40px;
    width: 160px;
    display: block;
    text-decoration: none;
    color: #000;
    line-height: 40px;
    font-size: 16px;
    font-weight: 400;
    text-indent: 20px;
}

a:hover { 
    background: #e3fe03;
}


#menu a:focus {
    z-index: 900;
    background-image: url(images/button_selected.jpg);      
    background-repeat: no-repeat;
    outline: none;
}


body iframe {
    clear: none;
    float: left;
    width: 670px;
    height: 320px;
    margin-top: 40px;
    margin-left: 10px;
    overflow-x: hidden;
    background: #e6f3ea;
}
#content {
    height: auto;
    width: 850px;
    margin: 0px auto;
    padding: 0px;
    background: #e6f3ea;
}
</style>


</head>

<body>
<div id="content">
<div id="menu">
<a target="test2" href="olivegrove.html">Olive Grove</a>
<a target="test2" href="harvest.html">Harvest</a>
</div>

<iframe src="olivegrove.html" name="test2" frameborder="0"> </iframe> 
</div>

</body>
</html>

olivegrove.html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tata</title>
<link href="olivegrove.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
    background: #e6f3ea;
    margin: 0px auto;
    padding:0px;
}

#content {
    clear: none;
    float: left;
    width: 650px;
    height: 700px;
    background-color: #C60;
} 
</style>

</head>

<body>

<div id="content"></div>

</body>
</html>

harvest.html:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>papa</title>
<link href="olivegrove.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
    background: #e6f3ea;
    margin: 0px auto;
    padding:0px;
}

#content {
    clear: none;
    float: left;
    width: 650px;
    height: 700px;
    background-color: #C60;
} 
</style>


</head>

<body>

<div id="content"></div>

</body>
</html>

As you can see at the above code I can get the “hover” effect that I need and the “focus” effect but I want the “focus” to stay still –indicate to the visitor what tab she/he had selected- (to disable the previous and enable the next when and if clicked only, not disabled when I click anywhere in the page).

Any help will be appreciated.

Thank you in advance,
Tom

2

So basically, you WANT to break normal user navigation and prevent people from navigating to your articles directly, pretty much flushing accessibility and usability down the pipes?

There’s a REASON framesets went the way of the dodo. Do yourself a favor, don’t be afraid of page reloads, and write the site PROPERLY.

Either that and skip all the scripting for nothing, take a trip in the wayback machine to 1998, and build the site with framesets… as really that sounds like what it is you are trying to do…

… and is what makes that “olives” page absolutely ridiculously laughably bad. The laundry list of “how not to build a website” there is… I lack the words in polite company.

3

It’s better if you know not to be silent.
thank you

4

Hi anarchos78. Welcome to SitePoint. :slight_smile:

deathshadow60 can be a little blunt, but if you can get past that, he does have a lot of god points to make. Stuff like iframes and inline javascript are pretty outdated and not considered part of the canon of modern web design, so ds60 is doing you a favor by pointing that out.

There are other ways to avoid page reloads if you really don’t want this (though as ds60 says, it’s not a problem). For example, you could have all of the content on one page, but use JavaScript to hide sections; then you use a series of tabs to show and hide the content. ds60 will hate me for posting this link ( :x ), but here’s an example of what I meant:

Simple Tabs

At least with JavaScript off the page still works, and the links respond to keyboard navigation too.

5

thank you a lot,
have a nice day and sunny greetings from Greece,
Tom

6

That certainly does seem to sum up his self-opinion.

7

Oops :blush: I probably should fix that typo, but then your comment wouldn’t make sense. (When I say ‘fix that typo’, I mean by adding a capital G. :smiley: )

8
Off Topic:

Old computer joke – God, root, what is difference?

9

You’d be surprised, I’m not that adverse to it… know why? You posted why:

Then again, it does need 56k of javascript (jquery bloat) on a page that only has 3k of plaintext… to do something half a k of javascript could probably be handling if CSS was doing the gruntwork instead of scripting.

Which is the thing – with 3k of plaintext in the example, the max each page-load as separate pages should be is around 8k (probably more like 6k) – with everything else on the page being cached as external CSS and external scripts is a 6k page-load for all sub-pages past the first … REALLY so painful you have to pull stupid code tricks to avoid it?!?

You know, semantic markup allowing for separation of presentation from content minimizing how much stuff the sub-pages have to load… It’s called “leveraging caching models”

Of course if one is using 15k of presentational markup BEFORE you count the iframe because it’s got classes, ID’s, DIV’s and SPAN around EVERYTHING for no good reason with nothing even remotely RESEMBLING semantic markup (much less valid working markup), presentational images in the markup, inlined scripting doing target and frameset’s job… YMMV.

10

Yes, it’s a hopeless equation. The only way I can think of justifying jQ is that it may have lots of other uses on a page/site, meaning that the download was not just for one little set of tabs. Grabbing jQ from Google also helps with speed and caching, too.

Which is the thing – with 3k of plaintext in the example, the max each page-load as separate pages should be is around 8k (probably more like 6k) … REALLY so painful you have to pull stupid code tricks to avoid it?!?

Yes, there’s not much to say against having a few page loads. Although, with content like in the OP’s example, I’d still be tempted to put it all on one page and break up the content with headings. I prefer one long page than having to click to go to new pages. (I’ve set SP to display the max 200 posts in each thread, for example.) Whether it’s broken up with tabs or not isn’t really important to me. I’ve only used that script I posted once for someone who insisted on it. In his case, it did make things neater just to display information on a state-by-state basis, but the info was part of a larger page, so it didn’t really work to have it spread across pages.