Jump to content
TNG Community
JAJ

Programing Help

Recommended Posts

JAJ

I need help programing an existing table, so that it will scroll horizontally, I have no problem doing the table work, only in getting the scroll part (working). I see lots of routines (code snippets) on Google, but I can’t seem to get any one of them to work. I suspect I am not formatting the JS correctly. I’ve been trying to get this working for several months. It is making me crazy and I need to reach out somehow to someone who can help.

Share this post


Link to post
Share on other sites
RickM

I would have thought using CSS would solve that issue

Quote from w3schools.com (my go to to help figure CSS & HTML)

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive

This will allow the table to scroll horizontally..
EXAMPLE

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

Hope this helps..

Share this post


Link to post
Share on other sites
JAJ

I jno, but it doesn't work. I have to think I am doing something wrong and beyond my abilities. Would seeing the code help?

Share this post


Link to post
Share on other sites
RickM

@JAJ

I am not into JS so that maybe wont help, however post it, some one brighter than I may figure out the issue..

Is there a link to something that we can see what you are doing?? Please post that too.

I will do my best, but no miracles should be expected 😄

 

Share this post


Link to post
Share on other sites
JAJ

You can see my working file here: http://www.jamesonnetwork.com/dna/families/family/~groups_template-trial67.php - you'll need a password.. use: "guest" and "guest"

It is the lower table (only) that I am trying to slide horizontally. I have it here coded in an "overflow" container element. At this point I don't really care the method (html/JS/whatever), just want to get it working, so that it doesn't look so cramped in a smaller screen and because I need to increase the number of columns.

I have also included the file itself (below) thinking maybe you could see where I may have screwed something up? 

I claim no coding expertise whatsoever, so please don't be too surprised with what you see. I struggle with this stuff, but enjoy the challenge and the results, when they turn out. This one has me stymied.

~groups_template-trial67.php

Share this post


Link to post
Share on other sites
bhemph

If you uncomment line 3, that will let us see the page to help and then you can put the comment back in once it is resolved.

Share this post


Link to post
Share on other sites
XerxX

I'm not sure but you can try to remove the width parameter here:

<table width="100%" align="center"....

make it

<table align="center"....

HTH

Erik

Share this post


Link to post
Share on other sites
cfj

As Erik said remove table width.

Then you can try to use  <div class="overflow">

In mytngstyle:

div.overflow {
    overflow-x: scroll;
}

You can also try to add width to class="overflow" width: 60%, then you can scroll x, I think!!!

PS. It's easier to add class to tables, so can customize each table as you wish.

x-scroll.png

Cathrin

Share this post


Link to post
Share on other sites
JAJ
1 hour ago, XerxX said:

I'm not sure but you can try to remove the width parameter here:


<table width="100%" align="center"....

make it

<table align="center"....

HTH

Erik

 

1 hour ago, XerxX said:

I'm not sure but you can try to remove the width parameter here:


<table width="100%" align="center"....

make it

<table align="center"....

HTH

Erik

I tried that (reload: http://www.jamesonnetwork.com/dna/families/family/~groups_template-trial67.php# and see the results), and it does NOT seem to make a difference. I am wondering now if having this particular table within andother table has any effect? I will try that with out the outer table I use to format the over all page and see what happens.

Share this post


Link to post
Share on other sites
JAJ
1 hour ago, cfj said:

As Erik said remove table width and try to use  <div class="overflow">

In mytngstyle: div.overflow {
    overflow-x: scroll;
}

 You can try add width to class="overflow" width: 60%, then the you can scroll x, I think!!!

PS. It's easier to add class to tables, so can customize each table as you wish.

x-scroll.png

Cathrin

No, that doesn't seem to have any effect either.

Share this post


Link to post
Share on other sites
JAJ

I have tried every suggestion and permutation I can think of and actually got it to work, with ONE configuration - that being a single table (the same one) but only by itself (unnested) and then only in a "html" headed page - i.e., TNG formatted page. It seems that I was having two problems, one is that it ONLY wants to work in a strict HTML environment and the other is it doesn't seem to want to work within another table (which I use for page formatting). 

Bottom line is that this "overflow" routine doesn't look like it will work in my (TNG) environment.

I'm thinking that maybe a JS slider routine would work within my TNG environment. I have found a JS routine here: http://jsfiddle.net/4sbh73uz/, which looks pretty good, but my problem is that I can't seen to figure out how to accomplish (format) this to work. I am good with creating the CSS routine within 'mytngstyle.css' and then altering the table container to include the bit "id="myTable" "> but don't know what or how  to do with the JavaScript part or even actually what to do with the CSS command.

Is there anyone who after looking at the JS routine that knows what to do with it to get it working?

John

 

 

 

Share this post


Link to post
Share on other sites
JAJ
5 hours ago, XerxX said:

I'm not sure but you can try to remove the width parameter here:


<table width="100%" align="center"....

make it

<table align="center"....

HTH

Erik

 

Share this post


Link to post
Share on other sites
RickM
5 hours ago, XerxX said:

I'm not sure but you can try to remove the width parameter here:


<table width="100%" align="center"....

make it

<table align="center"....

HTH

Erik

Is this style of HTML now redundant?? It should be <table style="text-align: center;" or create a class/id for the table and style it from mytngstyle.css

Share this post


Link to post
Share on other sites
JAJ

I tried that and it made no change whatso ever.  That was however BEFORE I found that nothing worked, unless I removed this table from within another larger (whole page) table AND also had it (the table) in a strictly html environment, not the TNG PHP environment. Doing that, it worked with or without the "width" call. 

Would you know how to install this http://jsfiddle.net/4sbh73uz/ JS routine ? If I could figure out that, it may keep me from having to figure out a way around the TNG structure problem.

Thanks

 

 

Share this post


Link to post
Share on other sites
RickM

Classes/ids are a means of labelling an html tag so you can style them easily.. Not the way they are styled at the moment..

I am still pretty much a novice at all this stuff, but have learnt a lot by reading a couple of books like Learn HTML & CSS in 24hrs type..

If you look at the code I sent and find the <table opening tags you will see I have added class="tbl-dnagroups-1 and -2

You can then add into mytngstyle.css 

.tbl-dnagroups-1, .tbl-dnagroups-2 {
overflow-x: auto;
width: 95%;
margin: 10px auto;
}

If you want to make a change then one place to do it and that will affect both tables.

You can also target each table separately as I show below 

.tbl-dnagroups-1 {
overflow-x: auto;
width: 95%;
margin: 10px auto;
}

.tbl-dnagroups-2 {
overflow-x: auto;
width: 85%; <!-- note width slightly different from above -->
margin: 10px auto;
}

Same could be done for the cells, then instead of changing 100s of lines of code, change one..

 

I'm not sure on the tng page structure.. Will have to look a bit more into it..  I'm sure it can be resolved with a little help , You are probably missing something fundamental in the build.. Check this out on the Wiki

https://tng.lythgoes.net/wiki/index.php?title=How_TNG_builds_a_page

Might point you in the right direction.. I will see what I can see as well..

 

Rick

Share this post


Link to post
Share on other sites
RickM

Probably worth mentioning here is (and maybe folk have already gathered this) the php file is built using the historytemplate.php file as the base..

I suspect this may be part of the issue. (Just a guess)..

If any of the real brains out there can have a look, I believe there is simple solution that is beyond me to figure at this time..

Share this post


Link to post
Share on other sites
JAJ

I think you are probably right, I am also not sure this is something a lot of people are worried about. It is however something important to me.

Share this post


Link to post
Share on other sites
RickM

Understood,

Mind you, because I have chimed in, maybe others are leaving it to me.. 

I have upset a few folks, so I'm sorry to you if that is the case..

It is something simple, I have looked at some other peoples files etc, and they are based on the same template.. They work.

Look here
 

I'm off to work now.. Will see how you get on!

 

Best of luck!!

 

Share this post


Link to post
Share on other sites
RickM

Work turned out to be a no go.. <bugger>

So..

I would suggest trying

adding

<script>
$(document).ready(function() {
  $('#myTable').DataTable({
    "scrollX": true
  });
});
</script>

above Line 115 in your code. change the <div>  style="overflow-x:auto;" to style="overflow-x:scroll; width:65%;"

It seems that the table does not want to scroll at all until the width is below a certain point.. I found about %65 you may need to change it lower or higher, but I'm guessing it will work based on the browsers (end viewers) width

NOTE: THE CHANGED CODE (NOT YOUR ORIGINAL CODE

I used this code in the same page you suggested we look at for the js...

Then you will need to add the id to the table so at line 115 of your php code change from - to

                <table width="100%" align="center" border="1" cellpadding="2" cellspacing="0" bordercolor="#acb6f3" bgcolor="#e0e0f7">
                  
TO
                  
                 <table id="myTable" style="background-color:#e0e0f7; border: 1px solid #acb6f3;">

 

NOTE the added id="myTable" and changes to how the table is styled.

You can of course change the myTable to anything you like, but remember to change it in both the js and the id

It may work without the need of the <div>, should you wish to try.. Certainly did on jsfiddle

Here it is working on YOUR site with me just adjusting it using Firefox Developer Tools

I was also mucking round with the text sizes etc to see how that impacted the table and scrolling.. You can certainly increase the sizes..
I am also working through your php file to tidy the html up Will prob add some classes to the th & td tags so you do not need to change 69 rows of styling all the time, just a couple of lines in your mytngstyle.css file.

Hope that helps..

 

Edited by RickM
Changed the JS to suit horizontal scrolling & changed where to place the js, added more info as well..

Share this post


Link to post
Share on other sites
RickM

Find attached a reworked php file, HTML 5 compliant or pretty damned close, along with the addition of the JS required to scroll the table horizontally (this may not actually be needed but) classes / id for the tables, multiple th & td (saves time in changing many lines), plus a few other tidy ups. Also a css file with the css I used to make things look better (at least it did on my browser). Of course you could change whatever to suit 😄 .

I will be around but maybe not too much over the next few days, the weather is meant to be better so I should be out working, ask should you need anything more or more explanation..

tables.css

~groups_template-trial67-rm1.php

Regards

 

Share this post


Link to post
Share on other sites
JAJ

Absoutely over the moon with the reworked file. I needed to fix the TNG "topmenu" and will need to check if all the other pages I use now will fit properly with what the reworked DNA file provokes, but it is working wonderfully. The JS  routine, didn't seem to work, but the overflow works well enough that I eliminated that (JS routine) altogether rather than mess with it any further. 

I need to now spend som time messing with touching up the formatting and CSS files a little, will probably have some questions there.

Thanks again, I owe you big.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×