Showing posts with label HTML. Show all posts

Scrolling DIV

<html>
        <script type="text/javascript">
        var scrolling = null;

        function scroll_up() {
            var d = document.getElementById('scroller');

            d.scrollTop = d.scrollTop - 5;

            scrolling = window.setTimeout(function() {
                scroll_up();
            }, 100);
        }

        function scroll_down() {
            var d = document.getElementById('scroller');

            d.scrollTop = d.scrollTop + 5;

            scrolling = window.setTimeout(function() {
                scroll_down();
            }, 100);
        }

        function stop_scroll() {
            window.clearTimeout(scrolling);
        }
        </script>
        <body>
            <div style="color:red;" onmouseover="scroll_up();"

onmouseout="stop_scroll();"> scroll up </div>
            <div id="scroller" style="width:100px; height:70px;

overflow:hidden;">
                Hi,

                I am using a menu inside a div tag.
                What i want to do is to add scroll buttons
                (up and down ) along side div which move
                the div up and down on mouse over.
                How can i achieve this?

                It would be very nice of you if you can
                provide a link to the article or blog
                where solution is provided to my problem.

                Thanks in advance,
                Saad Alam
            </div>
            <div style="color:blue;" onmouseover="scroll_down();"

onmouseout="stop_scroll();"> scroll down </div>
        </body>
    </html>

how to validate file extension and filesizea and filename in javascript

