|
| Language |
|
|
|
|
|
| Archive |
| |
| 29 | 30 | 31 | 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 | 1 | 2 | 3 | | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
|
|
|
|
|
|
|
|
|
How to dynamically include JavaScript script reference into html
JavaScript’s day |
|
Posted By:
tengo |
|
At:
5/14/2009 5:25:00 PM |
|
|
|
One of my friends asked me how to dynamically include a reference to the JavaScript file into an html file.
Sincerely to say, I didn't know what to answer. But no additional effort was needed to find the answer, it's easy.
If you are familiar with JavaScript, then you can think of it yourself and you'll find the answer.
I wrote a function in JavaScript which makes all the work: dynamically creates object corresponding to the "<script>" tag, assigns it's "src" property a value of file name, and then adds this object to the current document. Have a look:
<script language="javascript" type="text/javascript">
function IncludeJS(file)
{
var scr = window.document.createElement("script");
scr.src = file;
document.body.appendChild(scr);
}
</script>
All works fine. One more thing I would mention here:
When invoking a method that is contained in dynamically referenced script file, always make a little more coding to ensure that no script errors will be thrown. For this purpose, my test button's "onclick" event checks, if the method that SHOULD be in the included file, exists. Look at this button tag:
<input type="button" value="Invoke Sample Method" onclick="if (window.SampleMethod) SampleMethod()" />
That's all about today's JavaScript.
|
Filed Under:
JavaScript | HTML | |
|
Post Tags:
dynamically | file | function | html | include | javascript | js | script | src | |
|
|
|
|
HTML Editing
How it works |
|
Posted By:
tengo |
|
At:
5/8/2009 9:55:00 AM |
|
|
|
Did you know that almost any HTML control can be switched into edit mode? This effect can be achieved easily: just add CONTENTEDITABLE attribute to the component that must be an editor.
Place the following tag into the source of you HTML page and view it in browser:
<div CONTENTEDITABLE>some editable text</div>
As you can see, the text "some editable text" is editable now. In the easiest editing scenario, you can copy-paste the content from Word document to that editable area. For more complicated scenarios you can use document.execCommand method. (For advanced scenarios you can use a free and ready to use HTML editor tinyMCE).
Now let's talk about how you can get the content of that div as HTML. Depending on your needs, you can just get the content and do some operation with it. In my practice I had few situations when I wanted the content to be submitted to the server. As you probably know, only HTML input controls have ability to submit their values to the server. For this purpose, here I consider the code fragment that shows how to move the HTML value of the editable div to a Textarea control that actually can submit its value. The Input-button tag is added to move the content from one control to another.
<div id="text" CONTENTEDITABLE>some editable text</div>
<textarea id="content"></textarea>
<input type="button" value="get HTML content" onclick="content.value=text.innerHTML">
That's all, a little but sometimes very useful thing.
And one more: Button element can be created using not only the standard input tag, but also using a button tag like this:
<button value="some value">some text</button>
Note, that the button has a text "some text" instead of "some value" as you might think at a first look.
Thanks for your time.
|
Filed Under:
JavaScript | HTML | |
|
Post Tags:
button | contenteditable | div | editor | html | javascript | submit | textarea | value | |
|
|
|
|
Table layout vs. DIV layout
Today's topic |
|
Posted By:
tengo |
|
At:
4/15/2009 2:40:00 PM |
|
|
|
Today I was discussing this topic with one guy, who is interested in web development. As everyone, he also visits a lot of development forums and finds different approaches of the web site design, discussed on the forums. He said to me that he's interested to learn how to build a web page layout using DIV instead of tables, he gave me a link to the forum topic, where I found an idea of a developer, who supposes this kind of layout is more professional.
I don't want to criticize the developer, any person can have his/her own mind, but my mind sounds a little different than the one from the forum.
Before I continue writing around the topic, for those who don't know what we're talking about:
Table layout means that page's html source contains a <table> tag inside of it's <body> tag, such way, layout and positioning of each element depends on the table structure and layout, as all other elements of the page would be it's child elements.
DIV layout means that every element placed on the page is a child of a <div> element, or is itself, a <div> element. That means layout and positioning of all the elements are controlled by <div> elements.
As I think, both of the solutions are useful, interesting and rather professional. If you ask which one do I prefer, a table layout is the one I prefer.
But I want to mention, in the case of professional and correct using of these layouts, the result will be the same, be sure in that.
I didn't like the topic of the forum that I have read, because there was said that the table layout structure is old enough and in our days it's important to use only a DIV layout. As I understood the author has ambitions to use DIV layout because this one is developed later and supposed to be called as a newer technology approach. But I would say, it's not a reason to throw away a table layout.
At first, if table layout approach is old, that means that this approach is more supported by all the browsers as a default than the new one. Have in mind, none of a browser developer companies have announced the end of table layout support, am I right? (We all remember how everyone moved away from using frames, because such recommendations where announced)
At a second, I would say, a good developer must be familiar with both of these approaches, but not only with one of them.
One more thing: the guy asked me to explain the following fact:
He placed two div elements on the html page, on one line, and then he just resized the browser window, and when the size was smaller that the area containing both DIVs, the second div moved down, under the first one.
It happens because nothing has told to the second div to remain the position in first line, it's like you wrote a paragraph of text, which took several line on the page. Of course in the case of resizing the window, words of the paragraph move and change their line positions depending on the size of the browser's window. Imagine the div is a word, so everything is clear. The div moves to the next line when there is not enough space for it on the current line, like a word in the text.
How to avoid this:
Use a table layout. (A little funny, all the topic was about it)
In details: Insert a table with two cells in a row, place one div in each cells, they will remain in the same row, because table cells don't change their line positions depending on the browser's window size.
But I must say, there is another way also, using DIV layout:
Insert a div element having a width more than both of divs together, and place both divs inside the last inserted div element. That's all, but be careful, if someone entering your web site has a low resolution of a screen, he will have to scroll to the right and left to see everything on your page. But in some cases, using a table layout can bring the same problem.
Several other hints:
To make divs position on the same line, add the following attribute to both of them: style="float: left;"
To assign a width to the div, use the same style attribute as follows: <div style="width: 500px"></dv>
That's all for today.
|
Filed Under:
HTML | |
|
Post Tags:
design | div | html | layout | style | table | |
|
|
|
|
Javascript Drawing Framework
Making world better |
|
Posted By:
tengo |
|
At:
4/10/2009 6:00:00 PM |
|
|
|
Hello everyone. How about making world better? Sounds good.
Do you know that JavaScript doesn't allow drawing? I wanted to create some drawing capabilities for some reason. However, it won't be very important, if your web site is built using ASP.NET technology. There is a great way for generating images dynamically in asp.net.
A little more difficulties are met while using PHP, or no server side scripting. I remember once I had a web-site written in PHP, but a hosting server was not supporting image generating. Thus, I had no chance to draw any user friendly images to the client browser.
And of course, there is no way to generate any kind of images without server side script hosting.
Yesterday I decided to write a little JavaScript code. And today I want to consider that code with you.
My only wish was, to create some drawing capabilities, as simple as possible. Sometimes a human wants to terminate the borders, so called Rules. In the end of this article you will understand that there can be created something for drawing purposes in JavaScript.
As there is nothing for drawing in JavaScript, the first thing that I needed is something that would be a drawing board, and as long as JavaScript works well with HTML components (furthermore, it's created for working with HTML components), I decided to use them as a boards. Decision stopped on the html DIV component. So I placed the DIV on my empty HTML page.
Then the logic built itself from the scratch.
What is drawing? What means to draw a line, a circle, rectangle, etc.? Any of them contain points, right? Anything can be drawn if we can draw a point. So, let's start thinking how we can do that.
I remember my first impression, when I looked at the picture containing just a point very closely. When I zoomed into a 500%, I was surprised; point became a rectangle, great effect of the computer technologies. Think of that as a great point to start from, indeed everything placed on the HTML page is displayed like rectangles. Did you catch an idea? Yes, I mean that we can create a component on the drawing board (actually HTML DIV component), with a very little sizes, and believe me, that wouldn't be nothing else than a point. Let's see how I wrote a code:
function Graphics_DrawPoint(x,y)
{
var div = document.getElementById(DivID);
var point = document.createElement("<div>");
point.style.position="absolute";
point.style.top=document.body.offsetTop + div.offsetTop + y;
point.style.left=document.body.offsetLeft + div.offsetLeft + x;
point.style.backgroundColor=Brush_Color;
point.style.width=Brush_Size;
point.style.height=Brush_Size;
div.appendChild(point);
}
Now, as we can draw a point, we can draw a line as well. The only thing we need is to remember a formula of line from the mathematics. As a theory says, if we have two points (x0,y0) and (x1,y1), then any (x,y) point on the line will satisfy the following formula: (x-x0)/(x1-x0) = (y-y0)/(y1-y0). So how can we use that? If given two points, we must generate all the points between them. Of course it will be easier if we generate only one from the pair of coordinates, and then calculate another one using the first one. So, functions calculating x using y and vice versa will look like this:
function Graphics_CalculateLineX(y,x0,x1,y0,y1)
{
return ((y-y0)*(x1-x0)/(y1-y0))+x0;
}
function Graphics_CalculateLineY(x,x0,x1,y0,y1)
{
return ((x-x0)*(y1-y0)/(x1-x0))+y0;
}
and after these functions we can of course write a function that will draw a line (having in mind the fact we already can draw a point):
function Graphics_DrawLine(x0,y0,x1,y1)
{
var x;
var y;
if (Math.abs(x0-x1)>Math.abs(y0-y1))
{
x = Math.min(x0,x1);
while (x<x1)
{
y=Graphics_CalculateLineY(x,x0,x1,y0,y1);
Graphics_DrawPoint(x,y);
x++;
}
}
else
{
y = Math.min(y0,y1);
while (y<y1)
{
x=Graphics_CalculateLineX(y,x0,x1,y0,y1);
Graphics_DrawPoint(x,y);
y++;
}
}
}
Very easy, isn't it?
Now let's think a little about a fact, that all these functions are executed on the client machine, meaning that they are using a memory of the client machine. As more points are drawn as more memory is needed. But don't forget a fact that: in our days, when the internet network is developing and growing, this must not be a problem. Any web page, that is accessed across the web, using a simple HTML browser, parses and displays a large amount of HTML components. To prove that, you can open any average size web site and view it's HTML source. But anyway, trying to make a world better must not become a warranty of memory overflow. Yes, a developer must make a decision to make a little pressing on the client machine during execution of some code, if there's no other way to do that. My next functions will show that some drawing purposes can be achieved without crating a large amount of points dynamically.
Next step is to draw a rectangle. As mentioned above, I'm not going to draw the rectangle using lines, because in this case I consider a rectangle that is positioned so as its sides are parallel to the edges of our screens. Any other king of rectangles, or polygons, can be drawn using a line drawing functions. In my case, rectangle is the same starting point, saying that every component on an html page is a simple rectangle. So, a task of drawing rectangle becomes a task of creating a transparent component that displays only borders. Those borders will appear as a rectangle itself. It will work fast, and the solution will be the same as needed:
function Graphics_DrawRectangle(x0,y0,x1,y1)
{
var div = document.getElementById(DivID);
var rect = document.createElement("<div>");
rect.style.position="absolute";
rect.style.top=document.body.offsetTop + div.offsetTop + Math.min(y0,y1);
rect.style.left=document.body.offsetLeft + div.offsetLeft + Math.min(x0,x1);
rect.style.background="transparent";
rect.style.border=Brush_Color + " " + Brush_Size + "px solid";
rect.style.width=Math.abs(x1-x0);
rect.style.height=Math.abs(y1-y0);
div.appendChild(rect);
}
I don't want to waste a time explaining how to create a function that will allow us drawing a filled rectangle. Think a little about it.
An interesting step is to draw a circle. Let's again, remember a little mathematics. Again, a formula says that if we draw a circle with center at point with coordinates (0,0) then any point with coordinates (x,y) satisfies any of the next two formulas: 1) x*x + y*y = r*r. 2) sin(alpha) = y/r, cos(alpha) = x/r. where alpha is an angle calculated in the backward direction of a clock. First formula is a little more difficult to use, because calculating all x and y coordinates will take a little more time. It's easier to change alpha from 0 to 360 and find all the coordinates. But wait, the circle's bottom side repeats it's upper side, so we can calculate only one side from them and draw the same points as transformed to the middle line of the circle... But wait again, we can see that a part of circle contained between angles 90 and 180 repeats a part contained between angles 0 and 90, and applying the same logic we can calculate only a one-forth part of the circle and draw all other points as transformed to the middle line in horizontal or in vertical direction. And one more thing, as I found the topic in the documentation, JavaScript Math.sin() function needs a parameter in radians, not in degrees. So a function looks like this:
function Graphics_DrawCircle(x,y,r)
{
var div = document.getElementById(DivID);
var alpha = 0;
while (alpha <= (Math.PI/2))
{
var x1 = r * Math.cos(alpha);
var y1 = r * Math.sin(alpha);
Graphics_DrawPoint(x+x1,y+y1);
Graphics_DrawPoint(x+x1,y-y1);
Graphics_DrawPoint(x-x1,y+y1);
Graphics_DrawPoint(x-x1,y-y1);
alpha += (Math.PI/180);
}
}
Ok. I think I have explained a big amount of my thoughts about JavaScript drawing capabilities. All the code can be found in the attached file. I just changed a code so that callings to these functions look like object oriented, like this:
var g = new Graphics("divContainer");
g.Brush.Color='green';
g.DrawLine(10,10,200,50);
There are also added a little more functions, like displaying a string and filling a rectangle, and of course drawing an arc. You can add more and more functions as your needs request.
When you can use it?
For example, when displaying a result of user surveys on the page, and indeed without any ready images saved on the server. A simple shape can be drawn without any other tools.
I hope you found something interesting here, in this topic.
Have a good day!
Attached File: Sample.htm
|
Filed Under:
JavaScript | |
|
Post Tags:
arc | circle | component | div | draw | fill | html | javascript | rectangle | |
|
|
|
|
How to create ASP.NET form without action
Standard solution breaks the designer, I prefer the other way |
|
Posted By:
tengo |
|
At:
2/11/2009 3:05:00 PM |
|
|
|
How to create ASP.NET form without action
Standard solution breaks the designer, I prefer the other way
Ok, first what I did is just opened site http://asp.net/learn, entered the ASP.NET section and found the video from "How Do I" series, which describes how to make URL rewriting.
Great video, my advice to you is to find a little free time and have a look at this too.
There is said that, if you want to make URL rewriting in your ASP.NET project, you just have to create a class, inherited from System.Web.IHttpModule, and implement it's methods. In the Init() method you have to assign event handler to the application event called BeginRequest. It's fired every time when the request is sent to the server.
If you didn't yet understand the logic, I want to explain: According to the request you can find the URL to which it's pointing, and then, if it's your wish, you can change that particular URL with something else. But don't think about it as it sounds from the start. Changing URL means that URL in the address bar remains unchanged, but request is sent to another URL, the one you provided for changing the old one. Great trick, yeah?
For example: consider you have a web site, and you have user profiles stored in your SQL DataBase or some other kind of source. Let's consider your site's domain name is http://mysite.com. Your task is to show the profiles of users. Of course you would not create so many ASP.NET pages as many users you have. Am I right? Then what would you do?
One of the ways is to create a page which will display user's information according to the provided parameters. Let's say you created a page UserProfile.aspx which expects user's login name written in the query string, like this: UserProfile.aspx?Login=someLogin. Easy logic.
In the code of the page you just check the value of Request.Querystring["Login"], which is of type string, and then you make a simple select statements from the data source.
Considering this, you can understand, that, if needed to display the profile of user with login "tengo", then you must enter the following URL in the address bar of your web browser:
http://mysite.com/UserProfile.aspx?Login=tengo
not a bad job.
But!
Why not to make it possible to access the profile of user with login "tengo" using the following URL:
http://mysite.com/Users/tengo.aspx
(just like my blog does).
It looks like you have to create a page named tengo.aspx but, using the feature of URL rewriting you can solve the problem very easy. In terms of URL rewriting, the request URL in this case is http://mysite.com/Users/tengo.aspx. and the second URL, using which you must change the requested URL, is the real, working URL, that is: UserProfile.aspx?Login=tengo.
And that means, that address in the address bar of the browser will be the first, and the request will be processed in the second one.
Ok, next step.
If you watched the video that I mentioned about, you would already know, that this approach has some not very comfortable results. One of them is: if you have any button or anything that makes the page submitting, that means, after clicking on that, user will see the URL that you so much tried to hide from the eyes of the user.
The same video, teaches us how to avoid this problem. You can just create your own class, inherited from System.Web.UI.HtmlControls.HtmlForm, and override it's RenderAttributes() method. Why you need that?
The reason that just opens you secret URL to the user is the "action" attribute of the form tag, that is contained on each ASP.NET page. If that attribute would not be there, everything would be just fine! I hope now you understood. After overriding the RenderAttributes() method you can just render all the attributes of the form except the one with a name "action". Great approach, I did try it on my own project, created the class of Form, registered that class in my ASP.NET page using <%@Register %> directive of ASP.NET, and then, just simply changed the tag <form> with my own tag name (the name of the class I had created).
Everything's fine, and you would think: that's all, the problem is solved.
Not so fast, please...
Yes, I changed the tag in my ASP.NET page, ran the project, saw the result. I was happy. Then, I just continued writing some other codes in the project and...
I was very surprised when I switched to the design view of the page and, what there happened is, there was nothing visible in the design view of the page. Everything disappeared, page was empty and a rectangle positioned in the left upper corner of the page was saying:
Error Creating Control - form1
Unable to cast object of type ‘System.Web.UI.Design.HTMLIntrinsicControlDesigner' to type ‘System.Web.UI.Design.ControlDesigner'
Now what? Designer is broken.
The first think I just thought, I would change the form tags back as it was from the beginning, continue the development, and then, before releasing it, I would change the tags as needed.
Not very comfortable solution (as for me).
Second solution:
Create a class inherited from System.Web.UI.HtmlTextWriter, override it's WriteAttribute methods, in the beginning of the method check if the name of attribute is "action", and if so just exit the method.
Then, create a class inherited from System.Web.UI.Page class. Override it's Render method, and make a rendering to your htmltextwriter class.
It was in a little amount of words, explained the solution. Now I'll explain all in details:
Every page in you project is a class inherited from the System.Web.UI.Page class. And of course, when rendering it to the browser as HTML, the rules contained in the Page class are used.
Now you understand, that if you'll have you own Page class, and write there the rendering rules, and then change your pages so as they inherit from your Page class, then every page will play with your rules.
Let's look at the code of my HTMLTextWriter class:
public class HTMLTextWriter : System.Web.UI.HtmlTextWriter
{
public HTMLTextWriter(System.Web.UI.HtmlTextWriter baseWriter) : base(baseWriter)
{
this.InnerWriter = baseWriter;
}
public override void WriteAttribute(string name, string value)
{
if (name.ToLower() == "action")
{
return;
}
base.WriteAttribute(name, value);
}
public override void WriteAttribute(string name, string value, bool fEncode)
{
if (name.ToLower() == "action")
{
return;
}
base.WriteAttribute(name, value, fEncode);
}
}
and here's the code of my Page class:
public class MyPage : System.Web.UI.Page
{
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
base.Render(new HTMLTextWriter(writer));
}
}
as you see, in the constructor of HTMLTextWriter class I'm saving the pointer to parameter baseWriter assigning it to the propery InnerWriter. InnerWriter is the writer that writes everything. I'm not interested what it was before this assignment. The fact is, I'm invoking Page class's Render method using a writer that must have everything rendered inside. And of course, code will be writing everything to this writer, because I saved the pointer to it.
Then, everything is very simply, overriding WriteAttribute methods, I write everything to exactly that writer, except the attribute named "action".
When done with this code, now you can access the code of your pages and change the inheritance of them. Like this (for my default page):
public partial class _Default : MyPage
let's try a designer... All's working fine!
Happy coding!
|
Filed Under:
ASP.NET | C# | |
|
Post Tags:
action | aspnet | csharp | form | html | rewrite | url | |
|
|
|
|
|
|