Jump to content
TNG Community

New: Scrollbox mod - Beta release


XerxX

Recommended Posts

Hi all,

From the Wiki page http://tng.lythgoes.net/wiki/index.php?title=Scrollbox_mod

-----------------

Any of the pages that shows an ancestors or descendants diagram will, in high and wide diagrams, "hide" the horizontal scrollbar at the bottom of the diagram.
For many non-Mac users this is annoying as they often only have a vertical scrolling wheel. To scroll horizontally they have to use the scrollbar.

So to see a person in the top right corner of a very wide and high diagram, they have to scroll down all the way to the diagram bottom to find the horizontal scrollbar, then scroll right and then scroll all the way up again. This is not very user friendly.

 

This mod creates a box, adapted to the browser window, displaying the diagram and if necessary will add scrollbars.
As the scrollbars are connected to the box, not to the page, they are always visible and at hand if needed.

------------------

There is support for all templates including up to five custom and there is also a No Template version.

As I use a Mac, I can't test properly (beta...). So please have a look if you are a non-Mac user.

 

Erik

 

Link to comment
Share on other sites

Erik,

 

Out of the gate, I have a standard 'test' website (have several sites), with no other mods, tng 11.0.1, template 11 selected.  The mod indicates an error 'bad target' in templateconfig.php as below pictured.

Templateconfig.php does not have this location at L199:

$tmp['t']

Should I just put it at the end of templateconfig.php for testing?

UPDATE:I did that, and so far, seems to work OK.

UPDATE:Note:in TNG11.0.1 templateconfig.php the last line before ?> is:

$tmp['t'] = "Save";

Ron

TNG 11.0.1   http://www.kmtrees.com wampserver 2.5,legacy 7.5,  family historian 6.2.2, win 10 pro

 

 

2016-07-08_16-05-50.jpg

Link to comment
Share on other sites

Hi Ron, Thanks for trying the mod.

 

Strange, I have that line in both English 11.0.1 - it says $tmp['t'] = "Save"; - and in the Swedish 10.1.3 it says $tmp['t'] = "Spara"; which is "save" in Swedish.

As it differs by language, I could only use the first part.

 

But; Yes, it should work if you put it there last in the file - but include a = "Save"; after or I think there will be an error if/when you save the template settings.

And: You may have to remove it to be able to un-install later.

 

Anyone else have the same problem?

/Erik

 

Link to comment
Share on other sites

Erik,  I get the same problem.

Last line of templateconfig.php is

$tmp['t15_textpara3'] = "<p>In principio erat Verbum et Verbum erat apud Deum et Deus erat Verbum hoc erat in principio apud Deum omnia per ipsum</p>";
?>

No $tmp[t]

Link to comment
Share on other sites

Erik,

Overall, the Mod works for me also on my Wamp TNG11.0.1 site, except for the minor templateconfig line hiccup.  I have about 2 dozen other mods installed there, but having no other issues.  My templates 10-15 are all duplicated to be like template 11, except for color skin adaptations, and my 'color switching' between such templates works fine with this mod..  

The only comment is there does seem to be some delay added to the charting, but would have to compare to the charts w/o your mod, so just a preliminary observation.  And, when one is charting 12 generations, there's bound to be some delay.  

So far, testing shows this to be a good working mod.

However, I still wish one could hold and drag the screens about, similar to what Ancestry.com tree screens permit one to do, but then, as you have mentioned, the php programming would be intense.  Ancestry also permits zooming in and out (~ google maps), and this reduces the user dragging efforts.  Don't see that being likely in TNG.

Ron

TNG 11.0.1   http://www.kmtrees.com wampserver 2.5,legacy 7.5,  family historian 6.2.2, win 10 pro

 

 

 

Link to comment
Share on other sites

Erik,

Just an observation on the bottom/right scrolling box on one of the pedigree screens (could be any of them, I guess).  I position the page up a bit, so the entire box appears in the browser with both scroll bars visible.  If one uses the mouse and drags either of the scroll bars, the box stays in place on the page.  But if one uses the center mouse scroll wheel to scroll down, then back up, once the right scroll location reaches the top of the page, it continues to drop the entire page to the top. Just a minor annoyance which will keep one using the scroll bar, not the mouse center wheel.