<html>
<head>
<script>
function getSize()
{
    //var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;

    alert(filepath);

    //var thefile = myFSO.getFile(filepath);
//    var size = thefile.size;
//    alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>

Radio button validation in javascript

HTML
<input type="radio" name="paymenttype" id="paymenttype" value="Payment through Gayeway"/>Payment By Card
<input type="radio" name="paymenttype" id="paymenttype" value="Payment through Check" />Payment By Check

Script

if (!checkRadio())
{
alert('You have to select payment type');
return false;
}

function checkRadio () {
var radios = document["frmUser"].elements["paymenttype"];
for (var i=0; i <radios.length; i++) {
if (radios[i].checked) {
document.getElementById("hdn").value=radios[i].value;
//alert(document.getElementById("hdn").value)
return true;
}
}
return false;
}

Sending mail through yahoo in html href

<a target=""_blank"" href=""http://us.mc1809.mail.yahoo.com/mc/compose?to=pradeepta@TheRedVault.com"">pradeepta@TheRedVault.com</a>

Multiselect Checkboxes and Listboxes : Scripting Multiselect Elements

http://www.insidedhtml.com/tips/html/ts16/page2.asp

Whether you use a multi-select list box or multiple check boxes the server receives the same information. However, if you use JavaScript on your page, you need to manipulate the form elements slightly differently. Below are scripts from Chapter 10 of the book Inside Dynamic HTML that makes multiple checkboxes and multi-select list boxes work the same way.

Scripting Multiple-Select List Boxes

Multiple-select list boxes allow the user to select more than one item from a list. In a multiple-select list box, the value property returns only the first selected item. To determine all the selected items, the entire list of options must be enumerated using a script. The following function demonstrates how to build an array of selected items for any list box. (If you use this function with a single-select list box, the resulting array will contain only a single value.)

<SCRIPT LANGUAGE="JavaScript">
   function getSelected(opt) {
      var selected = new Array();
      var index = 0;
      for (var intLoop=0; intLoop < opt.length; intLoop++) {
         if (opt[intLoop].selected) {
            index = selected.length;
            selected[index] = new Object;
            selected[index].value = opt[intLoop].value;
            selected[index].index = intLoop;
         }
      }
      return selected;
   }
</SCRIPT>

Using Check Boxes for Small Lists

If the number of options is small, it might make more sense to use a set of check boxes instead of a multiple-select list box. By sharing the same name across each check box in the set, the check boxes will have the same submit behavior as the multiple-select list box. The preceding function can be rewritten as shown in the following code to determine which check boxes are selected. Rather than enumerating the options collection contained in the Select element, however, you must enumerate the Form elements with a given name. Instead of passing an options collection to the function, the collection of check boxes is used. Another distinction is that check boxes expose a checked property for determining whether they are selected, while the list box uses the selected property, so the conditional logic in the function tests for either selected or checked.

<HTML>
   <HEAD>
      <TITLE>Multiple-Select Check Boxes</TITLE>
      <SCRIPT LANGUAGE="JavaScript">
         function getSelected(opt) {
            var selected = new Array();
            var index = 0;
            for (var intLoop = 0; intLoop < opt.length; intLoop++) {
               if ((opt[intLoop].selected) ||
                   (opt[intLoop].checked)) {
                  index = selected.length;
                  selected[index] = new Object;
                  selected[index].value = opt[intLoop].value;
                  selected[index].index = intLoop;
               }
            }
            return selected;
         }

         function outputSelected(opt) {
            var sel = getSelected(opt);
            var strSel = "";
            for (var item in sel)       
               strSel += sel[item].value + "\n";
            alert("Selected Items:\n" + strSel);
         }
      </SCRIPT> 
   </HEAD>
   <BODY> 
      <FORM NAME="ColorSelector">
         <INPUT TYPE=CHECKBOX NAME="color" VALUE="Red">Red
         <INPUT TYPE=CHECKBOX NAME="color" VALUE="Navy" CHECKED>Navy
         <INPUT TYPE=CHECKBOX NAME="color" VALUE="Black">Black
         <INPUT TYPE=CHECKBOX NAME="color" VALUE="White" CHECKED>White
         <INPUT TYPE=BUTTON VALUE="Selected Check Box Items" 
            ONCLICK="outputSelected(this.form.color);">
         <P>
         <SELECT NAME="multistore" SIZE=3 MULTIPLE>
            <OPTION VALUE="Computer" SELECTED>Computer</OPTION>
            <OPTION VALUE="Bookstore">Book Store</OPTION>
            <OPTION VALUE="MailOrder" SELECTED>Mail Order</OPTION>
         </SELECT>
         <INPUT TYPE=BUTTON VALUE="Selected List Items" 
            ONCLICK="outputSelected(this.form.multistore.options)">
      </FORM>
   </BODY>
</HTML>

On mouseover anchor tag text color change

<a target="_blank" class="change" href="http://google.com" style="text-decoration:none;text-align:center"><font size="+1" face="Adobe Garamond Pro Regular">http://google.com</font></a>

<style type="text/css"></style>

Html youtube player

Adding and deleting the option values of a select element of html from javascript.

<html>

<body>

<script language="javascript">

                    

                    function setQuantity()

{





var i=0;

 var myselect=document.getElementById("mySelect");

 //alert(document.getElementById("mySelect").value);

 var len=myselect.length;







for(i=myselect.length-1; i>=0; i--)

    {



   

        myselect.options[i] = null;

     

    }









if(document.getElementById("selHomepageTile").value=="Large")

{

    var newOpt1 = new Option(1, 1);

    myselect.options[0] = newOpt1;

}



if(document.getElementById("selHomepageTile").value=="Medium")

{

for(i=3;i>=1;i--)

{





var newOpt1 = new Option(i, i);

    myselect.options[i-1] = newOpt1;

    



}

myselect.selectedIndex = 0;



}

if(document.getElementById("selHomepageTile").value=="Small")

{

for(i=12;i>=1;i--)

{

    var newOpt1 = new Option(i, i);

    myselect.options[i-1] = newOpt1;

    

    }

     myselect.selectedIndex = 0;

}

    

 } 

                    

                    </script>              

<select name="selHomepageTile" id="selHomepageTile" disabled="true"  onChange="setQuantity();">

                        <option value="Large">Large (1) $200</option>

                        <option value="Medium">Medium (3) $120/each</option>

                        <option value="Small">Small (12) $80/each</option>

</select>

<select name="mySelect" id="mySelect" disabled="disabled">

<option value="1">1</option>

</select>

</body>

</html>

anchor tag

HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
Links are specified in HTML using the <a> tag.
The <a> tag can be used in two ways:

To create a link to another document, by using the href attribute
To create a bookmark inside a document, by using the name attribute

The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>

The href attribute specifies the destination of a link.

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:

Example

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

<a target="value">

Attribute Values

Value	Description
_blank	Open the linked document in a new window or tab
_self	Open the linked document in the same frame as it was clicked (this is default)
_parent	Open the linked document in the parent frameset
_top	Open the linked document in the full body of the window
framename	Open the linked document in a named frame

calling a page from the javascript

All these open in the same window/browser

WITH QUERY STRING
-----------------------------------------
window.location.href = '/listings/listings_search.asp?strSearch=' + document.getElementById('txtSearch').value;

window.location.href = '/listings/listings_search.asp?strSearch=<%=variablename%>';

WITHOUT QUERY STRING
---------------------------------------
window.location.href='forgot_password.asp';

GO TO PREVIOUS PAGE
-----------------------------------------------
window.location.href = '/';

KeyCode

</head>
<script type="text/javascript">
function getKey(e)
{
if((parseInt(e.keyCode,10)<58 && parseInt(e.keyCode,10)>47) || parseInt(e.keyCode,10)==190 || parseInt(e.keyCode,10)==8)
{
return true;
}
else return false;
}

</script>
</head>
<body>
<input type="text" onkeydown="return getKey(event);" />
<input type="button" value="something" onClick="document.location.href='http://www.google.com';">
</body>

Button looks like link and goback to previous page

<input type="button" onClick="goBack()" value="Previous Page" style="background:none;border:none;cursor:pointer;color:#000099;">

<script type="text/javascript">
function goBack()
  {
  window.history.go(-1)
  }
</script>

href in Button format

mailto

HTML mailto attribute - HTML tips

The mailto is a quick way to add the facility of receiving feedback from visitor on your web site. With the HTML mailto, you create a link which when clicked by the visitor launches (if it's not already running) their email program with a new email message window. The visitor could then formulate the email message and send it off to you.
Note: HTML Mailto assumes that the visitor has configured an email client (Outlook Express, Netscape Messenger, Thunderbird or any other) to send emails.
In its simplest form, the HTML mailto requires an email address. However, mailto can be made slightly more professional if we use it properly.

The Basic form of HTML mailto

In its bare form a mailto looks like:

<a href="mailto:manish@simplygraphix.com">Send me an 
email</a>

And this is displayed as
Send me an email
When you click on the above link, your default email client will be launched (if you've configured one). You'll notice that the Subject and Body fields of the email message are empty. [Refer image below: I use Outlook Express email client and the snapshot below is from that program.]
The basic form of the HTML mailto

A more complex HTML mailto

We will now learn how to create a more complex HTML mailto by adding an email subject and the email body so that it looks a little more professional. And this will definitely save your visitors some typing too!

<a href="mailto:manish@simplygraphix.com?subject=Feedback for 
webdevelopersnotes.com&body=The Tips and Tricks section is 
great">Send me an email</a>

Send me an email
When you click on the above link, the Email Subject and the Email Body fields will be prefilled to "Feedback for webdevelopersnotes.com" and "The Tips and Tricks section is great" values, respectively. [Refer image below: Again, it's a snapshot from Outlook Express email client.]
A more complex form of the HTML mailto attribute carrying the email subject and and email body

A more complex form of the HTML mailto attribute carrying the email subject and and email body

Careful inspection of the above code will highlight two points. Firstly, the email address is separated from the other information by a ? sign (question mark) and secondly, body and subject properties are themselves separated using an &.
[Those of you familiar with server-side scripting will find a similarity between this mailto tag and the GET method.]
Remember, the prefilled email Subject and email body values can be changed by the visitor! But this fancy mailto looks better than plain one, doesn't it?
In addition to the body and subject, we can also provide HTML mailto with CC (Carbon Copy) and BCC (Blind Carbon Copy). This, as you would have guessed, requires us to append these values to the HTML mailto attribute just like we had done for body and subject. [Refer code and image below]

<a href="mailto:manish@simplygraphix.com?subject=Feedback for 
webdevelopersnotes.com&body=The Tips and Tricks section is great
&cc=anotheremailaddress@anotherdomain.com
&bcc=onemore@anotherdomain.com">Send me an email</a>

Send me an email
new email message created using HTML mailto with the body, subject, cc and bcc all prefilled

Advantages of HTML mailto attribute

HTML mailto is a quick and easy way for beginners or who don't know server-side programming languages (such as Perl, PHP etc.) to add a link on their web site for receiving visitor feedback. By the way, you can be more intuitive with HTML mailto. For example, you can use it to create "Tell a friend" or "Send this page to a friend" kind of links on your web site. For your convenience, here is the code and the link.

<a href="mailto:?subject=Check out www.webdevelopersnotes.com
&body=Hi, check out this great web site">
Send this page to a friend</a>

Send this page to a friend
You will notice that we have left out the email address so that the visitor can enter any email address they want but the question mark remains.

How to access and change the html controls background color.

HtmlTableRow thTopPanel = (HtmlTableRow)e.Item.FindControl("thTopPanel");
thTopPanel.Style.Add(HtmlTextWriterStyle.BackgroundColor, "Green");

OPENING THE PAGE IN ANOTHER BROWSER USING JAVA SCRIPT

 FROM JAVASCRIPT

-----------------

function Openwindow(id)

        {

         a1=window.open("desktopModules/DocuInfo.aspx?&itemid="+id,"MyWindow",   'left=300,top=200,width=500,height=230,scrollbars=yes,toolbar=0,resizable=0');

        a1.focus();

        }

FROM ASPX

---------------

<a href='#'>

<img  alt="open" id="tes" style="border: 0" name="test"  src="images/images1.jpg" onclick="javascript:Openwindow('<%#  DataBinder.Eval(Container.DataItem,"ItemId") %>');"            height="10" width="10" align="middle"></a>

<a href='#'>-># ONLY SHOW THE LINK WHEN MOUSE OVER.ON CLICK IN IT NOTHING WILL HAPPEN

SPECIAL CHARACTER IN HTML

Four character entity references deserve special mention since they are frequently used to escape special characters:

"<" represents the < sign.
">" represents the > sign.
"&" represents the & sign.
"" represents the " mark.

Setting the value dynamically

ASPX
--------------------------------

<table width="100%" style="background-color:#336699;">
<tr>
        <td style="background-color: #4791c5;width:100%;padding-right:50px" colspan="3" align="right">
            <%--<asp:Label ID="lblCompanyName" runat="server" Font-Names="Verdana" Font-Size="X-Small"
                Visible="False" Font-Bold="false" ForeColor="White"></asp:Label>--%>
                <%= AccountandHelpLink %>        
                <a href="../../support.html"></a><a href="../../support.html"></a><a href="../../contact.html">
            </a><a href="../../contact.html"></a>
            <%= LogoffLink %>
        </td>
        <%--<td align="center" style="background-color: #4791c5;">
             <
        </td>--%>
    </tr>
</table>

C#
-------------------

LogoffLink = ControlChars.Cr & "<" & "a href='" & Request.ApplicationPath & "/Admin/Logoff.aspx' ><FONT face='Verdana' font-family='Arial' size='1' color='ffffff'>" & "     SignOut<" & "/a>"

AccountandHelpLink = "<" & "FONT face='Verdana' color='#ffffff' size='1'" & ">" & accLink & sUserId & "&username=" & sUserName & ">" & "<" & "FONT face='Verdana' color='#ffffff' size='1'" & ">" & "My Account" & "</FONT>" & "</a>  " & "<span class='Accent'>|</span>" & "  " & _
                    "<a href=" & sHelpfileLocation & " target='_new'>" & "<" & "FONT face='Verdana' color='#ffffff' size='1'" & ">" & "Help" & "</FONT>" & "</a>  </FONT> "

Table rowspan and colspan

<TABLE BORDER=2 CELLPADDING=4>
<TR>
    <TH ROWSPAN=3 BGCOLOR="#99CCFF">Production</TH>
    <TD>Raha Mutisya</TD> <TD>1493</TD>
    </TR>
<TR>
    <TD>Shalom Buraka</TD> <TD>3829</TD> 
    </TR>
<TR>
    <TD>Brandy Davis</TD> <TD>0283</TD>
    </TR>
<TR>
    <TH ROWSPAN=3 BGCOLOR="#99CCFF">Sales</TH>
    <TD>Claire Horne</TD> <TD>4827</TD>
    </TR>
<TR>
    <TD>Bruce Eckel</TD> <TD>7246</TD>
    </TR>
<TR>
    <TD>Danny Zeman</TD> <TD>5689</TD>
    </TR>
</TABLE>

which creates

Production	Raha Mutisya	1493
	Shalom Buraka	3829
	Brandy Davis	0283
Sales	Claire Horne	4827
	Bruce Eckel	7246
	Danny Zeman	5689

<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD>      <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>     <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD>      <TD>0283</TD> </TR>
<TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Sales</TH> </TR>
<TR> <TD>Claire Horne</TD>      <TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD>       <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD>       <TD>5689</TD> </TR>
</TABLE>

which gives this table:

Production
Raha Mutisya	1493
Shalom Buraka	3829
Brandy Davis	0283
Sales
Claire Horne	4827
Bruce Eckel	7246
Danny Zeman	5689

<TABLE BORDER=2 CELLPADDING=4>
<TR> <TH COLSPAN=2>Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD>      <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD>     <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD>      <TD>0283</TD> </TR>
<TR> <TH COLSPAN=2>Sales</TH> </TR>
<TR> <TD>Claire Horne</TD>      <TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD>       <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD>       <TD>5689</TD> </TR>
</TABLE>

which gives us:

Production
Raha Mutisya	1493
Shalom Buraka	3829
Brandy Davis	0283
Sales
Claire Horne	4827
Bruce Eckel	7246
Danny Zeman	5689

.neT