I have a layout that looks like this:
<html>
<head>
stuff here
</head>
<body>
<div id="master">
<div id="toolbar">
<input type="text" id="foo">
</div>
<div id="content">
a whole bunch of content in here
</div>
</div>
</body>
</html>
'#master' is a container for a jquery UI dialog. I'd like the contents of the '#content' div to be scrollable but for '#toolbar' to NOT be scrollable. Is this doable with jquery UI's dialog?
Just use css rules:
#content { overflow: auto; height: [desired height] }
Where you might need to use jQuery is if the modal has a dynamic height. In that case on open of the modal you could set the inner container height. Something like:
open: function(){
var modalHeight = $('#master').height();
$('#content').height(modalHeight - [footer and title]);
}
Use CSS to give the #content div a set height and optionally a width, and set the CSS property overflow: auto on that div as well. If the content exceeds the height, you'll get a scrollbar.
Related
So,
I have a project using React & tailwindCSS, and I'm building a platform using a custom CMS. The problem that I'm facing is the following:
Im showing different screen size options on the CMS and you can press on different screen sizes to view your content in lets say on a mobile screen.
Since the CMS editor is not in an iframe changing the width of the parent element to 1300px or 400px is not causing the elements inside to change to tailwinds responsive design, since the viewport is still the exact same on the DOM.
Now I've read about CSS container queries, but since I'm using tailwindCSS it would be rather painful to start editing that. Is there any way to manipulate the DOM within and tell to the editor div.element that its viewport is only ex. 1400px.
And yes, iframe would be a viable option.
Thanks in advance!
.screen--desktop {
max-width: 1440px;
width: 100%;
}
.screen--mobile {
max-width: 360px;
width: 100%;
}
<html>
<body>
<div class="container">
<!-- PAGE CONTENT wv is 100 -->
<div class="editor screen--desktop">
<!-- FRAMED CONTENT wv needs to be 50 -->
<div class="container">
<!-- Container #media max width needs to listen to the parent div's width only -->
<!-- Here would be element1 -->
</div>
</div>
</div>
</body>
</html>
I have been working on the next example, I'm adding html to a div, at some point the size of the window start increasing, is there a way to avoid this?
example
$(document).ready(function() {
$('#b').click(function() {
$('#elDiv').append('<br><strong>Hello</strong><br>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>I would like to say: </p>
<button id="b">click now</button>
<div id="elDiv"></div>
I defined a style for the elDiv to be 100px height and scroll when content exceeds the div's height:
.myclass{
height: 100px;
overflow: auto;
}
Updated fiddle: https://jsfiddle.net/9rysbxw2/18/
to avoid this behavio i think you should set a size to the element and define a overflow behavior. So the content that is been added to the div will stay inside it. here is a modification of you code sample:
$('#b').click(function(){
$( '#elDiv').append('<br><strong>Hello</strong><br>');
});
<p>I would like to say: </p>
<button id="b">click now
</button>
<div id="elDiv" style="height:100px; overflow: auto;">
</div>
<!-- NOTICE THE OVERFLOW PROPERTIE I ADDED AND THE FIXED HEIGHT -->
i resolved the issue using the style properties
position: absolute;
top: 20px;
this way i can add multiple div at any position without increasing the screen size
example
I just got one maybe simple question. I use snap.js to create a slidable menu, but how do I add padding to the contant?
Here is the source: http://runnable.com/UoqMXucPORNzAAIH/how-to-create-a-mobile-shelf-using-snap-js-for-javascript
Source project on GitHub: https://github.com/jakiestfu/Snap.js/
Here is the code for the content:
<div id="content" class="snap-content">
<div id="toolbar">
<h1>Default</h1>
</div>
<!-- Here goes the content I guess, but there is no padding -->
</div>
I need to have all content in the #content to make it slidable with a finger. But I can't get the content to have padding so it looks bad, in my opinion.. If I add padding to #content the menu also gets it. Then i tried to add a new <div> named #main and placed it under #toolbar but then the padding is acting like margin for some reason. #main had 100% width and padding of 10px. The #toolbar displayed like 100% but showed 100% + 10px (left) + 10px (right) so it adds the scroll and look awful.
How have others solved this?
As you can see in this JSFiddle there is no padding: http://jsfiddle.net/TorchMan/MexXY/
Thanks in advance.
you can move all of your contents you mean to new element,
for example:
<div id="content" class="snap-content">
<div id="toolbar">
<h1>Default</h1>
</div>
<div id="content-wrapper">
<!-- Here goes the content I guess, but there is no padding -->
</div>
</div>
and add style
#content-wrapper{
padding:10px;
}
http://jsfiddle.net/MexXY/21/
The scenario:-
A published HTML page has position:absolute DIVs and all DIV heights are set to specific px values. The page is editable via an online CMS such as Surreal or Cushy. The editor enters more content that the DIV was designed to take. The result is that the extra content overflows the DIV and the page design is trashed.
Is there any way that when an editor does this that the DIV height expands AND all other DIVs on the page move down? Bare in mind that the DIV heights cannot be set to 100% but have fixed px values.
I am assuming the solution maybe jQuery or JavaScript - any ideas?
<body>
<div id="two" style="position:absolute;left:163px;top:0px;width:738px;height:269px;z-index:5;padding:0;">
<img src="images/two.jpg" id="two" alt="two" border="0" title="two" style="width:738px;height:269px;">
</div>
<div id="three" style="position:absolute;left:0px;top:350px;width:900px;height:294px;z-index:6;" class="editable">
<!-- div content -->
<!-- this is where the user/editor will add content -->
</div>
<div id="four" style="position:absolute;left:0px;top:0px;width:900px;height:323px;z-index:7;padding:0;">
<div id="five" style="position:absolute;left:0px;top:0px;width:162px;height:269px;z-index:0;padding:0;">
<img src="logo.gif" id="logo" alt="Logo" border="0" title="Logo" style="width:162px;height:269px;">
</div>
I don't see exactly the scenario, but have you considered the scroll within your fixed size divs ?
Give a class to those divs, such as
<div class="bescrollable"></div>
and then in your css :
.bescrollable {overflow:auto;}
scrollbars will be added when overflows occur
You can set height of the div according to the content like this:
.container {
position: absolute;
width: 400px;
height: 400px;
}
.content {
width: 100%;
height: 100%;
}
<div class="container">
<div class="content">...</div>
</div>
$('.container').css('height', $('.content').height());
Here a fiddle: http://jsfiddle.net/Kdktw/
As CBRRacer mentioned in the comments, if we could see the HTML, the answer would be more accurate to your situation.
I hope this helps!
This would be predicated on the height of the content within the box. Probably the best method would be to have the height of the content div set to auto and use javascript to get the height of the element.
// Using jQuery
var contentDivHeight = $('#myContentDiv').height();
var startingOffset = 250; // The height of the div original set at startup
Then you could simply add this height to each of the primary display controls that would have to be moved "down". If you assigned them all a common class they could all easily be selected (such "primaryInterface" or something).
$(document).ready(function() {
$('.primaryInterface')each(function (i) {
var newTop = this.offset().top + contentDivHeight - startingOffset;
var newLeft = this.offset().left;
this.offset({ top: newTop, left: newleft });
});
});
This code is untested, but ideally, once the page loads, it would find all of the elements with the specified class and set their top offset to be the difference between the starting height of the div and the resultant height.
I've got a a div acting as a container which is positioned as relative.
Within this div I have 3 other divs positioned as absolute.
<head>
<style>
#container{ position:relative; }
#block1, #block2, #block3 { position:absolute; }
#block2 { top:100px; }
#block3 { top:600px; }
</style>
</head>
<div id="container">
<div id="block1"> some text </div>
<div id="block2"> some text </div>
<div id="block3"> some text </div>
</div>
How can I get correct height of a relative div with js.
I tried .clientHeight and jquery .height() but won't work.
Thanks!
I think you got something wrong. When you position divs inside other divs like that, the container-div will have nearly no (or no) height at all. That's cause of the absolute positioned divs. They can be placed "outside" the container-div, and only use it as a reference for x and y offsets.