Showing posts with label html. Show all posts

Feb 13, 2016

[Fixed Solution] Check For The Existence Of Option In Select Using JQuery

In this article I'm going to show you all, how to check for <option>'s existence in a <select> tag. Their are many ways to do this. Lets see a simple way of it.

First lets have a look on my drop down.

<html>
<body>
    <select id="ddMember">
        <option value="Nifal">Nifal</option>
        <option value="Asjad">Asjad</option>
        <option value="Dinesh">Dinesh</option>
    </select>
</body>
</html>

Now lets say you wanted to check for the existence of the member "Gowtham" in the above drop-down. Use below java script codes to check it.

1	var isExist = $('#ddMember option:contains("Gowtham")').length;

Above code will check for the given option. If value is not exist it will return zero(0). Otherwise it will return some other number, depending on the occurrences.

Lets say, you wanted check for a option and if not available you wanted add it to your drop-down, simply use your below codes to do it.

1
2
3

if($('#ddMember option:contains("Gowtham")').length){
  $('#ddMember').append("<option value="Gowtham">Gowtham</option>");
}

Hope you found, what you looked for.

Nov 5, 2014

Accessing Session Values Inside The HTML Body

You Can Use Following Codes Inside A html body Tag To Access Session Variable Values.

<%
if (Session["LoginName"] != null)
{
%>
<div class="sLoginName" style="visibility: hidden">
<%
= Session["LoginName"].ToString()
%>
</div>
<%
}
%>
<%
else
{
%>
<div class="sLoginName" style="visibility: hidden">Guest</div>
<%
}
%>

Oct 17, 2014

How To Display A Google Map In Html Providing Geo Codes

First you would need to link the latest Jquery and Google Maps  to your website.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

Then you will need to add a <div > tag with the an id "map_canvas" as written below.
<div id="map_canvas" style="width:650px;height:650px"></div>
Then with Jquery you will have to append the map to the div .

//you need to pass the Geo Locations the CreateMap Function

function CreateMap(Longitude,Latitude) {
 gmLon = Longitude;
 gmLan = Latitude; 
 var myLatlng = new google.maps.LatLng(gmLan, gmLon);
 
 var map = new google.maps.Map(document.getElementById("map_canvas"), {
  zoom: 12,
  center: myLatlng,
  disableDefaultUI: true
 });
 
 google.maps.event.addListenerOnce(map, 'idle', function () {
  google.maps.event.trigger(map, 'resize');
  map2.setCenter(myLatlng);
 });
 
 var marker = new google.maps.Marker({
  position: myLatlng
 });
`
 marker.setMap(map);
}


Feel Free To Email Us If You Have Any Problem Regarding This.

Oct 16, 2014

Change The Cursor Appearance Style

Rather than just relying on the default cursor style you can change it as you want.Normally in html each and every tag their is default cursor style.but you can simply change it as you want.

For example if you take following simple html code will generate you Hello World text.If you move your mouse to top of the Hello World heading you can see the style of cursor related to heading.This is called auto.

<html>
<body>
<h1>Hello World</h1>
</body>
</html>

Following html code will give you a good knowledge about all the cursor styles that you can use.You can use these any cursor style css property any tag.

<html>
<head>
<title>Change The Cursor Appearance Style </title>
</head>
<body>
<input type="button" style="cursor:default" value="Default"/><br/>
<input type="button" style="cursor:auto" value="Auto"/><br/>
<input type="button" style="cursor:help" value="Help"/><br/>
<input type="button" style="cursor:progress" value="Progress"/><br/>
<input type="button" style="cursor:pointer" value="Pointer"/><br/>
<input type="button" style="cursor:wait" value="Wait"/><br/>
<input type="button" style="cursor:text" value="Text"/><br/>
<input type="button" style="cursor:grab" value="Text"/><br/>
<input type="button" style="cursor:crosshair" value="CrossHair"/><br/>
<input type="button" style="cursor:move" value="Move"/><br/>
<input type="button" style="cursor:not-allowed" value="Not Allowed"/><br/>
<input type="button" style="cursor:no-drop" value="No Drop"/><br/>
<input type="button" style="cursor:e-resize" value="E Resize"/><br/>
<input type="button" style="cursor:n-resize" value="N Resize"/><br/>
<input type="button" style="cursor:w-resize" value="W Resize"/><br/>
<input type="button" style="cursor:s-resize" value="S Resize"/><br/>
<input type="button" style="cursor:se-resize" value="SE Resize"/><br/>
<input type="button" style="cursor:sw-resize" value="SW Resize"/><br/>
<input type="button" style="cursor:ne-resize" value="NE Resize"/><br/>
<input type="button" style="cursor:nw-resize" value="NW Resize"/>
</body>
</html>

Dec 24, 2013

html Make Skype Buttons To Call Or Chat With A Contact

Skype Buttons

Copy and paste this and change my name 'hudhaifa962' into the name which you want to call.

<script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>
<div id="SkypeButton_Call_hudhaifa962_1">
<script type="text/javascript">
Skype.ui({
"name": "call",
"element": "SkypeButton_Call_hudhaifa962_1",
"participants": ["hudhaifa962"],
"imageSize": 32
});
</script>
</div>

Copy and paste this and change my name 'hudhaifa962' into the name which you want to chat.

<script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>
<div id="SkypeButton_Chat_hudhaifa962_1">
<script type="text/javascript">
Skype.ui({
"name": "chat",
"element": "SkypeButton_Chat_hudhaifa962_1",
"participants": ["hudhaifa962"],
"imageSize": 32
});
</script>

</div>

Copy and paste this and change my name 'hudhaifa962' into the name which you want to call and chat.

<script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>
<div id="SkypeButton_Dropdown_hudhaifa962_1">
<script type="text/javascript">
Skype.ui({
"name": "dropdown",
"element": "SkypeButton_Dropdown_hudhaifa962_1",
"participants": ["hudhaifa962"],
"imageSize": 32
});
</script>

</div>

html Skype Call In A Link Click

How Skype URIs work

In its simplest form, you can embed a hyperlink referencing a Skype URI in a webpage to place a Skype call. For example, to initiate a call to the Skype Echo / Sound Test Service, the link would be:

<a href="skype:echo123?call">Call the Skype Echo / Sound Test Service</a>

Clicking the link:

Brings the device’s Skype client into focus, starting it as necessary.
Effects auto-login or prompts your users for their Skype Name and password.
Typically opens a confirmation dialog to authorize placing the call.
Places the call.

Easy Code Stuff