My page has a 1000px container for the header(above the red box in below image) and the content(below the red box in the image attached). Those containers are fixed width. But I need to setup a image slider that will be displaying the images in full width.
I mean, I will be including a much wider image. Say, 1800x200 px. So, if the user's screen resolution(width) is less than or equal to 1000px, then the middle portion of the image would be displayed and the image slider should be 1000x200 px in size(resized). But if say the user's screen resolution is 1300(width), then the image slider should be resized displaying the center portion of the image and the slider container would be of size 1300x200 px in size!
Since there are lots of jQuery plugins already available, I thought of not to reinvent the wheel. So tried many jquery sliders. But none of them seems to be meeting my above needs. Or am I missing some settings in those sliders that I tried?
Any suggestions?
Maybe add an extra outer container? Then center the 1000px container within the outer one.
Then when you resize the window the image slider will respond to the outer container and the inner container stays centered.
outerContainer {
width: 100%;
.....
}
innerContainer {
width: 1000px;
margin: auto; /*or left:50% right:50%*/
}
you have to wrap all div in .wraaper div and define width 100%.
.wrapper{width:100%;}
and in inner div you have to define section using an
.inner(width: 1000px;)
where you need 100% slider dont use this .inner class.
this is help for you.
Related
I'm using magnific popup to display hidden inline content on click. this content has images inside, which have different sizes. Some of those images wont fit vertically in the viewport. Magnific popup has an option to fit content vertically to the viewport verticalFit: true. But it seems that this option works for image galleries only and not for inline content.
Here is a
fiddle of that problem.
I need the entire popup to fit vertically in to the viewport, even if the image is bigger. there must be a max-width in pixels, but this is working so far.
There's a CSS in which max-height can be changed but I think magnific popup creates a lot container with heights which are depending on each other. Maybe I have overlooked something and its not a big thing. But now, after doing research and finding nothing, I am running out of ideas.
It appears that the container heights for the magnific popup are all just set in CSS, and they all appear to just be 100% as far as I can see – and more importantly, I don't see the JavaScript setting any inline heights or widths – so that makes your life easy.
We can just set the max-height on the image as you guessed, and have an automatic width. We can use vh (viewheight) units to set the maximum height of the image relative to the viewport height.
.image img {
display: block;
height: 100%;
width: auto;
max-height: calc(100vh - 66px);
}
The precise calc value of 66px in the calc expression comes from the height of the description div (.descr), plus 4 pixels top and bottom border on the description, plus 4 more pixels top and bottom border on the image's immediate parent div (.image). That's 50px for the description div + 16 total pixels of border width.
You can make that amount smaller if you want; I believe 100vh - 66px is as big as you can get without needing to scroll at all, at least with the styles given in your fiddle.
You may also want to add some styles to make sure the image is centered in the container in the case of real tall images like this example, but I'll leave that up to you.
Updated fiddle.
I have the following right now, but its not perfect:
$(window).resize(function () {
$("#app-views").height($(window).height() - 140);
});
Basically, I have 75px from top before my content starts, and I have 60px from bottom of the page to my content.
How do I make it so when I resize the window, it will always respect those dimensions? I am using malihu scroll bar, and I am loading my view into #app-views.
I have a border all around the window (10px), a navbar (50px), and 15px of padding until my body. Then, I have 15px bottom padding on body, a footer of height 35px, and 10 px bottom border.
Here is the basic HTML:
If you want your contents to be placed and resized while keeping the same distance from the top and the bottom of the window, you don't have to use jQuery or Javascript. Only CSS would do the trick. Try this without height attribute in your style code:
#app-views {
position: fixed;
top: 75px;
bottom: 60px
}
You can set left and right without width to get the same effect in horizontal dimension.
You say you have specific measurements to place your content on the page
(75px from top before my content starts, and I have 60px from bottom
of the page)
Well with jQuery offset you can get the top position of the element and you can also update the css top position on screen resize so that your content will always adjust its position on resize.
To see where the bottom of your content element is you could find the offset of the top of the content and add the content's height to get the bottom position of the content relative to the top of the page.
I would recommend doing this in CSS, perhaps by dynamically changing the jQuery object's CSS property. I would attend to it with a simple CSS selector. This works even when the window is resized. Have a look:
#app-views {
position: absolute; /*this will allow you to position it exactly where you want it*/
left: 50%; /*this will move the left side of the container halfway across the page*/
transform: translateX(-50%); /*moves the container left by half its width,
so that the centre of the container aligns with the center of the page*/
}
You can adjust the vertical position with the 'top' property and 'translateY()' in a similar way I demonstrated with transform and translateX().
If you want to use jQuery, you could try:
#('app-views').css('position', 'top');
Furthermore, I would also suggest that you do not maintain the 75px at the top of your page for all kinds of screen sizes. 75px may be suitable for a desktop but not for a mobile. If you do intend to make your website fully support mobile, it is often a good idea to design the mobile layout first, as it tends to by simpler. Then, you can use media queries to adjust it for the desktop. It really does work brilliantly. I've used it myself many times before. You can learn more about that here:
MediaQuery CSS
I posted a this question last night, but have completely rewritten it because I think it was confusing people, and I also have provided an example to illustrate my problem....
I have a slideshow that I would like to fill a div completely. Right now, if someone visits my site from a narrow browser viewport, the slideshow will only fill the width but not the entire height, therefore leaving space at the bottom of the div.
I would like the slideshow to proportionally scale to fit and cover the entire div, even if cropping from the sides is necessary. Does this make sense what I am asking?
Here's the example: If you visit it right now from a wide or full screen browser window, the images probably fill the entire div. But if you narrow your window and refresh, you will see the bg color at the bottom of the div. Example: http://mudchallenger.com/a-responsivef.html
How can I get this slideshow to fill the div?
Thank you!!
**I should also add, I'm NOT trying to make this fill the screen as a background. I just want it to fill the div.
You need to set the height of the image to 100% and let the width be automatic. This is because the images are of landscape orientation. Then, make sure you have the overflow (maybe just overflow-x) attribute of div.slideshow set to hidden. This will allow the image to scale to the div (the frame) rather than to itself. Here is an example: http://jsfiddle.net/krh121791/rXep9/.
HTML
<div class="slideshow" style="position: relative;">
<img src="http://mudchallenger.com/a-images/backgrounds/bg-1.png" />
</div>
CSS
.slideshow{
height:100%;
width:600px;
overflow:hidden;
}
.slideshow img{
height:100%;
}
A note, you would set the width to 100% and overflow-y to hidden if you have a portrait picture.
One page website.
Header at the top with anchor links
To different divs (sections) on the page.
Say my screen resolution is 1280*800 and each div section is max 800 and the content on each div section is visible when my browser is maximum size. I forgot to mention that scrolling is disabled so the other divs are only visible (scrolled automatically) using the anchor links at the top. So heres the problem, when I resize my browser, say for example theres only 450px worth of height on my browser, I can only see that amount of content on the screen and cannot scroll until the bottom of the div, so it hits the bottom of my browser.
Another point to understand is that all the elements in the div itself are not overflowing the height of the div so a simple overflow does not work because the issue is to do with the size of the browsers' height.
In essence when the browser window is anything less than 800px, the div is then covered up at the bottom by the amount reduced by the browser. I want the whole div (NOT THE CONTENT INSIDE IT) to be pushed up (top position) as far as it needs to so that the bottom of the div i.e. 800th pixel touches the bottom of the browser.
Any solution?
You can listen to changes in the window size and adjust the size of your divs to it. This way the div will always have the size of the window, so if it gets too small its overflow will show.
$("div").css("height", $(window).height());
$(window).bind("resize",function() {
$("div").css("height", $(window).height());
});
Working example at jsFiddle. Remember to set the div's overflow to auto, so they will show when the screen gets too small.
Update: from what I could understand in your update, your requirements can be satisfied with simple CSS. Let the html, body overflow at will, but set the "container" div's overflow to hidden (so it will only scroll one page at a time) and its height to 800px. When the browser window is resized to less than 800 px, the body's scroll bars will appear, letting you scroll the container div up and down. Both the container and the contentes will remain the same size: 800px.
html,body {
overflow: auto;
}
.container, .contents {
height: 800px;
overflow: hidden;
}
Working example at jsFiddle. Is that what you need? If you literally want to push the container div up until its bottom is aligned to the window, try setting padding-top or margin-top instead of top (though in this case I don't know how the scrolling will work).
Use media queries:
#media screen and (max-height: 450px) {
body { overflow: auto; } /* Or change the height or whatever */
}
I think the best solution to set min-height of main wrap 800px, else you have to add overflow hidden for your main content. Scrolling can be triggered by setting main content top position, but it must be absolute or similar. You cat write a function witch helps you to move main content changing it's top position.
I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.