Blog | Icon Web Solutions - www.IconWebSolutions.info

element's style.display property hack

2011-08-06T05:15:00.002-04:00

In order to dynamically set the <tr> element's style.display property from Javascript code, we need to set a different value for different browsers.

For example, in IE, the Javascript code would be,

tr.style.display = 'block';

And in Chrome/Firefox, the Javascript code would be,

tr.style.display = 'table-row';

This means that the Javascript code will have to first do a browser detection and then accordingly set the style.display value.

However, a much simpler solution is to just set the style.display property to nothing - this causes it to assume its default value (which is block for IE and table-row for Firefox, Chrome, etc.)

This is how the much simpler Javascript code would look like,

tr.style.display = ''; // not a double quote, but 2 single quotes

Resolving jQuery conflict with Prototype and other libraries

2010-07-04T23:31:00.000-04:00

To resolve jQuery conflicts with Prototype and other libraries, refer to this lucid piece of documentation on the official jQuery website - http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Manually creating Sitemap.xml file

2010-06-30T00:43:00.003-04:00

Create Sitemap.xml files manually for static websites:
http://keithjameslock.com/manually-creating-sitemap-files/

How to remove Blogger Navbar

2010-06-30T00:26:00.004-04:00

To remove the Blogger Navbar, open any of the Design/Template/Layout tabs, depending on the kind of template used on the blog. Then click on "Edit HTML" in order to edit the blog template's HTML code.

Add the following CSS right below the Blog credits comment:

#navbar-iframe { display: none !important; }
#b-navbar { height: 0px; visibility: hidden; }
body { position: relative; top: -32px; }

The Blog Credits comment (sample) looks like this:

/*-----------------------------------------------

Blogger Template Style
Name: Picture Window
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */

Save the changes to the template by clicking the "Save Template" button.

Now view your blog page, the NavBar is gone!

Simple Method to disable right-click Menus from you website

2009-08-18T05:05:00.001-04:00

A simple method to deter users from stealing images from your web-pages is the use of the Javascript onContextMenu event. This event is fired when the user right-clicks on an item on a webpage. Returning false from the event handler function will disable the display of the Content Menu that pops up on a right-click. Of course, this is not a fool-proof way of guarding your content and a determined user can bypass this mechanism.

A much simpler implementation of disabling right-clicks:

Add the 'onContextMenu' event handler attribute in the <body> tag and hard-code the return value to 'false':

HTML Form code Auto Generation with Javascript Validation

2009-08-01T20:11:00.001-04:00

There are tons of websites that generate HTML form code but probably only a few that do it with client-side Javascript validation code that is executed before the form is submitted.

FormGenics.com 's HTML Form generator not only creates professional looking forms for free, but does so with Javascript validations such as:

Required Field Validation
Email Address Format Validation

By default, the validation code generates a pop-up alert but this can be easily modified to display error messages by manipulating the Document Object Model (DOM).

Modifying the generated Formgenics form in order to display error message on the webpage, rather than as a pop-up alert

Example of Auto-generated code for an Email textbox

<script language='javascript'>
function verifyMe(){
var msg='';
var email=document.getElementById('Email').value;
if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))){
msg+='- Invalid Email Address: '+email+'\n\n';}

//Modify the above line -- (2)

if(document.getElementById('Email').value==''){
    msg+='- \n\n';}
if(msg!=''){
    alert('The following fields are empty or invalid:\n\n'+msg);
    //Modify the above line -- (3)

    return false
}else{
    return true }

}
</script>

//Insert the <div> element here -- (1)

<form name='Enquiry Form' action='test.php' method='POST' enctype='application/x-www-form-urlencoded' onsubmit='return verifyMe();'>

<table id='table_form_1' cellspacing='0'>
    <tr>
        <td ><LABEL for='Email' ACCESSKEY='0' ><b style='color:red'>*</b>
        </td>
        <td ><input type='text' name='Email' id='Email' size='45' maxlength='100' value=''>
        </td>
    </tr>
    <tr>
        <td colspan='2' align='right'><input type='submit' name='submit' value='Submit'> <input type='reset' name='reset' value='Reset'><br />

        </td>
    </tr>
</table>
</form>

There are 3 changes that will have to done:

1) Insert a <div> element at the location marked (1) in the generated code above. This is what the element will look like,

2) Replace all the '\n' s in the Javascript code with <br/> 's . For example, in the line marked by (2), the code will be replaced as follows:

msg+='- Invalid Email Address: '+email+'<br/><br/>';

3) Modify the line marked by (3), by replacing the alert() function call with the DOM manipulation code that changes the contents of the <div> element we added in step 1. For example, the code in this example will be modified as:

document.getElementById('ErrorMessages').innerHTML = 'The following fields are empty or invalid:<br/><br/>'+msg;

Make sure both the opening round bracket '(' in the beginning and the closing round bracket ')' near the end are removed.

Now the error message instead of popping up will be printed in the page itself at the spot where the <div> element was added. You can add CSS styles to the div element to increase/decrease the font-size of the error message, change the font-color to red, etc.

Free Website Hosting Account!

2009-07-30T21:17:00.002-04:00

What Godaddy.com sells for a minimum of $4/month, can now be procured for free. And no, there will be no ads in your website frames, or pop-ups, or any hidden costs.

