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.
Related
My page for a clone script can be found at https://jsfiddle.net/k68dm4wj/
The problem is getting the text and image for a DIV to align next to the image with a small amount of space between the top and next to the image, like this example.
This is my code, taken from the JSFiddle above:
<div class="card">
<img class="listing-main-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg/880px-Audi_A6_Allroad_Quattro_C8_IMG_1975.jpg">
<div class="card-info">
<h2 class="listing-title title-wrap">Audi A6 Allroad Sport 55 TFSI 340PS 3.0</h2>
<p class="listing-attention-grabber ">BRAND NEW 2020 CAR</p>
<ul class="listing-key-specs ">
<li>2020 (20) reg</li>
<li>Estate</li>
<li>40 miles</li>
<li>3.0L</li>
<li>339BHP</li>
<li>Automatic</li>
<li>Petrol</li>
<li>1 owners</li>
</ul>
<ul class="listing-extra-detail">
</ul>
<p class="listing-description">2020 (20) reg, black, 40 miles £46,796</p>
<div class="seller-info ">
<div class="phone-code">
Tel: (0114) 49600000
</div>
<div class="seller-type">
Trade seller
</div>
<div class="seller-location">
<span class="seller-town">Sheffield</span> -
43 miles away
</div>
</div>
</div>
<section class="price-column">
<div class="vehicle-price">£46,795</div>
</section>
</div>
Although my code works properly, getting it to look similar to the page I linked to - at least for the DIV part of my code is the main problem. This relates to where I have .
There is also a second problem; I want to include smaller images and allow the user to scroll through them with jQuery or javascript, but the main image in remains the first one; also, how to include a logo after the images at the end like in the linked-to page (if there's one needed; not every div will need a logo).
Like this:
This is the intended end result:
I should add, the JSFiddle linked to has one large CSS file in there, when I've actually got three separate files - one for the layout, one for basics, and one for webfonts. For JSFiddle, I had to condense it into one CSS file there; the original file has CSS links in the header.
I would really appreciate any advice or guidance on making this look better.
Try using overflow: hidden in .layout{}. Also use "white-space: nowrap" in unordered list.It will not wrap your content on next line.For example:
.layout{
//rest of the styling here ....
overflow: hidden;
}
.ul{
//rest of the styling here ....
white-space: nowrap
}
.card-info
{....}
.card-price
{
padding: 1rem;
font-size: 0.9rem;
}
In Your CSS Change the padding of card-price from 2rem to 1rem
check the space in the image
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 am writing a code for "Contact us" page of our website. Now I want my details on the left side and the address map (which i copied from google maps) on the right side of the website. But the map image is on the top side of the page and the details on the bottom of it. How can i resolve this??
Here's the code:
<html>
<div class="scroll">
<div class="child"></div>
</div>
<address style="font-weight: bold">
<h4> " " </h4>
<h4>Mark Doug</h4>
<p>Mark.doug2010#abcd.in</p>
<p>H-445,Silver square street<br /> </p>
<p> CA</p>
</address>
<style>
.scroll{
overflow:scroll;
width:500px;
height:357px;
margin-left:682px;
margin-bottom:700px;
margin-top: 0px;
}
.child{width:1000px;height:1000px;background-image:url(vit.png);}
</style>
</html>
Also, when i try to get the "vit.png" image to top, the text automatically goes to the bottom side.
I have tried putting div class="scroll" inside the address tag but still the same result.
Try using the css rule .element {float:left} but also specify a width because by default your content width is 100%. so it should be something like .element {width:400px; float:left}
Hope it helps
I have an application in which I am kind of stuck.
i have created a widget which needs to be placed in such a way that it needs to auto place itself.
Eg:
I have something like this on a page, now initially all these are arranged perfectly(horizontally aligned), but as soon as the size of one of the component changes
Eg:
It becomes like this. What I want is it auto adjust itself to consume the empty spaces.
I played around with the css to make it float :left and display: block, by which I am able to align each component horizontally, but still I am not able to utilize the space on my page.
Any help is appreciated
a CSS only solution:
taken you want to have 3 "connection" items per row this should be your CSS:
#wrapper{
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
.itm{
display:inline-block;
width:100%;
border-top:1px solid red;
border-bottom:1px solid red;
margin-bottom:1em;
}
.itm:nth-child(3n+1){
clear:left;
}
and this your HTML
<div id="wrapper">
<div class="itm">
<h1>connections a</h1>
<div class="info">
<span class="label">server</span>
<span class="value">100</span>
</div>
</div>
[... copy paste as many "itm"s as you need]
</div>
See here a fiddle with "add more items on click" to see the result -- old -- http://jsfiddle.net/5FsLm/ -- old --
UPDATED fiddle http://jsfiddle.net/c2nkn/
This is definitely a perfect case for jQuery Masonry. The plugin can automatically arrange columns so they can fit together. Something like this:
html
<div id="wrapper">
<div id="list">
<div class="item"> ... </div>
<div class="item"> ... </div>
<div class="item"> ... </div>
<!-- ... -->
</div>
</div>
jquery
$(window).load(function(){
$('#list').masonry({
itemSelector: '.item'
});
});
P.S.: At the moment, the official website is down for some reason, I will put a temporary link here.
UPDATE: Temporary link for jQuery Masonry (actually from cutestpaw.com which has a local copy of it, so if you want to test it, you should copy the file instead of linking to it)
If you dont want much animations and need a script that very easy to understand and satisfies your purpose try jquery.popbild.js.
You can download the project from :http://funscripts.popbild.com/jquery_popbild/
Its mainly created to arrange element in the pinterest style for three columns(uses three divisions)
If I'm understanding you correctly, it looks like what you really want is a three column structure for these widgets. In which case it would look something like this.
HTML
<div class='three-column'>
<div class="widget">...</div>
<div class="widget">...</div>
<div class="widget">...</div>
</div>
<div class='three-column'>
...
</div>
<div class='three-column'>
...
</div>
CSS
.three-column {
width: 30%;
padding-right: 3%;
float: left;
}
UPDATED: http://jsfiddle.net/cBgj4