You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 04-01-2014 05:36:26

felix_xiao
Member
Registered: 04-01-2014
Posts: 1

How to prevent main page scrolling when panel is open

Hi, I'm currently working on a website where you click a tile and a side panel shows up. This grays out the main screen where all the other tiles are. I want to be able to scroll in the side panel. However, when I currently do so, the main screen gets scrolled as well. Is there a way to set this up so that when the side panel is open, scrolling on the main background screen is disabled? Thanks!

-Felix

Offline

#2 04-01-2014 10:09:40

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: How to prevent main page scrolling when panel is open

The simplest thing would be to set CSS overflow: hidden to proper div/place but it seems it doesn't work neutral (it works for #panel but doesn't for rest of page e.g. body, #contentWrapper etc.).

For now I found this code: link.

Code which should be put inside $(document).on("click","a[href^='panels/']",function(event){ after $panel = $("#panel"); line:

window.onmousewheel = document.onmousewheel = function(e) {
	if($(e.srcElement).parents("#panel").size() == 0) {
		e = e || window.event;
		if (e.preventDefault)
			e.preventDefault();
		e.returnValue = false;
	}
};

Code which should be put inside hidePanel = function(){:

window.onmousewheel = document.onmousewheel = function(e) {
	return true;
};

This code prevents window from scrolling when mouse is out of div with id panel. Unfortunatelly when user scrolls panel scrolling still interacts on rest of page neutral.

Last edited by chrismaliszewski (04-01-2014 10:48:08)

Offline

#3 04-01-2014 11:14:28

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: How to prevent main page scrolling when panel is open

In the full version theres a setting for that.

(in the file plugins/panels/settings )

Don't know anymore for the lite version tho. The lite version is quite old, I planned to update it in a few weeks tongue

Offline

#4 04-01-2014 13:46:22

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: How to prevent main page scrolling when panel is open

Which option do you mean? In settings.php I have only this code:

/* METRO UI panels plugin v0.1 - SETTINGS*/
$panelWidth = 400; // in px
$panelColor = "#444";
$panelDim = 0.6; // dim the screen when a sidepanel is opened, set to 0 or false to disable, set to a value between 0 and 1 to define the opacity
$panelGroupScrolling = false; // should it be possible to scroll gruops when the panel is opened? If set to false, the middlemouse scroll won't trigger the groupscrolling. 
$hidePanelOnClick = true; // hides the panel on a click outside the panel
$preloadedPanels = array();

and none of them works neutral. I checked newest version and it has the same code.

Offline

#5 04-01-2014 14:35:23

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: How to prevent main page scrolling when panel is open

this one; $panelGroupScrolling = false;

normally it is set to false.

On this site (metro-webdesign.info) it doesn't scroll when the panel is opened. Maybe it's a bug in the download version. Need to check that.

Offline

#6 04-01-2014 15:52:35

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: How to prevent main page scrolling when panel is open

Perhaps. I'll wait smile.

And one more question in this topic. I tried to set this style to many different divs (and whole body) but still I have scrollbars on my website. Code I used:

$("#id_of_div").css('overflow','hidden');

Am I doing sth wrong? How to disable scrollbars in this template if overflow: hidden doesn't work?

Offline

#7 04-01-2014 16:20:17

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: How to prevent main page scrolling when panel is open

Try

html,body{
overflow:hidden !important;
}

Offline

#8 05-01-2014 20:45:47

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: How to prevent main page scrolling when panel is open

So Thomas, what is with this option in settings.php? smile

About your last post. I created code in desktop.js of plugin panels:

$("body").css("overflow", "hidden");
$("html").css("overflow", "hidden");

in $(document).on("click","a[href^='panels/']",function(event){
and

$("body").css("overflow", "visible");
$("html").css("overflow", "visible");

in hidePanel = function(){.

There is still one thing wrong with panels. Then screen is small and accordion is being opened, main page scrolls to the position of the end of page (min-height I think). I think it should stay in the same position as it is. Do you understand what I'm trying to say?
Problem is in no-scrollto which should stay inside the panel without going out of it to main page. Correction to this issue is replacing code in plugins/accordion/plugin.js to

if(!$d.hasClass("no-scrollto")){
	$("#panel").animate({scrollTop: $(this).offset().top},500);
}

Am I right?

It works in all browsers I tested (Opera, Chrome, FF).
If you don't want to give anything more to this topic, I think it can be set as resolved. smile

Last edited by chrismaliszewski (05-01-2014 20:58:40)

Offline

#9 05-01-2014 21:03:27

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: How to prevent main page scrolling when panel is open

For me the main page scrolling does stop when a panel is opened. (on this site, on the downloadable version and on the demo's). I tried in Chrome and FF.

Or don't we mean the same thing: the horizontal scrolling of the groups?

Offline

#10 05-01-2014 22:05:30

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: How to prevent main page scrolling when panel is open

Now you can go to my website (here), open e.g. 2. tile and than open accordions in panel. See that background after opening many accordions doesn't move at all (doesn't scroll) while it can be observed normally i.g. after opening acc in panel, background is going down.

I tested code and it worked in all browsers I tested.

I hope it explains everything smile.

Offline

#11 06-01-2014 00:50:03

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: How to prevent main page scrolling when panel is open

Oh now I know what the topicstarter means! I tought he means the scrolling of the tiles when a panel is opened, but he (and you) means the scrolling of the page content when you're on a subpage.

Indeed your fix works smile but there might be a less hacky solution by capturing the mouse scroll wheel and "return false" but I'll take a look at that later (busy times here now smile )

Offline

#12 06-01-2014 10:18:01

chrismaliszewski
Contributors
From: Torun, Poland
Registered: 06-05-2013
Posts: 246
Website

Re: How to prevent main page scrolling when panel is open

Correct me if I'm wrong - solution with capturing the mouse scoll wheel won't repair above problem with scrolling screen using finger on touch screens.

So this is quite good solution to this problem. For sure it could be done nicer but easiest solution aren't bad and are quicker to be found out smile.

Cheers.

Last edited by chrismaliszewski (06-01-2014 10:18:35)

Offline

Board footer

Powered by FluxBB