responsive list header

[zorzis]

i would like to ask if there is anyway to make the header of a list responsive when page goes down so that "element names" container is not static but moves when schroll down to a list so users are able to see what data is in what column without to schrol up again and loosing time and be confused.
i think i have seen this in another application so because of my list structure is the best way to represent data in an easy way as i have a lot of "repeatable" data in each row.

thanx in advance

 

[cheesegrits]

That's something we're looking at doing in 3.1, using the new bootcamp system. Probably not going to happen in 3.0.

-- hugh

 

[zorzis]

http://programmingdrunk.com/floatThead/#

i found that among others. i think this is somthing we can do also in that version. is a way to guide me where to implement that code?

 

[cheesegrits]

The documentation on that page should be fairly self explanatory.

The best way of including some custom JS on your page is to create a list JS file, by putting a file called list_X.js in ./components/com_fabrik/js, where X is the numeric ID of your list (the number in the left most column in the backend Fabrik Lists tab).

In that file, use the code they show you, after checking your page for the surrounding DIV, which will either be the fabrikDataContainer or "boxflex", depending on which template and options you are using. As usual, FireFox with Firebug is your "go to" tool of choice for inspecting the page for stuff like that.

If your site does not already use jQuery, you'll also need to include jQuery on your page. There are several Joomla plugins in the Extensions Directory that make doing this very painless.

The only issue you might run in to is with $ operator in their example code, whereas you'll need to run jQuery in noConflict() mode (google it).

If you have specific issues once you've tried doing this, point me at the page and I'll help you iron them out.

-- hugh

 

[cheesegrits]

Oh, of course you'll also need to include the floatHead JS itself.

I'm just doing a little research to find the easiest way for you to do this.

Bump this thread tomorrow if I haven't gotten abck to you on that one.

-- hugh

 

[zorzis]

bump! boom!

the web page is : http://aegean.haze.gr
catch me on skype for username and pass. same as when spoke last time.

as i can understand i have to make a list_X.js file but i cannot understand what to include? i have to include the Internal scrolling code? boxflex or fabrikDataContainer is another issue but it depends from the code i have to use. i did not understoud what exactly you described.
if you could help mate...
thanx

 

[cheesegrits]

Trying to get you on Skype now.

-- hugh

 

[troester]

You could do it with CSS, too.
Example to hide element energycites___name if screen with less than 790px

@media only screen and (max-width: 790px) {
#listform_54_com_fabrik_54 table.fabrikList th.energycites___name {display:none}
#listform_54_com_fabrik_54 table.fabrikList td.energycites___name {display:none}
#listform_54_com_fabrik_54 .list-footer {display:block}
}

Edit: I just see that you want to fix the list header. This CSS is only for hiding columns on small screens.

 

[cheesegrits]

Just to keep this one up to date, I caught up with Zorzis on Skype, and implemented the floatHead widget on his list.

I think there's a couple of styling issues to resolve, but the basic concept works.

-- hugh