Search Results are Now Responsive (Live)


 
Thread Tools Search this Thread
The Lounge What is on Your Mind? Search Results are Now Responsive (Live)
# 1  
Old 08-13-2018
Search Results are Now Responsive (Live)

Hey,

It took me nearly 10 hours of work, but the forum search results are now fully responsive using CSS Flex and jQuery.

By search results, I mean forum searches (not man page searches). Searches we do every day like: "Todays Posts", "New Topics", it's done!

I have tested it and it works great, but I may need to fix some small issue for mods (like moderated or deleted posts) as they come up.

Here is the jQuery code I wrote to make this happen. It's not as easy as it looks, believe me, LOL

Code:
$(document).ready(function() {
    $(".neo-search-results").css({
        overflow: "visable"
    });
    $(".neo-search-results-head-td").css({
        "display": "flex",
        "flex-flow": "row wrap",
        "justify-content": "space-between",
        "flex-direction": "row",
        "align-content": "stretch"
    });
    $(".neo-search-results-thead").find("td").removeAttr("width, align, nowrap");
    $(".neo-search-results-thead").css({
        "display": "flex",
        "flex-flow": "row wrap",
        "justify-content": "space-between",
        "flex-direction": "row",
        "align-content": "stretch"
    });
    $(".neo-threadbit-container").css({
        "display": "flex",
        "flex-flow": "row wrap",
        "flex-direction": "row",
        "align-content": "stretch",
        "justify-content": "space-between"
    });
    $(".neo-search-results-icons, .neo-threadbit-status-icon").css({
        "width": "35"
    });
    $(".neo-search-results-thread-starter, .neo-threadbit-thread-info").css({
        "width": "200",
        "flex-grow": "8"
    });
    $(".neo-search-results-last-post, .neo-threadbit-thread-last").css({
        "width": "150",
        "flex-grow": "2"
    });
    $(".neo-search-results-numbers,  .neo-threadbit-numbers").css({
        "width": "50"
    });
    $(".neo-search-results-forum, .neo-threadbit-thread-forum-title").css({
        "width": "130",
        "flex-grow": "1"
    });
    $(".neo-search-results-vbmenu, .neo-threadbit-thread-inlinemod").css({
        "width": "40"
    });
    $(window).on("resize", neoAdjustThreadBits);
    neoAdjustThreadBits();
    function neoAdjustThreadBits() {
        var widthNow = $(window).width();
        if (widthNow < 400) {
            $(".neo-search-results-vbmenu, .neo-threadbit-thread-inlinemod").hide()
        } else {
            $(".neo-search-results-vbmenu, .neo-threadbit-thread-inlinemod").show()
        }
        if (widthNow < 700) {
            $("#neo-search-results-showing, .neo-search-results-thead").hide()
        } else {
            $("#neo-search-results-showing,.neo-search-results-thead").show()
        }
        if (widthNow < 980) {
            $(".neo-threadbit-status-icon").hide()
        } else {
            $(".neo-threadbit-status-icon").show()
        }
    }
});

Login or Register to Ask a Question

Previous Thread | Next Thread

6 More Discussions You Might Find Interesting

1. What is on Your Mind?

Search Results (Search, New, and Today's Topics) Animation Switch

Hey, I added an animation switch on the search results page; so by default the thread previews are off, but if you want to look at them, just click on the green button and the thread previews will turn on (and back off). See image and attached animation: ... (1 Reply)
Discussion started by: Neo
1 Replies

2. Shell Programming and Scripting

Finding files with the name of the results of another search

Dear All, I have a file with this name= xx-nnnn.csv , I has texts in this format, 231048975938093056;234317862284705793;609384034;14955353;1344700706000;1; 231048975938093056;234317958632054785;715450794;52422878;1344700729000;1;... (10 Replies)
Discussion started by: davidfreed
10 Replies

3. Shell Programming and Scripting

Gawk Narrowing Down Search Results

I am using GAWK to search for a specific pattern: gawk '{IGNORECASE=1;} /<a href=/&&/\$/,/<\/a/' index.html <a class=author href="http://washingtondc.craigslist.org/search/?areaID=10&amp;amp;catAbb=sss&amp;amp;query=ps vita" title="craigslist washington, DC | all fo r sale / wanted search &quot;ps... (1 Reply)
Discussion started by: metallica1973
1 Replies

4. Shell Programming and Scripting

Can ctag and cscope support recording search results and displaying the history results ?

Hello , When using vim, can ctag and cscope support recording search results and displaying the history results ? Once I jump to one tag, I can use :tnext to jump to next tag, but how can I display the preview search result? (0 Replies)
Discussion started by: 915086731
0 Replies

5. Shell Programming and Scripting

AWK - no search results

Hi all, I'm new to awk and I'm experiencing syntax error that I don't know how to resolve. Hopefully some experts in this forum can help me out. I created an awk file that look like this: $ cat myawk.awk BEGIN { VAR1=PATTERN1 VAR2=PATTERN2 } /VAR1/ { flag=1 } /VAR2/ { flag=0 } {... (7 Replies)
Discussion started by: hk18
7 Replies

6. Shell Programming and Scripting

Operations on search results

Hi, I am a newbie at Unix scritping, and I have a question. Looking at the search functionality on Unix. Here I have a structure root---------dir1 ------- file1, file2, file3 |_____dir2 ______file1@, file4 |_____dir3_______file1@, file5 Under root directory, I... (4 Replies)
Discussion started by: nj302
4 Replies
Login or Register to Ask a Question