I'm trying to adjust the width of a div that is centred using JavaScript when a menu button is clicked, but when I do the width changes ok but it sets the element about 20px downwards too. This created a large empty gap above contentSectionLeftSide.
Here's what I've got:
function setButtonH(e){
var item = e;
var items = ["menu_item1","menu_item2","menu_item3","menu_item4"];
if(e==items[1])
{
document.getElementById("contentSectionLeftSide").style.width="600px";
document.getElementById("contentSectionRightSide").style.width="300px";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
else {
document.getElementById("contentSectionLeftSide").style.width="45%";
document.getElementById("contentSectionRightSide").style.width="45%";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
}
HTML
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1'), menuGo(1)">
Home
</div>
<div id="menu_item2" onclick="setButtonH('menu_item2'), menuGo(2)">
Interests
</div>
<div id="menu_item3" onclick="setButtonH('menu_item3'), menuGo(3)">
Creations
</div>
<div id="menu_item4" onclick="setButtonH('menu_item4'), menuGo(4)">
Bio
</div>
</nav>
#contentSectionLeftSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}
#contentSectionRightSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}
I think I have a handle on the situation now, and recreating your code locally I did notice a small gap above the left content section.
The problem is that because your divs' content are (probably) resulting in different div heights, the display: inline-block CSS declaration is causing them to be vertically aligned to each other at the bottom baseline, so all you need to do is tell the CSS to align them vertically to the top.
I constructed the left- and right-hand side content areas like this, below the HTML you provided:
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1')">Home</div>
<div id="menu_item2" onclick="setButtonH('menu_item2')">Interests</div>
<div id="menu_item3" onclick="setButtonH('menu_item3')">Creations</div>
<div id="menu_item4" onclick="setButtonH('menu_item4')">Bio</div>
</nav>
<div id="contentSectionLeftSide">Left side content!</div>
<div id="contentSectionRightSide">
Right side content!<br />
There's a little more content in here!
</div>
I also removed the menuGo(#) function from the onClick's, as I didn't know where that functionality went. Side note: be careful here, as in your code above it reads (for example):
onclick="setButtonH('menu_item2'), menuGo(2)"
Where it should be:
onclick="setButtonH('menu_item2'); menuGo(2)"
Which could yield problems down the line.
However, back to the solution, all you need to do is add the line vertical-align: top; to each of your content areas' style declarations, and they'll be aligned to the top, effectively:
#contentSectionLeftSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
#contentSectionRightSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
Here's a working fiddle for you to see it in action. Hope this helps, good luck and keep coding! :)
Related
In my container, there is multiple childrens, one of the 'div' getting appended by content in that.
when the total height of the container(parent) overflows, i would like to add the scroll bar to the div
is it possible to do by css?
here is the html :
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Js :
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
jsfiddle
UPDATE
I don't want to put the over-flow to container, if so my footer will hide. i require my user need to see the add button always. I can't put my button out side of the container again there would be multiple content in to the container
UPDATE
I find a solution by js is it possible to made without using `js'?
jsSolution
Yes, it is possible to do in CSS. Simply add this CSS rule to #container:
overflow-y:scroll;
Alternatively add this to show the scroll bar only when necessary:
overflow-y:auto;
http://jsfiddle.net/doesfmnm/2/
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
.content{
border:1px solid red;
height:300px;
width:200px;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Adding a little more explanation to what #Guy3000 said. You're appending (adding after) into an element with the class 'content'. Let's consider what that means for the parent .container class. By adding content into a div inside of the parent, your parent will need to either grow to compensate for the added content, or it will need to have a y-axis scroll that permits content longer than the height of the container.
This means you can approach the dilemma you're facing by adding height to the container element, or you can keep a fixed height on the container and have a frame with a y-axis scroll bar contain the added content.
Here is the solution i find :
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">
<div class="content"></div>
</div>
<div class="misc"><button>Add</button></div>
</div>
css :
#container { width: 300px; height: 300px; border:1px solid red;display:table;}
#up { background: green;display:table-row;height:0; }
#down { background:pink;display:table-row; overflow-y:auto}
.misc {
display:table-row;
background:gray;
height:30px;
}
.content {
overflow:auto;
height:100%;
}
Live
js solution :
http://jsfiddle.net/doesfmnm/4/
i'm facing to css problem.basically i have main div tag and 3 div s class named pic_con,body_con and msg_con .
div msg_con length and height depend on the text of it.if text is too long it should have morethan one line to display all.look at the picture.first one with small text,second one with big text ..div msg_con have minimem width and maximum width.
i want to position this 3 div look like in the picture.
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con">
<div class="body_con">small icon"</div>
<div class="msg_con">hey this is multiline text</div>
</div>
</div>
my css
.pic_con {
float:left;
background-color:#096;
}
.back_con {
float:left;
background-color:#3CC;
border:5px solid red;
width:150;
}
.body_con {
/*float:left;*/
margin:0 auto 0 auto;
background-color:#C39;
border:5px solid red;
}
i set flote left but it's not work.
As far as I understood you want to align them one after another.
You can manage this, as you tried, by using float: left. Furthermore, you should set the parent div to clear: both.
Another thing that I saw is that you didn't close the pic-con DIVs. Try with this:
HTML
<div id="apDiv1">
<div id="div_id_1" class="msg_w_1">
<div class="pic_con">pic</div>
<div class="body_con">small icon</div>
<div class="msg_con">hi</div>
</div>
<div id="div_id_2" class="msg_w_1">
<div class="pic_con"></div>
<div class="body_con">small icon"</div>
<div class="msg_con"> hey this is multiline text</div>
</div>
</div>
CSS
.msg_w_1 {
clear: both;
}
.msg_w_1 div {
float: left;
}
Edit: I didn't see the updated post containing CSS when I posted this. Try removing the float: left and width from your CSS classes before trying this
use display:table style.
.msg_con {
display : table
}
this makes .msg_con behave like a table element, it will re-size according to its content's length ( both height and width ).
Edit: Added Javascript and Masonry tags. I've been looking at masonry and all my modules are the same size so I'm not sure how masonry can help me as I'm not trying to get different size elements to line up. I'm still looking through masonry tutorials as it's a little confusing at the moment. If this is the fix I apologize for adding the additional tags.
I'm creating three divs offline, issues, and then go. I'm taking what I'm calling modules and placing them within these three divs. When I place more than 3 modules they create another row. Unfortunately my titles don't move with the modules and I have to manually go in and change the margin-top to line everything up. I'm not sure how to make it to where the issue rows will change based on how many modules are in there. Any help would be greatly appreciated.
<div class="grid_17">
<div id="offlinetitle">
<p>System is Offline</p>
</div>
<div id="issuestitle">
<p>System is partially offline or experiencing issues</p>
</div>
<div id="issuescontents">
<a href="#" class="big-link" data-reveal-id="AccessModal" data-animation="none">
<div class="grid_3">
<p id="contexttitle">Access</p>
<p id="accesssubmenu">Last Update: 08/30/2013 5:00pm</p>
</div>
</a>
<div id="AccessModal" class="reveal-modal">
<h1>Access</h1>
<p>This is text to describe something>
<p4>Last Update: 08/30/2013 5:00pm</p4>
<a class="close-reveal-modal">×</a>
</div>
</div>
<div id="gotitle">
<p>All systems go</p>
</div>
</div>
My CSS is as follows grid 17 is the parent container that everything is in then the last container is the actual modules.
.grid_17{
}
#offlinetitle{
color:#FFF;
font-size:25px;
background:#F00;
height: 35px;
text-decoration:none;
list-style:none;
}
#issuestitle{
color:#FFF;
font-size:25px;
background:#FC0;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:15px;
}
#gotitle{
color:#FFF;
font-size:25px;
background:#093;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:535px;
}
.container_24 .grid_3 {
width: 213px;
background:#CCC;
height:55px;
margin-top:10px;
}
If more information is needed please let me know. Thank you for your help!
You need to wrap each "module" (title and contents) in it's own div and then float this parent div to the left. Something like this:
<div class="grid_17">
<div>
<div id="offlinetitle">...</div>
</div>
<div>
<div id="issuestitle">...</div>
<div id="issuescontents">...</div>
</div>
<div>
<div id="gotitle">...</div>
</div>
</div>
With CSS similar to:
.grid_17 { width: 300px; }
.grid_17 > div { float: left; width: 100px; height: 100px; }
Note about clearfix: If you display anything after the grid_17 div, you'll also need to clear the float. I won't go into depth here, but you might want to look up the clearfix class.
I have a small jQuery script to keep the sidebar visible when you scroll down the browser. However, the sidebar can get very long since it will contain filters (dropdowns and checkboxes) so the bottom part gets cut-off.
I'd like to have an effect like on this website:
http://www.lyst.com/
In a way, when the sidebar is long, you are still able to scroll up and down. It will only become fixed when it reaches the bottom/top of the sidebar.
Does anybody know where I can get a script that does this exactly?
Set your CSS and HTML markup in a fashion that you can easy reference the objects you want to avoid collision with. Create conditional statements to compare said references.
Firstly, the working jsFiddle.
The HTML ->
<div class="content">
<div class="main">
Main Content
</div>
<div class="sidebar">
Sidebar
</div>
<div class="footer">
Footer
</div>
</div>
The CSS ->
#content{
position:relative; /* required */
height:2000px;
}
.main{
margin-left:100px;
border:1px solid rgb(120,120,120);
height:1500px;
}
.sidebar{
position:absolute; /* required */
top:25px; /* required -- does NOT need to be this value, however. */
left:5px; /* required -- does NOT need to be this value, however.*/
border:1px solid rgb(8,8,8);
background:rgba(70,70,70,.9);
color:#ecebeb;
width:93px;
}
.footer{
border-top:1px solid #ff0000;
height:498px;
}
The jQuery ->
$(window).scroll(function(){
var dist = $(window).scrollTop();
var sTop = $('.sidebar').position().top;
var mHeight = $('.main').height();
var userDist = 100;
if((sTop > (mHeight - userDist)) && (dist > (mHeight - userDist))){
//the sidebar is pinned now. it won't scroll further.
}else if(dist < (mHeight - userDist)){
$('.sidebar').animate({
top: dist + $('.sidebar').height()
}, 0);
}
});
I'm trying to clone #main then put my ajax result there (hidden), after doing so I will make it scroll horizontally to the left hiding the current one then display the clone.
HTML:
<div class="container">
<div id="main">
<p>Click here to start</p>
</div>
</div>
CSS:
#main{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
}
.container {
position:relative;
}
Javascript:
$('#main').click(function(){
//clone.html(data)
var clone = $(this).clone().html('<p>Ajax loaded content</p>').css(
{position:'absolute',right:'0','margin-right':'-460px',top:0}
).attr('class','love').insertAfter($(this));
$(this).css({position:'relative'});
var width = $(window).width()-$(this).outerWidth()/2;
$('#main').animate({'left':'-'+width},4000);
});
but i'm stuck on the idea on how to make both #main animate to the left and position the second div at the center?
Fiddle
EDIT: Now i'm only stuck on how to animate the clone.
I sort of took a different approach to your question, is this kind of what you are looking for?
http://jsfiddle.net/3s7Fw/5/show
I thought, rather than do some animating ourselves, why not let jQuery's hide function do it for us? This could definitely be made to work better, but it communicates the thought.
JavaScript
$('.container').on('click', '.loaded-content', function(){
$this = $(this);
//clone.html(data)
var clone = $this.clone().html('<p>Ajax loaded content</p>').attr("id", '');
$this.after(clone);
$this.hide('slow');
});
HTML
<div class="container">
<div id="main" class="loaded-content">
<p>Click here to start</p>
</div>
</div>
CSS
#main, .loaded-content{
width:460px;
min-height:200px;
background:#3F9FD9;
margin:0 auto;
float: left;
}
.container {
position:relative;
width: 920px;
}
If this is not the desired functionality, then you might be interested in a slider. There are a number of good slider plugins already out there that you can use. The difficult part would probably be adding a addNewSlide function to your chosen slider, assuming it didn't already have one.