Solved

How prevent Frame from scrolling when mouse is dragged?

Posted on 2004-04-20
34
653 Views
Last Modified: 2012-05-04
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
Comment
Question by:jimcpl
  • 14
  • 6
  • 6
  • +4
34 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10872668
>>>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
 
LVL 1

Author Comment

by:jimcpl
ID: 10873101
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
 
LVL 1

Accepted Solution

by:
bhavdeep_sachdev earned 125 total points
ID: 10873263
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10873340
the problem with onselectstart is that it is IE only.

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

Cd&
0
 
LVL 1

Author Comment

by:jimcpl
ID: 10873749
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 10874431
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 10874489
Nevermind, the ondragstart doesn't work. It seems the text must be selected first. I'll look into it.

--Zyloch
0
 
LVL 1

Author Comment

by:jimcpl
ID: 10875090
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
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 100 total points
ID: 10875451
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 10875501
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
 
LVL 3

Expert Comment

by:cjmos
ID: 10877442
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
 
LVL 1

Author Comment

by:jimcpl
ID: 10877494
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
 
LVL 3

Expert Comment

by:cjmos
ID: 10877538
Did

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

not work?
0
 
LVL 1

Author Comment

by:jimcpl
ID: 10878314
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
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 100 total points
ID: 10879007
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
 

Expert Comment

by:oommrrii123
ID: 10879439
<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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 75 total points
ID: 10880509
<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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 36

Expert Comment

by:Zyloch
ID: 10882223
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
 
LVL 1

Author Comment

by:jimcpl
ID: 10883007
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
 
LVL 1

Author Comment

by:jimcpl
ID: 10883071
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
 
LVL 1

Author Comment

by:jimcpl
ID: 10883543
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
 
LVL 3

Expert Comment

by:cjmos
ID: 10883559
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 10884750
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
 
LVL 1

Author Comment

by:jimcpl
ID: 10884838
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
 
LVL 1

Author Comment

by:jimcpl
ID: 10884862
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 10888078
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 10888230
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
 
LVL 1

Author Comment

by:jimcpl
ID: 10889089
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 10890757
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
 
LVL 1

Author Comment

by:jimcpl
ID: 10891541
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 10891613
I wonder what you'd need to grade an A :-)

No problem - we're happy to help out...
Sean
0
 
LVL 1

Author Comment

by:jimcpl
ID: 10895089
Sean,

Sorry about that :(...

Jim
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10895153
That's okay Jim :-)
I'm glad we got it worked out for you.
0
 
LVL 1

Author Comment

by:jimcpl
ID: 10903627
Hi,

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

Thanks,
Jim
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now