I want to implement the header as like twitter has. I have observed couple of things like when i click on home link, the url has changed but still page header is not loaded and the content of the page is changed. Can anybody give me some suggestion so that i can put that design on my site?
UPDATE
I have seen this site : 1, 2
I am wondering that how twitter manages offline site. Because I have tried couple of example for application caching, and i have got warning on my firefox browser about page storing. While I am opening twitter site on firefox this warning dosen't appear. What could be the reason. I have also observe that twitter is using locaStorage first time. What is the concept behind twitter offline site caching?
As Cyberfox already mentioned - it's called browser state. The JS-framework BackboneJS implements this method for you: http://documentcloud.github.com/backbone/.
More specific: http://documentcloud.github.com/backbone/#History-start
As Twitter is a mix of good CSS and very much of AJAX, jQuery is probably what you're looking for. (http://jquery.com/)
You want the history methods (pushState, popState) in HTML5, or the hash-bang operations in HTML4.
Here's a comprehensive overview of the state of the art in history munging, and browser state: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling
...along with a library (history.js) to help.
Related
So i am trying to create a website with multiple different pages. I was originally going to just take the traditional route but this website caught my eye: https://anyoneworldwide.com/
Everything aside from the "Choose your location" screen has no loading whatsoever. The URL changes but there is no loading indicator on my tab or "X" on the refresh button (I am using chrome btw)
So my question is; how am I able to use this kind loading technique in a website of my own?
The particular website mentioned in the question is developed using React. Its a javascript framework.The concept is know as Single Page Application. Where routing is done by javascript running in the browser and content is loaded using ajax calls. checkout this article.
Easy answer, pick one of the currently popular front end frameworks for building single page apps (SPA).
E.g. AngularJs, React.js, vue.js
These frameworks allow you to easily create client side routers, which inject (in one way or another) new content into the existing page, thus no refresh.
React is a popular open source and free library developed by facebook. It is used to develop single page applications which means that your website wont load at all. This increased the speed of your website and saves a lot of bandwidth. Using react you can make such a website as you mentioned. Not only React but also other frameworks like angular and Vuejs can be used.
I am developing an universal windows app. I need to download a webpage and extract images from it.
I got the html code and extracted the links to images and downloaded them. The thing is, the site has infinite scrolling (like facebook). When I scroll down to the bottom it loads more images. I am not able to incorporate this into my app. I am a beginner and have very little knowledge of web development or windows app development. This is my first app. I am stuck and have no idea how to proceed. I don't want to use webview as it displays ads from the site and other unnecessary contents. I only want the links to those images. Please help me go past this situation. I need a way to download the new html content that the site loads when user gets to the bottom or some other way to get the image links.
Thanks in advance.
You may or may not be a me to implement this specifically because of the reason you stated. You need to determine how the site loads this information. First I would download Fiddler and in turn enable https connect logging so you can see your encrypted traffic going through Fiddler. Btw the Web View has events you can hook to see loading URLs, etc and it can also be hidden.
So again you need to first understand how the site you want to do this on works and emulate that, assuming they don't have an api already to give you this information as mentioned I'm the comments.
When you do that, come back with code examples and you'll get better help.
I have been spending my past week on the Internet to find at least one hint about it. There are no tutorials or even SO questions available. What I am trying to find is that when some website uses some library like oEmbed to embed content of other websites on their website, they fetch embed code from its link. For example, when you post a YouTube link on Facebook or other social networks, they automatically fetch their embed code. I know how to fetch embed code but what I don't know is how to provide embed code that can be fetched by other websites by using a link of my website's content?
I want that my article should be embedded in some special way. Not like the default layout of that website. So is there any META tag or something in HTML where I can put embed code for other websites?
I don't think what you want is possible. You can use special meta-tags that specific sites (e.g.: Facebook, Twitter, Linkedin) will interpret, and that will help you customize the share a little (still using the "host site" style). But as far as I know, there's nothing you can do to provide style/code of your own.
And it makes sense from a security point of view: embedding external code from an unknown source is potentially dangerous and no site would/should allow you to do it. Even if they do allow it, they should pre-process the code and sanitize it (adapting your style/code to their style/code) to prevent possible threats.
As suggested by Alvaro Montoro, I searched on the Internet about how to become an oembed provider. Following are the links I found:
https://timnash.co.uk/becoming-oembed-provider/
http://freear.org.uk/content/5-steps-being-oembed-provider
You may want to use the CSS !important directive.
http://css-tricks.com/when-using-important-is-the-right-choice/
I am developing an HTML5 web app that is mostly being used on mobile devices. It's basically a link discovery app: It shows the user some hopefully interesing links, which the user then can visit. I would like to keep the user in our app though, so that our menu bar always remains at top.
Standard links of course take the users away from our page completely, with no option to return:
The Cheshire Cheese Cat
frames and iframes are discouraged in HTML5. What other options are there?
(What we try to achieve is similar to what Facebook or Twitter are doing. Lots of links are being passed around there, which the user can visit. But he alsway can go back to his news feed, with the Facebook or Twitter menu bar.
If you just want to make links open in a new tab (which is what I would recommend), you can simply use target="_blank":
<!-- opens in a new tab/window (depending on the user's browser) -->
The Cheshire Cheese Cat
Man I think you have to make a good research about HTML5
Html 5 is only a upgrade (in quotes) to the existence html and javascript, iframes are totally valid element and frame you are right they are deprecated. But for at least you dont want to use them or other, iframe are a good way to go for what you want to achieve. If you are going in the iOS or Android plataform I dont sure but I guess should exist some kind of browser object which is what use facebook.
I think you have problems with the cross domain control policy and not because the iframe tag
take a look to this answer
Alternative to iFrames with HTML5
best
And HTML5 is no a new framework is just html and javascript.
So I'm using wordpress to manage a website.
I would like to have the itunes listing displayed in the website.
I saw a site that did this here: http://gungormusic.com/#!/music/
any idea how to do this:
?
I'm looking for the same thing. so far the closest i've seen is this: I'm actually looking too.
http://widgets.itunes.apple.com/builder/
It's too small of a widget for what we want to use though, but it's a start.
The layout and UI above was designed by that website owner. Apple doesn't provide this drop-in functionality.
Check out the iTunes Affiliate program for access to the metadata and tools for linking to iTunes content and access to album art:
http://www.apple.com/itunes/affiliates/resources/
The Search API will get you pretty close to the metadata you need for displaying the podcast you are interested in:
http://itunes.apple.com/lookup?id=498833764
It seems they are making it themselves, in wordpress with custom post types and meta fields... here's the iframe link on the example I gave: http://gungormusic.com/wp-content/themes/skortheme/itunes_iframe.php?s=false&collection_id=562515255
Seems to be a simple hand made solution!