Ignore elements in overflow:auto element - javascript

I have an HTML structure below:
<div style="overflow:auto;" id="wrap">
<div id="text">content</div>
<div id="a"> </div>
</div>
Is it possible to have the overflow only take the size of #text into account and ignore #a, even if #a overflows further? I can't put #a outside the wrap DIV. I'm fine with using javascript if that is the only option.
EDIT: Here is an example of what I have, to show what I'm asking more clearly: http://jsfiddle.net/mAHMb/

Maybe this could help?:
Please try adding overflow-y:auto; to #text then set its heigth, remove #wrap height and you should be able to scroll #text without scrolling #a.
Here's the jsfiddle sample: http://jsfiddle.net/R4QWP/

Related

HTML - retrieve the max possible width of an inline-block

I'm looking for a way to retrieve, in javascript, the max possible width of an HTML element with display: inline-block.
My goal is to insert some elements in a page generated by a CMS.
I need the max possible width to adjust the content to be inserted in it.
Example:
HTML:
<...>
<div class="ib">
<div class="b">
<div class="b" id="my_content">
...
<div>
<div>
</div>
<...>
CSS:
.ib {
display: inline-block;
}
.b {
display: block;
}
I can only manage the element "my_content" and it's content. The parent elements are generated by the CMS, and I cannot change anything.
Using jQuery is ok.
[EDIT]
Here's a jsfiddle for a better explaination.
Before inserting content in #my_content, I need to know the available width.
If there's no content in #my_content, I get a width of 0, even if I set width:100% and max-width:100%.
The CMS currently generates this structure. As I don't have any control on this, it may change in the future.

contenteditable div height change working inside design

Hopefully this is somewhat simple to figure out. I have a list of items of an unknown height and a content editable div underneath it. I need to figure out how to resize the list when the content editable div gets bigger with content. Is there a css trick that I missed somewhere? Do I need to listen for an event? What's the best solution here?
Here is a fiddle to show what I'm talking about.
here's html structure in the fiddle just cause it makes me post code with a fiddle.
<div class="containerDiv" ng-controller="MyController">
<ul>
<li ng-repeat="item in items">
<p>{{item.message}}</p>
</li>
</ul>
<div id="inputDiv" contenteditable></div>
<button ng-click="addItem()">Add</button>
</div>
For example look at the facebook chat window. How does it resize when you have multiple lines of text before you send the message? Is there a simpler way of doing it?
First, you need to encapsulate your list in a div and let that div be dynamically handled by CSS.
You would then need to modify your height property and make the same 'auto'.
Next, provide a min-height if you require.
containerDiv {
border:1px solid blue;
height:auto;
width:150px;
min-height:100px;
}
.containerDiv ul {
height:auto;
overflow-y:auto;
}
Updated JS Fiddle: http://jsfiddle.net/q78jN/1/

Extend Sidebar Height to equate Content Height Using Javascript

I've a simple javascript function which is meant to increase my sidebar div's height to make it equal to the height of the content div. this is how I am doing this....
Javascript:
<script type="text/javascript">
function absar(){
document.getElementById("sidebar").style.height = document.getElementById("content").clientHeight;
}</script>
HTML:
<body onLoad="absar()">
<div id="sidebar" style="border:1px solid red">Few content</div>
<div id="content" style="border:1px solid red">
some content <br>
some content <br>
some content <br>
some content <br>
some content <br>
</div>
</body>
This code will make the height of sidebar equal to the height of content div. ** OK**
But when I paste same code in wordpress(where I've same id values content & sidebar) just after the body tag and provide onload="absar()" to body it does nothing, exactly nothing.
At this point when I've designed almost whole layout I can't go with a new solution like Faux Columns or table etc. .
At last a stupid css trick worked and worked perfectly,....
for my sidebar div I set
padding-bottom: 5000px;
margin-bottom: -5000px;
and for the container which contained sidebar and content divs. I set
overflow: hidden;
and it worked perfectly - Just like the way I wanted, Please tell If you know any drawbacks of this trick,... I'll be posting here if I found some,
Below is the example code,
HTML
<div class="main">
<div class="sidebar">Few Sidebar Widgets</div>
<div id="content">
Bang Bang Content <br>
Bang Bang Content <br>
Bang Bang Content <br>
</div> <!-- End of Content -->
</div> <!-- End of Main -->
CSS
#main{
overflow:hidden;
}
#sidebar{
padding-bottom: 5000px;
margin-bottom: -5000px;
}
Further to #Absar 's answer, can I just add my adaptation?
I did this:
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
I did the "101%" thing to cater for the (ultra rare) possibility that somebody may be viewing the site on a huge screen with a height more than 5000px!
Great answer though, Absar. It worked perfectly for me.
For several reasons, this should be solved by using proper CSS and HTML markup, not by Javascript. The main reason is the separation between your site logic and your presentation layer. CSS is just for visual layout, and simple presentation issues should be solved in the CSS domain. This seems to be the case of your question.
I suggest you have a look at this CSS-tricks article. It is both enlightening and thorough.
Hope it helps.

