Manipulating the HTML DOM of an asp.net page with Javascript February 24, 2009
Posted by fofo in asp.net, Javascript, XHTML.Tags: Javascript, XHTML
1 comment so far
It has been a while, since I posted anything in my blog. It has been a very busy period for me. Hopefully I will get some time to write about Entity framework and ASP.NET Dynamic data. I will try to cover some of these new buzzwords in my next posts. I want to talk in this post about something that is relevant with the client side of things and more specifically the HTML DOM and how we can manipulate it. I know that some of you might think that this blog is dedicated to the server side logic, based on the .Net platform. Yes that is true but when I feel I need to explain something regarding CSS,Javascript and XHTML, I will do so.
I had a seminar the past days and many people were asking how to manipulate various elements of an asp.net page with server side code. More specifically how to change the clickable text of a hyperlink (server side control), change the target link and make the link when clicked to open in a new window. You can do that with server side logic, using an asp.net language like C# or VB.Net. You must write the appropriate code in an event-handler routine, like button click event (we assume that there is also a button in the .aspx page) . Of course this triggers a post back to the server and all the logic is executed on the server. We do not want to do that, in this case.
The server does all the heavy lifting for us. We send along the wire an HTTP request and the server (in the case of an asp.net page) calls the asp.net engine and sends through an HTTP response back to the client pure XHTML, which the client can render easily.
There is no need for unecessary traffic back and forth from the server and the client. We want our application to be as responsive as possible and we can execute some of the logic above in the client.
In our scenario we can achieve what we want without sending an HTTP request back to the server. We can achieve this with Javascript and HTML DOM. All modern browsers know how to handle/interpert these technologies.
So we have in our asp.net page a hyperlink and a button. Originally the link points to the microsoft website, “http://www.microsoft.com”. The text of the link is “here” and when we click the button it shoud be changed to “Visit ASP.NET”
Also, when we click on the button we need to change the target of that link to the main ASP.Net site “http://www.asp.net”
1)Launch Visual Studio 2008/2005 or Visual Web developer express edition
2) Create an asp.net web site using the filesystem and C#. Name it “manipulatethedom”, or any other name you like it
3) You have an empty Default.aspx page. Just type the text “click here to navigate to our website” in the Design View. The word here will be our link in our example.
4) Drag and Drop an asp.net hyperlink server control on the page. Change the id attribute to “mylink”. Change the NavigateUrl attribute to “http://www.microsoft.com”
so your page should look like this now
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<!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 runat=”server”>
<title></title
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
click
<asp:HyperLink ID=”mylink” runat=”server”
NavigateUrl=”http://www.microsoft.com” style=”font-weight: 700″>here</asp:HyperLink> to navigate to our website
</div>
</form>
</body>
</html>
5) Add an Html Button to the page. The onclick attribute should be “changelink()”. This is a javascript function that will be called when the user clicks the button. The value attribute could be “Change link”.
<input type=”button” onclick=”changelink()” value=”Change link” />
6) Create an empty javascript file and call it changelink.js. You can do that by adding a new item, a .js file, in your website.
7) Create a link from your asp.net page to the external javascript file. This is the code and should be placed in the head section of the .aspx page.
<script src=”changelink.js” type=”text/javascript”></script>
8) The changelink.js file contents are
function changelink()
{
document.getElementById(‘mylink’).innerHTML = “Visit ASP.NET”;
document.getElementById(‘mylink’).href = “http://www.asp.net”;
document.getElementById(‘mylink’).target = “_blank”;
}
9) With VS 2008 there is built-in support for JavaScript Intellisense. This is enabled in both the free Visual Web Developer 2008 Express edition as well as in Visual Studio, and makes using JavaScript significantly easier.
10 ) In this very simple file, I use the Document object which represents the entire HTML document and can be used to access all elements in a page.
11) Then I use the getElementById() method which returns a reference to the first object with the specified ID.Please remember that the value of the id attribute of my link in the asp.net page is “mylink”. So by typing
document.getElementById(‘mylink’),
I get a reference of my link object on the page.
12) Then I use the innerHTML property which sets the text of the link to what I like.Similarly I use the href property sets the URL to the “http://www.asp.net”.Last, I use the target property to open the Url in a new window.
13) Run your application by hitting F5 and click on the button. Hopefully you will see all the changes that we have been discussing about.
So one must understand what kind of functionality can be achieved with client-side code and maybe shift the server side logic to the client.
Hope it helps!!! If you need any help, just email me.
Common mistakes and misconceptions with CSS November 10, 2008
Posted by fofo in CSS, XHTML.Tags: CSS, IE8, XHTML
add a comment
In this long post, I will try to highlight some mistakes that are made by many designers-developers using CSS. Many of those mistakes have a simple explanation but if you do not know the answer can cause anxiety and frustration. I will also try to clarify some misconceptions regarding the use of CSS.
The order of the style and link elements in the HEAD section of the HTML/XHTML matters
Recently I received an anxious phone call from a friend of mine, a web enthusiast. He had a simple document and he had defined an internal stylesheet and an external stylesheet to style the various elements in his document which is not a best practice to say the least…
He wanted to style the H1 elements in his document. So he typed in the HEAD section of the document the following
<style type=”text/css”>
h1{
color:maroon;
}
</style>
just below this statement there was a link to an external stylesheet
<link rel=”stylesheet” type=”text/css” href=”test1.css” />
inside this stylesheet there is the following declaration
h1{
color:aqua;
}
But my friend paid no attention to this…. After all declarations in a style element overwrite those in an external stylesheet. Much to his surprise when he viewed the page with IE,Firefox,Opera he saw that the color of the H1 tags was “aqua” instead of “maroon” which was specified in the internal stylesheet. What happened is this. It is true that internal stylesheet’s property values overwrite those values for the same element in an external stylsheet but only when the <style></style> tags are specified after the <link rel=….> element. In our case the <link element …> is specified after and that is why the values of the external link prevail.
Be careful of the shorthand notation
When we want to specify values for related properties of a particular element we can do so in a single declaration.
for example we can do this
margin: 1em 3em 4em 5em;
This is equivalent with this
margin-top: 1em;
margin-right: 3em;
margin-bottom: 4em;
margin-left: 5em;
a very common mistake is to presume that if we leave blank(not set a value) this will result to 0em=0.
well if you write this (and please remember that we go from top->right->bottom->left)
margin: 1em 3em 4em;
the missing side is assigned the same value as the one opposite it. So in this case with the shorthand notation used above we have
margin-top: 1em;
margin-right: 3em;
margin-bottom: 4em;
margin-left: 3em;
The margin-left value is equal to 3em and not to zero.
Let’s see another example that falls in the same category. I use all the time the shorthand notation to specify values for the background property.
for example
background: #000 url(myimage.jpg) no-repeat fixed left top;
this is of course equivalent with this
background-color: #000;
background-image:url(myimage.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
Please try to use this order as it was presented here. Some people think if we omit one value in the shorthand notation, that means that simply there is no value for this property. Well, this is not the case.The initial value will be assigned to the missing property.
Initial value is the value for a property when there in no value specified for that property and it is not inherited. The initial value for each property is specified in the CSS specification.
so for the property in question ,background, the initial values for the
background-color:transparent;
background-repeat:repeat;
background-attachment:scroll;
background-position: 0% 0%;
If you write for example
background-color:#000;
background:url(myimage.jpg);
The background color will not be black, because this value #000 will be overwritten in the shorthand notation by this value background-color:transparent;
So, do not mix shorthand and standard notation.
Do not omit the Doctype declaration
If you omit the doctype declaration, e.g
<!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“>
the browser will always render the document in quirks mode and in most cases we do not want that.
By rendering in the quirks mode we will see our web site showing in a way we do not want.
For example the Internet Explorer 5 box model will kick off instead of the normal CSS box model and all the dimensions will be calculated according to this model and not the CSS box model as it was defined in the CSS2.1 specification.
All modern editors like Dreamweaver add this in the top of the HTML document.
Some people believe if they just add this
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”>
without adding this line
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
the browser will render in standards mode. No, it will render in quirks mode.
Be careful with case sensitivity
CSS is case insensitive according to the CSS specification. If we have a closer look to these specs we will see that cannot control the document markup and how case sensitivity is handled from the mark up point of view. HTML is case insensitive but the id and class attributes are not. XHTML, being XML, is always case sensitive.
so if we write in our external css file
p{color:#ff0;}
that will match all elements in an HTML mark up that has <p>…</p> , <P>…</P> tags.
but if we write in our external css file
.special {color:navy;}
and type in our document <p class=”SPECIAL”>hello</P>, the color navy will not be applied to our paragraph, since the id,class attributes are case sensitive. In order to avoid all confusion please be consistent with your case matching. i write all tags in html/xhtml in lowercase and i follow the same technique in my css document.
Do not quote attribute-property values
Lots of times i see CSS beginners, writing these CSS statements
p{color:”navy”;} or h1{font-size:”2.2em”}
It will not work and will cause you some unwanted frustration.
Do not leave whitespace between the number and the unit
If you type this css statement h1{font-size:2.3 em} it will not work because there is a whitespace between 2.3 and em.
Do not leave whitespace between the dot and the class name. the same goes for id selectors
This notation in a css file will not work
. special or # wrapper
make sure you do not leave any spaces between the class/id selector name and the dot(.) or hash(#).
Use relative and absolute values correctly
Use mm,cm,in(inches),pt(points),pc(picas) when you specify styles for the print media. On the other hand use relative units like em,ex,px when you specify styles for on-screen display. Nothing will crash if you do otherwise but it is almost certain that you will create illegble output.
Do not use color-system color keywords
It is always better to use this kind of notation when we want to specify color for our elements
1) color:#ff0000; or the equivalent color:#f00;
2) color:rgb(23, 156, 234);
3) color:rgb(12%, 35% , 67%);
do not use the color keywords like gray,lime,maroon or system colors like buttonface,buttontext.
Our markup will display differently between various browsers when using color or system color names.
The at rules @charset,@import must be the first things in a CSS file
When using the @charset or @import at rules make sure they are the first lines in the css file otherwise they will be ignored.
so if you write this inside your css file
html
{
font-size:1.2em;
color:#000;
}
and then
@import url(“style.css”)
the above at-rule will be ignored.
and do not use the @page rule. it is not supported at all in all browsers.
Be careful when you use the :focus and the :lang pseudo class
If you use the :focus pseudo class make sure you understand that IE 7 and earlier versions do not support it or implement it in a buggy way. IE 5.5 and IE 6 for example when they encounter a css file with the :focus pseudo class they apply the values that are specified in the :active pseudo class!!!
In IE 8.0, :focus it will be fully supported. The :lang pseudo class is not supported in version IE7 and earlier versions. It will be supported in IE 8.
Be careful when you use the inherit keyword
First of all for versions of Internet Explorer up to version 7 the inherit keyword is not supported.
when using the background property for example and using the shorthand notation you cannot use the inherit keyword.
the followinf css snippet is invalid
#wrapper {
background:#67aacc inherit right top;
}
Be careful of the font-size property and inheritance
If you write the following HTML markup
<div id=”content”>
hello
<p>click <a href=”http://www.microsoft.com”>here</a> to visit the microsoft website</p>
</div>
and style the above markup with this css snippet
#content,p,a{
font-size:190%;
}
we will not have all the elements (div,p,a) with a font size with 1.9 bigger than the normal font-size.
The font-size property is inherited. But writing the CSS like before we will have a markup that has a p element 1.9 bigger than its parent element (div element) and an a element that is 1.9 times bigger than its parent element(p tag).
If you want to have all elements(children element) of the div element to have the same font-size you must rewrite the CSS like this
#content{
font-size:190%;
}
Please be careful with nested elements and inherited properties , especially with tables,cells and rows….
Stay clear of the Media Queries
In CSS3 specification media queries are defined, which give us extra power when it comes to the control we have with CSS over how our content is rendered accross different devices.Basically media queries are logical expressions that evaluate true or false. They are used with conjuction with media types (e.g screen).
if you need to have a look at all the properties and respective values browse here
http://www.w3.org/TR/css3-mediaqueries/
Well, no modern browsers supports these new specs. So do not use them…. There is some partial support from Opera 9 and Safari 3 but still, do not use them
Avoid the vendor specific properties
Try not to use properties that are only operational and target a speficic bwowser like Firefox or Internet Explorer, unless there is absolutely no other way..
Javascript Query Selectors and the Selectors API September 20, 2008
Posted by fofo in Javascript, XHTML.Tags: IE8, Javascript, XHTML
2 comments
When using Javascript one of the most common tasks is to use the DOM to obtain references to the various HTML elements. The only way to accomplish that with the DOM Level 2 API was to use either document.getElementByid or document.getElementsByTagName. With CSS we can have selectors that match HTML elements. Web browsers can see this matching and implement it. So the question was “Why can’t i do that with Javascript?”. The latest development in the DOM world is the W3C Selectors API .
This new selector API defines the querySelector, and querySelectorAll methods that take a CSS selector string and return the first matching element or a StaticNodeList of matching elements, respectively. The methods can be called from the document object.I will demonstrate the new methods of the W3C with an example.
Just copy and paste the 2 HTML code snippets below in 2 different .html files in your desktop. Then open them with IE and hit the button.
Imagine if we have a very simple HTML document and we want to access an HTML element and change its font size by clicking a button.
Using only the APIs from DOM Level 2, we use the getElementById method.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<HTML>
<HEAD>
<TITLE>setFontSize</TITLE>
<SCRIPT TYPE=”text/javascript”>
<!–
function setFontSize(){
document.getElementById(‘test1’).style.fontSize = ‘200px’;
}
//–>
</SCRIPT>
</HEAD>
<BODY>
<p ID=”test”>Hi</p>
<p ID=”test1″>Hello there</p>
<FORM>
<INPUT TYPE=”button” VALUE=”change Size” onClick=”setFontSize()”>
</FORM>
</BODY>
</HTML>
and now using the Selectors API and the querySelector method.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<HEAD>
<TITLE>setFontSize</TITLE>
<SCRIPT TYPE=”text/javascript”>
<!–
function setFontSize(){
var myitem = document.querySelector(‘#test1′);
myitem.style.fontSize=’200px’;
}
//–>
</SCRIPT>
</HEAD>
<BODY>
<p ID=”test”>Hi</p>
<p ID=”test1″>Hello there</p>
<FORM>
<INPUT TYPE=”button” VALUE=”change Size” onClick=”setFontSize()”>
</FORM>
</BODY>
</HTML>
Safari 3.1, Internet Explorer 8 beta and Firefox 3.1 alpha1,support the Selector API.Opera is going to add support for this API very soon.
IE 6 renders XHTML Transitional in quirks mode November 15, 2007
Posted by fofo in CSS, XHTML.Tags: CSS, XHTML
add a comment
A friend of mine is creating his own website. he is using xhtml and css.
he is building it from scratch!!! he has a nice editor that adds doctype declarations for him e.t.c
when he sees his site in IE6 he notices that the browser interprets it in the “quirks mode”.
that is strange because in the doctype declaration he has the following
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
with this Doctype the site should be rendered in the “Standards” mode.
the solution to this problem is a simple one.
Doctype is not the first element on the page.
the editor has added this line.
<?xml version=”1.0″ encoding=”utf-8″?>
this indicates the version of xml and the character encoding
for some reason IE6 switches automatically to quirks mode when doctype is not the first element on the page.
Plug-in Web developer extension for Firefox November 15, 2007
Posted by fofo in CSS, XHTML.Tags: CSS, XHTML
add a comment
A must have tool for web designers or developers that use firefox as their browser is the web developers extension plug-in.
it can be found here
some of its features include
- Validate XHTML
- Validate CSS
- Turning off stylesheets
- editing styles in the browser
DOT NET RULES 