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/
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.
My problem is I would like a set of side by side divs. These divs can grow to an arbitrary height so vertical aligning is important. As suggested by another SO post, in order to tackle the vertical align problem I have a structure similar to this. Please help me fill in the blanks.
<div id="main-container">
<div class="formatter">
<div class="content1">
<!--- I am fixed at 200px ---->
</div>
</div>
<div class="formatter">
<div class="content2">
<!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. --->
</div>
</div>
<div class="formatter">
<div class="content3">
<!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
</div>
</div>
</div>
Display within the browser:
CSS:
#main-container {
width: 900px;
}
.formatter {
display: inline-block;
vertical-align: middle;
}
.content1 {
float: left;
width: 200px;
}
You need to declare them as table-cell.
Lets try an unorthodox approach
Auto width and vertical alignment becomes very easy using CSS flex display
Code to get your basic layout, vertical and horizontal alignment (withour padding or borders or text-alignment)
<div id="main-container">
<div class="content1">a
<!--- I am fixed at 200px ---->
</div>
<div class="content2">bbb
<!--- I have a rendered element. I don't know exactly how high or wide I am, but I'm not going to take up the whole thing. --->
</div>
<div class="content3">c
<!--- I have some text and just want to take up the rest of the main container less padding and borders ----->
</div>
</div>
#main-container {
width: 900px;
display: flex;
}
.content3 {
flex-grow: 1;
}
.content1 {
width: 200px;
}
Fiddle - http://jsfiddle.net/n3CwB/
Now you may want to retain your original HTML structure if you want more control of the alignment of the content (like vertically align middle the content), but this should get you started with the basic layout.
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.
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