www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

jQuery quick start snippets

When you want to include jQuery in your webpage there is no need to type it in every time, the best practice should be reused. So here is a litle help for you: Two jQuery quick start snippets: One for and one for Visual Studio. You can find download links at the bottom, but first a few words and the code.

 

You should put your javascript APIs at the bottom just above the body end tag

If you put the code to include javascript APIs at the bottom of your webpage just above </body> your page will first load the DOM elements, aka the content of your page before any (timeconsuming) javascripts. This will make your page appear to load faster. Also the DOM tree will be ready and you can skip for instance wrapping your jQuery code in some “ready()” code. The DOM is ready for manipulating when your code is reached!

 

This is the basic javascript for loading jQuery from Google CDN. Using such Content Delivering Networks as Google has many advantages, amoung other that the API can be cached on the client across webpages. However if the CDN fails, you may want to have a fallback version locally (on the server). The snippets have this fallback, so you should download a version  of jQuery and put it locally. I have choosen not to use the “protocol relative-URL”. If you want to, you should just remove the “http:” before the line where jQuery is fetched from Google.

 

Here is the code outputted by the two snippets:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
    window.jQuery || document.write('<script src="jquery.1.7.1.min.js">\x3C/script>');
</script>
<script type="text/javascript">
    (function($, window, undefined) {
      // Your code here, put just above </body>
      // $ = jQuery
    })(jQuery, window)
</script>

 

I learned from the tutorial at net tuts+ Learn jQuery in 30 days about this way to include jQuery – I can higly reccomend that tutorial (its free!). The teacher Jeffrey Way is so cool!

Download

Sublime Text snippet “jQuery”: Download

Visual studio snippet: Download

Share

Google Picasa Template: Camera, a responsive jQuery slideshow

If you like me use Google Picasa to organize your photoes, this HTML template for Google Picasa should make you clap your hands. I have created a new free Google Picasa Template based on the brilliant slideshow called “Camera” from Manuel Masia from Pixedelic. At the bottom there is a link to the jQuery based free slideshow, if you want to read more about it.

About Google Picasa Templates

Google Picasa have support for exporting selected images or image folders to HTML (well actually you can export it into what you like, XML, CSV or….). It is a simple offline template system where you are given some simple tools like template tags, includes and loops. Read more here: Picasa Web Templating System (a copy of the domentation included in the Google Picasa application). Previously I have shared a flash based slideshow Google Picasa template, which you might also want to install: Netsi Cycle Template for Google Picasa

Example implementation

The above iframe shows example output from the . It should be viewed in its own window as only there you will se the very powerfull “responsive webdesign” which is one of the very cool features of HTML slideshows generated using Camera Picasa Template.

 

First step: You can download the raw version

Dowload and install the Camera Picasa Template

or on github:
https://github.com/netsi1964/Google-Picasa-Camera-template

Next step…

This is the first release of my latest Google Picasa template – Camera Picasa Template, downloading the zip file and following the instructions found in the read-me.txt file inside the zip file will make it possibel to get the same cool slideshow of your favourite pictures. I will return at a later stage with more information and perhaps a webapp which will let you configure all the many settings that the Camera slideshow offers. If you cant wait, take a look at the “settings.js” file, simple comments found in the javascript settings file will help you.

Links

Share

How to: Add HTML markup to tell browser about RSS on page…

If you have a webpage where you have related feeds, you can add HTML markup in the HEAD section which will make many browsers autodetect your feeds. It is not rocket science simply add the following to the HEAD section:

 

<link rel="alternate" type="application/rss+xml" title="Your RSS title" href="The RSS URL" />

 

Thats all there is to it! Smiley

 

Other usefull information related to RSS
  • If you create the feed remember til set the ContentType to “application/xml”
  • You can also add an XSLT to transform you output on the client (see for instance here: http://www.dr.dk/nyheder/service/feeds/allenyheder) If you view the feed in Chrome it will be a transformed output, but it seems that Firefox will not transform the feed.
Share