When you need for a certain element (say a text input box) to remember some data, what is the best way to do this? Can you extend the input box object with jquery? Right now i've been storing it in the rel tag $('#testInput').attr('rel','extrainfo') it just seems like there should be a better way to do this.
View 2 Replies
If I have the following hyperlink :
<p><a href='page.htm' id='foo' class='bar' alt='alt text'>click</a></p>
I know that I can get (eg) the href attribute via $('a').attr('href') BUT I would like to do the following :
get *all* the attribute names and values without knowing anything about the attribute names and values in advance (or even how many there are) - something like a loop and $('a').(attribute name, attribute value). I suppose they would best be placed in a JavaScript object as a set of name/value pairs eg { href: 'page.htm', id: 'foo', alt: 'alt text' }
I have a huge form with a lot of data.
There is a table that data in it I need to display on a print screen (of course this data isn't being displayed in the regular table).
So, I put the display text in a span tag.
So, this is how each item will look:
I need a way to grab all spans on the page that have the attributte of "printData" and grab that text inside that attribute and print it out.
I'm creating an img element and appending it where needed. Is it better to set the new img element attributes like this:
var imgEl = document.createElement('img');
imgEl.src = "images/cal.jpg";
imgEl.width = "16";
[code]...
or should I be using imgEl.setAttribute('src', 'images/cal.jpg');
var fdot;
fdot[0]=new Image();
fdot[0].src="images/5dot0.jpg";
fdot[1]=new Image();
fdot[1].src="images/5dot1.jpg";
fdot[2]=new Image();
fdot[2].src="images/5dot2.jpg";
fdot[3]=new Image();
fdot[3].src="images/5dot3.jpg";
fdot[4]=new Image();
fdot[4].src="images/5dot4.jpg";
fdot[5]=new Image();
fdot[5].src="images/5dot5.jpg";
function overlay(e,num) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
targ.src = fdot[num].src;}
Overlay is called as an onmouseover event from an image's map AREA tag, sending event and a number. FF's JS Console spits out that fdot has no properties. Ideas? Better ways to do this effect (replace the image depending on which area of the imagemap is mousover'd)?
I need a function that can return any elements attributes when clicked.
Mostly this is for getting link data. But there are a few elements in the Google Maps javascript api that I don't know what type of element they are.
Once I am able to get any clicked elements attributes, I will execute the data in ajax to log the data in my database. Once I have an idea of what needs to be and doesn't need to be tracked, I will apply filters accordingly.
How would you access information about various attributes of an element with javascript?
View 2 Replies View RelatedI'm developing a web-template editor for a client, and they want it to update the changes in real-time using javascript. So, in other words, when a person selects a different background image, I use:
document.body.style.backgroundImage="url("+bgimg+")";
Well, I've run into a little problem. I can't seem to find any manual on what comes after style.*
So far, I've seen style.color, style.backgroundImage, style.backgroundRepeat, style.backgroundColor. But, I'm looking for something that can control text-decoration, font-weight and a:hover
Does anyone no where I can find a list of all properties support after style.*?
I have a JavaScript file which Adds and Removes elements when you click a button.
Adding stuff is okay, but removing elements is more complicated.
When you add an element you also add id=x. Each time you add an element x goes up one. For example if I click "add element" 5 times it would be like this:
HTML Code:
If I wanted to remove the thrid element then I would want the following divs to replace it, for example it should look like this:
HTML Code:
I can't figure out how to do this, here is what I tried but it won't work
Code:
I am trying to try jQuery 1.4.3 updated .data() method with HTML5 data attributes. The way I understood these changes is that an element with these attributes would automatically have their data populated by .data(). For example, if I have an element:
<ahref="#" data-cheese="cheddar">DataElement</a>
I can access this with .data('cheddar'). This part works fine. The issue I am having is that calling JUST data like $(this).data() just produces an empty object. Is this how it should be expected to function?
I am using the datepicker plug in, and am trying to extend it to not allow sundays to be selected. Now the problem I have is I am no javascript savy... so not sure the correct way to format this.
Here is my code for the plug in:
<script type="text/javascript">
$(function() {
// Tabs
$('#datepicker1').datepicker({
beforeShowDay: function(date) {
return [(date.getDay() > 1), ""];
} minDate: 0,
maxDate: "+12M +0D",
dateFormat: 'dd-mm-yy'
});});
</script>
The above is not working, It is not showing the calendar, so I know something is up somewhere here? The reason it has datepicker1 is on the page it is dynamic and can have multiple occurences of the calendar but with numbers after each.
Currently I'm trying to do the following:
{
config : {
user : "name",
mod : true
}}
That is JSON nr 1, now I got the following
{
config : {
mod : false
}}
What I need as a result is:
{
config : {
user : "name",
mod : false
}}
If I do a $.extend(json1, json2) then I will lose my user name.
If I do a $.merge(json1, json2) I will keep my username, but my mod will not be overwritten.
How can I overload or extend (or intercept) jQuery's .html() method so that it works its default way unless the object has a certain class?
View 2 Replies View RelatedRun this code :
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo", buttons :
{}};
[code]....
What happens if you do the following? - That is deep copy a jQuery selector.
[Code]...
I'm concerned whether the myObj.selector object will deep copy the whole of jQuery as part of the process. My initial tests did not show any obvious speed hit, but it is rather a basic test right now.
How to extend the _alsoResize function of the resizable plugin?
View 1 Replies View RelatedI've cranked up the numbers for sensitivity, interval, and timeout, and the site seems totally unresponsive to my changes. I've double-checked that hoverintent.js is being called, and it definitely is.
var cfg = {
sensitivity: 7,
interval: 5500,
[code]....
I switched to using this function to create element:
----------------------------------------------------
function elem(name, attrs, style, text) {
var e = document.createElement(name);
if (attrs) {
for (key in attrs) {
if (key == 'class') {
e.className = attrs[key];
} else if (key == 'id') {
e.id = attrs[key];
} else {
e.setAttribute(key, attrs[key]);
}
}
}
if (style) {
for (key in style) {
e.style[key] = style[key];
}
}
if (text) {
e.appendChild(document.createTextNode(text));
}
return e;
}
---------------------------------------------------------
so instead of the "old" way:
var oMyDiv = document.createElement("DIV");
oMyDiv.setAttribute("id","testid");
oMyDiv.className = "testclass";
I use that function :
var oMyDiv = elem('DIV', {'id':'testid', 'class':'testclass'});
The rendered source shows this:
<div extend=" function (object) {return Object.extend.apply(this, [this,
object]); } "
class="testclass" id="testid">
Question: I don't understand the "EXTEND" part......anyways does it look
legit/right?
I would like to extend any HTMLObject with additional functions, such as the following:
HTMLCollection.prototype.getElementByID = function(s_name)
{
alert(s_name);
return null;
}
Unfortunately this doesn't work. However, this one does:
Code:
Array.prototype.getElementsByName = function(s_name)
{
alert(s_name);
return null;
}
Is there a way to do what I'm looking for, perhaps using other techniques?
I've got a div, and it has an onMouseOver handler attached to it which makes a second div visible. The second div shares part of one side with the first, but not all.
The first div also has an onMouseOut handler which, you guessed it, makes the second div invisible.
However, if the user rolls out of the first div and into the second, I'd like to keep the second div visible. Any ideas how to accomplish this?
basically the way I have it now, it's like most other sites, in terms of paginating. You click 2, 3, 4, for the next pages.
However, I don't really like that. I like the way how twitter has it, so you can click more, and the page then extends, showing more tweets.
How can I apply this to my site (which for the most part, is like a photo gallery, by the way)?
As I know,it's not well to extend Object.prototype derictly.
In the Prototype(JS Framewoke),there is no extend Object.prototype.
It only add some static method for Object class.I want to konw the reason.
How to extend the constructor for the date object of the javasccript so that whenever a call is made to the constructor, I want to perform a particular action? Basically how to define wrappers for default javascript methods or objects like Date() so that I can perform some action and then invoke the original method? So basically if I have something like var a = new Date(); I want it to (say) alert the value of the date everything Date() is called and then execute the default date constructor.
View 3 Replies View RelatedThis is a code for checking numbers A1 -> B1, when there is a match, the code will be green, otherwise black. how I can extend this script, that more then one array is checked?
<script type = "text/javascript">
var a1 = ["2","5", "11","16","23","45", "46"];
var b1 = ["2","3","8","12","23", "37", "41", "45", "48"]
[code]....
I'm trying to extend KmlPlacemark in the Google Earth API. Google uses factory methods to create the objects so I can't do something like this:
KmlPlacemark.prototype.foo = fuction(){...}
I tried to simply add methods to each of the objects after they were created
function foo(){...}
placemarkObj.foo = foo;
but it throws
Error: Trying to add unsupported property on NPObject!
I ended up just making a wrapper for it, but I'd still want to know if there's any other way of doing it.
I have two objects that I am trying to merge together using $.extend().
As long as I only use objects 1 level deep everything merges correctly.
objOne = {
face: "book",
captain: "crunch"
}
[Code]....