000WebHost (stands for $0.00 Webhost) is an industry leader in providing top class free web hosting services without any advertising!

When you sign up for an account, you get 1.5 GB of disk space and 100 GB Bandwidth - and the account is capable of hosting PHP-MySQL Web Applications.

You can click on this link to get your free Hosting Account!

How to create Expandable Posts in Blogger (Layout Templates)

2009-07-10T05:16:00.001-04:00

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'.

This step is same as that for Classic Templates at this link

The next step involves adding some JavaScript code to our blog template.

The JavaScript to be added should be pasted right above the closing <head> tag. This is what needs to be added. Make sure you copy the code correctly and in its entirety:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}
function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}
function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>
</b:if>

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

The third step is to add the 'Read More' link code within the <body> tags of the blog template. This code should surround the <data:post.body/> - do a CTRL+F to search for the phrase 'data:post.body'. Right above the line that the phrase is present, should be present the following line:

<div class='post-body'>
<div class='post'>
<div class='entry'>
<div class='post-body entry-content'>

In case your template is a third-party one, it is possible for this line to be completely different.

For example, if this is what your it present in your template:

<div class='post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

...it should be changed to this:

<div class='post-body entry-content'  expr:id='"post-" + data:post.id' >

     <b:if cond='data:blog.pageType == "item"'>
        <style>#fullpost{display:inline;}</style>
        <p><data:post.body/></p>
     <b:else/>
        <style>#fullpost{display:none;}</style>

        <p><data:post.body/></p>

       <span id='showlink'>
        <a expr:href='data:post.url'>Read More......</a>
       </span>
       <script type='text/javascript'>
         checkFull("post-" + "<data:post.id/>");
       </script>
     </b:if>

     <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

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

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 id="fullpost"></span> and the rest of the content to be hidden between the opening and closing <span> tags.

Create a Timed Slideshow with JQuery SlideViewerPro

2009-07-08T11:16:00.001-04:00

JQuery can be used to create timed, image slideshows such as on this webpage with the SlideViewerPro and Timer plugins.

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. In this example, there are 3 images as the 3 slides.

<!-- Timed Slideshow HTML –>

<!-- 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 slide images should be changed in the CSS rule for #banner to reflect the size of the images (also make sure all images are of the same size which gives the slideshow a consistent look and feel).

.svwp {
    width: 50px;
    height: 20px;
}         /*preloader stuff. do not modify!*/

.svwp ul {
    position: relative;
    left: -999em;
}         /*preloader stuff. do not modify!*/

.slideViewer {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #fff;
}

.slideViewer ul { /*your list of images*/
    position: relative;
    left: 0;
    top: 0;
    width: 1%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.slideViewer ul li {
float:left;
}

/* Banner Animation Styles */
#banner {
    height:303px;
    width:988px;
}
.panelwrappers {
    overflow:hidden;
}

-->
</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 as well as the SlideViewerPro and Timer JavaScript libraries of JQuery, therefore these libraries will be linked as well.

Step 4: Customizing SlideViewerPro

The SlideViewerPro plugin is completely customizable with the following options and their default values when not explicitly assigned a value in the JavaScript code:

// slideViewerPro options (defaults)
galBorderWidth: 6, // the border width around the main images

thumbsTopMargin: 3, // the distance that separates the thumbnails and the buttons from the main images

thumbsRightMargin: 3, // the distance of each thumnail respect to the next one

thumbsBorderWidth: 3, // the border width of each thumbnail. Note that the border in reality is above, not around

buttonsWidth: 20, // the width of the prev/next buttons that commands the thumbnails

galBorderColor: "#ff0000", // the border color around the main images

thumbsBorderColor: "#d8d8d8", // the border color of the thumbnails but not the current one

thumbsActiveBorderColor: "#ff0000", // the border color of the current thumbnail

buttonsTextColor: "#ff0000", //the color of the optional text in leftButtonInner/rightButtonInner

thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0

thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0

easeTime: 750, // the time it takes a slide to move to its position

asTimer: 4000, // if autoslide is true, this is the interval between each slide

thumbs: 5, // the number of visible thumbnails

thumbsPercentReduction: 12, // the percentual reduction of the thumbnails in relation to the original

thumbsVis: true, // with this option set to false, the whole UI (thumbs and buttons) are not visible

leftButtonInner: "-", //could be an image "<img src='images/larw.gif' />" or an escaped char as "&larr";

rightButtonInner: "+", //could be an image or an escaped char as "&rarr";

autoslide: false, // by default the slider do not slides automatically. When set to true REQUIRES the jquery.timers plugin

typo: false, // the typographic info of each slide. When set to true, the ALT tag content is displayed

typoFullOpacity: 0.9, // the opacity for typographic info. 1 means fully visible.

shuffle: false // the LI items can be shuffled (randomly mixed) when shuffle is true

The timed slideshow is now ready.

Create a Web Slideshow using JQuery

2009-05-19T19:09:00.002-04:00

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.

Upload Image Error on Blogger

2009-05-18T08:24:00.001-04:00

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.

Create Icons from images in Photoshop

2009-05-11T08:36:00.001-04:00

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.

How to create Expandable Posts in Blogger (Classic Templates)

2009-05-08T11:23:00.003-04:00

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.

Integrating a Blogger blog within your website or web application

2009-05-06T08:07:00.016-04:00

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.