I'm trying to make a page that shows how to enable JavaScript in various browsers.
The users that view the page will not have JavaScript enabled, so I can't use JavaScript to detect the browser.
How can I detect the browser without using JavaScript, PHP or ASP.NET?
The idea I have in my head is that the page will show the appropriate instructions to enable JavaScript in the user's browsers with pictures and text.
Sorry for the bad english.
Thanks!
EDIT: Is it a bad idea to use conditional comments? Why not?
You can't. You need something on the back end to read the user agent.
AFAIK, there's no way, except asking the user:
If you're using Internet Explorer (nice image of the IE logo): click here;
If you're using Firefox (nice image of the Firefox logo): click here;
Your question doesn't leave much room for providing an answer, but I'll give it a shot:
You can use a <noscript> block to provide page content which will only be visible when JavaScript is disabled.
Alternately, you can also use a JavaScript onLoad method to remove an ordinary <div> or similar element from the page when JavaScript is enabled.
The <noscript> element is generally preferred, as it will simply not appear on the page if JavaScript is already enabled.
As far as detecting which browser they're using, you need some technology on the back-end which is capable of parsing the request headers that the browser sends. This can technically be done by the web server itself using server-side include and some clever rewrite rules, but it is actually harder that way than to just learn to use a server-side scripting language.
If you're doing this for a reason (i.e., you're using an embedded webserver with little to no free space), your best option if you only want to provide a static page (in other words, just an HTML file) is to have the page content include a <noscript> block at the top, and an invisible block at the bottom (<div> with hidden), then enable the hidden div on page load via JavaScript.
Include two or three blocks with <a> anchor tags which explain how to enable JavaScript in EACH browser, and have the user click the logo that looks more familiar (all inside your <noscript> block).
That being said, server-side scripting is easy to use, easy to set up, and completely worth learning. It's quite a bit easier and more predictable than doing everything with JavaScript.
Related
Is there a way to Bookmark using HTML/CSS? I have been developing this mobile application in HTML and want to be able to give the option to bookmark certain pages to the users. Is there a way to do this in HTML?
There isn't a way in pure HTML (since it's just a markup language) or CSS (this just define the style), since bookmarking is an action done exclusively by the browser without iteration with the web page. I'm aware that JavaScript can do it.
I don't think so, as HTML is only a markup language, not supposed to interfere in browser's data or configuration. In case JavaScript is also an option for you, please refer to this answer.
I am making a website that is styled using CSS, in two DIVs. One 'Header' DIV which is always the same, and a 'Content' DIV that changes.
In my CSS file, is it possible to write the HTML with all the links that stay in the header, so I just need to call (or similar) on every page, instead of having to write out my header content every time? Would also help in editing only one source, as I often leave out pages by mistake.
I don't want to use frames, so looking for an alternative.
Thanks,
Brett
Depending on the server and server side languages supported, this can be done.
Some servers will let you use Server Side Includes, for example. With others you could specify "block" of HTML for a header (for instance) that will be part of a site wide template.
What is not possible it to achieve this with purely CSS and HTML.
This is why you usually have some server side code running, which will insert the common header e.g. php include, SSI or other templating framework. If that's not an option, you could write JavaScript which writes out your header each time to a specific DIV. Although I don't think that's great from an SEO perspective.
The usual options for doing this client-side are an iframe, or some javascript that does DOM to add content (perhaps loaded from an external file). Or some javascript that creates an iframe. Or an iframe that creates some javascript. Some permutation of those odious techniques.
CSS does have the content property, but i think it's limited to plain text. I don't know if you can use it to pull in HTML, either using a string or URI.
As others have mentioned, the most common approach is to do it server-side. You can do this bottom-up with includes, or top-down with things like Tiles and SiteMesh.
CSS can't help you to do this.
You can make ajax loading of content. You can make one index.html and lot of 'content' files (about.html, contacts.html, etc). And in index.html you can load another .html in content-div (for example with jQuery method .load())
Another way - you can make little templating engine in php (or another server-side language)
It isn't possible to achieve that using CSS, because CSS can't handle any events, it's simply a "refrence" for the browser to know how to style your web-page, it's done, however, using AJAX.
I suggest you to take a look on jQuery lib, it'll speed up the process tremendously, however - the main disadvantage is that the search crawlers won't be able to index your page correctly, so it'll be bad by an SEO perspective.
It's possible, if you have the time, to make an index-able version and an AJAX one, that's what we did for a mobile project here.
jQuery AJAX API
I would like to know if it is possible to modify Chrome or Firefox display settings, so that it would only show rectangles of HTML DOM objects? What I want to do is to decrease rendering engine job amount as much as possible, so it would only build layout of the page.
People usually refer to this mode of operation as "headless" (i.e. without UI).
Usually there's an additional requirement - to be able to run it server-side without the usual for client software installed. If you're running it client-side, I wouldn't bother about optimization, it shouldn't give you a big win anyway.
Otherwise, try searching using that term. I've seen it asked for several times, but haven't seen a working out-of-box solution.
[edit] just saw http://hg.mozilla.org/incubator/offscreen, which seems to be a headless version of Mozilla.
I wouldn't go as low-level as modifying the renderer. Instead, I suggest you use Firefox's Greasemonkey to replace the elements from the page with whatever it is you need. You'll need to know a bit of JavaScript, but it's not that hard.
However, this will only work on client side. If you want to do this on server-side ( so that it will work on any page a user requests through your own ), my guess is you'll need to grab the page's content in a string, and then modify it using a HTML parser.
Is there a way to embed only a section of a website in another HTML page?
Example: I see an answer I want to blog about, so I grab the HTML content, and splat it in somewhere, and show only that, styled like it is on stackoverflow. Basically, I want to blockquote the section of the page with original styling, if that makes sense. Is that something the site itself has to provide, or can I use an iframe and tell it to show only a certain element or something crazy? Open to all options, but I want it to show up as HTML, not as an image (that's really a last resort).
If this is even possible, are there security concerns I need to aware of?
Don't think image should really be last resort. You have no control over the HTML/CSS of the source page, so even if you craft a solution (probably by using JavaScript to parse out the desired snippet) there is no guarantee that tomorrow the site doesn't decide to change its layout.
Even Jeff, who has control over the layout of stackoverflow.com, still prefers to screen-capture the site, rather than pull in the contents live.
Now if your goal was to have the contents auto-update, that would be a different story. But still, unless you use some agreed-upon method of sharing content, such as RSS, your solution would be very fragile.
The concept you are describing is roughly what is called a "purple include" or "transclusions". There is a library out there for it, but its not exactly actively developed. Here's a couple ajaxian articles on it.
I'd recommend using a server side solution with Python; using urllib2 to request the page, then using BeautifulSoup to parse out the bit that you need. BeautifulSoup has a very flexible selection api with which you can craft heuristics for the section you are interested in.
To illustrate:
soup = BeautifulSoup(html)
text = soup.find(text="Some text on the page that is unlikely to change")
print soup.parent.prettify()
That way if the webmaster later changes the markup on the page, your scraping script should still work.
On client side <iframe> is the only practical option. It is possible to scroll it, but it might not work in the long term, because it's technically close to clickjacking attack.
There's also cross-site XHR, but requires opt-in from destination site, and today works only in few latest browsers.
Getting HTML on server side is easy (every decent web framework has ability to download page and parse HTML and you can use XPath/XSLT or DOM to extract bit you want).
Getting styles however is going to be tricky – CSS rules may not work with HTML fragment taken out of context. You'd have to parse CSS, extract and transform rules or use browser and read currentStyle of every node.
Obviously you have to heavily filter HTML you extract to avoid XSS. It's harder than it seems.
If you don't need to automate this, a good HTML+CSS WYSIWYG editor might be able to extract content fragment with styles.
That sounds like something that IE8's Web Slices would be perfect for. However, it's only available in IE8, and the site of origin would have to implement for you to be able to take advantage of it.
Is there a way of including HTML pages without needing any javascript or server-side code, only HTML.
Basically I can't be sure if the server supports server side includes. I don't want to use javascript and I don't want to use any PHP or other server side functionality.
Is there any way to do this. At the moment I suspect not, but would be very interested if it were possible.
Use some frames in your page
HTML frames allow authors to present
documents in multiple views, which may
be independent windows or subwindows.
<iframe></iframe> is the tag you need to include inline floating frames.
Quick tip with iframes: Be sure you open and close the tag explicitly, if not some browsers will complain
You can use framesets.
HTML imports, part of HTML Components, aims to do exactly this.
HTML5rocks offers a great tutorial to get started with HTML imports.
According to can I use, only Chrome is supporting HTML imports today.