HTML : page development like g mail with out browser vertical scroll bar - javascript

I am developing CRM project using HTML and CSS. I need to fit my project for all screens without vertical scroll bar same like g mail. If we observe g mail we have scroll bar only for mail section not for browser. I need too implement same like that. Can anyone please help me how to implement. the page should be fit for all screens means if it is in small screen or big screen or medium screen. Is there any tutorials or any script for calculating height for main content based on browser height.
I attached image. In that header and main content section is there. So I need to set body height based on browser height and as well as I need to calculate each section height each time based on browser as well as inside divisions.
we should not give any fixed height , why because we need to fit the screen for all resolutions like 1366*768 and 1400*968 and 1680*1050 and 1920*1080. So when we are increasing the browser height the DOM height also should be increase as well as decrease.
Please help me to find this type of development with HTML, CSS , JavaScript and Jquery.

First you check how the default height of your element is. With JQuery this can be done like this: var height = $('.classOfYourElement').height(); var currentBrowserHeight = $(window).height(); Then you need to attach a listener to resize Event $(window).resize(function() { // Inside here you are now calculating the difference of the height of the window to the default height of window which you set earlier. this difference you should then apply to the div height :) hope that helps. }); –

You need to have a wrapper around the 5th section and give it a fixed height.
Then you have to specify the overflow-y value to scroll i guess.

Related

How to set scrollable content dinamically in ng zorro table?

I have a ng-zorro table and i would want the scroll bar to resize when i resize the browser window (say for example in a smaller device). So that it will be dinamically changed based on the page size, how to do that?
Well, firstly you should provide more context to your question: for example you could provide a minimal reproducible example
and some code so we can have more context to the question asked.
But anyway i will try to answer your question:
Here's what you can do:
looking at the ng-zorro table i see that there is a property for nzScroll that takes an object as argument.
so when you delcare the table you can do this:
<nz-table [nzScroll]="{ y: 'calc(100vh - 276px)' }">
</nz-table>
What is that code doing?
So since we want to scroll vertically (and not horizontally) we need to change the y axis ence the y: in the code.
you can assign a pixel value to that ybut that will result your scrollbar to have a fixed height so resizing the window will not resize the scrollbar.
what i did was calculate all the elements heights in my page so that i know how much height my table is taking. I did this when the table was empty using an extension for google chrome smart page ruler extension
knowing the elements height in my page i could subtract that amount to the viewHeight of my page.
Therefore everytime you resize the window the scrollbar is going to resize because is calculating the difference between 100% of the viewHeight and the sum between all of your elements heights.
If you have any question about my answer i will happly answer, cheers!

Allow height% with jQuery scrollbar

I am using the Malihu custom content scroller with automatic scrolling. So far, I basically am experimenting with it. I noticed when I take the height of the scrolling div and use a percentage instead of a fixed amount in px, it expands the div the entire height of the scroll area (off the screen).
I'm literally just taking the code from this GitHub location then opening the file "auto_scrolling_example.html".
Then in the <style> section of the header, I'm simply changing .content: height:500px to .content: height:50%.
Does anyone know why this doesn't work and/or have a good workaround for it?
When you specify the height or width as a percentage, that's a percentage with respect to the element's parent.
If the parent doesn't have any height or width inner children will not work in percentage.

How is win-listview height set? - WinJS

this is driving me up the wall. I cannot figure out how to make the listview's height automatic.
i.e. have the listview's height extend in order to occupy all the space it needs and have the outer container offer a overflow-y scroll feature.
I cannot seem to find any documentation on this unforuntately.
Help would be great. Thanks!
ListView controls are 400px tall by default. That's on line 1421 of the ui-light.css file. You can override it by adding a rule on your page like:
.win-listview {
height: 100%; /* (or you can specify absolutely with something like '600px') */
}
On this page in the dev center it says...
Setting the ListView control's height
The ListView does not dynamically adjust its height to fit your content. For a ListView to render, you must specify an absolute value for its height. The Windows Library for JavaScript style sheets set the ListView control's height to 400 pixels.
From a design standpoint, you probably shouldn't be doing vertical scrolling on a ListView. They're designed to be laid out horizontally (as are apps in general). Combining horizontal and vertical scrolling can make for an awkward user experience. I wrote some articles about this.

Set facebook canvas app height equal to the height of the Facebook sidebar

I have a facebook canvas app setup with width and height as fluid in the Advanced app settings.
What I need to achieve is to set the height of my canvas app equal to the height of the Facebook sidebar(side pane where all the FB adds and links appear).
Currently the canvas app is set to fluid which sets the height of the app equal to the view area, so what happens is the FB sidebar is bit taller than the view area and scrolls the page by default and hence creates space below my canvas app.
I have tried setting the height to fixed but then it removes the scroll bar(adds overflow hidden to the iframe) from the iframe which is not desirable as the app contains content which exceeds the fixed height.
Check this for better understanding http://jsfiddle.net/v2QKN/5/
Just stop the scroll when they have reached the bottom
Ok, this is not probably the neatest solution out there.
But that white space kept happening to me when the body inside the iframe was fully scrolled already, so the main window scrolling took over.
So, a very effective solution for me is simply stopping the scroll when I don't need it anymore. Users are going to scroll inside the canvas 99% of times. So to do this we only need a few lines of javascript:
$("body").on("mousewheel", function(e) {
if ( ( window.innerHeight + document.body.scrollTop) >= $("body").height() ) {
e.preventDefault();
e.stopPropagation();
document.body.scrollTop = document.body.scrollTop - 1;
}
});
See it in action here: https://apps.facebook.com/hiphopexpress/
Note: the mouse wheel event is only triggered by mouse wheels. Still, with this solution we are improving the experience of the vast majority of our desktop users.
It's not possible to set your canvas app to be the height of the sidebar, however you can use a fixed canvas height along with the Javascript SDK setAutoGrow function which will resize the frame that the app is contained in to fit it's content. I think this is your best option, if you don't want the side bar to be taller than your app content.

Want an iPhone / iPad / iOS Webpage that is 100% width/height

I'm trying to get a site that is simply 100% of the possible width/height of a device, after scrolling down far enough to get rid of the address bar. Hopefully that makes sense?
I just need the simple dimensions so I can scroll the device to 0,0 and see as much of my page as possible. e.g. simply 320x400 (320 width, 400 might = height - title bar - footer)
The reason for this is that I'm putting a single DIV on a page that is a "viewport" into content that moves around, think google maps. I just want this div to fill all available space.
The problem is that I can't seem to detect the available window height. I always seem to get the screen size - the title bar - the address bar - optional debug bar - footer. How do I detect the "largest possible size"?
Put html,body with height:100%; and the div as position:absolute;top:0;bottom:0;left:0;right:0; and then you dont need the exact width/height of the viewport, the div will already use the maximum possible space.
But if you still want to detect, jQuery got the $(element_you_want).width() and .height() also that might do the trick. Try with document or only body (with 100% height)
If you're using javascript, try alerting: 'innerWidth';
http://www.quirksmode.org/dom/w3c_cssom.html

Categories