Tutorial: Javascript Filter Search

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Tony
Posts: 875
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Tutorial: Javascript Filter Search

Post by Tony » Tue Mar 26, 2019 1:33 pm

Hi,

In response to this post, viewtopic.php?f=6&t=13585, by Dizzz asking if he could create a search field, to find specific nodes in a large (300 node) project I've created this "Little Bits" tutorial.

The tutorial show you how to add JavaScript Filter Search to a virtual tour. You would use the search in a situation where you may have a large number of nodes and a scrolling list would be impractical and time consuming to search through.

Here's the finished project https://s3-ap-southeast-2.amazonaws.com ... index.html

In this tutorial we modify a basic p2vr project tour by;
  • Adding Custom Node ID’s to each node
  • Enabling Direct Node Access
and modifying the skin by:
  • Adding a global variable
  • Creating the Filter Search skin elements
  • Modifying a JavaScript Search Filter to work within a Pano2VR project
You can check it out here https://tonyredhead.com/pano2vr-little- ... ter-search

Once again feedback and comments welcomed.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

VBad
Posts: 19
Joined: Tue Mar 27, 2018 5:52 pm

Re: Tutorial: Javascript Filter Search

Post by VBad » Wed Dec 11, 2019 7:49 am

Hi Tony. How can I pin a search string? (I need her to not move).

User avatar
Tony
Posts: 875
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Tutorial: Javascript Filter Search

Post by Tony » Thu Dec 12, 2019 12:24 pm

Hi,

Not quite sure what you mean by "pin" can you be a bit more specific?

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

VBad
Posts: 19
Joined: Tue Mar 27, 2018 5:52 pm

Re: Tutorial: Javascript Filter Search

Post by VBad » Sun Feb 02, 2020 10:26 am

Tony, how to pin a search bar? (panel in which we write the search query)

User avatar
Tony
Posts: 875
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Tutorial: Javascript Filter Search

Post by Tony » Wed Feb 05, 2020 6:30 am

Hi,

Sorry but I don't really understand what you want. The search element is currently pinned to the bottom center of the canvas but I think you want something different?

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

VBad
Posts: 19
Joined: Tue Mar 27, 2018 5:52 pm

Re: Tutorial: Javascript Filter Search

Post by VBad » Wed Feb 05, 2020 1:52 pm

https://youtu.be/SFQWwkrs5v8
Tony, we can’t find the error in the code. We set the code as in your lesson. We checked several times. How to solve this problem?

User avatar
Tony
Posts: 875
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Tutorial: Javascript Filter Search

Post by Tony » Thu Feb 06, 2020 4:16 am

Hi,

If you look at your video you will see the issue. At 0.12, on your version, the scrollbar extends from top to bottom while at 0.23, on my version, the scrollbar is within the application inline with the bottom fields.

image-previewgra33.jpg
image-previewgra33.jpg (301.5 KiB) Viewed 244 times



I'd check the iFrame code to make sure you dont have Scrollbar selected.

If you go to https://s3-ap-southeast-2.amazonaws.com ... earch.html you can see the placement of the scrollbar.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

VBad
Posts: 19
Joined: Tue Mar 27, 2018 5:52 pm

Re: Tutorial: Javascript Filter Search

Post by VBad » Thu Feb 06, 2020 10:23 am

Thank you, Tony. We will check it.

VBad
Posts: 19
Joined: Tue Mar 27, 2018 5:52 pm

Re: Tutorial: Javascript Filter Search

Post by VBad » Sat Feb 08, 2020 2:25 pm

Tony, the scrollbar should be inside the application. But after the search, the scroll bar is missing and the results do not scroll:
<IFRAME src="includes/search.html"width="100%"height="100%"frameborder="no"scrolling="no"></IFRAME>
We made a temporary decision, but it is wrong:
<IFRAME src="includes/search.html"width="100%"height="100%"frameborder="no"scrolling="yes"></IFRAME>
In search.html file:
div.fs1{
width: 100%;
height: 180px;
overflow: auto;
Please tell me what needs to be fixed?
Sincerely, Vladimir

User avatar
Tony
Posts: 875
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Tutorial: Javascript Filter Search

Post by Tony » Sun Feb 09, 2020 2:48 am

Hi,

The sample iFrame code you supplied has no spaces between functions.
<IFRAME src="includes/search.html"width="100%"height="100%"frameborder="no"scrolling="no"></IFRAME>
It should be;
<IFRAME src="includes/search.html" width="100%" height="100%" frameborder="no" scrolling="no"></IFRAME>
Can you provide me more information on the OS, Browser etc and if possible the skin.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

VBad
Posts: 19
Joined: Tue Mar 27, 2018 5:52 pm

Re: Tutorial: Javascript Filter Search

Post by VBad » Sun Feb 09, 2020 8:05 am

HI Tony. We use Windows_7_64, Google Chrome_80.0.3987.87. I’ll send the skin after working on the bugs (a bit later).
Sincerely, Vladimir

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest