There's a nice javascript library for displaying photos on iPhone called "jaipho". I'm trying to adapt its slider implementation to work in a normal browser, and I'm having some problems.
Here's the summary of how its slider works: there's a table of images arranged horizontally. The table is contained in a div which has overflow:hidden, and then some javascript moves the table by setting its marginLeft to some negative number.
More specifically: the table is placed inside the div by setting its innerHTML in javascript. Each table cell is of class "slide", which is set by CSS to be the width of the iPhone. The photos are dynamically placed in the table cells by calls to appendChild, so that they need not all be loaded at once.
It works great on the iPhone in MobileSafari. With the photos arranged horizontally, one can slide out of view to the left while the next one slides in from the right.
Now I try to get it to work on a Mac in a browser window. The problem is getting a constant width for each cell -- I can't use CSS because the width I want is window.innerWidth, not a fixed width like the iPhone. I've tried setting the table cells with "width" tags (or "style" tags) to the width of the window. Looking at what Chrome thinks is going on in its Javascript Console, it's as if the table is ignoring the effort of the cells to set their width, and rather the table is setting their widths to be very narrow in an effort to entirely fit inside the window. (Or into its containing div, even though it's set to "overflow: hidden".)
Anyone have any suggestions how to coerce a table into being very, very wide in pixels, even though only some small part of it will ever be shown at a time?
Thanks,
Dave
I recently built something like this, and here is the structure:
<div id="outer_container" style="width: 500px; height: 100%; position: relative; overflow: hidden">
<div id="slider" style="width: 5000px;">
<div id="slide1" style="float: left; width: 500px;">...</div>
<div id="slide2" style="float: left; width: 500px;">...</div>
<div id="slide3" style="float: left; width: 500px;">...</div>
<!-- add as many as you want, just make sure it fits in the 5000px width above -->
<div style="clear: both;"><div>
</div>
</div>
Then the slider works by adjusting the css left property of the the 'slider' div. So basically the viewing window is 500px as well the width of each 'slide'. I guess the key is the float: left on each slide.
To see this div structure in action, check out the top section in the right column that I coded on this site
In order to get the cells to take the proper width, you have to adjust the table width to accommodate all those cells. Take a look at this fiddle: http://jsfiddle.net/USRww/1/. I'm resizing the table to accommodate all cells, assuming that each cell will be 100% of the browser window's width. I'm using percentages there, so everything is fluid.
That markup is using a table as you suggested, but I'd advise just using a container div there with a bunch of floated divs for each cell.
Related
I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here
You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}
What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page
I was practising with the Bootstrap 3 css. I planed on having a fixed footer and a fixed navigation bar on my webpage. So to do this I used margins of 5% to make the content in the middle of my page to not be covered by the footer or header. To format the text I am using the container class which comes with bootstrap. This can be seen in the picture below.
This looked as it should. However I soon discovered that when the width of the page is expanded it increases the margin size. Like in the picture shown below.
So is there a way to limit how much the margins can extend on the container class in bootstrap. For example something similar too
.addThisClassToTagWithClassContainer {
max-margin-top:5%;
max-margin-bottom:5%;
max-margin-left:5%;
max-margin-right:5%;
}
There is a copy of the files here if you believe this is a coding error that I have made.
This isn't exactly a bootstrap issue - when you set padding and margin as a % value, like in your example, the % is calculated from the width of the containing element. If you want to set a fixed height, you can use px, or if you want it to be a consistent size relative to the height of the viewport instead, you can use vh (5vh is equal to 5/100 -- or 5% -- of the viewport height).
Typically, this would be a case for px simply because on a small screen, 5vh could be very small, and usually a navbar, for instance, would stay a pretty consistent size regardless of how tall the window is.
So something like this is probably your most likely approach:
.page-body {
margin-top: 100px; /* some number equal to the height of navbar */
margin-bottom: 150px; /* some number equal to the height of footer */
}
But if you do actually want to have it be relative to the height of the window, you can do this (You will probably need a higher number than 5, here to make similar to your screenshot.):
.page-body {
margin-top: 5vh;
margin-bottom: 5vh;
}
You should find either approach will prevent your margins from changing when the width of the page changes.
The container class is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.
If you want to work with the full width of the screen, use .container-fluid:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
</body>
this is the code for two divs placed side by side such that on minimizing the first div the second should automatically occupy the remaining space. When the first div is brought back to original position, the second should automatically reduce its size.
One more constraint here is that, the sizes of the divs are not fixed by pixels, they are infact had to be mentioned as percentages. Can any one help in this regards?
<div id="parent" class="parent">
<div class="left"><button class="collapse-expand"></button></div>
<div class="right">
<!--<button class="collapse-expand"></button>-->
</div>
Demo here: http://jsfiddle.net/rams10786/wrv8r91r/
I think I have acomplished what you want by not floating the right div and setting it to always 100%.
.right{
height: 100%;
width: 100%;
background-color: #67b168;
}
Also I commented the size change in the jquery code:
if($('.left').css("width")=='37px'){
$('.left').animate({width:"20%"});
// $('.right').animate({width: "80%"});
}
This is the updated code: http://jsfiddle.net/jfpamqb7/1/
I have a header banner with two div and set the min-width as 770px so as not to allow the second div to go to second line when browser resizes.
<div style="min-width:700px;">
<div style="float:left;">Content1</div>
<div style="float:right;">Content2</div>
</div>
I have also set a margin with margin:30px 10% 0 10%; to make spaces.
But my problem is when the browser resizes elements come near and the margin at the left side is still 10% and the margin is not reducing.It reduces until browser comes to 770px but after that element does not move.If i reduce the min-width the second div goes to second line.
How to implement this feature.Plz help me.Jquery,Javascript anything?
Consider using Twitter-Bootstrap, their FluidGridSystem works pretty well for dynamic resizing of pages.
I have two layout elements lets say one is 33%, the other 66%. They both use 100% of my screen size (So it is dependent on browser window). The smaller element also has a min-size property, so it cant fall below 250px;
Now if the layout is at least 757px large (so the size where the min property doesn't apply) everything looks fine. If the layout falls below the 757px the second element starts to overflow since it still takes the 66%, so the sum of both layouts exceeds the 100%.
I made some graphics to show the behavior:
Layout 1000px not overflowing:
Layout 500px overflowing
Is there a solution to prevent the overflow (not overflow: hidden) so the second element takes only the remaining space when the first element reaches it's min width.
Also JavaScript shouldn't be used excessive!
Regards, Stefan
Sure, this is actually pretty easy and requires a very minimal amount of code:
HTML:
<div class="sidebar">
...
</div>
<div class="content">
...
</div>
CSS:
.sidebar{
float: left;
width: 33%;
}
.content {
overflow: hidden; /* Ensures that your content will not overlap the sidebar */
}
You can view the live demo here: http://jsfiddle.net/7A4Tj/
Edit:
If you're trying to achieve a site layout that has equal-height background images for the sidebar and content, all you need to do is wrap both those elements in a containing div and use the Faux Columns technique.
Try using the following for the second widget:
position: fixed;
right: 0;
Here´s my five cents
min-width on both divs
and a wrapper that also has min-width, plus both of the divs having percentage width
JS fiddle code
PS seems to be working fine in IE8
PPS Also do check out #media queries if you want to have conditional CSS rules on different window sizes, might be helpful. Will run on browsers supporting CSS3: CSS Media queries at CSS Tricks