Setting DocumentElement.style.overflow = 'hidden' Jolts To Top Of Page?

Mar 2, 2011

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.

View 2 Replies


ADVERTISEMENT

Removinng Overflow-y Hidden/setting Overflow-y Visible?

Nov 12, 2010

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.

View 4 Replies View Related

How Would I Discover The Text In A Block Element Hidden By Overflow:hidden Style Being Set?

Sep 20, 2005

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?

View 2 Replies View Related

Recovery Content Of Textarea With Overflow:hidden Style

Mar 9, 2006

i 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?

View 2 Replies View Related

W3C-body Overflow:hidden

Mar 22, 2003

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?

View 11 Replies View Related

JQuery :: Obtain ORIGINAL Style Setting - And NOT Computed Style?

May 5, 2010

My understanding had been that $.css("width") would return the original user selected style, eg "100%" or "10em", and $.width() returned the computed width, always in "px". Not so, following the code through for .css(), it calls something called getComputedStyle and the only difference between the two functions turns out to be a post-fix of "px" on the .css() result - not very useful. I need to know whether my user has called me with a proportional dimension, or a fixed one. How to tell with jQuery?

View 1 Replies View Related

JQuery :: Style Image In Scrollbar When DIV Has Overflow?

Apr 30, 2009

Any plugin using jQuery that can do something like this? [URL]. I want to style or set an image in the scrollbar created when a div has an overflow.

View 1 Replies View Related

IE7 Ignores 'overflow:hidden' When Moving Element

Dec 2, 2009

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 Related

JQuery :: Animate:scrollTop Blocked By Overflow:hidden In Chrome?

Dec 4, 2010

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]...

View 1 Replies View Related

JQuery :: Natural .height() Of An Element With Set Height And Overflow Hidden

Jun 30, 2010

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

View 2 Replies View Related

JQuery :: Setting The Style Of A Div?

May 11, 2009

I am just moving over to jquery. Previously i had been using prototype and scriptaculous, im trying to figure out how to set a div relative to another div. in prototype i would of used 'setStyle' to do this. how to do the same in jquery?

View 2 Replies View Related

Get A Overflow In A Fixed Sized Div - Add 'overflow:scroll' To The Div ?

May 22, 2011

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 Related

Issues Setting Style.float = 'none'

Oct 5, 2006

I'm trying to change a div (#box) from being floated left to not being floated (i.e. being a normal block-level element) when a link (#move) is clicked. I'm doing this:

window.onload = function() {
var z = document.getElementById('move');
z.onclick = function() {
document.getElementById('box').style.float = 'none'
document.getElementById('box').style.width = px'
}
}

However, the div remains floated (confirmed by the handy FF web developer extension). The width does change, so it seems my problem is with the style.float bit. What am I doing wrong?

View 13 Replies View Related

Setting Style Attrabutes Of Multiple Layers

Jul 23, 2005

I have a couple of layers that are hidden.

When an image is moused over, I want to show the appropriate layer,
then hide it on mouseOut.

The problem is, I get an error telling me "document.all[...].style is
not an object" for whatever layer I have created first. It seems as
though when the second layer is created, it overwrites the first one ....

View 8 Replies View Related

Setting Cursor Style Attribute But Doesn't

Mar 5, 2010

I have <style> tags in my <head> section, and only want to set the cursor attribute if the user's browser has JavaScript enabled. This code however doesn't set the cursor attribute even if JavaScript is enabled:

[Code]...

View 2 Replies View Related

Setting Table Cell Style Attributes

Jun 19, 2007

given a cell from a table...
function Tbl_GetCell(tbl, row, col)
{
var theRow = tbl.getElementsByTagName("tr")[row];
return theRow.getElementsByTagName("td")[col];
}

I can set attributes like width, height, and align, but how can I set cell style info?

cell = GetCell(tbl,row,col)
these work fine... cell.align = "center"; cell.height = 22;
but this doesn't... cell.style = "font-weight: bold; text-decoration: blink"

View 2 Replies View Related

Setting Value Of Hidden Variable?

Dec 1, 2010

a user goes to a page, selects a value from a select box then clicks a link to run a report using that hidden variable as a parameter. I am attempting to place the value in the URL to pass it. I'm sure the javascript is working, and maybe it's the HTML I've messed up - not sure.Here is the javascript (the alert does return the correct value):

