I am attempting to create a search bar for looking through text on my website without using external code (such as google's custom search engine).
I have been searching this for a while and without using php it doesn't seem like there is a good solution.
I have so far found this fiddle, but don't entirely understand how it works as I am new to js http://jsfiddle.net/pdgucocw/ (code from jsfiddle copied here:
function contains(text_one, text_two) {
return text_one.toLowerCase().indexOf(text_two.toLowerCase()) != -1;
}
$("#searchText").keyup(function(){
var searchText = $(this).val();
$("ul li").each(function() {
$(this).toggle(contains($(this).text(), searchText));
});
});
right now I have this:
<p id="q">
Some text, which is a lot of text, text text.
</p>
<p id="searchthru">
Lots of text
</p>
<form>
<input name="search" >
<button type="submit" name="Submit" onclick="return false;">Submit</button>
</form>
Which is, as you can see, just HTML.
I know this question is rather broad right now, so I'll try to specify what i'm attempting to do with it.
I have a landing page on the website, and then another page with quite a bit of text on it. The text page is well kept with aptly named headers and id's and so forth. I want a search bar on the text page (or even the landing page, but unless php is the only solution I would like to stay away from it).
Then, when someone puts something in the search bar, it can either search through the text in the headers and present the match, or search through all the text and then present the header text as the "options" for which to jump to in the search.
edit: This is to say to do whichever is more feasible/better user experience. I don't want the search bar to do both simultaneously, that makes little sense in my application.
For example, they type in "Water Parks" and they will be presented with options such as "Water Parks" "Parks" "Amusement Parks" "Theme Parks" etc. Then when they click their option, they will be brought to the correct section. If they type in "water" then the search bar will only bring up "Water Parks" assuming that the word 'water' is used multiple times but only in the Water Parks section.
I would very much appreciate it if someone would explain (as if to a 5 year old who is really good at understanding syntax but doesn't know what the functions do) the javascript code as they write it.
Eventually I would like to split up the text into many pages and I think that I would have to use php for that (from what I've read so far) but I would REALLY prefer a pure js solution. If this is impossible or otherwise just a bad idea, feel free to teach me php. Thank you so much.
Related
I have a simple file based with html that looks like this:
<html>
<body>
<b>Faculty</b><br><br>
Dr Mcgee
<br>
Dr Else
<br><br>
<b>Values</b><br><br>
1
<br>
2
<br>
</body>
</html>
I'm new to the web end of things, and was wondering how I could go about doing this: When the user hovers over a piece of text that's under the Faculty column of my school (I'm not gonna link my schools page because if I do someone from my school will likely create this extension). I want it to show a ratemyproff rating.
I have no idea on how to do this, because well I don't really know what to search on google to do such a thing?
I know there are CSS overlays over images like such:
https://www.w3schools.com/howto/howto_css_image_overlay.asp
But in my case, I'm not guaranteed what professors will be listed (I just want to understand the basic process of doing such things).
I don't think I can use PHP as that would require users who I want to share this eventually with to also have a php/server side thing installed. I guess I just don't know how to go about doing such a thing, and don't know what to search on the internet for it?
If the sites you are requesting data from aren't under your control you are very likely not going to be able to do this without a backend because of CORS, which basically prohibits site A from loading in data from site B. Site B would have to give you special permission. You can read about that here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
However, if you are able to access the pages, or you decide to use a backend for this, the term you are looking for is ajax.
A rough outline of what your script might look like is:
Give these school elements a classname.
Also add data attribute to these elements to store data needed to get the information you are looking for (e.g. a url or a school name or id).
In the JS, set up a trigger so that when something with that classname is hovered over, an ajax request is made to a url to get the data you are looking for.
If the ajax request is successful, show the data you want to show in a container set up on the page.
As far as setting up the container to show, it would probably be simplest to add an empty container for each listing which will then be populated with data.
If you are new to all of this, I would suggest using jQuery. You can find the ajax documentation here: http://api.jquery.com/jquery.ajax/
First Step:
Use something to get the text and store in a javascript variable when hovered over the text that is searchable,
To do this put the text in a single node like <span class="searchable">This text is searchable</span>.
You can do something like this to get node value http://jsfiddle.net/5gyRx/
Second step:
Add an empty node <div class="data"></div> aboslutely positioned inside the container div which will be used to show fetched details about that text.
Third step:
Use JavaScript/jQuery to fire an Ajax call with the text you got from the first step and populate the empty node created earlier with this data.
I'm working on creating a way for editors at my school's newspaper to be able to go to a page that would have places to type in info (ie. img url, titles, captions) and it would output HTML code that is already stylized.
So they type into the form in the title area: "Title"
And in the paragraph area: "This is a test"
and it would output something like this:
<div class="div1">
<span>Title</span>
<p>This is a test</p>
</div>
(div1 since since it's the first one you put and could add more later)
I've been looking into finding something like this, which I know it's possible, I just don't know where to start with this or what I would even google search. Any help would be greatly appreciated.
Thank you.
EDIT: We can't set up a Wordpress due to contracts with outside companies.
It depends on whether you want to implement a solution yourself or use what is already out there.
This type of functionality is already built into platforms like Wordpress and SquareSpace out of the box via a WYSIWYG (what you see is what you get) editor - similar to Stackoverflow's question box.
If you are looking to implement a custom solution then I would recommend looking into into markdown languages.
For example, here is one markdown javascript library called Remarkable:
https://github.com/jonschlinkert/remarkable.
This code snippet is taken directly from their github README
var Remarkable = require('remarkable');
var md = new Remarkable();
console.log(md.render('# Remarkable rulezz!'));
// => <h1>Remarkable rulezz!</h1>
As you can see the markdown text is passed to a render function and it translates into html.
Alex
I have a problem that I just cannot figure out on my own. This is the issue.
I'm making a website that is using javascript to make the website write out things as you type on your keyboard using JS. As you're 'writing' this text I would like your location to be shown, making the illusion that you're the actual person writing. I solved this problem by calling the IP adress and translating it to a city and country using google maps or something like that. The issue now is to get this to 'write it out' as actual text. Take a look at this fiddle -
http://codepen.io/anon/pen/RagdVB
Hello, I am viewing this page from <span id="usergeoip">unknown location</span>.
In this example you can see how its supposed to be, but the problem is that I cannot use <span id> inside the text because it inflicts with the other js making the code be 'typed out'. Is there a solution for calling out this location without using <span> or <p> or such, or is that impossible?
I'm introducing some at-risk kids to HTML in an upcoming class and we have a very small amount of time to show them how cool making your own web page can be.
What I'd like to do is build a page template full of text boxes which the kids can fill with text and some simple formatting tags. As they update, a split screen would update with the results of their edits.
I'm looking for a free / open source jquery or other javascript library which would help achieve the goal above.
Actually, it would quite similar to what stackoverflow does in the preview box as you are typing a question.
Rather than just blindly lifting code from other websites, I would love something with actual documentation (or at least a quick example.)
Google searches show a lot of tools and things you can download or use on other sites. The ideal here would be a library I embed in a page and position as I see fit.
Thanks for your help
Edit
As pointed out by some folks - this is a simple matter of updating divs on certain events.
<script type="text/javascript">
$(window).keyup(function(){
$('#about_me_result').html($('#about_me').val());
});
</script>
<textarea id="about_me" name="aboutMe" rows="9" cols="60">Write a little something about you...</textarea>
I went with keyup since keydown always leaves the last character off the other element.
No real need for a library. Just update the document
$(window).keydown(function(){
$('#element').html($('#sometextarea').val());
});
As btown suggests in his reply below, you could just send them to jsfiddle.net.
Or, if you want to put something like that on your own page somewhere, you could cook your own! play around here: http://jsfiddle.net/lbstr/LD9kA/
<textarea id="code"></textarea>
<div id="result"></div>
$('#code').keyup(function(e){
$('#result').html($(this).val());
});
Or, maybe you want an "Update" button instead of updating on keyup.
<textarea id="code"></textarea>
<button type="button" id="update">Update</button>
<div id="result"></div>
$('#update').click(function(){
$('#result').html($(this).val());
});
What about w3c Schools Tryit Editor it's much simpler than jsfiddle.
The only thing is you have to press a button to see the HTML update. That's probably not a bad thing though as if it changed on every key up the resulting web page might go crazy as you typed in half finished tags and attributes.
On my site, I collect information on items in a game I play. I would like to implement some sort of custom search for the items that is both easier to use, and displays the result in a more aesthetic manner.
Currently, I use a wikidot site which allows tags to be assigned to pages and they can be searched, but searching multiple tags doesn't work as I would like. It will start the list with pages with all the tags, then pages that have one of the tags, and finally pages that just happen to have the tags in the body. Also, the results are presented as the page title, the first few lines of text from each page (without any line breaks making it hard to read), and finish with a link to the page. [See example: http://imgur.com/a/gyTtD#0 ] What I would like for the results are something like the following: http://imgur.com/a/gyTtD#1, which is an actual page from my site, but it's not dynamic, I must edit that page if I want to keep it up to date; and for any permutations of tags I want to create a page like that for, I need to first find all of the relevant items, organize them how I want, then make the page containing the includes for each of their individual pages (each item has its own page, I just put an [[include item-name]] wherever I want that item to show up on other pages, which just puts the body of the page in.
What I'm looking for is the best plan of action to make this happen. I'm familiar with HTML/CSS/JS, but not much other webdev related stuff. Is there a way I could have a page with a comma separated list that I could parse with JavaScript to search pages? Or if should I look elsewhere, what are some good tutorials or quality sources to read up on how to do this?
Thank you in advanced for any answers you can provide.
If you still require help with this, I'd suggest asking on the Wikidot community wiki instead, as there are more people able to help you with your question there (as you have a Wikidot site).
URL: http://community.wikidot.com/forum