I have read a bunch of forums on this but none have solved my problem. I'm sure its something small I'm missing
Here is iscroll initialization:
// make PI scroll
piScroll2 = new iScroll('pi_scroll2');
Here is my css:
.pi_panel.large .content{
position: absolute;
width: 963px;
height: 616px;
top: 65px;
left:30px;
background:none;
/*background:url(../images/ISI_body.png) repeat-y;*/
overflow:scroll;
-webkit-border-radius: 0px;
}
#FullPiWrapper
{
position:relative;
z-index: 1;
overflow:hidden;
top: 60px;
width:980px;
height: 610px;
}
.pi_panel .pi_box{
padding: 0px;
margin: 20px 0px;
}
Here is my html:
<!-- BEGIN: PI PANEL LARGE -->
<div class="pi_panel large">
<div class="topBarPiFull">
<div class="title">Full Prescribing Information</div>
<div class="close_button_fullpi">Close</div>
<div class="annotated_pi_button">Annotated PI</div>
</div>
<!-- <div class="popContent"></div>-->
<div class="content" id="FullPiWrapper">
<div id="pi_scroll2">
<div class="pi_box" >
<img src="_globals/images/PI/pi_1.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_2.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_3.png"/>
<img src="_globals/images/PI/pagebreak.png"/>
<img src="_globals/images/PI/pi_4.png"/>
<img src="_globals/images/PI/pagebreak.png"/>
<img src="_globals/images/PI/pi_5.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_6.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_7.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_8.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_9.png"/>
<img src="_globals/images/PI/pagebreak.png" />
<img src="_globals/images/PI/pi_10.png"/>
</div>
</div>
</div>
</div>
<!-- END: PI PANEL LARGE -->
Issue was, you cannot have ANY parent's div class display set to 'none' when the page first loads. So I set 'pi_panel large' to display: 'block';
Make sure that the container's height exceeds the wrapper's height i.e. don't make height:100%. For example, if the wrapper contains a container, and there are 10 divs in the container:
If Each of the divs is 100px the wrapper might be 150px. Then Container has to be 1000px (not 100% !)
give a height to your wrapper, it just worked for me.
.wrapper1 {
position:absolute; z-index:1;
top:250px; bottom:0px; left:3%;
margin-left:25px;
width:100%;
background:none;
overflow:auto;
height:100px;
}
To get around the "div display none" issue, do the following after loading the data in your grid, div, etc:
myScroll.refresh();
myScroll.scrollTo(0, 0, 1000);
Where myScroll has been loaded:
var myScroll = new iScroll('friendsWrapperDrug', { desktopCompatibility: true, vScroll: true, hScroll: false, hScrollbar: false, lockDirection: true });
myScroll.refresh();
myScroll.scrollTo(0, 0, 0);
This problem occurs when you have a container div for your wrapper The fix for this is to set the height of the container to 99%.
Following is the CSS which finally fixed this issue for me:
#productsScreen{ /* my container */
height: 99%;
z-index: 1;
top: 0px;
left: 0;
overflow: auto;
}
#productListWrapper{
background:transparent;
position:absolute;
z-index:1;
top: 88px;
bottom:49px;
left:0;
width:100%;
overflow:auto;
}
#productsListScroller {
position:absolute; z-index:1;
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
Hope that helps!
Another solution that works for me is wrapping iScroll init function with setTimeout. This will give some time for the browser to render the element before iScroll is applied.
Related
I'm at a project where I need all images within a div to be placed at the same place for an animation where I've put the images to be absolute to stack on top of each other though this interupts the rest of the code when scaling the page.
Example start -
HTML
<div class="a b">
<div class="c d">
<div class="e">
<img class="f" src="" alt="image"/>
</div>
</div>
<div class="c d">
Some content
</div>
</div>
CSS
.a {
clear: both;
padding: 0px;
margin: 0px;
width: 100%; }
.b:before,
.b:after {content:""; display: table; }
.b:after {clear:both; }
.c {
display: block;
float: left;
margin: 1% 0 1% 0%;
}
.d {
margin: 0;
padding: 0;
width: 50%;
}
.e {
position: relative;
margin: 100px auto;
width: 100%;
max-width: 640px;
height: auto;
max-height: 640px;
vertical-align: center;
}
.f {
position: absolute;
margin: 0;
padding: 0;
}
Example end -
As said this works great on fullscreen but when resizing the second class="c d" appears overlapped by the first class="c d" and I would like them to be stacked underneath eachother instead as the did before I created class="f", is there any way to do this with pure css?
to make child absolute within parent you need to wrap the child with div with position relative.
for elements with position set to relative or absolute there is no direct way to prevent them from over layering, you can prevent them by calculating left and top values.
a work around is to use a blocking div. do that wrap your absolute positioned element with normal div and set its height to a value suitable to your needs check this plunker.
note the div with .absolute-parent class
also note the div with .blocking-div class
check this plunker
https://plnkr.co/edit/dT1cC8YAY1ENYfhRvncs?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Absolute Positioning</h1>
<div class="absolute-to-page">
to page
</div>
<div class="my-cont">
<div class="blocking-div">
<div class="absolute-parent">
<div class="absolute-to-parent">
to parent
</div>
<div class="absolute-to-parent obj-2">
object two
</div>
</div>
</div>
<div class="absolute-parent">
<p>Some other content</p>
</div>
<div>
<p>Some other content 2</p>
</div>
</div>
</body>
</html>
and the css code
/* Styles go here */
.my-cont{
border:1px solid blue;
min-height:400px;
margin-top:200px;
}
.absolute-to-page{
position:absolute;
width:40px;
height:40px;
background:green;
top:0;
}
.absolute-parent{
position:relative;
}
.absolute-to-parent{
position:absolute;
width:40px;
height:40px;
background:red;
top:0;
}
.obj-2{
left:50px;
}
.blocking-div{
height:40px;
}
I want to make all the images aligned properly if anyone can help it will be greatly appreciated all the images are 100% the same size so its not that problem
.box {
float: left;
width: 20%;
padding-bottom: 20%;
}
.top-left {
position:absolute;
top: 10px; left: 10px;
width: 50%;
overflow: hidden;
}
.top-right {
position:absolute;
top: 10px; right: 10px;
width: 50%;
overflow: hidden;
}
.bottom-left {
position:absolute;
bottom: 10px; left: 10px;
width: 50%;
overflow: hidden;
}
.bottom-right {
position:absolute;
bottom: 10px; right: 10px;
width: 50%;
}
#media only screen and (max-width : 480px) {
.box {
width: 100%;
}
.box a{
position: relative;
}
.top-left, .top-right, .bottom-left, .bottom-right {
width:100%;
}
}
<!Doctype html>
<html>
<head>
<title>DelUZens</title>
<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
<link href="main.css" rel="stlesheet" type="text/css">
<style>
.wrap {
overflow:hidden;
}
</style>
</head>
<body bgcolor="black">
<div class="section-links">
<div class="wrap">
<div class="box">
<a href="teams.html" class="top-left">
<img style="width: 100%;" style="height: 100%" src="icon1.jpg" alt="">
</a>
</div>
<div class="box">
<a href="store.html" class="top-right">
<img style="width: 100%;" style="height: 100%" src="icon2.jpg" alt="">
</a>
</div>
<div class="box">
<a href="sponsors.html" class="bottom-left">
<img style="width: 100%;" style="height: 100%" src="icon4.jpg" alt="">
</a>
</div>
<div class="box">
<a href="aboutus.html" class="bottom-right">
<img style="width: 100%;" style="height: 100%" src="icon3.jpg" alt="">
</a>
</div>
</div>
</div>
</body>
</html>
So if you can see at the top the pointy end isn't exactly touching the other one same with the two sides
Kind Regards
CreepyC
Greatly Appreciated
You're setting the height and width of the <a> elements to 50% but then you're positioning them 10px from each edge, which means they overlap.
You can use CSS calc() to size the images to 10 pixels less than 50% to compensate:
width: calc(50% - 10px);
(note the spaces are important, don't leave them out).
calc() is relatively new, so check http://caniuse.com/#feat=calc for browser support if it's a concern.
I believe the best way is using bootstrap grid system with rows
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
If you have two pictures in each row you put a class col-6 in each( they columns have to add to 12) and it also has responsiveness with other class names.
or using css with flex
http://www.w3schools.com/cssref/css3_pr_flex.asp
Also here is a fun-page with a game to better understand flex and its features
http://flexboxfroggy.com/
if you want all image 100% height and width of the screen then use 100vh.
ex : -
.class{ height:100vh; width:100%; margin:0; padding:0; }
if you want starch free images in your website fix height / width ( on your requirement ) using px / % ..
ex : -
.class{ height:200px; width:auto; margin:0; padding:0; }
i fixed height , same for if you want fixed width.
My html:
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/ef/1e/45/ef1e450945a5a7ff0c4b7776810d4f90.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/0e/3b/85/0e3b858ffcfdbfa02b562c3dc7e3b5e1.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/df/c7/88/dfc7889e5dd99ad0c45834b4e4675389.jpg" alt="my img" />
</div>
My css:
.wrapper {
margin: 0;
padding: 0;
}
.scale-img {
transform: scale(0.5);
transform-origin: top left;
}
In my page I have several imgs, and each of the img's size is different, I don't want to set size in css for each img, and I just want to scale each img to half of its original size. But the wrapper div stay the img its original size, I don't know where go wrong?
Try this... For better understanding, I have used a dummy image.
.wrapper {
margin: 0;
padding: 0;
border: 1px solid #000;
position:absolute;
}
.scale-img{
width:100px;
height:100px;
position: relative;
}
<div class="wrapper">
<img class="scale-img" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" alt="my img" />
</div>
The reason transform doesn't affect the parent is because it "modifies the coordinate space of the CSS visual formatting model".
So in effect, it's sort of like doing this:
#container {
height:200px;
width:200px;
border:1px solid;
position:relative;
}
#container span {
background:red;
position:absolute;
top:50px;
left:50px;
right:50px;
bottom:50px;
}
<div id="container">
<span></span>
</div>
In an attempt to fix your issue, you'll more than likely need a bit of JavaScript:
var objScaleIMGs = document.querySelectorAll('img.scale-img') // Grab all the images that need scaling.
for (var i = 0; i < objScaleIMGs.length; i++) { // Loop through all the images, setting their dimensions half of what they currently are.
var h = objScaleIMGs[i].height;
var w = objScaleIMGs[i].width;
objScaleIMGs[i].height = h / 2;
objScaleIMGs[i].width = w / 2;
}
.wrapper {
margin: 0;
padding: 0;
border: 1px solid;
float: left;
}
.scale-img {
float: left;
}
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/ef/1e/45/ef1e450945a5a7ff0c4b7776810d4f90.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/0e/3b/85/0e3b858ffcfdbfa02b562c3dc7e3b5e1.jpg" alt="my img" />
</div>
<div class="wrapper">
<img class="scale-img" src="https://s-media-cache-ak0.pinimg.com/736x/df/c7/88/dfc7889e5dd99ad0c45834b4e4675389.jpg" alt="my img" />
</div>
You should transform the wrapper instead if you want to change the div's size with the change in img original size. The reason being that scale is used for img and not for wrapper div.
.wrapper {
margin: 0;
padding: 0;
height: 960px;
width: 540px;
}
.scale-img {
height:100%;
width:100%
}
You should refer: CSS Transform with element resizing
The problem I noticed is that when element scales, browser change its pixels ratio, not pixels amount. Element is smaller but it doesn't change its actual pixel size in DOM. Because of that I don't think that CSS-only solution exist.
I want to put one Image over other Image.
Following is my code :
<div style="position: relative; left: 0; top: 0;">
<img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
<img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />
</div>
css :
#image1
{
top: 0; left: 0;
position:relative;
z-index:2;
}
#image2
{
position:relative; left:-70;
z-index:1;
}
fiddle for that
I want that when I make width or height increase of second image it also increase of first automatically. I want to put image 2 over image 1.
Any Guidance Please.
You may use margin-left in #image2
#image1 {
top: 0; left: 0;
position:relative;
z-index:2; }
#image2 {
position:relative; left:-70px;
z-index:1;
margin-left: 25px;
}
Check the fiddle: http://jsfiddle.net/r5JMM/5/ for your answer
#image1{position:absolute;}
#image2{position:absolute;resize:both;}
.container{position:relative;}
<div class="container">
<img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
<img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />
</div>
You can use jquery resize for doing resize operations on images
I have a simple webpage consisting of 3 DIVs. I need a descent CSS styles that would do the following:
top and bottom divs have to be of fixed minimal width (e.g. 20 px, if not possible, down to 0 px).
middle div should be of fixed width, eg 1000 x 700 px.
When I set fixed width/height for every div, everything is fine except the screen is not stretching. If I set top and bottom divs height to auto, I have second (fixed size) div to be attached to the top side of the screen, and top div size is 0, also bottom size di is strange size.
HTML code with all CSS attributes:
<body style="background-color:#030303; margin:0px; padding:0px;">
<!--head-->
<div style="margin:0 auto; width:100%; height:auto; border:0px solid red; background-color:#181818; position:relative;">
(some images)
</div>
<!--gallery-->
<div id="galleria" style="height:700px;width:1000px; margin:0 auto; border:1px solid green; ">
<img src="img/thumb1.jpg" data-title="My title" data-description="My description">
<img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description">
</div>
<!--footer-->
<div style=" margin:0 auto; top:0px; width:100%; height:auto; position:relative; border:1px solid red; line-height:128px; background-color:#181818">
<div align="center" >
(some images)
</div>
</div>
</body>
Your question is a bit confusing (when you say width, do you mean height?). If I understand right, you want the three divs to add up to the total height of the viewport. I know of two ways to do this -- with absolute positioning or with display: table styles. In my experience, the first is more efficient.
<div id="topbar">Top</div>
<div id="mainarea">Middle</div>
<div id="footbar">Botton</div>
#topbar, #mainarea, #footbar { position: absolute; overflow: auto; }
#topbar { height: 20px; top: 0; left: 0; right: 0; }
#mainarea { top: 20px; left: 0; right: 0; bottom: 20px; }
#footbar { height: 20px; left: 0; right: 0; bottom: 0; }
If you want to actually assign a width, too, then get rid of the 'right' styles and assign the same width to all three (it's generally unwise to force a width on people, though).
First lets get the styling out of your HTML and into a proper CSS format. Next I stripped the HTML down to a simple form so you you can help define your question better:
http://jsfiddle.net/HF6Cc/
HTML:
<body>
<!--head-->
<div class="head">header</div>
<!--gallery-->
<div id="galleria" class="middle">
<img src="img/thumb1.jpg" data-title="My title" data-description="My description">
<img src="img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description">
</div>
<!--footer-->
<div class="footer">footer</div>
</body>
CSS
body { width:1000px; margin:0; padding:0; }
.head { margin:0 auto; background-color:orange; }
.middle { margin:0 auto; background-color:lime; }
.footer { margin:0 auto; background-color:yellow; }
Now, what exactly are you looking to do with this layout?