This is on Chrome, Win 10.

Ron

TNG 11.0.1   http://www.kmtrees.com wampserver 2.5,legacy 7.5,  family historian 6.2.2, win 10 pro

Link to comment
Share on other sites

Hi all,

 

New versions for ST and CT are posted for download.

That line exists in both my localhost site templateconfig.php files but not in the original. I wonder what put them there as my 11.0.1 site has only the Relate mod installed.

It is also saved along with everything else each time I save Templateconfig.

 

@Ron: Yes, it's a bit annoying. I agree on that but I don't know how to stop it.

Unfortunately.

/Erik

Link to comment
Share on other sites

10 hours ago, tngrlkrz said:

Erik,

Overall, the Mod works for me also on my Wamp TNG11.0.1 site, except for the minor templateconfig line hiccup.  I have about 2 dozen other mods installed there, but having no other issues.  My templates 10-15 are all duplicated to be like template 11, except for color skin adaptations, and my 'color switching' between such templates works fine with this mod..  

The only comment is there does seem to be some delay added to the charting, but would have to compare to the charts w/o your mod, so just a preliminary observation.  And, when one is charting 12 generations, there's bound to be some delay.  

So far, testing shows this to be a good working mod.

However, I still wish one could hold and drag the screens about, similar to what Ancestry.com tree screens permit one to do, but then, as you have mentioned, the php programming would be intense.  Ancestry also permits zooming in and out (~ google maps), and this reduces the user dragging efforts.  Don't see that being likely in TNG.

Ron

TNG 11.0.1   http://www.kmtrees.com wampserver 2.5,legacy 7.5,  family historian 6.2.2, win 10 pro

 

 

 

Thank You Ron for this report.

Template switching works and no conflicting mods. How nice.

 

Regarding a time delay, I'd like to say as the famous former programmer: "My changes can't affect that"...

But the only "active" code is a short JS with some simple arithmetics and a switch(), to set the size of the box dep. on template and browser. I can't imagine that it causes a noticeable delay.

My diagrams come very quickly also in 10.1.3 where I have 33,000 people. I'll try to add some timing code as it's not possible to compare otherwise.

 

Best regards,

Erik

Link to comment
Share on other sites

The scroll box does not appear to dynamically adjust to a screen resize done from the  Web Developer toolbar.  One has to do a Reload to get the scroll box to display correctly in the screen when changing window size from 1024 to 1280 for example on the Descendant Standard chart.

Link to comment
Share on other sites

Hi Ken,

 

Yes, that's correct. I have tried to make it change with the browser when resized, but failed.

It would require a CSS width of 100% but that widens the box out of the page in many templates. So I gave it up...

On the other hand, I think it's mostly programmers and testers who change the browser size - why would a normal user do it during a normal visit to the site?

 

Thanks for pointing it out: I'll add it to the Wiki page.

Erik

 

Link to comment
Share on other sites

3 hours ago, XerxX said:

Thank You Ron for this report.

Template switching works and no conflicting mods. How nice.

 

Regarding a time delay, I'd like to say as the famous former programmer: "My changes can't affect that"...

But the only "active" code is a short JS with some simple arithmetics and a switch(), to set the size of the box dep. on template and browser. I can't imagine that it causes a noticeable delay.

My diagrams come very quickly also in 10.1.3 where I have 33,000 people. I'll try to add some timing code as it's not possible to compare otherwise.

 

Best regards,

Erik

Don't think necessary to add timing code.  On same server, did some side by side in 2 chrome browser tabs, using one website TNG11.0.1 w/mod and another website TNG11.0.1 w/o mod,  at 10-12 generation ancestor charts (14000 people).  The times, unofficially, seemed to be about the same, and are dependent on the hosting server suppose.