how does accordion works?

I'm not asking how to show/hide content upon click.
All I want to know is how by placing 2 divs, one on top the other, I can get the effect that by clicking on the bottom div, it "closing" the upper div. that's all. Not exactly accordion, but this is enough for my situation.
I tried to achieve this by animating the upper div height to 0, after clicking the bottom div. It works but not smoothly enough. and IE browsers didn't like it:
JQUERY
$('#BottomDiv').click(function() {
$('#UpperDiv').animate({ height: '0px' }, "slow");
});
in the markup side, both divs are position - relative:
HTML
<div id="UpperDiv" style="height:190px; width:100%; margin-top:80px; position:relative">
</div>
<div id="BottomDiv" style="width:100%; position:relative; z-index:10; float:left;" >
</div>
So I was just curious maybe there is a better way to achieve this, like jQuery accordion does it. Smooth and works for all browsers.
Assuming a structure such as:
<div id="accordionWrapper">
<div id="UpperDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
<div id="MiddleDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
<div id="BottomDiv" class="accordionSlides">
<h2>Accordion tab</h2>
<!-- other content, 'p' elements in the demo -->
</div>
</div>​
Then I'd suggest:
$('#accordionWrapper .accordionSlides').click(
function(){
var cur = $(this);
cur.siblings().children().not('h2').slideUp(); // hides
cur.find('p').slideToggle(); // shows
});​
JS Fiddle demo.
References:
children().
click().
find().
not().
slideToggle().
slideUp().
Does this help ?
Markup:
<div id="UpperDiv" style='background:red;height:200px;'>
</div>
<div id="BottomDiv" style="background:Gray;height:200px;">
</div>
Javascript:
$('#BottomDiv').click(function() {
$('#UpperDiv').slideUp("slow","linear");
});
$('#BottomDiv').click(function() {
$('#UpperDiv').css("display", 'none');
});
The simple solution is above, however, more elegant would be to define a css class such as:
.invisible
{
display: none;
}
and you can make something invisible by using the addClass function and you can remove this class by using removeClass from the tag to make it visible again.

Align jQuery List

I'm creating a mobile website with jQuery, and I was wondering if there was a way to align a list to the bottom of a page, I just want the list to stay at the very bottom of the page, and be fixed in the spot. Thanks
This is the list im trying to get fixed on the bottom of the page:
<div data-role="content">
<div class="content-primary">
<ul data-role="listview">
<li><img src="file.jpg" /><h3>List name</h3>
</li>
</div>
What about using position:fixed?
sample: http://jsfiddle.net/zmjhQ/4/
update: revised fiddle
You can use css absolute positioning.
#list {
position: absolute;
bottom: 10px;
}
edit based on your code sample, in jquery:
$('.content-primary ul').css('position', 'absolute').css('bottom', 0);
If you are using jQuery Mobile, you can wrap the element in a div with data-role="footer" and it should do what you want.
See this tut in net.tutsplus.com: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-build-an-rss-reader-with-jquery-mobile-2/
As class of div is CONTENT-PRIMARY so track this div using "". operator of jquery as ::
emphasized text$('.content-primary') and then place the part of css in it as explained by Jake Feasel
One thing make sure the class you specify for catching the div is same as you specify in the property of div class.

Categories