Blog | Icon Web Solutions - www.IconWebSolutions.info

<tr> element's style.display property hack

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

Labels: CSS, Hack, Javascript

Keep Reading...

Resolving jQuery conflict with Prototype and other libraries

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

Keep Reading...

Manually creating Sitemap.xml file

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

Keep Reading...

How to remove Blogger Navbar

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!

Keep Reading...

Simple Method to disable right-click Menus from you website

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

Keep Reading...

HTML Form code Auto Generation with Javascript Validation

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.

Keep Reading...

Free Website Hosting Account!

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!

Keep Reading...

How to create Expandable Posts in Blogger (Layout 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'.

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.

Keep Reading...

Create a Timed Slideshow with JQuery SlideViewerPro

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.

Keep Reading...

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

Saturday, August 06, 2011

<tr> element's style.display property hack

Sunday, July 04, 2010

Resolving jQuery conflict with Prototype and other libraries

Wednesday, June 30, 2010

Manually creating Sitemap.xml file

How to remove Blogger Navbar

Tuesday, August 18, 2009

Simple Method to disable right-click Menus from you website

Saturday, August 01, 2009

HTML Form code Auto Generation with Javascript Validation

Thursday, July 30, 2009

Free Website Hosting Account!

Friday, July 10, 2009

How to create Expandable Posts in Blogger (Layout Templates)

Wednesday, July 08, 2009

Create a Timed Slideshow with JQuery SlideViewerPro

Tuesday, May 19, 2009

Create a Web Slideshow using JQuery

Previous Posts

Archives