web hosting
build a website
Browsing articles from "April, 2013"

Javascript click image to play video

Apr 5, 2013   //   by Anthony Devine   //   Website Development tips  //  Comments Off on Javascript click image to play video

If you want a still image to be displayed on your Webpage with a play button on it and then when that image is clicked it is replaced with a streaming video you can do it with the following code. I have added 2 examples 1 for Youtube and 1 for Vimeo.

Youtube

<div style="width:620px; height:377px;">
<script type="text/javascript" src="http://www.daemondesigns.co.uk/wp-content/uploads/2013/04/jquery-1.4.2.min_.js"></script> </p>
<div id="ytapiplayer2" style="display:none;">
<object width="620" height="377"><param name="movie" value="http://www.youtube.com/v/_0JXWplBsis?fs=1&hl=en_US&rel=0&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/_0JXWplBsis?fs=1&hl=en_US&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="620" height="377"></embed></object></p>
</div>
<p><img src="http://www.daemondesigns.co.uk/wp-content/uploads/2013/04/Contact-Us-Image.jpg" id="imageID" /><br />
<script type="text/javascript">
$('#imageID').click(function() {
$('#ytapiplayer2').show();
$('#imageID').hide();
});
</script>
</div>
Vimeo
<div style="width:620px; height:377px;">
<script type="text/javascript" src="http://www.daemondesigns.co.uk/wp-content/uploads/2013/04/jquery-1.4.2.min_.js"></script></p>
<div id="ytapiplayer22" style="display:none;">
<iframe src="http://player.vimeo.com/video/21106256?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1" width="620" height="377" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
</div>
<p><img src="http://www.daemondesigns.co.uk/wp-content/uploads/2013/04/iPad-Lifestyle-Play-Button.jpg" id="imageID2" alt=" " /><br />
<script type="text/javascript">
$('#imageID2').click(function() {
$('#ytapiplayer22').show();
$('#imageID2').hide();
});
</script>
</div>
If we look at the Vimeo example. The div id=”ytapiplayer22″(div with video in) is set to display=none to begin with, then the code gets the image id=”imageID2″(the still image) and says when that is clicked show the hidden div ytapiplayer22(which is the one the video is in) and hide the div id=”imageID2″(which is the still image). The video is set to autoplay by adding ;autoplay=1 onto the end of the code.

The Youtube example is exactly the same method except for the way the video is embedded in an object instead of an iframe.

Set specific page headers in WordPress

Apr 5, 2013   //   by Anthony Devine   //   Website Development tips  //  Comments Off on Set specific page headers in WordPress

In the WordPress standard theme it is not always relatively straight forward to create a different page header for each page. So if you want a default header for the Website and then on a few pages this to alter you can do this using PHP in your theme.

What you need to do in the backend of your site in Apperance > Editor, copy the code out of your header.php file and then paste this code into a new file called headerdefault.php. Once you have done that then replace the code in your header.php file with the following code:

<?php
if (is_page('contact')){
include(TEMPLATEPATH.'/headercontact.php');}
elseif (is_page('portfolio')){
include(TEMPLATEPATH.'/headerportfolio.php');}
elseif (is_page('about-me')){
include(TEMPLATEPATH.'/headerabout.php');}
else {
include(TEMPLATEPATH.'/headerdefault.php');}
?> 
This code basically says if the page title is contact then use the header headercontact.php, or if the title is portfolio then use the header headerportfolio.php, or if the title is about-me then use the header headerabout.php and if the page title is something different to those titles then use the default header headerdefault.php which you have just created. So now you need to create the headers; headercontact.php, headerportfolio.php and headerabout.php use the code from the headerdefault.php in each of these and change the code accordingly to be whatever you want for each of the pages.

This can also be done for the sidebars and footers, you just need to use the same proceedure as above. This was the easiest and fastest way I found to code this up, this are probably plugins that can do this for you now but if you do not want all the additional bulk installed onto your site then use this method.

Display catalog products into Magento static pages

Apr 5, 2013   //   by Anthony Devine   //   Website Development tips  //  Comments Off on Display catalog products into Magento static pages

There maybe a time when you may want to create a page on your Magento site which pulls in products from multiple categories you have setup. I have recently setup a page where I needed to display a heading saying Summer clothing and then text underneath it and then under that a few example of Summer clothing and then under that the same again for Spring and Winter all on the same page.

The way I got round this was to create 3 new categories; Summer, Spring and Winter and then in each of those categories add in 4 products. Once these categories were setup and an index was run on the Website I then created a static page with all of the relevant text and heading that I wanted on the page and where I wanted the products to appear I used the following code:

{{block type="catalog/product_list" category_id="281" template="catalog/product/list.phtml"}}
The code basically pulls in all products from the category with the ID 281. The Category ID is found when you click on your category it will show the ID at the top next to the name. The link to the block type and the template in the above code may differ for each installation of Magento as the file structure maybe different but this can easily be located using FTP. The above code is used 3 times on the page for the Summer products, Spring products and Winter products each with their own ID numbers.

Once the products have been pulled in you can then style the CSS to make them look as you wish.

Using this method helped me out enormously as it is dynamic and the prices and links will always be correct even when they are altered. Previously I was adding in the images, prices and links manually and finding it to take a long time to do and also hard to make sure it is all up-to-date.

If you find that this does not work for you then first make sure that you categories are enabled and your products that are in your categories are live and are in stock. Then run an index and clear your cache, then check that your IDs are correct and also check to make sure that the links to the product_list and list.phtml are correct.

You can also create your own phtml file and link to that. So if you want extra features added to your products such as a Javascript gallery effect to them, then you can duplicate the list.phtml file and name it something different and in that file add in the relevant javascript code and then upload this file and change the links to the file in your static page.

Responsive Web Design

Apr 1, 2013   //   by Anthony Devine   //   Website Development tips  //  Comments Off on Responsive Web Design

There are a number of ways to build Websites for different devices, you can have an app that renders a Website just for an iphone or an android device or maybe creating a desktop Website and a seperate mobile Website to work on all mobile devices.

The method I prefer to use is Responsive Design. Basically Responsive Web Design is building 1 Website which will resize and adapt to all different sized devices, so your site will look differently on a desktop machine to a tablet and a mobile phone. It works by using media queries, which allows you to specify how a page should be displayed when the screens max-width is a certain pixel size or when its min-width is a certain size.

Media Queries look like this:

@media only screen and (min-width: 768px) and (max-width: 959px) {

}
The above says if the screen width is between 768px and 959px then use the css that is specified between the {}. That example is a good size to use for tablet devices.

With media queries you have a few options of how you can code up and move items around your pages.

  • The first option would be the easiest option, which is to give all images a percentage size instead of a pixel size, as this will automatically scale down when you view your Website on different devices, so if you had 2 images floated next to each other you could give each of them a 50% width and this will then alter automatically for you.
  • The second option is to have a different sized image for each device and then when you are on a certain device show 1 image and hide all of the others. An example of this is:
    
    <html>
    <body>
    <div class="largeimage"><img src="imagelarge.jpg"></div>
    
    <div class="tabletimage"><img src="imagetablet.jpg"></div>
    
    <div class="mobileimage"><img src="imagemobile.jpg"></div>
    
    <div class="widemobileimage"><img src="imagewidemobile.jpg"></div>
    </body>
    </html>
    
    /*CSS below*/
    
    /*Default Layout: 980px*/
    
    .largeimage{display:block;}
    .tabletimage{display:none;}
    .mobileimage{display:none;}
    .widemobileimage{display:none;}
    
    /*Tablet Layout: 768px*/
    @media only screen and (min-width: 768px) and (max-width: 959px) {
    .largeimage{display:none;}
    .tabletimage{display:block;}
    .mobileimage{display:none;}
    .widemobileimage{display:none;}
    }
    
    /*Mobile Layout: 320px*/
    @media only screen and (max-width: 767px) {
    .largeimage{display:none;}
    .tabletimage{display:none;}
    .mobileimage{display:block;}
    .widemobileimage{display:none;}
    }
    
    /*Wide Mobile Layout: 480px*/
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .largeimage{display:none;}
    .tabletimage{display:none;}
    .mobileimage{display:none;}
    .widemobileimage{display:block;}
    }
    
    So as you can see you can specify which images you want to show or hide depending on what the screen size is. The good part about this is that you do not need to work out any percentage sizes for your images and you can make your page look as accurate as you wish for each device. The bad points about this method are that it can be time consuming to do this for each page and it also puts more of a load on your server as the site loads up all of the image on the page and once the style sheet is loaded it hides them accordingly, the user will not see all of your images be loaded but the size of your page and style sheet will increase so keep this in mind.
  • The final way that you can use media queries is to have everything displayed on desktop mode and when you go down to smaller devices such as a mobile phone you can hide items by using display:none. This reduces the amount of functionality that a user will have when using your Website on a smaller device however some fucntions are not always neciserally needed, it also makes it easier for you sometimes to just hide something instead of completly changing the layout of your page to fit it in. If you want to hide an item for a smaller device but still want to give the user the option to have all of the functionality you can provide them a link to your full desktop site.

There is no specific sizes to use for which widths should be used for your media queries and this will be altering constantly as new sized devices are coming out all the time, but the above sizes are good ones to use.

Responsive Design is done by using CSS3 and certain browsers mainly older versions of Internet Explorer do not use CSS3. The way to get around this is to load in Javascript into your page, a popular libary using is Response JS. This Javascript finds out what browser you are using and then loads in the script if your browser requires it.

Developing template/ theme on a Content Management System or E-Commerce system such as WordPress or Magento from scratch is not always an easy option if it is your first time and it can be quite time consuming to complete. There are options you have if you do not wish to start building a responsive theme from scratch.

There are quite a few Responsive themes you can purchase for Magento, one of them is: http://www.magentocommerce.com/magento-connect/response-responsive-magento-theme-7523.html. There was a free Responsive Theme that I used myself on a Website called Respond and I have looked around and this theme seems to have been taken down now from the Website, I do however still have a copy of the theme if you wish to use it here: http://www.daemondesigns.co.uk/wp-content/uploads/2013/04/Respond-Theme-master.zip. Both of these themes are designed for Magento COmmunity, I have used the free Respond theme on Magento Enterprise and it works for that version however there are some parts where code has been stripped out for some of the extra funtionality of Magento Enterprise, this is not a big issue tho as you can just download the basic MAgento Enterprise theme and copy and paste them missing code into your Respond theme.

There are options for WordPress the best free theme I have found is http://www.dessign.net/simple-photo-responsive-theme/. This is really easy to setup and modify.

Once you have you themes installed you can modify them as much as you like to look just like your design. The above themes work in all modern browsers and older versions of Internet Explorer by using Javascript.

You do not need any mobile devices really to test out how your Website looks in the smaller resolutions. The easiest way to test out your Website is to grab the courner of your browser Window and drag it inward to reduce the size and you will see your Website automatically reducing to the correct size.

Give it a go and have fun creating your first mobile Websites!