“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”
Webmasters or web designers use this text widely. Ever wondered what is this and where it came from?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why Use Lorem Ipsum?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose.
English Translation of Lorem Ipsum
Cicero’s original text
…neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?”
H. Rackham’s 1914 translation
Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
Website
http://www.lipsum.com
Share This
To make an iframe transparent (background of the iframe page is visible through the data from the other page), you just need to use 2 additonal code snippets.
1) In the iframe code add ALLOWTRANSPARENCY=TRUE
2) In the content page (the page seen through the iframe), add
<style type=”text/css”>
body
{
background-color: transparent
}
</style>
And you are done. Iframes are not recommended for pretty fair reasons but sometime depending upon requirements of websites it becomes necessary to use iframes and with design based websites we have to take care about backgrounds of design which iframe can disturb. By this code transparent iframe can be used easily.
Share This
Advanced & latest versions of browsers support transparent PNG by default. i.e. Internet Explorer 7, New Firefox, Safari and Opera etc. For IE 6 another version of this script works fine in which I gave you an example how to implement transparency in PNG for web pages. But what about background image and what if you have older browser like IE 5.5 etc.
This example covers all issues relating to displaying transparent PNG image in webpage, wether it be image or background and independent of browser.
For this script you will have to take care about following things.
- script tag which calls js file is little bit different with defer type inclusion.
- You will have to attach id to image and CSS as well.
- And a js file of course.
No need to put anything with simple image. Script will automatically identify img tag and if it gets transparent PNG, it will display it transparent. If you have used a CSS for TD which has background and that is PNG. You will assign an id to that TD and with little bit modification in the CSS, you will be able to manage it all.
While using PNG background, give TD exact width and height, in case you want to display it once, otherwise it will be stretched.
Anyways see it for yourself. Nonetheless it is powerful solution. Have fun!
Download Transparent PNG Powerful Example - Cross Browser, Compatible
Share This
We will be needing a js file and a page containing form input field to do this task.
What we are planning is, The input field contains default value. Onclick default value disappears and allows the user to insert text.
If the user types anything it remains there but if he does not write anything and clicks at next input field than the default value reappears in previous field.
JS file Code:
function remName(a, b){
if(a.value==b){
a.value='';
}else if(a.value==''){
a.value=b;
}else{
a.value=a.value;
}
}
function chkName(a, b){
if(a.value==''){
a.value=b;
}else{
a.value=a.value;
}
}
Two functions are controlling the event as above.
Call the js file in the page and define input fields and put some code like this.
Input Fields:
<input name="txtName" type="text" id="txtName" onfocus="remName(this, 'Name');" onblur="chkName(this, 'Name');" value="Name">
<input name="txtEmail" type="text" id="txtEmail" value="Email" onfocus="remName(this, 'Email');" onblur="chkName(this, 'Email');">
and so on…
Share This
Transparent PNG Image In Webpage Made Easy
This example will show you how to use a transparent PNG image in webpage. When it comes to slicing and using images in webpage, we have to use some images in gif form sometimes particularly for curves and rounded corners while creating boxes by images for webpage. We use images in background. Give any gif a shadow or glow, export it transparent and use it in webpage and you will see that transparency quality is not so good.
We know that PNG gives us transparent background in sharp quality but when we use this PNG in webpage, it will have a default background in all browsers.
Now we will tweak this a little bit and add a style sheet to that particular transparent PNG image or you can use style sheet to IMG tag which will be applied to all transparent PNG images of website and add a PNG behavior HTC file in the same folder and we are done. Now all the transparent PNG images at website or page will have exact sharp fine quality transparency. I have tested it for IE, Mozilla Firefox, Safari and Opera browsers and it works fine. Download the example below.
Download transparent PNG background example in webpages
P.S. For this script IE version requirements are 6. And I did not try this for background PNG image. For more powerful, compatible and cross browser solution download another flavour of the script.
Download More Powerful Solution For Transparent PNG Issue
Share This
How to draw a border with caption around the data or form.
<fieldset>
<legend>
Health information:
</legend>
<form action=”">
Height <input type=”text” size=”3″>
Weight <input type=”text” size=”3″>
</form>
</fieldset>
If there is no border around the input form, your browser is too old.
Share This
<h4>Disc bullets list:</h4>
<ul type=”disc”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type=”circle”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type=”square”>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
Share This
Try this out:
<html>
<body>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Share This
A definition list is not a list of items. This is a list of terms and explanation of the terms.
A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Here is how it looks in a browser:
Coffee
Black hot drink
Milk
White cold drink
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.
Try this out:
<html>
<body>
<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
Share This
Loading ...
