Sponsored Content
The Lounge What is on Your Mind? JQuery and CSS Flex Code for Responsive WOL Page Post 303021488 by Neo on Friday 10th of August 2018 11:02:39 AM
Old 08-10-2018
JQuery and CSS Flex Code for Responsive WOL Page

I have just wrote this jQuery to the WOL page, so the table of users on line will not need scrollbars and will instead transform into a responsive table:

Code:
<script>
jQuery(document).ready(function (){
    jQuery("#neo-who-flex-tcat").
        css({"display":"flex","flex-flow":"row wrap",
            "justify-content":"space-between",
            "flex-direction":"row","align-content":"stretch"});
    jQuery("#neo-who-flex-thead").
        css({"display":"flex","flex-flow":"row wrap",
            "justify-content":"space-between","flex-direction":"row",
            "align-content":"stretch"});
    jQuery(".neo_table_wrapper").
        css({"overflow":"visible"});
    jQuery(".neo-onlinebit-flex").
        css({"display":"flex","flex-flow":"row wrap",
            "flex-direction":"row","align-content":"stretch",
            "justify-content":"stretch"});
    jQuery(".neo_table_wrapper").find("td").
        removeAttr("width").css({"align-self":"stretch",
        "width":"250","flex-grow": "1"});
});
</script>

You can check it out by going to the Who is Online Page page (members only) and change with width of your browser and when it gets small, instead of the scrollbars, the column boxes cascade down (responsive).

Code:
https://youtu.be/vFJVX4-bsVM



This means I was able to use CSS Flex to make the table responsible without changing all the table, thead, th, and td tags to divs and spans.
 

6 More Discussions You Might Find Interesting

1. Shell Programming and Scripting

need to know best forum site for flex code

Hi All, Please help me to know the similar forum site but for the flex code. Thanks (6 Replies)
Discussion started by: aish11
6 Replies

2. What is on Your Mind?

Man Page Repositories - Added jQuery and Bootstrap

I added both jQuery and Bootstrap Javacript libs to all man page repository pages. TODO: I need to add pagination to these repos because most are very large and load to slow on a single page. For the first upgrade, I manually added one new CSS Class (repository) to the main repo tables and... (0 Replies)
Discussion started by: Neo
0 Replies

3. What is on Your Mind?

JQuery and CSS Flex Code for Responsive Forum Home Page

So far, I have completed making the home page more responsive (except for the forum stats at the top and the WOL box at the bottom, they still use scroll bars). xevV3_iZ8-s For full screen use the link below and set your YT resolution to 1080p60 HD https://youtu.be/xevV3_iZ8-s Here is... (1 Reply)
Discussion started by: Neo
1 Replies

4. Web Development

Turning jQuery Code into Vue.js

