Skip to main content

jQuery slideUp function

slideUp function:
The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items.can be supplied to indicate durations of 200 and 600 milliseconds,
Demo link :

http://freeteachnology.hol.es/slideup/

Code link :

 https://drive.google.com/open?id=0BxmTZPVcu72fOVJ0dUU0dElQRnM

Syntax :
$(element).slideUp(speed,easing,callback);
follwoing parameterr of slideUp element :
1-spedd,
2-easing,
3-callback,
1-speed :
specifies speed of slide up effects,
speed used milesecond,slow,fast parameter pass
2-easing :specify speed of slideup element
1-swing-move slower at the begining/end but faster at middle,
2-linear – constant speed.
3-callback : slide up function excuted call callback function.
Follwoing file structure create :
1-header.php,
2-footer.php,
3-index.php
1-header.php file include bootstrap links well as jquery link,
Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery slideUp() function</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- start:header -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Free Teachnology</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only"></span></a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</br></br></br>
<!-- end:header -->
2-footer.php :
footer.php file include bootstrap css link
Code :
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Start::footer -->
<footer>
<div class="footer footer-bottom">
<div class="container">
<div class="text-muted ">
<a href="https://freeteachnology.blogspot.in/" >Free Teachnology</a>
</div>
<p class="pull-left"> Copyright © <?php echo date('Y');?>. Design and Develop by - Disuza Jen. </p>
<div class="pull-right">
<ul class="nav nav-pills payments">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-link"></i></li>
</ul>
</div>
</div>
</div>
<!--/.footer-bottom-->
</footer>
<!-- End::footer -->
<style type="text/css">
.footer-bottom {
margin-top:220px;
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}
.footer-bottom p.pull-left {
padding-top: 6px;
}
</style>
</body>
</html>
3-index.php
index.php files slideup function call slide up function work as only one hide the html element but can’t show element of html , same opposite function is slideDown() in jquery to show the element.
<?php include('header.php'); ?>
<body>
<br><br><br>
<div class="cleafix"></div>
<div class="container">
<div class="alert alert-info">
<strong>Hi..</strong> jQuery slideUp() fucntion.
</div>
<div class="alert alert-warning">
<a href="https://drive.google.com/open?id=0BxmTZPVcu72fV2NMeS1FQkZ0ZWs" class="btn btn-xs btn-warning pull-right" target="blank();">Click</a>
<strong> Code download link-</strong>
</div>
<div class="span2">
<div class="btn-group">
<a class="btn btn-info jqueryShow" href="javascript:void(0)">
slideUp
</a>
</div>
</div>
<br><br>
<div class="container-fluid well span3 jqueryToggle" >
<div class="row">
<div class="col-lg-3">
<h3>Disuza Jen</h3>
<h6>Email: disuzajen@gmail.com</h6>
<h6>Country: India</h6>
</div>
</div>
</div>
<p></p>
</div>
</br>
<?php include('footer.php'); ?>
<script>
$('.jqueryShow').click(function()
{
//call slide up function::
$('.jqueryToggle').slideUp("slow",function(){
$('p').text('slideUp function call.');
});
});
</script>

Labels:

Comments

Post a Comment

Popular posts from this blog

using PDO database connection add,update,delete,edit operation

PDO advantage : 1-Object Oriented 2-Bind parameters in statements (security) 3-Allows for prepared statements and rollback functionality (consistency) 4-Throws catcheable exceptions for better error handling (quality) 5-Exception mode; no need to check error state after each API call. It's best to tell PDO how you'd like the data to be fetched. You have the following options: 1-PDO::FETCH_ASSOC: returns an array indexed by column name. 2-PDO::FETCH_BOTH: (default):returns an array indexed by both column name and number. 3-PDO::FETCH_BOUND:Assigns the values of your columns to the variables set with the ->bindColumn() method. 4-PDO::FETCH_CLASS: Assigns the values of your columns to properties of the named class. It will create the properties if matching properties do not exist. 5-PDO::FETCH_INTO:Updates an existing instance of the named class. 6-PDO::FETCH_LAZY: Combines. 7-PDO::FETCH_BOTH/PDO:FETCH_OBJ, creating the object variable names as t...
Post a Comment
Read more

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links user want to share any information then use following code  and read step by step Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links if you want share profile on following social link : 1-Facebook 2-twitter.com 3-LinkedIn 4-google +, Code link : https://drive.google.com/open?id=1IzTZZh_0euDqFSHL_vPRiQePlNTw3h-q Demo link : http://freeteachnology.hol.es/socialshare/ To modify a page's thumbnail image, description, and additional metadata for these services, you can provide meta tags in the HTML code of the page.Implementing Open Graph Meta Tags You can implement meta tags in a number of ways. In content management systems might  be allow you to modify a page's meta tags , then use following code in meta section of your project code, <link href="bootstrap.min.css" rel="stylesheet"> <link href="bootstrap-tour.m...
Post a Comment
Read more

GUID for globally unique identifier

How to create GUID in php 1-guid stands for globally unique identifier generally used to create random unique strings in php, create access token in php 2-Mostly use of GUID for generating access token, generate unique id, generating unique string in php. Using this article how to create guide in php you can create a random string for any use to keep unique 3-GUID consists of alphanumeric characters only and is grouped in five groups separated by hyphens as seen in this example: 3F2504E0-4F89-11D3-9A0C-0305E82C3301 Eg:- <?php /** * Generate Globally Unique Identifier (GUID) * E.g. 2EF40F5A-ADE8-5AE3-2491-85CA5CBD6EA7 * * @param boolean $include_braces Set to true if the final guid needs * to be wrapped in curly braces * @return string */ function generateGuid($include_braces = false) { if (function_exists('com_create_guid')) { if ($include_braces === true) { return com_create_guid(); } else { return substr(com_cr...
2 comments
Read more