• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 687
  • Last Modified:

How prevent Frame from scrolling when mouse is dragged?

Hi,

I have a relatively simple page with a Frameset with 3 rows, with a Frame in each:

<FRAMESET rows="65,30,15,*" frameborder="0" border="0">

<FRAME name="headr" src=head.htm" scrolling="no">
<FRAME name="tools" src=head.htm" scrolling="no">
<FRAME name="filler" src=head.htm" scrolling="no">
<FRAME name="main" src=head.htm" scrolling="no">

</FRAMESET>

The problem is that if someone clicks in, for example, the area where the first frame is, and drags the mouse, the stuff inside the first frame scrolls (even though I've turned off scrollbars)!!

What can I do to prevent this scrolling?

I guess it'd probably be better to not use frames, but this is a page that I don't have total control of, and I have to try to solve this.

Thanks,
Jim
0
jimcpl
Asked:
jimcpl
  • 14
  • 6
  • 6
  • +4
4 Solutions
 
COBOLdinosaurCommented:
>>>but this is a page that I don't have total control of

You have no prayer of getting a solution unless you can script on that page.

Cd&

0
 
jimcplAuthor Commented:
Cd,

Ok, I should clarify what I meant by "total control".  What I was trying to say was that I'm kind of stuck with that FRAMESET/FRAME structure.  I can probably change/add some stuff to it.  

For example, if adding some Javascript would take care of it, I could do that to either the main page (example in my original post).  

I don't know if that makes sense?



Jim
0
 
bhavdeep_sachdevCommented:
In the body tag of the docment that you don't want scrolling in, add an onselectstart event:

e.g. your body tag in "head.htm" can look like:

<body onselectstart="return false;">

You don't have to do anything to the frames.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
COBOLdinosaurCommented:
the problem with onselectstart is that it is IE only.

<body onmousemove="window.scrollTo(0,0)">
Should work quite effectively.

Cd&
0
 
jimcplAuthor Commented:
CD,

The onmouseover doesn't work very well.  I can still scroll the contents of the frame, and once that's done, it'll stay scrolled unless I happen to move the mouse pointer over the scrolled frame.


bhavdeep,

The onselectstart seems to work better than the onmouseover, but if I carefully put the mouse pointer near the bottom of a frame, then click-and-drag, I can still cause the frame contents to scroll!!  

This comes closest so far, but my being able to still scroll seems very strange?

I'm not sure if IE vs. other browsers is an issue... I'll have to check.

Any other ideas?
0
 
ZylochCommented:
Although this may be IE only, a simple way is to try this:

<body ondragstart="return false;">

The ondragstart only fires when the text is starting to be dragged, although I'm not sure if that will help you, it might.

--Zyloch
0
 
ZylochCommented:
Nevermind, the ondragstart doesn't work. It seems the text must be selected first. I'll look into it.

--Zyloch
0
 
jimcplAuthor Commented:
Zyloch,

Thanks.

FYI, I've posted a simple, but more complete example at:

http://members.cox.net/ohaya/small.htm

The top part of that page illustrates the problem with the scrolling.  

I've done some further testing, and this problem with scrolling only seems to occur with IE.  Netscape seems to handle it ok.

The fundamental scenario seems to be having a table inside a frame.  In the test page above, the table is suppose to fill the frame 100% (width and height), but you can still scroll the page within the frame.

FYI, I've gotten some negativity about this (frames/tables), and I understand that.  My problem is that I was asked to resolve this problem (I'm not the person who designed our pages), so I appreciate any help you all can provide.

Thanks,
Jim
0
 
ZylochCommented:
If you are asking for perfection of not scrolling, this is not an easy task. For basic preventing dragging, you should use onselectstart.

After experimenting for a few hours, I found that anything involving testing for an onmousemove after an onmousedown will delay too long therefore the astute user to be able to click and drag from the bottom of a frame.

I have come up with something quite crude, but it should work alright. The only problem with this approach is that whenever the user clicks on the document, a brief flicker will ensue. Note that this should be cross browser applicable and assumes the user doesn't have a computer from the stone age.

Because I could not use onmousedown even after futilely searching at google.com for some time, I decided to resort to a simple onclick. This is what I came up with:

In a <SCRIPT> tag in the HEAD section, type:

<script language="JavaScript">
<!--
function stopDrag() {
else {
self.blur();
setTimeout("self.focus()",5);
}}
// -->
</script>

Now, in the BODY tag, include this:

<body onclick="stopDrag();" onselectstart="return false;"> [NOTE: I put in onselectstart just as a second safety. You may omit if you please.]

What this code basically does is that whenever you click in the window, stopDrag() is called. Inside stopDrag, the window blurs itself for 1/20 of a second before refocusing. There needs to be a setTimeout otherwise the window will refocus immediately due to dragging. The setTimeout can be set all the way down to 1 millisecond, but that seems unnecessary. The only problem with this script is that it will look like flashing to the visitor, and that may be annoying. I could not find another way to implement something that would occupy the computer while it clicked to prevent dragging from occuring other than an alert box, and that is too annoying.

