Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Monday, February 29, 2016

How To: Add Marker/Pin on Google Map

In this lesson we will learn how to add pin/market on google map at specific point (coordinates: latitude and longitude). Add following code to add google map in html page with basic map properties.

<html>
<head>
    <title>Google Map!</title>

    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
        var map = null;

        function initialize() {
            var latlng = new google.maps.LatLng(31.536648, 74.343443);
            var myOptions = {
                zoom: 12,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById("map_area"), myOptions);

        }

    </script>
</head>
<body onload="initialize()" style="width: 98%; height: 100%;">
    <div id="map_area" style="width: 100%; height: 520px;">
    </div>

</body>
</html>

Now create another java script function AddMarker() to add pin on google map, in this function we will set basic properties of pin like its position ( coordinate: latitude and longitude) and its title. Add following code in <script> </script> tag inside head section of web page.

        function AddMarker() {          
            var myLatlng = new google.maps.LatLng(31.5136648, 74.343443);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Lahore, Pakistan.'
            });
        }

Now create a new button in html and call this function on onclick event of button. Add following code immediately before </bode> tag.

<input type="submit" onclick="AddMarker()" name="button" title="Add marker" />

Complete code of all steps is

Add Pin on Google Map
Add Marker/Pin on Google Map

This is all. You have done. Save file and view in browser.

How To: Add Google Map in Html Page

Adding google map to html page is very easy and a common practice now a days. In this tutorial we will learn how to add google map in web page step by step.
First create a basic structure of html page.
Open any text editor, paste following code there and save it as GoogleMap.html file.

<html>
<head>
    <title>Google Map!</title>

</head>
<body style="width: 98%; height: 100%;">
    <div id="map_area" style="width: 100%; height: 520px;">
    </div>
</body>
</html>

Now add following google api reference in page head section.

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

Now we will create a java script function to initialize google map.  We will set basic map properties in this function while initialization. Add following function in page head section inside <script> </script> tags.

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

        function initialize() {
            var latlng = new google.maps.LatLng(31.536648, 74.343443);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            map = new google.maps.Map(document.getElementById("map_area"), myOptions);

        }
    </script>

Now call this function on onload event of body of web page.

<body onload="initialize()" style="width: 98%; height: 100%;">
    <div id="map_canvas" style="width: 100%; height: 520px;">
    </div>
 
</body>

Complete code of all setps will look like:

Add Google Map in Html Page
Add Google Map in Html Page

This is all. You have done. Save file and view in browser.

Saturday, February 27, 2016

How To: Integrate HTML Page in Silverlight Application

Integrating Html page in silver light application is little tricky at first. In this tutorial we will learn how to display html page in silver light application step by step.

Add following code in silver light  html page immediate before </form> tag.

<div id="BrowserDiv">
<div style="vertical-align:middle">
<img alt="Close" align="right" src="Images/Close.png" onclick="HideBrowser();" style="cursor:pointer;" />              
</div>
<div id="BrowserDiv_IFrame_Container" style="height:95%;width:100%;margin-top:37px;"></div>
</div>

Add following css code in page.

<style type="text/css">

#BrowserDiv
{
position:absolute;
background-color:#484848;
overflow:hidden;
left:0;
top:0;
height:100%;
width:100%;
display:none;
}

</style>

We need following javascript code to show and hide htm page.

<script type="text/javascript">

var slHost = null;
var BrowserDivContainer = null;
var BrowserDivIFrameContainer = null;
var jobPlanIFrameID = 'JobPlan_IFrame';

$(document).ready(function () {
slHost = $('#silverlightControlHost');
BrowserDivContainer = $('#BrowserDiv');
BrowserDivIFrameContainer = $('#BrowserDiv_IFrame_Container');
});

function ShowBrowserIFrame(url) {
BrowserDivContainer.css('display', 'block');
$('<iframe id="' + jobPlanIFrameID + '" src="' + url + '" style="height:100%;width:100%;" />')
.appendTo(BrowserDivIFrameContainer);
slHost.css('width', '0%');
}

function HideBrowser() {
BrowserDivContainer.css('display', 'none');
$('#' + jobPlanIFrameID).remove();
slHost.css('width', '100%');
}

</script>

Add reference to following jquery file.


<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>

We have done with html page. Now we will move to silver light user control and open html page on button click.

Add following code in user control (main.xaml).


<Button Content="Show Html Page" HorizontalAlignment="Left" Margin="164,140,0,0" VerticalAlignment="Top" Width="117" Click="Button_Click"/>

