game_over Posted November 23, 2010 Share Posted November 23, 2010 How does twitter achieve the top bar on their new design? The bar itself doesnt refresh, only the pages below it.. when links are clicked. I would of thought it was an iframe but when i've checked the code it doesn't look like it. Link to comment Share on other sites More sharing options...
0 tomjol Posted November 23, 2010 Share Posted November 23, 2010 I imagine they just AJAX most of the page in and update the address bar when appropriate. Link to comment Share on other sites More sharing options...
0 MarkusDarkus Posted November 23, 2010 Share Posted November 23, 2010 With <div id="newbar"> <div id="newbar2"> A new <strong>Twitter</strong> experience is coming! <a href="/newtwitter">Learn more about it…</a> <a href="/#search?q=%23NewTwitter" class="search_link hashtag" name="#NewTwitter">#NewTwitter</a> </div> </div> and #newbar{position:relative;z-index:100;background:#111 url(http://s.twimg.com/a/1290471375/images/whatsnew/bg-newbar.jpg) repeat-x 0 0;color:#ccc;box-shadow:0 1px 2px rgba(0,0,0,0.5);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);min-height:40px;}#newbar2{width:936px;margin:0 auto;padding:10px 0;font:bold 13px/19px "Helvetica Neue",Arial,Sans-serif;text-align:left;}#newbar strong{color:#fff;}#newbar a{color:#7df;}#newbar a.hashtag{color:#999;font-weight:normal;}#newbar a.hashtag:hover{color:#ccc;} Link to comment Share on other sites More sharing options...
0 game_over Posted November 23, 2010 Author Share Posted November 23, 2010 With <div id="newbar"> <div id="newbar2"> A new <strong>Twitter</strong> experience is coming! <a href="/newtwitter">Learn more about it…</a> <a href="/#search?q=%23NewTwitter" class="search_link hashtag" name="#NewTwitter">#NewTwitter</a> </div> </div> and #newbar{position:relative;z-index:100;background:#111 url(http://s.twimg.com/a/1290471375/images/whatsnew/bg-newbar.jpg) repeat-x 0 0;color:#ccc;box-shadow:0 1px 2px rgba(0,0,0,0.5);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.5);min-height:40px;}#newbar2{width:936px;margin:0 auto;padding:10px 0;font:bold 13px/19px "Helvetica Neue",Arial,Sans-serif;text-align:left;}#newbar strong{color:#fff;}#newbar a{color:#7df;}#newbar a.hashtag{color:#999;font-weight:normal;}#newbar a.hashtag:hover{color:#ccc;} thanks, so should i just stick this in an iframe or is there a better way to do it, using that as is would still refresh on every page load? Link to comment Share on other sites More sharing options...
0 Cupcakes Posted November 23, 2010 Share Posted November 23, 2010 What MarkusDarkus gave you is just basic HTML and CSS to give you the bar style that is used on Twitter. What you want to do is going to require AJAX. Best to check out this tutorial: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ Demo: http://d2o0t5hpnwv4c1.cloudfront.net/011_jQuerySite/sample/index.html#portfolio http://net.tutsplus.com/?s=ajax Link to comment Share on other sites More sharing options...
0 game_over Posted November 23, 2010 Author Share Posted November 23, 2010 thanks for that, in my case i think it may be better to just go with an iframe. i'll try them both thanks Link to comment Share on other sites More sharing options...
0 Cupcakes Posted November 23, 2010 Share Posted November 23, 2010 I strongly advise against using an iframe for what you need done. Speaking of which, what exactly are you trying to do? Link to comment Share on other sites More sharing options...
0 game_over Posted November 23, 2010 Author Share Posted November 23, 2010 I'm re-designing my site and want one of those bars as the main navigation. at the top. i dont want it to reload though, basically working like an iframe i just want the pages to load under it. e.g it may have a music player on it that would restart every time the page was loaded. i dont want animation either. if that jquery can handle that for a large site i'll go down that route, it has a vbulletin forum and gallery n stuff that i'd also want it to work on. Link to comment Share on other sites More sharing options...
0 Calculator Posted November 23, 2010 Share Posted November 23, 2010 These days, it's highly recommended to stay far away from framesets and iframes in your websites because of their problems with accessibility and styling. One of the major problems is that the URL doesn't reflect the state of the frames, meaning that you can't easily bookmark a certain page when it's trapped inside a frame. In the end, frames are just a terrible pain in the *** to work with. :p A top bar like Twitter's is achieved by using AJAX to load only the changed content into the page instead of requesting a new page. All internal link clicks are captured by some Javascript (jQuery) code which fires up an AJAX request and changes the "hash" (the part after # in the URL) so that the browse state can be bookmarked. When the AJAX requests returns, the retrieved data is loaded into a specific element in the body (e.g. <div id="content">). Ideally, this is done in such way that when JavaScript is not available, the site degrades gracefully or in other words that it still remains functional without the static top bar and the dynamic page loading. This means that all referenced internal links should still work, but can also be served with an AJAX request. There are a few ways to do this: Using some kind of CMS which stores the pages in a database, you can serve these pages in different formats, e.g. full HTML pages for normal requests and JSON objects for AJAX requests. The JSON objects would only contain the content without much extras such as <html> or <head> blocks, potentially saving you some bandwidth. You could also make AJAX request the full HTML page, select only the content from it and put it in the content element on the page. In jQuery, this so-called page fragment loading can be done with $("#content").load("page.html #content"). The advantage here is that you don't have to change anything on the server-side, assuming that your layout is consistent throughout your pages with the same ID for the content block. On the other hand, you'll still be serving fully-rendered pages meaning that the bandwidth will still be the same. I highly recommend having a look at the tutorial referenced by Cupcakes, that should get you started. :) Link to comment Share on other sites More sharing options...
0 game_over Posted November 23, 2010 Author Share Posted November 23, 2010 I do plan to use WordPress CMS so that covers the database side of things. I'm currently building a core theme from scratch - are there any reputable tutorial sites for creating an up to date wordpress theme so i can reference it? Link to comment Share on other sites More sharing options...
0 Guest Posted November 23, 2010 Share Posted November 23, 2010 JQuery makes AJAX really easy to implement. You should definitely look into that... $.post("test.php", function(data){ $('#content_container').html(data); }); The above function will load test.php (or whatever webpage you want) and return the output of the page. You could then just output the HTML result of the page to the "content_container" without having to refresh the page. JQuery Post API Edit: Seems that the others have a better way of implementing the same thing. I'm still new to JQuery myself :blush: Link to comment Share on other sites More sharing options...
0 game_over Posted November 24, 2010 Author Share Posted November 24, 2010 What MarkusDarkus gave you is just basic HTML and CSS to give you the bar style that is used on Twitter. What you want to do is going to require AJAX. Best to check out this tutorial: http://net.tutsplus....nt-with-jquery/ Demo: http://d2o0t5hpnwv4c....html#portfolio http://net.tutsplus.com/?s=ajax I have a question. I'll pretty much want every link (except external links) to go through the jQuery as i'll always want this bar at the top, but that is just for links inside #nav, is it as easy as just removing #nav li from $('#nav li a').click(function(){ could it be tricky for my vbulletin forum where there are 100s of links? I'm not really doing any of this for fancy effect i just want it so the bar at the top never needs to reload also, its only pulling content from the #content div. I want it to pull full page content excluding the bar, do i need to add the bar code to every page and add the rest of the page to it's own container? jQuery exp is minimal :( Link to comment Share on other sites More sharing options...
0 Calculator Posted November 25, 2010 Share Posted November 25, 2010 Since you want to do this on all links on the page, it's a good idea to use $.live() or $.delegate() instead of $.bind() (which is called by $.click()). The difference is that $.bind() adds an event handler to every element in the current jQuery selection, while $.live() and $.delegate() bind a single event handler to the container which uses event bubbling to capture events on the target element. The advantage is that this drastically reduces the amount of event handlers and this also works for dynamically added elements, so you don't have to $.bind() again when loading a new page with links through AJAX. For large numbers of matched elements, this is much faster and more performant than using $.bind() on all elements. // using live $("a").live("click", function() { $("#content").load(this.href + " #content"); }); // or using delegate $(document.body).delegate("a", "click", function() { $("#content").load(this.href + " #content"); }); Note that you can change the parent element where the event handler will be bound on. Here, the body element is used which will capture all anchor clicks bubbling up, however if you only need to bind an event on a subset (such as a <div> or an <ul> with links), you can specify this in the method call. Have a look at the jQuery Docs to learn more about this. As for your issue with loading everything except from the bar, it's not that simple. When you use $.load(), you're inserting raw HTML from an AJAX request into the DOM. I proposed to put all needed content in a wrapper <div> on all your pages since this is the easiest to do. However, if you want to remove certain elements before inserting them, you could do this by using $.get() instead and doing the DOM insertion yourself. This allows you to do anything with the retrieved HTML before it is inserted, but of course this comes with the responsibility of doing this in a correct and fast way. :p If you're planning to do the DOM insertion yourself, learn from how jQuery does it. Taken straight from the 1.4.4 source code: var rscript = rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi; // ... jQuery.fn.extend({ load: function( url, params, callback ) { // ... complete: function( res, status ) { // If successful, inject the HTML into all the matched elements if ( status === "success" || status === "notmodified" ) { // See if a selector was specified self.html( selector ? // Create a dummy div to hold the results jQuery("<div>") // inject the contents of the document in, removing the scripts // to avoid any 'Permission Denied' errors in IE .append(res.responseText.replace(rscript, "")) // Locate the specified elements .find(selector) : // If not, just inject the full result res.responseText ); } if ( callback ) { self.each( callback, [res.responseText, status, res] ); } } // ... } }); As you can see, you should at least strip out any <script> tags before inserting them. Therefore, I suggest not inserting a complete HTML page, but just a part of the <body> content. If you really need those scripts, consider making one global script file which you load on all pages. I know that loading all scripts when they're not be needed is not very bandwidth-friendly, but it's the best I can come up with... Link to comment Share on other sites More sharing options...
0 game_over Posted November 25, 2010 Author Share Posted November 25, 2010 thanks for that i will go over it tomorrow as i'm not 100% sure what you just said :) hah Link to comment Share on other sites More sharing options...
0 RXI Posted January 15, 2011 Share Posted January 15, 2011 Who can copy the twitter top bar for me? I"ll pay whoever can reproduce the bar message me for more info Link to comment Share on other sites More sharing options...
0 Cupcakes Posted January 15, 2011 Share Posted January 15, 2011 Who can copy the twitter top bar for me? I"ll pay whoever can reproduce the bar message me for more info Did you bother to check out any of the links provided already? They did include demo/code that you can utilize for yourself. Here's also a notification bar example you can use: http://pandiyachendur.blogspot.com/2010/07/twitter-like-notification-bar-in-jquery.html Link to comment Share on other sites More sharing options...
0 RXI Posted January 17, 2011 Share Posted January 17, 2011 Did you bother to check out any of the links provided already? They did include demo/code that you can utilize for yourself. Here's also a notification bar example you can use: http://pandiyachendur.blogspot.com/2010/07/twitter-like-notification-bar-in-jquery.html Yes I did and its still greek to me :( Link to comment Share on other sites More sharing options...
0 Cupcakes Posted January 17, 2011 Share Posted January 17, 2011 Yes I did and its still greek to me :( If it's greek to you then I highly recommend finding some e/books on CSS, HTML and JS (jQuery too!) The only way you'll be able to understand any of the code is to learn about the code. Link to comment Share on other sites More sharing options...
0 RXI Posted January 17, 2011 Share Posted January 17, 2011 If it's greek to you then I highly recommend finding some e/books on CSS, HTML and JS (jQuery too!) The only way you'll be able to understand any of the code is to learn about the code. I know but I dont have time to read books etc I need it for my site http://www.rximagazine.com I have the design ready to load but I want to add the twitter top bar to it. but the designer who did the site is gone and I am stuck trying to figure it out Link to comment Share on other sites More sharing options...
0 Cupcakes Posted January 17, 2011 Share Posted January 17, 2011 I know but I dont have time to read books etc I need it for my site http://www.rximagazine.com I have the design ready to load but I want to add the twitter top bar to it. but the designer who did the site is gone and I am stuck trying to figure it out Then hire a web developer that will get it added for you. Link to comment Share on other sites More sharing options...
0 RXI Posted January 17, 2011 Share Posted January 17, 2011 Then hire a web developer that will get it added for you. thats why I am here asking etc since when I googled it it showed this forum and since people in this forum know how to do it that is why I am asking Link to comment Share on other sites More sharing options...
0 +shift. MVC Posted January 17, 2011 MVC Share Posted January 17, 2011 thats why I am here asking etc since when I googled it it showed this forum and since people in this forum know how to do it that is why I am asking The people on this forum are only willing to help as much as you are willing to do some research and willingness to learn ;) Seems to me like you don't really have the JavaScript or PHP knowledge to implement something like this. Here's another useful website that will hopefully help you understand the BASICS of how AJAX works (and what it is) before you try implementation on your own website! http://w3schools.com Here's the AJAX tutorial: http://w3schools.com/ajax/default.asp Link to comment Share on other sites More sharing options...
0 RXI Posted January 17, 2011 Share Posted January 17, 2011 The people on this forum are only willing to help as much as you are willing to do some research and willingness to learn ;) Seems to me like you don't really have the JavaScript or PHP knowledge to implement something like this. Here's another useful website that will hopefully help you understand the BASICS of how AJAX works (and what it is) before you try implementation on your own website! http://w3schools.com Here's the AJAX tutorial: http://w3schools.com/ajax/default.asp Yes I do not have much knowledge I can edit scripts and know how to edit css and html when its front of me just dont know the building process just thought I would throw it out there to see if anyone could help with the foundation and I could edit it but not getting lucky I just need the top bar on a blank page and I would be able to edit it myself. Link to comment Share on other sites More sharing options...
0 game_over Posted January 17, 2011 Author Share Posted January 17, 2011 easy guys. He has offered to pay for help. isn't that what web developers are for - to code and make sites for people who can't or dont want to do it. if he wants to pay someone rather than learn then thats up to him.. way to scare off new members Link to comment Share on other sites More sharing options...
0 Cupcakes Posted January 17, 2011 Share Posted January 17, 2011 Go easy? I think Shift and I's responses are "easy" in the sense that it's not rude or condescending. We're just offering up suggestions (and yes, he already is willing to pay--he did state it before [which I forgot about.]) I doubt he's been "scared off." He seems like a rational human being that can accept some advice being given. Link to comment Share on other sites More sharing options...
Question
game_over
How does twitter achieve the top bar on their new design? The bar itself doesnt refresh, only the pages below it.. when links are clicked.
I would of thought it was an iframe but when i've checked the code it doesn't look like it.
Link to comment
Share on other sites
24 answers to this question
Recommended Posts