I've been using jQuery Tools' overlay for some time, but I don't know what to do when the browser window isn't large enough to accomodate the contents of the overlay.
Check out the jQuery Tools example page and see what I mean:
Click one of the images to make an overlay appear
Resize your window so that the entire overlay can't fit
This may seem like a simple problem with an easy solution (make your browser window larger), but I work on a website that caters to older people, whose monitors may be set at low resolutions.
Any idea what I can do, short of building my own javascript overlay utility?
You could specify the size of the overlay div in % so that it always fits on the screen.
overlay_div {
height: 60%;
overflow-y: auto;
}
Max height solution without scroll:
overlay_div {
max-height: 95%;
}
overlay_div img {
max-height: 95%;
}
In script:
$(document).ready(function() {
$("img[rel]").overlay({
top: 25
});
});
Related
I have been trying to use CSS grid layout with dc-js.
The graphs are defined without specifying a height and a width, letting the grid do its theoretical job.
I end up with something like the following image, where the graph ends up occupying only a third of the lateral space I had set for it in the grid layout. The svg within each individual graph's div still has default height and width set for some reason.
Is that the expected behaviour ?
If it isn't how do I solve this issue ?
EDIT : of course it works in this jsFiddle... I'm using dc version 3.0.12 if that helps.
Resizing and setting the width and height of a chart based on its container are not completely automatic in dc.js.
As you discovered, the default width and height are 200. But you can cause the chart to calculate either one by passing a non-number such as null.
This is partly for historical reasons and partly to provide more control. dc.js didn't have these features early on, and we usually try to add features in a backward-compatible way.
If your grid changes size when the window changes size, you can add an onresize listener that causes every chart to resize the SVG to the same size as the chart div:
window.onresize = function() {
[chart1,chart2,chart3,chart4].forEach(
c => {
c.width(null).height(null).rescale();
redraw_chart_no_transitions(c);
});
};
If onresize is not to your taste, take a look at the resize observer scatter example for a more modern approach. You may need a resize observer if the grid will resize for another reason than window resize.
redraw_chart_no_transitions is a small utility function available here that temporarily sets transitionDuration to zero so that redraw does not animate. Animated transitions are not good for actions that give immediate feedback like resize, pan, and zoom.
I was able to reproduce the problem pictured in your question with your fiddle by making the window really large.
To get the grid layout to use all the space I added the following CSS (not perfect, there's some stuff I don't understand here):
html, body {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
margin: 1em;
}
#test {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
/* ... */
}
By default grid cells can get larger but not smaller. Specify min-width: 0 and min-height: 0 to allow them to get smaller:
#test div {
min-width: 0; min-height: 0;
}
Here is a fork of your fiddle with four charts that fill the window and resize when the window is resized.
Posting this answer for any lost souls finding this question.
In my specific case, my grid was on a JQuery tab which was hidden on initialization of the dc graphs.
var width = element && element.getBoundingClientRect && element.getBoundingClientRect().width; at line 24 of the base-mixin (or line 1416 of dc.js) returned 0 for all my charts.
So dc could not calculate the correct sizes and ended up using default for everything.
Once I solved that, #Gordon's answer helped me for resizing.
I have an image that I am using as a loading animation that is 755px wide.
http://www.salts-studios.com/resources/working_large.gif
The things is I have a requirement in one section of an app I am developing where the image width must be fluid.
IE 8 is the main supported browser (I know, I know) so scaling the image up when required isnt an option.
I cant change the image, but I could create a new additional one so long as it looked identical in style to the original.
Can anybody recommend any technique to achieve a fully fluid width?
I've tried various sliding door techniques but they fall over as the image is animated.
Thanks in advance.
There's a rather simple solution to this. In a parent div, set it to width: 100%, and set the child image also to width: 100%. Here's an example:
.bar {
width: 100%;
}
.bar img {
width: 100%;
height: 19px;
}
And here's a JSBin that has a working example
Drag your browser window to different sizes and watch the image width resize. Let me know if this is what you were thinking should happen.
I'm quite new to web development and jQuery, so please bear with me.
I'm using Nivo Slider on a website that I'm working on. It's a responsive website, and I want the slider to be easily visible on all screen sizes. I've set a breakpoint in my CSS so that when the site gets to its smallest size (around the size of a mobile screen) the slider is set to 200% width, with the overflow hidden, so that the images are larger.
This works fine, however at this size you can only see the center of the slider, while the sides are cropped off by the edge of the screen. For most of the images I'm using this isn't a problem, however one of them is cropped very awkwardly. It's easy to reposition the whole slider, but I want to try and move this ONE image over so that it can be better seen on small screens.
The CSS I've added to the default nivo-slider.css is:
#media screen and (max-width: 31.25em) { /* 500px รท 16px */
.slider-wrapper{
overflow: hidden;
}
.nivoSlider {
left: -50%;
width:200%;
}
.nivo-caption {
margin-left: 25%;
width: 50%;
}
}
Thanks very much!
Just using CSS, you could add a one-off type class to that particular image, and throw that into your #media query:
.my-one-off { left:??px; margin-right:??px }
You could search for that image with jQuery as well (if I'm not mistaken, Nivo uses the jQ library).
$('img[src*="one-off.jpg"]').css('margin-left',35); // just an example
Or
$('img[src*="one-off.jpg"]').addClass('my-one-off');
I looked at nivo-slider3.1. In order to select a particular image only and move it left you could use the following in css:
img[src="YourSpecialPic.jpg"]{
left:50px !important;
}
You can also set a custom animation for one particular slide with the following img attribute within the HTML:
data-transition="slideInLeft"
You can sub any attributes to get the desired effect, but I think this will do the trick.
NOTE:
Depending on what effects you are using will determine whether or not that messes up the animation (e.g. The slicing animation becomes screwed up after performing the left move. The slideInLeft animation seems to work fine.).
I don't have a quick or easy solution for fixing all the animation effects for that one particular slide, but I'm sure a conditional statement within the javascript could achieve it (I'm just not smart enough for it).
A few weeks ago I working on this site. This is my next portfolio site. I want to make this structure, when I finish:
Header
Horizontal image gallery with floating height
Footer
I want to create something similar, just like the 22slides.com portfolio sites for photographers. If you change your browser's window size or press full screen button, the img element or the image's div automatically change his height.
I putted in the CSS a "max-height" parameter, to prevent the images never become bigger than their original resolution. It's a serious issue on huge resolution screens. but in Chrome it's not working properly, because the aspect ratios become wrong. If you press full screen, the aspect ratio more bad. In every other latest browser (Firefox, Safari, Opera, IE8-9) working normally. I created a custome CSS only for chrome with this command (but now I uncommented this in HTML to show you the Chrome aspect ratio problem):
#portfolio img { max-height: none; }
So with this line, the images using the biggest possible height in Chrome and the aspect ratios are correct. But it's a problem for me. I not want that a 1024x683px image showed bigger than his actual resolution on a FullHD monitor.
I think the best solution, if there's a javascript, which is dynamically escribe a width and height for every single image and keep the original aspect ratio. 22slides.com using something similar javascript, but I'm not a javascript programmer at all. :(
The images HTML structure:
<div id="portfolio">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
</div>
CSS (max-height is very little number, just to show you the problem in Chrome):
#portfolio { white-space: nowrap; float: left; }
#portfolio img { height: 100%; width: auto !important; min-height: 150px; max-height: 350px; }
I'm using this Jquery Javascript to dynamically change the image's height and bring back the image's overflow on the screen with 130px negative height. Probably not this script causing the problem, becuase if I turn it off, the aspect ratios are more bad in Chrome:
// Dynamical vertical resizing on images and Correct the height (to not overflow the screen)
$(document).ready(function(){
$(window).load(function(){ // On load
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
$(window).resize(function(){ // On resize
$('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
});
});
I need help! Thank You!
Update:
This javascript written by "Emphram Stavanger" and "nick_w" seems to solve my image fit to browser height problem:
Imagefit vertically
I tried and it's perfectly working with one single image. The image fitting in the available viewport window perfectly, with correct aspect ratio! There is a visual explanation for our problem made by "Emphram Stavanger":
http://www.swfme.com/view/1064342
JsFiddle demo (Basicly it's Emphram Stavanger's code, I just putted in the changes by nick_W, changed Jquery to latest and I putted after the show link:
http://jsfiddle.net/YVqAW/show/
I not tried yet with horizontal scrolling image website, but it's already a big step!
UPDATE 2:
SOLUTION: https://stackoverflow.com/questions/20303672/horizontal-image-slideshow-javascript-not-working-properly-with-portrait-oriente
(And I need help again...) :)
A little late but you can use a div with background-image and set background-size: contain instead of an img tag:
div.image{
background-image: url("your/url/here");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
Now you can just set your div size to whatever you want and not only will the image keep its aspect ratio it will also be centralized both vertically and horizontally.
The background-size property is ie>=9 only though.
A page I'm working on has a div that spans its width. Its height has to resize according to the browser window. Here's how I've got it so far:
#vid_window{
position:absolute;
float:left;
background-color:#000;
width:100%;
height:57%;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
At the bottom of the page is a 'menu' to play an assortment of videos in the above div, and the video, of course, will have to resize with the height of the div. The div is absolutely positioned, per the client. That's not a problem:
#vid{width:100%;height:100%:}
As it will fill #vid_window
Here's the problem: When the browser page resizes, it doesn't take long for the 'menu' to begin overlapping the vid window. I know I can reduce the percentage, but, I may not, per the client. They want the lion's share of the page to be able to display the video, but they, of course, don't want the menu to overlap the window or the vid.
Here's the question: Is there a way to have the vid_window and vid resize exponentially according to the browser window, such that if the window is fully expanded, the vid_window is at 57%, but if it's half-size, the vid_window would be, say, 30%?
Here's a link to the page, if you'd like:
page
From what you've described, it sounds like you'd be better off absolutely positioning the menu at the bottom, and using relative postioning on vid_window. With a little JavaScript you can resize it correctly, and it should resolve your overlap issue. If you're allowed to use it, you can make quick work of it with jQuery.
Like James says the best way I can think of for you to do this is set a class on the Div vid_window set the height % in the class and check the display window size to determine your optimal settings. Also I would probably set a min-height so that the page won't go below that height and for backwards compatibility look at Modernizr. http://www.modernizr.com/
------EDIT------
That the Header and footer will never be off of the page. One way to reduce the problems you are having is setting the height on the header and footer to percentages so that they will scale with the height of the body
html,body { height:99%; min-height: 100%; }
header { height:22%; min-height: 100px; }
#content { height: 56%; min-height: 200px; }
footer { height:21%; min-height: 100px; }
The min-height values can be whatever you think is appropriate for the smallest height you want to go. The percentage heights on the rest should auto scale you header footer and consequently your content. This will however force the footer to go off the page at a certain point (when all min widths are met and the browser window continues to shrink). I do think that this would be desirable and should meet your clients needs. If not then you are going to get into a very complicated javascript that is not always going to do the math just right because of how each browser handles padding and height calculations. On top of that if they disable javascript then it would never work.