<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
the second button doesnt work it stay open.
i have try a lot of way how to fix it but it seems not working
where is th problem in the code.
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
So, 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 reference to a callback function called "callback"
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
This is why the div with an id of "effect" fadesOut.
You mention another button? There is no other button. In the div box, there seems to be a button called "show", but that is not a button. It was only styled to look as if it is button but it actually is an <h3> element.
<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.........</p>
</div>
andi-dev
0
Light Poster
i have 3 buttons in a webpage.
when i open all the 3 button my page is becomes mor height and the scrollbar size change to
for example the page is widht 1000px height 900px when i open the 3 buttons the height of the site is being more biger.
how can i fix that plz help
andi-dev
0
Light Poster
<div id="content">
<div id="head">
<a href="ApiSite.html" id="ApiLogo"></a>
<div id="NavMenu">
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="">Home</a>
<ul>
</ul>
</li><!--End main Li-->
</ul><!--End main Ul-->
<ul>
<li><a href="">Produktet Tona</a>
<ul>
<li><a href="">Karburante</a></li>
<li><a href="">Produkte Speciale</a></li>
<li><a href="">Lubrifikante</a></li>
</ul>
</li><!--End main Li-->
</ul><!--End main Ul-->
<ul>
<li><a href="">Home2</a>
<ul>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
</ul>
</li><!--End main Li-->
</ul><!--End main Ul-->
<ul>
<li><a href="">Home3</a>
<ul>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
</ul>
</li><!--End main Li-->
</ul><!--End main Ul-->
<ul>
<li><a href="">Rreth nesh</a>
<ul>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
</ul>
</li><!--End main Li-->
</ul><!--End main Ul-->
<ul>
<li><a href="">Kontakto me ne</a>
<ul>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
<li><a href="">Product</a></li>
</ul>
</li><!--End main Li-->
</ul><!--End main Ul-->
<br class="clearFloat"/>
</div>
</div><!--Fundi i wrapper-->
<div class="ImgSlider" align="center">
<img src="images/lubrifikantWallpaper.jpg">
<table width="1001" height="11" bgcolor="FFA500"></table>
</div>
</div><!--Tag i img Slider-->
</div><!--End of NavMenu-->
</div><!--End of head-->
</div><!--End of Content-->
<div id="Center">
<div id="container" style="width:1000px" >
<div id="header" style=" background:url(images/menu-li-blue.png)">
<div class="levizjaNeQender" align="center"> <a class="bluText">IP ALBANIA-Lubrifikante</a>
</div><!--levizjaNeQender-->
</div>
<div id="menu" style="background-color:#FFA500;height:750px;width:230px;float:left;">
<div id="MoveImg">
<hr>
<img src="images/pikat tona.PNG">
<hr>
</div><!--End of MoveImg-->
<div id="MoveImg1">
<hr>
<img src="images/gree car.PNG">
<hr>
</div><!--End of MoveImg1-->
</div><!--End of div menu--><!--Kubi portokalli anash-->
<div id="content" style="background-color:#E6E6E6;height:750px;width:770px;float:left;">
<div id="AllButtons">
<div class="pozicionimibutoni1">
<a href="#" id="toggle-example2" class="button"></a>
<div class="example2">
<br>
<a class="BoxText">Lubrifikuesit</a>
<p>Una novità nei prodotti speciali!
La nostra IP Plus aumenta il numero di ottano, passando da 98 a 100 e dando così vita ad un nuovo prodotto altamente performante: plus 100.
L’aumento del numero di ottano permette un funzionamento più dolce e regolare del motore, abbinando un maggior rendimento ad un minor consumo. Viaggiare con una benzina a 100 ottani significa avere accelerazioni immediate, molto più fluide e senza quel leggero ritardo tra la pressione !</p>
</div>
</div>
<script type="text/Javascript">
$(document).ready(function() {
$('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Hap/Mbyll</a>');
$('a#toggle-example2').click(function() {
$('.example2').slideToggle(1000);
return false;
});
});
</script>
<br><br>
<br>
<div class="pozicionimibutoni2">
<a href="#" id="toggle-example" class="button1"></a>
<div class="example1">
<br>
<a class="BoxText">Nafta</a>
<p><strong>Il petrolio</strong>, il cui nome deriva dal latino (petra oleum) cioè olio di pietra, è una sorta di minestrone denso ed
oleoso, dall’odore caratteristico e dal colore variabile dal giallo-bruno al nerastro, un miscuglio di composti,
idrocarburici direbbero i chimici per sottolineare il fatto che sono costituiti da idrogeno e da carbonio,
caratterizzati da pesi e dimensioni molto variabili.
</div>
</div>
<br>
<br>
<script type="text/Javascript">
$(document).ready(function() {
$('.example1').hide().before('<a href="#" id="toggle-example" class="button1">Hap/Mbyll</a>');
$('a#toggle-example').click(function() {
$('.example1').slideToggle(1000);
return false;
});
});
</script>
<div class="pozicionimibutoni3" >
<a href="#" id="toggle-example3" class="button2"></a>
<div class="example4">
<br>
<a class="BoxText">Vajrat</a>
<p><strong>Il barile</strong> è, insieme alla tonnellata, l’unità di misura comunemente utilizzata nell’industria del petrolio. Esso corrisponde a circa 160 litri in quanto di tali dimensioni erano i barili di legno utilizzati, agli albori dell’industria petrolifera, in Pennsylvania per la raccolta del greggio.
</div>
</div>
<br>
<br>
<br>
<script type="text/Javascript">
$(document).ready(function() {
$('.example4').hide().before('<a href="#" id="toggle-example3" class="button2">Hap/Mbyll</a>');
$('a#toggle-example3').click(function() {
$('.example4').slideToggle(1000);
return false;
});
});
</script>
</div><!--End of AllButtons-->
<video id="sampleMovie" width="385" height="279" preload controls>
<source src="images/I_Lubrificanti_IP.mp4" />
</video>
<div id="imgPoshte"><!--imazhet me lubrifikantet-->
</div><!--End of imazhet me lubrifikantet-->
</div>
<div id="footer" style="background:url(images/menu-li-blue.png);clear:both;text-align:center;">
.com</div>
</div><!--End of Center-->
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
when 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 behaviour are you trying to implement then?
andi-dev
0
Light Poster
i just wont to fix the problem of the heigh.
later i think to use behaviour.
can you help me plz
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
can 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 text, how do you expect for the height not to further expand? In other words, what do you want to happen instead if the text doesnt fit in the current height?
andi-dev
0
Light Poster
i wont that the height of the page shuold not change if i open all the 3 buttons.
or if i have opened 1 button and i tray to open another one that should closed automaticly can you help me for this
JorgeM
958
Problem Solver
Team Colleague
Featured Poster
i wont that the height of the page shuold not change if i open all the 3 buttons.
One solution is to change the height of your existing divs if you already have pre-defined text and this text will not change. So you can already calculate the height needed. For example. if you change these two lines, the content will fit in the divs even when expanded.
simply set the height to 1000px;
<div id="menu" style="background-color:#FFA500;height:1000px;width:230px;float:left;">
<div id="content" style="background-color:#E6E6E6;height:1000px;width:770px;float:left;">
andi-dev
0
Light Poster
very original ide sir
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.