Skip navigation
Currently Being Moderated

Navigating from a web page with a bottom frame to a new page without the bottom frame

Apr 14, 2012 5:53 PM

I am building a webpage that has a bottom frame that shows the mp3 player controls for several pages that have musical content.  The problem is that when I want to navigate to a new page within my web page the bottom web frame remains there and screws up the links on that page.  How can I go from a page that has a frameset with an upper and lower frame and then click a link to a new page that should only have a single frame with no bottom frame.  It seems that any web link I click on from the page with the bottom frame, the new web page that I arrive at will continue to have the same bottom frame.  How do I get rid of this bottom frame for new web links that I click on from the page with the frameset?

 

Thanks for any help.

 

Jason

 
Replies
  • Currently Being Moderated
    Apr 14, 2012 9:59 PM   in reply to jasongreenberg
     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 14, 2012 11:12 PM   in reply to jasongreenberg

    @Gramps - very well said in your link - 'Frames are evil'!

     

    Jason, Frames are vintage. Why don't you CSS your page fully? This should resolve your issue and will also make your page more 'new-age'.

     

    There are tons of tutorials online on how you could have a static media controller to control all your page's media elements.

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 15, 2012 9:37 PM   in reply to jasongreenberg

    Can you recommend a simple way to accomplish something equivalent to a bottom frame where I could have an mp3 player remain at the bottom of my viewable window and even if it's a long page I can scroll around and the mp3 player will always remain in view at the bottom?  Hopefully there is a simple way to do this...

    Thanks!

     

    <div id="floatingfooter" style="position: fixed; bottom: 0px; right: 45%; opacity: 1;" title="Floating MP3 Player">

     

    Your MP3 player script can come here as is or within its own DIV

    </div>

     

    You could use this script on your HTML/ PHP page or you could define the style 'floatingfooter' within your main css file that you're calling.

     

    You could visit http://www.forwardfocus.in/v2-uc to see this in action. You'll see an image at the bottom 'Stay tuned to our updates'. Try resizing your window - you'll notice this sticks to the bottom. Similarly it'll stick to the bottom of your page when you have more content and a scrollbar too. This was the 'Coming Soon' landing page for my company's website that was made about 4 months ago.

     

    In some instances, you may have to add another CSS attribute 'z-index' if you have multiple DIVs and lots of content - z-index will decide the overlay of the div. Higher z-index will make the div display on top of all other divs and lower does vice-versa.

     


     

    Message was edited by: Sudarshan Thiagarajan - to add example

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 15, 2012 9:45 PM   in reply to jasongreenberg

    Copy and paste the following into a new document and view in your favourite browser,

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    html {
        background: #CCC;
        height: 100%;
    }
    body {
        width: 980px;
        margin: auto;
        background: #FFF;
        height: 100%
    }
    
    p {
        margin: 0.8em 0;
    }
    .header {
        height: 150px;
        background: #060;
        padding: 20px;
    }
    .nav {
        height: 35px;
        background: #000;
        color: #FFF;
        line-height: 2em;
        padding: 0 20px;
    }
    .article {
        background: #FFF;
        padding: 20px;
    }
    .footer {
        height: 150px;
        background: #060;
        padding: 10px 20px;
    }
    </style>
    </head>
    
    <body>
    <div class="header"><h1>Header</h1></div>
    <div class="nav">Menu Bar</div>
    <div class="article">
        <h2>This is the content area</h2>
      <p>Quantitative analysis of all the key ratios has a vital role to play in this exploiting the productive lifecycle presentation of the process flow should culminate in idea generation. The strategic vision - if indeed there be one - is required to identify to focus on improvement, not cost, an important ingredient of business process reengineering. While those at the coal face don't have sufficient view of the overall goals. Exploiting the productive lifecycle taking full cognizance of organizational learning parameters and principles, in a collaborative, forward-thinking venture brought together through the merging of like minds. The three cs - customers, competition and change - have created a new world for business the components and priorities for the change program quantitative analysis of all the key ratios has a vital role to play in this.</p>
      <p>The balanced scorecard, like the executive dashboard, is an essential tool working through a top-down, bottom-up approach, by moving executive focus from lag financial indicators to more actionable lead indicators. The three cs - customers, competition and change - have created a new world for business the vitality of conceptual synergies is of supreme importance that will indubitably lay the firm foundations for any leading company. In order to build a shared view of what can be improved, quantitative analysis of all the key ratios has a vital role to play in this an investment program where cash flows exactly match shareholders' preferred time patterns of consumption. To experience a profound paradigm shift, to ensure that non-operating cash outflows are assessed.</p>
    </div>
    <div class="footer"><p>Footer</p></div>
    </body>
    </html>

     

    Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points