I have tried dragging with this setting on, but it is too fast for me, especially if you have onselectstart on. You would have to be extremely lucky to drag this.

IMPORTANT NOTE: This onclick WILL affect your links. Therefore, I propose you do this. Inside all your hyperlinks, include this:

<a href="somewhere.html" alt="something" onmousedown="window.location='someplace.html';return true;"></a>

This will ensure your links get pressed. This is because onmousedown is called before onclick, so the link request will be executed AND the window will not blur.

I cannot get the link to point to another frame correctly as of yet, but if you want the whole window to change, you would do this:

<a href="somewhere.html" alt="something" onmousedown="parent.location.href="someplace.html';return true;"></a>

IN CONCLUSION

This method works great except for the flashing. However, I feel that you should stick with the onselectstart even though people can drag down your frame. This is because not that many people on the web are that smart. However, if you choose to use my method, feel free to do so, and if you have any questions, please ask.

--Zyloch
0
 
ZylochCommented:
I have just took another peek at your site and realized your links needed a target=_blank. Therefore, I felt obligated to add that you can do that with my example by doing this:

<a href="somewhere.html" target=_blank onmousedown="window.open('','somewhere.html','','width=300,height=300,scrollbars=yes,status=yes');return true;">

Feel free to add whatever else you feel like in the open() function. You need the href and the target for people who have disabled JavaScript.

If you choose to do window.open(), you target page must in the body tag have this:

<body onload="self.focus();">

Or the page will automatically blur()

[Another reason why you should convince the person who created the site that onselectstart is enough :)]

--Zyloch
0
 
cjmosCommented:
try, in the body tag of the page in the troublesome  frame.

<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" margin="0">

sounds odd but it once worked for me

0
 
jimcplAuthor Commented:
Zyloch,

I prefer simple solutions :), so I'm leaning towards trying to convince them that the onselectstart is "good enough" as you're suggesting, but I still need (would like) to understand why this problem is occurring at all (in IE only, the problem doesn't seem to exist for Netscape)?

Questions:

1) The example page has a single table occupying 100% (width and height) of the topmost frame.  Since this table occupies 100%, why is scrolling occurring at all?  If you open the page in the topmost frame by itself, without frames (http://members.cox.net/ohaya/head.htm), no scrolling occurs in IE.  Why?  Is this a bug in the IE frames handling?

2) I don't quite understand what the conditions are where the onselectstart method is NOT preventing scrolling.  I know that I can still cause scrolling even when I have the onselect start, but I don't quite understand what it is that I'm doing to cause this scrolling.  It seems to scroll sometimes, and not others?

Thanks for all of your (and the others) help.

If I can get a good grip on the above 2 questions, I think that the approach that I can take is that this seems to be a bug in the IE behavior, and the onselectstart works around the problem in most cases.  That should be good enough explanation for our customer.

At the same time, from a technical standpoint, I'm still VERY puzzled/curious about why the scrolling is happening even though the table is 100%!!!

Thanks,
Jim

0
 
cjmosCommented:
Did

<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" margin="0">

not work?
0
 
jimcplAuthor Commented:
cjmos,

Sorry.  The real production page does have that in it, but still has the scrolling problem (I think because it has some hidden DIVs that are taller than the number of pixels allocated in the FRAMESET).

The distilled the real page down to the sample page and left those out because the smaller sample page illustrates the problem that we're seeing.  My apologies that I didn't mention this, but I thought that it'd just confuse the issues.

Jim
0
 
seanpowellCommented:
Another option for you...
You "must" have the doctype to get IE into strict mode...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<style type="text/css">
* html
{
    overflow-y: hidden;
}
* html body
{
    overflow-y: auto;
    height: 100%;
}
* html div#content
{
    position: absolute;  
}
</style>
</head>
<body>
<div id="content">
<table width="100%" height="90%" border="0" cellspacing="0" cellpadding="3" bgcolor="#FFFFDD">
  <tr>
    <td><a href="/whatever"><imgG src="test.jpg" border="0"></a></td>
  </tr>
</table>
</div>
</body>
</html>
0
 
oommrrii123Commented:
<frameset cols="20%,80%" frameborder="no" framespacing="0">
<frame src="2.htm" name="a" noresize>
<frame scroling="no" src="1.htm" name="e">
</frameset>
0
 
COBOLdinosaurCommented:
<body onload="x=setInterval(scollTo(0,0),50)">

It will cause perfromance problems, espcially if you have dynamic scripting, but if it is so important then I guess you ahve to bite the bullet. You are not going to get anything that is perfect because you have fire from an event and no code can execute in zero amount of time.