Now add following button click handler and a helper function in main.xaml.cs to open html page.


private void Button_Click(object sender, RoutedEventArgs e)
{
ShowBrowser();
}

public void ShowBrowser()
{
try
{
string url = "http://webdesignpluscode.blogspot.com/";
HtmlPage.Window.Invoke("ShowBrowserIFrame", url);
}
catch (Exception ex)
{
throw ex;
}
}

This is all, We have done with code. Now create new folder 'Images' and place an image there 'Close.png' for close button.

Now build project and view in browser.

Thursday, May 10, 2012

CSS Advanced tutorial 14 : CSS Pseudo Elements

There are four pseudo elements. These are :
  • First letters 
  • First lines
  • Before 
  • after
First letter :
The first-letter pseudo element applies to the first letter of an element. for example


p:first-letter {
font-size: 2em;
float: left;
}


This will create drop caps for paragraph.


First line :
The first-line pseudo element applies to the top line of an element. For example


p:first-line {
font-weight: bold;
}


This will create a bold first-line for paragraph.


Before and after :
The before and after pseudo elements are used in conjunction with the content property to place content either side of an element without touching the HTML. The value of the content property can be open-quote, close-quote, no-open-quote, no-close-quote, any string enclosed in quotation marks or any image using url(imgname). For example


blockquote:before {
content: open-quote;
}


blockquote:after {
content: close-quote;
}


li:before {
content: "Dragon : "
}


p:before {
content: url(images/img.jpg)
}

CSS Advanced tutorial 13 : Page Layout in CSS


Page layout with CSS is easy. If you are used to laying out a page with tables, it may at first appear difficult, but it isn't, it's just different and actually makes much more sense.

What is Positioning :
The position property is used to define whether an element is absolute, relative, static or fixed. The value static : is the default value for elements and renders the position in the normal order of things, as they appear in the HTML.
relative : is much like static, but the element can be offset from its original position with the properties top, right, bottom and left.
absolute : pulls an element out of the normal flow of the HTML and delivers it to a world all of its own. The absolute element can be placed anywhere on the page using top, right, bottom and left.
fixed : behaves like absolute, but it will absolutely position an element in reference to the browser window as opposed to the web page, fixed elements should stay exactly where they are on the screen even when the page is scrolled.

Floating :
Floating an element will shift it to the right or left of a line, with surrounding content flowing around it. Floating is normally used to position smaller elements within a page, but it can also be used with bigger chunks. For example

<div style="float:left; width:200px;"> 
    <p>  
         This is paragraph inside first div.      
   </p>
</div>



<div style="float:right; width:300px;"> 
    <p>  
         This is paragraph inside second div.      
   </p>
</div>

This will float the first div to the left side of web page, and float the second div to the right side of web page.


CSS Advanced tutorial 12 : The Display Property

The 'Display' property is used for visual representation of HTML elements. The most fundamental types of display are inline, block-line and none and they can be manipulated with the 'display' property and the values inline, block and none.


inline :   Elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements are traditionally displayed inline. For example


#title {
        display : inline;
        color : blue;
}


#desc {
             display : inline;
             color : black;
}


The HTML elements with id 'title' and 'desc' will display next to each other.


block : puts a line break before and after the element. Header and paragraph elements are examples of elements that are traditionally displayed block-line. For example



#title {
        display : block;
        color : blue;
}


#desc {
             display : block;
             color : black;
}


The HTML elements with id 'title' and 'desc' will display above and below to each other.



none : It doesn't display the element, which may sound pretty useless but can be used to good effect with accessibility considerations , alternate stylesheets or advanced hover effects. For example



#title {
        display : none;
        color : blue;
}



The HTML element with id 'title' will not display in browser.


Difference between display and visibility :
The display and visibility property behaves differently in browser. The 'display: none' and 'visibility: hidden' vary in that 'display: none' takes the element completely out of play, where as 'visibility: hidden' keeps the element and its flow in place without visually representing its contents. For example


<p> This is first paragraph. </p>
<p style="display:none;"> This is second paragraph. </p>
<p > This is third paragraph. </p>


Above code will display the first and third paragraph above and below to each other. If you remove the display:none; from second paragraph then there will be some re-arrangement done with HTML elements. Third paragraph will move down and there will be shown some text between first and third paragraph. 



<p> This is first paragraph. </p>
<p style="visibility:hidden;"> This is second paragraph. </p>
<p > This is third paragraph. </p>


Above code will display first and third paragraph above and below to each other. But there will be a gap between them, This gap is equal the size of second paragraph. If you remove visibility:hidden; from second paragraph then you will see the text in place of gap. No HTML element re-arrangement will be done.



Other display types :
There are some other types of display that you can use with HTML elements. These are


list-item :  It displays as in the way that you would usually expect an li HTML element.
run-in :  It makes an element either in-line or block-line depending on the display of its parent. It doesn't work on IE and Mozilla.
compact : It makes the element inline or block-line depending on the context.
marker : It is used exclusively with the :before and :after pseudo elements to define the display of the value of the content property. The automatic display of the content property is already marker, so this is only useful if you are overriding a previous display property for the pseudo element.

Wednesday, May 9, 2012

CSS Beginner tutorial 11 : Background Images



There are a number of properties involved in the manipulation of background images. But the property background can deal with them all. For example


body {
background: white url(http://www.yoursite.com/images/bg-image.jpg) no-repeat top right;
}


There are some other properties, which you can use instead using above single property. These properties are as follows.


  • background-color
  • background-image 
  • background-repeat 
  • background-position


The details of these properties are below.


background-color : 
It is the color of background.


background-image : 
It is the location of the image.


background-repeat : 
It will set, how the image repeats itself. This can be 

  • repeat
  • repeat-y         (repeating on the 'y-axis', above and below) 
  • repeat-x         (repeating on the 'x-axis', side-by-side)
  • no-repeat       (which shows just one instance of the image).

background-position : 
It can be top, center, bottom, left, right or any sensible combination, just like as above.


CSS Beginner tutorial 10 : Shorthand Properties

Shorthand Properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces. For example, margin, padding and border-width allow you to set margin-top-width, margin-right-width, margin-bottom-width etc. in the form of property: top right bottom left; For example we have following code to set border width. of a paragraph


p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}


This can be summed up into one shorthand property as follows.


p {
border-width: 1px 5px 10px 20px;
}


Further, border-width, border-color and border-style can also be summed up as follow.


p {
border: 1px red solid;
}


By stating just two values in format margin: 1em 10em; , the first value will be the top and bottom and the second value will be the right and left.


Font-related properties can also be gathered together with the font property. For example


p {
font: italic bold 1em/1.5 courier;
}


Where the '/1.5' is the line-height.

CSS Beginner tutorial 9 : Pseudo Classes

Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links. Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class, simply with a colon in between the selector and the pseudo class. For example property: value;


The four pseudo classes that can be used safely when applied to links are following.


link :
It is for an unvisited link.
visited :
It is for a link to a page that has already been visited.
active :
It is for a link when it is gains focus, for example, when it is clicked on.
hover :
It is for a link when the cursor is held over it.




CSS Code for above four classes are :


a.snow:link {
color: blue;
}


a.snow:visited {
color: purple;
}


a.snow:active {
color: red;
}


a.snow:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}


Although CSS gives you control to bypass it, maintaining different colours for visited links is good practice as many users still expect this. As pseudo classes (other than hover) are not often used, this is a feature that is unfortunately not as common as it once was. Because of this, it is less important than it used to be, but if you are looking for the optimum user response, then you should use it.


Traditionally, text links were blue if not visited and purple if visited, and there is still reason to believe that these are the most effective colours to use, although, again, with the increasingly widespread use of CSS, this is becoming less commonplace and the average user no longer assumes that links must be blue or purple.

Tuesday, May 8, 2012

CSS Beginner tutorial 8 : Grouping and Nesting in CSS


Grouping :
By using Grouping, you can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas. For example, we need to assign same property to different selectors as follows.


h2 {
color: red;
}
.titleclass {
color: red;
}
.descclass {
color: red;
}


By using grouping, we can write them as


h2,  .titleclass , . .descclass  {
color: red;
}


Nesting :
In well structured CSS, there is no need to use many class or ID selectors. Because we can specify properties to selectors within other selectors. For example


#top {
background-color: #cccccc;
}
#top h2 {
color: #ff0;
}
#top p {
color: red;
}


It will remove the need for classes or ID's if it is applied to HTML that looks like as follows.


<div id="top">
<h2>Hello Word !</h2>
<p>This is a paragraph</p>
</div>


By separating selectors with spaces, It is saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red'.

CSS Beginner tutorial 7 : What is Class and ID Selectors

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#). It might look like as follows.


#top {
background-color: #cccccc;
}


.intro {
color: red;
}


The HTML refers to the CSS by using the attributes id and class. It could look something like as follows.


<div id="top">


<p class="intro">This is my text.</p>


</div>


The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.desc will only be applied to paragraph elements that have the class 'desc'.

Monday, May 7, 2012

CSS Beginner tutorial 6 : CSS Borders


Borders can be applied to most HTML elements within the body. To make a border around an element, all you need is border-style. The values of border can be solid, dotted, dashed, double, groove, ridge, inset and outset. For example,

border-style: solid;

You can set the width of border by using border-width property, which is usually in pixels. For example

border-width: 3px;

The four sides of border can be set individually by using these properties, border-top-width, border-right-width, border-bottom-width and border-left-width. e.g

border-top-width : 10px;
border-right-width : 5px;
border-bottom-width : 10px;
border-left-width : 5px;

The color of border can be set by "border-color" property. For example

border-color: red;

After applying all properties to h2 tag, It 'll look like as follow.

h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

It will show h2 tag, in browser as follows.


css, borders, style
border

CSS Beginner tutorial 5 : Box Model

The Box Model :
Margins, padding and borders are all part of  the Box Model. The Box Model consists of following patterns.


  • In the middle you have the content area 
  • Surrounding content area you have the padding
  • Surrounding padding you have the border
  • Surrounding border you have the margin.

Visually, it can be represented as follow.


css, box, model
box model


CSS Beginner tutorial 4 : Margins and Padding

Margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.
For example, we have following CSS code for h2 tag:

h2 {
margin: 8px;
padding: 10px;
}

<h2>This is secondary Heading.</h2>

Then text inside h2 tag will look like as follow. ( margin and padding are shown with different colors for better understanding, margin is in light and padding is in dark.)


CSS, Margins , Padding , style
margin and padding

The four sides of an element can also be set individually. Following properties you can use, to set the element side individually.

margin-top,  margin-right,  margin-bottom,  margin-left          ( For Margin )  

padding-top,  padding-right,  padding-bottom,  padding-left.   ( For Padding )

Sunday, May 6, 2012

CSS Beginner tutorial 3 : CSS Selectors, Properties, and Values

Selectors are the names given to styles in internal and external style sheets. For each selector there are 'properties' inside curly brackets, which simply take the form of words such as color, font-weight or background-color etc. A value is given to the property following a colon and semi-colons separate the properties. For example


body {
   font-size: 0.7em;
  color: blue;
}


Above code will apply the given values to the font-size and color properties to the body selector. When this is applied to an HTML document, text between the body tags will be 0.7 ems in size and blue in colour. Another example


#desc {
   font-size: 0.5em;
  color: red;
}

The above code will apply the values to all HTML elements having id equal desc. (e.g having id="desc" attribute).

Lengths and Percentages :
There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarising yourself with these before continuing.


em ( e.g font-size: 2em ) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.


px (e.g font-size: 12px) is the unit for pixels.


pt (e.g font-size: 12pt) is the unit for points.


% (e.g font-size: 80%) is the unit for percentages.


Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches). In case if a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.

Saturday, May 5, 2012

CSS Beginner tutorial 2 : Applying CSS to HTML


There are three way, to apply CSS to HTML tags, These are
  1. In-line
  2. Internal
  3. External
In-line :
In-line styles are plonked straight into the HTML tags using the style attribute. For example, they look something similar as follow.
<p style="color : blue"> This is some text. </p>
This will make text color blue inside that paragraph .


Internal :
Internal (or embedded) styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page. For example, It look like as follow.


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


          p { color : blue };


          div { text-align : left }


          </style>
</head>
This will make all the paragraphs in the page blue and text inside all div element start from left side.


External :
External styles are used for the whole, multiple-page website. There is a separate CSS file. which has file extension ".css" e.g  mystyle.css , which looks like as follow>




p { color : blue };

div { text-align : left }

This external CSS file must linked to each HTML page. We link CSS file to HTML page  by using <link> tag as follow.

<head>
       <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

CSS Beginner Tutorial 1 : What is CSS


CSS stands for Cascading Styles Sheets, It is a way to style HTML elements. Whereas the HTML is the content, the style sheet is the presentation of that document. Styles don't smell or taste anything like HTML, they have following  format
'property: value' 
For example 
color : blue
It applys to HTML tag as follow:
<p style="color:blue">The sun rises in the east.</p>
There are many properties, which can be applied to HTML tags, to present HTML in different ways.
There are three ways, which can be used to apply CSS to HTML tags, These are:
  1. In-line
  2. Internal
  3. External
We discuss these ways in details in next tutorial.