Find a Text and scroll into it with javascript - javascript

I have a div that contains hundreds of lines.
I want to create a function that allows me to find a text and scroll into it:
function findAndScroll(text)
So, I enter the wanted text in an input text, I click on the "Go" button that will trigger the "findAndScroll" function then I get scrolled to that text.
Before coding, is there an existant jQuery plugin or a javascript library
that can do this?
Thank you,
Regards.

You can use a function like this to find the text and highlight it. You can then scroll to the highlighted element like this:
var offset = $("#id_of_highlighted_element").offset().top;
window.scrollTo(0,offset);
or you can simply go the id like this
window.location = "#id_of_highlighted_element";
However window.scrollTo is more flexible because you can set the element to wherever you want on the page.

Related

Caret behavior inside contenteditable true and next to contenteditable false elements

I'm trying to create a textarea that listens to URLs typed, pasted or dropped and converts them to links. These links are not editable and must be treated as blocks. Delete and backspace must delete them. Finally, it would be nice if they show full selection when the caret is moved through them.
Problems: after spending too much time and trying some of the suggested solutions found here on stackoverflow (Tim Down), I still couldn't get it to work correctly. I'm finding it very hard to have the caret in the correct place all the time and after pasting a link and the automatic conversion is done, the selection is locked and no input can be done. I tried to insert and keep a zero width character before and after each link but then other selection problems started to occurr.
Can someone please have a look at the following fiddle which represents a simplified version focusing the problem and point me to the right direction for the correct keyboard navigation through these non-editable links inside a contenteditable div?
jsFiddle here
$("#customtextarea").on("input propertychange drop paste", function (e) {
var $this = $(this), savedSelection = saveSelection($this.get(0));
var parsedHtml = getParsedHtml($this.html()); // This gets the innerhtml with the urls turned to links
$this.html(parsedHtml).focus();
restoreSelection($this.get(0), savedSelection);
});
EDIT: I've taken the approach suggested by XuoriG and I'm still facing more or less the same issues as before: caret gets 'stuck' after the link and the links can't be deleted. Also keyboard navigation (left, right) is not working.
New jsFiddle here
When using $this.html you're replacing the entire DOM and losing your selection.
The way I was able to do this is by creating and removing DOM nodes on the fly on every key up. I can't post code for you right now but basically you go through every node on key up and create a new anchor tag with the content matched by your url regex and remove that from text node. Repeat until you dont have any more matches in the node. You'll be able to save and restore the selection this way.
The hard part after is being able to append to an existing url. The way I did it is by detecting if a text node is right next to an anchor tag, and if the anchor text + the text node matches an url too you append the text node to the anchor tag and remove the text node.

How to hide text present inside search box?

I have set a bookmark which has -adult word to search query, so that inappropriate results won't show up. Now, how do I hide -adult present in the search box?
Example:
My idea so far:
To use CSS to hide it then make another textbox to be seen, then add a few event handlers to sync the real search box with my fake search box.
comments by #wOxxOm
that's tricky to implement I suppose since google uses ajax and
events, but probably it'll be possible to set a document mutation
observer which will hide the stuff in the search box before it's shown
If the above method is not possible, then please suggest alternative for solving this problem.
Remove -adult from the field and append it on the button click event. Example:
var keywordInput = $('input[name="-adult"]');
$('input[name="SearchButton"]').click(function() {
window.location = 'http://example.com?kwd=' + encodeURIComponent(keywordInput.val());
});
dont put the word you dont want them to see... use this code instead:
<?php
$dasearchstring = "I Want this text hidden";
$darealsearchstring = "Test".$dasearchstring;
?>
js code:
var dasearchstring = "I Want this text hidden";
var darealsearchstring = "Test"+dasearchstring;
dasearchstring is what the user searched; darealsearchstring is what is really searched.
The text "Test" is the string that you want to prefix searches with.
hope this clears it up!

Any issues with hiding a select list behind a div and selecting it with JavaScript?

I need to horizontally center text in a select list, specifically for android and iphones. It seems this cant be done with CSS so im looking for a workaround.
I was thinking about hiding the input behind a div with centered text, and using JavaScript to select the input when you click on the div. I would then need to change the text in the div to equal that of the selected option. If the div was created with JavaScript then the page would will be usable with JavaScript disabled.
I had another idea but this seems trickier to me. I could use JavaScript to get the screen width, apply a calculation, and then apply the right amount of text indentation to the input.
Im interested in best practice but this is a demo project not a live one. Im using jQuery. Thanks
UPDATE - Ive tried the following, where the div#cover covers a select input. It works fine in my iPad. However my old Android wont always focus on the input. Firefox does focus on the input but the options dont fly you, you have to scroll them with arrow keys. So it seems this solution is not as simple as id hoped.
$('div#cover').click(function(){
$('#select').focus();
});
Your idea on hiding the select behind the div looks OK
I did a more complex thing - completely hiding the select, replacing it with HTML, doing all interaction from JS and all styling in CSS and reflecting the changes to the underlying select (which can for instance be submitted as a form element in a normal way)
The jQuery plugin I wrote was very tiny anyway, as I put all styles and positions in CSS which gave me the full control over the appearance and big flexibility
Code is from here: jQuery - function runs fine when fired on div click, but not on page load
function textIndentFunc () {
textString = $('#from-1 :selected').text();
$('#hidden').text(textString);
textWidth = $('#hidden').width();
inputWidth = $('#from-1 select').width();
indentMy = (inputWidth / 2) - (textWidth / 2);
$('#from-1').css('text-indent',indentMy);
}
$('#from-1 select').change(function() {
textIndentFunc();
});
textIndentFunc();

Auto Update a piece of text depending on position

Right now i am using the awesome flexible-nav
to display the current subtopic i am at in my post.
Additionally to that I was wondering whether I could take this current // string and display it on top of the page in my actual navigation bar. So that the text would change as i scroll and as the flexible-nav changes.
Thanks in Advance
You need to append some code to flexible-nav.js, I suggest you make modification in expanded one and minify it later.
After the line 208 of flexible-nav.js (i.e. closest && closest.node.addClass('current');) add these lines of code.
var doc_title = closest.node.html();
$("title").html(doc_title);
This code changes Title as you keep on moving down the scroll. I wasn't able to figure out call back function in the script (presuming if they have any) but this should work just fine.
You can add any of jQuery selector of your wish instead of $("title") in the code.

Javascript unfocus select menu

I have a big page, with full of (server side) generated information organized into "chapters". To allow an easier overview for the user I put a little element with CSS fixed position to the top right corner of the page.
<div class="selector">Goto section within the table: <select
id="chapterselector"
onChange="goto_section('chapterselector')">%SELECTOR%</select>
</div>
The text "%SELECTOR%" is replaced by the server side component to the correct option elements.
function goto_section ( element ) {
element = document.getElementById(element);
window.location = '#Chapter_' + element.value;
}
This is the JavaScript part for now. This works nicely. However one little issue remains:
Users (including me) can use the select menu to jump inside the document, but then often cursor arrow keys would be used to navigate to scroll the page. The problem: after using the select menu, it has the focus, so cursor keys now "scrolls" the possible choices inside the select menu. What I want: after using the select menu, I want it to lose the focus automatically, so cursor keys scrolls the page.
How can I do this? Thanks for any suggestion.
element.blur()
try that after setting the location

Categories

Resources