Internet Information Services (IIS) for Windows® Server is a flexible,
secure and manageable Web server for hosting anything on the Web. From
media streaming to web applications, IIS's scalable and open
architecture is ready to handle the most demanding tasks.
- 1:21:00 AM
- Achappan Mahalingam
- No comments
I am doing website design using bootstrap and a need to use mega menu instead of using list menu items in the navigation bar.
For this purpose I found Yamm mega menu will be useful for my site and followed the below steps for the integration.
1. Download Yamm from http://geedmo.github.io/yamm/
After you download extract the zip file (yamm3-master). The following directories will be exists in the extracted yamm3-master directory.
2. Copy yamm folder and paste it in your website css folder.
3. Include yamm.css in header.html/php file like below
<link href="css/yamm/yamm.css" rel="stylesheet" type="text/css">
4. Go to yamm directory which you downloaded and open the demo.css from demo directory.
5. Find & copy the below css class and paste it in your website css (yoursite.css) file which is used for your UI Design.
/* menu styes */
.list-unstyled,
.list-unstyled ul { min-width: 120px }
@media ( min-width: 767px ) {
.panel-group { width: 400px; }
.thumbnail { margin: 0; }
}
6. Find the navbar css style in header.html/php file and include the yamm class in div tag.
<!-- Navigation -->
<nav class="navbar yamm navbar-inverse navbar-fixed-top" role="navigation">
I hope this will be helpful for you also to integrate with your website designing.
For this purpose I found Yamm mega menu will be useful for my site and followed the below steps for the integration.
1. Download Yamm from http://geedmo.github.io/yamm/
After you download extract the zip file (yamm3-master). The following directories will be exists in the extracted yamm3-master directory.
2. Copy yamm folder and paste it in your website css folder.
3. Include yamm.css in header.html/php file like below
<link href="css/yamm/yamm.css" rel="stylesheet" type="text/css">
5. Find & copy the below css class and paste it in your website css (yoursite.css) file which is used for your UI Design.
/* menu styes */
.list-unstyled,
.list-unstyled ul { min-width: 120px }
@media ( min-width: 767px ) {
.panel-group { width: 400px; }
.thumbnail { margin: 0; }
}
<!-- Navigation -->
<nav class="navbar yamm navbar-inverse navbar-fixed-top" role="navigation">
7. Then finally add the mega menu content in menu items like below.
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="yamm-content">
<div class="row">
<ul class="col-sm-4 list-unstyled">
<li>
<p><strong>Web Designing</strong></p>
</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<ul class="col-sm-4 list-unstyled">
<li>
<p><strong>Web Development</strong></p>
</li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
<li><a href="#"> Link Item </a></li>
</ul>
<ul class="col-sm-4 list-unstyled">
<li>
<p><strong>Ecommerce & CMS Solutions</strong></p>
</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div></div>
</li>
</ul>
</li><!-- Services li element-->
I hope this will be helpful for you also to integrate with your website designing.
- 10:43:00 AM
- Achappan Mahalingam
- No comments
I am doing web designing using bootstrap. But Internet Explorer 8-10+ refuses to load the CSS files due to "CSS was ignored due to mime type mismatch"
- On your computer search for "regedit.exe" (go to the start menu and click on the search button on the top-right corner of the screen).
- Once regedit opens up, on the left column click on "HKEY_CLASSES_ROOT" and then on ".css"
- On the right column double-click on "Content Type". This will open up a dialog box with value as application/x-css.
- Change this "value data" to "text/css".
- Click "Ok" and that's it.
- 6:25:00 PM
- Achappan Mahalingam
- No comments
1. The array() function is used to create an array
2. The array_change_key_case() function changes all keys in an array to lowercase or uppercase.
3. The array_chunk() function splits an array into chunks of new arrays.
4. The array_combine() function creates an array by using the elements from one “keys” array and one “values” array.
5. The array_count_values() function counts all the values of an array.
6. The array_diff() function compares the values of two (or more) arrays, and returns the differences.
7. The array_fill() function fills an array with values.
8. The array_merge() function merges one or more arrays into one array.
9. The array_shift() function removes the first element from an array, and returns the value of the removed element.
10. The array_pop() function deletes the last element of an array.
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "<br>:: array() function ::<br>";
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
echo "<br>-----------------------------------------";
$cars = array("Volvo", "BMW", "Toyota", "Honda", "Mercedes", "Opel");
echo "<br><br>:: array_chunk() function :: </br>";
print_r(array_chunk($cars, 2));
echo "<br>-----------------------------------------";
$fname = array("Peter", "Ben", "Joe");
$age = array("35", "37", "43");
echo "<br><br>:: array_combine() function :: </br>";
$c = array_combine($fname, $age);
print_r($c);
echo "<br>-----------------------------------------";
$a = array("A", "Cat", "Dog", "A", "Dog");
echo "<br><br>:: array_count_values() function :: </br>";
print_r(array_count_values($a));
echo "<br>-----------------------------------------";
$a1 = array("a"=>"red", "b"=>"green", "c"=>"blue", "d"=>"yellow");
$a2 = array("e"=>"red", "f"=>"green", "g"=>"blue");
$result = array_diff($a1, $a2);
echo "<br><br>:: array_diff() function :: </br>";
print_r($result);
echo "<br>-----------------------------------------";
$a1 = array_fill(3, 4, "blue");
$b1 = array_fill(0, 1, "red");
echo "<br><br>:: array_fill() function :: </br>";
print_r($a1);
echo "<br>";
print_r($b1);
echo "<br>-----------------------------------------";
$a1 = array("red", "green");
$a2 = array("blue", "yellow");
echo "<br><br>:: array_merge() function :: </br>";
print_r(array_merge($a1, $a2));
echo "<br>-----------------------------------------";
$a = array("a"=>"red", "b"=>"green", "c"=>"blue");
echo "<br><br>:: array_shift() function :: </br>";
echo array_shift($a);
echo "<br>";
print_r ($a);
echo "<br>-----------------------------------------";
$a = array("red", "green", "blue");
array_pop($a);
echo "<br><br>:: array_pop() function :: </br>";
print_r($a);
echo "<br>-----------------------------------------";
?>
OUTPUT:
:: array() function ::
I like Volvo, BMW and Toyota.
-----------------------------------------
:: array_chunk() function ::
Array ( [0] => Array ( [0] => Volvo [1] => BMW ) [1] => Array ( [0] => Toyota [1] => Honda ) [2] => Array ( [0] => Mercedes [1] => Opel ) )
-----------------------------------------
:: array_combine() function ::
Array ( [Peter] => 35 [Ben] => 37 [Joe] => 43 )
-----------------------------------------
:: array_count_values() function ::
Array ( [A] => 2 [Cat] => 1 [Dog] => 2 )
-----------------------------------------
:: array_diff() function ::
Array ( [d] => yellow )
-----------------------------------------
:: array_fill() function ::
Array ( [3] => blue [4] => blue [5] => blue [6] => blue )
Array ( [0] => red )
-----------------------------------------
:: array_merge() function ::
Array ( [0] => red [1] => green [2] => blue [3] => yellow )
-----------------------------------------
:: array_shift() function ::
red
Array ( [b] => green [c] => blue )
-----------------------------------------
:: array_pop() function ::
Array ( [0] => red [1] => green )
-----------------------------------------
2. The array_change_key_case() function changes all keys in an array to lowercase or uppercase.
3. The array_chunk() function splits an array into chunks of new arrays.
4. The array_combine() function creates an array by using the elements from one “keys” array and one “values” array.
5. The array_count_values() function counts all the values of an array.
6. The array_diff() function compares the values of two (or more) arrays, and returns the differences.
7. The array_fill() function fills an array with values.
8. The array_merge() function merges one or more arrays into one array.
9. The array_shift() function removes the first element from an array, and returns the value of the removed element.
10. The array_pop() function deletes the last element of an array.
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "<br>:: array() function ::<br>";
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
echo "<br>-----------------------------------------";
$cars = array("Volvo", "BMW", "Toyota", "Honda", "Mercedes", "Opel");
echo "<br><br>:: array_chunk() function :: </br>";
print_r(array_chunk($cars, 2));
echo "<br>-----------------------------------------";
$fname = array("Peter", "Ben", "Joe");
$age = array("35", "37", "43");
echo "<br><br>:: array_combine() function :: </br>";
$c = array_combine($fname, $age);
print_r($c);
echo "<br>-----------------------------------------";
$a = array("A", "Cat", "Dog", "A", "Dog");
echo "<br><br>:: array_count_values() function :: </br>";
print_r(array_count_values($a));
echo "<br>-----------------------------------------";
$a1 = array("a"=>"red", "b"=>"green", "c"=>"blue", "d"=>"yellow");
$a2 = array("e"=>"red", "f"=>"green", "g"=>"blue");
$result = array_diff($a1, $a2);
echo "<br><br>:: array_diff() function :: </br>";
print_r($result);
echo "<br>-----------------------------------------";
$a1 = array_fill(3, 4, "blue");
$b1 = array_fill(0, 1, "red");
echo "<br><br>:: array_fill() function :: </br>";
print_r($a1);
echo "<br>";
print_r($b1);
echo "<br>-----------------------------------------";
$a1 = array("red", "green");
$a2 = array("blue", "yellow");
echo "<br><br>:: array_merge() function :: </br>";
print_r(array_merge($a1, $a2));
echo "<br>-----------------------------------------";
$a = array("a"=>"red", "b"=>"green", "c"=>"blue");
echo "<br><br>:: array_shift() function :: </br>";
echo array_shift($a);
echo "<br>";
print_r ($a);
echo "<br>-----------------------------------------";
$a = array("red", "green", "blue");
array_pop($a);
echo "<br><br>:: array_pop() function :: </br>";
print_r($a);
echo "<br>-----------------------------------------";
?>
OUTPUT:
:: array() function ::
I like Volvo, BMW and Toyota.
-----------------------------------------
:: array_chunk() function ::
Array ( [0] => Array ( [0] => Volvo [1] => BMW ) [1] => Array ( [0] => Toyota [1] => Honda ) [2] => Array ( [0] => Mercedes [1] => Opel ) )
-----------------------------------------
:: array_combine() function ::
Array ( [Peter] => 35 [Ben] => 37 [Joe] => 43 )
-----------------------------------------
:: array_count_values() function ::
Array ( [A] => 2 [Cat] => 1 [Dog] => 2 )
-----------------------------------------
:: array_diff() function ::
Array ( [d] => yellow )
-----------------------------------------
:: array_fill() function ::
Array ( [3] => blue [4] => blue [5] => blue [6] => blue )
Array ( [0] => red )
-----------------------------------------
:: array_merge() function ::
Array ( [0] => red [1] => green [2] => blue [3] => yellow )
-----------------------------------------
:: array_shift() function ::
red
Array ( [b] => green [c] => blue )
-----------------------------------------
:: array_pop() function ::
Array ( [0] => red [1] => green )
-----------------------------------------
- 4:31:00 PM
- Achappan Mahalingam
- No comments
- Object cloning
- Inheritance
- Interfaces
- Abstract classes
- Namespaces
- 3:07:00 PM
- Achappan Mahalingam
- No comments
1. Which of the following is NOT a valid
border-style
property value?dotted
inset
glazed
groove
solid
glazed
2. Which of the following is NOT a valid CSS length unit?
cm
dm
em
mm
Ans: dm
cm
and mm
are absolute length units. em
is a font-relative length.3. What is the CSS selector which allows you to target every element in a web page?
Ans: The universal selector (
*
).4. Which CSS property allows you to hide an element but still maintain the space it occupies in the web page?
Ans:
visibility
or opacity
There are several ways to hide an HTML element with CSS.
Setting the
visibility
property of the element to hidden
will hide the element. The element will still occupy space equal to its
geometric size in the web page. For example, if the hidden element’s
dimensions are 100x100px, you will see an empty 100x100px space in the
area where the element is located. Hiding an element can also be
accomplished by assigning opacity: 0
to an element.Hiding an element without maintaining the space it occupies in the web page can be done by setting the element’s
display
property to none
. Setting display
to none
renders the element as though it doesn’t exist.
5. There are 16 basic color keywords in CSS. Which of the following are NOT basic color keywords?
olive
fuchsia
cyan
aqua
maroon
cyan
cyan
is a valid color keyword. But it’s not one of the basic color keywords.6. The
font-style
CSS property has four different valid values. Three of these values are inherit
, normal
, and italic.
What is one other valid value?Ans:
oblique
7. Which of the following two selectors has a higher CSS specificity?
Selector 1:
#object h2::first-letter
Selector 2:body .item div h2::first-letter:hover
Ans:
Selector 1:#object h2:first-letter
The specificity value of Selector 1 is 102. The specificity value of Selector 2 is 24.
8. What is the ideal order of the following pseudo-class selectors in a stylesheet?
:active
:hover
:link
:visited
:link
:visited
:hover
:active
9. Which of the following CSS properties DOES NOT influence the box model?
content
padding
margin
outline
border
outline
The outline created with the outline properties is drawn “over” a box, i.e., the outline is always on top, and does not influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow or overflow.
10. When using media queries, which of the following is NOT a valid media type?
tv
all
voice
print
braille
tty
embossed
voice
voice
is not a valid media type. Though there is a speech
media type.
11. There are five generic font family values that can be assigned to the
font-family
property. Three of them are listed below. What are the other two generic font family values? serif
sans-serif
monospace
- ?
- ?
cursive
fantasy
12. What is the color keyword that will always be equal to the calculated
color
property value of the selected element/elements?Ans:
currentColor
Below is an example where the
background-color
and the border
color will be equal to the color property value of .box
elements:.box {
color: green;
background-color: currentColor;
border: 1px dashed currentColor;
}
The benefit of using the currentColor
keyword is that we only need to change the color value in one place. We can just change the value of the color
property, and the change will cascade to the other properties. This keyword works much the same way as CSS variables.13. Which of the following is NOT a valid CSS unit?
ch
turn
px
ems
dpcm
s
hz
rem
ems
ch
andrem
are font-relative length units.turn
is an angle unit.px
is an absolute length unit.dpcm
is a resolution unit.s
is a time unit.hz
is a frequency unit.
14. Which of the following color keywords has NOT yet been proposed in a W3C specification?
blanchedalmond
dodgerblue
peachpuff
orchidblack
navajowhite
tomato
orchidblack
15. What is the CSS at-rule that can allow you to define the character encoding of a stylesheet?
Ans:
@charset
UTF-8 should always be used as your CSS file’s character encoding. If this is the case, then you don’t need to declare a
@charset
rule.- 2:27:00 PM
- Achappan Mahalingam
- No comments
In JQuery, this activity is called as chaining which means you can chain together actions/methods. Below snippet is the example of Jquery Chaining.
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});
</script>
- 2:23:00 PM
- Achappan Mahalingam
- No comments
JavaScript statements are executed line by line. However, with effects,
the next line of code can be run even though the effect is not finished. This will cause to trigger the errors.
To prevent this, you can create a callback function.
A callback function is executed after the current effect is finished.
With Callback function:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
});
</script>
Without Callback function:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
});
</script>
The difference between these two function is without callback function will throw the alert box before the hide event is finished.
To prevent this, you can create a callback function.
A callback function is executed after the current effect is finished.
With Callback function:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
});
</script>
Without Callback function:
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
});
</script>
The difference between these two function is without callback function will throw the alert box before the hide event is finished.
- 2:56:00 PM
- Achappan Mahalingam
- No comments
jQuery selectors are used to "find" (or select) HTML elements based
on their id, classes, types, attributes, values of attributes and much
more.
All selectors in jQuery start with the dollar sign and parentheses: $().
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML element:
All selectors in jQuery start with the dollar sign and parentheses: $().
The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")
An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML element:
$("#test")
Syntax | Description | |
---|---|---|
$("*") | Selects all elements | |
$(this) | Selects the current HTML element | |
$("p.intro") | Selects all <p> elements with class="intro" | |
$("p:first") | Selects the first <p> element | |
$("ul li:first") | Selects the first <li> element of the first <ul> | |
$("ul li:first-child") | Selects the first <li> element of every <ul> | |
$("[href]") | Selects all elements with an href attribute | |
$("a[target='_blank']") | Selects all <a> elements with a target attribute value equal to "_blank" | |
$("a[target!='_blank']") | Selects all <a> elements with a target attribute value NOT equal to "_blank" | |
$(":button") | Selects all <button> elements and <input> elements of type="button" | |
$("tr:even") | Selects all even <tr> elements | |
$("tr:odd") | Selects all odd <tr> elements |
- 2:50:00 PM
- Achappan Mahalingam
- No comments
This is used to restrict any jQuery code from running before the document is finished loading or document is ready.
It is good practice to wait for the document to be fully loaded and ready before working with it.
This also allows you to have your JavaScript code before the body of your document, in the head section.
Here are some examples of actions that can fail if methods are run before the document is fully loaded:
Alternate Syntax instead of using document ready event
$(function(){
// jQuery methods go here...
});
It is good practice to wait for the document to be fully loaded and ready before working with it.
This also allows you to have your JavaScript code before the body of your document, in the head section.
Here are some examples of actions that can fail if methods are run before the document is fully loaded:
- Trying to hide an element that is not created yet
- Trying to get the size of an image that is not loaded yet
Alternate Syntax instead of using document ready event
$(function(){
// jQuery methods go here...
});
Subscribe to:
Posts (Atom)