<meta charset="utf-8">
<title>jQuery UI Effects - Show Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 100 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 280, height: 185 } };
}
// run the effect
$( "#effect" ).show( selectedEffect, options, 500, callback );
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 5000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
$( "#effect" ).hide();
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Show</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="explode">Explode</option>
<option value="fold">Fold</option>
</select>
<a href="#" id="button" class="ui-state-default ui-corner-all">kliko</a>
</body>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Show Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 100 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 280, height: 185 } };
}
// run the effect
$( "#effect" ).show( selectedEffect, options, 500, callback );
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
$( "#effect" ).hide();
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Show</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="explode">Explode</option>
</select>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</body>
</html>
andi-dev
0
Light Poster
Recommended Answers
Jump to PostSo, your code as it stands now will run the effect when you click on the "run effect" button, then it fades away because of this section of your code:
$( "#effect" ).show( selectedEffect, options, 500, callback );
As you can see, you are have a …
Jump to Postwhen i open the 3 buttons the height of the site is being more biger.
I see that you have some "links" Hap/Mbyll that when clicked, toggles text on the page. Of course the page's height is going to increase... you are showing additional text. What type of …
Jump to Postcan you help me plz
Yes, i am trying to help you. my responses so far is an indication that I am trying to help you.
I dont understand what you mean by fix the height problem. If you expand an element on the screen and introduce more …
All 10 Replies
andi-dev
0
Light Poster
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
andi-dev
0
Light Poster
andi-dev
0
Light Poster
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
andi-dev
0
Light Poster
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
andi-dev
0
Light Poster
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
andi-dev
0
Light Poster
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.