SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    iframe and sprys

    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:
    Code:
    <!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:
    Code:
    <!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:
    Code:
    <!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
    Last edited by Paul O'B; May 2, 2011 at 06:08. Reason: code tags added

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anarchos78 View Post
    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).
    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. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    It's better if you know not to be silent.
    thank you

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi anarchos78. Welcome to SitePoint.

    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 ( ), 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. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi anarchos78. Welcome to SitePoint.

    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 ( ), 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.
    thank you a lot,
    have a nice day and sunny greetings from Greece,
    Tom

  6. #6
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    deathshadow60 can be a little blunt, but if you can get past that, he does have a lot of god points to make.
    That certainly does seem to sum up his self-opinion.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by EarlyOut View Post
    That certainly does seem to sum up his self-opinion.
    Oops 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. )

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

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

  9. #9
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    ds60 will hate me for posting this link
    You'd be surprised, I'm not that adverse to it... know why? You posted why:

    Quote Originally Posted by ralph.m View Post
    At least with JavaScript off the page still works, and the links respond to keyboard navigation too.
    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. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •