My Programming journey

Thursday, November 5, 2015

JQuery 2.x Continued

This code is for a panel slides down and toggle.

I am going to use this method, because it integrates to CSS. I will use these methods to create an interactive home page for my http://sadat.rocks

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>

<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}

#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>

<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

</body>
</html>

Basically we will create onhover method to make multiple event on sliding navbar as twillio

Today I started my journey with jquery 2x.

$ will be used as selector here.

we can match any type of element whether with id or class. I will use document.ready method to ensure that page load has finished before i invoke my function. interesting :)

table attributes are accessible through like when i use

$(document).ready(function(){

$("tr:odd").hide();

to call all the odd rows of the table.

on function is important. it adds multiple event to an element

I am into show, hide function. we can pass speed value in mili sec or callback function.it also has toggle.

fadein is interesting. I would use fadein(slow,callback)
fadetToggle is what we need to operate things.

$(document).ready(function(){

$("button").click(function(){

$("div").fadeToggle(1000)

to be continued...
till then goodbye.
THIS IS SADAT HOSSAIN
SIGNING OFF