function OnChangeDay() {
//assign the day id to the hidden variable $day
x=eval(document.getElementById("day_loc_id_select").value)

[code]....

And here is the HTML that should send the value, but I get day= (nothing)

<a href='/depts/edoptions/excel_extract.php?ex=2&day=<? echo $test_day ?>'>SLIP Data to Excel</a>

View 1 Replies View Related

Setting Style.top Doesn't Work In Chrome Or Opera?

Nov 11, 2009

I have some simple code to have one div bounce around inside another. It works fine on Firefox and IE, but for some reason in Opera and Chrome it only moves left to right.

This suggests that Chrome and Opera allow you to dynamically set style.left but not style.top. This seems odd to me.

why this won't run as intended on Chrome or Opera?

Here's a very simplified version of my code to demonstrate the problem:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

[Code]....

View 2 Replies View Related

JQuery :: Setting CSS Style - Turn User Select Off For Unique ID

Oct 24, 2010

Are there limitation on what can be set for css styles? I have a script which sets a unique id but I wanted to turn user-select off for that item. I thought this would work:
var
id = 'wrapper_'
+(new Date().getTime());
var
wrapper = $('<div id='+id+'></div>'
);
$(id).css({'-webkit-user-select: none;'});

The error I get is:
Uncaught SyntaxError: Unexpected token }

View 1 Replies View Related

JQuery :: Setting Hidden Field Value In Html?

May 20, 2009

I have an hidden field in a form defined as follow: <input type="hidden" name="previewText" value="" /> To assign its value I used: var contentText = "<h2>Order Preview</h2>"; $("input[name='previewText']").val(contentText); It works fine but the html code is lost. Is there a way to retain the

View 4 Replies View Related

Setting A Hidden Field On Submit Of A Form?

Aug 8, 2011

I want to be able to set a hidden field with a value when I submit a form.

Here is the javascript

function submitEntry() {
var form = document.sobi2EditForm;
if (form.field_secondarycat1.value=='Nurseries'){

[Code]....

View 1 Replies View Related

JQuery :: Setting Value Of Textarea In Hidden Form Field

Dec 19, 2010

I am very new to jquery and I am trying to set the value of a textarea which is not in a form, into a hidden field which is in a form. In the text area, I have given it an id called refnote and ive used the text() to get the text in it. However, the problem is setting the retrieved text in a hidden form field.
$('form').submit(function(){
alert ($('#refnotes').text());
return false;
});

View 1 Replies View Related

JQuery :: IE - Setting Default Value Of A Hidden Single Select Dropdown

Mar 3, 2011

I have a single select dropdown in my application which is hidden for one type of user group. Before a user from this group can save any data, I have to explicitly select the default value of this dropdown for him as this dropdown is not visible to him.

Issue: In IE, this default value doesn't get selected as it is not populated but works fine in Firefox. Is this a jQuery bug?

View 1 Replies View Related

Setting An Empty Hidden Div As The Value Of A Form Field And Then Calling Inline Div Opener ?

Jul 23, 2010

I'm setting an empty hidden div as the value of a form field and then calling inline div opener using thickbox.js:

Code:
<a href="#" onclick="javascript:document.getElementById('previewdiv').innerHTML = document.forms['form1'].content.value;tb_show('Preview','#TB_inline?height=550&width=500&inlineId=previewdiv');"><span class="icon-32-preview" title="Preview"></span>Preview</a>
<div id="previewdiv" name="previewdiv" style="display:none;"></div>

The thickbox opens with the title "Preview", but is empty.I've alerted the div after setting it, and it does contain the formfield value.Why might this be happening? I've also tried setting the div like this (foo as dummy text - to no avail):

Code:
$('#previewdiv').html('foo');

View 2 Replies View Related

Browser Slow To Change State Of Elements When Style Changed To Hidden

Jan 17, 2006

'When my form is submitted, I have onsubmit pointed to the following
code snippet. But, the button is not actually set to disabled and the
style.visibility changes are not made for several seconds. It appears
that it goes into validateForm and doing the rest of this snippet
before the browser makes the changes.

How can I get the browser to immediately make the UI change?

function submitForm(servleturl) {
var submitbuttonelem = document.getElementById("submit");
submitbuttonelem.disabled = true;
document.getElementById("modgradeform").style.visibility="hidden";
var mydiv = document.getElementById("contentarea");
mydiv.innerHTML = "Validating the form.";
mydiv.style.visibility="visible";
var ret = validateForm();

View 6 Replies View Related

IE8 DocumentElement Is Null For Local Files?

May 18, 2010

My files are not hosted on a server using http. They come with many sound files to practice vocabulary. The problem is that IE8 does not give me the opportunity to load xml course info, I suspect it is because Microsoft might think IE is for network use only (funny they don't think that when MS Word is concerned). Everything works fine in opera and firefox but IE does not give me a documentElemet after loading the xml. Here is some code to reproduce:

Code:
<html>
<head>

[code]....

View 14 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved