Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Cross Page Bar

  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Cross Page Bar

    I've used html and css for some time now (off and on), dabbled in javascript and jquery for dynamic page loads, menus, etc, and use php as much as possible, but I'm kind of lost on what the best way to implement this and how.

    Basically I want a bar that will have things like info along with music and a chat bar. The chat bar is something I will learn later, but it all needs to be cross page, which I may be saying wrong and mean that the music needs to consistently play without reloading on every page on my site. With a chat (similar to facebook but not exactly) in mind, what is the best way to implement the music on this bar? Is a frame the best idea, and if so, how (in the most general sense) should it be implemented? Yes, I don't know much on this, that's why I'm asking so I can learn how through research and trial and error and do it.

    Again, if a frame will end up making the chat worse in the end, what is another way to do this? Also how to do it either way said.

    Thanks in advance. Any documents to point me to to read more on what you say to understand better is also appreciated.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    does this need to work in older browsers, or can you live with it working on current browsers only?
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #3
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    New browsers works fine. Javascript required is fine. The target audience should, mostly, have both of these.

  • #4
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    bump because of at least 1 response...

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Today is a holiday in USA, so RndMe is probably not online. I don't know what suggestion he was going to make, so I think you'll need to wait until tomorrow.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    well, what you ask is actually very very complex.
    i use it as an example of an outstanding web problem and a major limit of server-side design.

    frames would work, so would an iframe.
    you can have a master page display an iframe sized to the edges of the screen using javascript or css's new calc(100% - 1px) feature.

    this sad part about the iframe is that the url bar won't change.
    we can fix this with new browsers using the history.pushState() method.


    if you have a site-wide js file, the following should populate the url bar from the framed page, so it appears to work normally:

    Code:
    <script>
    top.history.pushState({}, document.title, location.href);
    </script>
    you can put that tag inline in the <body> of each page as well, but i prefer external files.


    there are more powerful ways of doing this, namely replacing all your navigation with ajax commands. This can get quite complex if your site's pages contain CSS/JS that other pages don't. If your pages all all static, and the <head> of each page is more-or-less the same, you can probably find a jQuery ajax routine that converts your links automatically.
    jQuery BBQ is another take on this, using hashes instead of full page links, worth looking into...

    i would start with the iframe method, since it's well-supported and simple enough to implement.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #7
    New Coder
    Join Date
    Jan 2013
    Location
    Texas, USA
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Cool thank you. I was thinking of dynamically loading each page with ajax/jquery, as I've done that before. It is quite annoying running into problems with css/js for each page, but if I remember right (I keep taking long breaks from web design and it screw me up every time) if you have a template style css, and basic css for the loaded pages, and manually load the js while loading the external page into the internal, then it seems to work.

    I was hoping to go for something like that stupid comet bar, or scm music player style of thing that could handle a facebook chat with it, and was curious on how they did it because I know it's not the jquery.load way (at least I think... pages seem to lead normal not dynamically).

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    Quote Originally Posted by gkjr1 View Post
    and was curious on how they did it because I know it's not the jquery.load way (at least I think... pages seem to lead normal not dynamically).
    i don't know what the comet bar is, but if you use pushState(), the page will seem to be normally navigating, albeit very fast. consistent CSS and defensive JS and not going "all out" with special resources on a few unique pages provides a do-able foundation to convert to all-ajax without much fuss.
    if you can pull that off, it probably better for your users than iframes, which some mobile devices have UX issues with.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5


  •  

    Posting Permissions

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