Show a large image that can scroll into a smaller viewport - javascript

I need to show a large image into a smaller div, enabling scrolling horizontally to view it. The outer div should extend up to the viewport size (which can be variable, depending on devices), but not more than it.
I have tried this way:
#outer-div {
max-width:300px; //just a guess, but I need the exact viewport size here
overflow:auto;
}
img {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
}
<div id="outer-div">
<img name="slideImg" src="https://socrates.dyndns-server.com/meteosurf/previsioni/0000.GIF" border=0>'
</div>
with no luck...
This is the JSFiddle.

All you need to do is constrain the size of the image container element (I assume outer-div here) and then set that container's overflow.
To set the max-width to the viewport width, use: max-width:100vw;
$(function(){
var imgWidth = document.querySelector("#outer-div img").width;
// Scroll the container 1/2 the width of the image
$("#outer-div").scrollLeft((imgWidth - $("#outer-div").width()) / 2);
});
#outer-div {
max-width:100vw; /* No wider than 100% of the viewport width */
overflow-X:scroll; /* show scroll bar for horizontal scrolling */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer-div">
<img src="http://study.com/cimages/videopreview/types-of-weather-maps-imagesscreen_169365.png">
</div>

Related

Sticky element doesn't work well with scale

I have a div element which is set to 'sticky' to top of its parent div. The parent div is inside a div which is scaled. While everything works as expected if scale is set to 1, the sticky element doesn't stick if the scale is set to non 1 values, such as 1.5 or 0.5.
Please see the code here:
.scale {
height: unset;
transform: scale(1.5);
transform-origin: left top;
width: calc(66.6667%);
}
.container {
height: 1200px;
border: 1px solid;
}
.sticky {
position: sticky;
top: 0;
z-index: 1;
background: red;
}
<html>
<body>
<div class='scale'>
<div class='container'>
<div class='sticky'>
I should stick to top
</div>
</div>
<div>Other parts needed to scale</div>
</div>
</body>
</html>
If we set scale to 1.5 (transform: scale(1.5)), the sticky element is moving to the bottom as I scroll the page. If I set scale to 0.5, it will just scroll off the screen. If it's set to 1, everything works fine.
I am wondering how to keep both the 'sticky' and 'scale' working in this scenario. Thanks for any help!
The problem is that you're scaling the parent div, if you use 1 as a scale then the sticky div will move by 1:1 ratio
1.5 as scale will be 1.5:1 ratio so when you scroll by 100px, the sticky div will move 150px, making it go down
0.5 as scale will be 0.5:1 so it so it will move by 50px if you scroll down 100px, making it look like it's moving up

Image side of width 100% of div and fix height for responsive website

I am working on an ASP.NET MVC website. The landing page is slit into 4 divs:
Header div (where navigation bar is)
Image slider div (where I need to slide images)
Body div (contents of main body)
Footer div
Now the width and height of the image slider div is calculated on load or resize time and adjusted to cover the whole screen.
jQuery to adjust block height and width to 100% of the viewport:
$(window).bind('load resize', function () {
$("#nivo-slider").nivoSlider();
var viewport_height = $(window).height();
var viewport_width = $(window).width();
var bodyTopPadding = $("body").css('padding-top').replace(/[^-\d\.]/g, '');
$("#BannerImageSlider").css("height", ( viewport_height - bodyTopPadding )+ "px");
});
Image slider div:
<div id="BannerImageSlider">
<div class="slider-wrapper theme-default">
<div id="nivo-slider" class="nivoSlider" style="width: 100%">
<img src="~/Graphics/Images/slider1.jpg" alt="" />
<img src="~/Graphics/Images/slider2.jpg" alt="" />
<img src="~/Graphics/Images/slider3.jpg" alt="" />
</div>
</div>
</div>
My issue is the image height. I can manage the width as I am using Nivo Slider plugin, but the height goes over or small depending on screen size. I am working on image with 1400 X 900 resolution.
I want like this: http://www.coffeecreamthemes.com/themes/jobseek/demo2/
I have bought Slider Revolution but this is for Wordpress. Secondly I cannot find related jQuery and CSS files in the download bundle.
I need the solution, I am not sure of how to achieve this behavior.
This CSS should do it for you ;)
#BannerImageSlider {
position: relative;
}
#BannerImageSlider .slider-wrapper {
position: absolute;
top: -999px;
bottom: -999px;
left: -999px;
right: -999px;
max-width: 155.56vh;
max-height: 100vh;
margin: auto;
}
This slider would show fully covering the available area. :-)

