Is there a way to search for things on a page using an element in html? [duplicate] - html

I have created a website and have added a button and lot of text. What I want is to use the browser search (Ctrl+F), when I press the button which I added in website.
How can I achieve this?

It kind of works for FF. See this page
Find in This Page...

update: from mark's comment:
From my testing
window.find()
is supported in Chrome 37, and FF31, but
not IE11
update:
for more information on this window.find go here

No. In general, you cannot invoke browser controls from inside the webpage - security, sandboxing, and all that.
You need to make some sort of in-page search - if you're using a CMS, most of them have a simple search feature built-in.
If you want to do this in JavaScript, there are various scripts that emulate this in-page; randomly selected from my query "javascript find in page" is this one: http://www.seabreezecomputers.com/tips/find.htm

Related

Working Search Field on a Plain HTML Page

Is it possible to have a search field without a database?
I have a basic HTML and CSS website where on only one page I need a search box to search only that page (large page with lots of data), if possible to search the whole site would be great but only need one page now and don't want to use a database.
Have you seen this done or know if it is possible? I have seen search fields where you link to Google's database and you embed results on your site but that won't work.
Since you have only CSS and HTML code (and no PHP + MySQL) the only solution for you is to use JavaScript which runs on client side. You can use the window.find() function but it doesn't work on all browsers. See: Use Browser Search (Ctrl+F) through a button in website?
What you need is to tell the user to hit CTRL + F in order to use the browser's search module.
FOUND IT...
It works on Firefox, Chrome, Safari, and even Opera. Don't care about IE.
http://www.javascripter.net/faq/searchin.htm
If you use, read the bottom. You will want to use an iframe for the HTML otherwise your search box searches the keyword in the actual box... which is kind of funny. Anyways thanks for the votes guys and sorry you couldn't be as cool as #valicu2000 who pointed me in the right direction to find this solution.

adding spelling suggestion on HTML page

I am new to web development and just trying to add spelling suggestion to a textarea. I really don't know what I am going to need for this, need to write the code myself or use a third party library etc. Can someone suggest me how to add this functionality to a simple HTML page containing a textarea. I want when I write a misspelled word in text area, some suggestions matching that word should appear in dropdown.
Well autocorrect in the web page can be achieved by JavaScript for sure.
There are some nice frameworks for this, probably you could see this:
https://github.com/sanisoft/jQuery-auto-correct
For only spellchecking (despite built-in browser checking):
http://www.javascriptspellcheck.com/JQuery_SpellCheck_Plugin

What is sfdocready?

I see sfdocready in some footers of pages I have been working on. I cannot find anything about this?
For example:
<sfdocready id="sfDocReady"></sfdocready>
Thanks!
This has to do with Superfish (the <sfdocready> and <sfmsg> tags).
I just determined what was doing it in my case. Using Safari, I have (well, had, it's gone now for this bizarre behavior) the Awesome Screenshot extension installed. There is a checkbox in its settings called "Enable similar product search powered by Superfish" which looks for images on the page and uses them as search parameters to provide comparison shopping deals for you.
In its defense it did prompt me if I wanted to see price comparisons, but it did so on Amazon in a way that actually looked like the prompt came from Amazon.
To the answer above me about Firefox inserting it when you save the document, that's only because an extension or some JavaScript inserted it first, it has nothing specific to do with Firefox. It also has nothing to do with Wordpress.
Somewhat sleazy stuff, imo.
This looks like it's got something to do with Wordpress themes.
I have, an assumption, that this tag means: "safe document is ready", so something is running only after whole document has been loaded. But what exectly does it mean and how does it work, it`s a big question.
Near this tag I have also also often seen <sfmsg> tag.
This tag is inserted by Firefox when you save the page as an HTML document.
I issued this problem yesterday. I have firefox with a plugin named Awesome Screenshot. In order to solve this you need:
Click over the Awesome Screenshot
Select options
UNCHECK/DISABLE the option: "Enable similar product search powered by Superfish"
And that is all!

Help with creating a demo website

I have a question of how to develop a small website which is quick and easy which has html support unlike google sites. For one of my course project I have to develop a prototype of the website but just html pages. Want to implement the clicks, text fields, checkboxes etc., I have created a small site of googlesites but that doens't allow me to put the html like text fields radio buttons etc., I just wanted to know if there is any free WYSIWYG capable for doing my stuff.
Thanks in advance
EDIT:
I dont want to use the div tags and arrange the location of HTML. I just want to drag and drop the fields and the site should automatically place the fields appropriately on the webpage something as easy as google sites
I found jsfiddle.net to be really useful. Basically you can put in HTML, CSS, and Javascript, click "Run" and see the result.
It's great for testing or hacking some CSS or Javascript, as it gives you instant feedback, saving you the "edit, save, launch, wait, repeat" cycle you might find using a text or HTML editor.
UPDATE
I'm not sure if I understood your question correctly. Perhaps you are looking for a tool like Google sites but with more capabilities? If so, http://www.weebly.com/ is a good option and it is free.

add image in option

Can anyone tell me how can i add an image in Select box
HTML
<option id ="OP_{$LANG.MY_ID}" class="boardDialog" style="font-size:12px" value="OP_{$LANG.MY_ID}">
CSS
.boardDialog{
background-image: url(../images/Work_Board_Member.png);
background-repeat: no-repeat
}
This is working fine on Mozilla but does not work in IE and Google chrome.
Can anyone tell me how can i do this google chrome
You won't be able to achieve this functionality using the select tag. You have to make a custom control for this.
Here is an example
Combobox with icons:
Also found a similar SO question
Image Dropdownlist
this isnt possible in IE and probably chrome. The only real workaround is to create a faux dropdown using javascript but this isnt really advisable - unless it degrades gracefully.
+1 with seengee, except for the not only advisable. You can implement this kind of "control" in your website, it depends how you do.
You create a dropdown using javascript, but the page have to work good, using a normal dropdown, if someone come up with disabled javascript, or a mobile device.
You can see kind of this drop down on facebook, or "web 2.0 javascript ajax full of crap" websites.