An observation of something over which you may not have control.  The 4 ancestor charts, indicate 'loading' and nicely push the topmenu up out of the way and the initial box occupies the full browser screen, whereas the 2 descendant charts don't indicate 'loading', instead showed a compressed view with both scrollbars during the load, and then do not scroll the topmenu up out of view (see image). The ancestor chart behavior would be preferred, I would think.

BTW, something which until this testing I hadn't noticed (with or w/o your mod) : Ancestor charts always show the full number of generations, even if none are there, presenting empty boxes top to bottom if appropriate, whereas descendant charts end when no more descendants to be found.

Ron

TNG 11.0.1   http://www.kmtrees.com wampserver 2.5,legacy 7.5,  family historian 6.2.2, win 10 pro

2016-07-09_7-13-28.jpg

Link to comment
Share on other sites

Hi Ron,

 

I have seen that compressed state during development. There's a missing or invalid JS variable.

Is it possible for you to mail me the HTML source code for the JS part of the mod (not far from the bottom of the source code):

EDIT: Post it here is better.

(It may not be exactly the same, depending on the page, template and your settings.)

<!-- Start ScrollboxMod v10.1.3.beta1.ST m4 -->

<script type="text/JavaScript">
var outerHeight = window.innerHeight - 176;
if (outerHeight > document.getElementById('outer').scrollHeight) outerHeight = document.getElementById('xerxxScrollbox').scrollHeight;
document.getElementById('outer').style.height=outerHeight + "px";
var adjustWidth = 0;
switch (1) {
	case 1: adjustWidth = window.innerWidth - (200 * (window.innerWidth > 566)); break;
	case 4: adjustWidth = window.innerWidth - 62 - (116 * (window.innerWidth > 650)); break;
	case 6: adjustWidth = window.innerWidth + 24; break;
	case 7: adjustWidth = window.innerWidth - 62 - (132 * (window.innerWidth > 700)); break;
	case 8: adjustWidth = window.innerWidth + 4; break;
	case 9:
	case 11:
	case 13:
	case 14: adjustWidth = document.getElementsByClassName('art-sheet')[0].scrollWidth + 16; break;
	case 10: adjustWidth = document.getElementsByClassName('art-sheet')[0].scrollWidth + 10; break;
	case 12: adjustWidth = document.getElementsByClassName('cb-sheet')[0].scrollWidth - 12; break;
	default: adjustWidth = window.innerWidth; break;
}
adjustWidth -= (40 * (window.innerWidth > 650));
document.getElementById('xerxxScrollbox').style.width = adjustWidth + "px";
</script>

<!-- End ScrollboxMod v10.1.3.beta1.ST m4 -->
BTW: Is that template #11 or is it a copy with another number?

 

Thank You for your patience,

Erik

Edited by XerxX
Don't mail
Link to comment
Share on other sites

55 minutes ago, XerxX said:

BTW: Is that template #11 or is it a copy with another number?

Template 11, though with modified index, topmenu,footer, etc.  In Chrome, using 'inspect', how to I capture the html lines?  I did take a snapshot, but realize the 'compressed' state is only during the page load and I can't stop it at that point.

Ron

TNG 11.0.1   http://www.kmtrees.com wampserver 2.5,legacy 7.5,  family historian 6.2.2, win 10 pro

 

I messed up trying to delete this image; how do I do that?

capture1.jpgcapture1.jpgcapture1.jpg

Link to comment
Share on other sites

OK, on the test website, no other mods, did a 'viewsource' and captured the page, but it is after the page has loaded.

I also attached the full page html (31k lines).

This is the js portion (I think) towards the end:

<!-- Start ScrollboxMod v11.0.1.beta2b.ST m5 -->

