I am working on an Android app that makes use of HTML in a WebView.
I have a series of <div>s in my HTML. Something like this:
<body>
<div id='topdiv'></div>
<div id='contentdiv'>
<p>A bunch of content in here!<p>
<p>There is more content here than can fit on 1 screen.<p>
</div>
<div id='bottomdiv'></div>
</body>
Is there a way to make it so that bottomdiv or topdiv is rendered, but not scrollable? In other words, is there a way to prevent the user from scrolling down past contentdiv even though bottomdiv exists below it and is not invisible, but contentdiv is always fully scrollable?
I am open to any plain JavaScript, CSS, or HTML implementation. It would be nice if that was a feature you could turn on and off, but not necessary.
Since I am working exclusively on a mobile device, it does not help me to disable the scrollbar or capture mousescroll events and the like.
If I understand well what you want, the following can solve your problem. Use the overflow property on the body tag, like this:
body
{
overflow:hidden;
}
Another way to solve it would be to set your bottomdiv to hidden, either by using
visibility:hidden;
if you want it to take no space or using
display:hidden;
if you want it not to take any space.
Than, just change it with javascript according to what you want to do.
Related
I wonder how to achieve this effect on http://www.squarespace.com. What I mean is:
you scroll down and at one point the image of computer monitor stays at fixed position
after that, the images keep changing while you scroll.
How can you control content and change CSS using Javascript? It should be on window scroll event:
window.onscroll = function () {
// but I don't know what to use here
}
At smaller browser width, the above elements become a carousel, but I am not interested in that.
Because of the tags on this post I'm going to assume that this question is regarding the skrollr library
Skrollr is controlled via HTML data attributes. What you're seeing when the monitor scrolls, and then becomes fixed at a given position, is referred to as "pinning". How you define data attributes in Skrollr can be pretty confusing at first, but once that is understood, the library is kind of a dream to work with.
I printed and pinned Petr Tichy's cheat sheet next to my monitor the first few weeks of my first skrollr project.
An example of pinning in Skroller would be accomplished as such:
<div id="example"
data-100-top="position:fixed;"
data-anchor-target="#example">
These words are pinned 100px from the top of the screen
</div>
The purpose of Skrollr is that knowledge of jQuery/JavaScript isn't really required. The css is manipulated by the library, and defied in the data elements. The above example shows changing the position to fixed, but if you wanted the div to expand 100px from the top you could input width/height css parameters in there, or just about any other css you'd like.
If you're looking for a more robust skrolling library, in which jQuery knowledge is more of a requirement, I recommend you take a look at ScrollMagic (my lack of reputation prevents me from linking to scrollmagic).
(Sorry in advance for the long post)
I'm trying to help an open source CMS project called N2 CMS modernize its drag & drop toolbox. I'm not sure what the best way to do this is, but I basically want to take a floating menu and "dock" it against the left side of a web page, such that the entire body of the page is shrunk in width. However, the functionality of this panel depends on the user's ability to drag something out of the panel and drop it onto the page.
This is what it looks like currently. There is an outer "management" page wrapper (the blue bar that is visible at the top) and an inner iframe which wraps the content page being edited. The drag & drop panel is a floating div that is rendered by including some code in the content page akin to #{ RenderToolbox(); } (it basically just writes the div + some inline CSS out to the page)
This is what I'd like it to look like, ideally. You can see how the toolbox now has the whole left column (so the page isn't obstructed) and the whole width of the page has shrunk.
Is it possible to accomplish this by injecting a <div> into the page? Maybe some kind of jquery that can re-parent the whole body inside of a <div> container? Is this even the best way of going about this sort of thing?
I guess something like this would be possible:
jQuery(function(){
$('body').wrapInner('<div class="wrap" />')
})
However, we are worried that it might be hard to make this look good on all layouts, e.g. layouts that use absolute positioning or html/body margins.
Therefore, we are turning to the larger Stack Overflow community for any advice and thoughts on this problem. Your guidance is much appreciated!
I have started working on a simple web application using Twitter Bootstrap for my UI and i have a div with overflow-y property. I wanted to get rid of the default scrollbar and use some cool custom scrollbar using jquery like this example. I have tried the previous example with my nested div which is in the following format.
<div class="row fill">
<div id="users" class="span3 offset1"> <!-- left navigation Pane -->
<div id="contentWrapper" class="span7 fill">
<div>Scrollable content here </div>
But when i try implementing the custom scrollbar, the default one shows up and when i inspected it with the developer tools, the custom component lays somewhere at the top of the page and not visible. Is there any way we could start using custom scrollbars with the fixed grid layout of the bootstrap? Do we have any good resources on this? I would really appreciate your help with this.
I guess i figured out where the problem might be. When i followed the jquery example mentioned above, the content div that was supposed to be scrollable was modified while execution and the following div structure added.
<div class="content mCustomScrollbar _mCS_1">
<div class="mCustomScrollBox" id="mCSB_1">
<div class="mCSB_container mCS_no_scrollbar">
<div class="mCSB_scrollTools"> ....... </div>
</div>
</div></div>
When there is data already present in the content div, the modified piece of code has it inside mCSB_container mCS_no_scrollbar and it works fine as seen here. But when the content div is dynamically appended with the user input, then during execution, the text is being appended to the 'content' instead of 'mCSB_container mCS_no_scrollba' div. Is there any way we could make it work? Thanks for your help.
First, I'd urge caution in using custom scrollbars - while the idea sounds alluring, I've found that it is one of those things that seems like it should be easy to do, but is in fact quite a bit trickier to get right. Keep in mind that people are all used to how their browser's native scrolling works. Additionally, many users may change their system's default scrolling settings, which may cause your solution to scroll at a different speed than they expect. If you stray too far from what the user expects in the functionality or features (clicking to scroll, mousewheel, etc), your custom solution is going to stick out like a sore thumb, and will seem far less usable than native scrollbars.
With that in mind, I think you'd be best off using an existing solution rather than trying to roll your own. I can recommend jScrollPane - I actually just used it for a project, and it was very easy to add - took me all of 10 minutes, and it is very easy to add your own styling. Pay particular attention to the "downloads" section though, it relies on a couple other scripts to get things like mousewheel scrolling working correctly.
So, I am developing the first serious web site. I want to implement the following scenario, but I need guidance and advice. There is a button <input type="submit"> on my web page. When the user clicks it, I want it to open some HTML content which will be shown on top of all page content (and positioned centrally, but I don't care about that detail at the moment). It should act very similar to the way the photos are viewed on Facebook. When the user clicks the photo thumbnail, the photo opens on top of and across all page content.
Now, I've implemented this already, but I think that my approach is not recommendable, as it looks a bit clumsy to me, especially when I think about the maintenance of the site:
I added a <div> as the last element to the <body>; it is positioned absolutely and collapsed and serves as a container. When the button is clicked, that <div> is filled with the content and the state is changed from collapsed to visible.
I would very much appreciate if someone would like to share the standard methods used to achieve this effect and opinions . I am guessing that AJAX and jQuery should be used heavily for this (I used pure JavaScript in my design described previously). I am looking for some code samples and resources. Thank you so much.
What you are looking for is a modal dialog and not a pop-up. Pop-ups are new windows, while modals are HTML elements that block the page behind it for emphasis on forward content.
One way is to have a <div> appended to the body, usually to the end of the body and have it positioned absolute. That div will have top, bottom, left and right zero to stretch to fit the viewport. Within that div is another div that is also positioned absolute, relative to the parent, viewport-fitting div. Positioning is up to you, but usually it's centered using a formula:
center = (total length - modal length)/2
Content is up to you. You can have the content already loaded and hidden in the DOM which you can just display later. Or load the content via AJAX if you wish.
jQuery already has a modal plugin in the jQueryUI suite which you can use that packs a lot of methods to add and customize.
There are a lot of approaches out there. You could use jQuery UI (http://jqueryui.com). But I like the approach Twitter's Bootstrap is taking: http://twitter.github.com/bootstrap/javascript.html#modals
This is a very clean setup and you can load the content via AJAX with a little selfwritten function. You don't need to write everything yourself because there are plenty of plugins out there. And the bootstrap modal plugin is standalone so you can just use this one.
I like to use it and generate the content div with an AJAX request.
You can position: absolute; the popup box and set it where on the screen you want it. Then use z-index to put it over the content.
Here is a demo: http://jsfiddle.net/e6BEu/
I believe what you're looking for might be Lightbox-like? It could give you some ideas at the very least.
Edit: Or this one which supports text and such.
I have written a file using html and javascript.
In that Vertical scrolling should be there, but i want to stop horizontal scrolling.
How can I do that?
Sarfraz has already mentioned overflow-x, which is one answer although it means (as it says!) that anything that would have been off to the right is now unavailable to the user. There are use cases for that, but in the main it's undesireable to bother to have content the user can't access.
The question is: Why are you getting horizontal scrolling at all? In the normal course of things, the browser will wrap content such that there isn't any horizontal scrolling required. Provided the user has a normal-ish window size, you cause horizontal scrolling in your design by having elements that you've specified as being a certain width, either via style information or by having non-wrappable content (like a big image). For instance, this won't require horizontal scrolling:
<p>...lots of text here...</p>
...but this will:
<p style='width: 1200px'>...lots of text here...</p>
...if the user's browser window is less than 1200 pixels wide.
So if having the content off to the right unavailable isn't what you intend, my answer would be to find the elements causing the scrolling and correct them.
Apply following style to that element:
overflow-x:hidden;
or it should be:
overflow:auto;
overflow-x:hidden;
this will make sure that vertical scrolling is there when needed.
if you want to use this in every browser, you shouldn't add no width to the element, and then it gets no horizontal overflow, in every browser.
If I understand your question correctly, you want to prevent your content from going beyond the boundaries of the browser window. Very often, designers set their layout widths to 960px in order to set a fixed width centered on the page, which fits nicely within a 1024px x 768px computer screen. As per below comments, a smaller resolution computer would gain scrollbars because of this. You would do that with something like:
<html>
<head>
</head>
<body>
<div style="width:960px; margin:0 auto;">
... The rest of your content goes here ...
</div>
</body>
</html>
You can read more about browser width here:
http://www.fivefingercoding.com/web-design/is-there-a-perfect-web-design-width
If you find that the content stretches beyond this width, then a specific item inside the page is too wide. Look at the page yourself to identify what it might be, or provide a link to stack overflow for our help. To give you an example, having this inbetween the above div would be problematic:
<table style="width:99999px;"> ... table stuff ... </table>
if you want your html.body or div liquid;
div.sample{ width:100%;}
sample div will resize whether your screen big or small/
without scroller/
If you view the file using a browser, you can set the width of the content by setting it to a percentage.