I am a beginner to JavaScript and jQuery.
My objective is to use the slideToggle() function in jQuery to hide/show <div> sections in HTML(inspired by the answer to [this question](How can I expand and collapse a <div> using javascript?). Cannot get it to work though :(
Here is what I have tried:
1 test.html (in my Desktop directory)
<html>
<title>Test jQuery</title>
<head>
<script charset="UTF-8" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<script language="JavaScript">
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
</body>
</html>
I have downloaded jquery-1.12.0.min.js, renamed it to jquery.js and it's in the same local directory as test.html (viz. Desktop)
style.css (on the Desktop)
.container {
width: 100%;
border: 1px solid #d3d3d3;
}
.container div {
width: 100%;
}
.container .header {
background-color: #d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding: 5px;
}
I have searched and read answers to the following questions already:
Local jQuery.js file not working
Why jQuery does not work on my home (local) machine?
...but seem to be still doing something basic wrong. Any help would be much appreciated!
First of all, language="JavaScript" should be type="text/javascript"
Second, you need to wrap your code into $(document).ready(....) - note that this is better practice than to simply trust on the order of the html, although you should have the scripts at the bottom of your body
See working snippet below
.container {
width:100%;
border:1px solid #d3d3d3;
}
.container div {
width:100%;
}
.container .header {
background-color:#d3d3d3;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
display: none;
padding : 5px;
}
<html>
<title>Test jQuery</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
});
</script>
</body>
</html>
This is because your script is run before your elements have loaded, thus not having any elements to act upon. Simply move the script under the content, or add a $('document').ready().
$('document').ready():
div.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<title>Test jQuery</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<script language="JavaScript">
$('document').ready(function() {
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
</body>
</html>
Moving script:
div.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<title>Test jQuery</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
</head>
<body>
<div class="container">
<div class="header">
<span>Expand</span>
</div>
<div class="content">
<ul>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
<li>This is just some random content.</li>
</ul>
</div>
</div>
<script language="JavaScript">
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {
//change text based on condition
return $content.is(":visible") ? "Collapse" : "Expand";
});
});
});
</script>
</body>
</html>
$(".header").click(function() .. fails, because the div with the class 'header' doesn't exist yet when the script is executed.
There are several ways to solve this. One is wrapping everything in a function that is only executed when the DOM is fully loaded, another is moving the script to the end of the page, so it is executed when the div is available.
But my personal favorite is using on to bind events.
Old:
$(".header").click(function() {
New:
$(document).on("click", ".header", function() {
As adeneo already stated in his comment, your JavaScript is at the wrong position in your HTML.
The browser executes the code as soon as he sees it. Now in your example, the code is in the header, but your code tries to work with an element, which will be defined later in the file. Of course this cannot work, as the element does not exist at the time of the execution.
There are two solutions:
Move your code: You can move your JavaScript to the end of the HTML page, just above the closing </body> tag
Use $( document ).ready(): You can give this function a function, that will be called as soon as the document is ready and all HTML elements are parsed and useable for the JavaScript. See this example, taken from the JQuery site
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
Additionally, the use of the language="JavaScript" tag is obsolete and was never really standardized. You should use the type attribute. See this MDN entry.
Related
I am using the js-mindmap library for a different kind of use, I need to allow a selection to link to extrenal/internal pages on some links but need others to bubble into a bullet list (preferably withing the same css shape as the rest of the mindmap.) I was initially looking at getting the content for the alert from the title or alt tags but not sure if they will retain the ul and li needed without defaulting to the mindmap format...
I'm searching for more of a more simplistic way to accomplish this. I'm sure css is most likely the best practice and I need to pull the content from the html for ease of creating different modles.
here is JSFiddle MindMp
html:
<!DOCTYPE html>
<html>
<head>
<!-- Computer Medic 2016
NOTE: http://stackoverflow.com/questions/15352556/links-not-working-on-js-mindmap
-->
<title>ALS Mindmap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="mindmap/js-mindmap.css" />
<link href="mindmap/style.css" type="text/css" rel="stylesheet"/>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!-- UI, for draggable nodes -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<!-- Raphael for SVG support (won't work on android) -->
<script type="text/javascript" src="mindmap/raphael-min.js"></script>
<!-- Mindmap -->
<script type="text/javascript" src="mindmap/js-mindmap.js"></script>
<!-- Kick everything off -->
<script src="mindmap/script.js" type="text/javascript"></script>
<style>
.alert {
padding: 20px;
background-color: #f44336;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
</head>
<body>
<ul>
<li>ALS
<ul>
<li>Chest Pain</li>
<li>Shortness of Breath</li>
<li>Allergic Reaction</li>
<li>Diabetic</li>
<li>STEMI
<ul>
<li>ACS</li>
<li>STEMI
<ul>
<li>Treatment</li>
<li>Protocol</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</body>
</html>
Here you go my friend, it's a bit hacky but it works. I made several modifications to the plugin itself as well as your styles and html.
The plugin was taking your anchor tags, stripping everything and creating them anew. I had to make sure my new attribute data-content was being preserved. Now the plugin checks if a link has this attribute and if it does, it doesn't fire the click event.
Then, I assigned my own click handler to replace content of the alert div and subsequently show it:
$('a').click(function(e){
var tag = $(this).attr('data-content');
if(tag)
{
$('.alert .content').html(content[tag]).parent().show();
}
});
If you have any questions, let me know.
https://jsfiddle.net/x8826shn/7/
I have a problem with creating 2 elements with different z-index.
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.capty.css">
<script src="jquery.capty.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery-jesse.css">
<script type="text/javascript" src="jquery-jesse.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fix').capty({
cWrapper: 'capty-tile',
height: 36,
opacity: .6
});
$('#list').jesse();
});
</script>
<style>
#list {
max-width: 640px;
margin: 20px auto;
}
div.capty-caption {
z-index: 999;
}
</style>
<title></title>
</head>
<body>
<ul class="jq-jesse" id="list">
<li class="jq-jesse__item">
<a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' target='_blank'><img class="fix" name="#content-target-1" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-1-coloring-page.png' width='100' height='100'></a>
<div id="content-target-1">
[x]
</div>
</li>
<li class="jq-jesse__item">
<a href='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' target='_blank'><img class="fix" name="#content-target-2" src='http://www.supercoloring.com/sites/default/files/styles/coloring_medium/public/cif/2015/10/number-2-coloring-page.png' width='100' height='100'></a>
<div id="content-target-2">
[x]
</div>
</li>
</ul>
</body>
</html>
Example:
http://plnkr.co/edit/8HSgSbc96LlSQ66hgY79?p=info
How can I intercept a click on the caption?
I'm trying to set z-index: 999 for div capty-caption, but it's not working for me.
The event you are looking for is well described in Simple jQuery Plugin For Drag & Drop Sorting Of Lists - jesse
$('#list').jesse({
// executed when the item has dropped
onStop: function(position, prevPosition, item) {
alert('ok');
}
});
The onStop is executed at the end of mouseup event. If you do not need this but only the click event you may always use (I discourage you to follow this path):
$('#list').mouseup(function(e) {
alert('ok');
});
I have been searching the Internet for days with no luck. I need a modal window to upload a file and pass additional values to the script. The modal window needs to open when the user clicks on "This is Question #". Below is my current script. Any help or direction would be greatly appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
/*background-image: url(/images/page.png);*/
background-position: 0 1px;
background-repeat: no-repeat;
padding-left: 20px;
}
a {
color: #000000;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.hidden {
display:none;
}
</style>
<script src="/js/jquery-1.11.1.js"></script>
<script type="text/javascript">
function addLine(what) {
$("#" + what).append('<li>URL to uploaded document</li>');
};
function myToggle(what){
$("#" + what).toggleClass('hidden');
};
</script>
</head>
<body>
<ul>
<li class="folder">
Test
<ul class="hidden" id="Test1">
<li class="folder">
Test1-2
<ul class="hidden" id="Test1-2">
<li>
This is Question 1
<ul id="Question1"></ul>
</li>
<li>
This is Question 2
<ul id="Question2"></ul>
</li>
<li>
This is Question 1
<ul id="Question3"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Try using Ravishanker Kusuma's jQuery File Upload Plugin, here:
http://hayageek.com/docs/jquery-upload-file.php
To make the dialog modal, you just need to create a div like this:
<div id="myOverlay"></div>
and style it like this:
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;overflow:hidden;background:black;opacity:0.5;z-index:10;}
The overlay DIV is initially hidden (by appending display:none; to the end of the css above). When you want it visible, you remove the display:none;. When visible, it will overlay all the rest of the page, with the exception of your upload form which must have a higher z-index value.
Making a dialog modal really is that simple.
So, using Ravi's code, you just show a DIV like this:
See This jsFiddle Demo
HTML:
<link href="http://hayageek.github.io/jQuery-Upload-File/uploadfile.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://hayageek.github.io/jQuery-Upload-File/jquery.uploadfile.min.js"></script>
<div id="myOverlay"></div>
<div id="box">
<div id="box-inside-div">
<div id="fileuploader"></div>
</div><!-- #box-inside-div -->
</div><!-- #box -->
<div id="main">
<h1>Upload a File Page</h1>
<p>To upload a file, click the button below</p>
<input type="button" id="myButt" value="Upload" />
</div>
CSS:
/* #myOverlay on two lines for readability in this SO answer */
#myOverlay {height:100%;width:100%;position:absolute;top:0px;left:0px;}
#myOverlay {background:black;opacity:0.5;z-index:10;display:none;}
#box {position:absolute;top:150px;left:125px;height:200px;width:550px;background:white;z-index:15;display:none;}
#box-inside-div{margin-left:20px;margin-top:30px;}
jQuery/javascript:
$(document).ready(function() {
$('#myButt').click(function () {
$('#myOverlay').show();
$("#box").show();
$("#fileuploader").uploadFile({
url: "upload_recv.php",
fileName: "myfile",
onError: function(files,status,errMsg){
/* onError because (1) jsFiddle cannot do ajax */
/* AND (2) there is no upload_recv.php file! */
$('#myOverlay').hide();
$('#box').hide();
alert('The file is now on the server');
}
});
});//END mybutt.click
});
When the upload is completed you would hide both the #myOverlay DIV and the #box DIV (which contains the fileuploader DIV). In the jsFiddle example, to determine when the upload has finished, I used the onError event (because jsFiddle cannot do either ajax or the back end PHP processing). You would probably use the onSuccess or afterUploadAll events.
For more information on how to do that, see the demos on the HayAGeek page.
And finally . . . how to process the file on the server once uploaded?
This is done by the PHP processor file you specified in the jQuery code above. In the above example, we named it upload_recv.php
On the HeyaGeek demo page, see Server Side at the top right.
This is inside my CSS:
div.hide {
display:none;
}
div.show {
color: #66CCFF;
}
This is in my HTML:
16:10
<script language="JavaScript">
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>
I'm trying to make the first link display the "This is your monitors aspect ratio." text lower on the page.
Any help is much appreciated.
Pure CSS Answer
Ok, if you just want to append text after you have moved to a position in a page using an anchor tag, you could do it with nothing but CSS similar to the following:
a:target:after{
content: " Test";
background-color: #ccffcc;
}
What this does is appends the text "Test" after the active anchor and colors. Here is an example page with implementation:
<!DOCTYPE html>
<html>
<head>
<title>Link Printer 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
a:target:after{
content: " Test";
background-color: #ccffcc;
}
.bigSection{
height: 200px;
}
</style>
</head>
<body>
<div class="bigSection">
<div><a name="first">First</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="second">Second</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="third">Third</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
</body>
</html>
Answer using JavaScript
You need to bind an eventListener and prevent it from moving to the next page. Here is a way to do it with JavaScript or CSS. The JavaScript way will actually set the text to whatever you want. The CSS way will hide actually hide the element.
<!DOCTYPE html>
<html>
<head>
<title>Link Printer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.hide{
display: none;
}
</style>
<script>
function jsShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.innerHTML === "") {
divToManip.innerHTML = "Hello";
}
else {
divToManip.innerHTML = "";
}
event.preventDefault();
}
function cssShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.className === "") {
divToManip.className = "hide";
}
else {
divToManip.className = "";
}
event.preventDefault();
}
function setListeners() {
document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
}
window.onload = setListeners;
</script>
</head>
<body>
<div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
<div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
<div id="text">I'm text</div>
</body>
</html>
"showText" must receive an id parameter to be used with the call to "document.getElementById"
Try this, just 1 link that will display the text below after click:
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>
I'm just using style display to hide/show the element. Hope it helps.
just change your css like this:
div.show {
display:block;
color: #66CCFF;
}
Here I am going to provide an example with something that I was working, thank you Alberto Montellano for the example, that gave me an idea, however what was required at the end was something a little different, with the option not to show the data and display it only when I click and make it disappear when click again. In this example I am going to give you two options; you can have a button or a link to trigger the JS function to display and hide the body text, you can choose if you want the button or link that is way I put a comment (optional), both behave as the same, it is up to you which one you want to use.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>
<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>
<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>
<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>
<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>
<!-- JS -->
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
I have a design in mind that involves a split panel view in html, similar to a winforms split panel. I've been expirimenting with jQuery UI - Resizable and I like the function, I just can't seem to co-ordinate the resizing of the two divs. The problem with the current code is that the two divs resize away from each other, not with one following the other. How can I make the two divs work together?
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.10.custom.css" media="screen">
<script type="text/javascript" src="script/jquery-1.5.1.js"></script>
<script type="text/javascript" src="script/superfish.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript">
// initialise plugins
$(function(){
try {
$('ul.sf-menu').superfish();
//set up divs
$('#Content').resizable({ handles: 'e', alsoResize: $('#Attributes')});
}catch(ex){
alert(ex.message);
}
});
</script>
</head>
<body>
<div id="Header">
<div id="Menu">
<ul class="sf-menu" id="nav">
<!-- Snip menu -->
</ul>
</div>
</div>
<div id="Middle">
<div id="Content" class="ui-widget-content">This is where the view is.<br/>
Imagine an image here ...
<br/>
<br/>
<br/>
</div>
<div id="Attributes" class="ui-widget-content">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
<div id="FootBreak"/>
<div id="Footer">
Help
</div>
</body>
</html>
I have worked out a reasonable hack, using the resize event.
<script type="text/javascript">
var WIDTH_ATTR = 'initWidth';
// initialise plugins
$(function(){
try {
$('#Content').resizable({ handles: 'e', resize: resizeAttr });
$('#Content').attr(WIDTH_ATTR, $('#Content').width());
$('#InfoPanel').attr(WIDTH_ATTR, $('#InfoPanel').width());
}catch(ex){
alert(ex.message);
}
});
function resizeAttr(event, ui){
var change = ui.size.width - $('#Content').attr(WIDTH_ATTR);
$('#InfoPanel').width($('#InfoPanel').attr(WIDTH_ATTR) - change);
};
</script>
I'm still open to cleaner answers from others...
I am not sure if this meets the requirements, but ExtJS handles split panes with ease and works cross-browser. For example, see this RSS feed client in ExtJS. Be aware the ExtJS has commercial licensing restrictions if your intent is to sell your product.
Here is an example with a horizontal split (one top div, one bottom div), maybe slightly more minimalistic:
HTML:
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="div1">1st</div>
<div id="div2">2nd</div>
</body>
</html>
CSS:
#div1, #div2 {
position: absolute;
left: 0;
right: 0;
outline: solid 1px #ccc; /* just for making the divs visible */
margin: 5px; /* just for making the divs visible */
}
#div1 {
height: 100px;
top: 0;
}
#div2 {
top: 110px;
bottom: 0;
}
JavaScript:
$('#div1').resizable({
handles: 's',
resize: resizeEventHandler
});
function resizeEventHandler(event, ui){
var new_height = ui.size.height;
$('#div2').css('top', new_height + 10);
}
See demo here.