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 25-03-2014 17:18:01

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

[RESOLVED] Proper set of height for subpage with sidebar

Ok. I found where my problem was.

PROBLEM: Normally when subpage doesn't have sidebar, height of subpage content/semitransparent background is 100% of screen. But if you add sidebar to subpage min-height of #contentWrapper is set to height of sidebar which causes that if content (text) of subpage and sidebar height is shorter than height of screen, you will see that semitransparent BG ends in the middle of screen.

SOLUTION: You need to check if height of sidebar is smaller than height of screen. If yes, set sidebar height to be height of screen which causes setting min-height of #contentWrapper to be height of screen like normally it would be.

CODE:
Add this code

screenHeight = screen.height;
if(sbDown < screen.height){
	sbDown = screenHeight;
}

in file inc/sidebar.php in /* Fix height of sidebar for layout */ section just before $('#contentWrapper,... fragment of code.

smile

Offline

#2 28-03-2014 14:08:30

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

Re: [RESOLVED] Proper set of height for subpage with sidebar

Small adjustment. I caught myself on bug which I already repaired which is:
if you don't have corrections in code for sidebars, when you open subpage with sidebar on in and than open panel with sidebar, min-height, margins and other style which sidebar from subpage has, will be assigned to sidebar on panel.

I some topic I give solutions to this problem and some of them are included in newest version and some are not. To make story short, code I gave before works but give bad result to sidebars in panels. Below I present my current version of inc/sidebar.php file.

My repairement requires one obey rule! Sidebars which are displayed in panels need to have name with "panel" fraze, i.e. "panel_applications". It's required to distinguish does code work on sidebar from subpage or from panel. Min-height for both of them are different and that is why this knowledge is required.

My code is based on v4.b1. Code:

<?php
/*Include necessary files*/
include_once("inc/plugins.php");
include_once("inc/defaults.php");
include("config/general.php");
include("config/layout.php");
include("config/pages.php");
include_once("inc/init.php");
include_once("inc/tilefunctions.php");

$sidebar = array();
/*Init tile functions if not inited yet */

if(!function_exists("getMarginLeft")){
	function getMarginLeft($group){
		return 0;
	}
}
if(!function_exists("getMarginTop")){
	function getMarginTop($group){
		return 0;
	}
}
if(!function_exists("posVal")){
	function posVal($marginTop,$marginLeft,$width){
		echo " ";
	}
}
function showSidebar($name){
	global $sidebar,$scale, $spacing, $scaleSpacing, $groupSpacing,$tileTypes, $defaultBackgroundColor, $defaultLabelColor, $defaultLabelPosition;
	include_once("config/sidebar.php");
	if(!array_key_exists($name,$sidebar)){ // if sidebar not found
		echo "Sidebar could not be loaded because sidebar name doesn't exist";
	}else{
		$t = $scaleSpacing*$sidebar[$name]['size']+5; // width of sidebar
		?>
        <div class='sidebar sidebar-<?php echo $name;?> sidebar-<?php echo $sidebar[$name]['pos']?>' <?php if($sidebar[$name]['pos']!="top"){?>style='width:<?php echo $t?>px'<?php } ?>>
        <?php
		triggerEvent("sidebarBegin");
		/* Plugins */
		foreach($sidebar[$name]["load_plugins"] as $plugin){
			if(file_exists("../plugins/".$plugin."/plugin.php")){
				include_once("plugins/".$plugin."/plugin.php");
			}
		}
		/* Load tiles */
		foreach($sidebar[$name]["tiles"] as $args){
			$n_args = array();
			foreach($tileTypes[$args['type']] as $key=>$std){
				if(array_key_exists($key,$args)){
					$n_args[] = $args[$key];
				}else{
					$n_args[] = $std;
				}
			}
			call_user_func_array("tile_".$args['type'],$n_args);
		}
		triggerEvent("sidebarEnd");
		?>
        </div>
        <style>
		<?php
		switch($sidebar[$name]["pos"]){
			case "left":
			if($sidebar[$name]["full_height"]){
				echo "#content{margin-left:".$t."px;}.sidebar-".$name."{margin-left:-".$t."px;}";
			}else{
				echo "#content{margin-left:0px;}.sidebar-left{margin-left:0px;}";
			}
			break;
			case "right":
			if($sidebar[$name]["full_height"]){
				echo "#content{margin-right:".$t."px;}.sidebar-".$name."{margin-right:-".$t."px;}";
			}else{
				echo "#content{margin-right:0px;}.sidebar-".$name."{margin-right:0px;}";
			}
			break;
		}
		?>
		</style>
        <noscript>
        <style>.sidebar>*{position:relative;top:0;margin:5px !important;display:inline-block;}</style>
        </noscript>
        <script>
		/* Fix height of sidebar for layout */
		sbDown = 0;
	    $("#content, #panelContent").children('.sidebar-<?php echo $name;?>').children(".tile").each(function(){
			if(typeof $(this).attr("href") != "undefined"){
				$(this).attr("href",$(this).attr("href").replace("?p=","#!/"));
			}	
			var thisDown= parseInt($(this).css("margin-top"))+$(this).height();
			if(thisDown>sbDown){
				sbDown=thisDown;
			}	
		});
		name = "<?php echo $name;?>";
		if(name.indexOf("panel") < 0)
		{
			screenHeight = screen.height;
			if(sbDown < screen.height){
				sbDown = screenHeight;
			}
			$('#contentWrapper, .sidebar-<?php echo $name;?>').css("min-height",sbDown+20+"px");
		}
		else
		{
			$('#panel, .sidebar-<?php echo $name;?>').css("min-height",sbDown+20+"px");
		}
		
		/* Responsive sidebar position */
		<?php if($sidebar[$name]["pos"] != "top"){?>
		<?php if($sidebar[$name]["pos"] == "left"){
			  if($sidebar[$name]["full_height"]){?>
		$.plugin($toColumn,{
			sidebarAfter:function(){
				$("#content").children(".sidebar").appendTo("#centerWrapper").css("top",20).css("margin-left",0);
				$("#content").css("margin-left",0);
			}
		});
		$.plugin($toSmall,{
			sidebarBefore:function(){
				$("#centerWrapper").children(".sidebar").prependTo("#content").css("top",0).css("margin-left",-$(".sidebar").width());
				margin_left = $(".sidebar").css("width");
				if(margin_left == "100%")
				{
					margin_left = 0;
				}
				$("#content").css("margin-left",margin_left);
			}
		}); 
		<?php }else{?>
		$.plugin($toColumn,{
			sidebarAfter:function(){
				$("#content").children(".sidebar").appendTo("#centerWrapper").css("top",20).css("margin-left",0);
			}
		});
		$.plugin($toSmall,{
			sidebarBefore:function(){
				$("#centerWrapper").children(".sidebar").prependTo("#content").css("top",0).css("margin-left",$(".sidebar").css("width"));
			}
		}); 
		<?php }
		}else{
			if($sidebar[$name]["full_height"]){?>
			$.plugin($toColumn,{
				sidebarAfter:function(){
					$("#content").children(".sidebar").appendTo("#centerWrapper").css("top",20).css("left",-$(".sidebar").width());
					$("#content").css("margin-right",0);
				}
			});
			$.plugin($toSmall,{
				sidebarBefore:function(){
					$("#centerWrapper").children(".sidebar").prependTo("#content").css("top",0).css("left",0);
					$("#content").css("margin-right",$(".sidebar").width());
				}
			}); 
			<?php
			}else{?>
			$.plugin($toColumn,{
				sidebarAfter:function(){
					$("#content").children(".sidebar").appendTo("#centerWrapper").css("top",20)
				}
			});
			$.plugin($toSmall,{
				sidebarBefore:function(){
					$("#centerWrapper").children(".sidebar").prependTo("#content").css("top",0)
				}
			}); 
			<?php
			}
		}
		?>
		$.plugin($toFull,{
			sidebarBefore:function(){
				$toSmall.sidebarBefore();
			}
		});
		$.plugin($beforeSubPageShow,{
			checkSidebar:function(){
				switch($page.layout){
					case "column": $toColumn.sidebarAfter();break;
					case "small": $toSmall.sidebarBefore();break;
					case "full": $toSmall.sidebarBefore();break;
				}
			}
		});
		<?php }?>
		$events.sidebarShow();
		</script>
        <?php
	}
}
?>

Offline

Board footer

Powered by FluxBB