FMCodes • All-in-one Webmasters community
Would you like to react to this message? Create an account in a few clicks or log in to continue.

You are not connected. Please login or register

FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials » Spotlight search on forums

Spotlight search on forums

3 posters
Valid
Niko
  • Forum Administrator

    Team contributor
    You have been part of the community team
    Community veteran
    You belong to this community since its ancient time
    Active Contributor
    The user has wrote more than 100 posts and comments
    Passioned user
    You have participated in 50+ different topics, a true fan!
    Post lover
    You have liked more than 50 posts!
    Beta Tester
    You have been part of the Beta-Testing team
    Forumotion expert
    This user is an expert with Forumotion free forum hosting
    10th Anniversary (Grand Re-open)
    Thanks for being part of our grand re-opening
    Merry Christmas 2022
    Thanks for having been with us during Christmas season!
    Forum Writer
    You have opened more than 20 topics on the forum
    The Life of the Party
    You have made more than 20 members in our community, wow!
    Members Guru
    You have received more than 50 likes on your posts. Our members really what you have to say!
      Posts : 3614
      Points : 129487
    Spotlight search on forums


    Overview

    Description

    The resource allows 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 searching 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.

    Demonstration

    Spotlight search on forums Scree146

    Technical limitations

    › This tutorial is dedicated to the forums powered by Forumotion free forum service
    › It works with all Forumotion forums' versions

    Installation

    Introduction

    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:

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




    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


    Notes

    Approved byNiko
    Approved on June 3rd, 2023
    Tested on Most recent browsers
    Difficulty level  /   
    Source FMCodes

    This resource belong to this community unless differently stated.
    No reproduction possible without our agreement, in accordance with article L122-1 of the CPI.



    Valid
    YoshiGM
    • Forum Administrator

      Community veteran
      You belong to this community since its ancient time
      Active Contributor
      The user has wrote more than 100 posts and comments
      Passioned user
      You have participated in 50+ different topics, a true fan!
      Team contributor
      You have been part of the community team
      Forumotion expert
      This user is an expert with Forumotion free forum hosting
      10th Anniversary (Grand Re-open)
      Thanks for being part of our grand re-opening
      Friendly user
      You have added many community members as friends!
      Beta Tester
      You have been part of the Beta-Testing team
      Merry Christmas 2022
      Thanks for having been with us during Christmas season!
      Forum Writer
      You have opened more than 20 topics on the forum
      Members Guru
      You have received more than 50 likes on your posts. Our members really what you have to say!
      Post lover
      You have liked more than 50 posts!
      Forum Partner
      This member is founder of a community affiliated with FMCodes!
        Posts : 595
        Points : 99312
      Excellent!

      Thanks.




      Spotlight search on forums Yoshig10

      Hey Guest, Welcome to FMCodes.  Hello
      Don't forget to read the General Rules
      • Want to improve your forum? Take a look of the Coding Community section.
      • Need any new design, promote your forum or any related? You can use our Forum Services

      Helping those who need it is not only part of duty, but of happiness.

      No Support via PM!
      Valid
      sivastar


      • Community veteran
        You belong to this community since its ancient time
        Active poster
        The user has wrote more than 50 posts
        Passioned user
        You have participated in 50+ different topics, a true fan!
          Posts : 65
          Points : 93299
        Nice.... Thanks @Niko

        Topic Actions

        Sponsored




        FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials » Spotlight search on forums

        ©phpBB | Contact | Report an abuse | Cookies