JQuery :: Click On And Highlight Nested Elements Independently?
Jul 22, 2011
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.
For example, if you have...
<div>
<h1></h1>
<ul>
<li></li>
<li></li>
</ul>
</div>
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>.
View 1 Replies
ADVERTISEMENT
Mar 1, 2011
I am making a system whereby if an element has a class "editable", you can click it and a popup box appears with some options about that particular element. Fairly straightforward, I'm using [code]...
This works fine but I need to be able to have lots of different divs, all with class "editable", some of which are inside others with class "editable". Like this [code]...
However, clicking on the 'somethingelse' div, triggers the click correctly but also triggers it for the parent 'something' div, so I end up with the popup box appearing twice.
Does anyone know how to just catch a click event on the exact div (without using ids) without triggering the parent?
View 1 Replies
View Related
Mar 2, 2011
I have a checkbox inside a div. I need to handle both click eventindependently. When I click on the checkbox, thediv click event is triggered too. Does anyone knows how to manage this?
Here is my code. When clicking on the checkbox, I get 2 alert boxes instead of 1.
jQuery
$(document).ready(function(){
$('div').bind('click' , function(event){
alert('a');
});
$('input').bind('click' , function(event){
[Code]...
View 5 Replies
View Related
Aug 17, 2011
i'm trying to do the following: select the links one after another and add a class to them. When the next one is selected i want to remove the class from the previous.
[Code]...
View 4 Replies
View Related
Sep 18, 2010
My question today is involving the accordion. I would really like to get rid of the highlight when I click on the tab, but nothing I have done works so far. I'm not sure of what I should do... this is what I have so far.
View 2 Replies
View Related
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.
View 1 Replies
View Related
Nov 24, 2010
My HTML:
<div class="home-button">
<span><a href="#" style="">Button</a></span>
</div>
I have an instance of a div (button), inside this div is a link wrapped in a span. When you hover over the div (".home-button")I want to move the background position inside its "span a", I've achieved this using the code below.
[Code]...
View 1 Replies
View Related
Dec 22, 2010
I am currently building a rubric system, basically a <td> will have a set of rating option, with a radio button. so when a user clicks on td tag in a table, i want to only highlight the td and select a radio button its similar to irubric assessment rating system
View 1 Replies
View Related
Jan 26, 2010
I have created two onClick events that i need to combine into one with jQuery. I am not sure how to do this.I have an unordered list:
<ul id="coverTabs">
<li class="currentTab"><a href="#">Individual</a></li>
<li><a href="#">Couple</a></li>
[code].....
View 1 Replies
View Related
Sep 5, 2009
I'm trying to figure this out with jQuery: I have a few paragraphs of text kind of like this:
<p class="original" id="paragraph_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut metus augue, vitae malesuada massa. Vestibulum nec lectus urna, vehicula porta leo. Fusce dui nunc, scelerisque at molestie ut, ultricies eu purus. Duis tristique placerat rhoncus. Aliquam rhoncus lacus justo. Morbi ultricies egestas orci eget fermentum. Proin sapien sem, suscipit vel semper in, tincidunt id enim. </p>
<p class="text" id="paragraph_2">Maecenas nisl ipsum, faucibus sed pulvinar a, tristique sed magna. Sed dui erat, tempor ut rhoncus sagittis, lacinia quis lorem. Quisque feugiat, ipsum nec varius elementum, est nunc lacinia mi, mollis convallis lorem ipsum at erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
And I have a couple of classes, like so:
.highlight {
background-color: #ccc;
} .strikethrough {
text-decoration: line-through;
}
What I want to do is apply the .highlight class to a sentence (not the entire paragraph) on hover, and apply the .strikethrough class to a sentence on click. It's easy to find a sentence using regex, but I don't know how to add/remove a span to just that particular sentence that is being hovered over. I know I could programatically wrap each sentence in <span>...</span> tags on the backend, but I was hoping there was a better solution.
View 1 Replies
View Related
Jul 23, 2005
I'm not good at JS, but want to get more about it.
I want to use a JSP (the java code just used to get date, the rest are
html and javascript),
to display a table. the requirement is the all rows in even number in
light-blue, rows in odd number in light gray, when a mouse clicks on a
row, this row gets highlighted and in yellow, and it keeps highlighted
until next row is clicked on; plus when a row gets click, the data on
the row is saved to forward to (same as putting vales in input form
then forward to action form).
part of my code is....
View 1 Replies
View Related
Oct 9, 2009
I am working on a puzzle that produces a container div.Within that div are produced a grid of 9.16. or 25 tiles.The tiles are positioned absolutely so I can be sure of their relative placement. The container div width and height is calculated according to a preset tile width and height (square actually). So the width of the container should adjust to either 3,4 or 5 tile widths and heights.The trouble is that the offset position of the top left tile is different relative to the container for each different set of tiles (even though it is supposed to be the same position relative to the container for each). I do this so I can apply dragging to the container div.The tiles will follow the container when it is moved and the game will not loose its place when tiles swap locations.(one tile is elected as blank, and tiles, one to left, right, top
or bottm, with game content, will swap location with blank when clicked)
View 5 Replies
View Related
Jun 4, 2009
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
View 7 Replies
View Related
May 24, 2007
I have an HTML table with many rows and columns with each row containing info about one specific item and a delete link (there is a delete link for each row). What I want to do is to highlight the whole row (<tr> element) in the table (with a different background color) when I click on the delete link of that row (the new page opens in a new window.)
My question is:
How do I highlight (by changing the bg color for the whole <tr> element or -if that's not possible- all of that row's <td> elements) the row if I have clicked the delete link in that row. I want the row to stay highlighted so that I would know what rows were deleted.
I guess this'll require id-specific actions applied to the row <tr> or all of its cells with an onclick event in that rows delete link.
View 3 Replies
View Related
Oct 20, 2011
Am trying to highlight the linkbuttons on click to class name hover ,for these am defining the linkbuttons in Masterpages and calling the function from content page .But am facing below issue
Error:Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object
View 3 Replies
View Related
Oct 23, 2009
I have nested markup like this
Code HTML4Strict:
<li><span></span></li>
I have different click functions, one attached to the li and the other to the span.
When I click on the span they both run. Ending the span's event handler with return false; prevented that from happening, which is what I want. But I'm not sure I understand why it worked.. I know, for example, if I was clicking on an anchor, return false would stop the browsers default action of following the href value. Same for submitting a form, return false will stop this. I don't think I understand why this would stop a completely different function from being triggered..
View 7 Replies
View Related
Aug 27, 2010
I have say 12 pics on a page, in 3 rows of 4. The rows of pics are there so that a choice can be made from each row and I'm using a function <script>
var highlight_color = '#FF0033'; function toggle_highlight(id) { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { var image = images[i]; image.style.borderColor = image.id == id ? highlight_color : 'white'; } } </script>
to toggle a border colour change so that you can see what was chosen from each row. The function I have used is fine in that it works, but I can only choose one picture and have the border changed, then if I click on another row the first border that changed obviously changes back and the new selection is highlighted. I don't really know where to go from here.
View 2 Replies
View Related
Sep 20, 2010
So I'm working on gallery page. The content is separated by years. I want the years of work to be able to collapse and expand when the year is clicked. I'm not sure how to get each year to act independently of each other and also to have the current year to not be hidden. Also, the way I have it now, it expands out of the screen before correcting itself.
View 1 Replies
View Related
Jul 12, 2009
I am doing donation script. Here is my script so far
<script type="text/javascript">
<!--//
function chkDonation(){
var form = document.forms[0]; // FORM NAME OR PLACE IN FORMS COLLECTION //;
var amount = form['OtherAmount']; // TARGETTED INPUT NAME ( OtherAmount ) //;
amount.style.visibility = 'hidden';
for(var i=0, input=form.getElementsByTagName('input'); i<input.length; i++){
if(input[i].type.match(/radio/i) && input[i].name.match(/DonationAmount/i)){
if(input[i].value.match(/Other/i)){
input[i].onclick = function(){
amount.style.visibility = 'visible'; .....
I have pretty much completed my script but now what I want it to do is to add more forms/field when the "Other" radio button is selected. So when the Other button is checked, I want the script to display more fields/forms below. Only when the "other" button is selected. When "other" selected the script should display fields like "cheque", "cash", "Payment" etc.
View 1 Replies
View Related
Mar 28, 2010
Is there a way I can simplify my code below? I want to be able to have just one iteration of the code and have it automatically switch out the IDs without have to add a new bit of JavaScript with each new div that is added. Here's my Javascript:
$(document).ready(function() {
// toggles the personnel window on clicking the image/header
$('div.title'+'#one').click(function() {
[code]....
View 2 Replies
View Related
Dec 5, 2009
I am new to jquery and need some help with this I have the following simplified html
[Code]...
View 2 Replies
View Related
Jun 5, 2011
Got this below code for a page im working on, what you'll notice is that when you hover over 'order' a sub menu appears,
How do I make the 'order' remain highlight while Im hovering over the sub menus.
View 2 Replies
View Related
Sep 17, 2010
What is the correct syntax for an nested array where each array element has 3 elements, a number and two text strings?
Code:
array = ['1, Old Man, Old Man','2 Black Sheep, Black Sheep',....]
should the text strings be in double quotes("")?
Code:
array = ['1, "Old Man", "Old Man"','2 "Black Sheep", "Black Sheep"',....]
View 3 Replies
View Related
Jun 24, 2011
$("#next-artist").click(function() {
$.get("img/home1.png",function(html){
$("img#artist-photo").replaceWith(html);
}
});
So this code isn't working.
View 3 Replies
View Related
Jun 13, 2011
Below is a simple page where a click loads a div. The contents loaded are a few paragraphs. What I'm looking to do is, after the user loads the div 'remotecontent' by clicking "click here to load", that he will be able to click on one of the paras in that div and have the contents of that para displayed in the div 'respondtoremoteclick'.
<html><head> <script src="jquery.js"></script>
<script language=Javascript>
function loadremotecontent() {
[code]....
View 4 Replies
View Related
Sep 10, 2002
I use addEventListener and I cannot (or at least don't know how) pass arguments to the function.
Let's say we have a function:
function warning(arg1, arg2) {alert('Argument 1: ' + arg1 + ', Argument2: ' + arg2 + '.');}
It's possible to have:
onclick="warning('my argument 1', 'my argument 1');" as an html attribut.
But I think it's not posible to do it like this (still the same function):
el.addEventListener("click", warning('my argument 1', 'my argument 1'), false);
So how can I pass arguments to the function?
View 1 Replies
View Related
