I just been looking at the Steam website and noticed it doesn't use Flash.
What technologies are being used to create the page? For example the slide bar to scroll through the different games, how exactly is that happening?
Javascript, and lots of it. From the page's head:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Steam</title>
<link href="http://cdn.store.steampowered.com/public/css/styles_storev5.css?v=221260115" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]> <link href="http://cdn.store.steampowered.com/public/css/styles_storev5_ie6.css?v=3855293424" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]> <style type="text/css"> .iepoupfix{ display: block; } </style> <![endif]-->
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/swfobject.js?v=3216748271&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/prototype-1.6.0.2.js?v=1627908004&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/scriptaculous/scriptaculous.js?v=1333279996&l=english&load=effects,controls,slider"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/javascript.js?v=853265233&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/main.js?v=199395227&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/jserrorreport.js?v=19341832&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/header.js?v=318945778&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/search.js?v=630051104&l=english"></script>
<script type="text/javascript" src="http://cdn.store.steampowered.com/public/javascript/cluster.js?v=4033443305&l=english"></script>
<link rel="search" type="application/opensearchdescription+xml" title="Steam Search" href="http://store.steampowered.com/public/open_search.xml">
</head>
Notable libraries: Scriptaculous. Prototype. swfobject.js! Strangely that last one is actually supposed to be useful for embedding flash, though I'm not sure if it's in use on that page (perhaps just elsewhere on the site for movies or audio).
The scrollable "games" section is most likely a <div> with an overflow scrollbar. The arrows are probably links to a javascript call. Since it's fixed width, it just uses javascript to scroll the box by "width x."
For the most part that page is just JavaScript, HTML, and CSS.
It's not necessarily AJAX, although it may request those images from the server "on demand" to lessen server load, instead of prefetching them.
My awesome Chrome Sniffer Chrome extension tells me that this site is using script.aculo.us, which is a Javascript library similar to MooTools and jQuery. Dynamic javascript is being used for lots of neat effects these days.
Most none-flash solutions are likely to be using either a combination of XHTML and Javascript (often JS libraries such as jQuery or Prototype, or Microsoft's flash competitor - Silverlight.
The steam website seems to be using something along the lines of the very popular jQuery and jQuery Tools (Scrollable plugin). The scrollable plugin with jQuery Tools is really quick and easy to set up and really useful for displaying content and images. I've used it on several clients' websites with positive results.
UPDATE: looking at the source it seems that Steam is actually using the also-popular Prototype library but it's a very similar concept to jQuery and the scrollabel plugin.
In addition to Tchalvak's reply (I can't comment yet), swfobject, which is used to embed Flash objects, is used for trailers which are shown in a corner when you choose to view a detailed description of a game.
Its also used to preview Trailers before downloading the high-quality (usually HD) version as a "Media" item in the Steam client.
They are using JavaScript for all this stuff. If you look at the page source you can see that the prototype.js and scriptaculous libraries are both included by the page.
hey, it uses script.aculo.us, which on its behalf is based on Prototype. I didn't see anyone noting that.
prototype, jQuery, MooTools and such are just frameworks. You can do the same if you write your own javascript functions.
They just provide ready-to-go functions for AJAX, animation effects, advanced DOM traversal, slides etc. And the reason i'm using them is animation smoothness - i've written my own functions when i couldn't include jQuery.
Like you tagged, ajax, or other forms of javascript.
You may have a look at this: http://w3techs.com/sites/info/steampowered.com
Related
I'm having trouble getting the value of a slider in jQuery Mobile. I want to be able to get the value of a slider and feed this into a calculation which will work out costs and savings etc.
My code works on a normal HTML website (link below) but I am trying to get it to work in a PhoneGap app using Jquery Mobile. I'm actually using a Flat UI version (1.4.0) of jQuery Mobile found on GitHub, but I have also tried this using the standard 1.4.2 jQuery Mobile JS and CSS with the same outcome.
In the app, my header looks like this:
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.min.css" />
<link rel="stylesheet" href="fa/css/font-awesome.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0-rc.1.js"></script>
<script src="cordova.js"></script>
I've been though the code and narrowed it down to an issue in jQuery Mobile JS file and CSS file:
If I remove the JQM JS file and keep the CSS file it works, but obviously there's no function or styling across the app.
If I remove the JQM CSS file and keep the JS file it works, but there is no styling across the app or on the slider (which shown as a number input instead).
If I remove both files it works, but obliviously there's no JQM left!
This JSFiddle is a near copy of the calculator:
http://jsfiddle.net/tooze/H6FhD/
You can see a working web version of this calculator here: http://bit.ly/1lsUz8a
Have I written something incorrectly in my code? Or is it something conflicting in the JQM files?
Thank you in advance
is it possible to add the jquery mobile look and feel of some buttons onto a desktop browser?
I included the jquery mobile css and js files and when I click the button, it's doing some behind the scenes stuff and not actually taking me to my destination. When I remove the JS (the cause of the strange behavior on the desktop), the button, as expected, doesn't get rendered the way I want it to.
Ideally, I'd like to just see the pure css and simplified JS that's rendering the button so that I can just add it to my desktop layout, and if that's an option to do somehow, that would work for my purposes.
I really don't want to have to dig through all of the jquery mobile js files and figure out what is going on there to piece this together though.
how can I just pare out what I need to have my buttons rendered on the desktop with the same look/feel as the mobile device w/o the mobile device functionality.
Edit for answer below:
this is what I"m calling now on my desktop page:
<link href="/Content/jquery.mobile.custom.structure.min.css" rel="stylesheet" type="text/css" />
<link href="/Content/jquery.mobile.custom.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/content/mobile/themes/LS.min.css" />
<script src="/Scripts/jquery.mobile.custom.min.js"></script>
and calling the button like this:
<a data-role="button" data-theme="a" href="/home/foldit" data-icon="star">
Fold It
</a>
this is showing a textual representation of my button, not rendering the button. the only file I didn't include from the package is the "custom theme" css file because I figured that my theme should replace that. (the LS.min.css file).
Yes, it is possible.
You can rebuild jQuery mobile framework and use only wanted modules.
Go here: http://jquerymobile.com/download-builder/ and select only what you want.
*We’ve decoupled all of our plugins and have a clear dependency map which allows us to offer the download builder tool (Alpha) to let you build the leanest package possible.*
It is only usable with jQM 1.1.1 up to 1.2
Locally (outside IIS): Everything works fine across IE/FireFox/Chrome
IIS: Everything works fine except in FireFox. It doesn't want to load any of my subfolder content.
I've Googled the problem to death, thus...
Permissions are set adequately, (after all, it works in other browsers fine.)
The paths to the file are fine also. (Again, just FireFox.)
.css MIME Type in IIS is "text/css".
Static Content is checked under IIS features.
According to Notepad++, (Which is what the site was made with.), it is encoded in ANSI. (Tried others, no change.)
In FireBug > Net > All: It shows all but the page and a Google hosted script as "loading". In other words, anything local fails to load. (Which are all stored in subfolders in the root.)
DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< head>
<title>My Website</title>
<meta charset="ISO-8859-1" http-equiv="X-UA-Compatible" value="IE=9" />
<link rel="stylesheet" type="text/css" href="styles/clean.css" />
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<noscript><link rel="stylesheet" type="text/css" href="styles/noscript.css" /></noscript>
<script type="text/javascript" src="scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="scripts/script.js"></script>
<!--[if lt IE 10]>
<script type="text/javascript" src="scripts/pie.js"></script>
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<script type="text/javascript" src="scripts/selectivizr.js"></script>
<![endif]-->
Please, anything you can think of, I'd appreciate it. Thanks.
Solutions:
Clear the browser cache. See if that works(It should work).
Use ~/ followed by path. See, if that works.
Lastly, use absolute URLs if nothing works.
Have you checked the rewrite rules in IIS ? Using chrome do a right-click and inspect the properties of your page, go to Resources and check the links to your resources. If they were not loaded it's most likely a problem with the IIS configuration... Most likely a problem with the directory root, the rewrite (redirection) rules, or the permissions to each directory.
I also had this issue with Firefox where the css and javascript files are not getting applied
My solution was to add lang='en' into the DOCTYPE i.e. <!DOCTYPE html lang='en'>
Hope this helps
I've been asked to make a landing page in DotNetNuke 5 for smartphone users who scan a QR code. I'm comfortable making mobile-optimized HTML, but what I can't figure out is how to remove the dozens of little JavaScript files DotNetNuke insists on splattering all over my page.
Here's my skin file:
<%# Control Language="VB" Codebehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<div id="ContentPane" runat="server" />
Somehow this generates ten <script> tags inside the body tag alone. Even if these files are 1k, they're going to slow down the iPhones and Androids that will hit the page over a 3G connection.
How can I get rid of stuff like this?
<script src="/WebResource.axd?d=ZqXqDXDKumeQiG8GZ0x_mzZZ0jQMPgecqAb7TxBPgb6GZEdhNEOACHbMv_-DjQSx6FMWwSwTCVOkBTdp0&t=634390613877902798" type="text/javascript"></script>
<script src="/js/dnncore.js" type="text/javascript"></script>
<script src="/WebResource.axd?d=OY9wp5yXYij5t96ul3j-usYb-39eRGfAvw_wEQs0x7yQkcbu_mJ6hC130al2esCXmkgk0yjNpDCTD4bw0&t=634390613877902798" type="text/javascript"></script>
<script src="/js/dnn.js" type="text/javascript"></script>
<script src="/js/dnn.xml.js" type="text/javascript"></script>
Unfortunately, at the moment there isn't anything built into DNN that will let you remove most of those scripts (though some of the WebResource.axd scripts may depend on which controls you have being displayed, or which control panel you're using).
I think your best bet is probably to use the Snapsis Page Blaster product, which is made to optimize the output from DNN. By default, it combines and minifies scripts and CSS files. It also has filtering capabilities which you should be able to use to remove those scripts altogether.
So far as CSS is concerned, you can also use the StyleHelper skin object which allows you to specify which CSS files should not be loaded by DNN.
I'm trying to implement videoJS in the HTML5 Boilerplate. I've tried pasting the embed code suggested by videoJS but the results don't work. When the page loads the "poster" image appears but the loading wheel never stops and the video never plays.
I've tried including this in the header and footer to get the video started, but it hasn't worked:
<script>
window.onload = function() {
var pElement = document.getElementById("#vid");
pElement.play();
};
</script>
I've also included all the video.js ref links in the header:
<!-- Link to Video JS Library -->
<script src="js/mylibs/video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
<script type="text/javascript" charset="utf-8">
// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();
</script>
Does anyone have an example of good HTML5 video implementation with the HTML5 Boilerplate template. Admittedly I'm a noob so I apologize if this question seems kind of daft.
Thanks for your help!
You should probably not be including them in <head> and footer. You should just include that script you pasted at the beginning at the bottom after that video.js ref links set of scripts.
You can always paste your code at http://jsfiddle.net and ask again so it can be fixed more quickly.