This question may have been asked before, but I couldn't find an answer to it using both Google and the built-in search function of this site.
I want to use jQuery on my website, but only if it is displayed on a desktop computer. If my site is displayed on a mobile device, I don't want it to load jQuery.
What's the best way to do this?
Should I use Javascript or PHP for detecting the device type?
http://jsfiddle.net/fk9kC/
The code above is pretty much self-explanatory - by using a DOM element being hidden or shown depending by a screen width you're being able to target mobile phones more or less accurately.
Furthermore, you can also replace the device-width statement with max-device-width.
What about this? Auto detect mobile browser (via user-agent?)
You would need to check the user agent.
You will need to define what is a mobile platform to you.
One hack may be to include a media type mobile stylesheet, and have it set an element to something specific that you could check for using JavaScript. This is hacky though, but it will mean you won't need to parse user agents.
Related
We are making a website that has a desktop and mobile part
but we would like to use the same URL for both of them and depending on the user-agent load in the correct html/css
for the desktop part we are using Ember and its routing capabilities
so for instance: http://domain.com/#!/newsitems/news-item-1
for our mobile part we would like not to use JS for our routing but manual page refreshes ( so our mobile site works on as many different devices possible )
so if i want to make a button that redirects to "news-item-1"
link
doesn't reload my page because it recognizes its Number sign.
Is there a possibility that i can refresh the page but still keep the url.
We would capture the URL in php and then display the correct html/css
The "fragment" of the URL is never passed to the server, it is stripped off by the browser for its own use. It is therefore impossible to directly read it in PHP.
What you can do instead is the opposite: for non-JS situations, the HTML should contain a normal URL like <a href="/foo">.... The JS can then enhance this by adding a #! as appropriate, dynamically changing the link to <a href="#!/foo">...
This general idea, that you write the simple code first and layer rich features on top, rather than embedding them in the code, is known as "progressive enhancement". It can be viewed as a solution to the problem of "graceful degradation", which is what you are trying to achieve in supporting as many platforms as possible.
I realized that many of web app use # in their app's URL.
For example, Google Analytics.
This address is in the URL bar when I am viewing the visitor's language page:
https://www.google.com/analytics/web/?hl=en#report/visitors-language/a33185827w60383872p61754588/
This address is in the address bar when I am viewing the visitors' geolocation page:
https://www.google.com/analytics/web/?hl=en#report/visitors-geo/a33185827w60383872p61754588/
I think that this is the Google Analytics web app passing #report/visitors-language and #report/vistiors-geo.
I know that Google analytics is using an <iframe>. It seems that only the main content box is changing when displaying content.
Is # used because of the <iframe> functionality?
There are several answers but none cover the backend part.
Here is a URL, one from your own example:
www.google.com/analytics/web/?hl=en#report/visitors-language/a33185827w60383872p61754588/
You can think about the post-hash (including the hash #) part as a client-side request.
The web server will never know what was entered after the hash sign. It is the browser pointing to a specific ID on the page.
For basic web pages, if you have this HTML: <a name="main">welcome</a>
on a web page at www.example.com/welcome, going to www.example.com/welcome#main will scroll your browser viewport to the welcome text in the <a> HTML tag.
The web server will not know whether #main was in the URL or not.
Values in the URL after a question mark are called URL parameters, e.g. www.example.com/?foo=bar. The web server can deliver different content based on those values.
However, there is a technology developed by Google called AJAX (Asynchronous JavaScript and XML) that makes use of the # part in the URL to deliver different content without a page load. It's not using an <iframe>.
Using JavaScript, you can trigger a change in the URL's post-hash part and make a request to the server to get a specific part of the page, for example for the URL www.example.com/welcome#main2 Even if an element named #main2 does not exist, you can show one using JavaScript.
A hashbang is #!. It is used to make search engine indexing easier by indicating that this part is a dynamic web page.
This is the "hash" in the url.
Many browsers support hash change event in javascript.
as per my knowledge the hash change is the revolution in the ajax callbacks.
as such when the user interacts with the any link with a hash then on the hash change the event is fired and you can apply any thing with the javascript.
one more thing is that hash change is supported by the browser history.
see below URL
SEO and the use of !# in a url
or Read it
'#! is called a "hashbang" and they are the root of all that is evil in web development.'
Basically, weak web developers decided to use #anchor names as a kludgy hack to get "web 2.0" things to work on their page, then complained to google that their page rank suffered. Google made a work around to their kludge by enabling the hashbang.
Weak web developers took this work around as gospel. Don't use it. It is a crutch.
Web development that depends on hashbangs is web-development done wrong.
This article is far more well worded than I could ever be, and deals with the Gawker media fiasco from their migration to a (failed) hashbang centric website. It tells you WHAT is happening and why it's bad.
http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs
Correct me if I'm wrong, the hashtag in that URL would be used as an anchor to scroll the page to an element with an id. For example, I send you to the url http://example.com/sample#example, and the page would scroll (just display) at the element (I'm using a div as an arbitrary example, it could be anything).
Ajax and hash mark in the url mostly used for quick action.
If you have a part in your site that can be visible only by fire event (mostly click) - it would be hard to share it. With hash mark in the url you can (by javascript) make the browser think that you did the required action and it will display the relevant part.
Normally the '#' is using in url will find the particular id which is next to '#' in that particular page. By using this we can view the particular content at middle of the page also.
I have been thinking about this new( I know it has been a while ;p) google's feature that displays the website in the search result.
What i don't kind of get is, how they did it? Is it a form of iframe? or is it a php render of the page? Is it dynamic JavaScript/Ajax? I am just very curious how they have done it? And the follow up question would it possible for us to duplicate for our own sites? Like a search result page to display the page on mouse hover.
Any assistance would be most appreciated? I searched everywhere i could not get a definite answer anywhere?
The thumbnail is rendered by some kind of browser engine, and stored in an image file. There are lots of providers of this service, for example Thumbshots, WebSnapr and ShrinkTheWeb.
It is a thumbnail rendered on server side, and stored in an image file.
There are questions on SO dealing with how to do this, e.g.:
How can I generate a screenshot of a webpage using a server-side script?
How can I take a screenshot of a website with PHP and GD?
How might I obtain a Snapshot or Thumbnail of a web page using PHP?
How to preload the entire website like gmail does? How to show this in progress bar? What are the mechanisms used to get this effect?
I can use jquery, jquery UI, php. Will this be enought to create this?
I'm quite sure Gmail is built using the Google Web Toolkit, which essentially means that your whole application is contained in JavaScript files.. in fact the initial page source of Gmail is practically empty.
This post will probably help: GMail like file upload progress bar with GWT?
idea behind showing progress bar while page is loading....simply start loading bar and hide when $(document).ready(); All the others things after that are made with hashbang / hashtag. Here is exactly what you are looking for
If I insert in my wall a link like this:
http://blog.bonsai.tv/news/il-nuovo-vezzo-della-lega-nord-favorire-i-lombardi-alluniversita/
then facebook extract the image in the post and not the first image in the webpage ( not image logo or other little images for example ) !!
How facebook does that ?
Hm, impossible to say without more information about the algorithm they use.
However, from looking at the page's source code you can see that while the image of Bossi is not the first image in the page, it's the first inside the divs "page_content" and "post_content". Maybe Facebooks knows the HTML IDs that the blogging system (Wordpress in this case) uses, and uses these to find the first image that is actually part of the page content.
That would actually be a good idea, and is essentially an implementation of the "semantic web"...
As others have said, we have no idea how Facebook decides what to choose in the absence of any relevant metadata (though Sleske's guesses seem reasonable; I'd also guess that they look at the first big image), but you can avoid that by going the correct route and simply giving facebook (and similar services) addiotnal metadata about your page by using Open Graph Protocol tags, for example if you want to specify a particular image to use for a facebook like, you'd include this in your head tag:
<meta property="og:image" content="<your image URL>" />
OGP is also used by LinkedIn, Google+ and many others.
If you're in Wordpress you can control these tags with an open graph plugin. Other systems can do it manually or via their own plugins.
I can imagine that the Facebook crawler can identify the actual content part, and select an image from it. Similar functionality is used by the Safari Reader functionality. It probably helps that the software used is Wordpress, which is the most popular blogging software. It's a quick win for Facebook to add specific support for this software.
My guess is facebook has built some algorithms for distinguishing the actual content from the other data in a html page. When looking at the page you provided it's quite easy since the html element that contains the page content has id="page_content" which is self-explanatory.