If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Feb 2016
    Fort Worth, TX
    Member #

    Fixed/Frame Set for header or footer HTML5

    Good Morning,

    I wanted to see if anyone could help me.

    I'm trying to get a static/fixed header on a website that stays static while you browse the website. This will essentially be a media bar.

    An example of what I'm trying to do can be seen on Pandora, TuneIn, and some radio stations. Radio Example - | Minneapolis/St.Paul | | KXXR-FM - Notice how the player pops up once loaded and you can play the stream.

    I can't for the life of me figure out how they get the player to pop up the way they do and how they get it to "stay" as they browse pages of the site without refreshing.

    Any help on coding here would be helpful.

    Thanks in advance!


  3. #2
    Junior Member Krazyhawk's Avatar
    Join Date
    Feb 2016
    IL, USA
    Member #
    7 times
    Position: fixed; //element will be based off browser window
    top or bottom: <number>; //number of pixels, ems, whatever from the top or bottom
    left or right: <number>; //number of pixels, ems, whatever from the left or right.

    For that specific example, this should work:

    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    This is telling the element to be fixed to the bottom of the window and stretched from the left to the right. It will always be in the view port since it "fixes" itself to the window. You may also need to use z-index to make sure it is always in front, so a safe bet is always:

    z-index: 9999;

    Hope this helped!

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 04:13 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: