Onmouseover HTML Attributes Bad Practice?
Jul 13, 2010Which is considered best practice?
<div onmouseover="doThis();">
myDiv.onmouseover = doThis;
myDiv.addEventListener("mouseover",doThis,false);
...or something else?
Which is considered best practice?
<div onmouseover="doThis();">
myDiv.onmouseover = doThis;
myDiv.addEventListener("mouseover",doThis,false);
...or something else?
I'm currently working with Javascript to build some "dynamic" tabs. Basicly, the tab "onmouseover" and "onmouseout" event have been overriden to change the tab's css class.
Here's the class:
function HtmlTab(id)
{
this.id = id;
this.tab = document.getElementById(id);
this.cssover = "over";
this.cssout = "out";
this.tab.onmouseover = function()
{
this.className = this.cssover; // NOT WORKING
}
this.tab.onmouseout = function()
{
this.className = "gen";
}
}
My problem is, I cannot access my HtmlTab class attributes from the this.tab.onmouseover function.
Anyone knows a way to fix this?
I'm having a problem with .attr(). I will explain it whith code.I have this HTML code:
<p id="textoMarca0" onmouseover="muestraDialog('textoMarca0');">
this is an example paragraph
</p>
[code]....
So now the onmouseover has again its value [the original one, copied by doing an alert($("#"+elem+i).attr('onmouseover')) when i disable the onmouseover event], but it doesn't work
I sometime find it useful to add my own attribute to a HTML tag so that my javascript can access those elements.
For instance, new_attribute in the following anchor tag:
<a href="#" class="someclass" new_attribute="some_value">Click Me</a>
When trying to validate this page, however, it doesn't pass. Some of the below questions likely do not make sense, but I hope you get the idea what I am looking for:Is what I am doing bad practice?Is there another way to allow javascript to specifically select just some elements and not others? Should I instead apply multiple classes to the element, and use some of the classes not to modify appearance, but to allow just them to be selected?If using custom attributes, should they somehow be defined so they pass validation?
I'm a neophyte to Javascript, but I need it to dynamically add lines to a form. I was able to cobble together this inelegant looking code below. It adds the row when called, but there are more attributes needed for this to be correct for the application. 1) need to center the input in the TD 2)the input tags need type, size, maxsize, and value attributes added I have not been able to figure out the correct way to do this.
Also, is there a way for the value attribute to work with a PHP echo, or is there a Javascript method to display associative array values?
[Code]...
BTW is there an good online tutorial and/or reference for javascript or book(s) that you could recommend?
I have this code that when links are clicked the elements are erased. The issue that I am facing is that I want to update the order of the attributes "id" and "var_id". Basically when you remove the first or the second element to update the order. I am not very savvy with DOM so I have hard time developing that functionality. I hope you guys can help me with that.
<html>
<head>
<script>
function removeElement_e(divNum)
{
var d = document.getElementById('e');
[Code]...
I know that using <a href="javascript:"> and <sometag onclick=""> is evil, but in this particular situation it is quite hard to avoid it due to external powers Anyway here is the issue itself : putting javascript strings inside HTML attributes :
Code:
<button onclick="DoSomething('string')">
Everything is fine until there are single or double quotes INSIDE the 'string' value. Having a double quote inside the string, even JS escaped leads to the onclick argument value being cut :
Code:
<button onclick="DoSomething('str"ing')">
If you replace the double quote by '"' then you don't get a double quote inside DoSomething (you could always replace " by " in JS).
Similar problem if you choose to enclose the onclick argument in single quotes and happen to have a single quote JS escaped inside the string.So, is there any other way of dealing with potential presence of single AND double quotes in the 'string' value, other than replacing them before by ' and " and then replacing them back inside DoSomething ?
suppose we have a <a href=www.google.com>google</a> tag in our HTML page.And it is inside a div with class name as chapter. Now i added the script as below,
$(document).ready(
function() {
$(
'div.chapter a').each(function(index) {
[Code].....
find the attached html that i am working on. this has 3 columns and the 3rd column is 'Show Comments' link. when I hover the link it should display the html page on top my existing page like a tooltip.
For Example: In this forum, when hovered on each topic, the topic description is displayed as tool-tip.
I'm wondering what the best practice is for a particular task I'm trying to
accomplish. I'm using two sets of radio buttons for a user to select values
from. These values then go into a couple of tables to show some heat loss
calculations depending on the values chosen I want the tables to have the
relevant values filled in. Is the best way to accomplish this a long list of
if then else type statements or is there a better way of doing this?
I am looking for advice on what is "best practice" regarding looping
through a form to check its checkboxes and associated data fields.
Here is what I am trying to do (Here is the page I am working on:
http://www3.telus.net/thothworks/LinLeastSqPoly4.html).
I provide a form for a user to enter up to twenty (M = 20) data pairs.
The user need not enter data for all twenty pairs, but
the user must indicate that data is present by checking the checkbox
beside each valid pair.
If a checkbox is checked, two things happen:
i) a counter, numRows, is incremented to keep track of the total
number of valid pairs entered.
ii) the associated two data values (being x and y) are checked to
ensure that they are valid numbers and, if so, are entered in an array
for use later.
Previously, my forms were small, and I was able to examine each
checkbox of a form individually:
"if (checkbox1.checked) do action A;
if (checkbox2.checked) do action B;
if (checkbox3.checked) do action C;
etc."
However, now that my form has twenty checkboxes, and may get bigger, I
would like to learn how to accomplish this task with a concise loop.
Following is my first attempt and it seems to work. If anyone can
suggest improvements for this code ....
I have been going back and getting rid of so many of my onclick's and such, trying to switch to a more unobtrusive method of adding events to anchors.
I've run into one snag that's kind of dissonant for me, and wondered if anyone had any advice.
By adding an event, you can turn:
<a href="#" onclick="something(); return false;>Click me</a>
Into:
<a href="new.html" class="something">Click Me</a>
But what goes in href if you don't have anything to actually link to? One example is a page I've written that is entirely self-contained, and all href's that drive the interface end up pointing to #. Is this acceptible in edge cases like these with the unobtrusive approach?
If someone has JS turned off the markup is essentially meaningless, so I was wondering how people deal with this lapse in the separation between behavior and structure.
I have a photo blog [url] and want to create an effect that fades-in the displayed picture when the page is loaded.
An important requirement for me would be that the page also has to work without Javascript.
Currently I am using the following small plugin:
It is called directly beneath the <img> element:
This way it works fine with the current versions of Firefox and IE. I did not test other browsers or versions yet. I tried to call it in $(document).ready but then IE might display the picture shortly before it is hidden and faded-in.
Since I am not 100% happy with having the code in the middle of the HTML and with depending on the timing of execution to avoid flickering I wanted to ask for other solution or best practices to achieve what I would like to do.
One solution that came to my mind is to do create the image in JScript and only fade it in after it is loaded. To work without Javascript I could still put the <img> element where it was but within a <noscript> element. But not sure how well the <noscript> is supported by older or exotic browsers.
I just wanted to get your opinions on this: I have several pages with page-specific JavaScript (i.e. script I know cannot be reused...it can only be run against elements found only on that page).
My question is, would you recommend just putting it in SCRIPT tags in the header, or should I create thispage.js so that the code is separated into another file? It slows the request because the browser has to ask for another external file, but keeps code out of the HTML doc.
Consider the following simplified example javascript code...
What's the "best" way to write that onclick method in its current context? I can think of a few ways to do it -- but they all seem fairly "dirty."
Have I gone stupid?
I want to create a website where you can practice mathematical skills through gaming, but I don't know which web program will be the best for that type of game. I want to learn javascript because I know it is the most widely used language, but I also want to use c# because I have more knowledge in c++ so I'm guessing it will be easier for me to use. And then there's flashplayer, which I've heard is even more easier to use out of all of them. So I ask which console is the best choice?
View 1 Replies View Relatedhow about getting the attributes of the a tag? href and title and the innerhtml (actually the innerhtml has space on both ends)
View 4 Replies View RelatedIs it possible to take an ASP textbox that has an attribute of
visible='hidden' and make it visible from javascript? I dont want it
to be visible until data on the page has been entered and thus need a
way to dynamically change its visibility?
Can someone tell me if there is a universal way to check the available
screen with and screen height for IE, Netscape, and Opera? Is there a
universal syntax?
I'm using a jquery plugin called jplayer. I need to "bookmark" the current track.
The only way to know the current file playing is to look at the div called jplayer_playlist_current.
<li class="jplayer_playlist_current">
<a href="#" id="jplayer_playlist_item_1" class="jplayer_playlist_current">Introduction and guidance on usage</a></li>
What I want to get from it is the id, ie: jplayer_playlist_item_1
I thought that this might cover it:
[URL]
But nothing I do, no amount of googling or plugins, is getting me this result.
I want to move a div around a page, and I do this by getting the original top and left values of a div, and then change them. But the problem is getting the original values; I checked online and thought that this would work:
var chart = document.getElementById(charDiv).style.top;
var charl = document.getElementById(charDiv).style.left;
alert('char_t:' + chart + ' char_l:' + charl + 'charDiv:' + charDiv);
charDiv is passed into the function (its the id of the div I want to move). I know that charDiv has a value by looking at the values of the alert() statement, but the values of chart and charl are empty. The alert simply outputs char_t: char_l: charDiv: charOne
I'm new at JS.
I need to remove TR elements from parent table but the problem is there are no table ID/Name
Is it possible to perform it?
Please see attach - i need remove red marked block... what scrip i have to use if i will put it to the green block?
I attempting to set attributes for all tags of a particular type....
I have a bunch of thumbnails <img> tags; when I wand over them I would like to show the corresponding large image with a script but the tags require onMouseOver events. I really don't feel like adding a bunch of onMouseOver="myShowScript" attributes to every img tag manually...
my scripts aren't working. I'm sure there is some fundamental concept about java and html I don't get...
here's ONE of the versions that doesn't work.. I've tried a few things but I'm open to scrapping everything for a better way...
function addAtts(){
var numberOf = document.getElementsByTagName("img");
for(i = 0; i < numberOf.length; i++){
numberOf[i].onMouseOver="myShowScript()";
}
}
I have this js function for pulling out a couple of links which I want to add onclick handlers to... but IE can't find the rel attribute the way Im doing it, Im assuming it can another way, but I dont know how?!this works in Chrome, but not IE... the category_links.length yields a fat 0.
function get_product_categories_links(){
var links = document.getElementsByTagName('a');
var category_links = [];
[code]....
I have an application where a user can create a newsletter with a
contenteditable div box and submit it to a database. The problem occurs
when the user tries to edit their newsletter. The edit page looks
exactly like the create page only their already created newsletter is
supposed to appear in the contenteditable div box. To do this I
retrieve the information from the database in the server side. Then I
have the following client side script.
window.onload=doInit
function doInit() {
var content = "<%=sContent%>";
div.innerHTML = content;
}
This seems to work in all cases except if the HTML to be displayed
contains any style attributes. For example, if any of the text has
background color then the HTML code will have the tag <font
style="bacground-color: #000000"> and this will cause nothing to appear
in the div box. Has anyone run into this problem or know how to fix it?
I have a web form with several "submit" buttons.
One of these uploads a file, and I want to validate the user input
prior to submitting the form. I have an event handler specified with
the form's "onsubmit" attribute which checks the the
event.target.value to make sure the right submission type is being
evaluated.
When I try to get the target or srcElement value from the event
object, however, it is always "undefined".
Here is the cut-down version of the handler...
function validateIfUpload() {
if (window.event) {
evt = window.event
} else if (document.event) {
evt = document.event
}
if (evt.target) targ = evt.target
else if (evt.srcElement) targ = evt.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
if (targ.value == "Upload") {
return validateUpload('prod_img_f')
}
return true
}