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 10-12-2013 06:57:38

monoNeck
Contributors
Registered: 03-12-2013
Posts: 5

Responsive Not Rendering Correctly ... Eventually

I am clearly doing something wrong, but I don't have enough experience with this framework to identify what.

Take a look at this MetroUI site based on the out-of-the box template:

http://bit.ly/1cxHiGH

This is really odd because there is a specific sequence you have to follow to get it to break:

1) Resize it horizontally so it reorganizes the tiles to a single column and release the mouse.

2) Resize it back out so it renders horizontally again.  Release the mouse.  So far everything is fine.

3) Repeat 1 & 2 again.

When you release the mouse on the second resize out, all the group headings overlay eachother over the first group and scrolling by the "arrows" or by mouse wheel is broken (won't scroll and incorrectly places the arrows when you try to scroll); the background scrolls as normal, but the groups do not scroll.

Refresh fixes the problem.


Here is the (I believe) the code of interest:

Layout.php:

[== PHP ==]
<?php
/* LAYOUT CONFIG */

$theme = "theme_default"; // name of the subfolder in themes directory for the theme you want

$font = ""; // leave blank if you want to use the default one, otherwise  ex:  "'Open Sans', Segoe UI light, Tahoma,Helvetica,sans-serif"
$googleFontURL = "http://fonts.googleapis.com/css?family=Open+Sans:400,300,600"; // leave blank if you don't want a special one

$maxPageWidth=900; // max width of page in px

/* Tile options */
$scale = 145; // size of 1 tile of 1x1, in px
$spacing = 10; // space between tiles, in px

/* Tilegroup settings */
$groupTitles = array('Home','Column1','Column2','Column3'); // titles of the tileGroups
$groupSpacing = array(5,5,5,5); // width of each tileGroup (spacing between the groups in tiles)
$groupDirection = "horizontal"; // put the groups in a vertical or horizontal order?
$mouseScroll = "groups"; //  set to "groups" to scroll between groups, set to "horizontal" to continuously scroll horizontal or set to false to disable scrolling (so it will scroll vertical)

$scrollSpeed = 550; // scrolling speed of tilegroups
$groupInactiveOpacity = 1; // opacity of tiles that are not in the current tilegroup. 1 = full shown, 0.5 = transparent, can have any value between 0 and 1
$groupInactiveClickable = true; // should the tiles in inactive groups be clickable, if false; it'll go to the tilegroup of the clicked tile
$groupShowEffect=0; // the effect which shows the tiles when the page is loaded. 0 = a nice "wave" effect, 1 = fadeIn, 2= increase size  (!only works when $groupInactiveOpacity = 1)

$showSpeed = 400; // speed of the showing transition
$hideSpeed = 300; // hide speed of page transitions

/* Background */
$bgColor = "#0F6D32"; // background color
$bgImage = "img/bg/metro_green.jpg"; // background image, leave blank if you dont want one. It is recommend to keep the filesize to a minimum and also, if possible, use a low resolution

// Settings below are only needed when $bgScrollType is parallax
$bgMaxScroll = 130; //set to 0 for no background scrolling
$bgWidth = 115; // in procent, in comparison to the screen width, so 125% is a quarter bigger than screen ,needed for scrolling, how bigger, how more scrolling
$bgScrollSpeed = 450; // in ms (recommend to set this to $scrollSpeed-10)

/* Some behavior */
$scrollHeader = true; // wether the header should scroll with the page (true) or always stay visible (false)
$scrollHeaderTablet = false; // otherwise laggy
$disableGroupScrollingWhenVerticalScroll = false; // if the page is too high and not all tiles fit on screen, mousewheel triggers vertical scroll instead of tilegroup scroll. Set to false if you want always to have groupScrolling

$autoRearrangeTiles = true; // auto rearrange tiles when it doesn't fit on the browser?
$autoResizeTiles = true; // auto resize tiles when it doesn't fit on the browser? Can cause markup problems!, will only work if $autoRearrangeTiles is enabled
$autoRearrangeEffect = true; // if true, nice transition effect is used when rearranging tiles. Can be laggy if page is heavy, so disable it then.
$rearrangeTreshhold = 2;  // from which width the tiles should be rearranged? Just play with this value! Should be smaller than the most wide tilegroup.

/*Defaults for tiles*/
$defaultBackgroundColor = "#509601";
$defaultLabelColor = "#476327";
$defaultLabelPosition = "top";


?>


Tiles.php:

[== PHP ==]
<?php
/* All tiles on the homepage are configured here, be sure to check the tutorials/docs on http://metro-webdesign.info */

/* GROUP 1 */

/* Row 1 */
$tile[] = array("type"=>"scrollText","group"=>0,"x"=>0,"y"=>0,"width"=>2,"height"=>1,"background"=>"orange","url"=>"",
"title"=>"Tile0","text"=>array(
"This is a scrolling text tile...",
"You can add as many lines as needed...",
"Like this one for example."
),"scrollSpeed"=>2500);

$tile[] = array("type"=>"simple","group"=>0,"x"=>0,"y"=>1,'width'=>2,'height'=>1,"background"=>"blue","url"=>"",
"title"=>"Tile1","text"=>"");

/* Row 2 */
$tile[] = array("type"=>"simple","group"=>0,"x"=>2,"y"=>0,"width"=>2,"height"=>1,"background"=>"purple","url"=>"",
"title"=>"Tile2","text"=>"");

$tile[] = array("type"=>"simple","group"=>0,"x"=>2,"y"=>1,"width"=>2,"height"=>1,"background"=>"purple","url"=>"",
"title"=>"Tile3","text"=>"");


/* GROUP 2 */

/* Row 1 */
$tile[] = array("type"=>"simple","group"=>1,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"red","url"=>"",
"title"=>"Tile0","text"=>"");


$tile[] = array("type"=>"simple","group"=>1,"x"=>0,"y"=>1,'width'=>2,'height'=>1,"background"=>"red","url"=>"",
"title"=>"Tile1","text"=>"");

/* Row 2 */
$tile[] = array("type"=>"simple","group"=>1,"x"=>2,"y"=>0,"width"=>2,"height"=>1,"background"=>"yellow","url"=>"",
"title"=>"Tile2","text"=>"");

$tile[] = array("type"=>"simple","group"=>1,"x"=>2,"y"=>1,"width"=>2,"height"=>1,"background"=>"yellow","url"=>"",
"title"=>"Tile3","text"=>"");


/* GROUP 3 */

/* Row 1 */
$tile[] = array("type"=>"simple","group"=>2,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"yellow","url"=>"",
"title"=>"Tile0","text"=>"");


$tile[] = array("type"=>"simple","group"=>2,"x"=>0,"y"=>1,'width'=>2,'height'=>1,"background"=>"yellow","url"=>"",
"title"=>"Tile1","text"=>"");

/* Row 2 */
$tile[] = array("type"=>"simple","group"=>2,"x"=>2,"y"=>0,"width"=>2,"height"=>1,"background"=>"green","url"=>"",
"title"=>"Tile2","text"=>"");

$tile[] = array("type"=>"simple","group"=>2,"x"=>2,"y"=>1,"width"=>2,"height"=>1,"background"=>"green","url"=>"",
"title"=>"Tile3","text"=>"");



/* GROUP 4 */

/* Row 1 */
$tile[] = array("type"=>"simple","group"=>3,"x"=>0,"y"=>0,'width'=>2,'height'=>1,"background"=>"green","url"=>"",
"title"=>"Tile0","text"=>"");


$tile[] = array("type"=>"simple","group"=>3,"x"=>0,"y"=>1,'width'=>2,'height'=>1,"background"=>"green","url"=>"",
"title"=>"Tile1","text"=>"");

/* Row 2 */
$tile[] = array("type"=>"simple","group"=>3,"x"=>2,"y"=>0,"width"=>2,"height"=>1,"background"=>"blue","url"=>"",
"title"=>"Tile2","text"=>"");

$tile[] = array("type"=>"simple","group"=>3,"x"=>2,"y"=>1,"width"=>2,"height"=>1,"background"=>"blue","url"=>"",
"title"=>"Tile3","text"=>"");


?>

I'm pretty sure my lack of understanding of this framework is the issue (and not a bug), so any help would be much appreciated.

Thanks!!

JP

Last edited by monoNeck (10-12-2013 18:13:25)

Offline

#2 11-12-2013 17:19:00

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: Responsive Not Rendering Correctly ... Eventually

I am experiencing the same problem.

Offline

#3 11-12-2013 18:06:49

monoNeck
Contributors
Registered: 03-12-2013
Posts: 5

Re: Responsive Not Rendering Correctly ... Eventually

chrismaliszewski wrote:

... But be honest: your bug isn't such a big issue - very few people will zoom in website so large and zoom it out twice smile ...

First and foremost Chris, thanks for taking the time to post and I will gladly accept whatever help you can offer.

As to the magnitude of the issue, I see your point and respectfully disagree (but mostly because of the circumstance).  I am creating a pilot project for my employer.  We are attempting to determine if we will move forward with this template as our framework.

We all agree that it is the best looking responsive template we've come across.

However, *EVERYONE* involved in the pilot found this problem (probably because the responsiveness is so cool that they all had to play).  As such, it is on everyone's radar.

This has to get fixed or the pilot doesn't move forward.

And when we do go live with it, I promise you at least one of our customers will find the issue and report the bug to our helpdesk.  And then I'll be right back where I am today only under heat to get it fixed in production.  Better to fix now than fix later in a bubble.

I will do the comparison as you suggest.  Thank you again for taking the time to respond  smile!

JP

Offline

#4 11-12-2013 18:07:10

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

Re: Responsive Not Rendering Correctly ... Eventually

The fix: open js/functions.js

go to line 210 replace:

$("#tileContainer").width(t).height(mostDown+($group.direction=="vertical")*$group.spacingFull.pop()*scaleSpacing);

with

$("#tileContainer").width(t).height(mostDown+($group.direction=="vertical")*$group.spacingFull[$group.spacingFull.length]*scaleSpacing);

Fixed smile

Offline

#5 11-12-2013 21:22:26

monoNeck
Contributors
Registered: 03-12-2013
Posts: 5

Re: Responsive Not Rendering Correctly ... Eventually

Well, I see the problem now (thanks for pointing down the path Chris!); not far enough along to be able to point to a cause, but here's the issue ...

This section of code (it is the third node of an if-the-elseif construct that immediately follows the segment you identified Chris):

[== PHP ==]
		if(!$("body").hasClass("full")){
		console.log( "================> !$(\"body\").hasClass(\"full\") " );
			$("body").removeClass("column").removeClass("small").addClass("full");
			$page.layout = "full";
			$("nav").appendTo("#headerCenter").children("a").css("display","inline-block")
			$("#navTitle").remove()
			$group.spacing = $group.spacingFull.slice();
			if($page.current == "home"){
				console.log( "===================> $page.current == \"home\" " );
				$("#tileContainer").children(".tile").each(function(){
					console.log( "======================> pos = " + $(this).data("pos") );
					var pos = $(this).data("pos").split("-");
					$(this).css("margin-top",parseInt(pos[0])).css("margin-left",parseInt(pos[1])).css("width",parseInt(pos[2]));
				});
				if($group.direction=="horizontal"){
					console.log( "======================> $group.direction==\"horizontal\" " );
					for(i=0;i<$group.count;i++){
						console.log( "=========================> groupTitle " + i + "  -- getMarginLeft(i) = " + getMarginLeft(i) );
						$("#groupTitle"+i).css("margin-left",getMarginLeft(i)).css("margin-top",0);
					}
				}else{
					console.log( "======================> $group.direction = " + $group.direction );
					for(i=0;i<$group.count;i++){
						console.log( "=========================> groupTitle " + i + "  -- margin-left JUST GOT SET TO ZERO!!!!" );
						$("#groupTitle"+i).css("margin-left",0).css("margin-top",getMarginLeft(i));
					}
				}
			}else{
				$tileContainer.html(tileContainer);
			}
			setTimeout(function(){
				recalcScrolling();
				fixScrolling();
			},500);
			setTileOpacity();
			$arrows.place(400);	
			$events.toFull();
		}
		if($page.current == "home"){
			$tileContainer.show();
		}

This section will get hit as you start to expand back out and hit the threshold to go horizontal again.  As you can see, I added some console.log() statements.

When we hit this block, we take the path where $group.direction=="horizontal" so we are going to iterate through the group titles and set their left margins by calling the function getMarginLeft(i) where i is an index.  Here's what it logs the first time:

=========================> groupTitle 0  -- getMarginLeft(i) = 0
=========================> groupTitle 1  -- getMarginLeft(i) = 775
=========================> groupTitle 2  -- getMarginLeft(i) = 1550
=========================> groupTitle 3  -- getMarginLeft(i) = 2325

This is as it should be.

Here's what we get the second time:
=========================> groupTitle 0  -- getMarginLeft(i) = 0
=========================> groupTitle 1  -- getMarginLeft(i) = NaN
=========================> groupTitle 2  -- getMarginLeft(i) = NaN
=========================> groupTitle 3  -- getMarginLeft(i) = NaN

Oooooh!  Not a Number for everything save the first group title!!

Looks like I'll have to pry open functions.js and add some logging in getMarginLeft() to see what's going on there, but at least I have a place to look.

JP

Offline

#6 11-12-2013 21:25:19

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

Re: Responsive Not Rendering Correctly ... Eventually

Did you check my post? wink

Offline

#7 11-12-2013 21:28:18

monoNeck
Contributors
Registered: 03-12-2013
Posts: 5

Re: Responsive Not Rendering Correctly ... Eventually

No, I was too busy debugging glasses.  Thanks *SO* much!!  big_smile

JP

Offline

#8 11-12-2013 21:57:41

monoNeck
Contributors
Registered: 03-12-2013
Posts: 5

Re: Responsive Not Rendering Correctly ... Eventually

Fix confirmed!!  That took care of it.  Thanks to all!

JP

Offline

#9 12-12-2013 16:16:54

rsalomone
Contributors
Registered: 22-11-2013
Posts: 101
Website

Re: Responsive Not Rendering Correctly ... Eventually

Thank you all!

Offline

Board footer

Powered by FluxBB