I have a page that static data in it will push a div down to make it longer. But when I use ajax loaded content then the div will stay as big it originally was and it looks like my new content will just overlap it...
I have a setup like this
<div id="wrap">
<div id="main-content">
<div id="content-fill">
<div id="files_left_pane">static content</div>
<div id="files_right_pane">ajax content</div>
</div>
</div>
</div>
#content-fill {border:1px solid #BDBDBD; width:919px;}
#files_left_pane {float:left; border-right:1px solid #BDBDBD; width:100px;}
#files_right_pane {float:right; widht:819px}
the height of the right pane is controlled by the height of the left pane since there is static content in there, mainly my navigation menu.
any advice?
as far as I test it when you add content then the div start from the left side. This happens because you didn't set width. for example add width:200px for #files_right_pane and check the results.
live example: http://jsbin.com/udori5
Set Your div position as relative
<div id="files_right_pane" style="position: relative;">ajax content</div>
Easiest fix is add float:left to content-fill
Related
I'm trying to make the div not expand over user visibility, but when I dock multiple items in this div, it expands off screen.
Here is an example.
I know, it sounds long, but I was trying to reproduce the entire layout to find the problem.
<body>
<div class="container">
<div class="head"></div>
<div class="main">
<div class="painel"></div>
<div class="dash">
<div class="head-dash"></div>
<div class="content-dash">
<div class="email-list">
<div class="head-content"></div>
<div class="content">
<div class="item"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
https://jsfiddle.net/ricardosc12/rb2kjtfh/12/
change the variable quant -> 50 and you will see the problem
Probably its height setting to 100% ignores its adjacent element, but how can I make it take up the remaining space without expanding later.
As you can see in the example, the email-list class has expanded over content, pushing all the main ones down.
I'm looking for a solution to this using flex, but can you suggest other possibilities.
I looked around but it didn't work.
Make a div fill the height of the remaining screen space
It's not the perfect answer but will solve your problem.
change your height of content-dash to this
.content-dash{
height: calc(100vh - 140px) ;
padding: 25px;
background: #EEEEEE;
}
We will make the content-dash's height to 100vh and subtract the height of head-dash and head from it.
http://pixelcog.github.io/parallax.js/
Hello world! I have a problem with the plugin above. I have managed to make several parallax backgrounds and can fill them with content no problem however in the documentation it mentions being able to use the parallax effect on content using the parallax-layer class and when I add that to my code the entire section becomes blank. When I remove the parallax-layer div my code works again but ultimately I want to affect the content with the parallax effect just as I do with the image. Anyone know what I'm doing wrong? Thanks :)
Heres the html...
<div class="parallax-window" data-parallax="scroll" data-image-src="background.jpg" style="padding:20px 30px;">
<div class="parallax-slider">
<h1 style="color:rgba(255,255,255,1);font-size:10vw;margin:0;padding:0;text-shadow:-10px 10px 15px rgba(20,0,20,1);">Wally Gunn</h1>
</div>
</div>
And the css...
.parallax-window {
min-height: 400px;
background: transparent;
}
I have also pasted this script at the bottom of my body
<script>
$('.parallax-window').parallax({
naturalWidth: 600,
naturalHeight: 400});
</script>
I solved this problem...
Use:
<div class="parallax-window" data-parallax="scroll" data-image-src="https://tse1-mm.cn.bing.net/th?id=OIP.3iTMNkANw-FFI-x8vJqD4wHaDF&p=0&o=5&pid=1.1" data-z-index="-1">
<div class="text">
<h1>Simple Parallax Scrolling</h1>
</div>
</div>
remember to set data-z-index to -1, and elements in parallax-window will be shown.
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/
I'm trying to make a tab menu that sits on the bottom of a div and when a tab link is clicked it slideup with it's content.
Here is what I've got so far. I really can't see why it's behaving they way it is
http://jsfiddle.net/5mVt8/11/
The key bits:
#content {
position: relative;
width:500px;
height:400px;
overflow:hidden;
}
.page {
position: absolute;
left:0;
top:380px;
width:500px;
height:400px;
}
<div id="content">
<div class="page" id="one">ClickPage 1</div>
<div class="page" id="two">ClickPage 2</div>
<div class="page" id="three">ClickPage 3</div>
</div>
Full code here: http://jsfiddle.net/5mVt8/11/
Is these a bug with having a absolute positioned div inside a relative div with overflow? Can anyone tell me why this doesn't work or how I should approval this?
Remove the #one #two #three from your html.
<div id="content">
<div class="page" id="one">ClickPage 1</div>
<div class="page" id="two">ClickPage 2</div>
<div class="page" id="three">ClickPage 3</div>
</div>
Now simply write your animate correctly.
$('.page a').click(function(){
$(this).parent('.page').animate({top:0}).addClass('open');
});
http://jsfiddle.net/5mVt8/18/
EDIT: I am sure you could find a cleaner way to write your CSS. All those absolutes and positioning and z-indexes. I would find a better way to accomplish what you want, but that's me.
You have #content fixed height with overflow:hidden and pages on the bottom partially hidden with this overflow. Now on link click anchor works and #content scrolls down to the hidden block top. You should add return false at the end of click event function to prevent default behavior.
Also you have missed the animate method syntax. It should be like this
$(this).parent().animate({'top': '0px'}, 300, "swing");
http://jsfiddle.net/5mVt8/27/
I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>
I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.