Search bar/ Auto Scroll

[1518]

I have an HTML file of a website that I have saved. I am quoting part of it and so I have used the tags to highlight them and then the tags to make the source numbers superscript. I also want to add in a search bar, I found a few online but all of them didn't work. Does anyone have any suggestions? Instead of a search bar, I could make a button that will automatically scroll to a set of text (preset.) The website that I am coping is: https://blakeandrews.blogspot.com/2015/03/q-with-matt-stuart.html

 

[OSBK]

I am not sure if I understood you correctly, are you after a search bar with site-wide search feature? if so then it depends, if you wanna have a simple search just on the front end side, you can have a simple input field and submit button for example, and use javascript to listen to that button click event, use the value of that input, to search if that string exists withing the textContent of the element you are trying to search through.

If you wanna use a back end search and let the server handle it then that's completely different and depends on what server/backend language you are using.

 

For the button that automatically scrolls, you can use an anchor tag <a> with the href being an id you assign to the element you wanna scroll into, little example:

<a href="#myElement">Click</a>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p id="myElement">The element you wanna scroll into</p>

 

[1518]

46 minutes ago, OSBK said:

I am not sure if I understood you correctly, are you after a search bar with site-wide search feature? if so then it depends, if you wanna have a simple search just on the front end side, you can have a simple input field and submit button for example, and use javascript to listen to that button click event, use the value of that input, to search if that string exists withing the textContent of the element you are trying to search through.

If you wanna use a back end search and let the server handle it then that's completely different and depends on what server/backend language you are using.

 

For the button that automatically scrolls, you can use an anchor tag <a> with the href being an id you assign to the element you wanna scroll into, little example:

<a href="#myElement">Click</a>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p>lorem ipsum bla bla bla bla bla bla bla bla bla bla bla bla </p>
<p id="myElement">The element you wanna scroll into</p>

 

Thanks for the response: one more question, I saw that you used a <p> tag what does that do? And can I set multiple places to scroll?  

[OSBK]

26 minutes ago, aeliasov9 said:

Thanks for the response: one more question, I saw that you used a <p> tag what does that do? And can I set multiple places to scroll?  

The <a> is a link or anchor tag, you use it to point to websites (your own or third party) or even parts of your websites using the id just like I mentioned above.

 

The <p> is a paragraph tag, I just used it here for demonstration you don't need to use it, the id can point to any element you want.

 

