I have a page with multiple widgets which each display data from different services.
I want to set a loading overlay on each widget independently when the data for that specific widget is being loaded. The widgets don't have a set height or width. I am using Bootstrap's grid to structure the layout.
Basically, once I need to load data, I'm appending another div with opacity to the widget root div, and positioning it absolutely with top/left 0.
The width and the height of the overlay are currently calculated using jQuery's innerWidth method on the widget root div. This makes the overlay the same size as the actual widget.
My problem is that when I resize the page while the overlay is being shown, its width and height are not recalculated, while the widget dimensions are. I end up with an overlay div that is larger than its parent.
Is there any way I can solve this using CSS alone (i.e. without binding to a resize event)?
I need to support Chrome, Firefox and IE9+, so I'm open for any modern techniques.
Just try % on the overlay without the Jquery function :
.overlay {
width:100%;
height:100%;
}
Related
I would like to know how can I enable the scrollbar while zooming with svg-pan-zoom.
I've tried overflow: auto on external div or svg tag with no luck.
Hopefully I can get some help here.
There is no way to have scrollbars by default inside of svg-pan-zoom as it's essentially an SVG, and inside of an SVG things behave like they're overflow: hidden. You'll have to implement scrollbars by yourself (render some elements that would look like scrollbars, compute their size and position...).
For anyone who comes across the problem, the best solution (hack) I've come up with is to set the container div to overflow: auto, set the svg element width and height to the width and height of the container div, set the position of the svg element to absolute, and then place a second div alongside the svg element. Then you need to synchronize size of the second div to the "true" size of the svg which you can get by calling getBBox() on the svg element, plus any scaling you have incurred by zooming. Thus the second div forces the containing div to have scroll bars. Similarly you need to synchronize the pan events with the scrollbars of the container, and vice versa.
When everything is said and done, panning and zooming happens through svg transformations that are synchronized with the scroll bars of the parent div, and happens completely transparently to the user.
I've built this site: http://dabble.market/cms/
All code (HTML, JS, CSS) has been added to the one HTML page as it's in WordPress and utilized a "Coming Soon" plugin. You can view the site and view the source to see the entire code for the page.
On the page I have a green downwards arrow, that when clicked uses JS effects to shrink the logo, and fade in text in a fullScreen div that's hidden on load which contains the content. This fullScreen div is not a child element of the div that sets the background (the div that sets the background utilizes a Google Map's plugin to set the Map as the background).
When the content in the div that is hidden initially becomes visible, the content overflows the boundaries of the div that sets the height and width and adds vertical scroll bars. My question is this though; is there a way to make this content fit the width/height of the div that fits the background, without pushing the content outside the boundaries of the background div? I still would like to keep the scroll bar - I just want the div with the content in it to scroll, while the div with the background remains at 100% width and height. I hope that makes sense...?
This is especially visible on mobile devices, as when you scroll downwards on a mobile device the Google Map remains as a background to the div, but the content div overflows the Map / background significantly.
Any help would be greatly appreciated :)
Try this
.fullScreen {
overflow: auto;
}
You have set a parent div with 100% height, and you want to make its children scrollable. You should set the parent's overflow to auto or scroll.
I have 2 nested DIVs, with the inner one having images of fixed height (but arbitrary width) aligned one near each other horizontally.
I want to use jScrollpane so that there is horizontal scrollbar to display the images outside the viewport of the div. The list of images is not known beforehand, it will come dynamically from a CMS, so I cannot hardcode the width of the internal DIV in the CSS.
When I harcode the width of the internal div the horizontal scrollbar works fine. However, the moment I remove it the horizontal scrollbar disappears, even though the DIV has display:inline-block and I checked through Chrome's element inspector that its width is in fact expanding.
I also noticed that when I pass the autoReinitialise: true property to the jscrollpane, the horizontal scrollbars appear after a few seconds. But it seems this slows everything down because it keeps checking every few seconds.
What is the right way to make the jScrollpane realise that the internal div is larger than the outer scrollable div?
I have created a JSFiddle here: http://jsfiddle.net/793CB/1/
I have put a comment in the CSS (last line) which shows the fixed width, and if removed demonstrates the problem.
The images aren't loaded yet when you initialize the scroller, so the width isn't available.
This seems to fix it: http://jsfiddle.net/793CB/3/
$(window).load(function () {
$('#scroller').jScrollPane();
});
... on $(document).ready(), DOM is loaded, but images may still be in progress
I'm wondering specifically how to get the kind of scrolling div used by the SpineJS documentation:
http://spinejs.com/docs/ajax
You'll see that if you resize the window, the scrolling div on the right side (as well as the left) adjusts its height to track the window's height.
What are the key css and js elements of this trick?
The solution used on the website that you've mentioned is only CSS.
The key elements are:
CSS position
CSS line-height
CSS height
CSS overflow
See this working Example and analyze the CSS used to see how it is done! Also, read the links above to know more about those CSS properties and learn to combine them!
It looks like they are just using the css property overflow: auto on the elements. That will add scrollbars if the child content exceeds the parent boundaries.
And the element itself is absolutely positioned with top, bottom and right set to 0px;
I am trying to create a sideways slideshow of images. The panel that will contain the slideshow is exactly 1200px wide. At page load, PHP loads images inside this panel. The number of images is not always the same, and I don't want the slideshow to start unless the collective width of the loaded images exceeds the width of the 1200px container.
The problem is, all the images are of various sizes, everything from 150x100 to 1980x1200. The images are fit into the bar by setting their height to 50 and letting their width rescale automatically.
Now, creating this slideshow panel in any other programming language would be easy. I'm suffering here in javascript though, because I simply can't find ANY WAY of getting the new width of the images. They all read width: 0px using jQuery outerWidth()
I have even tried putting a div wrapper inside the 1200px panel, outside the images, hoping that div would automatically scale around the width of the images and give me their collective width, but instead it reads 1200px (jQuery outerWidth())
Is there any way of measuring their width?
Is there an easier way of doing this?
Any help appreciated
I'm guessing you're trying to get the widths when the document is ready, instead of after the images have loaded.
Try placing the code that gets the outerWidth() in $(window).load().
$(window).load(function() {
//get the image widths
});