Image that scales so you always can see the whole image - javascript

This is my site where I am testing my project: http://www.rojje.com/. If you want to see what I am trying to achieve then use the username: "test" with password: "password" or create a new user.
The first page after login is a page with a image that I want scalable.
Edit: I found the solution but it only works when I use top:0 and if I remove top:0 it will remove a part in the bottom of the image.
If you remove top:0 you will se whats behind the pic: http://jsfiddle.net/g9hh6qvb/

You can define a background-image in css and set the background-size to 'cover' or 'contain', see for example:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Mind you that the example you give is made using Flash.

Try using background-attachment:scroll, also set the background size with background-size: cover when setting up your style. According to the documentation description it attaches the background to the element itself, so re-sizing the element should re-size the background image also.

You can use the CSS background-size attribute 'Cover' as mentioned, if your image is set as the background of a div. If you are using an <img/> tag in your HTML, you can also (see both examples below):
CSS:
html,body{
margin:0;
height:100%;
}
.section{
width:100%;
height:100%;
display:block;
float:left;
position:relative;
overflow:hidden;
background:purple;
}
.section:first-child img{
position:absolute;
top:50%;
min-height:100%;
display:block;
left:50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
min-width:100%;
}
div:nth-child(3){
background: url("http://th02.deviantart.net/fs42/PRE/f/2009/133/a/0/Rainy_Landscape_STOCK_by_wyldraven.jpg")no-repeat fixed center;
background-size:cover;
}
HTML:
<div class="section">
<img src="http://th02.deviantart.net/fs42/PRE/f/2009/133/a/0/Rainy_Landscape_STOCK_by_wyldraven.jpg">
</div>
<div class="section">
</div>
<div class="section">
</div>
Example: CodePen

Related

Textarea having always window height

I'm not sure how to do this. II'm currently using Bootstrap's textarea, along with its container. I don't know how to make it so that the textarea extends to the bottom of the screen, which automatically increase/decrease depending on the window height. I've tried:
#form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
But nothing seems to change. Does anyone know how I can get this done?
Edit:
This is my html file:
<body>
<div class="container">
<div class="form-group">
<textarea class="form-control" rows="15" id="note"></textarea>
</div>
</div>
</body>
You have to put height property on the element like the code below.
#form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
height:50px;
}
If it doesn't work, try !important. If it doesn't work either, try setting rows in markup and set line-height on CSS.
<textarea rows="4">
.form-control should be a CSS class for bootstrap.
Are you using <textarea class="form-control"></textarea>? If so, your css rule is using #, which corresponds to an element ID, not a class. Change your CSS to this:
.form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
Try this code.
Actually you have used (id) #form-control, which should be (class) .form-control
I've used your code, just added width 100%
Now it'll take height and width of screen.
.form-control {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%
}
<div class="form-group">
<textarea class="form-control" placeholder="textarea"></textarea>
</div>
You can use the height property to set it to a certain height.
You can do something like this:
#form-control {
position:fixed;
height: 200px;
}
or
#form-control {
position:fixed;
height: 50%;
}
Just as a few examples.
I would suggest that you check out this W3 Schools page on the height css property... If you read the page you can see how else you can size it.
On that page there is also a link to this demo which I suggest you try to see what the different "settings" for lack of better word do.
Also make sure that the opening <textarea> tag calls the selector... so it should look something like this <textarea id="form-control">.
Good Luck

How to improve PreLoadMe script to support browsers with disabled JavaScript?

Hi all, this script (by Niklaus Gerber) works, but there's one problem. Once I set it up, it starts from CSS styles by covering whole page with div. Then script comes to uncover fully loaded site, however, it also locks browsers with disabled JavaScript (infinite loading).
Can someone help me to unlock those users, by changing this script or suggest me something more friendly for also those folks? (it's not online yet).
The code is:
$(window).load(function() {
$('#status').fadeOut();animation
$('#preloader').delay(350)\.fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
})
For the HTML:
<div id="preloader">
<div id="status"> </div>
</div>
CSS:
body {
overflow: scroll;
}
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff;
z-index:99;
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
background-image:url(../img/status.gif);
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px;
}
Thanks in advance for any sugestions.
Try this very simple solution
In your js add $('body').addClass('jsSupport');
and in your css hide the preloader by default, so when there is no JavaScript it will not show on screen.
#preloader{
display:none;/*hide when no js*/
}
When JavaScript exist, you can show it on screen using the extra css class.
.jsSupport #preloader {
display:block;/*show when js is supported*/
}
You can see how I set up the code here
Demo
You can disable the browser's JavaScript here to test it out
Full screen demo

