W3C-body Overflow:hidden
Mar 22, 2003the css line
body { overflow:hidden }
doesn't work with the W3C standards
is there another way I can get rid of the scroll-bars on the body of the document, and still be W3C compliant?
the css line
body { overflow:hidden }
doesn't work with the W3C standards
is there another way I can get rid of the scroll-bars on the body of the document, and still be W3C compliant?
I'm currently building a website that has a flash fullscreen popup at the beginning. The flash popup loads fullscreen, therefor I've set overflow-y to hidden. As soon as the flash popup is done, it removes the div it the flash is in using javascript, but I can't figure out how to put the overflow-y to visible.
I'm assuming I need to build a Javascript function to show overflow-y visible, and then need to call to that function from the flash file. I just can't figure out how to build the javascript function since I suck at javascript.
All the CSS is in the original file, so not in an external stylesheet, this needs to stay that way because I have to implement the code in to several different web sites.
Specifically, assume I have a div tag of absolute dimensions. I need
to figure out, first, whether or not the text inside the div tag is
partially hidden by the overflow setting, and if so, what the hidden
text is.
Is this even possible? Obviously, the rendering engine in the browser
"knows" this information, but is it accessible through Javascript?
In the top right of the page is a JavaScript (Prototype) Carousel that scrolls through images when you click the arrows. It works properly in all browsers except IE 6 & 7 (it does work properly in IE 8) with my primary concern being IE 7. When you click on the right arrow to scroll to the next image it scrolls properly but the entire strip of images is displayed and it sites on top of the page's content.I've tried all of the overflow:hidden hacks I could find so.
View 1 Replies View Relatedi have a tetxtarea, with the style overflow:hidden, and a long text.
because of the overflow, user does not see the whole text but a part.
is there, in an IE browser, a mode to recovery the effective text
than user see?
I've been trying to implement a smooth scrolling animation in my page, which works fine in firefox and IE8 (haven't tested any older versions yet). But doesn't seem to work in google chrome (and probably safari either I guess). I have 4 divs on my page, positioned absolutely 2 by 2, only one div should be visible at a time, so the body has gotten an overflow:hidden. When an anchor-link to one of those divs is clicked the javascript gets its position,then scrolls towards it. etting the position works, but the scrolling does not work in chrome.
Now, when I remove 'overflow: hidden' from the body element, the scrolling does work in chrome, but of course adds the scrollbars which I don't want.
[Code]...
I have a pop-up window system on my site that shows an absolutely-positioned div over the entire page as a "pop up" of sorts when someone clicks a link. I use this simple line of Javascript to disable page scrolling when a "pop up" box is opened by a user:
document.documentElement.style.overflow = document.body.style.overflow = 'hidden';
The problem is that when a user is scrolled down on a page and clicks a link to bring up one of my pop up boxes, when the overflow is set to 'hidden' to disable scrolling, the page "jolts" back up to the top (similar as to what would happen if someone clicked an <a> element with href="#" ). However, the links are not actually links, but span tags that are programmed with JS to trigger the scrollbar to be disabled when clicked, so that is not the culprit here. I've narrowed the problem down to that one line of code which I posted earlier. Apparently, setting the documentElement overflow style to 'hidden' scrolls the user to the top of the page automatically along with "disabling" the scroll bar on the page.
I am wondering if there is a way to prevent this jolting to the top of the page each time that JS code is triggered. I don't want users to have to scroll back down to where they were each time they open a pop up dialogue box on my site, as this would be detrimental for usability purposes.
Trying to get the height of an element whose height is specified in the CSS.
So I am trying to animate the height of an item, where I have:
<img id="myButton" src="myimage.jpg" />
<div id="myDiv" style="height:50px;overflow:hidden">
asdklf
[Code]....
However, it only registers as 50, even if the element is 500
While I am new to javascript, I've programmed in a dozen other
languages for decades, and now have been working in javascript
intensively for several weeks. My first comment -- which has nothing
to do with this problen -- is on how its richness makes it so
difficult to provide adequate reference material. After working only
with what I could discover through Google searches and actually
writing some nifty fast incremental select element populating code --
what I found on the Web, which has been cited in many locations, is
ugly code and sloooow when search a list of, say, 2000 possible
entries for inclusion in the box -- just with those hints.
I finally broke down, bought what the reveiws say are the two most
complete books -- Javascript Bible and Dynamic HTML, The Definitive
Reference (both by Goodman), and am aghast: With the "Bonus Chapters"
in the former, they total more than 3,000 pages! And with their
in-depth indexes, it's still very difficult to find what one needs.
(The HTML and CSS speification publications add another 400 pages . .
..) As a truly elementary example: I wanted to return from a function
as a result of a test, not by running it out: The "return" is not
indexed, nor are any of the words that might lead one to it. In fact,
it is shown in some examples about 980 pages into the book, but
nowhere is it actually documented. Yes, I know, every language has a
"return" statement, but its usage and syntax varies -- and on some
occasions, it's actually called something else.
So, to my current issue. For reasons that are valid -- please don't
ask, "Why do you want to do that?" -- I need to hide the page in its
entirety until the onload script has altered it based on certain
criteria. After doing a lot of brute force stuff -- setting font
color to "white", etc., etc. -- I discovered that one can put the
attribute style="visibility:hidden" directly in the <body> tag --
which itself is not easily discovered. But: Tables in the body that
have a non-zero "border" attribute still show -- just the borders!
Yes, I know I need to learn CSS as well; give me a break, guys! I do
have that spec as an HTML doc, and it was there I finally found this
out. You know, you can't look such things up by concept in the
indexes of either book, or the HTML spec, or the CSS book, unless you
already know the term that implements it; if I know the term, I don't
need to look it up! In any case, try looking up "hidden" in either
book; you get no hint that it can be applied via style to any element.
If you know it's available as a style attribute, then know the
attribute is "visibility", why than you can find it . . . and by that
time, you must know enough that you don't need to find it. (Again, a
Google Groups search on words associated with the concept told me what
terms to use, and then I didn't need to use the book . . .)
I apologize for the rant (Fortran was good enough for my grandfather,
it was good enough for my father, and it's good enough for me -- bah,
humbug!), but it's been a very frustrating couple of weeks.
The real question: What about them table borders? So far, I'm
defining their values as zero, then setting them to their final values
at the same point that I make the body visible. Should I need to do
all that? What should make that unnecessary?
I want to test if I get a overflow in a fixed sized div and in that case add 'overflow:scroll' to the div. I guess there is a way to check if a generated contents (from PHP) will create an overflow but how?
View 3 Replies View Relatedim writing a .net mvc web app and in this step Id like to send a post back to my controller including date and time values that i have stored inside hidden fields on a form. where im getting confused (I am very new to java script) is how I can now read those values and add them to the URL I'm constructing
Code:
<asp:Content ID="Content2" ContentPlaceHolderID="Menu" runat="server">
<form id="form1" name="form1" action="WorkOrder" method="post">
<input type="hidden" id="time" name="time" />
[code]....
Right I have a process page in php which is fairly long and complex with many options. If a certain option case is met as this ie: we've hit the Note Saved case.
// save notes against company
if ($_POST['a']=="Save Note") {
if (addnote($_POST['notetitle'],$_POST['notebody'])) {
$err = "<p id="returnresults"><font color="red"><strong>Note Saved</strong></font></p>";
} else {
$err = "<p id="returnresults"><font color="red"><strong>Failed to save note.</strong></font></p>";
}
}
I want to then wait until the page load is complete and then do the following.
document.getElementById('addevent').style.display='block';
The reason I need to wait for page complete is that the div that needs to be displayed it one of the last parts of the page rendered so triggering the above too soon leads to the div not actually being available to be shown. Now my current fail attempt at doing it was this echo "<script type="text/javascript">if (confirm('You have not yet added a call back event do you wish to do so now?')) { document.getElementById('addevent').style.display='block'; } However it doesn't display the hidden div
I have a div tag element and a hide/show button above it. I'm able to handle the hide show of the contents all right via the button, but I want the div to be hidden when someone clicks anywhere else in the document, save inside the div area itself.This functionality is similar to what you see on the sign on panel in twitter.com. Press the sign in, the div sign in panel displays. Press the sign in link OR anywhere else on the document outside the panel. The panel is hidden.What's the best way to script this functionality in jquery?
View 1 Replies View RelatedI'm trying to make my body content scroll at the same time as an iframe located within the body. This has to do with the age old problem of mouse focus on iframes. When my mouse reaches the iframe and it takes over focus, I would like the body to keep scrolling until the iframe is right at the top of the screen. After that I want to relinquish focus to the iframe. I don't mind if the iframe starts scrolling as soon as the mouse reaches it, so long as the main body keeps scrolling for a while.
View 5 Replies View Relatedhow I might use JavaScript to detect the overflow of text in a DIV. Currently, I have the CSS set to Code:
overflow:auto
However, having scroll bars are pretty tacky. Instead, I'd like to be able to detect the overflow, which would then add a small <a href> link that says "More."
I discovered this really great jQuery plugin which adds a scroll to top link to every page (implemented through my CMS) - http://blog.ph-creative.com/post/jQu...ll-to-Top.aspxIn Firefox its fine but in IE after going through a few pages I start to get an alert box which says "Stack overflow at line: 13". I understand that this may be caused by an infinite loop but being a JS novice I'm kinda lost as to where to start.
View 1 Replies View RelatedI am trying to get a simple set of Javascript tabs to work properly. I have just two tabs and I want to set up the script to have the second tab automatically hidden prior to reading the javascript code because right now it shows the contents of both tabs when the page is loading and then the second tab disappears after all the script has loaded.
I have the jquery script linked to on the page and here is the way my script looks to run the tabs:
Code:
I want to add something like style="visibility:hidden;" to the DIV that isn't shown on page load and have it added and removed as necessary when users click on the tabs. So basically I would like the generated code to look like this:
Code:
It's possible to style document.body not to start at 0,0 for example: body {width: 1000px; margin-left: auto; margin-right: auto;} This means that X/Y of the body is not 0,0 but how can I find out what the position is using javascript? document.body.offsetLeft; is 0 and offsetParent is null yet if I position something absolutely at 0,0 it goes to 0,0 of the window, not the body!
View 2 Replies View RelatedSay I have a text area. When the user clicks a button the entered text
displays in a DIV. If there's too much text to fit in that DIV then the
overflow text (the text that doesn't fit in the first DIV) displays in
an adjacent DIV.
Is there a way to know if there's "overflowing" text and, if there is,
if there a way to know what that text is?
When loading my web page I'm getting this error"stack overflow at line 0"What can be the reason for that? Is it related to the images I'm using in my site?
View 10 Replies View RelatedI have a width limited box on a website that contains text. Normally the text will break across several lines as expect just fine. However, every now and then there is a really long word that breaks out of the box:
Code:
|--------------------------|
| Some would say that |
[code]....
Copy the following code and run it in IE and Firefox. In IE, you can see it works pretty damn good, with the center column using a div with "overflow". That is what I want!
Now, in Firefox, it doesn't work like that probably because it's doing it the RIGHT way
So, with that said, can any of you javascript guru's think of anything that we can use some JS to force the middle div to use that scrollbar when the content gets past the initial browser height? Code:
Is there any way to test if there is overflow in a text area (i.e. a scrollbar is displayed)? This is a read only field so I could change the textarea to a div if necessary.
View 1 Replies View RelatedIs there any way to prevent this error, flush some memory maybe?
Is it caused by logical coding error? (script runs error free except this)
I'm using jquery height() function to make it so that a div inside my page fills the gap between the header and footer (which are fixed height) so that the entire page is fullscreen. However I want any content in that div to overflow:auto; When I set the css to overflow:auto; the div disappears totally.$("#col3_tab").height( contentH-$("#col3_content").outerHeight() );contentH is simply the sum height of the header and footer and #col3_content is a fixed height div above the div I want to be auto scroll.
#col3_tab {
width: 100%;
background-color:#CC99CC;
[code]....
I'm testing out the Opera browser to see what to expect from the upcomming Wii browser. But whenever I try to play this javascript game (www.kirl.nl/javaSnake.html), I get the following error:
"ECMAScript interpreter stack overflow.
Script terminated."
How does Opera handle Javascript diffrently, is there possibly a site wich lists the diffrences between the browsers and how they handle code?
Any specific Opera quirks you know of?