As all of us know, we, developers, are fighting for the best use of internet space. We want better, faster pages with more info and functionality on them.
Not many of us knows about how to do it. Recently I discovered a new Web Performance Tool, which might be helpful for all us who works with code. I also found a good tutorial. which you can watch on YouTube and my blog. In a ddition I discovered a couple good books written by Steve Souders and will try to read them. As far as I tried, his tool does not work for IE, but it works for Firefox. He has a very interesting site, which I will go through. I promise to post my feedback about his books and site.
Friday, December 14, 2012
Free video tools online
Wanted to work with video files. I began researching free video tools on Internet.
First what I found is Video editor and converter
I will add some more tool as I find them.
First what I found is Video editor and converter
I will add some more tool as I find them.
Enhancements: infographics and new SEO free tools
Researching new tools to enhance websites and increase traffic, I found some really cool sites.
Here they are:
For infographics and data visualization tools:
1. on Techrepublic.com
2. on Edudemic.com
3. on Netmagazine.com
For infographics using jQuery:
1. JScharts
2. Statmyweb.com
3. Designmodo
Some good examples:
1. http://www.gatesfoundation.org/infographics/Pages/progress-against-polio.aspx
2. http://columnfivemedia.com/work-items/ge-interactive-chinese-heart-health/
3. http://www.cbs.nl/en-GB/menu/themas/gezondheid-welzijn/cijfers/extra/2010-ziekenhuisopname.htm
Internet community establish some good free sites to increase traffic. Here they are:
1. REDDIT
2. PAPER
3. TRIBERR
I promise to my readers to try at least one of the sites to increase traffic through my site and my blogs.
Here they are:
For infographics and data visualization tools:
1. on Techrepublic.com
2. on Edudemic.com
3. on Netmagazine.com
For infographics using jQuery:
1. JScharts
2. Statmyweb.com
3. Designmodo
Some good examples:
1. http://www.gatesfoundation.org/infographics/Pages/progress-against-polio.aspx
2. http://columnfivemedia.com/work-items/ge-interactive-chinese-heart-health/
3. http://www.cbs.nl/en-GB/menu/themas/gezondheid-welzijn/cijfers/extra/2010-ziekenhuisopname.htm
Internet community establish some good free sites to increase traffic. Here they are:
1. REDDIT
2. PAPER
3. TRIBERR
I promise to my readers to try at least one of the sites to increase traffic through my site and my blogs.
Tuesday, November 27, 2012
Rename-it
Today I had to rename a lot of files and my coworkers offered me a very nice solution. I was eager to learn something new and I did. Here's a site to download free program to rename multiple files. I hope, to download and start to plat with it. I wish myself to learn everyday I go to work. Today I accomplished my goal: I learned.
Tuesday, November 20, 2012
Unicode symbol map for PDFs
I'm checking new PDFs from SRTR ADR for section 508 accessibility. My first check shows me that document has some problems with Unicode mapping. My editors don't know what to do. So, I searched Internet for the answers. Actually, I found very good site which is very helpful solving my problem. I copied some mathematical symbols into my pdf files and it solves the problem with accessibility. I'm not a first one, who has problem with mapping UNICODE symbols, so I offer you a real help. I hope, it will work for you.
Tuesday, October 23, 2012
Color contrast
Working on section 508, I've learned a lot about color contrast. First of all, there is a wonderful online tool for finding a right colors for your template. I used old color and found out what I should do with them to improve a color contrast. To improve a color contrast, I use another good online tool. I think, any developer should know about color contrast idea and use for site development. I hope, I found a right colors for my SRTR gov-site.
Tuesday, August 28, 2012
Section 508 and Skip navigation
Today I dedicated my time to another "Section 508"-feature such Skip Navigation. It's quite important for Gov-sponsered sites. This feature could be us by Internet users, who are blond and don't use a mouse.
Here's a complete code for "skip navigation" feature.
HTML code after <body>-tag:
<div id="skipmenu">
<a href="#skip" class="skippy">Skip To Main Content</a>
<a name="top"></a>
</div>
HTML code after "main" content begins:
<div><a name="#skip" tabindex="-1" id="skip"> </a></div>
CSS code which goes with HTML:
div#skipmenu{
position:relative;
}
div#skipmenu a.skippy{
position:absolute;
top: -1000px;
left:-1000px;
height: 1px;
width: 1px;
overflow:hidden;
}
div#skipmenu a.skippy:active, div#skipmenu a.skippy:focus, div#skipmenu a.skippy:hover{
position: absolute;
top:auto;
left:auto;
width:100%;
height: 1em;
width: auto;
font-size:1em;
font-weight:bold;
width:100%;
padding-bottom:15px;
color: black;
z-index:100;
text-align:right;
margin-bottom:25px;
}
In addition, I found quite interesting site about SKIPPING. I think, it's going to be interesting for many of us.
Here's a complete code for "skip navigation" feature.
HTML code after <body>-tag:
<div id="skipmenu">
<a href="#skip" class="skippy">Skip To Main Content</a>
<a name="top"></a>
</div>
HTML code after "main" content begins:
<div><a name="#skip" tabindex="-1" id="skip"> </a></div>
CSS code which goes with HTML:
div#skipmenu{
position:relative;
}
div#skipmenu a.skippy{
position:absolute;
top: -1000px;
left:-1000px;
height: 1px;
width: 1px;
overflow:hidden;
}
div#skipmenu a.skippy:active, div#skipmenu a.skippy:focus, div#skipmenu a.skippy:hover{
position: absolute;
top:auto;
left:auto;
width:100%;
height: 1em;
width: auto;
font-size:1em;
font-weight:bold;
width:100%;
padding-bottom:15px;
color: black;
z-index:100;
text-align:right;
margin-bottom:25px;
}
In addition, I found quite interesting site about SKIPPING. I think, it's going to be interesting for many of us.
Tuesday, August 14, 2012
DropDown Menu and section 508
I'm still working on future srtr.gov-site fixing all problems related to section-508 compliance. One of the problem is to implement tabbed-accessible (for non-mouse users) and JAWS-readable menu. Researching the ideas how to do this, I found several sites with code which claim their menus are section 508-complaint. I tried all of them, and did not find them complaint. I found only one site, which led me to implementation of my menu. Before starting to do something I have read several articles on sites:
1. Accessible Dropdown Menus by Terrill Thompson
2. Accessible Drop-Down Menus by Martin Kliehm
1. Accessible Dropdown Menus by Terrill Thompson
2. Accessible Drop-Down Menus by Martin Kliehm
Tuesday, June 26, 2012
jQueryMobile: ListView and Back Button
I'm not the only one who has a problem with Back button. Working on new mobile site, I started experiencing problem with Back Button presentation using ListView. It's completely gone when viewing a nested list submenu. I found a good solution on StackOverflow.com. It's quite sophisticated and smart code-snippet, which work very well.
Here it's
<script type="text/javascript" language="javascript" type="text/javascript">
$(':jqmData(url^=home)').live('pagebeforecreate',
function (event) {
$(this).filter(':jqmData(url*=ui-page)').find(':jqmData(role=header)')
.prepend('<a href="#" data-rel="back" data-icon="back" data-theme="b">Back</a>')
});
</script>
Replace MYPAGEID with the ID of the page containing the list.
It should be added after jQuery initialization.
Here it's
<script type="text/javascript" language="javascript" type="text/javascript">
$(':jqmData(url^=home)').live('pagebeforecreate',
function (event) {
$(this).filter(':jqmData(url*=ui-page)').find(':jqmData(role=header)')
.prepend('<a href="#" data-rel="back" data-icon="back" data-theme="b">Back</a>')
});
</script>
Replace MYPAGEID with the ID of the page containing the list.
It should be added after jQuery initialization.
Tuesday, May 29, 2012
CSS: Rewriting element declarations
CSS: Rewriting element declarations
There is a common link declaration
a {
color: #993300;
text-decoration: none;
cursor: hand;
}
a:hover {
color:#993300;
text-decoration:underline;
}
a:visited {
color:#4c7095;
}
For some links I have to rewrite link declarations. For example, I have to change colors, font-weight, and text-decoration for some link. It's not obvious task, and I spent 30-40 minutes on Internet looking for some ideas. One of the idea was to use on MouseOver and OnMouseOut events which does not work if link is visited. I continued my search and found some excellent idea. The idea was posted on stackoverflow.com by the owner of the site rexmorgan.net Here is his suggestion:
"Inline styles only have rules; the selector is implicit to be the current element.
The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.
However, you can get close, because a style set can technically go most anywhere:
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>"
So, following his advice, I added unique id to my link:
<a href="../../../test.aspx" class="topLink" accesskey="0" id="js2" title="Go to Test page">Help</a>
And added some code in CSS:
.topLink
{
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}
#js2:hover
{
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}
#js2:visited
{
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}
Now my link looks and behaves differently than all links on my website.
There is a common link declaration
a {
color: #993300;
text-decoration: none;
cursor: hand;
}
a:hover {
color:#993300;
text-decoration:underline;
}
a:visited {
color:#4c7095;
}
For some links I have to rewrite link declarations. For example, I have to change colors, font-weight, and text-decoration for some link. It's not obvious task, and I spent 30-40 minutes on Internet looking for some ideas. One of the idea was to use on MouseOver and OnMouseOut events which does not work if link is visited. I continued my search and found some excellent idea. The idea was posted on stackoverflow.com by the owner of the site rexmorgan.net Here is his suggestion:
"Inline styles only have rules; the selector is implicit to be the current element.
The selector is an expressive language that describes a set of criteria to match elements in an XML-like document.
However, you can get close, because a style set can technically go most anywhere:
<style>
#uniqueid:hover {do:something;}
</style>
<a id="uniqueid">hello</a>"
So, following his advice, I added unique id to my link:
<a href="../../../test.aspx" class="topLink" accesskey="0" id="js2" title="Go to Test page">Help</a>
And added some code in CSS:
.topLink
{
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}
#js2:hover
{
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}
#js2:visited
{
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}
Now my link looks and behaves differently than all links on my website.
Tuesday, May 22, 2012
Javascript: single quote inside the string.
Working on my project, I had to construct a string inside with single quotes. It was a small challenge for me. I did not know how to keep single quotes inside the string. Researching the Internet I found the best way to keep single quotes inside the string. Here's an example:
var temp2 = 'onclick = "window.location=\'test.aspx\'; return false;"';
Back-slash in front of the quote keeps the quote inside of the string. Browser will resolve this statements as
onclick = "window.location='test.aspx'; return false;"
var temp2 = 'onclick = "window.location=\'test.aspx\'; return false;"';
Back-slash in front of the quote keeps the quote inside of the string. Browser will resolve this statements as
onclick = "window.location='test.aspx'; return false;"
Wednesday, May 9, 2012
Problems with file editing in SharePoint
"The document could not be opened for editing. A Windows SharePoint Services compatible application could not be found to edit the document.
One of the
user from my project reported that he was not able to edit as well as check out
the office documents. When i tried to followed the same procedure (i.e.
Edit,check-in, check-out) and strange thing was me also got the same error
message. When i started my troubleshooting, I found out user created document
library with multiple nested
folders.
When we go to third or fourth level of the folder and try to edit any file with office application, we are getting an error – The document could not be opened for editing. A Windows SharePoint Services compatible application could not be found to edit the document. However if we try to edit the document uploaded on the root of the document library, we can edit it properly.
I tried reproduced the issue 2-3 times and found out one common thing and that is: You can not edit the office document once the URL path reaches characters limit 340. You can edit the documents only till URL path length is upto 339 characters. You can open the documents, you can upload documents but you can't edit them by right click on document and click on "edit in Microsoft Word". Even this behavior is same with non-office documents also like text documents.
Workaround:
-The only workaround possible is - open the file directly from the folder, modify and save it as a new file. Every time you need to save it as a new file. It wont allow to save in the existing file. Or, Move the file one level up and you will be able to do all the operations like edit,check-in and check-out too."
When we go to third or fourth level of the folder and try to edit any file with office application, we are getting an error – The document could not be opened for editing. A Windows SharePoint Services compatible application could not be found to edit the document. However if we try to edit the document uploaded on the root of the document library, we can edit it properly.
I tried reproduced the issue 2-3 times and found out one common thing and that is: You can not edit the office document once the URL path reaches characters limit 340. You can edit the documents only till URL path length is upto 339 characters. You can open the documents, you can upload documents but you can't edit them by right click on document and click on "edit in Microsoft Word". Even this behavior is same with non-office documents also like text documents.
Workaround:
-The only workaround possible is - open the file directly from the folder, modify and save it as a new file. Every time you need to save it as a new file. It wont allow to save in the existing file. Or, Move the file one level up and you will be able to do all the operations like edit,check-in and check-out too."
Friday, April 6, 2012
Free tools for section 508
Free tools for those, who design gov websites.
Constructing a new www.srtr.gov site, I found some very useful tools to satisfy all requirements of sections 508. After you wrote a code, please use these tools to check if your code satisfies section 508.
Here they're:
1. Fangs - the screen reader emulator
2. Exclusively helpful site with a lot of free tools Illinois Center for Information Technology and Web Accessibility
3. Powermapper section 508 Accessibility testing Tool
4. Tools on WebAim site
Constructing a new www.srtr.gov site, I found some very useful tools to satisfy all requirements of sections 508. After you wrote a code, please use these tools to check if your code satisfies section 508.
Here they're:
1. Fangs - the screen reader emulator
2. Exclusively helpful site with a lot of free tools Illinois Center for Information Technology and Web Accessibility
3. Powermapper section 508 Accessibility testing Tool
4. Tools on WebAim site
Thursday, March 8, 2012
Panel
Panel
Today I used for first time a panel. I have to "hide and show" some parts of my master-page. Usually developers construct 2 different master pages. I decided to have one and implement the panels. Here's my code:
HTML-page with 2 panels (code segment)
<asp:Panel ID="PanelBreadCrumb" runat="server">
<div id="breadcrumbDiv" class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathSeparator=" > " SiteMapProvider="Breadcrumb">
<CurrentNodeStyle Font-Bold="True" />
</asp:SiteMapPath>
</div>
</asp:Panel>
<asp:Panel ID="PanelRightSide" runat="server">
<td class="rightColumn2" valign="top">
<div style="padding: 10px;">
<ul class="ul_rightCol">
<li class="bullets">
<asp:HyperLink ID="Hyperlink2" runat="server" NavigateUrl="http://www.sample1.html"
Target="_blank" AccessKey="a">Sample1</asp:HyperLink></li>
<li class="bullets">
<asp:HyperLink ID="hypRates" runat="server" NavigateUrl="http://www.sample2.htm"
AccessKey="1" Target="_blank">Sample2</asp:HyperLink></li>
<li class="bullets">
<asp:HyperLink ID="hypChapter" runat="server" NavigateUrl="http://www.sample3.htm"
Target="_blank" AccessKey="2">Sample3</asp:HyperLink>
</li>
<li class="bullets">
<asp:HyperLink ID="hypData" runat="server" NavigateUrl="http://www.sample4.htm"
Target="_blank" AccessKey="3">Sample4</asp:HyperLink>
</li>
</ul>
</div>
</asp>
Code behind in VB.NET on Page Load: (code segment)
Dim PanelBC As Panel
PanelBC = CType(Master.FindControl("PanelBreadCrumb"), Panel)
PanelBC.Visible = False
Dim PanelRS As Panel
PanelRS = CType(Master.FindControl("PanelRightSide"), Panel)
PanelRS.Visible = True
This trick is a quite comfortable to use and reuse one master page for different layout through the same site. I hope to use the trick more and more.
Today I used for first time a panel. I have to "hide and show" some parts of my master-page. Usually developers construct 2 different master pages. I decided to have one and implement the panels. Here's my code:
HTML-page with 2 panels (code segment)
<asp:Panel ID="PanelBreadCrumb" runat="server">
<div id="breadcrumbDiv" class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathSeparator=" > " SiteMapProvider="Breadcrumb">
<CurrentNodeStyle Font-Bold="True" />
</asp:SiteMapPath>
</div>
</asp:Panel>
<asp:Panel ID="PanelRightSide" runat="server">
<td class="rightColumn2" valign="top">
<div style="padding: 10px;">
<ul class="ul_rightCol">
<li class="bullets">
<asp:HyperLink ID="Hyperlink2" runat="server" NavigateUrl="http://www.sample1.html"
Target="_blank" AccessKey="a">Sample1</asp:HyperLink></li>
<li class="bullets">
<asp:HyperLink ID="hypRates" runat="server" NavigateUrl="http://www.sample2.htm"
AccessKey="1" Target="_blank">Sample2</asp:HyperLink></li>
<li class="bullets">
<asp:HyperLink ID="hypChapter" runat="server" NavigateUrl="http://www.sample3.htm"
Target="_blank" AccessKey="2">Sample3</asp:HyperLink>
</li>
<li class="bullets">
<asp:HyperLink ID="hypData" runat="server" NavigateUrl="http://www.sample4.htm"
Target="_blank" AccessKey="3">Sample4</asp:HyperLink>
</li>
</ul>
</div>
</asp>
Code behind in VB.NET on Page Load: (code segment)
Dim PanelBC As Panel
PanelBC = CType(Master.FindControl("PanelBreadCrumb"), Panel)
PanelBC.Visible = False
Dim PanelRS As Panel
PanelRS = CType(Master.FindControl("PanelRightSide"), Panel)
PanelRS.Visible = True
This trick is a quite comfortable to use and reuse one master page for different layout through the same site. I hope to use the trick more and more.
Tuesday, March 6, 2012
Div Align With CSS
Creating a nice look for section 508-complaint site, I found I need some ideas how to place my div (s) on a page. Researching the topic I found an interesting posting about it:
"When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements. I usually also usually align elements either to the left, right, or center using CSS.
To get started with code samples, to center a div in the middle of a container div you can use the following CSS:
"When playing with custom web designs, or off the shelf templates, the most common CSS work involves changing the margin, padding, color and background of HTML elements. I usually also usually align elements either to the left, right, or center using CSS.
To get started with code samples, to center a div in the middle of a container div you can use the following CSS:
.center { margin-left: auto; margin-right: auto; }
If you want to align a div to the right and another div opposite to the first on the left you can use the following CSS classes..right { float: right; } .left { float: left; }
I have found that when I used both div that float both to the right and left that you have to follow that with an empty div that clears, or resets, the float CSS property. If I don't clear the float property other elements such as a menu that is aligned to the right might not render correctly. Here is the CSS class to clear the float property, use it in a div the divs that have been aligned to the right, left, or both right and left..clear { clear: both; }"
The advice came from http://juixe.com/techknow/index.php/2007/01/14/div-align-with-css/
Thursday, March 1, 2012
Accesskey and section 508
How different browsers handle the above accessKey letters for button and anchor elements
| Browser | Operating System | Key Combination | Button Behavior | Anchor Behavior |
|---|---|---|---|---|
| Chrome 7.0.517.41 | Linux | Alt + letter | Clicks the button (3) | Clicks the anchor (3) |
| Chrome 7.0.517.41 | Mac OS X | Control + Option + letter | Clicks the button (3) | Clicks the anchor (3) |
| Chrome 7.0.517.41 | Windows | Alt + letter | Clicks the button (3) | Clicks the anchor (3) |
| Firefox 1.5 | Windows | Alt + letter | Clicks the button (1) | Unknown |
| Firefox 2 | Linux | Alt + Shift + letter | Clicks the button (1) | Clicks the anchor |
| Firefox 2 | Mac OS X | Control + letter | Clicks the button (1) | Clicks the anchor |
| Firefox 2 | Windows | Alt + Shift + letter | Clicks the button (1) | Unknown |
| Firefox 3 | Linux | Alt + Shift + letter | Clicks the button (1) | Clicks the anchor |
| Firefox 3 | Mac OS X | Control + letter | Clicks the button (1) | Clicks the anchor |
| Firefox 3 | Windows | Alt + Shift + letter | Clicks the button (1) | Clicks the anchor |
| Internet Explorer 6 | Windows | Alt + letter | Sets focus on the button (2) | Unknown |
| Internet Explorer 7 | Windows | Alt + letter | Sets focus on the button (2) | Sets focus on the anchor (2) |
| Internet Explorer 8 | Windows | Alt + letter | Clicks the button (3) | Sets focus on the anchor (2) |
| Internet Explorer 9 (beta) | Windows | Alt + letter | Clicks the button (3) | Sets focus on the anchor (2) |
| Safari 3.1.2 | Mac OS X | Control + Option + letter | Clicks the button (3) | Clicks the anchor (3) |
| Safari 3.1.2 | Windows | Alt + letter | Clicks the button (3) | Clicks the anchor (3) |
| Safari 5.0.2 | Mac OS X | Control + Option + letter | Clicks the button (3) | Clicks the anchor (3) |
| Safari 5.0.2 | Windows | Alt + letter | Clicks the button (3) | Clicks the anchor (3) |
•Red = Different behavior for buttons and anchors
•Comment 1 = To just set focus on the button/anchor, change your about:config setting for the “accessibility.accesskeycausesactivation” user preference.
•Comment 2 = Press Enter to click the button/anchor
•Comment 3 = There appears to be no built-in mechanism to just set focus on the button/anchor. The component handling the click event would be responsible for setting focus while handling the click.
The data comes from http://formattc.wordpress.com/2010/11/03/browsers-and-the-html-accesskey/ this table was really helpful to build my own system of accesskeys.
Thursday, February 16, 2012
CSS layout generator
Nowadays we can create css layout online. I was pleasantly surprised when I found these tools online. I just Googled "css layout generator" and found CSS layout generator In a minute, I generated HTML-page with CSS-file attached. It really speed up my work on new section 508-compalaint template for SRTR. I recreated the template in just 30-40 minutes. Now I have to create the actual pages for new and improved www.srtr.org site. Meanwhile I will be working on archive presentations for USRDS.
I'm continuing to write in a 2 weeks. Actually the template I created using layout generator did not work out for me. I needed to create something more advance and look alike present site. I had to throw away the template and create completely new one which will work better with current design. I proudly have done this. Actually I found another interesting thing that generated by layout generator template did not work out in Microsoft Visual Studio 2010. The template created a lot of problems with page maintenance. It's one more reason I came out with my own master page.
I'm continuing to write in a 2 weeks. Actually the template I created using layout generator did not work out for me. I needed to create something more advance and look alike present site. I had to throw away the template and create completely new one which will work better with current design. I proudly have done this. Actually I found another interesting thing that generated by layout generator template did not work out in Microsoft Visual Studio 2010. The template created a lot of problems with page maintenance. It's one more reason I came out with my own master page.
Wednesday, February 15, 2012
RenderingMode in Menu
RenderingMode in Menu (ASP.NET 4.0)
I found some problems implementing ItemWrap for Menu in ASP.NET 4.0 Since RenderingMode is a List in default, it is not wrapping the text. I tried numerous ways, none of them does not work. It's quite interesting that the same code works just fine for ASP.NET 3.5. Truthly speaking, I did not know what to do to and how to fix the problem. Of course, I googled Internet, but did not find something useful. I even tried the Microsoft's code with sample of the menu with ItemWrap. Still does not work.
Finally, I tried to change the RenderingMode to Table. It works for me. My text was compeletely wrapped. Now my problem is solved. Remember, if itemwrap does not work as a list, try renderingmode is a table. It should work.
I found some problems implementing ItemWrap for Menu in ASP.NET 4.0 Since RenderingMode is a List in default, it is not wrapping the text. I tried numerous ways, none of them does not work. It's quite interesting that the same code works just fine for ASP.NET 3.5. Truthly speaking, I did not know what to do to and how to fix the problem. Of course, I googled Internet, but did not find something useful. I even tried the Microsoft's code with sample of the menu with ItemWrap. Still does not work.
Finally, I tried to change the RenderingMode to Table. It works for me. My text was compeletely wrapped. Now my problem is solved. Remember, if itemwrap does not work as a list, try renderingmode is a table. It should work.
Wednesday, February 8, 2012
SRTR.org and section 508
I started a new project for www.srtr.org moving toward new HTML5 and section 508 website. First of all, I'm going through 508-standards documents and some PowerPoint presentations presented by hrsa.gov. Went to Internet trying to find some interesting sites which talk about benefits of section 508. Found some of them. Here they are:
http://www.ada.gov/websites2.htm
http://www.usweb.com/internet-marketing-firm/XCO/benefits_of_section_508_compliance.htm
My first step is reading of all papers and talking to editors and writers
http://www.ada.gov/websites2.htm
http://www.usweb.com/internet-marketing-firm/XCO/benefits_of_section_508_compliance.htm
My first step is reading of all papers and talking to editors and writers
Wednesday, January 11, 2012
Border around div
Border around div
It's a quite popular technique. Many developers use the technique involved table structure. I think, this tip can be very useful too.
HTML-code
<div class ="newsDiv">
<h2> NEWS</h2>
<div class ="newstext">
<p>A <a href="test.asp">HTML version</a> of the SAMPLE is now available.
For smartphone users, you can use a mobile website, <a href="http://www.test.org">http://www.test.org.org</a>, to view SAMPLE.</p>
</div>
</div>
CSS-code to achieve the
.newsDiv
{
border: 1px #C0C0C0 solid;
margin-bottom: 15px;
}
.newstext
{
padding-left: 10px;
}
It's a quite popular technique. Many developers use the technique involved table structure. I think, this tip can be very useful too.
HTML-code
<div class ="newsDiv">
<h2> NEWS</h2>
<div class ="newstext">
<p>A <a href="test.asp">HTML version</a> of the SAMPLE is now available.
For smartphone users, you can use a mobile website, <a href="http://www.test.org">http://www.test.org.org</a>, to view SAMPLE.</p>
</div>
</div>
CSS-code to achieve the
.newsDiv
{
border: 1px #C0C0C0 solid;
margin-bottom: 15px;
}
.newstext
{
padding-left: 10px;
}
Thursday, January 5, 2012
jQuery Mobile and IE
Today I learned that my mobile site does not work in IE because IE does not support AJAX calls through jQuery Mobile. I went on Internet searching for answer. This time I was not lucky. Internet community did not bring any good news. It looks like many developers have the same problem. I found a code snippet which did not work at all. It should be added after jquery is loaded and before jQuery Mobile is added. Here it is :
<script type="text/javascript">
//run this script after jQuery loads, but before jQuery Mobile loads
//customize jQuery Mobile to let IE7+ in (Mobile IE)
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
//extend gradeA qualifier to include IE7+
gradeA: function(){
//IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
var ie = (function() {
var v = 3, div = document.createElement('div'), a = div.all || [];
while (div.innerHTML = '', a[0]);
return v > 4 ? v : !v;
}());
//must either support media queries or be IE7+
return $.support.mediaquery || (ie && ie >= 7);
}
});
});
</script>
My coworkers and I agree to leave mobile version as it is. It looks like it works for most mobile devices, bit it does not work only for desktop IE. I think, jQuery Mobile really meant to be for MOBILE!
<script type="text/javascript">
//run this script after jQuery loads, but before jQuery Mobile loads
//customize jQuery Mobile to let IE7+ in (Mobile IE)
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
//extend gradeA qualifier to include IE7+
gradeA: function(){
//IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
var ie = (function() {
var v = 3, div = document.createElement('div'), a = div.all || [];
while (div.innerHTML = '', a[0]);
return v > 4 ? v : !v;
}());
//must either support media queries or be IE7+
return $.support.mediaquery || (ie && ie >= 7);
}
});
});
</script>
My coworkers and I agree to leave mobile version as it is. It looks like it works for most mobile devices, bit it does not work only for desktop IE. I think, jQuery Mobile really meant to be for MOBILE!
Subscribe to:
Posts (Atom)