The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Spotlight search on forums

3 posters

Go down

Spotlight search on forums Empty Spotlight search on forums

Post by Niko June 3rd 2023, 3:05 pm

Coucou,

a lot of resources today - I am having fun :wouhou: :wouhou:

Description

The resource allows you to have a Spotlight Search bar - the same that appears on Apple computers - when you try to write something out of an input or textarea field. A popup will appear to allow you to search within your forum's content!

By clicking on the backdrop (out of the popup) or on the close button, you will be back to your regular forum.
You can also exit by clicking ESC on your keyboard

Demonstration

Spotlight search on forums Scree146

In the coming weeks, we will also try to implement real-time results without having to change the page.

CSS

In order to design the style of the resource, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the following code:

(You need to reply to the topic in order to see the code resources)


CSS Customization

  • Code:
    #search_hover_page_backdrop
    - customize the backdrop of the popup
  • Code:
    #search_hover_page_body
    - customize the popup frame
  • Code:
    span.search_hover_close
    - customize the close button


Javascript & jQuery

For the next step you need to go towards Administration Control Panel (ACP) Modules HTML & Javascript Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.

  • Title: free choice - does not influence the code effect
  • Where: All pages
  • Code:
    Code:
    $(function() {

       /*
       Title: Spotlight search on forums
       Author: Niko
       Version: 1.2
       Release Date: 03.06.2023 (dd.mm.year)
       Contact: https://www.fmcodes.net/u2
       Original content: https://www.fmcodes.net/t2038-
       */

       var search_label = "Search"; //button content
       var search_close= "Close"; //close button content
       var search_header= "Search on forum"; //header title content

       $('body').not(':input[type=button], :input[type=text] :input[type=submit], :input[type=reset], textarea').keypress(function(content) {
          var focused = $(':focus');
          if (focused[0] || $('#search_hover_page_backdrop').length > 0) {
                         $('#search_hover_page_body input[type="text"]').focus();
          } else {
                         console.log(content);
                         console.log(this.value);
             $('body').prepend('<div id="search_hover_page_backdrop"></div><div id="search_hover_page_body"><span class="search_hover_close">'+search_close+'</span><h2>'+search_header+'</h2><div id="search-box"><form method="GET" action="/search" id="search"><p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value=""><input class="button2" type="submit" value="'+search_label+'"></p></form></div></div>');
                         $('#search_hover_page_body input[type="text"]').val('');
                         $('#search_hover_page_body input[type="text"]').focus();
          }
       });

       $('body').on('click', '#search_hover_page_backdrop, .search_hover_close', function() {
          $('#search_hover_page_backdrop').remove();
          $('#search_hover_page_body').remove();
       });

    $(document).keyup(function(e) {
        if (e.key === "Escape") { // escape key maps to keycode `27`
            $('#search_hover_page_backdrop').remove();
          $('#search_hover_page_body').remove();
        }
    });

    });


Javascript Customization

You can customize the content of the variable
Code:
var search_label = "Search"; //button content
for the text to show on the button

You can customize the content of the variable
Code:
var search_header= "Search on forum"; //header title content
for the text to show the header of the popup

You can customize the content of the variable
Code:
var search_close= "Close"; //button close content
for the text to show on the button to close the popup




Have fun! Artist


Last edited by Niko on June 3rd 2023, 10:19 pm; edited 1 time in total
Niko
Niko
Helper
Helper

Male Posts : 3106
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

skouliki, SLGray, YoshiGM, SarkZKalie, TonnyKamper and Razor12345 like this post

Back to top Go down

Spotlight search on forums Empty Re: Spotlight search on forums

Post by TonnyKamper June 3rd 2023, 4:10 pm

Woohoo you're on a roll very nice again  I love you
TonnyKamper
TonnyKamper
Active Poster

Female Posts : 1048
Reputation : 78
Language : Dutch/English
Location : DSF Admin

http://www.nederlandheelt.nl/forum

Niko likes this post

Back to top Go down

Spotlight search on forums Empty Re: Spotlight search on forums

Post by YoshiGM June 3rd 2023, 4:28 pm

Great code and tutorial!

Thank Niko Clap
YoshiGM
YoshiGM
Active Poster

Male Posts : 1499
Reputation : 144
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Niko likes this post

Back to top Go down

Spotlight search on forums Empty Re: Spotlight search on forums

Post by Niko June 3rd 2023, 6:33 pm

Thanks a lot guys 1st

edit: I've edited the code to be able to close the popup also by pressing ESC on your keyobards
Niko
Niko
Helper
Helper

Male Posts : 3106
Reputation : 244
Language : English, Italian, French
Location : Italy

https://www.fmcodes.net/

TonnyKamper likes this post

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum