Blog | Icon Web Solutions - www.IconWebSolutions.info: May 2009

Tuesday, May 19, 2009

Create a Web Slideshow using JQuery

The final result of this blog post is a web accessible slideshow created using HTML, CSS and JavaScript (the JQuery library) as in this page

Step 1: The HTML Content

In Step 1, we add the HTML markup for the slides' contents within the <body> of the webpage. There is no limit on the number of slides.

<div id="slideshow">
<div id="slidesContainer">
    <div class="slide">
    <h2>  </h2>
        <p>  </p>
    </div>
    <div class="slide">
    <h2>  </h2>
        <p>  </p>
    </div>
    <div class="slide">
    <h2>  </h2>
        <p>  </p>
    </div>
    <div class="slide">
    <h2>  </h2>
        <p>  </p>
    </div>
</div>
</div>
<!-- Slideshow HTML ->

Step 2: The CSS Content

The next step, is to add the CSS content within the <head> element of the webpage that consists of the slideshow style rules. These rules can be modified according to the need; for example, the height and width rules of the slides, etc. Two images named 'control_left.jpg' and 'control_right.jpg' with height equal to the height of #slideshow are required.

#slideshow {
    margin: 0 auto;
    width: 580px;
    height: 320px;
    position: relative;
}

#slideshow #slidesContainer {
margin: 0 auto;
width: 500px;
height: 320px;
overflow: hidden; /* allow scrollbar */
position: relative;
}

#slideshow #slidesContainer .slide {
margin: 0 auto;
width: 480px; /* reduce by 20 pixels */
height: 320px;
}

.control {
display: block;
width: 39px;
height: 320px;
text-indent: -10000px;
position: absolute;
cursor: pointer;
}

#leftControl {
top: 0;
left: 0;
background: transparent url(images/control_left.jpg) no-repeat 0 0;
}

#rightControl {
top: 0;
right: 0;
background: transparent url(images/control_right.jpg) no-repeat 0 0;
}

.slide p {
margin-left: 55px;
text-align: center;
}

.slide h2 {
font: italic 20px Georgia, "Times New Roman", Times, serif;
color: #ABAAAA;
text-align: center;
letter-spacing: -1px;
}

-->
</style>

Step 3: The JavaScript content

In this step, we insert the JavaScript code to manipulate the DOM for the slideshow effect. Our code is dependent on the JQuery JavaScript library, therefore the library will be linked as well.

$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;

// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
      'float' : 'left',
      'width' : slideWidth
    });

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert controls in the DOM
$('#slideshw')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');

// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
});

// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});

</script>

The web-based slideshow is now ready. Clicking on the right/left arrow images have the effect of moving the slides right/left one at a time.

Keep Reading...

Monday, May 18, 2009

Upload Image Error on Blogger

Uploading an image on a blog post with Google's Chrome browser does not work, displaying the error message: "blogID: Required field must not be blank"

This is suprising since both Blogger and Chrome are products of the same company - Google - and the problem seems to be browser compatibility!

The simple solution is use another browser, preferably, Mozilla Firefox. If the blog is published to an external server/host, the images are uploaded into the 'uploaded_images' folder.

Keep Reading...

Monday, May 11, 2009

Create Icons from images in Photoshop

To create an Icon file (.ico extension), from an image file using Photoshop, we will need the ICO file plug-in for Photoshop. This plug-in can be downloaded from the Telegraphics website at this URL (for Windows). For other platforms, download the appropriate version from here.

Save, the downloaded plugin file - ICOFormat.8bi - to the 'File Formats' folder of Photoshop at the absolute path: C:\Program Files\Adobe\Photoshop xx\Plug-Ins\File Formats

Test if Photoshop loads the plug-in. Open Photoshop, click 'File' > 'New...'; then 'File' > 'Save As...' - click the "Format" drop-down list to check if the option 'ICO (Windows Icon) (*.ICO)' ia available. If it is, the plug-in was successfully loaded; if not, check if the correct file was copied in the 'File Formats' folder. Make sure you have copied the file with extension .8bi and not the one with extension .zip

Now, any image file can be saved as an Icon or a *.ico file provided the each of height and width of the image is less than or equal to 256 pixels. If your image is bigger than 256 X 256, resize it to fit between these dimensions (this is true for Photoshop 6.0). Apparently, the dimensions need to be 32 X 32 in case of Photoshop CS3.

The generated icon file can be added to your website to appear next to your website’s URL in the address bar of the browser tab/window. For this, save your icon file as 'favicon.ico' for most browsers to be able to find it. Also, put it in the same folder as the webpage with which it is used.

Within the <head> tags of the webpage, add the following HTML code: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Open your webpage in Firefox to test if the icon shows up. I was not able to test it in IE or Chrome locally, however, it displayed in these browsers when I uploaded the pages to my host server.

Keep Reading...

Friday, May 08, 2009

How to create Expandable Posts in Blogger (Classic Templates)

Blogger.com gives the option to choose the number of blog posts to display on the main page and then displays the contents of the posts in their entirety. When posts are long or composed of a considerable number of lines, it may be a good idea to show partial content to the user with a "Read More" link that shows the whole post. The article will explain how to create blog posts with partial content displayed or more aptly termed as 'Expandable Posts'.

First, set 'Enable Post Pages' to 'Yes' in the blog settings. Doing this will give a separate HTML page to each individual post.

The next step involves adding some CSS within the <style> tags of the blog template. The opening style tag looks like this: <style type="text/css"> and the closing tag: </style>

The CSS to be added should be somewhere in between the opening and closing tags above - to be safe, put it right above the closing tag. This is what needs to be added:

For Classic Templates:

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage>
span.fullpost {display:inline;}
</ItemPage>

Your blog skin/theme is either a template or a layout, but not both. If there are elements that start with '<$' and end with '$>' it is a Classic Template; else it is a Layout.

The third step is to add the 'Read More' link code within the <body> tags of the blog template. This code should be added right after the <$BlogItemData$> (for classic templates):

For Classic Templates:

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>

The 'Read More!' can be replaced to any other alternative message such 'Keep Reading', etc.

For example, for Classic Templates, this is how it would look:

<$BlogItemBody$>
<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more...</a>
</MainOrArchivePage>

At this stage, save the template changes done so far.

The final step is to add the <span> tags whenever a blog post is made.

On the right-hand top corner of the editor, click on 'Edit HTML'.

Put the partial content that is to be displayed above the <span class="fullpost"></span> and the rest of the content to be hidden between the opening and closing <span> tags.

Keep Reading...

Wednesday, May 06, 2009

Integrating a Blogger blog within your website or web application

Every business that has a presence on the web, more or less, wishes to have a blog on their website. A blog allows a business to connect with its existing and potential customers informally. While it a fairly simple and straightforward to register an account on any of the free blogging websites, there are several issues that arise:

The blog and hence the entries would be stored on the blogging website's servers - sometimes businesses may not like this and would want more control over their proprietary posts, particularly those that are knowledge-oriented.
The blogging websites provide free skins/themes, however, a business website would want the blog to rhyme with their website's default skin/theme.

A possible solution would be to look for an open-source Blog application and integrate it with your website or web application. This would resolve both issues but the onus and responsibility of maintaining the Blog application would rest on the website administrator/developer. Basically, flexibility with a price tag!

Fortunately, there exists a better, second solution - one that comprises the best of both worlds. In short: flexibility with no price to pay for it.

The free blogging website - Blogger.com - allows publishing and archiving your blog/blog entries on your own hosting server/account as well as to customize the blog to reflect the skin/theme of your choice.

The first thing to do is register an account to create a blog - for more information on this, visit the Blogger homepage

Next, log in and from the Blogger Dashboard, click on 'Settings'

Then, click 'Publishing.

Put information such as the hosting server's FTP address (1), the URL of the website from where the blog will be accessed (2), path of the folder within the root folder of the hosting server/account (3), filename with which the blog will be accessed (4), Feed filename (5), FTP Username (6) and Password (7). For Blogger help on this, visit this link

Save these settings.

Blogger will now let you publish posts, comments, etc directly to your host rather than hosting it itself.

The second issue requires a bit of work and entails having knowledge of HTML, CSS and some Javascript. This is because Blogger does not allow WYSIWYG layout customization for blogs hosted on outside servers.

The trick is to choose one of the default available skins/themes and then hacking your way into it to your website's default skin/theme. One thing to be wary of while doing this is the Blogger Template tags (that look something like this: <$BlogPageTitle$>). Blogger tags act like placeholders for various things such as your posts, comments, title, etc, the content of which can be administered from the Blogger Dashboard.

Besides this, any HTML/CSS/Javascript can be modified, removed, added to change the look-and-feel of your blog.

To do this, click on 'Template' from the Dashboard and choose 'Edit HTML' option.

Keep Reading...

Tuesday, May 19, 2009

Create a Web Slideshow using JQuery

Monday, May 18, 2009

Upload Image Error on Blogger

Monday, May 11, 2009

Create Icons from images in Photoshop

Friday, May 08, 2009

How to create Expandable Posts in Blogger (Classic Templates)

Wednesday, May 06, 2009

Integrating a Blogger blog within your website or web application

Previous Posts

Archives