How to get the height and width of window in bootstrap

In bootstrap I have a fixed top nav bar and fixed bottom nav bar. I want to show a large image in the background between the space of those two nav bars and I also want to cover the width of the window. How can I dynamically get the height between the navbars and the width of the window? The window size may change depending on device.So I need it dynamic
Requires jquery:
var viewport = {
width : $(window).width(),
height : $(window).height()
};
//can access dimensions like this:
//viewport.height
Though you won't always get perfect results, different devices behave differently and this gives the viewport dimensions, not the screen dimensions.
Alternatively you could check the width of a data-role="page" element to find the device-width (since it's set to 100% of the device-width):
var deviceWidth = 0;
$(window).bind('resize', function () {
deviceWidth = $('[data-role="page"]').first().width();
}).trigger('resize');​​​
$(window).resize(function() {
var top_nav_height = $("#id_of_top_nav").height();
var bottom_nav_height = $("#id_of_bottom_nav").height();
var window_height = $(window).height();
var height_of_open_space = window_height - (top_nav_height+bottom_nav_height);
$("#id_of_img").css({
height:height_of_open_space+'px';
});
});
this will be fine with if 0px padding and margin, if not also get that values and subtract from height_of_open_space before applying to img height
It is a bit hard to tell without seeing any of your markup, but it should be feasable with pure css. I set up a very basic example to demonstrate:
http://codepen.io/anon/pen/XbGJJO
HTML:
<div class='top'>
top navbar
</div>
<div class='content'>
<p> some content </p>
</div>
<div class='bottom'>
bottom navbar
</div>
CSS:
.top, .bottom {
height: 40px;
background: red;
position: fixed;
width: 100%;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
.content {
margin: 40px 0;
min-height: calc(100vh - 80px);
background: green; /* background goes here */
}
The trick lies in the following line:
min-height: calc(100vh - 80px);
This tells your content to at least take up 100% of the vertical height, minus the height of the top and bottom bar. Let me know if you want me to explain further.

Changing footer position to be at the bottom of page until it hits content

(I am looking for an HTML/CSS fix but if there really is none then JS (prefereably JQuery) works for me)
I have two main divs inside my page, I have the #maincontent and the #footer.
Basically, I want the footer to always sit at the bottom on the page:
#footer{
position:fixed;
bottom:0;
}
BUT I do not want it to overflow on the #maincontent when the page is too small.
For the sake of the question the page can be thought of as simple as:
<body>
<div id="maincontent">Dynamic Content</div>
<div id="footer">StaticContent</div>
</body>
My problem is that I can do one or the other, either I fix it to the bottom of the page but when I make the viewport < (footer + maincontent) the footer sits on top of the content. I want the footer to always be at the bottom of the page but disappear off page before it overtakes the main content.
Add a class to the footer with jQuery that changes it to position: absolute when the viewport is too small.
$(document).ready(function() {
var height = $(window).height();
function windowHeight() {
height = $(window).height();
}
windowHeight();
$(window).resize(function() {
windowHeight();
});
if (height < 600) { //arbitrary height value you can set yourself
$('#footer').addClass('not-fixed');
} else {
$('#footer').removeClass('not-fixed');
}
});
If you know your footer's height whatever happens to the window height, or its content :
Just add a "padding-bottom" to your body or main content that matches the footer's height.
If you don't know your footer's height. This is trickier, as you will probably need some javascript to calculate the height of the footer, the height of the main content, compare the sum of both with the window height, and if it doesn't fit, add some adequate bottom padding to the body / main content.
EDIT :
Ok I understand, I think this jsfiddle should do the trick : http://jsfiddle.net/ah4XA/2/
The javascript would be :
$(document).ready(function () {
function updateFooter () {
var footerH = $("#main-footer").height();
var contentH = $("#main-content").height();
var windowH = $(window).height();
if ( contentH + footerH > windowH) {
$("#main-footer").removeClass("fixed");
} else {
$("#main-footer").addClass("fixed");
}
}
$(window).resize(function () {
updateFooter();
});
updateFooter();
});
If I understand what you're looking for, you want the footer to stay on the bottom of the window regardless of the page content, but also not overlap the page as the window is resized vertically.
One possible solution is to switch between position:absolute; and position: fixed; with a media query. So past a certain height it's fixed, but below that the footer position:absolute;.
EXAMPLE FIDDLE
CSS:
#media all and (max-height:300px) {
#footer {
background: red; <- added for testing
position: absolute;
}
}
The only drawback to this approach is that you need to know the height to set the switchover to. This may be tricky, but position:fixed;.
The simplest solution would be to position footer at the bottom permanently and increase the z-index of your maincontent so that it comes over the footer if window size is decreased.
NOTE: This is not the only way to do this.
JSFIDDLE DEMO
Sample CSS
#maincontent{
height : 400px;
background-color : green;
/*
position : relative is added to enable z-index.
*/
position:relative;
/*
z-index will bring it above footer,
if window size is reduced.
*/
z-index: 1;
width : 100%;
}
#footer{
height : 100px;
width : 100%;
background-color : black;
/* Below two properties will
postion footer at the bottom of the page.
*/
position : fixed;
bottom : 0;
color : white;
}
You should play with CSS position property to get this done.
EDIT:
Here is another CSS solution :
The maincontent and footer are wrapped in a bodyContainer div its position is set to relative and then footer is positioned w.r.t it.
JSFIDDLE DEMO 1 Footer is below body and not shown.
JSFIDDLE DEMO 2 Footer is shown since body height is less.
HTML
<div id="bodyContainer">
<div id="maincontent">Dynamic Content
</div>
<div id="footer">StaticContent</div>
</div>
CSS
#bodyContainer {
min-height: 100%;
position: relative;
}
#maincontent{
height : 800px;
background-color : green;
padding-bottom: 60px;
width : 100%;
}
#footer{
background-color: black;
bottom: 0;
color: #FFFFFF;
height: 48px;
position: absolute;
width: 100%;
}

cropping images from center on the fly - Javascript?

I have a bunch of images, that are various sizes, in terms of width and height.
Some are square, some are rectangle, but I'd like all of them to be width and height of my choice.
I know I can use the width="" and height="" in the
So, what I was looking for, is a possible javascript solution, maybe using jQuery, that will crop the images from center on the fly?
Is this possible?
You can position the images within a container using CSS. Then ensure overflow: hidden is set on that container.
For example:
<style>
.container { position: relative; overflow: hidden; }
.container img { position: absolute; }
</style>
<div class="container">
<img src="..."/>
</div>
<script type="text/javascript">
$image = $('.container img');
width = $image.width();
height = $image.height();
$image.css({
left: 0 - (width / 2),
top: 0 - (height / 2)
});
</script>
<div style="width:200px;height:200px;overflow:hidden;position:relative;">
<img src="example.png" style="width:200px;height:200px;position:absolute;left:-10px;top:-10px;" />
</div>
Something like that! By setting the left/top properties of it's position you can simulate a crop. The above example will take 10px off the top and left of the image. This example assumes the image is 200px by 200px, obviously edit values for your image.
You may need to reposition the container div so that the image looks like it remains in the same place.

Categories