Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member codewriter's Avatar
    Join Date
    Oct 2020
    Posts
    3
    Member #
    62084

    jQuery code problem

    Hello everyone. I just joined this forum. I've been having problems with my blog, trying to have its search result animate correctly. It will search fine with the code I have in there. So when I search a word in my search box I have created, it will scroll to it. But then, when I want to search another word, it will not scroll further down, nor opposite direction if the word is at the top of the page. How can I achieve this?

    My code is as follows, and I believe it's not correct, but I'm not sure:

    Code:
    <script type="text/javascript">
    $(function() {
        $('.searchTerm').bind('keyup change', function(ev) {
            // pull in the new value
            var searchTerm = $(this).val();
    
            // remove any old highlighted terms
            $('body').removeHighlight();
    
            // disable highlighting if empty
            if ( searchTerm ) {
                // highlight the new term
                $('body').highlight( searchTerm );
                $('html, body').delay(1150).animate({
            scrollTop: $('p').offset().top +535
        }, 475);
            }
        });
    });
    </script>

    And here is the CSS/HTML side :

    Code:
    .searchTerm {
      width: 100%;
      border: 1px solid #999fcf;
      border-right: none;
      padding: 5px;
      height: 20px;
      border-radius: 15px 0 0 15px;
      outline: none;
      color: #aaa;
      background:#fff;
      font-family:Open Sans, Overpass, Arial;
      transition:all .5s ease-in-out;
      box-shadow:inset 4px 6px 8px -5px #777;
    }
    Code:
    <input type="text" class="searchTerm" placeholder="Search blog" onfocus="this.value=''" value="Search blog">

    I'd appreciate it if you can steer me in the right direction with this, as I am so new to using scrollTop(). I find it really cool though

  2.  

  3. #2
    Junior Member codewriter's Avatar
    Join Date
    Oct 2020
    Posts
    3
    Member #
    62084
    Anyone here?! Please, I need help with the above. Have been trying to work it out, but haven't yet.

  4. #3
    Senior Member sarahswansea's Avatar
    Join Date
    Oct 2015
    Location
    Swansea, UK
    Posts
    173
    Member #
    52184
    Liked
    67 times
    Can you put together a minimal example as a full HTML page?

    I tried your snippets to help you out but I don't know what version of jQuery you're using (I tried with 3.5.1 and got "removeHighlight is not a function") and also with the HTML you've given there aren't any search terms to test with.
    Tawesoft <-- hire me here if you need a Go or Python webdev

  5. #4
    Junior Member codewriter's Avatar
    Join Date
    Oct 2020
    Posts
    3
    Member #
    62084
    Quote Originally Posted by sarahswansea View Post
    Can you put together a minimal example as a full HTML page?

    I tried your snippets to help you out but I don't know what version of jQuery you're using (I tried with 3.5.1 and got "removeHighlight is not a function") and also with the HTML you've given there aren't any search terms to test with.
    Hi Sarah, I'll give you the link to my blog so you can try it out

    https://iwriteonwheels.tumblr.com/


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 12:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com