Sharp thoughts..!: HTML

Showing posts with label HTML. Show all posts

Drag and Drop using Javascript

We can implement drag and drop feature in Html/Aspx pages easly. The below example shows the implementation of the drag & drop features.

// user initiates a drag-and-drop operation.

function DragContent() {

var oData = window.event.dataTransfer;

// Set the effectAllowed on the source object.

oData.effectAllowed = "move";

}

// object in the ondrop event.

function DropContent() {

var oTarg = window.event.srcElement;

var oData = window.event.dataTransfer;

// Cancel default action.

CancelDrop();

///Concatinate the Drop content to Target

oTarg.innerText += oData.getData("text");

}

// mouse over the target object.

function HandleDragEnter() {

var oData = window.event.dataTransfer;

// Cancel default action.

CancelDrop();

// Set the dropEffect for the target object.

oData.dropEffect = "move";

}

function CancelDrop() {

// Cancel default action.

var oEvent = window.event;

oEvent.returnValue = false;

}

</script>

Aspx Implementation

The below code explains the implementation of Drag & drop features in Asp page. You can see Drag & Drop features implementation in the below code. From the list of City's you can select Any one and drop in DropBox.

<body>

<span id="oSource" ondragstart="DragContent()">Chennai</span> </td></tr>

<tr><td><span id="Span1" ondragstart="DragContent()">Banglore</span> </td></tr>

<tr><td><span id="Span2" ondragstart="DragContent()">Mumbai</span> </td></tr>

<tr><td><span id="Span3" ondragstart="DragContent()">Delhi</span> </td></tr>

</table>

<hr />

<span> Select Your City then Drag & Drop in to the box </span>

<div id="DivDropBox"

style="background: beige; height: 100px; width: 200px; border: solid black 1px;"

ondrop="DropContent()"

ondragover="CancelDrop()"

ondragenter="HandleDragEnter()">

</div>

</body>

Refresh Web page automatically using Meta Tag

Developing a website, it required one functionality that, One page should be refreshing every 10 sec. I have tried different way to achieve (like C#, Treading, JQuery & JavaScript) this all are working fine. But my idea is simple way to achieve this. While reading one book I found that META tag will be used for Refresh the pages. Please find the below code for reload the HTML/ASPX page.

The below code will do refresh in every 10 sec.

Other features of Meta TAG

This will make Internet Explorer to display a webpage in IE9 mode, if possible

Setting the character set for the document

disables theme support for the Page

Search Window implementation using Javascript.

Most of the Web application required a search screen for filtering the data separately. Searching may some numbers, Address or may be name, Sometimes it may be a one row of record. The below example showing an example for search window with return value to the parent. Here a normal asp.net page with one text box and one search button .Once user click search button a popup window will display on top of asp.net page. User can enter a value on the textbox and click ok then text value will be display in textbox of parent window.

Parent Window Code

Major part of this code is calling the popup window .Using the Window. Open method it will display popup in center of the screen.

function ShowModelPopup() {

popUpObj = window.open("SearchPopUP.aspx","Search by Name","toolbar=no,

scrollbars=no,location=no,statusbar=no,menubar=no,resizable=0,width=300,

height=300,left = 390,top=200" );

popUpObj.focus();

}

</script>

</head>

<body>

<asp:TextBox ID="txtSearch" runat=server > </asp:TextBox>

<asp:Button ID="btnSearch" runat="server" OnClientClick="ShowModelPopup()"

Text="Search"/>

</form>

</body>

</html>

Child window for showing the details.

Here the major part is closing event of popup form. When user click ok/Close javascript unload event will fire and from there we will access the parent window controls using Window.opener property which is provided by JavaScript.

window.onbeforeunload = RefreshParent;

function RefreshParent() {

if (window.opener != null && !window.opener.closed) {

window.opener.document.getElementById('txtSearch').value = document.getElementById('txtName').value;

}

function closeWindow() {

close();

}

</script>

</head>

<body>

<div>

<asp:TextBox ID="txtName" runat="server" ></asp:TextBox>

<asp:Button ID="btnSearch" runat="server" Text="OK" OnClientClick="closeWindow()" />

</div>

</form>

</body>

</html>

Instead of using textbox we can use some hidden text in popup control , This will be useful for if more data need to pass to the parent. We can also pass XML format data for maintain generalized format.

Sliding Control using Javascript.

We can make toggle style using using javascript very easily. Jquery is an alternate option for this.

The below Javascript method will read the Panel control and change its Display style based on the initialization. By default it is “Block” if it is block then we needs to change it to “None” & wise versa .

Include this code in side Script block in aspx page

function toggleMenu() {

var thisMenu = document.getElementById('panel')

if (thisMenu.style.display == 'block') {

thisMenu.style.display = 'none';

} else {

thisMenu.style.display = 'block';

}

return thisMenu;

}

Whenever click on div it will make the feel of toggle automatically. But actually it is making display of the control usefully.

↕</div>

</div>

</form>

Zen Coding in HTML

Zen Coding is a series of shortcuts that will generate HTML code for you and save you a lot of typing. It’s actually open source and you can find the code on GitHub if you are interested. But all you really need to do is install vs web essentials and try it yourself! The rest of this blog shows you some great zen coding examples to save you time.

Let’s start with something simple. Type
div

now hit the <Tab> key and you get
<div></div>
It always slows me down to type all the opening and closing tags.
now try this followed by the <Tab> key
ul>li
You get
          <ul>
            <li></li>
        </ul>

Starting to see the potential? Imagine you wanted to build a table…

table>tr>td
becomes
    <table>
            <tr>
                <td></td>
            </tr>
   </table>
But wait, it gets better… because you can specify multiples, try this
table>tr*5>td*3
Now you get a table definition for 5 rows with 3 columns

<table>

            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
         …
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
There are lot of other options are ther in VS 2012 .