<script type="text/JavaScript">
var outerHeight = window.innerHeight - 176;
if (outerHeight > document.getElementById('outer').scrollHeight) outerHeight = document.getElementById('xerxxScrollbox').scrollHeight;
document.getElementById('outer').style.height=outerHeight + "px";
var adjustWidth = 0;
switch (11) {
    case 4: adjustWidth = window.innerWidth - 62 - (116 * (window.innerWidth > 650)); break;
    case 6: adjustWidth = window.innerWidth + 24; break;
    case 7: adjustWidth = window.innerWidth - 62 - (132 * (window.innerWidth > 700)); break;
    case 8: adjustWidth = window.innerWidth + 4; break;
    case 9:
    case 11:
    case 13:
    case 14: adjustWidth = document.getElementsByClassName('art-sheet')[0].scrollWidth + 16; break;
    case 10: adjustWidth = document.getElementsByClassName('art-sheet')[0].scrollWidth + 10; break;
    case 12: adjustWidth = document.getElementsByClassName('cb-sheet')[0].scrollWidth - 12; break;
    default: adjustWidth = window.innerWidth; break;
}
adjustWidth -= (76 * (window.innerWidth > 650));
document.getElementById('xerxxScrollbox').style.width = adjustWidth + "px";
</script>

<!-- End ScrollboxMod v11.0.1.beta2b.ST m5 -->
 

Ron

TNG 11.0.1   http://www.kmtrees.com wampserver 2.5,legacy 7.5,  family historian 6.2.2, win 10 pro

pagehtml.txt

Link to comment
Share on other sites

Ron, Did I misunderstand your image of the compressed state?

Is that not after page load? After page load it's okay?

You're really asking about the scrolling to the bottom?

Erik

 

Link to comment
Share on other sites

Yes, the page loads fine.  My point was mainly about the initial page load of ancestor charts compared to descendant charts, in that the former pushes the topmenu out of the way on initial load.  And merely noticed that the ancestor charts indicate 'loading' and the other has the 'compressed' image. Sorry for any misunderstanding.

Ron

TNG 11.0.1   http://www.kmtrees.com wampserver 2.5,legacy 7.5,  family historian 6.2.2, win 10 pro

Link to comment
Share on other sites

2 hours ago, tngrlkrz said:

An observation of something over which you may not have control.  The 4 ancestor charts, indicate 'loading' and nicely push the topmenu up out of the way and the initial box occupies the full browser screen, whereas the 2 descendant charts don't indicate 'loading', instead showed a compressed view with both scrollbars during the load, and then do not scroll the topmenu up out of view (see image). The ancestor chart behavior would be preferred, I would think.

Ron, The Ancestor chart scrolls with or without the mod, and the Descendants chart doesn't.

The Ancestors chart places the subject person in the middle of the height at the left side and so scrolls so that person is "zoomed in".

As it scrolls the whole page it also scrolls the box. But it can't scroll past the page bottom so it stops there.

The descendants chart is a bit different as the subject person(s) can be placed (design-wise) almost anywhere along the left rim.

 

So, as it is now, it's a TNG thing, scrolling or not.

But maybe you're right: As the box is adapted to the window size, it could be in full view from start.

Erik

Link to comment
Share on other sites

Erik,

Earlier had noted some delay in ancestor chart displays.  Discovered that a tick box in admin:setup:charts:pedigree charts 'hide empty boxes' was unchecked.  Hiding empty boxes makes quite a difference in display times at max generations, and now is much faster. Agreed your Mod has no perceptible effect on display times.

Ron

TNG 11.0.1   http://www.kmtrees.com wampserver 2.5,legacy 7.5,  family historian 6.2.2, win 10 pro

Link to comment
Share on other sites

Great that you found the source of the delay. I have to check what my setting is...

 

I have noticed that verticalchart.php has no border.

When I corrected it I also made all pages scroll to show the full box. Thanks for the tip.

I will post Beta3 later tonight - I have only made the v10.ST yet.

/Erik

Link to comment
Share on other sites

Hi all,

 

I just now posted version Beta3 for download - Summary:

Verticalchart.php showed no border. Corrected.
All affected pages now scroll to bottom to show the full box. Thanks to Ron for the tip.

Enjoy,

Erik

Link to comment
Share on other sites

Great work Erik.  All changes perfrom well on TNG 11.0.1, Win10 with Chrome browser.

Ron

TNG 11.0.1   http://www.kmtrees.com wampserver 2.5,legacy 7.5,  family historian 6.2.2, win 10 pro

Link to comment
Share on other sites

  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...