Read, With the Name of Your Lord Who Created

Archive for the ‘HTML / CSS’ Category

Cursor Positions, Selected Text, and A Simple HTML Editor

Posted by triaslama on June 6, 2008

It would be nice if we have a HTML text editor that doing a simple task of HTML editor for us. It works just like HTML view of WordPress admin page when we write a post. We select the text press specific button and then the selected text will be enclosed with appropriate format. I Test the code in Mozilla Firefox and Internet Explorer, so in both browsers this code should works fine. Here the screenshoots:

Screenshoots page.

We need to prepare the prerequisites.

As prerequisites, at least we need two things. First, we need to know how to define the cursor position inside a <textarea> element, second we need to know how to retrieve a selected text inside a <textarea> element. So, for the first step, I will talk about the both things shortly.

Every browser brings the different behaviour. The browser quirk will make our code a little bit longer because we need to specify different code for different browser. Defining cursor position (current position) is trivial in Mozilla Firefox, but we need a little trick in Internet Explorer. If we want to retrieve selected text in a <textarea> element, both (Forefox and IE) has their own way too.

Defining Cursor Position Inside a <textarea> Element
In Firefox we just need the following code to determine the current position of cursor in a <textarea> element:

var currentPosition = txtArea.selectionStart;

txtArea is a <textarea> element.
Internet Explorer (I use IE 6) doesn’t have selectionStart and selectionEnd property, so we need a little more effort to determine start and end position of the cursor (this is a tricky way).

var range = document.selection.createRange();
var drange = range.duplicate();
drange.moveToElementText(txtArea);
drange.setEndPoint("EndToEnd", range);

var currentPosition = drange.text.length - range.text.length;
var endPosition = drange.text.length - currentPosition;

Read the rest of this entry »

Advertisements

Posted in HTML / CSS, Javascript | Tagged: , , , , , , , | 17 Comments »

CSS in ASP.NET Server Controls, Declaratively vs. Programmatically

Posted by triaslama on May 7, 2008

ASP.NET controls has a bunch of attributes that take in order the look and feel of every control. For example TextBox server control, if we want the TextBox color turn into specific color we specify the ForeColor attribute to the name of Color defined in Color structure. If we want the TextBox text font appear in Georgia font, set Font-Name attribute to Georgia. ASP.NET TextBox script for above requirements will look something like this:

<asp:TextBox id="txtTest" ForeColor="Red" Font-Name="Georgia" runat="server" />

It looks simple, right?

But wait, for the one familiar with ASP.NET it doesn’t matter, but for everyone who already familiar with CSS maybe there is a bit problem because the attribute name of ASP.NET server controls slightly different with attribute in CSS file. So sometimes we may prefer that the looks and feels of ASP.NET controls ruled within CSS file. And yes, we can do this!

In ASP.NET information within a CSS file can be accessed either declaratively or programmatically, its up to you which one to choose. To make a CSS file visible within our page put this declaration inside our <head></head> tag:

<link rel="stylesheet" type="text/css" href="[filelocation/css_filename.css]" />

Read the rest of this entry »

Posted in .NET, ASP.NET, HTML / CSS | Tagged: , , , , , | 28 Comments »

DOM & HTML Revisited

Posted by triaslama on April 18, 2008

What can I say about DOM (Document Object Model)? Its lightweight, its everywhere, its some kind useful. How about HTML? its everywhere and its easy. But, I think, the most important about them both is because both doesn’t suck!
I don’t know how about you. I just doing a simple (and I think interesting enough) exploration about HTML & DOM. Let’s check it out!

Suppose I want to make an element enabled & disabled when I select an item from a dropdownlist (combo box). With HTML it can be accomplished easily! How about if I want to make a new <select> element when I have choose something from previous <select> element?? With mix blend of DOM & HTML it can be accomplished easily too!

This page consist of two parts, each of them separated by horizontal lin. This is the screenshots of my simple page:
init
Initial condition, first part and second part separated by horizontal line.

Read the rest of this entry »

Posted in DOM, HTML / CSS, Javascript | Tagged: , , , , , | 1 Comment »

Javascript And CSS Animations: The Difference Between Display And Visibility

Posted by triaslama on March 8, 2008

Display and visibility are two properties of style attribute which determine whether an element should appear or disappear. Although both share the same functionality but, display and visibility has important distinctions. In this post I will unveil one of the difference between display and visibility.

Here is the scenario:

Display and Visibility

The above picture produced by HTML and Javascript code, here HTML code (dv.htm):

<html>
<head>
<title>The Difference Between Display and Visibility</title>
<script lang=”javascript” type=”text/javascript” src=”dv2.js” src=”dv2.js”>
</script>
</head>
<body>
Select Mode: <p>
<input type=”radio” id=”rad1″ name=”rdChoice” checked=”true” value=”display”>Display</input>
<br>
<input type=”radio” id=”rad2″ name=”rdChoice” value=”visibility”>Visibility</input>
<p>
<b>To see the difference between display and visibility:</b><br> select desired mode>>move mouse cursor over the text below>>hold down ‘Ctrl’ key>>click the element
<p>
<div id=”content” style=”border:2px solid black; width:400px;font-family:arial;font-size:17px”>
<b>
<span id=”firstSpan”>The Difference </span><span id=”secondSpan”>Between </span><span id=”thirdDiv”>Display and </span><span id=”fourthSpan”>Visibility.</span>
</b>
</div>
</body>
</html>

and this is Javascript code:


window.onload = selectSpan;


