JQuery :: Way To Capture/highlight Multiple Html Elements?
Oct 18, 2009
I'm writing a bookmarklet which allows you to select various elementsfrom a page and save them to your own personal blog (a bit likeffffound or the Wordpress PressIt feature)The user will select 3 parts from the page they want to save:1) Title (easy, just detect a click on an html element and make sureit's a span/p/h1/h2/h3 etc)2) Image (i've figured this out too)3) Body textI'm stuck with grabbing the body text - I think it should be selectedmanually, as it could consist of multiple p's and div's, or even tablerows, depending on how badly the source page has been coded.When the use has selected the text, it should be highlighted somehowen/browse_thread/thread/6dbbfd9cafd98cf6,I know that getSelection won't work, but I'm not sure what to doexactly.
I want to find a way to highlight elements when I click on them. The problem is the elements are nested and when I click on a child element, the parent element is highlighted as well. I would like the child to highlight only, but because the child is within the boundaries of the parent (i.e. you can't hover over the child without also hovering over the parent), the parent highlights as well.
I'd like to be able to hover over, click and highlight an <li> and hover over, click and highlight the <div> independently of one another. It's no problem to hover over, click and highlight the <div> without highlighting the <li>, but because the <div> encapsulates the <li> it's impossible to hover over, click and highlight the <li> without highlighting the <div>.
I am new to jQuery. My background is C++ and C#. Once I have the html using selectors and filters is not hard to understand. My problem is understanding how to capture a live html page in jQuery and assign the page to an object which I can then use to extract information using basic selector and filter functions.
I am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?
The code, $(document).ready(function() { // choose text for the show/hide link - can contain HTML (e.g. an image) var showText='<div class="expanddown"></div>'; var hideText='<div class="expandup"></div>'; // initialise the visibility check var is_visible = false; // append show/hide links to the element directly preceding the element with a class of "toggle" $('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>'); // capture clicks on the toggle links $('a.togglelink').click(function() { // switch visibility is_visible = !is_visible; // change the link depending on whether the element is shown or hidden $(this).html( (!is_visible) ? hideText : showText); // toggle the display - uncomment the next line for a basic "accordion" style //$('.toggle').hide();$('a.toggleLink').html(showText); $(this).parent().next('.toggle').slideToggle('fast'); // return false so any link destination is not followed return false; }); }); HTML, <a class="togglelink" href="#"></a> <div class="toggle"> Content </div>
How can I use Javascript to access an external website (a href...) and capture the contents of a particular HTML tag. I thought ".innnerHTML" might do it but I've tried several configurations and can't seem to figure out how. I'm not even sure that it's possible.
Highlighting a single Link on MouseOver with CSS or JS is simple. But now I have several Links spread over a table. If I have MouseOver on one of those links I also want to have a few of the other links also highlighted because they are related. How would I go about and do that?
I would like to write a script that will highlight any html element in a page (or maybe just divs) onclick, and print out the name of that element on the top of the screen somehow. I cannot make any major adjustments to this html, just insert a script because this will need to work for user submitted html pages
I have a PHP/MySQL-based content management system that alows one to edit pages of a website through form textareas. I was wondering if it is possible to change the appearance of HTML tags inside the textarea so the HTML markup looks different (e.g., in grey), making it easier to quickly find and edit the 'real' content without messing up the tag (like accidentally deleting a '>' character).
I need to capture input from a form in the run time and send those values as URL parameters using HTML POST.
I am using:
Here searchText and searchFilter are the input values. When I run the app, I don't see the values but I see "frm.searchText.value" and "frm.searchFilter.value" getting passed as parameters.
I am developing a web-application using ASP.NET 3.5,javascript,ajax I have a form with two textboxes with ID's firstname and lastname. Both of them have the attribute runat="server". When the user types, I use AJAX to request the possible names. For example if the user types an 'a' in the textbox with ID firstname the textbox will trigger a javascript function that uses AJAX to get the first person in the database wich firstname starts with an 'a'. The callback function recieves this firstname and fills it in in the textbox. When i do this the content of the textbox will be the requested name and the cursor is at the end of the textbox. This prevents the user of continuing typing the rest of the name. Is it possible to select a part of the text in a textbox?
I am developing application in java. here wat i have to do is to highlight words in html file. ie) i have one html file and same content in audio file. when i open the html file audio should play n it should highlight the word in html file on which audio plays. for eg) i have html file with content " hello world". i have same audio file saying "hello world". now when i open html file and click audio, and if audio says hello, hello should highlight in html file, then audio says world, world should highlight in html file. how to do this.
I have HTML tags stored in XML. I want to be able to use these HTML elements with Javascript, just as you can with elements in document.body. How can it be done? (And don't try and tell me I should use server-side because I have written it all for Javascript and the project is nearly complete minus this and there are practical reasons for not doing this server-side. After all, anything is possible with Javascript!)
Let me explain:
- I have HTML templates such as this [URL]
- I want javascript to populate these templates then add them to my page
- The only way I know javascript can get this kind of data is by parsing XML
- I want to parse the XML then be able to use the HTML elements just like those in document.body
- As far as I'm aware, XML is the only good way of storing data for javascript. I don't want to store it in javascript variables (too much multiline data with " and '). Nor do I want to build it using document.createElement("div")... etc
As someone not yet with any experience in computer science etc, please ignore my poor terminology! However, I'm not a beginner when it comes to javascript.
Here's the script concerned but I doubt it'll help you understand my problem: [URL]
I've selected multiple tables and tried to use each for applying cornering to each table. Inside the callback function, I try to find the first/last table cells to apply cornering for each corner. However, when there are multiple tables it looks at _all_ the tr elements for the first/last rows. See example code:
// Add cornering to tables $('table.corner-me').addClass('ui-corner-all').each(function(){ var $table = $(this); $table.find('tr:first :first-child').addClass('ui-corner-tl');
Can someone explain to me the best way to loop through the geocode and marker (google maps) part of this code for all of the elements with the "address" class using jQuery (or javascript if need be). I tried wrapping the contents of the codeAddress function in $(".address").each(function () {... and replacing the getElementById with a jquery selector, but I still seem to be lost.
But when there are multiple classes, it only deletes the first element in its query. As a successful test, I appended some CSS to ensure the query selected all classes and added a border to each element. So why does remove() not work? Is it a bug or is my query missing something?
I just started using jquery a few days ago and am already addicted.Now I am trying to figure out one thing which I can't seem to get answered by Google:I am building a dynamic website where at one place there will be an unclear number of div-elements. So there can be none, just one or several.The plan is to show them by a click on a button via slideDown(). So I wrapped them with another div.wrapper via wrapAll(). This works nicely for any number.Now the thing is: if my .wrapper has no specified height, the slideDown jumps - which doesn't look very nice.So I gave it a height:$('.wrapper').css({'height': $('div').outerHeight()});Presto, the animation works smoothly. But this works only if there's just one div.
I am putting together a validation function and am having trouble with targeting multiple elements.[code]an onclick event fires my validation function. If any of the fields are empty, the appropriate error message should display.This sort of works. If all of the fields are empty, only the error message of the first element is displayed, not all 3.
Im working on a ajax app and not sure what is the best way to bind events to elements (performance wise).I have a number of elements with 'click', 'focus', 'keydown' events which can be assigned though the delegate to the parent, like so:$('#parent').delegate('#child', 'click', func.....)but is it better to add a delegate to the 'document' for multiple events and use IF statement to filter for elements which should fire an event, like so:[code]Each element can be replaced with an updated version retrieved from the server.
I am learning jQuery now and have a big interest in this javascript framework. I am trying to bind an event to more than one element. I won't meet any problem if using selector. But now, I've created a function which I will pass the element. And I need within this function, to bind the code. This is my current code :
function updateDay(dayObj, monthObj, yearObj){ //I want to bind both monthObj and yearObj. yearObj.change(function(){ //do something }); monthObj.change(function(){yearObj.change()}); } $(document).ready(function(){ updateDay( $("#day"), $("#month"), $("#year")); });
As you can see, I must bind twice, once for yearObj, the other for monthObj. Is there anyway to bind the change() event only once? If there are some logic mistake in using function or such as feel free to point out, since I still haven't read all the documentation yet.
