Posts

Showing posts with the label HTML 5

Donate

How To Reset Cascading Dropdown Controls Using JavaScript And jQuery

-
Hi, Recently, I have encountered an issue on how to reset cascading dropdown controls in cross browsing mode (IE/Firefox/Chrome) using JavaScript and jQuery. After creating code spikes, I come up with a solution that works across major browsers. Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 $( ".reset-link" ).click( function () { ResetCascade($( this )); }); function ResetCascade(itemReset) { var formID = $(itemReset).closest( '.contact-form' ); if (formID != null ) { var firstDropDown = $(formID).find( '.cascading_group' ).find( '.firstDropDownDiv select' ); var secondDropDown = $(formID).find( '.cascading_group' ).find( '.secondDropDownDiv select' ); var thirdDropDown = $(formID).find( '.cascading_group' ).find( '.thirdDropDownDiv select' ); if (firstDropDown != null ) { var valueId = $(firstD
Post a Comment
Read more

Add Placeholder (Watermark) To Html.TextBoxFor() Helper In ASP.NET MVC 4

-
Image
After working with simple form html elements, I decided to give it a try applying the placeholder jquery framework to ASP.NET MVC4 application. The steps are similar in this post: Placeholder attribute in HTML5 form Elements except that the target controls are HTML Helpers. Basically, TextBoxFor() helper when rendered to the browser is an input text element. So, let's give it a spin. On your _Layout.cshtml, reference the jquery and placeholder scripts. <script type= "text/javascript" src= "~/Scripts/jquery-1.7.1.min.js" ></script> <script type= "text/javascript" src= "~/Scripts/placeholders.jquery.min.js" ></script> and in your MVC Form, apply it to TextBoxFor() as shown below: @model TextBoxFor.Models.Movie @{ ViewBag.Title = "CreateMovie"; } <h2>Create</h2> @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>Movi
4 comments
Read more

Placeholder Attribute In HTML5 Not Showing On IE 9 And Below (Watermark Feature)

-
Image
Given this html markup for input text element for accepting email value: <input type= "email" name= "inEmail" id= "inEmail" required= "required" placeholder= "yourname@domain.com" /> The place holder shows correctly on firefox and google chrome but not on IE 9. After searching the internet, I found placeholder framework that will fix place holders in IE 9 and below. The steps are as follows: 1. Download the placeholder script here: Placeholder js 2. Add reference to jquery and placeholder on your html file. <script src= "../Scripts/jquery-1.7.1.min.js" type= "text/javascript" ></script> <script src= "placeholders.jquery.min.js" type= "text/javascript" ></script> IE demo: That's it... :)
Post a Comment
Read more

CSS Linear Gradients Not Working In Internet Explorer 9 But Working In Firefox And Chrome

-
Image
I came across with linear gradients not working correctly in IE 9. One solution suggested by a popular forum is to utilize an image as the background of a particular element. Since I'm not a graphic designer, I searched for other solution. I came up with an alternative which is to embed an svg file instead of an image file as an element's background. The css code below won't work in IE 9. body { background-image : -ms-linear-gradient( top , #000, #666); } Here's a solution using .svg file: <svg xmlns= "http://www.w3.org/2000/svg" width= "100%" height= "100%" viewBox= "0 0 1 1" preserveAspectRatio= "none" > <linearGradient id= "g762" gradientUnits= "userSpaceOnUse" x1= "0%" y1= "0%" x2= "0%" y2= "100%" > <stop stop-color= "#000000" offset= "0" /><stop stop-color= "#666666" o
Post a Comment
Read more

Apply Drop Shadow Effect To Text Using CSS (Cross Browser Compatibility Issue)

-
Image
Out of boredom, I tried manipulating the drop shadow effect of text in a simple html file. The browsers tested where IE 9, Firefox 12 and Chrome version 32.However, I found some difficulties on controlling the drop shadow effect in IE 9. After doing some research, I found a solution using filter. Here's my simple html markup: <!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <title>Chapter 2: Drop shadows on text</title> <link rel= "stylesheet" href= "textshadowGreg.css" /> <!-- http://reference.sitepoint.com/css/conditionalcomments --> <!--[if IE ]> <link href="textshadowIE.css" rel="stylesheet" type="text/css"> <![endif]--> </head> <body> <h1>What is CSS?</h1> <p> Cascading Style Sheets (CSS) is a style sheet language used for de
Post a Comment
Read more

Donate