I'm trying to set the max scroll length for my site.
I'm preloading each main page into invisible div's, but on every page the scrollbar vertical height is as long as the longest page I preloaded form external html.
Is there any way to set the maximum scrollable distance with javascript?
I have these empty spaces now on each page...
Change your hiddenPageClass to use display:none; instead of visibility: hidden;
Also, for future reference. Post relevant code here and/or an example at jsFiddle.net. Don't make us go to your personal site.
EDIT
You can see the difference in the two properties in this About.com question.
Related
I have a webpage which is visible nicely at a given width. I want it to remain at that width only. It can zoom in and out but I want the content to remain fixed with respect to that width.
The content of the webpage can be responsive also. Thats why I want it to remain fixed. Because I dont want the layout of the webpage to change with changing viewports of desktop or mobiles.
Red frame is viewport and green frame is webpage. Now image 1 shows a webpage with the given width. Images 2 shows webpage which has been scaled down to fit in the viewport but still has its content intact. Or it can be image 3 where the viewport is small and shows the same webpage with scrollbars.
I actually need this concept so that I can leave some markings(some points with fixed coordinates) on the page. And the markings remain fixed at their position despite of changing viewports.
I tried doing
<meta name="viewport" content="width=1286"> //1286 is the given fixed width here.
It solved the problem a bit but not totally.
Is this thing possible?
EDIT:
I think I was not clear enough. Let me explain it a bit further.
Actually the content inside is not in my control. I am trying to make a bookmark application. A static copy of the webpage of a specified URL will be saved with some modifications. Modifications will be addition of some markings as I explained before.
So the content inside can be anything.
Refer to this framework which is most widely used for Resposive Design CLICK HERE
I am new to HTML and am making a simple one page website and want to add the twitter widget but when I add the widget it goes below my form. Is there a way to make it go to the right of the page as well as adjust the width of the twitter widget. The code for the webpage is below.
http://codepad.org/QcPq5Xur
Thanks in advance!
Put the form inside it's own div container.
Set a specific width to this div of the amount of space on the left you want it to take up.
Create another new div, and insert the twitter feed script inside of this.
Set a specific width if desired to set an absolute width to it, or a percentage. If you don't set a width it should fill any extra space not used by the div containing the form.
As long as the width of the two divs is less than than the width of the browser area, they will display side by side. You could also wrap the two in another div containing a minimum width if you wanted them to be forced side by side no matter browser resolution.
that's because your form is wrapped with div which is a block level element. Try altering its display to inline-block
<div id="formContainer" style='text-align: center; display: inline-block;'>
<a name="form789985197" id="formAnchor789985197"></a>
</div>
After playing with hidden divs (display:none), I've noticed that the browser does not seem to bother downloading any images/flash files that are in that div, until the divs are changed to visible.
The problem with that is, on most users machines, when viewing a hidden div, there seems to be a good couple of seconds in waiting time for the browser to download images or swf files, etc... which == no happy user.
Is there any way to make the browser download the hidden div's content, while it's hidden, and not when it's been set to visible?
In JS or jQuery maybe?
Thanks
Don't use display:none; to hide images.
Try setting the following to hide the content.
height:0;
width:0;
overflow:hidden;
You could also try positioning the content off the screen with absolute positioning.
position:absolute;
left:-1000px;
Here are some options:
Start with the DIV visible, then add the hidden style using jQuery after page load, or after the browser has already fetched the images. This will likely happen so quickly no one will even notice the change.
Position the DIV off screen initially while things load, and fix the dimensions of the DIV (height/width) to be very small so that it doesn't take up visible space.
Use jQuery to load the content of the DIV at the same moment you want to make it visible--fetch the images on demand. i.e. $('#yourDivId').html('[html goes here]');
Use visible:hidden instead of display:none (but beware that it will still occupy space, so this may not work in all situations). You might place a copy of the image at the bottom of the page where layout won't be affected, but will still be fetched and browser-cached for when you make your other location visible.
One way which you can try is, instead of hiding them position absolutely with large negative left position and with minimum dimension may be 1 or 0.
Is there a way to display the vertical scrollbar immediately after the page loads using javascript? I have a jquery slide toggle animation that, when activated, makes the vertical scrollbar appear because the toggle animation makes the page longer. The problem is that when the scrollbar appears, the document elements "spasm" or "shake". If the vertical scrollbar appears before the jquery animation is activated then I won't have the problem.
Update: overflow-y:scroll; does the trick without much compatibility issues!
Depending on your current function, you can use jQuery (or plain JavaScript) to find the current max-height (that the element can expand to without making the page longer), and simply apply that height (or one that's smaller) with overflow: hidden. Once the new element has been successfully added, the overflow can be re-set to overflow: auto; (or overflow: scroll;).
Or you can set position to fixed on elements animated at begin to avoid scrollbars...
Can you create a jsfiddle.net with a little example of your code ?
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.