Hi
In my recent project, i had used window media player to play some mp3 file then it was working fine with IE but it was not working with firefox.
Then I fixed the problem using this code. I hope it will help to other also
This code was not supporting on wordpress so i have attached in .doc file
Hi
I was getting stack overflow at line 0 on my asp.net page. Generally this error will come if we will keep
<pages smartNavigation="true" maintainScrollPositionOnPostBack="true" />
in web config or asp.net page header part.
You can also disable that error by “Disable Script Debugging” option inside of Internet Explorer. If you know any other root cause of this issue then let me know.
Hi
So many time we will get scenario to create accessibility option in HTML or asp.net website. Where user can change the color or font of all web pages of html and .aspx page.
We can do this task using 2 approaches
1. Using LocalStorage or SessionStorage feature of HTML 5.0
2. Using Cookies in Javacscript.
If you have to implement this feature in IE8 onward browser then using localstorage or session storage will be very easy.
If you have to implement in all older version browser then cookies approach is the best option
We can do this task like this. I have written this code on basis of my requirement.
Step1: Create the HTML page like this for HTML website
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleAccessilility.css" rel="stylesheet" type="text/css" />
<script src="Accessilility.js" type="text/javascript"></script>
<script type="text/jscript">
function getRadioCheckedValue() {
var rblopts = document.getElementsByName("group1");
if (rblopts[0].checked) {
FontSize('FontSmall');
// alert('Small');
}
if (rblopts[1].checked) {
FontSize('FontMedium');
}
if (rblopts[2].checked) {
// alert('Extra Larger');
FontSize('FontLarge');
}
if (rblopts[3].checked) {
// alert('Extra Larger');
FontSize('FontExtraLarge');
}
//code for color change
var rbl1 = document.getElementsByName("group2");
if (rbl1[0].checked) {
//ColorSilver
ColorChange('ColorHighContrast');
}
if (rbl1[1].checked) {
ColorChange('ColorStandard');
}
}
</script>
</head>
<body onload="GetColorChange();GetFontSize();">
<input type="radio" value="Small" id="radio1" name="group1" /> Small
<input type="radio" value="Medium" id="radio2" name="group1" /> Medium
<input type="radio" value="Large" id="radio3" name="group1" /> Large
<input type="radio" value="X-Large" id="radio4" name="group1" /> X-Large
<br /> <br />
<input type="radio" value="Small" id="radio5" name="group2" /> High Contrast
<input type="radio" value="Medium" id="radio6" name="group2" /> Standard Contrast
<br /> <br />
<input type="button" id="btnClik" value="Click Here" onclick="getRadioCheckedValue();" />
<div id="DivColor">
<div id="DivFontSize">
Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad.
Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad
<br />
<br />
</div>
</div>
</body>
</html>
For aspx page design and javascript code will be like this
<%@ Page Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true" CodeFile="Test1.aspx.cs" Inherits="Test1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link rel="shortcut icon" href="http://www.domain.com/iconname.ico">
<title></title>
<link href="StyleAccessilility.css" rel="stylesheet" type="text/css" />
<script src="Accessilility.js" type="text/javascript"></script>
<script type="text/jscript">
function getRadioCheckedValue() {
var radio1 = document.getElementById('<%=RadioButtonList1.ClientID %>');
var rblopts = radio1.getElementsByTagName("input");
if (rblopts[0].checked) {
FontSize('FontSmall');
// alert('Small');
}
if (rblopts[1].checked) {
FontSize('FontMedium');
}
if (rblopts[2].checked) {
// alert('Extra Larger');
FontSize('FontLarge');
}
if (rblopts[3].checked) {
// alert('Extra Larger');
FontSize('FontExtraLarge');
}
//code for color change
var radio2 = document.getElementById('<%=RadioButtonList2.ClientID %>');
var rbl1 = radio2.getElementsByTagName("input");
if (rbl1[0].checked) {
//ColorSilver
ColorChange('ColorHighContrast');
}
if (rbl1[1].checked) {
ColorChange('ColorStandard');
}
}
function EnableColorChange() {
var radio2 = document.getElementById('<%=RadioButtonList2.ClientID %>');
var rbl1 = radio2.getElementsByTagName("input");
var y2 = GetColorChange();
if (y2 == "ColorHighContrast") {
rbl1[0].checked = true;
}
else if (y2 == "ColorStandard") {
rbl1[1].checked = true;
}
}
//on page load for applying the font size on all pages
function EnableFontSize() {
// var size = window.sessionStorage["myKey"];
var radio1 = document.getElementById('<%=RadioButtonList1.ClientID %>');
var rblopts = radio1.getElementsByTagName("input");
var y = GetFontSize();
if(y == "FontSmall")
{
rblopts[0].checked = true;
}
else if (y == "FontMedium") {
rblopts[1].checked = true;
}
else if (y == "FontLarge") {
rblopts[2].checked = true;
}
else if (y == "FontExtraLarge") {
rblopts[3].checked = true;
}
}
</script>
<style type="text/css">
.style1
{
width: 100%;
font-size:25px;
background-color:Blue;
}
</style>
</head>
<body onload="GetColorChange();GetFontSize();EnableColorChange();EnableFontSize();">
<form id="form1" runat="server">
<div>
<!-- #BeginEditable "content" -->
<h2>
ACCESSIBILITY OPTIONS
</h2>
<div>
<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem>Small</asp:ListItem>
<asp:ListItem>Medium</asp:ListItem>
<asp:ListItem>Large</asp:ListItem>
<asp:ListItem>X-Large</asp:ListItem>
</asp:RadioButtonList>
<br /> <br />
<asp:RadioButtonList ID="RadioButtonList2" runat="server">
<asp:ListItem>High Contrast</asp:ListItem>
<asp:ListItem>Standard Contrast</asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:Button ID="Button3" runat="server" OnClientClick="getRadioCheckedValue();"
Text="Button" onclick="Button3_Click" />
<br />
</div>
<!-- #EndEditable "content" -->
</div>
<div id="DivColor">
<div id="DivFontSize">
Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad.
Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad Your Text is the text asdasdasd asdsadsad dasdsad sadsadsad
</div>
</div>
</form>
</body>
</html>
.
Step 2: Write the CSS in external css like this
body
{
}
html
{
font-family:Tahoma;
font-size:12px;
}
.FontSmall
{
font-size: small;
}
.FontLarge
{
font-size:large;
}
.FontMedium
{
font-size:medium
}
.FontExtraLarge
{
font-size:x-large;
}
.ColorHighContrast
{
background-color:#333333 !important;
}
.ColorStandard
{
}
Step3: Write the javascript code in Accessilility.js like this
// at click event, for storing font size in session
function FontSize(size) {
document.getElementById("DivFontSize").className = size;
// window.sessionStorage["myKey"] = size;
// code for storing in html cookie
var c_name = "size";
var value = size;
var exdays = 365;
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
//on page load for applying the font size on all pages
function GetFontSize() {
// var size = window.sessionStorage["myKey"];
//Code for fetching from cookie
var c_name = "size";
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == "size") {
document.getElementById("DivFontSize").className = y;
return unescape(y);
}
}
}
// at click event, for storing color in session
function ColorChange(colorName) {
document.getElementById("DivColor").className = colorName;
// window.sessionStorage["myKey1"] = colorName;
var c_name2 = "colorName";
var value2 = colorName;
var exdays2 = 365;
var exdate2 = new Date();
exdate2.setDate(exdate2.getDate() + exdays2);
var c_value2 = escape(value2) + ((exdays2 == null) ? "" : "; expires=" + exdate2.toUTCString());
//alert(value2);
document.cookie = c_name2 + "=" + value2;
}
// for applying the color on all pages on page load
function GetColorChange() {
// var colorName = window.sessionStorage["myKey1"];
var i2, x2, y2, ARRcookies2 = document.cookie.split(";");
for (i2 = 0; i2 < ARRcookies2.length; i2++) {
x2 = ARRcookies2[i2].substr(0, ARRcookies2[i2].indexOf("="));
y2 = ARRcookies2[i2].substr(ARRcookies2[i2].indexOf("=") + 1);
x2 = x2.replace(/^\s+|\s+$/g, "");
if (x2 == "colorName") {
document.getElementById("DivColor").className = y2;
return unescape(y2);
}
}
}
.
Step 4: For apply on other page just call that Javascript and CSS library and keep in two DIV i.e for Color and font
Hi
we can call “javascript function on page load of content page of master page in asp.net” in code behind file like this
protected void Page_Load(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(GetType(), ClientID, "EnableColorChange();EnableFontSize();", true);
}
Note: Here i have written two javascript functions which one i m calling on page load.
Chandradev's Blog 