I still need (would like) to understand why this problem is occurring at all (in IE only, the problem doesn't seem to exist for Netscape)?

Simple height="100%" is invalid code because there value for 100% cannot be determined during rendering.  Like modt other invalid code IE accepts it and actually tries to render based on the invalid specification.  Mozilla based browsers like like Netscrap ignore invalid code which is what a browser is supposed to do under the standards.

Cd&
0
 
ZylochCommented:
Hmm... adding on to what the others said, onselectstart works fine without frames. I believe if you try to drag the most bottom frame down (add some dummy text), it isn't possible. It may just be something with the way IE handles frames.

--Zyloch
0
 
jimcplAuthor Commented:
seanpowell,

That works great (at least in my testing)!  I'm going to have to check to make sure that there isn't any conflict between the styles and the existing page.

Jim
0
 
jimcplAuthor Commented:
Hi All,  

I want to thank you all for your comments.  At this point, I think that we're going with the onSelectStart, but I'm also go to look into Sean's approach.

Again, thanks for all the answers.  It has been refreshing actually getting possible solutions to the problem-at-hand instead of a "sermon" about why frames are bad :)...

Jim
0
 
jimcplAuthor Commented:
Hi,

I do have a followup question.  My understanding is that the onSelectStart event is fired when "text is selected".  I'm assuming that with the onSelectStart in the BODY tag, this event is firing because you're clicking then holding the mouse button and dragging (e.g., trying to select something).

BUT, I'm not clear why setting the "return false;" prevents the scrolling.  Isn't the "return false;" just kind of a do-nothing function?  Why does that stop the scrolling?

Jim
0
 
cjmosCommented:
You said it,
>>"return false;" just kind of a do-nothing function?

When the event of dragging begins, instead of the browser doing something (selecting text, scrolloing the page etc). The browser does nothing.
0
 
ZylochCommented:
cjmos is right. You can look at it this way. When you hold and drag, you fire onselectstart which should tell the browser to begin dragging. However, putting "return false;" there cancels the call to the "highlighting" section of the browser so there is no highlight when you drag.

At least, that's my understanding of it.

--Zyloch
0
 
jimcplAuthor Commented:
cjmos and Zyloch,

Thanks for the explanation.


seanpowell,

If you can find the time, could you provide an explanation of why what you suggested works?  Not that familiar with CSS.

Jim
0
 
jimcplAuthor Commented:
seanpowell,

Sorry.  In particular, I'm not clear on the "html body".  You suggested that it should have "overflow-y: auto;", which I think allows scrolling "if necessary".  Shouldn't that be "overflow-y: hidden;"?

Jim
0
 
seanpowellCommented:
Because we still want to be able to scroll the content if necessary...

This basically transfers the scroll mechanism from the root element (html) to the document body

* html
{
    overflow-y: hidden;
}
* html body
{
    overflow-y: auto;
    height: 100%;
}

Overflow-y applies to the html element when IE is in standards mode (by using the correct doctype), so this just removes it.

I'll post an example in a bit to illustrate better.
0
 
seanpowellCommented:
http://www.pdgmedia.com/ee/fixed.html
If you look closely, you'll notice that the menu overlaps the scrollbar on the right, because it's been set to an absolute position of 10 pixels.
So the scrollbar you're seeing is actually the document body scrollbar, not the root one.

If your top frame would never require a scrollbar, than yes, you can just hide it all together...
0
 
jimcplAuthor Commented:
seanpowell,

Thanks for the expo.  One last question (I promise...I think).

Which versions are these (especially the doctype) things applicable-to?  Is it an IE6 only?  Or, will IE5.5, etc. also obey them?

Jim
0
 
seanpowellCommented:
Well we're getting a little farther away with each rendition :-)

Supporting IE 5 is a little tricker, becasue it doesn't have CSS support for the root element. So, in comes the @import and IE conditional comments...

<style type="text/css">
@import "allBrowsers.css";
</style>
<!--[if IE]>
<link href="ieBrowsers.css" rel="stylesheet" type="text/css" media="screen">
<![endif]-->

allBrowsers.css:

@media screen {

body
      {
      margin: 0;
      padding: 0 0 0 160px;
      }

div#fixed
      {
      overflow: auto;
      height: 100%;
      width: 160px;
      position: fixed;
      top: 0;
      left: 0;
      background: #cccccc;
      }

div#content
      {
      padding: 20px;
      }
}


ieBrowsers.css

body
      {
      height: 100%;
      overflow: hidden;
      }

div#content
      {
      width: 100%;
      height: 100%;
      overflow: auto;
      }

div#fixed
      {
      position: absolute;
      }

Online example:
http://www.pdgmedia.com/ee/fixed_all.html
0
 
jimcplAuthor Commented:
seanpowell,

Sorry, and actually, I wasn't necessarily looking for a solution for IE5...  I was just asking :), but I *really* do appreciate your detailed help.  

Thanks again, you (and the others) have been great!

Jim
0
 
seanpowellCommented:
I wonder what you'd need to grade an A :-)

No problem - we're happy to help out...
Sean
0
 
jimcplAuthor Commented:
Sean,

Sorry about that :(...

Jim
0
 
seanpowellCommented:
That's okay Jim :-)
I'm glad we got it worked out for you.
0
 
jimcplAuthor Commented:
Hi,

I'm posting a follow-on question to this one.  We're still have some related problems...

Thanks,
Jim
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 14
  • 6
  • 6
  • +4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now