The following is some code I am working on the replace our navbar (someday) with a Vue component. Vue.component("unix-navbar", { template: `<div class="neo-table-border vuenavbar"><div class="flex-item" style="margin-bottom:10px;padding-top:13px;"><a class="vuenavbarhome"... (19 Replies)
Discussion started by: Neo
19 Replies

5. Web Development

PHP Changes to WOL for New Forum Home Page

Wrote some PHP code today to make the Who Is Online (WOL) in the forums work properly with the new home page: Wrote this global plugin to add the location to both the user table (for members) and session table (for guests + registered users) <?php if (THIS_SCRIPT != 'misc' and... (0 Replies)
Discussion started by: Neo
0 Replies

6. What is on Your Mind?

New Responsive 404 Page for UNIX.com

Just created (actually, only modified... it was created by ShoutOut) a new responsive 404 "not found" page with the help of ShoutOut free templates. https://www.unix.com/status/404.html Same for 401 and 403 errors. Picture sans animation: ... (2 Replies)
Discussion started by: Neo
2 Replies
Mojo::DOM::CSS(3pm)					User Contributed Perl Documentation				       Mojo::DOM::CSS(3pm)

NAME
Mojo::DOM::CSS - CSS3 selector engine SYNOPSIS
use Mojo::DOM::CSS; # Select elements from DOM tree my $css = Mojo::DOM::CSS->new(tree => $tree); my $elements = $css->select('h1, h2, h3'); DESCRIPTION
Mojo::DOM::CSS is the CSS3 selector engine used by Mojo::DOM. SELECTORS
All CSS3 selectors that make sense for a standalone parser are supported. "*" Any element. my $all = $css->select('*'); "E" An element of type "E". my $title = $css->select('title'); "E[foo]" An "E" element with a "foo" attribute. my $links = $css->select('a[href]'); "E[foo="bar"]" An "E" element whose "foo" attribute value is exactly equal to "bar". my $fields = $css->select('input[name="foo"]'); "E[foo~="bar"]" An "E" element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar". my $fields = $css->select('input[name~="foo"]'); "E[foo^="bar"]" An "E" element whose "foo" attribute value begins exactly with the string "bar". my $fields = $css->select('input[name^="f"]'); "E[foo$="bar"]" An "E" element whose "foo" attribute value ends exactly with the string "bar". my $fields = $css->select('input[name$="o"]'); "E[foo*="bar"]" An "E" element whose "foo" attribute value contains the substring "bar". my $fields = $css->select('input[name*="fo"]'); "E:root" An "E" element, root of the document. my $root = $css->select(':root'); "E:checked" A user interface element "E" which is checked (for instance a radio-button or checkbox). my $input = $css->select(':checked'); "E:empty" An "E" element that has no children (including text nodes). my $empty = $css->select(':empty'); "E:nth-child(n)" An "E" element, the "n-th" child of its parent. my $third = $css->select('div:nth-child(3)'); my $odd = $css->select('div:nth-child(odd)'); my $even = $css->select('div:nth-child(even)'); my $top3 = $css->select('div:nth-child(-n+3)'); "E:nth-last-child(n)" An "E" element, the "n-th" child of its parent, counting from the last one. my $third = $css->select('div:nth-last-child(3)'); my $odd = $css->select('div:nth-last-child(odd)'); my $even = $css->select('div:nth-last-child(even)'); my $bottom3 = $css->select('div:nth-last-child(-n+3)'); "E:nth-of-type(n)" An "E" element, the "n-th" sibling of its type. my $third = $css->select('div:nth-of-type(3)'); my $odd = $css->select('div:nth-of-type(odd)'); my $even = $css->select('div:nth-of-type(even)'); my $top3 = $css->select('div:nth-of-type(-n+3)'); "E:nth-last-of-type(n)" An "E" element, the "n-th" sibling of its type, counting from the last one. my $third = $css->select('div:nth-last-of-type(3)'); my $odd = $css->select('div:nth-last-of-type(odd)'); my $even = $css->select('div:nth-last-of-type(even)'); my $bottom3 = $css->select('div:nth-last-of-type(-n+3)'); "E:first-child" An "E" element, first child of its parent. my $first = $css->select('div p:first-child'); "E:last-child" An "E" element, last child of its parent. my $last = $css->select('div p:last-child'); "E:first-of-type" An "E" element, first sibling of its type. my $first = $css->select('div p:first-of-type'); "E:last-of-type" An "E" element, last sibling of its type. my $last = $css->select('div p:last-of-type'); "E:only-child" An "E" element, only child of its parent. my $lonely = $css->select('div p:only-child'); "E:only-of-type" An "E" element, only sibling of its type. my $lonely = $css->select('div p:only-of-type'); "E.warning" my $warning = $css->select('div.warning'); An "E" element whose class is "warning". "E#myid" my $foo = $css->select('div#foo'); An "E" element with "ID" equal to "myid". E:not(s) An "E" element that does not match simple selector "s". my $others = $css->select('div p:not(:first-child)'); "E F" An "F" element descendant of an "E" element. my $headlines = $css->select('div h1'); "E > F" An "F" element child of an "E" element. my $headlines = $css->select('html > body > div > h1'); "E + F" An "F" element immediately preceded by an "E" element. my $second = $css->select('h1 + h2'); "E ~ F" An "F" element preceded by an "E" element. my $second = $css->select('h1 ~ h2'); "E, F, G" Elements of type "E", "F" and "G". my $headlines = $css->select('h1, h2, h3'); "E[foo=bar][bar=baz]" An "E" element whose attributes match all following attribute selectors. my $links = $css->select('a[foo^="b"][foo$="ar"]'); ATTRIBUTES
Mojo::DOM::CSS implements the following attributes. "tree" my $tree = $css->tree; $css = $css->tree(['root', [qw(text lalala)]]); Document Object Model. METHODS
Mojo::DOM::CSS inherits all methods from Mojo::Base and implements the following new ones. "select" my $results = $css->select('head > title'); Run CSS3 selector against "tree". SEE ALSO
Mojolicious, Mojolicious::Guides, <http://mojolicio.us>. perl v5.14.2 2012-09-05 Mojo::DOM::CSS(3pm)
All times are GMT -4. The time now is 02:34 PM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy