Retaining Objects Instance Whilst Adding An AddEventListener
Oct 27, 2009
Im trying to create a function where i pass two element id's and my script populates it with events and anything else it may need to run but what i am finding is that i cant use this so that the instance of the object is kept what ends up happening is nothing at all what i would like to have happen is the code to work somthing like this...
Does anybody know why IE5+ does *not* honour array objects (like a table) across a session?
Example: Frame A contains a var tableVar which is set via form Frame B (on init) using top.A.tableVar = document.getElementById("someTable");
As long as Frame B is *not* 'refreshed/ reloaded' witk another page the variable in Frame A is ok.
However, when the page is changed it just 'kills' the rows in tableVar.rows (the lenght just turns to 0).
When tested with something simple like a String (instead of a table) the above mechanism works as expected.
After two full days of mucking about this is strting to smell funny. Does anybody have any idea/ suggestion as to the what and/ or why of this behaviour.
I am using the jQuery TableSorter plugin on a table that I have shaded. The table sorts successfully, but the shading is not refreshed when the table refreshes. How can I refresh the shading as well after the sort?
I am trying to add an event listener to the keyup event for some text inputs that I am creating dynamically. I have no problems getting it to work in Firefox, but IE just ignores them. I have created a few functions to aid in making this process work semi-cross-browser. (I develop in FF, but everyone who uses it will be using IE6.) ....
I have a set of div elements cached inside var divs = $('#myDivs'). Suppose another div comes along that i want to add (push) to the group. is there a simple method for doing this without selecting ones already in the group for a second time?
I'm making some jQuery UI elements, and once an element is created, I want to add some custom functions and variables - I don't want to clutter up other jQuery objects by putting the functions in all jQuery objects, and obviously, the variables need to be different between different objects. However, the issue is, when I re-acquire the item, I won't have access to the variable any more.
That was probably confusing. Another way of putting it: (function($){ var _MyUI_id=0; jQuery.fn.MyUICreate = function(opts){ this.each(function(){ var obj=$(this)
//... code to turn the object into a MyUI object omitted to be concise obj.MyUI_id = _MyUI_id; _MyUI_id++; }}
})(jQuery) //now, create one $('#some_div').MyUICreate({}); //The desired effect would be to give me the id in #14, instead I get 'undefined'. alert($('#some_div').MyUI_id);
My 'solution', is to create an object variable in jQuery.fn called 'Collections'. It's indexes are the names of the new types, and each contains an object, the keys of which are the IDs of the UI elements that are converted to the type, and the values the jQueries objects. This is not only hackish, but it has a LOT of potential bugs. The code for this would look like:
This is in the 'create' function, at the end. jQuery.fn.Collections.MyUI[obj.attr('id')]=obj;
This is outside of the create function, but within the (function($){...}) scope. //jQuery.fn.Collections is set to {} in another file. jQuery.fn.Collections.MyUI={}; jQuery.fn.GetMyUI(id){ return jQuery.fn.Collections.MyUI(id); } This will allow the first block of code to work as desired, but it inserts a whole new set of bugs. What are the common ways to achieve what I am trying to do?
I hava sortable list using jQuery UI Sortable. When the items are re-ordered the new order is written to the database. All working fine � however, if I use jquery to add a new item ....
I have the following object: var wDefaults = { "skin":1, "pagewidth":"960px", "c1col":[ {"wid":"w001","pcol":0,"wpos":0,"wclosed":"false","wcollapsed":"true"} ], "c3col":[ {"wid":"w002","pcol":0,"wpos":0,"wclosed":"false","wcollapsed":"false"}, {"wid":"w003","pcol":0,"wpos":1,"wclosed":"false","wcollapsed":"false"}, {"wid":"w004","pcol":0,"wpos":2,"wclosed":"false","wcollapsed":"false"}, {"wid":"w005","pcol":1,"wpos":0,"wclosed":"false","wcollapsed":"false"}, {"wid":"w006","pcol":1,"wpos":1,"wclosed":"false","wcollapsed":"false"}, {"wid":"w007","pcol":1,"wpos":2,"wclosed":"false","wcollapsed":"false"}, {"wid":"w008","pcol":1,"wpos":3,"wclosed":"false","wcollapsed":"false"}, {"wid":"w009","pcol":2,"wpos":0,"wclosed":"false","wcollapsed":"false"}, {"wid":"w010","pcol":2,"wpos":1,"wclosed":"false","wcollapsed":"false"}, {"wid":"w011","pcol":2,"wpos":2,"wclosed":"false","wcollapsed":"false"} ]}
First, how do I access a single value? I've tried some of the examples I saw on the forum, but nothing happened. The alert did not fire: alert(wDefaults.c3col[0].wid); //first try alert(wDefaults.c3col.0.wid); //second try var obj = wDefaults.c3col[0]; //third try alert(obj.wid);
The nested objects are the properties for widgets within a portal. After the user moves around the widgets, I need to update the object, putting the widgets in a different order within c3col and updating the values saved in pcol, wpos, wclosed, & wcollapsed. I also may need to add or delete an object, for example, delete wid=w003 and add a new one called w012.
My logic would be: for each widget on the page found = false find the object in c3col where wid == x and update its other values . set found = true if found == false then add a new object to c3col with x & its properties end for for each object in c3col if that wid isn't found in the list of widgets on the page, delete it from c3col end for sort the objects under c3col by pcol and then wpos
The red parts are the ones I'm unclear about how to do it. My basic questions are: (1) How do you access a single nested object? (an object within c3col, find and change its values) (2) How do you add a new nested object to an existing object? (add a new object to c3col) (3) How do you delete an nested object? (remove an object from c3col) (4) How do you sort nested objects? (sort the objects in c3col by pcol and wpos)
I currently have 3 jQuery events assigned to the document keydown, keyup and click.
Here is my code:
var logkeydown = false; $(function(){ $(document).keydown(function(e){ var key; e?key=e.keyCode:key=event.keyCode;
[Code].....
They toggle the boolean value of whether the keyboard key 'e' is currently pressed. If so, when the user clicks any of the site, I have a Thickbox fading in. This works great in Firefox and Safari, but IE7 begins to fade in the Thickbox (btw, I slightly altered the thickbox code to fade it in/out) but halts half-fade until the 'e' key is released.
I have 4 div tags which are hidden to begin with from the css as shown below:
The contents of these is pulled out of a db and so the quantity of text changes (within certain parameters) and so the size of the divs changes, hence no height: setting.
I know I could get around this by setting an absolute height and using overflow to show a scrollbar but I would rather not have a scrollbar as the amount of text will only be 100-200 words.
Elsewhere I have used the following script to equalise div tags
CODE:
I tried this for my div tags but because they initially start with display:none it sets the height of them to zero. Is there a simple way to make all of these the same height whilst they are hidden?
I have a div (representing a form) with a number of images positioned absolutely within it. The images represent buttons and what I'd like to do is click on one of the images/buttons and the whole form to fade out with the exception of the selected button which merely changes it's opacity from 1 to 0.5 (to remind the user it was clicked). Here's the code I'm using:
However, despite referencing the elements in a number of ways (they have unique id's), every time I run this, $(this) won't show - the opacity is being set but it seems to remain steadfastly invisible whilst the parent div is invisible/hidden - am I barking up completely the wrong tree here ?
Ive got the following code which I have posted underneath, and what I am trying to do is hide the text which hasa span class "sp-text". When the userhovers over oneofthe images I want the text associated to that image to appear in the info-text div.
Sosearching through the web and coming across many examples, I thought the followingcode wouldhidebut it doesnt.
I've set up two buttons to dynamically load in content. However for some reason the content only loads on the first time you click a button. The transition function does receive the correct variables however. The fade0ut animation also doesn't take affect whilst the replaceWith() function is inside the transition function.
Is there a way in Javascript or Jquery to return an array of all objects underneath a certain point, ie. the mouse position. Basically, I have a series of images which link to various web pages but I have a large semi transparent image positioned over the top of the other images. I want to find the href of the background image that the mouse pointer clicks over.
This makes my life a bit easier. After executing this script you should be able to addEventListener on all elements instead of determining if you want to call attachEvent or addEventListener. Edit: This is the original version. The revised version is below if (!document.addEventListener && document.attachEvent) { Object.prototype.addEventListener = function(eventName, func, capture) { if (this.attachEvent) this.attachEvent('on' + eventName, func); }
var i, l = document.all.length;
for (i = 0; i < l; i++) document.all[i].addEventListener = Object.prototype.addEventListener;
This one is harder to use but it is nicer to the DOM and all newly created objects. The problem with it is that addEventListener will only be available after the page loads.
If you want to use addEventListener from a window.onload script make sure that this code is included in the body, not in the head. document.body.onload is called before window.onload.
Now, only elements that already have attachEvent will get an addEventListener. Elements created with document.createElement will automatically get addEventListener.
function createIEaddEventListeners() { if (document.addEventListener || !document.attachEvent) return;
function ieAddEventListener(eventName, handler, capture) { if (this.attachEvent) this.attachEvent('on' + eventName, handler); }
function attachToAll() { var i, l = document.all.length;
for (i = 0; i < l; i++) if (document.all[i].attachEvent) document.all[i].addEventListener = ieAddEventListener; }
var originalCreateElement = document.createElement;
document.createElement = function(tagName) { var element = originalCreateElement(tagName);
if (element.attachEvent) element.addEventListener = ieAddEventListener;
Today I have been testing the event models from Netscape 4.8 and IE 4 to the current crop of browsers. I'd like to write a small event library similar in purpose to the Yahoo! UI event library but with less features and code. The Yahoo! event library is one of the best libraries in YUI but it still seems to me to have some confused code...that or I'm still confused.
The Yahoo! UI library focuses on using addEventListener and attachEvent. However, due to the click and dblclick bugs in Safari a long legacy event workaround is included to use a Netscape4-type event model for Safari. Something like this
var listeners = [function(event){}, function(event){}]; document.getElementById('blue').onmouseover = function(event) { for (var i=0; i<listeners.length; i++) { listeners[i](event); } };
With this above example, multiple handler functions can be fired for a single event. I imagine that this is an old trick that has been around for a long time, yes?
With all the new browsers I tested with this legacy workaround, the listener handlers can use event.stopPropogation() or event.cancelBubble=true and they work as desired. The handler functions can also use event.preventDefault() and event.returnValue=false and they too work. These seem to work because the event object passed to the handlers is a modern event object and not one from Netscape4.
My question is, if Safari needs this legacy workaround, and the legacy workaround seems to work in all the browsers that have addEventListener or attachEvent, then why bother with the addEventListener and attachEvent functions at all? Why not just use the legacy way for all browsers and all type of events.?
I was using this script to learn how to use event listeners and I need to know how to make it work for IE. I keep finding attachEvent scripts that look like they will work, but I get nothing. I've spent several hours finding script after script that simply don't work. I don't know where to turn next. Any script to attach these events to IE?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]"> <html> <head> <title>Test</title> </head> <body><div> <script type="text/javascript">
if(!Array.prototype.link) Array.prototype.link = function(f) { for(var Obect1 = new Array(), i = 0, n = this.length, t = arguments[1]; i < n; i++) Obect1[i] = f.call(t, this[i], i, this);return Obect1;}; Array.prototype.linkMethod = function(m) { var n = this.length, args = this.slice.call(arguments, 1);if(typeof m == "string" && n > 0) m = this[0][m];for(var Obect2 = [], i = 0; i < n; i++) Obect2[i] = m.apply(this[i], args);return Obect2;}; .....
I'm trying to add a clickevent to an anchor that I created trough DOM. This his how the code looks:
var oSubLink = document.createElement("A"); oSubLink.appendChild(document.createTextNode("+")); oCel.appendChild(oSubLink); oSubLink.addEventListener("click", klapUit(oTabel.id, eigenschappen[2]), false);
It failes at the addEventListener call, saying "No such interface supported" (appears to be one of the two default error messages IE gives when it can't handle your JS :mad: ).
How can I fix this? The solution should work in IE6, FF, Opera, Mozilla and Safari.
Is there a way to send parameters to the function being added to an event with addEventListener. I.E. say you have this function
Code: function someFcn(i){ alert(i); } and I add it to an object.
Code: someElement.addEventListener('focus', someFcn, false); Is there a way to send a parameter to someFcn. For Example I have tried this but it failed
Code: var someString = 'Hello World' someElement.addEventListener('focus', someFcn(someString), false);
Im updating a website to use ajax instead of Iframes. Ajax is working fine to load html content into a <div> yet my issue lies with the navigation buttons that trigger my ajax requests.
I have css styled buttons that contain <a> links </a>, i have removed the href and used a onclick event instead but when i remove the href the mouse will lose its hand cursor on hover and the css styled buttons stop working correctly.
Code:
<script type="text/javascript"> function loadXMLDoc() { if (window.XMLHttpRequest)
I have some links that open a window, when this window is open various php processes are carried out and it sets serveral global variables. The problem i am having is users, you can't just tell them to have one instance of the window open you have to enfore that rule and i am having a problem doing that.
i have this code:
function launch(newURL, newName, newFeatures, orgName) { var remote = open(newURL, newName, newFeatures); if (remote.opener == null) remote.opener = window; remote.opener.name = orgName; return remote; }
and this function is called upon by another function Code: