[jQuery] Re: include multiple css, js ,html on demand with jQuery
a.karimzadeh wrote: by using the includeMany 1.0.0 plugin you can add multiple files with different callbacks for each one and also a global callback after all are loaded check it here: http://www.arashkarimzadeh.com/index.php/jquery/17-includemany-jquery-include-many.html Arash Karimzadeh http://www.arashkarimzadeh.com Usefull! But i'd have to be able to load 2 or more threads (as you have 'm now, a list of callbacks followed by a final callback) in parallel. I'd also like a way to say request named X from thread Y must be completed before this load-operation starts. Can it do this?
[jQuery] Re: include multiple css, js ,html on demand with jQuery
a.karimzadeh wrote: by using the includeMany 1.0.0 plugin you can add multiple files with different callbacks for each one and also a global callback after all are loaded check it here: http://www.arashkarimzadeh.com/index.php/jquery/17-includemany-jquery-include-many.html Arash Karimzadeh http://www.arashkarimzadeh.com And a way to update a thread of load calls with more load-calls (also with this-must-load-before-that).. Would be very usefull too.
[jQuery] Re: include multiple css, js ,html on demand with jQuery
I meant: And a way to update a thread of load calls with more load-calls, while it runs (also with this-must-load-before-that).. Would be very usefull too.
[jQuery] tech demos
Hey, now that i have a working example of my CMS again, i'd like to share a tech demo with the world, and see other people's work with jQuery too.. Mine is currently up at http://snow-show.info/ It tends to max out a browser with all the visuals ;) Lemme know what you think of it...
[jQuery] Re: JSON and jQuery
Alain Roger wrote:
Hi,
i didn't find anything on jQuery and JSON. is there any decoder ?
thanks a lot.
jQuery just does an eval on JSON. so no data checking
If you want data checking, go to http://json.org, and download the
javascript JSON implementation.
They do change the array and object prototypes, breaking some apps..
So here's my stripped version, as plain functions to call (no warranties):
// mediaBeez version of http://json.org/json.js dated 2007-09-27
// all functions taken out of array and object prototypes, so as not
// to break apps that iterate through all values in an array.
function arrayToJSONstring (ar) {
var a = [], v;
for (var i = 0; i ar.length; i += 1) {
v = ar[i];
switch (typeof v) {
case 'object':
if (v) {
a.push(objectToJSONstring(v));
} else {
a.push('null');
}
break;
case 'string':
a.push(stringToJSONstring(v)); break;
case 'number':
a.push(numberToJSONstring(v)); break;
case 'boolean':
a.push(booleanToJSONstring(v)); break;
}
}
return '[' + a.join(',') + ']'; // Join all of the member texts
together and wrap them in brackets.
};
function booleanToJSONstring (b) {
return String(b);
};
function dateToJSONstring (dt) {
// Ultimately, this method will be equivalent to the date.toISOString
method.
function f(n) { // Format integers to have at least two digits.
return n 10 ? '0' + n : n;
}
return '' + dt.getFullYear() + '-' +
f(dt.getMonth() + 1) + '-' +
f(dt.getDate()) + 'T' +
f(dt.getHours()) + ':' +
f(dt.getMinutes()) + ':' +
f(dt.getSeconds()) + '';
};
function numberToJSONstring (num) {
// JSON numbers must be finite. Encode non-finite numbers as null.
return isFinite(num) ? String(num) : 'null';
};
function JSONencode (val) {
var sv;
switch (typeof val) {
case object:
if (val==null) {
sv = null;
} else if (val.length) {
sv = arrayToJSONstring (val);
} else {
sv = objectToJSONstring (val);
}
break;
case 'string': sv = stringToJSONstring (val); break;
case 'number': sv = numberToJSONstring (val); break;
case 'boolean' : sv = booleanToJSONstring (val); break;
}
return sv;
}
function objectToJSONstring (ob) {
var a = [], // The array holding the member texts.
k, // The current key.
v, // The current value.
sk,
sv;
// Iterate through all of the keys in the object, ignoring the proto
chain.
for (k in ob) {
if (ob.hasOwnProperty(k)) {
switch (typeof k) {
case 'object': sk = objectToJSONstring (k); break;
case 'string': sk = stringToJSONstring (k); break;
case 'number': sk = numberToJSONstring (k); break;
case 'boolean' : sk = booleanToJSONstring (k); break;
}
v = ob[k];
switch (typeof v) {
case 'object':
if (v == null) {
sv = 'null';
} else if (v.length) {
sv = arrayToJSONstring(v);
} else {
sv = objectToJSONstring(v);
}
break;
case 'string':
sv = stringToJSONstring(v);
break;
case 'number':
sv = numberToJSONstring(v);
break;
case 'boolean':
sv = booleanToJSONstring(v);
break;
}
a.push (sk + ':' + sv);
}
}
return '{' + a.join(',') + '}';
};
function JSONstringDecode (str, filter) {
var j;
//mb.reportToDebugger ('JSD: '+str, true);
function walk(k, v) {
var i;
if (v typeof v === 'object') {
for (i in v) {
if (v.hasOwnProperty(i)) {
v[i] = walk(i, v[i]);
}
}
}
return filter(k, v);
}
// Parsing happens in three stages. In the first stage, we run the
text against
// a regular expression which looks for non-JSON characters. We are
especially
// concerned with '()' and 'new' because they can cause invocation,
and '='
// because it can cause mutation. But just to be safe, we will
reject all
// unexpected characters.
//modified regexp (by rel. noob); now accepts input like:
//{'g':[{'desktopID':'action=viewArticletarget=frontpagelanguage=1788'}]}
//and
//
if (/^[,:{}\\\[\]0-9.\-+Eaeflnr-u \n\r\t]*$/.test(str.
replace(/\\./g, '@').
replace(/['][^\\\n\r]*[']/g, ''))) {
try {
j = eval('(' + str + ')');
return j;
} catch (e) {
mb.error ('parseJSON: '+str);
throw new SyntaxError('parseJSON');
}
} else {
mb.error ('parseJSON: '+str);
throw
[jQuery] Re: selector best practice
I'd say go for just (#uniqueid) as that likely maps to document.getElementById() (fast) and bypasses the normal jquery traversing that is required if you put in more selectors. SteelRing wrote: This may sound stupid to y'all jquery practitioners, but i wonder which method is fastest (recommended) for selecting a cell with a class in a big table (think like 1000+ rows 100+ columns): (#tableid tbody tr.rowclass td.cellclass) or is it (td.cellclass) or (.cellclass). And how about if the cell happens to have a unique id: (#tableid tbody tr#uniquerow td#uniqueid) or just (#uniqueid) Philosophically, the question being is it better to put as much detail as structurally already known by the programmer into the selector or just anything goes and let jquery handle it as long as it works.
[jQuery] Re: How to make a secured login form
I have secured the login form for my CMS with a challenge-response thing
that encrypts both username and password with the
(login-attempts-counted) challenge (and; here's my problem: a system
hash) sent by the server (it would end up in your html as a hidden
inputs, or as part of a json transmission)..
Since then, i've found these libs that do even longer one-way-crypto:
http://mediabeez.ws/downloads/sha256.js-php.zip
The principles i'm about to explain stay the same.
*but i'd really like to know if my crypto can be improved*
So instead of the browser getting just a text-field for username and
password, you also send the challenge (and system_hash) value.
That's a 100-character random string (include special characters!), then
sha256-ed (for prettiness mostly i think).
I really wonder if i can do without the systemhash..
HTML
form id=myForm
input type=hidden id=system_hash name=system_hash
value=[SHA256 SORTA-MASTER-KEY__DUNNO-WHAT-TO-DO-WITH-THIS]/
input type=hidden id=challenge name=challenge
value=[SHA256RANDOMSTRINGFROMPHP]/
table
trtdLogin/tdtdnbsp;/tdtdinput id='login'
name='login'//td/tr
trtdPassword/tdtdnbsp;/tdtdinput id='pass'
name='pass'//td/tr
/table
/form
JS
$('#myform').submit (function() {
var s = ($'system_hash')[0];
var c = ($'challenge')[0];
var l = $('#login')[0];
var p = $('#pass')[0];
l.value = sha256 (sha256 (l.value + s.value) + c.value);
p.value = sha256 (sha256 (p.value + s.value) + c.value);
//Here, submit the form using ajax routines in plain text,
as both the login name and
//password are now one-way-encrypted.
//
//on the PHP end, authentication is done against a mysql
table users.
//
//in this table i have 3 relevant fields:
//user_login_name (for administrative and display purposes)
//user_login_name_hash (==sha256 (user_login_name +
system_hash))
//user_password_hash (== passwords aint stored unencrypted
in my cms, to prevent admin corruption and pw-theft by third parties;
the password is encrypted by the browser in the new-password-form with
the system hash before it's ever sent to the server. server Never knows
about the cleartext password, ever.)
//
//when a login-attempt is evaluated, all the records in
users table have to be traversed (which i admit can get slow on larger
userbases... help!?! :)
//for each user in the users table, the loginhash and
password hash are calculated;
//$uh = sha256 ($users-rec[user_login_name_hash] .
$challenge);
//$pwh = md5 ($users-rec[user_password_hash] .
$challenge);
//and then,
//if they match the hash strings that were sent (both of
them),
//if the number of login-attempts isn't exceeded,
//if the IP is still the same (as the one who first
requested the html login form with new challenge value)
//then, maybe, i'll let 'm log in :)
});
phicarre wrote:
How to secure this jquery+php+ajax login procedure ?
$('#myform').submit( function()
{
$(this).ajaxSubmit( {
type:'POST', url:'login.php',
success: function(msg)
{
login ok : how to call the welcome.php ***
},
error: function(request,iderror)
{
alert(iderror + + request);
}
});
return false;
})
form id=myForm action=
Name : input type='text' name='login' size='15' /
divPassword : input type='password' name='passe' size='15' /
/div
input type=submit value=login class=submit /
/form
Login.php check the parameters and reply by echo ok or echo ko
Logically if the answer is ok we must call a welcome.php module BUT,
if someone read the client code, he will see the name of the module
and can hack the server.
May I wrong ? how to secure this code ?
[jQuery] Re: How to make a secured login form
Rene Veerman wrote: //$pwh = md5 ($users-rec[user_password_hash] . $challenge); Ehm, best to use Either sha256 OR md5 for BOTH fields ofcourse ;) It was a hasty paste.
[jQuery] dropping between items that have no gap between them
Hi.. Quick question about drag-n-drop with jQuery UI. For my CMS, I have a admin tree of items of various types, that i want to enable drag-n-drop between. I aim to emulate windows explorer in most aspects of operations, with some improvements ofcourse. I had already found a drag-n-drop library (Toolman's) before i found jQuery, and built something where you could re-arrange the order in which items are displayed (making them non-alphabetical, yep) by dragging them to another position in the tree. I can drag something _between_ 2 other items(xy), and it will take the same parent as those xy, but the LevelOrder is set to Y, and all nodes with LevelOrder Y get an increase of 1 ofcourse. I'd really like to keep this functionality. It is usefull to re-arrange menu-items. So can jQuery UI do this? I have two divs within a container div or td, underneath eachother, with no gap between 'm. I want to detect (easilly or even with lots of custom code) that a dragged div is dragged between two of those items. The only thing i can think of is to have a 1-pixel div between items, that's also a droppable-container. But then the mouse-pointer has to Exactly be on that spot.. It's too cumbersome for even an exp end-user (me), i've already tried it, not with jQuery UI but with Toolman's lib.. I had to increase the text-size of items in the tree so i had enough pixel resolution to both select 'the 50% of height centered around the middle of a div', and the 25%'s at top and bottom. And really, it's worth having this feature ppl :) Much better than again more buttons that an average end-user gets scared by. Less buttons - better, imo. Anyways, thanks for reading this, and if you have an anwser to my question i'd really like to hear it asap. I'm on hold with my explorer-func until i know more... ;)
[jQuery] fade animations for graphics next to eachother; issues
Hi. I've got several graphics next to eachother that i've set to opacity=0.4; on mouseover i want them to light up to opacity = 1. So far so good, i have onMouseOver and onMouseOut events that get called, and i thought i'd just add animate() calls and i'd be fine.. Turns out that aint so.. It's probably multiple events firing in rapid succession after eachother, but i have no real clues yet on how to buffer the events and get the animation correct. have a look at http://82.170.249.144/mediaBeez/index.php login: admin password: test23 then click on the menu item admin tree that appears. then hover your mouse over the icons in the lower-left of the screen that appears. when moving from left to right, it doesn't light up correctly :( any help is greatly appreciated..
[jQuery] Re: fade animations for graphics next to eachother; issues
Solved it; don't put the graphics in a table cell to arrange them, use float:left; Then it works as expected with animate() calls in onmouseover and onmouseout Rene Veerman wrote: Hi. I've got several graphics next to eachother that i've set to opacity=0.4; on mouseover i want them to light up to opacity = 1. So far so good, i have onMouseOver and onMouseOut events that get called, and i thought i'd just add animate() calls and i'd be fine.. Turns out that aint so.. It's probably multiple events firing in rapid succession after eachother, but i have no real clues yet on how to buffer the events and get the animation correct. have a look at http://82.170.249.144/mediaBeez/index.php login: admin password: test23 then click on the menu item admin tree that appears. then hover your mouse over the icons in the lower-left of the screen that appears. when moving from left to right, it doesn't light up correctly :( any help is greatly appreciated..
[jQuery] getJSON - how to retrieve plain text?
I have a getJSON call that works fine in FF, but bugs in IE.
I get no data. :(
So i want to see what the plaintext is that's returned in the success
callback..
Using the new 1.3 jQuery, btw..
code:
var rc = $('select#regions_countries')[0];
var rr = $('select#regions_regions')[0];
var url =
'http://www.myhost.com/members/ajax_fetch_regions_for_countries.php';
var countries = [];
for (var i=0; irc.options.length; i++) {
if (rc.options[i].selected) {
countries[countries.length] = rc.options[i].text;
}
};
$.getJSON (url, {countries:countries.join('|-|')}, function (data, ts) {
var regions = data.regions.split('|-|').sort();
var html = '';
for (var i=0; iregions.length; i++) {
html+='option
value='+regions[i].replace(/\s\(.*\)/,'')+''+regions[i]+'/option';
}
rr.innerHTML = html;
});
[jQuery] can one detect if the current tab is still visible?
I've got a slideshow that polls the server each 7 seconds for new images to display, and want to pause it when the tab that the user is on isn't visible.. I have little hope of it being possible (in all browsers), but am asking anyway ;) Perhaps, perhaps, they thought of it.. If u know of a way, please let me / us know.
[jQuery] [offtopic] can you perhaps tell why this page doesnt show in firefox?
This page displays fine in IE, opera and safari. But not in firefox :( http://tevlar.net/mytevlar/ any clues greatly appreciated.. -- -- Rene Veerman, creator of web2.5 CMS http://mediabeez.ws/
[jQuery] Re: Panel Interface for webpage?
Shawn wrote: Thanks Rene. Didn't find anything promising there though... but great resource! Shawn Then you're gonna have to code it yourself.. pretty please release it as a plugin :)
[jQuery] Re: Panel Interface for webpage?
Shawn wrote: I'm not sure if I've seen a plugin for this, or even a website, but thought I'd ask here before creating custom code We're looking to have panels (aka widgets) on the page. (A dashboard perhaps?) Each panel is a given size - say 100x100, has a title bar, and minimize/maximize options, and a Show More link at the bottom of the panel. The web page may have many panels (scrolling the page as needed). Each of these panels would (presumably) contain the output from various applications within the Intranet. There is a little more logic involved - manadatory panels, etc - but this covers the core. I'm looking for any tips/suggestions on this... I can build something (ajax calls, iframes, etc... should be pretty straight forward), but would rather not have to, unless really needed. Thanks for any responses. Shawn you might wanna check http://ajaxrain.com
[jQuery] [offtopic] [article] domWrite() lazy loading ads: external code using document.write() - execution AFTER the page has rendered
Friend of mine wrote this article that might be of interest to you: Often there is advertizing code to be implemented in a page, and there are 2 problems one may face: (1) the website hangs due to a lag on the code delivering server (2) you normally cannot lazy load the script since document.write() is used inside the foreign code which only works during rendering of the page. This is a snippet that allows the asynchronous loading and delayed execution of JS code that contains document.write() statements in the context of a DIV element: http://blog.phpbuero.de/?p=26
[jQuery] other easing plugins than the standard ones?
Hi, i use .animate() in my cms and would like to try some other easing plugins besides linear and swing, the builtin ones. But i can't find any to download on the jquery site.. Maybe i'm not looking right.. Have you found them?
[jQuery] [released] themeable canvas loader icon, with semi-transparency support
http://mediabeez.ws/mediaBeez/permalink.php?tag=visCanvasLoaderGraphic This the second opensource plugin that I release; a loader icon capable of displaying colorfull yet semi-transparent animated graphics. It's simple to use and design for.. I'll admit right now that there are still some issues in IE, like activeX warnings in some cases, but i hope that over time those can be fixed and updated too.. Comments and bug-notices are very welcome, either on the list or via the comments-button (top-left on the page).
[jQuery] [released] themeable canvas loader icon, with semi-transparency support
http://mediabeez.ws/mediaBeez/permalink.php?tag=visCanvasLoaderGraphic This the second opensource plugin that I release; a loader icon capable of displaying colorfull yet semi-transparent animated graphics. It's simple to use and design for.. I'll admit right now that there are still some issues in IE, like activeX warnings in some cases, but i hope that over time those can be fixed and updated too.. Comments and bug-notices are very welcome, either on the list or via the comments-button (top-left on the page).
[jQuery] Re: [hacking] animating a div with fuzzy png borders
Well i hacked something into the animate() and custom() functions but actually calling the 'fix-function' during the animation resulted in a flickering animation. I haven't been able to get rid of it, so i'm reverting to std jquery hard borders for elements that i animate, for now.. If i ever work on it again and get it fixed then i'll let u know.. Rene Veerman wrote: hi. i want to animate a div element that is styled as a jquery dialog. During the animation i need to adjust various widths and heights of the border and background child-divs.. So i got a function to do that, and it works. I can call it after the animation has completed, but not during. How would i hack that into the source of 1.2.6? Here's the animate function, with my addition of inFlightCallback: As it is now, it doesn't get called :(
[jQuery] Re: pagination solution
'plugin' usually refers to a javascript thing. you need php aswell and since db definitions vary wildly, it's hard to create something standarized.. i dont know of any components/plugins that do this and are easy to configure.. i did write something on this topic, which you can find here: http://www.nabble.com/how-to-do-paging--tc19759005s27240.html bdee1 wrote: I am looking for a simple solution to add pagination to some reports i have built using ASP and jquery. the problem is that the reports are returning so much data that the script(s) are timing out. SO based on that - i assume i woudl need to have some kind of ajax based pagination so that the script is only returning a small amount of data from the database at a time. But i will also need to be able to sort the columns and possibly search them. is there any simple plugin or combination of plugins that will allow for this?
[jQuery] is this usefull as an lgpl-ed component? canvas fancy ajax loader icon
i've made a loader icon based on the canvas tag.. demo up at http://mediabeez.veerman.ws/mb/ this is an early draft, and i intend to add a bit more features (like scalability) and themes.. but i'm wondering if there would be an interest in a component like this esp with the still difficult support for canvas in IE; http://excanvas.sourceforge.net/ http://blog.vlad1.com/2008/07/30/no-browser-left-behind/ BTW, this component does work in IE, it uses excanvas.. It just looks a bit worse than in FF. Please let me know what you think of it
[jQuery] how would you initialize google excanvas on a new piece of html?
Hi. I'm trying to use google's excanvas in my CMS, but ran into a snag;
excanvas initializes all canvas tags in the dom on startup. my cms loads
much html dynamically, and i need to initialize excanvas on those new
dom nodes.
the new dom node i'm trying to init is called __self.html (of a window).
can someone please tell me if its possible to get the following script
to init my __self.html?
// Copyright 2006 Google Inc.
//
// Licensed under the Apache License, Version 2.0 (the License);
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an AS IS BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// Known Issues:
//
// * Patterns are not implemented.
// * Radial gradient are not implemented. The VML version of these look very
// different from the canvas one.
// * Clipping paths are not implemented.
// * Coordsize. The width and height attribute have higher priority than the
// width and height style values which isn't correct.
// * Painting mode isn't implemented.
// * Canvas width/height should is using content-box by default. IE in
// Quirks mode will draw the canvas using border-box. Either change your
// doctype to HTML5
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
// or use Box Sizing Behavior from WebFX
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
// * Optimize. There is always room for speed improvements.
// only add this code if we do not already have a canvas implementation
if (!window.CanvasRenderingContext2D) {
(function () {
// alias some functions to make (compiled) code shorter
var m = Math;
var mr = m.round;
var ms = m.sin;
var mc = m.cos;
// this is used for sub pixel precision
var Z = 10;
var Z2 = Z / 2;
var G_vmlCanvasManager_ = {
init: function (opt_doc) {
var doc = opt_doc || document;
if (/MSIE/.test(navigator.userAgent) !window.opera) {
var self = this;
doc.attachEvent(onreadystatechange, function () {
self.init_(doc);
});
}
},
init_: function (doc) {
if (doc.readyState == complete) {
// create xmlns
if (!doc.namespaces[g_vml_]) {
doc.namespaces.add(g_vml_, urn:schemas-microsoft-com:vml);
}
// setup default css
var ss = doc.createStyleSheet();
ss.cssText = canvas{display:inline-block;overflow:hidden; +
// default size is 300x150 in Gecko and Opera
text-align:left;width:300px;height:150px} +
g_vml_\\:*{behavior:url(#default#VML)};
// find all canvas elements
var els = doc.getElementsByTagName(canvas);
for (var i = 0; i els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}
}
},
fixElement_: function (el) {
// in IE before version 5.5 we would need to add HTML: to the tag name
// but we do not care about IE before version 6
var outerHTML = el.outerHTML;
var newEl = el.ownerDocument.createElement(outerHTML);
// if the tag is still open IE has created the children as
siblings and
// it has also created a tag with the name /FOO
if (outerHTML.slice(-2) != /) {
var tagName = / + el.tagName;
var ns;
// remove content
while ((ns = el.nextSibling) ns.tagName != tagName) {
ns.removeNode();
}
// remove the incorrect closing tag
if (ns) {
ns.removeNode();
}
}
el.parentNode.replaceChild(newEl, el);
return newEl;
},
/**
* Public initializes a canvas element so that it can be used as canvas
* element from now on. This is called automatically before the page is
* loaded but if you are creating elements using createElement you
need to
* make sure this is called on the element.
* @param {HTMLElement} el The canvas element to initialize.
* @return {HTMLElement} the element that was created.
*/
initElement: function (el) {
el = this.fixElement_(el);
el.getContext = function () {
if (this.context_) {
return this.context_;
}
return this.context_ = new CanvasRenderingContext2D_(this);
};
// do not use inline function because that will leak memory
el.attachEvent('onpropertychange', onPropertyChange);
el.attachEvent('onresize', onResize);
var attrs = el.attributes;
if (attrs.width attrs.width.specified) {
// TODO: use runtimeStyle and coordsize
// el.getContext().setWidth_(attrs.width.nodeValue);
el.style.width = attrs.width.nodeValue + px;
} else {
el.width =
[jQuery] Re: how would you initialize google excanvas on a new piece of html?
i tried G_vmlCanvasManager_.init(__self.html);
but that didnt work.. probably because this thing runs inside an anon
function, right?
Rene Veerman wrote:
Hi. I'm trying to use google's excanvas in my CMS, but ran into a snag;
excanvas initializes all canvas tags in the dom on startup. my cms
loads much html dynamically, and i need to initialize excanvas on
those new dom nodes.
the new dom node i'm trying to init is called __self.html (of a window).
can someone please tell me if its possible to get the following script
to init my __self.html?
// Copyright 2006 Google Inc.
//
// Licensed under the Apache License, Version 2.0 (the License);
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an AS IS BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// Known Issues:
//
// * Patterns are not implemented.
// * Radial gradient are not implemented. The VML version of these
look very
// different from the canvas one.
// * Clipping paths are not implemented.
// * Coordsize. The width and height attribute have higher priority
than the
// width and height style values which isn't correct.
// * Painting mode isn't implemented.
// * Canvas width/height should is using content-box by default. IE in
// Quirks mode will draw the canvas using border-box. Either change
your
// doctype to HTML5
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
// or use Box Sizing Behavior from WebFX
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
// * Optimize. There is always room for speed improvements.
// only add this code if we do not already have a canvas implementation
if (!window.CanvasRenderingContext2D) {
(function () {
// alias some functions to make (compiled) code shorter
var m = Math;
var mr = m.round;
var ms = m.sin;
var mc = m.cos;
// this is used for sub pixel precision
var Z = 10;
var Z2 = Z / 2;
var G_vmlCanvasManager_ = {
init: function (opt_doc) {
var doc = opt_doc || document;
if (/MSIE/.test(navigator.userAgent) !window.opera) {
var self = this;
doc.attachEvent(onreadystatechange, function () {
self.init_(doc);
});
}
},
init_: function (doc) {
if (doc.readyState == complete) {
// create xmlns
if (!doc.namespaces[g_vml_]) {
doc.namespaces.add(g_vml_, urn:schemas-microsoft-com:vml);
}
// setup default css
var ss = doc.createStyleSheet();
ss.cssText = canvas{display:inline-block;overflow:hidden; +
// default size is 300x150 in Gecko and Opera
text-align:left;width:300px;height:150px} +
g_vml_\\:*{behavior:url(#default#VML)};
// find all canvas elements
var els = doc.getElementsByTagName(canvas);
for (var i = 0; i els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}
}
},
fixElement_: function (el) {
// in IE before version 5.5 we would need to add HTML: to the tag
name
// but we do not care about IE before version 6
var outerHTML = el.outerHTML;
var newEl = el.ownerDocument.createElement(outerHTML);
// if the tag is still open IE has created the children as
siblings and
// it has also created a tag with the name /FOO
if (outerHTML.slice(-2) != /) {
var tagName = / + el.tagName;
var ns;
// remove content
while ((ns = el.nextSibling) ns.tagName != tagName) {
ns.removeNode();
}
// remove the incorrect closing tag
if (ns) {
ns.removeNode();
}
}
el.parentNode.replaceChild(newEl, el);
return newEl;
},
/**
* Public initializes a canvas element so that it can be used as
canvas
* element from now on. This is called automatically before the
page is
* loaded but if you are creating elements using createElement you
need to
* make sure this is called on the element.
* @param {HTMLElement} el The canvas element to initialize.
* @return {HTMLElement} the element that was created.
*/
initElement: function (el) {
el = this.fixElement_(el);
el.getContext = function () {
if (this.context_) {
return this.context_;
}
return this.context_ = new CanvasRenderingContext2D_(this);
};
// do not use inline function because that will leak memory
el.attachEvent('onpropertychange', onPropertyChange);
el.attachEvent('onresize', onResize);
var attrs = el.attributes;
if (attrs.width attrs.width.specified) {
// TODO
[jQuery] SOLVED Re: [jQuery] Re: how would you initialize google excanvas on a new piece of html?
Solution:
// Copyright 2006 Google Inc.
//tiny fix by Veerman Internet Services to allow initialization on HTML
loaded after document.ready
//
// Licensed under the Apache License, Version 2.0 (the License);
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an AS IS BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// Known Issues:
//
// * Patterns are not implemented.
// * Radial gradient are not implemented. The VML version of these look very
// different from the canvas one.
// * Clipping paths are not implemented.
// * Coordsize. The width and height attribute have higher priority than the
// width and height style values which isn't correct.
// * Painting mode isn't implemented.
// * Canvas width/height should is using content-box by default. IE in
// Quirks mode will draw the canvas using border-box. Either change your
// doctype to HTML5
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
// or use Box Sizing Behavior from WebFX
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
// * Optimize. There is always room for speed improvements.
// only add this code if we do not already have a canvas implementation
if (!window.CanvasRenderingContext2D) {
var googleExCanvas = function(){
// alias some functions to make (compiled) code shorter
var m = Math;
var mr = m.round;
var ms = m.sin;
var mc = m.cos;
// this is used for sub pixel precision
var Z = 10;
var Z2 = Z / 2;
var G_vmlCanvasManager_ = {
init: function(opt_doc){
var doc = opt_doc || document;
if (/MSIE/.test(navigator.userAgent) !window.opera) {
var self = this;
//doc.attachEvent(onreadystatechange, function(){
self.init_(doc);
//});
}
},
init_: function(doc){
if (doc.readyState == complete) {
// create xmlns
if (!doc.namespaces[g_vml_]) {
doc.namespaces.add(g_vml_,
urn:schemas-microsoft-com:vml);
}
// setup default css
var ss = doc.createStyleSheet();
ss.cssText =
canvas{display:inline-block;overflow:hidden; +
// default size is 300x150 in Gecko and Opera
text-align:left;width:300px;height:150px} +
g_vml_\\:*{behavior:url(#default#VML)};
// find all canvas elements
var els = doc.getElementsByTagName(canvas);
for (var i = 0; i els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}
}
},
fixElement_: function(el){
// in IE before version 5.5 we would need to add HTML: to
the tag name
// but we do not care about IE before version 6
var outerHTML = el.outerHTML;
var newEl = el.ownerDocument.createElement(outerHTML);
// if the tag is still open IE has created the children as
siblings and
// it has also created a tag with the name /FOO
if (outerHTML.slice(-2) != /) {
var tagName = / + el.tagName;
var ns;
// remove content
while ((ns = el.nextSibling) ns.tagName != tagName) {
ns.removeNode();
}
// remove the incorrect closing tag
if (ns) {
ns.removeNode();
}
}
el.parentNode.replaceChild(newEl, el);
return newEl;
},
/**
* Public initializes a canvas element so that it can be used as
canvas
* element from now on. This is called automatically before the
page is
* loaded but if you are creating elements using createElement
you need to
* make sure this is called on the element.
* @param {HTMLElement} el The canvas element to initialize.
* @return {HTMLElement} the element that was created.
*/
initElement: function(el){
el = this.fixElement_(el);
el.getContext = function(){
if (this.context_) {
return this.context_;
}
return this.context_ = new CanvasRenderingContext2D_(this);
};
// do not use inline function because that will leak memory
el.attachEvent('onpropertychange', onPropertyChange);
[jQuery] Re: SOLVED Re: [jQuery] Re: how would you initialize google excanvas on a new piece of html?
sry forgot to add that the solution in this modification is to call
googleExCanvas(), _without_ specifying a dom node to traverse. I ran
into problems if i tried to init a single dom node.. but the code checks
if a canvas tag has been initialized already, so there's no overhead to
speak of..
Rene Veerman wrote:
Solution:
// Copyright 2006 Google Inc.
//tiny fix by Veerman Internet Services to allow initialization on
HTML loaded after document.ready
//
// Licensed under the Apache License, Version 2.0 (the License);
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an AS IS BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// Known Issues:
//
// * Patterns are not implemented.
// * Radial gradient are not implemented. The VML version of these
look very
// different from the canvas one.
// * Clipping paths are not implemented.
// * Coordsize. The width and height attribute have higher priority
than the
// width and height style values which isn't correct.
// * Painting mode isn't implemented.
// * Canvas width/height should is using content-box by default. IE in
// Quirks mode will draw the canvas using border-box. Either change
your
// doctype to HTML5
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
// or use Box Sizing Behavior from WebFX
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
// * Optimize. There is always room for speed improvements.
// only add this code if we do not already have a canvas implementation
if (!window.CanvasRenderingContext2D) {
var googleExCanvas = function(){
// alias some functions to make (compiled) code shorter
var m = Math;
var mr = m.round;
var ms = m.sin;
var mc = m.cos;
// this is used for sub pixel precision
var Z = 10;
var Z2 = Z / 2;
var G_vmlCanvasManager_ = {
init: function(opt_doc){
var doc = opt_doc || document;
if (/MSIE/.test(navigator.userAgent) !window.opera) {
var self = this;
//doc.attachEvent(onreadystatechange, function(){
self.init_(doc);
//});
}
},
init_: function(doc){
if (doc.readyState == complete) {
// create xmlns
if (!doc.namespaces[g_vml_]) {
doc.namespaces.add(g_vml_,
urn:schemas-microsoft-com:vml);
}
// setup default css
var ss = doc.createStyleSheet();
ss.cssText =
canvas{display:inline-block;overflow:hidden; +
// default size is 300x150 in Gecko and Opera
text-align:left;width:300px;height:150px} +
g_vml_\\:*{behavior:url(#default#VML)};
// find all canvas elements
var els = doc.getElementsByTagName(canvas);
for (var i = 0; i els.length; i++) {
if (!els[i].getContext) {
this.initElement(els[i]);
}
}
}
},
fixElement_: function(el){
// in IE before version 5.5 we would need to add HTML: to
the tag name
// but we do not care about IE before version 6
var outerHTML = el.outerHTML;
var newEl =
el.ownerDocument.createElement(outerHTML);
// if the tag is still open IE has created the children as
siblings and
// it has also created a tag with the name /FOO
if (outerHTML.slice(-2) != /) {
var tagName = / + el.tagName;
var ns;
// remove content
while ((ns = el.nextSibling) ns.tagName != tagName) {
ns.removeNode();
}
// remove the incorrect closing tag
if (ns) {
ns.removeNode();
}
}
el.parentNode.replaceChild(newEl, el);
return newEl;
},
/**
* Public initializes a canvas element so that it can be used
as canvas
* element from now on. This is called automatically before the
page is
* loaded but if you are creating elements using createElement
you need to
* make sure this is called on the element.
* @param {HTMLElement} el The canvas element to initialize.
* @return {HTMLElement} the element that was created.
*/
initElement: function(el){
el = this.fixElement_(el);
el.getContext = function(){
if (this.context_
[jQuery] Re: SOLVED Re: [jQuery] Re: how would you initialize google excanvas on a new piece of html?
original package at http://excanvas.sourceforge.net/
[jQuery] Re: get a fancybox/lightbox from a FORM?
i dont know fancybox, but if your lightbox supports HTML it should support submitting a FORM. i'd try to initialize the fancybox on the div containing the form, not the form itself. Hilmar Kolbe wrote: Is there a way to get a fancybox (http://fancy.klade.lv/) or any other lightbox from submitting a FORM (with an image button)? HTML looks like this: form action=/ACTION/FastFindObj method=post input name=fastfind class=fastfind value=3463 type=text input src=/images/ic_ml_lgl.gif name=weiter type=image /form These won't do: $(form).fancybox(); $(input).fancybox(); $(input[name='weiter']).fancybox(); Anyone spotting my mistake or having a workaround or an alternative script? Thanks in advance
[jQuery] Re: Code execution order
function UpdateList()
{
// Open the xml file
$.get(locations.xml,{},function(xml){
// Run the function for each name tag in the XML file
$('location',xml).each(function(i) {
alert($(this).find(name).text());
});
alert(Test);
});
}
you just needed to put the last alert inside the $.get callback func
[jQuery] Re: Whats best for js compression, packer, jsminify, YUI?
I like and use phpjso (http://www.cortex-creations.com/software/phpjso). It can also obfusicate, but if you do that then be sure to use the 'fast decompression' option otherwise you have a initialization lag of up to a full second for +-40Kb of script. JimD wrote: Hi all, I know this has probably been discussed before but I with all the options available, I was wondering what method seems to work best overall for compressing js files. I want to put all my jquery plugins into one file and compress for performance but I'm worried about breaking things. I know there is packer, jsmin etc. Any recommendations.
[jQuery] Re: Ajax/load help with external javascripts
my function is lengthy because my cms requires all the code in there to
work.
for instance, the code that 'removes then re-adds script.src links if
you already have them in head' is to make some plugins, like
tinyMCE.moxiecode.com, work in IE6 when it's loaded up multiple times in
a row through ajax-calls.
and if i get it correctly, yours only handles inline scripts, not
referenced scripts...?
ricardobeat wrote:
uuh lengthy function. I came up with this for my personal library,
works in FF/IE6,7/Safari:
function runScripts(el){
var scripts = el.getElementsByTagName('script');
if (scripts) {for (var i=0;iscripts.length;i++) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = scripts[i].text;
document.getElementsByTagName(head)[0].appendChild(script);
}};
}
the 'language' attribute is deprecated in XHTML.
cheers
- ricardo
Rene Veerman wrote:
Yep, you'll have to add the javascript nodes in the HTML you're
inserting into the DIV manually.
WTF, i'll be a nice guy and post my routines for it. you'll have to
adapt them yourself ;)
function parseJavascript (htmlElement) {
var scripts = $('SCRIPT', htmlElement);
var htmlHead = $('HEAD')[0];
for (var i=0; iscripts.length; i++) {
var script = scripts[i];
if (script.src) {
var scriptsInHead = $('SCRIPT', htmlHead);
var found = false;
for (var j=0; jscriptsInHead.length (!found); j++) {
if (scriptsInHead[j].src == script.src) found = j;
}
var e = document.createElement(script);
e.type=text/javascript;
e.language='JavaScript';
e.src = script.src;
if (found===false) {
console.log (mb.desktop.parseJavascript: appending
+e.src+ to HEAD.);
htmlHead.appendChild(e);
} else {
console.log (mb.desktop.parseJavascript: removing
then re-adding +e.src+ to HEAD.);
scriptsInHead[found].parentNode.removeChild
(scriptsInHead[found]);
htmlHead.appendChild (e);
}
} else {
var s = scripts[i].innerHTML;
s = s.replace (/!--/, '');
s = s.replace (/--/, '');
s = s.replace (/\s\s/g, '');
//console.log (s);
eval(s);
}
}
Steve wrote:
Hi, I'm a jQuery newbie. Basically, I'm trying to load an html file
into a div when a button is clicked. The html file contains
external .js and .css files for the Greybox widget. I can't get
Greybox working, do I have to do something special to load the js and
css before the load method? Appreciate any help.
--- test.html -
$(document).ready(function(){
$(#btn).click(function(){
$(#demo).load(greybox.html);
});
});
--- greybox.html -
script type=text/javascript
var GB_ROOT_DIR = greybox/;
/script
script type=text/javascript src=greybox/AJS.js/script
script type=text/javascript src=greybox/gb_scripts.js/script
link href=greybox/gb_styles.css rel=stylesheet type=text/css /
a href=http://google.com/; title=Google rel=gb_page_fs[]Launch
google.com in fullscreen window/a
[jQuery] Re: How to uninstall the
add a global variable somewhere that your onready callback checks? if
true: execute, if false:dont.
then manipulate that global var instead of the callback itself?
Kynn Jones wrote:
I have a jQuery-based script that performs some updates on the current
page (using the load method), and eventually visits a second page, by
resetting window.location.
This works fine, but if the user hits the back button, the whole
sequence is repeated, including the re-loading of the second page.
I'd like to prevent this behavior. Is it possible?
I tried removing the script with $( 'script[src*=/path/to/script]'
).remove(), but this did not prevent the whole sequence from running
again.
Then I thought that the reason for this was that using remove() does
not get rid of the callback that was originally installed at the very
end of the script with jQuery( MyScript.sleep ). So I tried to
uninstall the callback with $( 'document' ).unbind( 'ready', ... ),
but this didn't do anything either.
How can uninstall the onready callback? If this is not possible, is
there some other way that I can block the sequence from running a
second time when the user the BACK button?
The script has the following form:
var MyScript = ( function ( $ ) {
var SELF_URL = location.pathname + location.search;
var $$; $$ = {
check: function () {
if ( $$.results_ready() ) {
$( 'script[src*=/path/to/script]' ).remove();
$( 'document' ).unbind( 'ready', $$.sleep ); // is this right???
window.location = SELF_URL + 'results=1';
}
else {
$$.sleep();
}
},
sleep: function () {
setTimeout( $$.refresh, 2000 );
},
refresh: function () {
$( 'body' ).load( SELF_URL, $$.check );
},
results_ready: function () {
// etc., etc.
}
};
return $$;
} )( jQuery );
jQuery( MyScript.sleep );
Thanks in advance!
Kynn
[jQuery] Re: random image and content loading
if i get it correctly, in the xhtml content there's an IMG tag with
the image that needs to be pre-loaded. There's a plugin that can do this
for you;
http://flesler.blogspot.com/2008/01/jquerypreload.html
http://demos.flesler.com/jquery/preload/
janus76 wrote:
I was wondering if anyone can point me in the right direction with this. i am
pretty new to javascript and jquery so any help would be most appreciated.
I have a homepage which displays a large random image from an array every 10
seconds or so. I have used a variation of the following script to do this.
http://www.davidvanvickle.com/examples/jquery/slideshow/index.htm
However in my case the array contains more than an image file location but
some xhtml.
so I have altered the part of the script which shows the image to the
following:-
function showImage(content)
{
$(#+div_name).fadeOut(fast,function(){
//$(this).hide();
$(this).html(content);
$(this).fadeIn(1500);
})
}
where content is the new xhtml from the array.
This all works perfectly fine. However, on the first load of the random
image I do not get the nice fade in effect due to the image in the xhtml not
being being fully loaded when the fade starts.
Once the image has loaded once (presumable in the browser cache) on
subsequent cycles everything is fine.
As this process runs every 10 seconds, is there a way to preload the content
and image in this period ready for display at the set time?
I can't preload all the content at once as there are many images within the
random content.
I hope this makes sense.
If anyone could help me out and point me in the right direction that would
be great.
Thanks
Janus
[jQuery] Re: Ajax/load help with external javascripts
Yep, you'll have to add the javascript nodes in the HTML you're
inserting into the DIV manually.
WTF, i'll be a nice guy and post my routines for it. you'll have to
adapt them yourself ;)
function parseJavascript (htmlElement) {
var scripts = $('SCRIPT', htmlElement);
var htmlHead = $('HEAD')[0];
for (var i=0; iscripts.length; i++) {
var script = scripts[i];
if (script.src) {
var scriptsInHead = $('SCRIPT', htmlHead);
var found = false;
for (var j=0; jscriptsInHead.length (!found); j++) {
if (scriptsInHead[j].src == script.src) found = j;
}
var e = document.createElement(script);
e.type=text/javascript;
e.language='JavaScript';
e.src = script.src;
if (found===false) {
console.log (mb.desktop.parseJavascript: appending
+e.src+ to HEAD.);
htmlHead.appendChild(e);
} else {
console.log (mb.desktop.parseJavascript: removing
then re-adding +e.src+ to HEAD.);
scriptsInHead[found].parentNode.removeChild
(scriptsInHead[found]);
htmlHead.appendChild (e);
}
} else {
var s = scripts[i].innerHTML;
s = s.replace (/!--/, '');
s = s.replace (/--/, '');
s = s.replace (/\s\s/g, '');
//console.log (s);
eval(s);
}
}
Steve wrote:
Hi, I'm a jQuery newbie. Basically, I'm trying to load an html file
into a div when a button is clicked. The html file contains
external .js and .css files for the Greybox widget. I can't get
Greybox working, do I have to do something special to load the js and
css before the load method? Appreciate any help.
--- test.html -
$(document).ready(function(){
$(#btn).click(function(){
$(#demo).load(greybox.html);
});
});
--- greybox.html -
script type=text/javascript
var GB_ROOT_DIR = greybox/;
/script
script type=text/javascript src=greybox/AJS.js/script
script type=text/javascript src=greybox/gb_scripts.js/script
link href=greybox/gb_styles.css rel=stylesheet type=text/css /
a href=http://google.com/; title=Google rel=gb_page_fs[]Launch
google.com in fullscreen window/a
[jQuery] forgotten bug? java clashes with jquery, by design, at least since 1.2.1
Whenever one uses jquery on a page with a java applet, either with object or embed, there are CRIPPLING ERRORS on many operations (that are executed in the background). There's already a bugticket for it, but it hasnt been updated in a while: http://dev.jquery.com/ticket/2349 (lists causes and non-working workarounds) it's mentioned on google a couple of times too; http://www.google.nl/search?q=%22has+no+public+field+or+method+named+%22jQueryie=utf-8oe=utf-8aq=trls=org.mozilla:en-GB:officialclient=firefox-a I would like to know from the developers if there's ever going to be a fix for this bug for which there isn't a single working workaround posted. I'll now try to code a patch for jquery 1.2.6 myself. If i'm successfull i'll post it.
[jQuery] temporarily disable ajaxSend?
In order to prevent a clash between a java applet and jquery, i need to disable the ajaxSend trigger for a certain ajax call. How do i do that?
[jQuery] java class clashes with jquery
I this jquery-related error when i run a java applet (that uploads files
through FTP)
I'm wondering how this error occurs, firebug doesn't show a call-stack
trace... :(
Java class com.javauploader.hermes.U has no public field or method named
jQuery1222913664275
var id = elem[ expando ];
it occurs in this piece of source:
data: function( elem, name, data ) {
elem = elem == window ?
windowData :
elem;
var id = elem[ expando ];
// Compute a unique ID for the element
if ( !id )
id = elem[ expando ] = ++uuid;
// Only generate the data cache if we're
// trying to access or manipulate it
if ( name !jQuery.cache[ id ] )
jQuery.cache[ id ] = {};
// Prevent overriding the named cache with undefined values
if ( data !== undefined )
jQuery.cache[ id ][ name ] = data;
// Return the named cache data, or the ID for the element
return name ?
jQuery.cache[ id ][ name ] :
id;
},
[jQuery] Re: Blur effect with jQuery ?
you can $(element).fadeOut, but is that what you are looking for? blur means many things. do you mean 'disable' with it? or just a visual blur? IE can do a visual, guassian blur on a div, but it's not supported in other browsers. [EMAIL PROTECTED] wrote: Hi, I can't find this effect in the API or in the plugins repository. Does anyone know if it's possible at all to blur a DIV using jQuery, or would I have to code this myself ? Thanks
[jQuery] Re: CSS - height and top position
perhaps:
var $c = $('#content');
$('#footer').css({
height: $c[0].offsetTop + $c[0].offsetHeight + 5
});
Filipe Avila wrote:
hey, everyone. how can i get the height of an element and, based on its
given height, set the position of another element from the top? for
example, if there's too much text in the content div, improves the
distance of the foot div from the top.
[jQuery] Re: Find all li tags without an a tag inside
dunno if there's a simple jquery way of doing it, but you could do:
$('#LHNav li').each(function(){
if ($(' a',this).length==0) {
//no A href, add it
} else {
//do something else
}
});
flycast wrote:
I am stumped. I have nested unordered lists. I want to attach a click
event to all the list items that do not directly contain an a tag.
Attach a click event to:
liList item without link/li
Do not attach click event to:
lia href=Link 1/a/li
I have this code which attaches the event to both types of tags:
$(#LHNav).find(li).bind(click, function(){
//do something
});
Ideas anyone?
[jQuery] Re: problem with mouseover / mouseout
try this plz
$(document).ready(function() {
$('a.view').hover(function() {
$(this).stop().fadeTo ('normal', 1);
}, function () {
$(this).stop().fadeTo ('normal', 0.33);
});
});
eewan wrote:
I'm trying to make script that has faded image at start 30%, after
hover sets opacity to 100% and on mouse out puts it back to 30%.
so i did this:
$(document).ready(function(){
$('a.view').fadeTo('fast', 0.33);
$('a.view').mouseover(function () {
$(this).fadeTo('normal', 1);
});
$(a.view).mouseout(function () {
$(this).fadeTo('normal', 0.33);
});
});
Problem appears because i have 15 elements and when i hover over them
fast few times script gets bugged and repeats that process xx times.
I want to repeat effect only when fadeout is finished :)
mycitysolutions.com - address so u can understand it better :)
Thx in advance
[jQuery] Re: Need help with jQuery array
Give your UL tag an id 'menu', and replace your document.ready code
with this:
$(document).ready(function() {
$('ul#menu li a').each (function () {
$(this).append ('span class=hover/span');
var $span = $(' span.hover', this).css('opacity', 0);
$(this).hover (function () {
$span.stop().fadeTo (500, 1);
}, function () {
$span.stop().fadeTo (500, 0);
});
});
Jim Davis wrote:
I am adapting Greg-J's hover fade method
http://greg-j.com/static-content/hover-fade-redux.html to a
navigation menu. Demo of my menu is here:
http://jimdavis.org/celtic/fadetest.php
If you view the source code you will see that I repeat the jQuery
function for each menu item. Since this nav menu will have about 10
items I want to change the script to use an array to minimize the
code. What needs to be changed to use an array?
Jim
[jQuery] Re: cross domain XML with ajax
http://www.phpfour.com/blog/2008/03/06/cross-domain-ajax-using-php/
?php
/**
* Transport for Cross-domain AJAX calls
*
* This is an implementation of a transport channel for utilizing
cross-domain
* AJAX calls. This script is passed the data through AJAX along with
two special
* hidden field containing the action URL and the http method
(GET/POST). It then
* sends the form fields to that URL and returns the response.
*
* @packageCrossDomainAjax
* @categoryCURL
* @authorMd Emran Hasan [EMAIL PROTECTED]
* @linkhttp://www.phpfour.com
*/
// The actual form action
$action = $_REQUEST['url'];
// Submission method
$method = $_REQUEST['method'];
// Query string
$fields = '';
// Prepare the fields for query string, don't include the action URL OR
method
if (count($_REQUEST) 2)
{
foreach ($_REQUEST as $key = $value)
{
if ($key != 'url' || $key != 'method')
{
$fields .= $key . '=' . rawurlencode($value) . '';
}
}
}
// Strip the last comma
$fields = substr($fields, 0, strlen($fields) - 1);
// Initiate cURL
$ch = curl_init();
// Do we need to POST of GET ?
if (strtoupper($method) == 'POST')
{
curl_setopt($ch, CURLOPT_URL, $action);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $fields);
}
else
{
curl_setopt($ch, CURLOPT_URL, $action . '?' . $fields);
}
// Follow redirects and return the transfer
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
// Get result and close cURL
$result = curl_exec($ch);
curl_close($ch);
// Return the response
echo $result;
?
philosaur wrote:
Hi!
I'm writing an OGC/WMS Viewer using jQuery. One task I need to
accomplish involves making a getCapabilities request against a Web
Mapping Service, which responds with some XML.
I know that the $.ajax function allows me to get JSON from another
domain, but is there a way to get XML from another domain? I've tried
various permutations of data types, and the $.ajax call with the
jsonp call gets closest--it returns the XML, but since it's not true
JSON, the browser complains.
Is my only option to use a proxy web service to access the XML?
Thanks!
[jQuery] Re: Remove comment script
johhnnyboy wrote: Hello, Im looking for a jquery script that allowes removing comments (which are placed in divs) for the site with an animation and then removes it also from my database. Something similar to hyves comments system. that's a bunch of things working together... jquery would only be a small part of it. you'd need to start with a database definition of the comments tables. your comments-page output would identify each comment with id='db_comment_id', so that jquery can remove it with an animation (which animation, exactly?). after removing it from the DOM, jquery would call a php script that removes db_comment_id from the database. that's the gist of it, but you need to post the db definition if you want help with the php scripts for display and removal.
[jQuery] Re: General JavaScript opitmization question
i usually use the first method you described; a global var maintained by
2 functions, start and stop.
the other way is too complicated imo :)
AdamV wrote:
I'm writing an AJAXy application and when I start doing an ajax call,
I want to block the UI and show a loading graphic until the loading is
done. For various reasons, a number of different functions might
initiate a load and a number might signal its end, and in a particular
sequence two such functions might be called during one ajax load
event.
As I was thinking about opimizing JavaScript anyways, I figured I see
if anyone has any thoughts about optimizing the general situation
where you have a start function that might be called once its
started and a stop function that might be called when nothing is
currently running.
The trivial way to write this would be:
var running=false;
function do_start() {
if (running) return;
running = true;
// Do stuff;
}
function do_stop() {
if(!running) return;
running = false;
// Do stuff;
}
However, the following would also work:
function nullFunct() {};
function startFunct() {
// Do Stuf;
do_stop = stopFunct;
do_start = nullFunct;
}
function stopFunct() {
// Do Stuf;
do_stop = nullFunct;
do_start = startFunct;
}
var do_start = startFunct, do_stop=nullFunct;
Does anyone have any thoughts about taking either approach? I would
suspect that the later approach gets more useful as the test for
should we allow stuff to happen here gets ore complicated than I've
shown.
Adam
[jQuery] Re: Traversing table
put valid id's on all relevant tags, then reference by id? On Mon, Sep 8, 2008 at 10:38 PM, Jayzon [EMAIL PROTECTED] wrote: Hi! I've got a table with multiple rows which I'd like to traverse in a special way - here's the html (for better reading, I just included two rows, these rows are duplicated with different values): tbody tr class=pricing tdExample A/td tdspan class=price1,20/span euro;/td tdspan class=price2,40/span euro;/td /tr tr class=calc tdCalculator/td tdinput /span class=result0,00/span euro;/td tdinput /span class=result0,00/span euro;/td /tr /tbody What I'd like to do: If an input filed is focussed, a price should be calculated. To keep the script as efficient as possible, I want to travel up from the input field to the cell above it (i.e. one row up, second or third cell in that row). My problem is: How can I traverse the DOM in this way? I imagine the following: The script should know where the starting point was (second or third cell in row) and then get the corresponding cell. I'm sure this is possible, but I have no idea how to achieve it. If I get the DOM traversing right, I want to get the value of span.price to calculate the input with it update the result in - yes, span.result ;-) I'm sure this is a pretty easy thing to achieve for people how know jQuery well - I unfortunately don't (yet!). Could someone please explain this? Thanks for your effort! Markus
[jQuery] Re: How do I access the function handlers of an event.
eh, i just realized that the click() of jquery might trigger in another way
than setting the DOM element onclick property... you'll just have to try it
;)
On Sat, Sep 6, 2008 at 2:10 PM, Rene Veerman [EMAIL PROTECTED] wrote:
$('#myid')[0].onclick
to call:
$('#myid')[0].onclick()
DOM element property, not jQuery method.
(again!) ;)
On Fri, Sep 5, 2008 at 8:36 AM, Drew LeSueur [EMAIL PROTECTED] wrote:
$('#myid').click() will trigger the click event;
and
$('myid').click(function(){alert('clicked');}); will bind that
function to the click event
but how do I return the function that would be called when $('#myid')
is clicked? (note: return, not call)
Thank you,
[jQuery] Re: Calculating the size of a string to make it fit into the whole window
might be easier to put a very long string in a div, then set overflow:hidden for that div. but the height and width of the div are div.offsetHeight and div.offsetWidth; they're DOM element properties, not jQuery methods. they're always in an integer number representing pixels. so if you want the height and width of any string just put it alone in a div and take those properties. On Fri, Sep 5, 2008 at 2:02 PM, marcus [EMAIL PROTECTED] wrote: Hi, I have a div into which I want to load a string. The div has height and width 100% - the whole window - and I want the string to fill the whole div/window. (And when the window size changes the string's size changes, too.) Can someone tell me if jQuery can help me here to calculate the height of the string in pixel and how?
[jQuery] Re: return on error - how to handle an error when an address is not returned in jmaps
doesnt jmaps throw some kind of error (or err return val) when it can't find
the address?
to put markup for your webapp inside jmaps is bad code design, so dont do it
unless you absolutely have to. re-read the jmaps docs.
On Fri, Sep 5, 2008 at 3:48 PM, pedalpete [EMAIL PROTECTED] wrote:
I've been using the jmaps plugin for a bit, and I added a bit of code
to it so that when an address is not found, it writes a message to the
user.
I now have a situation where there are two different locations on the
page where the message might be written to, depending on what the user
has done (did they select an address? or did they search for an
address?).
I've been trying to launch a function from the plugin, but I keep
getting 'function not found errors', and I've tried returning a null
value, or testing for a null value, but that hasn't worked either.
Any ideas on this would be appreciated.
The change I've made to the plugin is simply
[code]
if(!F){
$('.searchHolder').html('span class=holdError/spancenterThe
address could not be found. Enter a new address to search/center/
span');
return;
}
[/code]
where F is I guess the response from google, but then the jmaps plugin
does a bunch of stuff with the response.
but now I want to do something like
if search then write to searchHolder
if clicked address, write to address item
I hope there is a simple way to do this,
Pete
[jQuery] Re: Meta tag Keyword Upgrade with jQuery
On Thu, Sep 4, 2008 at 7:40 PM, [EMAIL PROTECTED] wrote: Dear Folk, I've developed a website with ajax capabilities and bookmarkable supports history, I would like to give a specefic Meta tag to each page ... what is the solution ? there is two thing in my mind 1- upgrade the meta tag with jQuery when each pages loads ... for example $(meta[name=keywords]).attr(content,a,b,c,d); but as you all know when the page loads meta tag is something else after that with ajax will be upgrade so I think this may cause some problem in search engins exactly, searchengines wont see it. 2- load another meta tag in the page nope. the same goes for the title tag, also important in search engine optimization; you need to call a getPageInfo() function in your php with the same parameters as you call your content generation with. It depends on how you seperate your functions to generate different pages. In my CMS, i have a central function that directs traffic based on GET parameters to different php files containing what's needed to output that particular (type of) page. So i use the same parameters in getPageInfo(), but instead of calling the php file to generate content, i call a php file with a similar name (something__pageInfo.php) that contains only the getPageInfo($same, $parameters) function. At the central point where i generate my head, i call getPageInfo ($same, $parameters) and insert the right tags for that page. and this might cause two meta tag in a single page ... consider there is shopping cart in the web and when each of the Products nloads the title of the page changes and their own meta tag came in so does anyone have any idea on this matter at the end I aim is for me to make my page reachable in search engines as google and Yahoo Kind Regards Pedram
[jQuery] Re: Prevent IE Cross Page Leak
the jquery dom manipulation routines are not to be over-used.
instead of zillions of calls to jquery, you should prepare a html statement
as a string;
var html = '';
html += 'div id=something';
html += 'somethingElse';
html += '/div';
to prevent IE mem leaks, i read to do this:
var div = document.createElement (DIV);
$(div).css ({ display:none });
document.body.appendChild (div);
div.innerHTML = html;
document.body.removeChild(div);
$(div).css ({ finalizedCSS });
$(parent)[0].appendChild (div);
2008/9/4 Jacky [EMAIL PROTECTED]
Hi all,
I have some question about IE memory leakage.
There are four type of leakage in IE as stated in
http://msdn.microsoft.com/en-us/library/bb250448(VS.85).aspxhttp://msdn.microsoft.com/en-us/library/bb250448%28VS.85%29.aspxOne
of them is called 'Cross Page Leak', which is caused by DOM insertion
order. (should have no intermediate object)
The result is that the memory will not be released even if page is changed.
So, will the following code introduce this kind of leakage?
$('div')
.append('pSome text/p')
.append($('div/').append('abcdef'))
//more append to create the complex dom objects
//.
.appendTo(body);
My case is quite serious. I have a page with some modals displaying some
small search box the ajax way.
Whenever a modal is displayed, about 10MB of memory is consumed and it
never returns.
--
Best Regards,
Jacky
網絡暴民 http://jacky.seezone.net
[jQuery] Re: Finding next/prev node
any DOM element has a property called nextSibling, which points to the
very next DOM element, text/html/whatever.
var ns = $('#search')[0].nextSibling;
var ns = document.getElementById ('search').nextSibling;
On Tue, Sep 2, 2008 at 4:43 PM, Finding_Zion [EMAIL PROTECTED]wrote:
I need to have a way to find the next/prev node, be it a sibling,
child, or text node. For example:
code
p
(1) Some simple text span class='nextTextNode'that/span's
special.
(2) And find next Sibling span class='nextSibling'sib1/
spanspansib2/span
(3) Finally a child node span
class='nextChildNode'Parentspan class='childNode'Child/span/
span
/p
/code
It isn't hard to get these options if you knew what you were
selecting, but in my case users will be selecting the html and it
could be anything. Is there anyway to find the very next node?
My current thought process, is to get the p tag in this example and
pull the contents into an array. But I don't think this is very
efficient.
A proof of concept is the following code, I would think I'd need to
make this a recursive function, but I don't think this is the right
approach.
$('p').contents().each(function(){
if(this.nodeType == 1){// recursive would occur here
$(this).contents().each(function(){
console.log(this);
});
}
else{
console.log(this);
}
})
Any suggestions that can point me in the right direction would be very
helpful.
Jeremy
[jQuery] Re: Determine if a Javascript has loaded?
if the weather widget creates a javascript object in the js namespace, you
can test for that when the page has loaded. you can even try to
re-initialize the weather widget if it fails the first time (but that would
take some doing).
you'd need to include the weather widget in the head of your target page.
and assume that the weather widget makes the global js var weatherWidget
available.
you could try this;
head
script language='JavaScript1.3' type='text/javascript' src='
http://somehost.com/widgets/weather_widget.js'/script
script language='JavaScript1.3' type='text/javascript'
!--
window.onload = function () {
//call previous window.onload statements here
var scriptSrc = 'http://somehost.com/widgets/weather_widget.js';
if (!weatherWidget) {
var scriptsInHead =
$('script',document.getElementsByTagName(head)[0]);
var found = false;
for (var j=0; jscriptsInHead.length (!found); j++) {
if (scriptsInHead[j].src == scriptSrc) found = j;
}
var e = document.createElement(script);
e.type=text/javascript;
e.language='JavaScript';
e.src = scriptSrc;
if (found===false) {
if (console) console.log (appending +e.src+ to HEAD.);
__htmlHead.appendChild(e);
} else {
if (console) console.log (removing then re-adding +e.src+
to HEAD.);
scriptsInHead[found].parentNode.removeChild
(scriptsInHead[found]);
__htmlHead.appendChild (e);
}
} else {
//optional:
weatherWidget.initialize();
}
setTimeout (window.onload, 300); //retry in 300 milliseconds
}
--
/script
/head
On Sat, Sep 6, 2008 at 4:20 AM, bcbounders [EMAIL PROTECTED] wrote:
OK... I'm new to jQuery (and not much of a JS programmer), so be
gentle with me! :D
I have a site that's using a Javascript to embed a small weather
widget (it's from weather.ibegin.com). The problem is that my client
REALLY likes the look of the iBegin weather widget, but iBegin hasn't
been that reliable... so sometimes NOTHING shows.
I'd really love to be able to use jQuery to determine if the
Javascript has successfully loaded the weather and display it if it
has... but display a static image if the weather didn't load.
Is this possible? And, if so, how would I go about doing that?
Thanks a lot!
- John
[jQuery] Re: multiple getJSON calls appear to wait for first response to run any callbacks in FF?
don't wait for any response, just poll an array of 'open' responses and handle whichever are ready? On Thu, Sep 4, 2008 at 3:13 PM, Josh Rosenthal [EMAIL PROTECTED] wrote: Hey all, I'm building a google map based application which allows users to query a number of different json returning data lookup services (ie: get Tax Parcel for this coordinate... get address, get USGS Quad Name, get Place Name). Each service is activated by clicking a different button, etc. While some of these queries run pretty fast, others (parcels), take ~ 30-40 seconds. Working in Firefox 3, I've found that once a user runs the slow getJSON, none of the other queries will run their callback, until that slow getJSON finishes. However, when I watch in firebug, I can see that we've actually queried and gotten a valid, wrapped response, and we're just waiting to process it. Basically, the jsonp calls may be asynchronous, but we get a bottleneck where we're waiting for the response to one jsonp call, but already get the answer to another, and yet have to wait til the first returns in order to do our second callback. IE7 appears to display more correct behaviour, with the callbacks firing in the order that responses are received. Any suggestions as to how to get FF3 to behave similarly? -Josh
[jQuery] Re: How do I access the function handlers of an event.
$('#myid')[0].onclick
to call:
$('#myid')[0].onclick()
DOM element property, not jQuery method.
(again!) ;)
On Fri, Sep 5, 2008 at 8:36 AM, Drew LeSueur [EMAIL PROTECTED] wrote:
$('#myid').click() will trigger the click event;
and
$('myid').click(function(){alert('clicked');}); will bind that
function to the click event
but how do I return the function that would be called when $('#myid')
is clicked? (note: return, not call)
Thank you,
[jQuery] Re: How to do something using JQuery
try this;
[number] is either the SQL row ID of the name (good), or an arbitrary index
(less good).
1) each checkbox gets a html id 'name_[number]_cb'
2) each name gets a html id 'name_[number]_label'
3) each circle gets a html id 'name_[number]_button'
4) each circle gets a html onclick='yournamespace.showInfoForName(this,
event)'
then load this js:
var yournamespace = {
showInfoForName : function (element, event) {
//some vars that you need to intialize;
var parent = $('table#names')[0]; //set only to parent table or
div of names-list.
//create the view
var view = document.createElement (DIV);
view.id = element.id+'_view';
view.className = 'namesInputView'; //style layout with CSS
$(view).css ({
visibility : 'visible',
display : none, //override: dont display anything yet
position: 'absolute',
width : '400px', //desired size, change if u want
height : '300px'
})
document.body.appendChild (view);//add it to the DOM somewhere
to prevent IE mem leaks
var viewHTML = '';
viewHTML += 'some INPUT fields and makeup';
view.innerHTML = viewHTML;
//take the size of the view in case contents doesnt fit in it
viewWidth = view.offsetWidth;
viewHeight = view.offsetHeight;
//figure out where to put the view
var t = 0, l = 0, e = element;
while (e!=parent) {
t += e.offsetTop;
l += e.offsetLeft;
e = e.offsetParent;
};
//optional: adjust t and l if the view is out of view (near edges of
browser)
//figure this one out 4 yourself.
//move view to where it belongs in DOM
document.body.removeChild (view);
$(view).css ({
display: 'none',
overflow: 'hidden',
top : t+'px',
left : l+'px',
height : viewHeight+'px', //make sure everything is in view. at
desired size you specify the desired width, height is adjusted to whats
needed.
zIndex: 99
});
parent.appendChild (view);
$(view).fadeIn (700); //700 milliseconds
}
};
On Fri, Sep 5, 2008 at 9:51 PM, SEMMatt2 [EMAIL PROTECTED] wrote:
Hello,
I am fairly new to JQuery but it's so nice and simple to use that as
soon as I have some direction I can take it from there. So, my
question is, can anyone direct me regarding this project:
I have a list of names (maybe a few hundred). Each name will have a
checkbox next to it. After clicking on a little circle press down
(forget what there called...) a box should slide open or come up right
next to the name that let's a user enter in some information (it's
about the name that they selected). Once they enter the information,
the box slides back into place. Then, the user scrolls down to the
bottom of the page and clicks submit. Everything gets submitted
(checked boxes and the more information).
Thoughts...how would I use Jquery to accomplish this?
Thanks,
Matt
[jQuery] Re: I must be missing something simple...
http://www.learningjquery.com/2006/09/introducing-document-ready
On Fri, Sep 5, 2008 at 4:29 PM, Jim Buzbee [EMAIL PROTECTED] wrote:
I've got some jQuery code that seems to work fine in Safari and
Firefox both under OSX and Windows. But I've been beating my head
against the wall trying to get the same code running under IE7. I
must be missing something :-( I'm a novice at javascript and jQuery.
The following is a much abbreviated and simplified version. Under IE,
the alert function in the loop below comes up with Color: each time
as if the find seems to be returning null. Does anyone have a
suggestion?
The same code can be found online at:
http://batbox.org/bh.html
Thanks,
Jim Buzbee
...
script type=text/javascript src=jquery-1.2.6.min.js/script
script type=text/javascript
jQuery(function()
{
var xml = jQuery( 'span itemcolorWhite/color/item' +
' itemcolorBlack/
color/item' +
'/span' );
$(xml).find(item).each(function()
{
alert('Color: ' + $(this).find(color).text() );
});
});
/script
...
[jQuery] need to display a number of items based on browser size, before i get to run any js
Hi. Today, i've got a chicken-and-egg puzzle for your enjoyment :) In order to properly support google indexing of published content hosted by my CMS', which scales to browser-size, no matter what it is initially or how the user resizes it. Adding meta info for the many pictures hosted via my CMS would greatly increase natural search results. In order to get them indexed, i need to provide google with URLs that contain the complete page's content. Pictures and their descriptions included. How many thumbnails get displayed is therefore dependent on (initial) browser-size. So I need to know the browser size in the _initial_ php call to my site. To my knowledge, that's impossible. And besides, google (my target audience for all of this) doesnt execute JS, so i'll have to choose a browsersize for the user when he comes in no matter what. I've come up with this workaround that i'd like your comments and potential improvements on. In the html of some page that is crawled, i have a link that's sorta like this: http://mediabeez.ws/mediaBeez/ clink.php?cmd=desktopmodule=ajaxaction=viewCollectiontarget=misc This should call up a page with a photo-album. Currently, to get smoother loading graphic-performance, i split up the rendering of the desktop that holds the photo-album, and the actual photo-album content. First the desktop (and worker-JS-libs) would be properly loaded and displayed, then a loading icon displayed in the photo album, and then the contents of the photo-album loaded. This mechanism is currently used on the link above. The best solution i can come up with till now is to pre-load IMGs and descriptions for a desktop 1024x768 in size, then on running of the photoalbum js either remove some images or (if i have too few) call my render_album_contents() again via AJAX with the proper desktop size. With google analytics i could see what browsersize gets used most, and set the default to that, to reduce double-calls to the kinda-expensive render_album_contents() which calls up much meta-info related to the pictures. The main problem i see with this approach is for pagination. The initial link for the 'next page' button should be a static one per default browsersize (for google's indexing) but on running it this should change back to a JS call that takes that particular users' browser size in account. I guess that could be achieved with the photo-album js changing the link at pageLoad(), but it could be tricky. What i'd like to know from you is if you can see any other way to achieve google-indexing of all pages of a photo-album that resizes to browser size..
[jQuery] Re: Can't get css png fix plugin to work....
did you initialize the script after loading it? On Fri, Aug 22, 2008 at 8:06 PM, Aaron [EMAIL PROTECTED] wrote: Hi I just tried getting the plugin for jquery it's called cssPNGfix it's supposed to fix the problems with IE for tranparent png files. any suggestions how to get this to work?? I included the jquery main file and also the fix javascript. I don't understand if it needs/depends on any other scripts??
[jQuery] Re: scrollpane and UI Dialog window
I've had to tweak jscrollpane aswell to get it to work properly (on resizing a dialog). Sometimes you have to nudge the DOM back to something that works with jscrollpane. On Fri, Aug 22, 2008 at 9:09 AM, Toccamonium [EMAIL PROTECTED] wrote: Hi, onclick we open the UI Dialog window for detail information. In the window we have the UI Tab and into them content wrapped by the scrollpane plugin. When you open the dialog the first time everything works fine. But if you open it again the scrollpane hides the content as it's writing height: 0px as inline style to the class. Any idea why this happens and what can I do to reinitialize the scrollbar or is there another solution? thanks T.C.
[jQuery] Re: jscrollpane and tab key
yep i've had this problem and came up with a solution, but it requires some
tweaking;
call the following code whenever the view is resized or focus is changed -
you'll have to hook the onblur handler of your input elements and set
__self.focussedElement to it; theres no DOM way that i found to do this
var mw = scrollArea.offsetWidth
var mh = scrollArea.offsetHeight
var $scroller = $('#scroller.jScrollPane', __self.html);
var t = parseInt($('#scroller.jScrollPane',
__self.html).get(0).style.top);
$scroller.jScrollPane({showArrows:true, scrollbarWidth: 15,
arrowSize: 16});
var $container = $('.jScrollPaneContainer', __self.html);
$container.css ({ width : (mw - 1) + 'px', height : (mh-2)+'px'
});
if (__self.focussedElement) {
var e = __self.focussedElement.offsetParent, tt=0;
while (!jQuery(e).is('#scroller.jScrollPane')) {
tt -= e.offsetTop;
//mb.reportToDebugger
(e.tagName+'#'+e.id+'.'+e.className+'='+e.offsetTop+'
== '+t);
e = e.offsetParent;
}
if (ttt) t=tt;
}
if ($container[0].scrollTop0) {
t -= ($container[0].scrollTop + 10);
$container[0].scrollTop = 0;
};
$scroller.css ({ width : (mw - 15 - 10)+'px', height:
(mh-2)+'px'});
if ($scroller[0].scrollTo) {
$scroller[0].scrollTo (-1*t);
};
$('.jScrollPaneTrack', __self.html).css ({ height : (mh-34)+'px'
});
On Fri, Aug 22, 2008 at 2:32 PM, jscharf [EMAIL PROTECTED] wrote:
hello,
i got a problem while loading a form into a container using
jscrollpane to handle overflow.
First time it's loaded jscollpane reacts like it should do, but if u
use the tab key to go through inputs and textfields, jscrollpane
disappears if the form is much more longer than the div container.
does anyone of you have/had the same problem and a solution for this
issue?
Please help me, thnx in advance
[jQuery] Re: Script Wouldn't Work After Content Reloaded
you need to re-initialize the click handler if you replace the element it
was referring to.
On Fri, Aug 22, 2008 at 8:44 PM, SHiDi [EMAIL PROTECTED] wrote:
Hi all.
I've tried to reload a content using jQuery.post. However, it seems
that once the content is reloaded, the script didn't work the way it
supposed to.
My jQuery script is:
$(.click).click(function() {
alert('Hello World');
$.post('actions.php',
{},
function(data) {
$(#new).html(data);
});
});
Content for actions.php:
echo 'a href=# class=clickClick Me Again/a';
As for the HTML:
div id=new
a href=# class=clickClick Me/a
/div
On first click, the script will work. But once the content reloaded,
it's no longer work. Any idea why?
Thanks in advanced :)
[jQuery] Re: Background image
something like http://mediabeez.ws?
On Wed, Aug 20, 2008 at 11:56 AM, dinadult [EMAIL PROTECTED] wrote:
Gud day to all of you..im doing this site since last wk..im already
finished except for this one,i want my content over the background
images..i try to play this around and surf the net to see if there are
designers doing these one..
hope someone can help me..sorry for my english grammar..
or do you know any ideas or codes that i can do background image
gallery (fade in and fade out transition)
html
head
script type=text/javascript src=js/jquery.js/script
script type=text/javascript
src=js/jquery.innerfade.js/
script
script type=text/javascript
$(document).ready(
function(){
$('#container').innerfade({
speed: 1000,
timeout: 1000,
type: 'sequence',
});
});
/script
style type=text/css
body { width:100%; max-width:1600px; margin-left:auto; margin-
right:auto; max-height:1000px;font-family: Tahoma, Arial, Helvetica,
sans-serif; font-size:12px; color:#00; text-align:justify;
overflow:hidden;}
.one { background:#FF url(1.jpg) no-repeat; width:100%; max-
width:1600px; height:1000px; }
.two { background:#FF url(2.jpg) no-repeat; width:100%; max-
width:1600px; height:1000px;}
.three { background:#FF url(3.jpg) no-repeat; width:100%; max-
width:1600px; height:1000px; }
/style
/head
body
div id=container
div class=one/div
div class=two/div
div class=three/div
/div
div id=asdasdasdadas/div
/body
/html
[jQuery] jQuery.ajax():success(data) - data truncated on IE, not FF, when using gzip
Hi.
There seems to be a problem with IE reading gzipped content.
If on the PHP end i gzip the data, my data var in success() of
jQuery.ajax({}) is truncated and thus unusable.
If i dont use gzip then all is fine, i get the full data.
Has anyone else experience with IE barfing on gzipped content?
Is there a workaround so i can use gzip for IE?
[jQuery] Re: Hide DOM when clicking outside it? (Newbie Question)
Possibly. Please show us the code / an example.. On Thu, Jul 17, 2008 at 7:41 PM, Doover [EMAIL PROTECTED] wrote: I have a simple menu which are shown when you click on a link. Is it possible to hide the menu when I click outside it? Any help are appreciated. Thanks.
[jQuery] Re: Feedback for new plugin idea: ui.querybuilder
I like the idea for this plugin, but fear it might be hard to use once done. Searches can be about anything. How does the UI know what graphics to display for a criterion? How do you plan to communicate a search-query to the server? And what kind of results-display do you propose? On Fri, Jul 18, 2008 at 5:11 PM, Keith Hughitt [EMAIL PROTECTED] wrote: Hi all, I've started designing a jQuery UI plugin for building complex search queries in a visual fashion, and wanted to see what people though, or if people had any suggestions. Once the plugin is finished, anyone is welcome to use it of course. I also posted this message in the jQuery UI group, but I thought I'd post it here as well for those who aren't members of the UI group. I. Overview The goal of the plugin is to create a UI component for piecing together complex multi-component search queries and a simple and visual way. The plugin will allow the user to select some set of desired search criterion, and then when then submit a query when ready (the rest of the logic thereafter is out of the realm of this plugin, and will be handled by the developer). To handle this, the plugin will be broken into three components: Inactive, active, and current search criterion. The inactive and active criterion are lists of criterion (will come back to exactly what these are later) that either have or have not been applied, and the current search criterion is a single criterion currently in focus. Although the Developer will have control over where these various components sit, one simple setup would be to have a single container split horizontally into the three components: (See Gimp mock-up at http://i61.photobucket.com/albums/h78/hughitt1/uiquerybuilderannotated.png ) II. Use case: 1. When the application initially loads, and the inactive search criterion section is populated with a list of criterion the user can use to search by. The current section displays a single search criterion (the most useful one to begin with), possibly with thumbnails for each choice. The inactive section is empty to begin with. 2. The user clicks option 2 and the filter moves from current - active (possibly with some animation), and a new filter from the inactive section moves to current. 3. User selects again and there are now two active search criterion. The current search criterion isn't something the user cares about so they click on one of the other inactive filters and it is swapped with the current one. 4. This process continues until the user is satisfied with the chosen parameters. The inactive list may be updated dynamically with new search criterion that are relevant to some criterion already chosen. 5. (Optionally) If the developer has access to a method that returns only the *number* of results for a given query, then this value can be queried each time the user adjusts the query and displayed on screen. 6. The user hits search and some function provided by the developer pieces together the active search criterion to produce and query string and sends it off. III. Some useful methods to have: addCriterion removeCriterion activateCriterion deactivateCriterion swapCurrent updateAvailableCriterion updateNumResults submitQuery Event handlers could be available for each action (adding, removing, swapping, etc.) to give the developer further control. IV. How to represent a search criterion? There are many different ways you could handle this. While I would like the keep the plugin very general, and make as few assumptions as possible, I also want the plugin to handle most of the work. So far, what I'm thinking would be best would be to pass around SearchCriterion objects which have the following properties: name: int type : string description: string choices: array selected: (int, string, date, etc). priority: int requires: array provides: array I don't know if I will implement all of these, but using this structure will make things pretty straight-forward for the plugin. -name would act as both a display name for the search criterion, and possibly also as a unique ID. -type would allow specifying what to display when the filter is the current one displayed: text only, thumbnails and text, a datepicker, or a daterange picker. - description: for tooltips - choices: available choices to display (special case: dates and date ranges) - selected: when active, this will hold the value the user selected. - priority: can be set to give some search criterion priority over others for when to be displayed (0 being the initial criterion to display under current. - requires (optional) Names of other criterion required for this one to be used - provides (optional) If present criterion becomes active, add these to the list of inactive. E.g. If the user choses Automobile, add the search criterion Number of Wheels. to the list. V. Conclusion There are still some details
[jQuery] Re: jScrollPane with jQuery 1.2.6
Yep, although i had to tweak it a bit.. On Mon, Jul 14, 2008 at 8:47 AM, samer [EMAIL PROTECTED] wrote: does jScrollPane work with jQuery 1.2.6 It's been acting weird ever since I upgraded it today, my previous version 1.2.1 of jQuery
[jQuery] Re: Replacing elements when validate successful
Try including the submithandler in the first call to validate(), like so:
$(#register).validate({
highlight: function(element, errorClass) {
$(element).addClass(errorClass
);
$(element.form).find(label[for= + element.id +
]).addClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
$(element.form).find(label[for= +
element.id+]).removeClass(errorClass);
},
submitHandler: function(form) {
$('#SubmitFormBtn').style
.display = 'none';
$('#PleaseWait').style.display = 'inline';
form.submit();
}
});
On Sat, Jun 21, 2008 at 1:07 PM, LVR [EMAIL PROTECTED] wrote:
I'm using the 'Validate' plugin for simple form validation - using
'highlight' and 'unhighlight'. That part is working (though sometimes
the label elements disappear totally - but that's another issue).
What I'm trying to accomplish is this: When the form is valid, I want
to replace the submit button with an animated gif while the form is
submitting. From what I've read, I need a submitHandler. I'm a
novice at js and even more so with jQuery. Can anyone tell me what's
wrong with this code?
$(document).ready(function(){
$(#register).validate({
highlight: function(element, errorClass) {
$(element).addClass(errorClass);
$(element.form).find(label[for= + element.id +
]).addClass(errorClass);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
$(element.form).find(label[for= + element.id +
]).removeClass(errorClass);
}
});
$(#register).validate({
submitHandler: function(form) {
$('#SubmitFormBtn').style.display = 'none';
$('#PleaseWait').style.display = 'inline';
form.submit();
}
});
});
Thanks!
...LV
[jQuery] Re: Binding Event to Dynamically Created Element (works in FF but not in IE)
I'm missing the appendChild() method in loadElements()
On Sat, Jun 21, 2008 at 10:22 AM, MysteryNerd [EMAIL PROTECTED] wrote:
I'm in the process of converting standard javascript code to jQuery,
it has already save tons of lines of code and make it more
manageable. I'm a bit stumped to why this works in FF and not in IE
using jQuery bind.
-- Snippets --
var BigBox = {
init : function () {
...
this.loadElements();
...
$('.bigbox_li').bind(dbclick, function(e) {$
(this).addClass(bigbox_li_active)});
},
loadElements : function() {
...
var li = document.createElement(li);
li.setAttribute( id, li_ + this.nextCount); // nextCount
ensure uniqueness
li.setAttribute( class, bigbox_li);
...
}
}
I did check the DOM in IE using IE Developer toolbar, it does have the
class bigbox_li) associated with the li html element.
Any help would be great! Spend a few hours on this already!
[jQuery] Re: Firefox is taking a long time to load an external script
how do you load it? On Thu, Jun 19, 2008 at 5:59 PM, cfdvlpr [EMAIL PROTECTED] wrote: For some reason, Firefox consistently takes about 30-40 seconds to load an external script. IE loads the script right away. The javascript is actually a JSP script that returns Javascript code for a live chat script. Has anyone noticed something like this before? Why might this delay occur only with Firefox? Is there anything that can be done about it? One workaround that I've thought of is to try and load that script last so at least the user doesn't have to wait for that script to load before all the rest of the page loads. Can jQuery help me here?
[jQuery] ajax: refering back to {data:}
Hi. When an jQuery.ajax({}) request completes, the success handler fires and
i am returned the ajax jquery object.
But the 'data' member is always url-encoded, the individual members of
'data' are no longer accessible without manual de-url-coding.
Is this intentional? I need my hands back on all those 'data' variables,
individually, after a request completes.
I suppose i can hack something but i'd rather stay on standard source.
[jQuery] weird DOM/JQ error; elements do not get added/animated
I've got bit of a firefox mystery here: My photo-album component animates when browsing to the next page, see http://mediabeez.veerman.ws/mediaBeez/ and press the 'next' button (thats the one on the right) on the photoalbum you view on that homepage. You have to use firefox to test this properly, IE wont perform one of the functions in the chain (yet). If you're using a browser debugger you'll encounter a debugger stop when you press the next button; just run past it for now. The bug occurs when you click on one of the images, then use the 'back' function of your browser to go to the front-page again. There's a debugger stop (for your convenience) at the start of the code that re-inserts the 'previous page' html into the DOM. I believe that that code works correctly. Then, when you click the 'next' button, the debugger stop activates but the code around that stop doesnt do anything. I was wondering why, and havent been able to figure it out after two days.. Maybe you have a clue that helps ;) I did notice that firebug's HTML view doesn't show the node (s2) being added to .mbCollectionContent, but when you view it's childnodes collection in it's 'watch variable', it IS added.. i don't get it..
[jQuery] Re: ie still stalling at html rewrite
I'd like to see how you call up the jquery code.. Did you try inserting an alert() at the top of your jquery statements? On Tue, Apr 22, 2008 at 7:00 PM, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: I hope someone more experienced can tell me where I'm going wrong with this? I have PHP generate the jQuery for an .html() rewrite of links, replacing the less-jazzy non-javascript show/hide alternative. It works like a charm in FF, but ie refuses at this point will not go any further. The error occurs, apparently at this point in jQuery source: (elem,select)))return;if(elem[0]==undefined|| jQuery.nodeName(elem,form)||elem.options)ret.push(elem);else but I don't know what that means! My generated code: $( 'h2.product1' ).html( 'a href=#productID class=openProduct name/a' ); $( '#productID' ).css( 'margin-top', '0px;' ); $( '#productID .close' ).html( 'a href=#productID class=closeimg src=images/close.jpg alt=Close title=Close / /a' ); In fact, IE doesn't even write in the new h2 data. It stops processing all Javascript at that point. I thought this post, regarding ie's dislike of jQuery's .html() method, was the answer: http://groups.google.com/group/jquery-en/browse_frm/thread/fea89caebdbb8453# but it doesn't help :( After so long tugging away at this, I'm hoping it's due to one of my elementary errors!! So please tell me where I'm wrong :) Thanks, Cherry
[jQuery] Re: IE debugging advice, please
Besides using a stub for console.log and alert()s in many simple debugging cases, i also use: Microsoft script debugger - general debugger. will work fine with non-minified source code. must be enabled in advanced options of IE http://www.microsoft.com/Downloads/details.aspx?familyid=2F465BE0-94FD-4569-B3C4-DFFDF19CCD99displaylang=en DP_Debug - print out complex variables in a seperate window http://www.depressedpress.com/Content/Development/JavaScript/Extensions/DP_DeBug/Index.cfm
[jQuery] Re: should be using .find . . .
show us the source :) On Mon, Apr 21, 2008 at 7:22 AM, hubbs [EMAIL PROTECTED] wrote: Sorry, not sure how I started a new topic... I am trying to use the ajax POST and GET function, and at the same time, use .find to filter the results so I only return a div with a specific ID. I have tried, and I am failing to get it working. Any help would be great! On Apr 20, 10:20 pm, hubbs [EMAIL PROTECTED] wrote: Could anyone help with this? I figure that I should be using the .find function, but I am not sure how to use to to filer my response text, and only display the id that I want. The example seems to not be working, or I should be changing it somehow, and I am not sure. Anyone?
[jQuery] Re: IE debugging advice, please
I forgot my latest clue-source for CSS problems: http://www.ieinspector.com/dominspector/index.html not as usefull as firebug, and not free (trialware), but usefull nonetheless.
[jQuery] ?? howto code a plugin that needs to call itself from global scope (setTimeout())
Hi. I'm working on a lgpl-ed button animation plugin that needs a reference in the global scope, so that it can call its own functions through a setTimeout() (animations). See http://mediabeez.ws/mediaBeez/permalink.php?tag=buttonAnimated I've started by working from the datePicker plugin code, but i'm uncertain that this is the right approach afterall. DatePicker extends $.fn with quite a few functions (names preceded by dp), and then uses a second object (defined outside the jQuery scope) to implement those functions. My animations run by setTimeout(), and i use jQuery(#selfID.selfClassName).baSomeFunction to call the animation steps. Although it runs, i find the code kinda UGLY. ;) All calls have to go through a semi-complex forwarding mechanism before they end up in the implementation object. btw; the source has been released, on the url above.. Adding new functions this way is cumbersome, they have to be listed in two places, and $.fn.prototype is over-extended this way. IIRC, $.fn.prototype works on every valid jquery selector. Wouldn't it be better to only be able to call functions on selectors that have been initialized with the plugin that provides those extra methods? I suppose i could do away with the extensions to $.fn and create a custom variable in the global scope that holds a reference to the implementation object; var baAnimations = Array(); selfJQueryID = '#btnName.buttonAnimated'; baAnimations[selfJQueryID] = new buttonAnimated(); At this point, i'd just like some advice from people who have more experience / authority in jquery plugin programming. Would you recommend the 'custom variable in global scope' approach, or do you have another way to provide direct access to the implementation object from global scope? If there's some coding standard that i've missed, i'd love to hear about it now..
[jQuery] question about plugin programming
Hi. I've created a button jquery plugin that does a png animation onhover, and takes text on the button from html/dom. Although i've modelled the code after the datePicker plugin, and it works, i think i have a problem with scope. When I instantiate buttons in two different windows, a click in the first window uses settings from the second window. :( I'd like some advice on the code i've written. If there are any tutorials about jquery plugin writing that you can recommend, i'd like to read those aswell. The code can be downloaded throught http://mediabeez.ws/mediaBeez/permalink.php?tag=buttonAnimated
[jQuery] weird error in globalEval
In IE (but not in firefox) i suddenly got a 'fatal' error in globalEval;
wrong argument passed in the last line, that says head.removeChild
(script)..
In order to get things working again, i've had to make a small workaround;
globalEval: function( data ) {
data = jQuery.trim( data );
if ( data ) {
// Inspired by code by Andrea Giammarchi
//
http://webreflection.blogspot.com/2007/08/global-scope-evaluation-and-dom.html
var head = document.getElementsByTagName(head)[0] ||
document.documentElement,
script = document.createElement(script);
script.type = text/javascript;
if ( jQuery.browser.msie )
script.text = data;
else
script.appendChild( document.createTextNode( data ) );
head.appendChild( script );
try {
head.removeChild( script );
} catch (e) {
}
}
},
IE's debugger call-stack shows that the initiator to this problem was
jScrollPane;
$('#scroller.jScrollPane').jScrollPane({showArrows:true,
scrollbarWidth: 15, arrowSize: 16});
/* See http://kelvinluck.com/assets/jquery/jScrollPane/
* $Id: jScrollPane.js 4765 2008-02-17 21:14:59Z kelvinluck $
*/
So i'm moving on now, but i just thought i'd let you guys know...
Thanks again for releasing jQuery under good licenses in the first place,
using it has been a real pleasure so far :)
[jQuery] released: jQuery plugin buttonAnimated v1.0 - PNG animations onHover
I thought it would be nice to have buttons on my websites without the need for photoshopping every time i need a different text on my button. Since i would use a PNG template button to overlay text on, I added the possibility to do animations onHover.. You can check it out at http://mediabeez.ws/mediaBeez/permalink.php?tag=buttonAnimated It's a work in progress, and only a 1.0 release. There's no ability to disable a button yet, i'll add that this week. Hope you have fun with it ;)