Multiple places to scroll to means multiple <a> tags with multiple locations each with a unique id (you can't use the same id for multiple elements), here is another example:

 

<a href="#firstElement">First Element</a>
<a href="#secondElement">Second Element</a>
<a href="#thirdElement">Third Element</a>
<!-- Some contect here I guess -->
<p id="firstElement">This is the first element</p>
<p id="secondElement">This is the second element</p>
<p id="thirdElement">This is the third element</p>

Here you have three <a> tags (three links), each link points (takes you) to an element which you can specify using the id; so if I click on the First Element <a> tag it will scroll me down to the paragraph with the id of "firstElement", etc...

Again I used the <p> tag just for demonstration it can be anything.

[1518]

4 minutes ago, OSBK said:

The <a> is a link or anchor tag, you use it to point to websites (your own or third party) or even parts of your websites using the id just like I mentioned above.

 

The <p> is a paragraph tag, I just used it here for demonstration you don't need to use it, the id can point to any element you want.

 

Multiple places to scroll to means multiple <a> tags with multiple locations each with a unique id (you can't use the same id for multiple elements), here is another example:

 

<a href="#firstElement">First Element</a>
<a href="#secondElement">Second Element</a>
<a href="#thirdElement">Third Element</a>
<!-- Some contect here I guess -->
<p id="firstElement">This is the first element</p>
<p id="secondElement">This is the second element</p>
<p id="thirdElement">This is the third element</p>

Here you have three <a> tags (three links), each link points (takes you) to an element which you can specific using the id; so if I click on the First Element <a> tag it will scroll me down to the paragraph with the id of "firstElement", etc...

Again I used the <p> tag just for demonstration it can be anything.

I think the code works but when I put on my website and click one the button it opens a new tab (the URL is: https://942052455-atari-embeds.googleusercontent.com/embeds/16cb204cf3a9d4d223a0a3fd8b0eec5d/inner-frame-minified.html?jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.L8HxoJpS-sM.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCNejPLAl6K5E0dwd7jvxrqCIVRloQ%2Fm%3D__features__#firsthighlight)

and it doesn't scroll down do you know why 

The website is:https://sites.google.com/view/ae-a-level-photography-sources/matt-stuart and is at the bottom of the page.

[OSBK]

7 minutes ago, aeliasov9 said:

I think the code works but when I put on my website and click one the button it opens a new tab (the URL is: https://942052455-atari-embeds.googleusercontent.com/embeds/16cb204cf3a9d4d223a0a3fd8b0eec5d/inner-frame-minified.html?jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.L8HxoJpS-sM.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCNejPLAl6K5E0dwd7jvxrqCIVRloQ%2Fm%3D__features__#firsthighlight)

and it doesn't scroll down do you know why 

The website is:https://sites.google.com/view/ae-a-level-photography-sources/matt-stuart and is at the bottom of the page.

Oh my bad, seems like I miss-understood what you were trying to, what I showed you is how to scroll down to an element in your own page/website, but I guess what you are after is scrolling into an element on a different a website!

 

The concept is the same, the only difference is that you need the id of the element from the website, so you'll have to look in that website's HTML and look for the id of that element you wanna scroll into.

 

If that elements doesn't have an id you are kinda out of luck!

[1518]

Just now, OSBK said:

Oh my bad, seems like I miss-understood what you were trying to, what I showed you is how to scroll down to an element in your own page/website, but I guess what you are after is scrolling into an element on a different a website!

 

The concept is the same, the only difference is that you need the id of the element from the website, so you'll have to look in that website's HTML and look for the id of that element you wanna scroll into.

 

If that elements doesn't have an id you are kinda out of luck!

Its my website and i have embed another website into it (I saved it as a HTML file so i can change it)

[OSBK]

Just now, aeliasov9 said:

Its my website and i have embed another website into it (I saved it as a HTML file so i can change it)

If you own both websites and can edit them then its an easy fix, on the website you wanna have the scroll effect modify the element you wanna scroll it by adding an id to the tag, then on your other website where you have the link, add that id to the end of the link just like you did before!

[1518]

Like this: <

mark id="firsthighlight">
so I was born in Harrow which is a suburb of London.
#<sup> 1 </sup> </mark> I went to school locally and was pretty average <mark>
until the age of about 8 when I discovered the trumpet. I had an inspirational trumpet teacher called Mr. Cuell (almost cool but not quite).&nbsp; He was mesmerizing and inspiring, like all great teachers are. I practiced everyday and every night for around 4 years to be the best trumpet player I could possibly be for him —and to a lesser degree for me.Then he died... I quit the trumpet, <sup> 2&3 </sup> </mark> 

and then at the top: 

<a href="#firsthighlight">First Element</a>

 

[OSBK]

14 minutes ago, aeliasov9 said:

Like this: <

mark id="firsthighlight">
so I was born in Harrow which is a suburb of London.
#<sup> 1 </sup> </mark> I went to school locally and was pretty average <mark>
until the age of about 8 when I discovered the trumpet. I had an inspirational trumpet teacher called Mr. Cuell (almost cool but not quite).&nbsp; He was mesmerizing and inspiring, like all great teachers are. I practiced everyday and every night for around 4 years to be the best trumpet player I could possibly be for him —and to a lesser degree for me.Then he died... I quit the trumpet, <sup> 2&3 </sup> </mark> 

and then at the top: 

<a href="#firsthighlight">First Element</a>

 

Exactly! this is when you have both the element you wanna scroll into and the link you click on the same page.

 

If they're on a different page, its same thing but on the href you add the url of that page + id for example.

<a href="https://linkToOtherPage.com#firsthighlight">First element</a>

 

Edited October 19, 2021 by OSBK
typos

[1518]

7 minutes ago, OSBK said:

Exactly! this is when you have both the element you wanna scroll into and the link you click on the same page.

 

If they're on a different page, its same thing but on the href you add the url of that page + id for example.

<a href="https://linkToOtherPage.com/#firstghighlight">First element</a>

 

Yes that is what i did and when i click on the button it links to: https://195878884-atari-embeds.googleusercontent.com/embeds/16cb204cf3a9d4d223a0a3fd8b0eec5d/inner-frame-minified.html?jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.L8HxoJpS-sM.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCNejPLAl6K5E0dwd7jvxrqCIVRloQ%2Fm%3D__features__#firsthighlight

[OSBK]

So I did check it on your website and I noticed a little thingy:

 

 

The menu I pulled on the right shows the events related to that button/link you put there, an event is just a reaction to something for example a click, a double click, a mouse hover, etc...

There is a click event that it taking over that link, meaning when you are clicking that "First element" there is something else trying to prevent that functionality and change it into something else, its source is a JavaScript script from Google static, that script is pretty much taking control of that link its why it gives you that weird link.

 

An easy solution would be to just remove that script from your website but Iam not sure what you're using it for so I can't tell for sure if you can remove.

Can you tell me something tho, can you add some JavaScript to your website? if so I believe I can make you a little script to override that google thingy.