I have content in a div that I am trying to scale according to a user's preferences. I am using Louis Remi's transform.js to do this.
However, when I do, it pushes the content either way above the top of the div (cutting off content on scale in) or way far down the container (leaving a lot of white space on scale out).
I was wondering if there was anyway that I can push content so that it would affix itself to the top of the div?
Here is a jsfiddle example. Right now it is at a .50 scale which shows content being in the middle of the screen leaving a lot of space on top of and bottom of div.
HTML
<div id="reportContainer">
<div id="zoomMe">
<div id="content1" class="fillerBox"> </div>
<div id="content2" class="fillerBox"> </div>
<div id="content3" class="fillerBox"> </div>
<div id="content4" class="fillerBox"> </div>
<div id="content5" class="fillerBox"> </div>
</div>
</div>
CSS
#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }
JS
$(document).ready(function() {
$("#reportContainer").height($(window).height()-50);
$("#zoomMe").css('transform', 'scale(.50)' );
});
A nice person on one of my other questions actually answered this, but since someone up-voted my question I guess I will put it here as well.
There is a great CSS option to append a transformed element. This is what I ended up doing thanks to the help of a fellow stackoverflow'r.
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center;
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 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
Working in a hackathon and we are having an issue with our phone mockup. We want to anchor the text stream to the bottom: seems like a great opportunity for position: absolute...right? Well that makes it so that our scrolling doesn't work. Right now it is anchored to the top, positioned relative, and scrolling does work.
Try clicking the "I said..." button a few times. Ideally those buttons should be anchored (along with the text boxes that appear) to the bottom.
This is the temporary URL:
http://gotinto.com/text/
AND a PERMANENT JS Fiddle URL:
http://jsfiddle.net/Qyn7V/
Here is the simple HTML:
<div class="convoPhone">
<div class="phoneDisplay">
<div class="convoCont">
<div class="actualConvo">...(the actual text convo goes here)...</div></div></div></div>
Any solutions? We would be open to javascript, CSS, any combination. Thanks in advance!
Have you tried position: fixed? Observing your link, as a proof of concept, something like this should do:
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
Edit:
Put three place holder conversations as place holders with visibility: hidden (this ensures they occupy space).
<div class="convoCont">
<div class="actualConvo" style="">
<div class="invisibleFirst">
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
</div>
</div>
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
<div class="isaid textLine">I said...</div>
<div class="tsaid textLine">They said...</div>
</div>
<br class="clear">
</div>
Then for each of the first 3 real entries, remove one of the place holders. If you want more precision, you can replicate the same place holder effect with padding-top on actualConvo. Just reduce the padding-top by a fixed value until it bottoms out at 0. If you want to make the buttons scrollable, just removed the styling and apply the padding-top at a higher DOM level.
I ended up positioning the buttons absolute, then using a bit of jquery/javascript to make a minimum height. Thanks for your help everyone!
var contH = $('.phoneDisplay').css('height');
if($('.convoCont').css('height') < contH) {
$('.convoCont').css('height',contH);
}
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