I was javascript to dynamically add some content, my javascript is like:
document.getElementById("lines").innerHTML += some_of_my_data +"</br>;
How can I create a mouseover event, different on each row?
Please put a little information in the question, otherwise it's close to impossible to answer.
But some notes:
You don't seem to be closing the quotes on your text (after </br>).
Also </br> should be <br>
Here I'm just guessing but you're selecting by id and the id is called lines which suggests many, maybe you're using the id lines multiple times? That would be incorrect and might be what's not working.
See here how to get element's of the same class.
Also for mouse over events, take a looks at this answer.
Related
I have multiple buttons on the same page with same id so basically
rendering in a for loop with same id . I set a click event handler in
jquery but it fires for only the first button.
Can you suggest?
You can see the error in console, which probably would be because of same ID for all the buttons. One solution would be to append the index to the button id string so that each button will have unique id(btn1, btn2 etc), or use the class instead of id.
Duplicating ids are causing your HTML to be invalid. Javascript (and jQuery) assumes that there is a single id, therefore:
$("#yourid")
will not search for the id further.
You can sidetrack the issue via
$("[id=yourid]")
which will find all the elements, but that's not advisable, because then your HTML is still invalid. A better approach would be to change your id into a class and use that as a selector afterwards.
EDIT
In jQuery you can create a click event like this:
$("[id=saveFavorite]").click(function() {/*...*/})
But even though this will work, I recommend refactoring your code, changing the HTML you have by replacing every id="saveFavorite" to class="saveFavorite" and do it like this:
$(".saveFavorite").click(function() {/*...*/})
I am looking for a way to apply new CSS to only part of the element.
For example. The original HTML looks like
<p>123456</p>
I want to make only 456 into bold.
Of course, I can do it by adding another tag into 456 like
<p>123<b>456</b></p>
But in my application, I do want not to change the original DOM structure. By adding a new tag, I changed the DOM structure.
To do that, I am thinking of adding new custom attribute to the existing tag like
<p data-wms="e-3">123456</p>
Here data-wms means that there are special part and e-3 means that from index 3 character (it is 4 here) to the end will have a special attribute (like bold in this example)
Now I have all the information about where to change inside the element.
But still, how can I do that with javascript without adding a tag, without changing dom.
Thanks
You can use the span element to do so, it's made specifically to handle inline styling while mantaining the overall structure.
An example would be:
<p>123<span class="bold-highlight">456</span></p>
Thanks to everyone's advice, I researched more, especially about nth-letter.
Though nth-letter is exactly what I want, I found that it is still just proposal, not implemented in any browser.
Thus, there is no way to applying different css letter by letter in one text element without embracing each letter with span tag at this moment (2021-March). I hope that there will be nth-letter in the near future.
I think that I have to re-design my project...
if it's a static page and you want to change a style for specific text in a specific tag like the following case
<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>
let's say you want just style the third element, you can change it by the following code using jQuery for sure you can use JavaScript but jQuery will help you to make your code shorter
$( "p:nth-child(3)" ).css("color","#f00");
Please see the link:
http://www.stilgiyin.com/share.php?sshrsrc=http%3A%2F%2Fimages.boyner.com.tr%2FCmsFiles%2FImages%2FProductImages%2FOriginal%2F654000%2F1_1262674.jpg
If you click on the jacket, you will see an alert "here". Looking at the page source, you'll see the onclick that is responsible for this alert.
If you hover over the jacket, you will see a tooltip. I used the jquery tiptip plugin for this tooltip. The plugin requires you to put the tooltip's content within a title attribute.
I'm trying to get an onclick event to fire when the user clicks on the large pink button inside the tooltip. However, it doesn't seem to be working, because the alert I set "intooltip" isn't popping up.
The code for the onclick is:
onclick="alert('intooltip'); clickstatistictit(this.rel); _gaq.push(['_trackEvent', 'outgoing', 'boyner.com.tr', '']); trackConv('995622692', 'JMHBCOzUgAQQpP7f2gM');"
I don't know if the problem is that I have double quotes around intooltip instead of single quotes. However, if I use single quotes, this closes the tooltip content, which begins with title='
Or maybe the issue is something completely different. Any ideas?
Thanks,
Andrew
You should escape the double quotes inside your title attribute, otherwise you will get syntax errors in the onclick handler.
It might also be better to put your event handeling code inside a separate function in your header. You can then use just the function name inside the title attribute instead of the list of functions calls you are using now.
Like you said, the reason is that you use double quotes inside other double quotes. When you check that pink button in firebug, the resulting code says:
onclick="alert("
so it's not interpreted correctly.
The tiptip jQuery plugin doesn't create a new child for every element with a tooltip. Instead it uses a general container and moves it accordingly, thus the tooltip is not a descendant of your element. Thereby the click event won't bubble to your elements onclick handler.
Note that tiptip isn't meant for such kind of tooltips. After all tiptip was originally meant for text tooltips.
For example i'm using append, and for example i'm appendig button in to a div, and i have function $('button_id').click(... etc to work affter i append the div, how can i do that.I mean i get no errors, but the function is not starting, it's because i append and then i want to use the function but how to do that, i tryed with delegate, but same thing.I tryed with function in the button tag , onmouseover and then the function thing, but nothing it gives me function not found.What is the solution ?
I have two events, one event is click event that appends button, the other event is click event that does something if the button that was appended is clicked, but that second event is not working ?
Try using :
$(elem).live(...)
It will bind event for now and in the future.
Firstly, it always helps if you show us the exact source code. $('button_id') is the incorrect selector to start with, try something more along the lines of $('#button_id') as your selector. Also, are you appending dynamic content? Anyways, I've always used the delegate() function quite successfully, but have you tried using the live() function? Also, one more thing to make sure of is that you have the newest version of jQuery as your source.
As was stated as well, you can not have duplicate ids, if you want to have a pointer, use class, instead of id="some_id" use class="appended". To select those using jQuery, use the selector like this $('.appended').
Try something like this it will work as per your expectations.
$("#button_id").click(function(){
//On click code goes here
}).appendTo($("#div_id"));
It's difficult to determine the problem you're having without seeing your code, but delegate (or live) should be perfect for what you're trying to do:
$("body").delegate("#b", "click", function() {
alert("ok");
});
$("#example").append('<input type="button" id="b" value="Click" />');
The click handler above will fire when an element with id="b" is clicked, whether or not that element happens to be in the DOM right now or not.
However, as others have noted, it's important to remember that IDs need to be unique within a document, so by the sounds of it you may be better of using classes instead.
You can see an example of the above code running here.
My goal is to be able to get the highlighted text within a document, but only if that text is within a given section, and then apply a certain style to that selected text after clicking a div tag. I'll explain what I mean:
So, having looked at window.getSelection() and document.selection.createRange().text, I attempted to use elmnt.getSelection() or elmnt.selection.createRange().text for some HTML element, elmnt. However, it doesn't seem to work, so that idea seems pretty null. This means I can't use this idea to determine the text that is highlighted within a given location. In case this doesn't make sense, essentially, I want html code that looks like this:
<body>
<div id="content">Stuff here will not be effected</div>
<div id="highlightable">Stuff here can be effected when highlighted</div>
<div id="morecontent">Stuff here will also not be effected</div>
</body>
So that whenever I've highlighted text, clicking on a specified div will apply the proper CSS.
Now, on to the div tags. Basically, here's what I've got on that:
$('.colorpicker').click( function(e)
{
console.log(getSelectedText());
}
Eventually, all I want this to highlight the selected text and have the div tag change the color of the selected text to that of the respective div tag that I've selected. Neither of these seems to be working right now, and my only guess for the reason of the div tag is that it unhighlights whatever I've got selected whenever I click on the div tag.
Fallbacks:
If there is more than one time that 'abc' is found on the page and I highlight to color 'abc', I would like that only that copy of 'abc' be highlighted.
I know this is a lot in one question, but even if I could get a little head start on this idea, my next personal project would be going a lot more smoothly. Thanks. :)
The key in the solution to this will be working with the objects that represent text ranges in browsers, not the selected text itself. Look into methods available to you in both the FireFox Range and IE TextRange objects. Both of these contain means of replacing the selected text with your own markup (e.g. a span wrapping your selected text.)
For FF look into Range.getRangeAt(0).surroundContents(element)
For IE look into TextRange.pasteHTML()
I must warn you though... You'll probably end up down a scary path of browser quirks if you go through with this. Already from the get-go you're supporting two different objects for two of the major browsers.