Category: HTML5 CSS3

Keyboard Tab Key Access and Applying CSS3 styles For list items in ie8

We can provide Tab key access for list items in IE8  browsers by either using an overlay button and giving tabindex or by applying tab-index as zero .

For applying css3 styles and use the list item as a button ,this overlay concept will serve.

For example

<li class=”true” style=”display: list-item;”>
<input class=”rollover_scenario_btn” type=”button” tabindex=”1″ >
</li>
the example above can serve css3 styles and tab key access.
or for tab key access can be given using
<li class=”true” style=”display: list-item;” tabindex=”0″>
Advertisements

Jquery split() with IE8 issue

Jquery split() with html tags and browser

 I am working on HTML 4.0 + HTML 5 with jquery. I have a scenario as follow,

I want to create a list using ul, li structure from following string

String:

data =”

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<ul>

       <li>Test content 1</li>

       <li>Test content 2</li>

       <li>Test content 3</li>

</ul>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. ”

so I need to create a structure at runtime from above string as follow,

Strucuture:

<ul>

       <li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li>

       <li>Test content 1</li>

       <li>Test content 2</li>

       <li>Test content 3</li>

       <li><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></li> </ul>

So I need to group non-tag data in ul, li list inside the paragraph tag <p></p> and remaining

data which is already inside the <li></li> structure as it is.

So I have create the function as follow,

 // Convience function for creating new jQuery objects
        function $tag(tag, id, css, style) {
            var element = document.createElement(tag);
            if (id) { element.id = id; }
            if (css) { element.setAttribute("class", css); }
            if (style) { element.setAttribute("style", style); }
            return $(element);
        }

code:
var ul_strucure = $tag("ul", false, false, false);

var temp = $tag("div", false, false, false).append(data);

$($(temp).children().filter("ul")).empty();

var nontag_data = "";

nontag_data = $(temp).html().split("<ul>").join("").split("</ul>").join("*<ul>*").split("*");

var ul_data = $tag("div", false, "", false).append(data["transcript_data"]).children()
              .filter("ul");

 var j = 0;

for (i = 0; i < nontag_data.length; i++) {

    if (nontag_data[i].toLowerCase() != "<ul>" && nontag_data[i]) {  

               $(ul_strucure).append($tag("li", false, false, false)

               .append($tag("p", false, false, false).html(nontag_data[i])));
        }
    else if (nontag_data[i].toLowerCase() == "<ul>" && nontag_data[i]) {

     for (k = 0; k < $(ul_data[j]).children().length; k++) {

          $(ul_strucure).append($tag("li", false, false, false)

               .html($($(ul_data[j]).children()[k]).text()));

                 }

             j = j + 1;
          }
     }

The above code is working fine in IE9, IE10, mozilla, chrome, safari

So split()  is return an array with given splitter expression.

but in IE8 I face a problem that the split method not returning the array for same above code,

After 2 days I found the solution as follow,

in IE8 inside < and >  means HTML tags and automatically convert it in to the upper case,

So I have updated the my function for browser specific as follow,

 
if ($.browser.msie && $.browser.version < 9) {
      nontag_data = $(temp).html().split("<UL>").join("").split("</UL>").join("*<UL>*")
                     .split("*");
      }
   else {
      nontag_data = $(temp).html().split("<ul>").join("").split("</ul>").join("*<ul>*")
                     .split("*");
   }

SO the small correction in code, It will work 
all browsers