function selectSpan()
{
var spans = document.getElementsByTagName("span");
for (var i=0;i
spans[i].onmouseover = function()
{
this.style.backgroundColor = "lavender";
};
spans[i].onmouseout = function()
{
this.style.backgroundColor = "white";
};
spans[i].onclick = function(e)
{
// event in IE acessible through window.event property
e = e||window.event;
var rad1 = document.getElementById("rad1");
var rad2 = document.getElementById("rad2");


if (e.ctrlKey) {
if (rad1.checked) {
//window.alert(rad1.value);
this.style.display = "none";
}
else if (rad2.checked) {
//window.alert(rad2.value);
this.style.visibility = "hidden";
}
else {
window.alert("something else selected.");
}
}
};
}
}

Display mode has several possible values such as none, inline, and block. Visibility has two possible values that is visible and hidden. Setting visibility property of an element to hidden will make that element disappear but still leaving that element in document. Setting the display property of an element to none will make that element looks like just removed from the document / pulled out from the document.

To prove this concept, run the code in browser select a mode (display or visibility), move your mouse over an element inside the block then hold down ‘Ctrl’ key and click element that you want to make it disappear / invisible from document.

Posted in HTML / CSS, Javascript | Tagged: , , , , , | 1 Comment »

Javascript and CSS Animations: The Difference of Element Positioning.

Posted by triaslama on March 5, 2008

Element positioning defines how an element will be positioned in the document. We adjust the element positioning through Cascading Style Sheets (CSS) property named position. In the following example we set div element’s position to its absolute location (external CSS):

div
{
position:absolute;
top:0px;
left:100px;
}

Position property can hold static, relative, absolute, or fixed value. Below simple explanation and example of each positioning:

1. Static positioning:
Static positioning is the default positioning of an element, it just flow one after another like what is appear in HTML source. Top and left properties doesn’t affect the document appearance. Consider the following HTML code (positions.htm):

<html>
<head>
<title>Element Positioning</title>
<link rel=”stylesheet” type=”text/css” href=”positions.css” />
<script lang=”javascript” type=”text/javascript” >
</script>
</head>
<body>
<div id=”firstDiv”>
Bunda pernah berkata kurang lebih… (I cut some contents here).
</div>
<div id=”secondDiv”>
Setelah ayahku meninggal maka ibuku harus menjadi ‘Single Parent’ bagiku…
</div>
<div id=”thirdDiv”>
Pada saat aku sudah bekerja di Jakarta…
</div>
<div id=”fourthDiv”>
Bunda sering berpesan agar aku tidak membedakan perlakuan…
</div>
</body>
</html>

Positions.htm refers to a CSS file named positions.css, here the external CSS file:

div
{
font-family:verdana;
font-size:12pt;
border:2px solid goldenrod;
background-color:lavender;
position:static;
width:450px;
}

The couple of code will give the following result:

positions1_all.jpg
With static positioning the document just flow as what is appear in HTML code.

2. Relative Positioning
Relative positioning behaves much like static positioning, but top and left properties affect the document appearance. The position for this positioning relative to its preceding element.
Add the following to our CSS file:

div.specialized
{
position:relative;
top:-40px;
left:-35px;
}

After that add a class attribute to the ‘secondDiv’ div element:

<div id=”secondDiv” class=”specialized”>

Refresh our page now you will see a page that look like this:

positions1_relative.jpg
Relative positioning, the element position relative to its preceding element.

3. Absolute Positioning
If an element’s positioning specified to absolute that element will be pulled out from document flow and precisely placed in the specific position relative to its current parent element that has non static position. If no such exist the element will be placed in specified position toward entire document.
Lets change the CSS file into the following:


div.specialized
{
position:absolute;
top:0px;
left:0px;
}

Then we should get the following result:

Absolute Positioning
Absolute positioning, the element placed absolute to its entire document, if there is exist an element than it will overlap.

4. Fixed Positioning
Fixed positioning places an element relative to browser window (viewport), so if we scroll the browser element with fixed positioning will remain in such position.
Change our CSS file into the following:

div.specialized
{
position:fixed;
top:0px;
left:250px;
}

Refresh our page and try to scroll down the window, and the ‘secondDiv’ element will remain
in the top of viewport!

Fixed Positioning
Fixed positioning. Even though we scroll down / up the window, an element with fixed position will remain in its position toward viewport.

Note: I try fixed positioning in Internet Explorer (IE) 6 and it doesn’t work
well. We need IE7 or higher to make it work!

Element positioning can make sense in some situations! I hope this useful & thanks.

Posted in HTML / CSS, Javascript | Tagged: , , , , | Leave a Comment »

Javascript and CSS Animations: A Brief Introduction

Posted by triaslama on March 4, 2008

Animations in Javascript and CSS can be accomplished using style attribute. The most frequently used property of style attribute to create animations / special effects are position, visibility/display, size, filter/opacity.

The position property figuring how an element placed in the window / browser. Visibility and display determine is an element visible or not. Size determine the size of an element. Opacity / filter determine if an element will be transparent or opaque.
Dynamic effects / animations can be achieved by manipulating that properties rightly. For example if we want placed an element overlap with another we can accomplish this task with position property. Want to make an element blur if an event happens? Opacity/filter will come to help us do this.

In the next post I will try giving a simple example on how to make animation using Javascript and CSS. But please notice that my next posts only gives simple examples, and aimed only to give some insights on how to make animations and special effects using Javascript and CSS. See you…

Posted in HTML / CSS, Javascript | Tagged: , , , , | Leave a Comment »