We have a simple html layout with a nav div and content div. In some instances, the nav panel can have a lot of content.
When you use the default browser page search, Ctrl-F, the search begins in the nav div and may require several "next" clicks before the content panel is accessed (depending on the search term).
Is there any method of forcing the browser page search to start in a specific div?
There is a way to create a selection with javascript...
Now, if you select some text and then search something with the find browser tool...
The search result must start from that point.
(even if the results show all matches in the page, the first result starts where the user has the text selection)
So, if we join this two.. we can have an approach of what you need...
something like:
$(window).on('keydown', function (event) {
if ((event.ctrlKey || event.metaKey) && (String.fromCharCode(event.which).toLowerCase() == 'f')) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById('search_from_here'));
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById('search_from_here'));
window.getSelection().addRange(range);
}
}
});
Check this jsFiddle for an example http://jsfiddle.net/gmolop/tdo7p1o5/
Important!: The focus must be on the "result iframe" for this example to work (in jsfiddle)
It is not possible to select a specific part of the page for the browser to search through when using CTRL+F.
The browsers search through the entire document it has loaded.
You could of course use JavaScript to to detect to press of both the CTRL key and the F key, and on that remove all data from the document, and only leave what you want them to search through. But that would neither be a good or a pretty solution considering that you would remove the most of your entire website, and the user would think something is broken.
Create a custom search field on your website instead.
Related
I have a large HTML page consisting of a long list of tables. Each table is about as large as the screen, but varies slightly in size. I'd like to enable the user to use the PgUp and PgDn keys on the keyboard to quickly browse through the tables. Each press of one of these keys shall move one table up or down and place the table's top exactly at the top of the screen.
Is this possible at all?
I considered there might be an HTML element I haven't heard of yet which represents a page break, so that a browser will jump exactly there if one of the Pg** keys is pressed, but I found none.
Is this possible using some Javascript functionality? I considered installing an event listener for key presses and working everything out myself, but that would be rather cumbersome because my page contains a lot of elements which are display:none (i. e. invisible) and they should of course be skipped.
What would be the right approach to achieve this?
You should give your tables an ID, like #table1 #table2 #table3. You can now navigate to these tables by pasting their ID behind your URL. Lets implement this with javascript:
var currTable = 1;
document.addEventListener('keydown', function(event) {
if(event.keyCode == 33) {
// PageUp was pressed
if (currTable - 1 > 0) {
currTable--;
window.location.hash = "#table" + currTable;
}
}
else if(event.keyCode == 34) {
// PageDown was pressed
currTable++;
window.location.hash = "#table" + currTable;
}
});
This is the basic example. If you want to, you could implement a check if the table with that specific ID exists
I considered installing an event listener for key presses and working everything out myself, but that would be rather cumbersome because my page contains a lot of elements which are display:none (i. e. invisible) and they should of course be skipped.
Check if the element you're trying to access has a display of none. If it has, check the next element, and continue like this.
Im builing an office app that will run inside Microsoft Word. I'm using office.js create it.
So far I have been able to insert text into the document using the API, but the text it inserts, appears selected, making the app UX suffer since the user has to make one extra click to lose focus to insert another text without replacing the inserted one.
Here is how the code looks like:
function insertEquation()
{
Office.context.document.setSelectedDataAsync("`x = (-b +-sqrt(b^2-4ac))/(2a)`", { coercionType: 'text' });
}
I just want the text not to appear selected.
Thanks in advance.
To insert some text in the document I would insert a Paragraph like so:
function insertText(text) {
Word.run(function (context) {
context.document.body.insertParagraph(text, Word.InsertLocation.start);
});
}
I have been trying to select text in a textarea programatically based on start and end indexes, but for some reason the selection is offset by a few character locations:
My users make an initial manual selection that I store to a database.
To get the start/end positions of the initial selection I am using the approach outlined here Caret position in textarea, in characters from the start
(Answered by Tim Down)
I store the selections made by the users, and when they come back to the page I want to default in their previous selections.
My code for making the selection based on the stored positions I extracted using Tim Down's function is the following:
function SelectText(start,end) {
var textArea = document.getElementById("textArea");
var inputRange = textArea.createTextRange();
inputRange.collapse(true);
inputRange.moveStart("character", start);
inputRange.moveEnd("character", end - start);
inputRange.select();
}
It seems like the issue is caused by linebreaks/spaces. Does anyone know how to correctly make selections in IE programatically based on start and end?
I don't know exactly if it will help you but you can try to use RangyInputs js library which was developed by Tim Down and available using the following url: http://code.google.com/p/rangyinputs/
As for me I used Rangy (which is developed by Tim Down too) library for content editable div on one of my projects and it really works well and helped me a lot.
The documentation about supported methods you can find on WiKi page: http://code.google.com/p/rangyinputs/wiki/Documentation
I am making a drag and drop system with HTML5. Dragging images from the left side of the screen to the right side(these are identified as window1 and window2. the images are stored in a array and appended to a hidden input element so I can send them to the next page through a submit. the problem is I only want the script to detect what's being dropped in window2 and I don't want multiple entries.
function drop(ev)
{
//append the hidden child
number.toString();
var hidden = document.createElement("input");
hidden.type = "hidden";
hidden.name = "option"+number;
hidden.value = my_images;
var f = document.getElementById("select");
f.appendChild(hidden);
number++;
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
I was considering a simple if statement but what should I look for? how do I check where I am currently dropping the image?
EDIT: would it be an idea to use an onmouseover event to somehow check what element I'm currently hover over? if so how would I accomplish this? current I've written this small snippet of code
var current = document.mouseover;
current = document.getElementById(this);
The HTML5 spec does not account for dragging multiple items. As a result (and you appear to have noticed this above) the various HTML5 events will not indicate that multiple items have been dragged.
You don't explicitly say this within your question, but my guess is that you think (or thought, this is an older question) that multiple items are being dragged due to the "ghost" image generated automatically by the browser. These images certainly can give the impression that multiple elements are being dragged.
There are a number of known problems with these "ghost" images, and the way the browser generates them. Specifically that the ghost image is generated at the time dragging starts, which means that none of your code to define an appropriate drag has even run yet. I.e. the browser doesn't know if you are dragging one big giant element, a little element, or maybe you accidentally selected a lot of text right before the drag... it generates the image of whatever it sees, and that's what you get.
In some browsers (not IE) you can replace the drag image with something more appropriate. This usually works out if you don't care about IE, but if you do care about IE then you have just found out why people are annoyed by the HTML5 API.
My goal is to create a caret browsing extension in google chrome. I have hit a wall with text selection. I've found that I can select the contents of a div:
range = document.createRange();
referenceNode = document.getElementsByTagName("div").item(0);
range.selectNode(referenceNode);
I can also select child elements using range.setStart(referenceNode,offest) and range.setEnd(referenceNode,offset) where offset is the number of child nodes to skip/include in the selection.
Unfortunately, I have no idea how to select individual characters within a div. This behavior is, ofcourse, available for textareas and input textfields. I'm hoping for a legit javascript solution that I missed, but a hack-around suggestion using DOM manipulation of one form or another is also acceptable.
It is important that the solution allow for caret-browsing like behavior. For example, given the starting position as an offset from some location, and the ending position as an offset from the same location, display the selection in position on the screen and allow for copying the selection.
Thank you for your time.
Best Regards,
Lotus
I don't know if this is hack or not but it is working.
(I just made that) Try demo: http://derek1906.site50.net/experiment/selection/
You can put a <span></span> around the individual characters that you want to select and then you just select the <span> and Wa-la, you selected the words you want!