The following is the script I am using:
http://www.webdeveloper.com/forum/archive/index.php/t-152085.html
How can you have a container around a multiple step webform without the height/absolute positioning screwing stuff up?
Some of the steps I have have are different heights, and also with absolute positioning you can't have a wrapper with a background color.
My problem is the height is crazy because div's are being hidden but the height is still taken
Any alternative with the same script that allows a wrapper bg color and a height that alternates, instead of flooding the scrollbar?
EDIT: Here is a live example (notice the scrollbar issue?)
http://fastfolio.com/div-test/test.html
if the steps are different heights, the scrolling hurts. maybe some kind of #top fix or something? how do you get it to read the height and adjust accordingly?
Check jQuery as this will make handling the scroll easier.
In your example HTML page, replace the onclick with a function that checks current height of the div ( $(this).parent().parent().height() ) and the scroll position of the body ( $(body).scrollTop() ).
If the height is smaller than scrolTop then use the scrollTop to move the body up.
jQuery will take you 30 minutes to get your head around, but it's well worth it and wil solve a lot of queries like this.
You should not be using visibility to toggle the element shown but rather the CSS style of "display" (between "block" and "none" will do what you're after).
The pagination should also not rely on IDs - far better for you to use an array, and a "current state" holder. The "next" submit entity for should
http://consulting.euphemize.net/jack.shepherd/pagination-form/
Better options held in here :)
Related
I saw the Google Material Design website and was amazed by the change of color of the left, sticky "speech bubble"-image when you scroll down.
I am trying to understand the concept but Google's code is huge and somewhat confusing...
I think there are actually two images, but I cant recreate it just with different z-index values alone (I can let the first image disappear and the first appear but in combination it doesn't work).
Do I need a JS-library for that? Waypoints/scrollreveal etc., is this some kind of SVG magic or am I overlooking a simple solution?
on simple usage try onScroll() method using js for applying basic css colors on your element.
I believe those are animated objects, and the sections (their containers) have overflow:hidden, so those objects stay within their sections.
Also they probably have position:fixed and positioned using'top' and 'left' properties to stay on place all the time (or probably some JavaScript magic).
And ther animation is launched using JavaScript function scrollTop(), when visitor is on a certain distance from a page top.
I'm not sure what is used in this exactly page, but you can change and adjust scale, size, color and transparency depending on position from page top using JavaScrip - 100%.
I'm using Angular JS sticky directive to stick the header of a table to the top of the page when scrolling. The table is located in a bootstrap container with a fixed width and when the Angular script activates it shows the whole header and thus overlapping the container in which it is located (if I have enough columns in the table that is).
When I have more columns than what can fit in the container, I get an horizontal scrollbar but this doesn't apply to the sticky header.
Anyone who might know how to fix this? I can't show you any live examples as I don't know how to add Angular directives in fiddle (or any other online compiler).
Here are two screenshots.
This one shows how the container prevents some columns to be shown as the table is wider than the container itself: http://imgur.com/Cj7UBak
This one shows how the sticky header has overlapped the container: http://imgur.com/KkGkOMy
it should not overlap
I'm sorry that I can't give a working demo of it but I simply don't know how to include the Angular JS Directive and without it, a demo would be useless.
EDIT
The problem, I found out, is that the sticky directive sets the position to fixed, which fixes the position to the browser, not to any parent. I don't know how to solve it still but maybe that explains the problem better for everyone.
As I discovered more about the problem I realized that I should rephrase the question. I'm therefore closing this question and refer to this one instead:
Position fixed within container element instead of the browser / viewport
I'm working on a couple of aspects of someone's website and I'm having a bit of an issue with getting the tabbed navigation to display properly without absolute positioning, and as it's set to absolute the text on the Details tab overruns the "footer" sometimes. (They use a random Testimonials block which pulls varied length quotes, the short quotes cause the overrunning. If it doesn't go over please just refresh)
http://goo.gl/5Iwc1r
Normally I would put this into a jsfiddle but to get the issue to display I would practically have to copy the entire css and html of the page, which wouldn't be very efficient and certainly not very clear to look through.
So, does anyone have any suggestions on the best way to approach this problem? All advice would be much appreciated.
I'm not 100% sure what you're trying to accomplish here. But I'll give it a shot...
Try adding a div underneath the tabbed navigation to act as a spacer, because of the way positioning acts upon screen real estate, this "spacer" div can keep things underneath it nice and tidy. Just set a height value to it to force the content to display where you would like it to.
Hope this helps :)
Because of the way you've structured your pages, it's not going to be easy. The content is places with a position: absolute;. This causes the content to not push down the footer, since the height isn't registered.
I think the fastest way to solve this, without having to rebuild half your website, is by using javascript. Since I see jQuery is loaded, I shall write this using jQuery.
jQuery(document).ready(function(){
setHeight();
jQuery('input[type="radio"]').on('click', function(){
setHeight();
});
});
function setHeight(){
jQuery('#wrapper').height('#wrapper > div > div').is(':visible').height());
}
This piece of code should set the div with id wrapper to the height of the currently visible div.
I haven't tested this, and it is no pretty solution, but it should work.
Good luck!
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
In the context of SharePoint, I call a dialog. SharePoint basically created a lightbox div and puts my html inside. I have no control over where it decides to display the dialog, nor of its dimensions, and not even of the CSS used for the containing page. In other words, whatever I can do must be included inside my own html/javascript/CSS.
The problem arrives because my html contains this one div that is sometimes
too high for the dialog,
which I would then naturally like to have a vertical scrollbar. I therefore define it with the CSS style of "overflow:auto".
But what I get instead is a scrollbar over the entire dialog, while the div is contained entirely in the dialog with no scrollbar at all.
I have traced the DOM, and I believe that the source of the problem is that the lightbox div containing my dialog is also defined with "overflow:auto". Apparently this takes precedence over the inner div, so that the vertical scrollbar is put on the containing div rather than on my inner div.
I am looking for a way to move the scrollbar from the dialog to the inner div. Please remember that I cannot change the CSS to get rid of the "overflow:auto" in the lightbox div that contains my html.
I can fix the problem by setting the height of the inner div to an absolute pixel value, but as I cannot predict in advance how much screen space is allocated to the other elements of the dialog or to the dialog itself, the visual results could be rather ugly.
Any ideas ?
Below is a simplistic example of the layout of the problem :
<div style="overflow:auto"> <!-- lightbox div -->
<!-- start of my html -->
<div style="overflow:auto !important">
<!-- high div -->
</div>
<div>
<button></button>
<button></button>
</div>
<!-- end of my html -->
</div> <!-- end of lightbox div -->
I should also mention that I am using Internet Explorer 9.
SharePoint has a funny way of calculating the height of the html I supply it for using inside the dialog. It probably calculates it while it is detached from the page, so that CSS positioning cannot work. Any attempt to use a clever CSS schema, such as proposed by Alexey Ivanov, therefore fails totally, with SP miscalculating the html as being extremely short. The best solution is this way butchered by SP not supplying a framework with a size for the CSS to position the elements inside.
So we are left with a javascript solution. As my html is not inserted at the topmost level of the iframe, I have no access to any body events. The only solution is then to use the onload event of an img element, as the only hookable event available, as counseled by Ann L. Unfortunately, a real image must successfully be loaded for this event to fire, so if necessary one can add a minimal 1-by-1 pixel image, which even it can be gotten out of the way with a style of "display:none".
The onload event is to contain javascript commands that will calculate the size of the dialog, subtract the total size of all elements except our maybe-too-high div, and set the height of this div to the calculated difference.
As DOM-traversal is quite broken in Internet Explorer, jQuery can be used to "fix" it by working around the bugs. If jQuery is not available, strong-arm methods can be used, such as looping on document.getElementsByTagName('div') to locate the divs of interest.
The SP divs that contain the supplied html can be identified by their className :
ms-dlgContent : the dialog itself
ms-dlgFrameContainer : the inner div that contains our html as its innerHTML and has the style of "overflow:auto" that conflicts with our own.
For the later, I have not managed to find any way of overriding its style of "overflow:auto". I finally settled for deleting its className by setting it to null. Not too big a loss, as the only style it contains is this same troublesome "overflow:auto".
All in all, quite a lot of work, both mental and programming, just because the SP programmers lacked a big enough imagination to take CSS positioning into account.
How about this? If you have an image in your inner div, it would have a jQuery "load" event. Since images tend to lag behind the rest of the document in loading, it would probably not fire until after the full DOM was complete. You could attach a handler to that.
Or, if you could stand having the scrollbars on screen for a second or two, you could use a timer inside your div and fire a method to change the outer div's style after enough time has passed that everything is loaded and set up.
First, I made this assumptions:
SharePoint lightbox do one of the following:
It's set width and height on itself.
OR It's positioning itself with position: absolute/relative.
OR It's loads content inside iframe.
Content that is not inside the inner overflow block (i. e. buttons) have fixed height.
If this assumptions are valid, then you probably can achieve described effect by position inner div div with "position: absolute", and entering left, right, top and bottom coordinates.
Example: http://jsfiddle.net/GxDcW/
You cannot get rid of the overflow: auto from the lightbox div with css or HTML, but you can with javascript. You don't need jquery or Mootools, a snippet of inline javascript should be fine
<script type="text/javascript">
var lightbox = document.body.getElementsByTagName("div")[0];
ligthbox.style.overflow = "visible";
</script>
This assumes the lightbox div is the first div on your page. If it's not, you can perhaps target it with it's id using getElementById or by targeting some wrapper div first.
Any other solution with css or html would most probably involve making it (over)complicated and error prone.