Making a scrollable div which doesn't scroll the rest of the body

Should be simple but I can't work it out.
I have two panes on my webpage. I want both to be independently scrollable:
<body>
<div id="sidebar"> ... lots of content ... </div>
<div id="container"> ... lots of content ... </div>
</body>
#sidebar{
width:200px;
position:fixed;
overflow:scroll;
background-color:black;
color:white;
top:0;
left:0;
height:100%;
}
Here is a JSFiddle. Notice how when you scroll to the bottom in the black sidebar, and keep scrolling, the body starts to scroll? That's what I want to avoid. Is there a simple way to achieve this?
Please try following updated CSS. Here I have set 200px height after that it will add scroll bar for #sidebar div.
#sidebar{
width:200px;
position:fixed;
overflow:auto;
background-color:black;
color:white;
top:0;
left:0;
height:200px;
}
Hope it may help.!!
body {
overflow-y : hidden
}
helps you if you don't want body to be scrolled.
This is working if I understood your problem correctly. Just making overflow:hidden when mouse is over sidebar div.
#sidebar:hover + #container{
overflow-y: hidden;
height: some_value; // your window height
}
You´re right. In Chrome it happens.
Maybe some jQuery?
$("#sidebar").focus(function(){
$('body').css("overflowY","hidden");
});
$("#sidebar").blur(function(){
$('body').css("overflowY","scroll");
});
Add tabindex="-1" to sidebar to get this working
Actually Working

filling colors to different HTML shapes

I am applying some images in html code as background image of a div. The image dimensions can change as per user's requirement and images can be of any shape (for example a cloud or a callout or a balloon ). All the applied images are transparent.
Now I want to apply colors to these shapes. If I write background-color to the div / span tag it covers the entire div and I cannot use canvas because image dimensions change.
Is there any way to do it?
Code:
<div style="background-color:blue;height:400px; width:400px;background-size: 100% 100%;background-repeat: no-repeat; background-image: url('cloud7.png'); position:absolute; top:10px; left:10px; height:400px; width:400px;" />
</div>
You can use masks for this. Unfortunately, they're currently only supported in Webkit browsers.
<div style="background-color:blue;height:400px; width:400px; background-size:100% 100%;background-repeat: no-repeat; -webkit-mask: url('cloud7.png'); position:absolute; top:10px; left:10px; height:400px; width:400px;" />
</div>

Dynamic content that changes height depending on header and footer height

I'm trying to make a page that contains 3 elements: Header, footer and content. As the names suggest, I want the header stuck to the top, the footer in the bottom, and the content in between. I have already made a layout, which puts the header and footer where they are supposed to be, but the content either overlaps them, or the other way around, where the content is supposed to get smaller instead.
My problem is that the header and footer are going to be used for many different things, and they are therefore dynamic when it comes to height.
Is there any way to make the content fill what space is left between the header and footer, without overlapping any of them?
If possible I would prefer pure CSS, but if that isn't possible, I'd like a JavaScript suggestion as well. :)
Thanks!
EDIT: This is what I got atm.
<div class="container">
<div id="header"></div>
<div id="footer"></div>
<div id="content"></div>
</div>
CSS:
#content {
position:absolute;
background: url('img/textures/fabric.png');
background-color: gray;
height:auto;
width:auto;
margin:0 auto 0 48px; /* Center content */
left:0;
right:0;
top:0;
bottom:0;
text-align:center;
}
#dashtop {
position:fixed;
width:auto;
background-color:aqua;
opacity: .5;
margin-left: 48px;
top:0;
left:0;
right:0;
text-align:center;
}
#footer {
position: fixed;
margin-left: 48px;
background-color:green;
bottom:0;
right:0;
left:0;
width:auto;
height:auto;
text-align:center;
opacity:0.5;
z-index:0;
}
Use relative positioning both for header and content (no position attribute), and use fixed positioning for the footer.

Categories

Resources