I am trying to position an overlay over a div. I had the code working successfully when the div was guaranteed to be only one row, but I am struggling to obtain the proper height of the div when it breaks out. It appears that the div reports its single-row height, but displays a multi-line height after rendering.
function InitializeControls() {
console.log("Width: " + $('#PlanViewControls').width());
console.log("Height: " + $('#PlanViewControls').height());
console.log("innerHeight: " + $('#PlanViewControls').innerHeight());
console.log("outerHeight: " + $('#PlanViewControls').outerHeight());
$('#PlanViewControls').show();
$('#PlanViewControlsOverlay')
.stop()
.show()
.css({ opacity: .7 })
.width($('#PlanViewControls').width())
.height($('#PlanViewControls').height())
.offset($('#PlanViewControls').offset())
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
width: 100%;
min-width: 200px;
overflow: hidden;
padding: 5px;
}
#PlanViewControls > div
{
display: inline-block;
min-height: 20px;
}
<div id="PlanViewControlsOverlay">
</div>
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
<div class="separated" style="padding-top: 3px">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated" style="padding-top: 4px">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated" style="padding-top: 3px">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
Is it possible to obtain these metrics?
I've put your code into this fiddle, changed a part whith errors (what JSLint reported) with working code and put it into .ready() so it would get called.
Look from here, whether it helps. I didn't answered anything directly, but more precise question would help to nail down your problem (:
You don't need JavaScript at all!
Just cut and paste the #PlanViewControlsOverlay into the #PlanViewControls div. This way, you can use a percentual width and height to make it cover the whole area.
What you would do is add these lines of code in your css and getting rid of the display: none;.
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
width: 100%;
height: 100%;
display: block;
}
Here is an example: http://jsfiddle.net/uJrLT/21/
Related
I was trying to make my input range slider with id "slider_" stay fixed when scrolling on small screen sizes(when table contents overflow with scrollbar), that way it should scroll with the rest of content, though it just stays fixed on the screen and eventually escapes its parent div.
I've tried to nest the slider in another div with all sorts of positions on both o them, absolute, relative, sticky, fixed, static, but none of them worked out.
Here is some of my HTML
<div class="progress">
<input id="slider_" type="range" min="0" max="1500" value="750" class="slider clicked slider-knob" disabled>
<div class="progress-bar" id="progress-bar1" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Down Trend</span>
</div>
</div>
<div class="progress-bar" id="progress-bar2" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Strong Buy</span>
</div>
</div>
<div class="progress-bar" id="progress-bar3" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Buy</span>
</div>
</div>
<div class="progress-bar" id="progress-bar4" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Neutral</span>
</div>
</div>
<div class="progress-bar" id="progress-bar5" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Sell</span>
</div>
</div>
<div class="progress-bar" id="progress-bar6" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Strong Sell</span>
</div>
</div>
<div class="progress-bar" id="progress-bar7" role="progressbar">
<div class="progressBarZone">
<span class="labels-singal">Up Trend</span>
</div>
</div>
</div>
CSS:
.slider {
position: absolute;
-webkit-appearance: none;
appearance: none;
width: inherit;
margin: 0;
height: inherit;
background: transparent;
width: 293px;
overflow: visible;
}
.progress {
overflow: visible;
min-width: 283px;
display: -ms-flexbox;
display: flex;
height: 1rem;
overflow: hidden;
font-size: .75rem;
background-color: #e9ecef;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
border-radius: .25rem;
}
I am willing to use jquery or js to fix this as well.
.progress {
position: relative;
}
You need to set a parent for the absolute element to stick to. The above should work.
I know there are many question about it, but they don't answer properly.
After readings and looking for, I tried this:
<input id="ext-element-47" class="x-input-file x-input-el" type="file" accept="" style="display:none">
hiding the file-input and then
this.element.down(".x-input-file").dom.click();
this works on Chrome's console but in my JS code it doesn't. It doesn't click.
Anyone knows why? and what can I do for make click?
Notes:
I need to make click because the file element is not visible and so when it clicks it does not show unless I do element.click ().
Here is an example what I'm doing:
document.getElementsByClassName('o-file-field-input')[0].click()
.o-file-field-input {
display: none;
}
.o-big-btn {
background-color: red;
height: 3em;
width: 3em;
}
<div class="x-container x-unsized o-cont-option" data-componentid="ext-container-5" id="ext-container-5">
<div class="x-inner x-align-center x-pack-center x-horizontal x-layout-box" id="ext-element-50">
<div class="x-button x-button-plain open-field-icon o-big-btn x-layout-box-item x-flexed x-stretched" id="ext-OUI_BaseButton-1" data-componentid="ext-OUI_BaseButton-1" tabindex="0" style="-webkit-box-flex: 1;">
<span class="x-button-icon x-shown smf smf-upload-file" id="ext-element-45"></span>
<div class="o-button-bg"></div>
<div class="x-unsized x-field-input x-has-height" id="ext-fileinput-1" data-componentid="ext-fileinput-1" style="height: 38px;">
<input id="ext-element-47" class="x-input-file x-input-el o-file-field-input" type="file" accept="">
<div class="x-field-mask x-hidden-display" id="ext-element-48"></div>
<div class="x-clear-icon" id="ext-element-49">
</div>
</div>
</div>
</div>
</div>
See ya!
Here's what I usually do: Wrap the input inside a <label> element, and then style the element as a button, for example:
.pretty-file {
border: 1px solid #000;
cursor: pointer;
display: inline-block;
padding: 5px 15px;
}
.pretty-file input[type="file"] {
display: none;
}
<label class="pretty-file">
Choose File
<input type="file" />
</label>
This finally works well:
var obElement = document.getElementsByClassName('input-file')[0];
//the title property overrides tooltip's description
obElement.setAttribute('title', ' ');
.flex-style{
display: flex;
}
.input-file{
opacity: 0;
margin-left: -40px;
width: 40px;
height: 45px;
}
.icon{
width: 40px;
height: 45px;
background-color: blueviolet;
}
<div class='flex-style'>
<div class='icon'></div>
<input class='input-file' type='file'>
</div>
I am trying to be able to click on a specific square and get a checkmark to appear over-top of it. I am going to want it to have a toggle effect, but I wanted to try to at least get the checkmark to show, which I am really having an issue getting it to even appear.
What am I doing wrong?
$('.package-img').click(function () {
//target.innerHTML = '<img src="images/checkmark-circle.png" class="checkmark-img total-center">';
$('.package-img').prepend('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 50%;
height: 50%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>
Use before method instead of prepend, otherwise your image is being added inside another image. Also use $(this).before... otherwise your checkmark will be added to all images with class package-img
$(this).before('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')
var $img = $('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img"/>').hide();
$('.package-img').before($img);
$('.package-img').click(function () {
$(this).prev().show();
});
$('.checkmark-img').click(function () {
$(this).hide();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 50%;
height: 100%;
z-index: 1;
position: absolute;
left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>
It is understood what you are looking for. Basically you can "toggle" the checkmark image over the checkmark square image when you click on the checkmark square. The problem with this is once you put the checkmark over the square the toggle doesnt work anymore. I have come up with a solution that should work a little better.
Basically if we take advantage of the rules that when a label is selected that is bound to a <input type="checkbox" /> this will toggle the checked property of the checkbox.
We can then bind to this event in jQuery and show\hide the checkmark. In this instance we dont bind any click events to the images, but the change event of the checkbox. Something like the example below.
Now the question is:
Why did i use a checkbox
Well by using a checkbox we can capture the result in our form posts. It also makes it easy to identify what is checked by enumerating all the check boxes that have the checked property.
To have this sent to your server you will need to add a name property to each checkbox and also set the value property.
$('.calendar-check').on('change', function() {
if ($(this).prop('checked'))
$(this).parents('.calendar-wrap:first').find('.checkmark-img').show();
else
$(this).parents('.calendar-wrap:first').find('.checkmark-img').hide();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition: 1s;
-webkit-transition: 1s;
position: relative;
}
#calendar-wrap,
#tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
display: none;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.calendar-check {
display: none;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap" class="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<label for="package-check-1" class="package-check-toggle">
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img" />
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 1" class="checkmark-img" />
</label>
<input type="checkbox" class="calendar-check" id="package-check-1" />
</div>
<div id="calendar-wrap" class="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<label for="package-check-2" class="package-check-toggle">
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="calendar-img" />
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 2" class="checkmark-img" />
</label>
<input type="checkbox" class="calendar-check" id="package-check-2" />
</div>
Sample JSFiddle
EDIT
For completness sakes I figured best to show a CSS (3) only solution. This has no depenedcies on using jQuery at all. Again this takes into consideration a checkbox (which is value based) and toggles the checkmark based on the toggle.
The Markup is quite simple.
<div class="calendar-checkmark">
<input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
<label for="checkbox-1"></label>
</div>
Example:
.calendar-checkmark input[type=checkbox] {
display: none;
}
.calendar-checkmark label {
cursor:pointer;
display: block;
height: 384px;
width: 354px;
position:relative;
background: url('http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif') no-repeat center center transparent;
}
.calendar-checkmark label::after {
content:' ';
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index:1;
display:none;
background: url('https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png') no-repeat center center transparent;
}
.calendar-checkmark input[type=checkbox]:checked + label::after {
display: block;
}
<div class="calendar-checkmark">
<input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
<label for="checkbox-1"></label>
</div>
The trick here is using Adjacent sibling selectors which allow you to select an adjacent sibling based of another element. So if we look at the css when the checkbox is checked it gets the Psudo-class :checked applied to it (similar to :hover etc). Then we use the adjacent + selector to locate the label.
Now the label element has a css background set to the image of the square box. Next it has the psudo-class ::after applied which creates our psudo-element that contains the checkbox. This is added after the element, when the checkbox is checked the psudo class :checked is addeed. This then changes the state of the psudo element by displaying the element.
Another Fiddle
This can be a lot simpler if we just remove the box images and create them via CSS. There will be less to download and we can then make the box's background transparent. This will allow us to just show and hide the checkmark that is already sitting behind each box.
$('.package-img').click(function () {
this.nextElementSibling.classList.toggle("hide");
});
parent { position:relative; }
.package-img {
border:3px solid black;
width: 110px;
height:110px;
background-color:rgba(0,0,0,0);
margin-left: 20%;
cursor: pointer;
position:relative;
display:inline-block;
}
.checkmark-img {
transition:1s;
width: 15%;
z-index: -1;
position:relative;
margin-left:-15%;
}
img.hide { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="product-titles">Package 1</h2>
<div class="parent">
<div class="package-img"></div>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide">
</div>
<h2 class="product-titles">Package 2</h2>
<div class="parent">
<div class="package-img"></div>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide">
</div>
1. absolutely position the Checkmark on top of the package image
2. Hide it
3. Use toggle to reveal it
since its hidden on top of it you will need to use the siblings selector to retrieve it
$('.checkmark-img').hide();
$('.package-img').click(function () {
$('.checkmark-img').toggle();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 25%;
margin-top:10%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: absolute;
width: 50%;
height: 50%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">'
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">'
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>
So I am trying this for one day but I am still not able to do it. I have created a new index page for my website. I have copied code from my previous homepage.
If you see the sliders on the left(first homepage) and on the right(new homepage). You could see that on the new homepage the sliders are behaving abnormally. I can't figure out in my CSS why is this happening.
I have tried this:
<div id="testimonial">
<div id="black_title">
<h1>Bead X Testimonials</h1>
</div>
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 232px;">
<ul class="slide_left" style="width: 415%; position: relative; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-288px, 0px, 0px);">
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<img src="images/test_img.png"> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;">
<iframe src="//player.vimeo.com/video/73331040" width="258" height="207" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> The Bead X Difference
</li>
<li style="float: left; list-style: none; position: relative; width: 248px;" class="bx-clone">
<img src="images/test_img.png"> The Bead X Difference
</li>
</ul>
</div>
<div class="bx-controls bx-has-pager">
<div class="bx-pager bx-default-pager">
<div class="bx-pager-item">1
</div>
<div class="bx-pager-item">2
</div>
</div>
</div>
</div>
<div class="navigation">
<!-- <p><span id="left-prev"></span> <span id="left-next"></span></p> -->
<div id="left-prev">
<a class="bx-prev" href=""><img src="images/slider_prev.png" height="25" width="25"></a>
</div>
<div id="left-next">
<a class="bx-next" href=""><img src="images/slider_next.png" height="25" width="25"></a>
</div>
<div id="read_more"> View all
</div>
</div>
</div>
By abnormally I mean, that the text below the images in the slider is getting overflown and the controls of the slider are messed up.
But the result is still weird. How to resolve this?
Unfortunately there are quite a few issues going on here that you will have to deal with. First it looks like that "Wax Daddys Promise" pane is an image with at Width of 269px yet the column you are trying to align is 275px so it will not fill that area correctly to give you good lines.
The .testimonial class margins are all out of place.
#testimonial {
text-align: center;
width: 95%;
height: 310px;
background: white;
border: 4px solid rgb(209, 209, 209);
margin: 15px 2px 2px 17px;
}
You should use:
margin: 15px 0 0 0;
or better yet:
margin-top: 15px;
And that is just to give yourself a top buffer. If you give the same to each of the testimonial classes or just use class="testimonial" on all of those you'll get the top separation.
That should help a bit. In the future you may want to look into bootstrap, makes grid layout really easy without having to get deep with custom styling. Hope that helps.
You will still need to do a bit of formatting to clean up the layout, but this should help you resolve some of the issues:
Modified CSS:
#read_more { float: right; }
.bx-next, .bx-prev { padding: 0px; }
#left-next, #left-prev { float: left; }
.bx-pager { padding: 0px; position: relative; top: 0; }
Also, add a clear fix after your #read_more and after your .bx-controls DIVs:
<div style="clear: both;"></div>
I have the following HTML markup:
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
<div id="Level1Controls">
<div class="separated">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
</div>
<div id="Level2Controls">
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
</div>
CSS (w/ latest jQueryUI for major styling)
#RightPaneContent
{
overflow: hidden;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
}
#PlanViewControls > div
{
min-height: 20px;
padding-top: 5px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 5px;
}
.component-slider
{
width: 100px;
margin-left: 5px;
margin-top: 3px;
}
#PlanViewControls label
{
display: block;
padding-left: 15px;
text-indent: -15px;
float: left;
}
#PlanViewControls input
{
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
}
#PlanViewControls div.separator
{
padding-top: 4px;
}
.marginedTop
{
margin-top: 3px;
}
#ExportLabel
{
padding-top: 1px;
}
#PlanViewControls
{
min-width: 700px;
}
#ExportLabel:hover
{
cursor: pointer;
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
I am really unhappy with this solution because on wide displays the second level of controls looks unnatural -- there is enough space to hold them all in one level.
The solution I currently have in my head consists of:
Measure the available width of the space I would like to take up.
Measure the width of each control I have.
Place as many controls as I can on the first line.
Append a second level if I run out of space.
Obviously it doesn't make sense to collapse to just 1 item per row -- I would be specifiying a min-width for my first level controls.
Is this the proper way to go about doing this? Or is there an easy way to express this using CSS/HTML?
Just as a visual helper I've attached below what my page looks like on a landscape monitor vs a portrait monitor.
Hm, I would use pure CSS for that:
<div id="controls">
<div> "Separated" </div>
<div> another control </div>
<div> and one with an icon </div>
...
</div>
#controls {
width: 100%;
min-width: 10em; /* or whatever */
/* implicit height: auto; */
overflow: hidden; /* to hide the leftmost borders */
}
#controls > div {
display: inline-block;
border-left: 1px solid blue;
padding: 1em 0;
margin: 1em -1px; /* move the borders 1px into the off */
}
This should give a scalable toolbar, and there is no need for different level-divs.