Sunday, 24 June 2012

text scrolling


<MARQUEE ...>

Attributes:
  • WIDTH: how wide the marquee is
  • HEIGHT: how tall the marquee is
  • DIRECTION: which direction the marquee should scroll
  • BEHAVIOR: what type of scrolling
  • SCROLLDELAY: how long to delay between each jump
  • SCROLLAMOUNT: how far to scroll
  • LOOP: how many times to loop (default=infinite)
  • BGCOLOR: background color
  • HSPACE: horizontal space around the marquee
  • VSPACE: vertical space around the marquee
The Marquee tag creates a scrolling effect and can be tailored to include any HTML content. Like the much hated <blink> tag, the <marquee> tag is often regarded as one of the "evil" tags, so many people shy away from using it. There are some places where it can work well, such as in RSS scrollers, squeezing some products into a page for page monetization as per our tee shirt example (see the sidebar on the right), and for accents on a page.
The marquee tag has often been overused by beginning coders who like to show off their HTML prowess by overusing every kind of fancy tag they can conjure up and in the early days of the web, the marquee tag was overused almost as much as the <blink> tag to the irritation of many. Microsoft even stopped supporting the <blink> tag, so that the simple HTML for blinking text now does not work in IE! (There is a way to do it with javascript that works in all browsers if you really must!)
The basic use of <MARQUEE ...> is simple. Put almost any kind of markup between <MARQUEE> and </MARQUEE>.
A basic marquee is coded like this:
Code:<marquee>Scrolling text</marquee>
Display:Scrolling text















Enter Text Below:



Saturday, 23 June 2012

URL redirection java script


javascript redirect



You're moving to a new domain name. You have a time-delay placeholder on your download site. You have a list of external web servers that are helping to mirror your site. What will help you deal with and/or take advantage of these situations? JavaScript redirects will.

When your webpage is moved, you'd probably want to notify your visitors of the change. One good way is to place a "redirect page" at the old location which, after a timed delay, will forward visitors to the new location of your webpage. You can do just this with a JavaScript redirection.

javascript window.location

Control over what page is loaded into the browser rests in the JavaScript property window.location. By setting window.location equal to a new URL, you will in turn change the current webpage to the one that is specified. If you wanted to redirect all your visitors to www.google.com when they arrived at your site, you would just need the script below:

HTML & JavaScript Code:

<script type="text/javascript">
<!--
window.location = "http://
www.pianoandweb.blogspot.com/"
//-->
</script>

javascript time delay

Implementing a timed delay in JavaScript is useful in the following situations:
  • Showing an "Update your bookmark" page when you have to change URLs or page locations
  • For download sites that wish to have a timed delay before the download starts
  • To refresh a webpage once every specified number of seconds
The code for this timed delay is slightly involved and is beyond the scope of this tutorial. However, we have tested it and it seems to function properly.

HTML & JavaScript Code:

<html>
<head>
<script type="text/javascript">
<!--
function delayer(){
window.location = "../javascriptredirect.php"
}
//-->
</script>
</head>
<body onLoad="setTimeout('delayer()', 5000)">
<h2>Prepare to be redirected!</h2>
<p>This page is a time delay redirect, please update your bookmarks to our new
location!</p>

</body>
</html>
The most important part of getting the delay to work is being sure to use the JavaScript function setTimeout. We want the delayer() function to be used after 5 seconds or 5000 milliseconds (5 seconds), so we pass the setTimeout() two arguments.
  • 'delayer()' - The function we want setTimeout() to execute after the specified delay.
  • 5000 - the number of millisecods we want setTimeout() to wait before executing our function. 1000 miliseconds = 1 second.

web page redirection

Do use JavaScript for redirections when you change your website's URL or move a file to a new location. Don't use redirections when they can easily be replaced with a normal HTML hyperlink.

Transparent Background for Blogs


PICTURE BACKGROUND FOR BLOGS


The first step is to find or create the picture you wish to put up as the background. You can create a small picture in any graphics program. It should be small ( around 96x96 pixels would do) and 'tileable'. This means that it should repeat itself without any borders across your web page. To source such graphics from the Internet just do a Google search for 'graphic backgrounds'.



After finding the picture save it to your hard disk (make sure of any copyright conditions). Then upload the picture to Photobucket or Googlepages and copy down he link of the picture.



To put it as the background in your blog login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. The picture has to cover the whole body of the blog so scroll down to this code in the CSS part of the template :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

The CSS part of the template is the code which lies between <b:skin><![CDATA[ and ]]></b:skin> tags.



To the above code add these lines :

background-repeat: repeat;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;

so it looks like this :

body {
background:$bgcolor;
background-image: url(LINK OF PICTURE);
background-attachment:fixed;
background-repeat: repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Replace 'URL OF PICTURE' with the link to your picture. The background-image line shows the location of the picture where you have uploaded it at Photobucket or Googlepages. The background-attachment line fixes the picture so that it does not scroll with the page. The background-repeat line tiles the picture vertically and horizontally if you give it a repeat parameter.


Click Preview and then Save Template. Clear cache and view Blog. Now that your background is ready it is time to make your blog transparent.






TRANSPARENT BACKGROUND FOR BLOGS


To create the transparent background I have used code from Mandarin Designs. To add this code login at Blogger.com and click on Layout link on Dashboard. Then click n Edit Html subtab of Template tab and scroll down to the part of the blog code which you wish to make transparent. To make the followng background transparent :




apply the code change to :

outer-wrapper

code. To apply it to the blog posts only, change the :

main-wrapper

code. This is what it looks like after applying it to posts section :



To apply it to the sidebar change the code in the :

sidebar-wrapper

section in the CSS part of the template. Similarly to apply it to the header or footer change the code in the :

header-wrapper 

footer-wrapper

sections.
NOTE : The sections in your blog may have different names depending on the template. Add the code to a section and click on Preview button to see what parts of the blog become transparent.



This is the code to apply :

background-color: silver;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;

After applying it to the outer-wrapper it will look like this :

#outer-wrapper {
background-color: silver;
opacity:.85;
filter: alpha(opacity=85); 
-moz-opacity: 0.85;

width: 1024px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

You can change 'silver' to any other colour like 'blue', 'red' to see the effect with that color. This what it looks like with a red filter applied to the outer-wrapper :




Also experiment by changing '0.85' (opacity and moz-opacity) and '85' in filter: alpha(opacity=85) to any number between 0 to 1 in the first and 1 to 100 in the second to vary the transparency or opacity.


This is what it looks like in the demo blog outer-wrapper :



You can see the above code effect in this demo blog. I have given a white color to the various sections and the rest of the blog looks like a transparent skin sliding over a fixed wall (background).