[jQuery] Are numerical properties/indexes supported?
Any jQuery object currently has numerical properties/indexes that store references to the DOM node elements matched in the search. (E.g., $(div)[0] is a reference to the first matched DOM node element in the search.) Can we rely on these properties remaining in jQuery indefinitely? (I haven't found reference to them in any documentation, but I suppose it could be that they are inherent to supporting other functions/ methods.)
[jQuery] Re: Are numerical properties/indexes supported?
I seem to have answered my own question here. Since the jQuery.get() method is around, and since jQuery is an array at heart, I assume it's supported. On Jan 13, 2:03 am, Dean deanpe...@gmail.com wrote: Any jQuery object currently has numerical properties/indexes that store references to the DOM node elements matched in the search. (E.g., $(div)[0] is a reference to the first matched DOM node element in the search.) Can we rely on these properties remaining in jQuery indefinitely? (I haven't found reference to them in any documentation, but I suppose it could be that they are inherent to supporting other functions/ methods.)
Re: [jQuery] keep executing the script after a few seconds
setInterval(function(){alert(hello);},9);
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
runrunforest wrote:
Say i want the alert message hello appear every 90 seconds, how can
i do it ?
--
View this message in context:
http://old.nabble.com/keep-executing-the-script-after-a-few-seconds-tp27138586s27240p27141453.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] keep executing the script after a few seconds
use jquery's timer plugin for more efficiency.
http://plugins.jquery.com/project/timers
--
http://ranacseruet.blogspot.com/
On Wed, Jan 13, 2010 at 2:50 PM, bjorsq p...@bjorsq.net wrote:
setInterval(function(){alert(hello);},9);
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
runrunforest wrote:
Say i want the alert message hello appear every 90 seconds, how can
i do it ?
--
View this message in context:
http://old.nabble.com/keep-executing-the-script-after-a-few-seconds-tp27138586s27240p27141453.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] tabs in one line, on small resolution
Your problem is more related to CSS than jquery tabs. The element containing the tabs needs to be wide enough to contain them all in one line - it sounds like your containing element's width is set to the width of the browser window, so on smaller resolutions where the window is narrower, your containing element is not wide enough to contain the tabs on one line. To ensure that all your tabs are on one line, you could: 1. Find the width of each tab using jquery, and set the container width to the sum of the tab widths (or set the container width in CSS so that it can contain them easily). This will mean that you will probably have to settle on a fixed or minimum width design which will scroll at lower resolutions. 2. Limit the size of each tab at runtime to a fraction of the width of the window. If you find you have a lot of tabs which can't fit on, say, a 1024x768 resolution, maybe you should think of using a different style of navigation. NMarcu wrote: Hello all. I'm using jquery tabs, and I have 6 tabs. On a big resolution, everithing is OK, but on 800x600, the last tab, go to second line. How can I set tabs, to remain in one line, not depending by resolution, or of the number of tabs? -- View this message in context: http://old.nabble.com/tabs-in-one-line%2C-on-small-resolution-tp27140777s27240p27141612.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: How to apply limits to an animation
Thanks Jon! On Jan 11, 4:21 pm, Jon Banner banali...@googlemail.com wrote: have a look at the jCarousel plugin - i think that should do what you need. http://sorgalla.com/jcarousel/ Jon 2010/1/9 JQNovice i...@chamonixmountainguides.com I am very new to JQuery but so far very happy with ease of use. I have created a series of thumbnails that slide as the left, right buttons are clicked: http://www.lisaauer.com/jquery_imageslide/ I want the images to slide left or right only so far that there are always images filling the slide div and then stop. i.e. no white space. Or, Create a loop of images such that they keep repeating. Any assistance appreciated. Please remember you are talking with a novice! Thanks.
[jQuery] Converting a javascript to jQuery
Hello everyone...I'm really new to jQuery..I have an urgent requirement to
convert this javascript to jQuery...So please...try to help me with this..
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;nodivs.length;no++){
if(divs[no].className=='breakbg'){
divs[no].onclick = showHideContent;
divs[no].id = 'ssdm'+divCounter;
var answer = divs[no].nextSibling;
while(answer answer.tagName!='DIV'){
answer = answer.nextSibling;
}
//divs[no].className=='ssdhead';
answer.id = 'ssds'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight +
'px';
contentDiv.className='ssdcontent';
contentDiv.id = 'ssdsc' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
function showHideContent(e,inputId)
{
if(yatrassd_slideInProgress)return;
yatrassd_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('ssds' + numericId);
var imgId = document.getElementById('arrowimg'+ numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
imgId.src='/yatra_blue-theme/images/hotel/ssdarrowdown.gif';
if(yatrassd_activeId yatrassd_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(yatrassd_activeId,(yatrassd_slideSpeed*-1));
imgId.src='/yatra_blue-theme/images/hotel/ssdarrowup.gif';
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
imgId.src='/yatra_blue-theme/images/hotel/ssdarrowup.gif';
slideContent(numericId,yatrassd_slideSpeed);
}
}else{
slideContent(numericId,(yatrassd_slideSpeed*-1));
yatrassd_activeId = false;
imgId.src='/yatra_blue-theme/images/hotel/ssdarrowdown.gif';
}
}
--
View this message in context:
http://old.nabble.com/Converting-a-javascript-to-jQuery-tp27142142s27240p27142142.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Can anyone see this issue?
Hi,
Got another weird one with crappy IE :/
function finishAjax(linkid, id, response) {
jQuery('#ajax_rate_indicator' + linkid).hide();
response = unescape(response);
/* an erorr test, in case we get an error in the div id=error
div, which didn't get caught before for some reason */
var error = jQuery(response).find('div.error').html();
var message = jQuery(response).find('div.message').html();
var regextest1 = Morate se prijaviti da bi mogli pristupiti ovome;
/* alert(test: + error);*/
if (error) {
jQuery('#'+id).html(font color=greenYour rating has been
accepted/font);
} else if (regextest1.test(response) == true) {
jQuery('#'+id).html(font color=redPlease login before you can
rate!/font);
} else {
jQuery('#'+id).html(font color=greenYour rating has been
accepted/font);
}
} //finishAjax
I get the following error - but ONLY when an error exists (i.e the
div.error bit)
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64;
Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR
3.5.30729; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.
0.0; .NET CLR 3.0.30729)
Timestamp: Wed, 13 Jan 2010 11:42:37 UTC
Message: Object doesn't support this property or method
Line: 82
Char: 10
Code: 0
URI: http://www.unreal.hr/imenik/static/ajax_rate.js
Can anyone see a mess up? It works fine in FF and Chrome, and partly
in IE8, but just not this bit. I'm getting really ticked off with IE
atm :(
TIA!
Andy
[jQuery] AJAX calls timeout
Hi,
I had a problem with an AJAX post call.
The problem was, some times it returned data, and some times it
didn't. It had nothing to do with domain server crossing, nor server
errors,
as it some times worked and some times it doesn't.
What I found was, it worked most of the times in a high bandwith
connection (enterprise bandwith). But when I tried it with low band
connections, most of
the times it did not work. The function did not receive any data from
the server.
I checked the server when it happened, and the server always did the
task and returned data. It was as if the data got lost in the
response.
Then, I configured AJAX calls using AJAXsetup to check what was the
problem. Just like this:
$.ajaxSetup({
error:function(request, error){
if(request.status == 0){
alert('You are offline!!\n Please Check
Your Network.');
}
else if(request.status == 404){
alert('Requested URL not found.');
}
else if(request.status == 500){
alert('Internal Server Error.');
}
else if(error == 'parsererror'){
alert('Error.\nParsing Request
failed.');
}
else if(error == 'timeout'){
alert('Request Time out.');
}
else{
alert('Unknow Error.
\n'+request.responseText);
}
}
});
I found I was getting timeouts from post ajax calls. So I have setted
the timeout property in AJAXsetup with a timeout value.
Now my question is, which is the default timeout jQuery AJAX calls are
using if you don't specify any timeout?
Thanks ins advanced.
[jQuery] Re: error messages via remote validation
Just wanted to ask again if anyone has ever set up their php file
called by the validator's remote method to return different error
messages via JSON? I was hoping to see an example of how I might do
this? Thanks so much.
Kim
On Jan 7, 2:59 pm, Kim mom2ma...@gmail.com wrote:
Hi,
I am fairly new to jquery, jqueryvalidationand competely new toJSON. I was
wondering if anyone could provide or point me to an
example of a use of the remote method of thevalidationplugin that
can display theerrormessagereturned by the remotely called php
file.
I have an input field wherein someone enters an id to a database
table, specifically an id called media_id. I have the remote method
set up to call a php script (check_database.php) that looks for that
media_id in my database. There are a number of reasons that search
might fail: the id might not exist, or it might exist but have a
certain invalid status, etc. I would like to be able to display
amessagespecific to the problem rather than one generic That id is
invalidmessage. I read that my php script could return ajson
formattedmessage, but I am not sure how to do that, or how to modify
the javascript to handle what it gets back. I would appreciate any
help!
my starting point in my javascript file:
rules: {
media_id: {
required: true,
remote: 'check_database.php'
}
},
summary of what I am trying to do in check_database.php:
database query with media_id
if no errors
return true
else if error1
return ???
else iferror2
return ???
etc.
Re: [jQuery] Superfish: 2nd dropdown positioning
link doesn't work mcpilot wrote: I have Superfish installed on a website and have a 3-tier dropdown. li/ li/li. The 3rd tier is not positioned correctly, it's behind the second tier. (http://208.84.152.20/~loveland1) Lookiung for the CSS line to tweak to move that out. Pat
[jQuery] combine autocomplete and validation plugin
Is there a way to combine the plugins to validate a autocomplete- field? I think a extension of the autocomplete handler would do it, but i have no idea doing this... Any suggestions?
[jQuery] Global monitoring of all Ajax completions
I'd like to logout users when the associated session expires as soon
as reasonably possible. Assume the users computer died for any
reason, I'd like to logout the user server-side by keeping the session
timeout as short as reasonably possible, maybe 3 minutes.
To keep the session alive so the server doesn't incorrectly logout the
user, an Ajax keep-alive post should be made no later than 60 seconds
after the last transaction-oriented Ajax post. I'd like to be able to
globally monitor all client-side Ajax request completions and reset a
countdown timer
Does this call
$.ajaxComplete(
function fnResetAjaxTimer() {
// reset timer code here
}
);
monitor all completions or is it necessary to use $.ajaxSetup?
[jQuery] Re: tabs in one line, on small resolution
Another option is using the CSS min-width to set a minimum width in case they make the window smaller, this will prevent the block from wrapping.. this will mean two things: 1) Side scrolling in 800x600, but let's be real you shouldn't have to support that these days anyway. 2) Min-width doesn't work in IE6,7 and I don't think 8. But again...we, as a community need to stop supporting IE6. Gregory Tarnoff www.tarnoff.info http://www.twitter.com/gregtarnoff http://www.flickr.com/photos/urothane
[jQuery] Re: tabs in one line, on small resolution
just set the width of the containing div, not the min-width, as that is all that is required to prevent the collapsing and is supported by almost every browser available, including good ole IE6. @Greg to stop supporting IE6 means stop supporting the people who use IE6. many businesses rightly feel an obligation to support their customers, regardless of their financial state and/or technical acumen. it would make my life easier to disregard all but the most compliant browsers, but, sadly, making my life easier is not what my job is about. : ) On Jan 13, 8:50 am, Greg Tarnoff greg.tarn...@gmail.com wrote: Another option is using the CSS min-width to set a minimum width in case they make the window smaller, this will prevent the block from wrapping.. this will mean two things: 1) Side scrolling in 800x600, but let's be real you shouldn't have to support that these days anyway. 2) Min-width doesn't work in IE6,7 and I don't think 8. But again...we, as a community need to stop supporting IE6. Gregory Tarnoff www.tarnoff.infohttp://www.twitter.com/gregtarnoffhttp://www.flickr.com/photos/urothane
Re: [jQuery] Are numerical properties/indexes supported?
On Wed, Jan 13, 2010 at 2:03 AM, Dean deanpe...@gmail.com wrote: Any jQuery object currently has numerical properties/indexes that store references to the DOM node elements matched in the search. (E.g., $(div)[0] is a reference to the first matched DOM node element in the search.) Can we rely on these properties remaining in jQuery indefinitely? Every time $(div) is executed, it queries the DOM. If you want to save the results, save them: var divs = $(div). Then, access them in the documented way: divs.eq(0). If brackets work now, as they are not mentioned in the documentation then, no, you can't count on that working in the future. Nathan
[jQuery] Passing parameters by object
Passing parameters using an object has become a popular method among
jQuery add-ins. Few plugins actually validate the passed parameter
object to ensure that elements are spelled correctly.
Most plugins use the jQuery.extend method which would copy the passed
parameter { resiz: 1 } just as easily as the correctly spelled
parameter { resize: 1 }. A validation of the object before or after
the $.extend would ensure there were no misspellings, something like:
function( arg1, arg2, oParms ) {
oParms = $.extend( { resize: 0, height: 100, width: 100 }, oParms )
// $.notIn is fictitious, returns true if any element of oParm is
not in oAllParms
if ( $.notIn( oAllParms, oParms ) { some error notification here }
// We know the parms are good so proceed here
Before inventing the wheel again, can anyone point to a clean example
of a plugin that validates object parameters?
[jQuery] Re: Converting a javascript to jQuery
modestmj, can you provide some background as to why you want to convert working javascript to jquery? your reasons may (or may not be) relevant to a solution. either way, i am curious. thank you.
[jQuery] Re: Converting a javascript to jQuery
While i only have a minute to help, i can point out quickly that
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;nodivs.length;no++){
if(divs[no].className=='breakbg'){
divs[no].onclick = showHideContent;
divs[no].id = 'ssdm'+divCounter;
...
}
}
Can be
$(div.breakbg).each(function(i) {
var $div = $(this).attr(id, ssdm + (i + 1)).click
(showHideContent);
// you can now use jQuery object $div to reference the rest
});
And keep in mind one thing like the reply above almost says: jQuery
*is* JavaScript... that seems to get over looked a lot
On Jan 13, 4:48 am, modestmj amdmuja...@gmail.com wrote:
Hello everyone...I'm really new to jQuery..I have an urgent requirement to
convert this javascript to jQuery...So please...try to help me with this..
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;nodivs.length;no++){
if(divs[no].className=='breakbg'){
divs[no].onclick = showHideContent;
divs[no].id = 'ssdm'+divCounter;
var answer = divs[no].nextSibling;
while(answer answer.tagName!='DIV'){
answer = answer.nextSibling;
}
//divs[no].className=='ssdhead';
answer.id = 'ssds'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight +
'px';
contentDiv.className='ssdcontent';
contentDiv.id = 'ssdsc' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
function showHideContent(e,inputId)
{
if(yatrassd_slideInProgress)return;
yatrassd_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('ssds' + numericId);
var imgId = document.getElementById('arrowimg'+ numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
imgId.src='/yatra_blue-theme/images/hotel/ssdarrowdown.gif';
if(yatrassd_activeId yatrassd_activeId!=numericId){
objectIdToSlideDown = numericId;
slideContent(yatrassd_activeId,(yatrassd_slideSpeed*-1));
imgId.src='/yatra_blue-theme/images/hotel/ssdarrowup.gif';
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
imgId.src='/yatra_blue-theme/images/hotel/ssdarrowup.gif';
slideContent(numericId,yatrassd_slideSpeed);
}
}else{
slideContent(numericId,(yatrassd_slideSpeed*-1));
yatrassd_activeId = false;
imgId.src='/yatra_blue-theme/images/hotel/ssdarrowdown.gif';
}
}
--
View this message in
context:http://old.nabble.com/Converting-a-javascript-to-jQuery-tp27142142s27...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] Converting a javascript to jQuery
This is totally untested but I expect it should look something like the
below.
Nathan
function initShowHideDivs() {
$(div.breakbg).each(function(breakbgIndex) {
this
.click(showHideContent)
.attr(id, ssdm+breakbgIndex)
// .className==ssdhead
.next(div)
.attr(id, ssds+breakbgIndex)
.css({display:none, height:1px})
.find(div).eq(0)
.css(top, (0-contentDiv.offsetHeight)+px
.addClass(ssdcontent)
.attr(id, ssdsc+breakbgIndex);
});
}
// I imagine this could be further jQuerified but, not knowing what your
needs are...
function showHideContent(e, inputId) {
if (yatrassd_slideInProgress) return;
yatrassd_slideInProgress = true;
if ( ! inputId ) inputId = this.id;
var numericId = inputId.toString().replace(/[^0-9]/g,);
var answerDiv = $(#ssds + numericId);
var imgId = $(#arrowimg + numericId);
objectIdToSlideDown = false;
if (answerDiv.is(:visible)) {
slideContent(numericId, (yatrassd_slideSpeed*-1));
yatrassd_activeId = false;
imgId.src=/yatra_blue-theme/images/hotel/ssdarrowdown.gif;
} else {
imgId.src=/yatra_blue-theme/images/hotel/ssdarrowdown.gif;
if (yatrassd_activeId yatrassd_activeId != numericId) {
objectIdToSlideDown = numericId;
slideContent(yatrassd_activeId,(yatrassd_slideSpeed*-1));
imgId.src=/yatra_blue-theme/images/hotel/ssdarrowup.gif;
} else {
answerDiv.show();
imgId.src=/yatra_blue-theme/images/hotel/ssdarrowup.gif;
slideContent(numericId,yatrassd_slideSpeed);
}
}
Re: [jQuery] Passing parameters by object
If I were you, I would resist the temptation to do too much 'correctness'
checking if it is a plugin that you are releasing to the general public.
The reason I say that is sometimes it is desirable to add extra things in to
your configuration that the plugin doesn't expect, so that it gets stored in
context. To allow that to happen, don't halt execution if you find
something you didn't expect, just log it.
(function($){
// list all of your expected options and their default values here
var defaults = {};
var validateOptions = function(o) {
for ( var i in o ) {
if ( ! defaults.hasOwnProperty(i) ) console.log( 'MyPlugin:
unexpected option: ' + i );
}
};
var MyPlugin = function(o) {
validateOptions(o);
o = $.extend({},defaults,o);
...
};
})(jQuery);
Also, once you have everything debugged, I would comment out the call to
validateOptions, so that production code is not generating console output,
since that may generate errors for some users, and does not serve anyone but
the developer.
On Wed, Jan 13, 2010 at 6:24 AM, SamCKayak s...@elearningcorner.com wrote:
Passing parameters using an object has become a popular method among
jQuery add-ins. Few plugins actually validate the passed parameter
object to ensure that elements are spelled correctly.
Most plugins use the jQuery.extend method which would copy the passed
parameter { resiz: 1 } just as easily as the correctly spelled
parameter { resize: 1 }. A validation of the object before or after
the $.extend would ensure there were no misspellings, something like:
function( arg1, arg2, oParms ) {
oParms = $.extend( { resize: 0, height: 100, width: 100 }, oParms )
// $.notIn is fictitious, returns true if any element of oParm is
not in oAllParms
if ( $.notIn( oAllParms, oParms ) { some error notification here }
// We know the parms are good so proceed here
Before inventing the wheel again, can anyone point to a clean example
of a plugin that validates object parameters?
--
John Arrowwood
John (at) Irie (dash) Inc (dot) com
John (at) Arrowwood Photography (dot) com
John (at) Hanlons Razor (dot) com
--
http://www.irie-inc.com/
http://arrowwood.blogspot.com/
Re: [jQuery] Re: background-color always returns transparent
Make sure you are passing in a document node and not a jQuery object.
if ( elem instanceof jQuery ) elem = elem.get(0);
If you were passing in a jQuery object, the 'parent = parent.parentNode'
line would immediately set parent to null.
Also, shouldn't your getColor function return the color if it is set on
elem, too, instead of always looking up the chain? Doesn't it make more
sense to have one call, rather than putting some of your logic in the
function, and some outside of it?
function getColor( of, what ) {
var elem = of;
if ( elem instanceof jQuery ) elem = elem.get(0);
var color = null;
while ( elem != null ) {
color = $(elem).css(what);
if ( color != '' color != 'transparent' ||
jQuery.nodeName(elem,'body') ) break;
elem = elem.parentNode;
}
return color;
}
On Tue, Jan 12, 2010 at 11:12 AM, John john.jian.f...@gmail.com wrote:
Sorry, I have to come back for this question. I have really wired
problem.
I implemented the getColor similar to the jQuery color plugin as
follows,
function getColor(elem, cssName){
var color = null;
if (elem != null) {
var parent = elem.parentNode;
while (parent != null) {
color = $(parent).css(cssName);
//or
// color = jQuery.curCSS(parent, cssName);
if (color != '' color != 'transparent' || jQuery.nodeName
(parent, body))
break;
parent = parent.parentNode;
}
}
return color;
};
If I use the background color inline such as
html
head
/head
body
div class=categories
div class=content
div class=body
ul id=category-list
li class=division
ul
li class=category selected style=background-
color:red;
div class=title
a href=/suv class=category-
suvSUVs (6)/a
/div
/li
li class=category category_69564
div class=title
a href=/4by4 class=category-
general4x4 (6)/a
/div
/li
li class=category category_73293
div class=title
a href=/hybrid
class=category-hybridHybrid/a
/div
/li
/ul
/li
/ul
/div
/div
/div
/body
/html
I can get back the background color of the element li
class=category selected correctly, i.e.,
rgb(255,0,0). However, if I move the css style to the head as follows,
html
head
style type=text/css
.content .division .category.selected {
background-color: red;
}
/style
/head
I always get back the value transparent even with the getColor
method. I couldn't figure out
what was wrong and please help me with this. How can I get back the
background-color as
rgb(255,0,0) or red in the latter case.
Thanks in advance,
John
On Jan 11, 2:31 pm, John Arrowwood jarro...@gmail.com wrote:
As a QA tester with a lot of test automation experience, a bit of
advice:
Ask if the product would not ship if it wasn't red. If the answer is
no,
then you might not want to waste your time. Unless you have automated
everything else about the functionality of the application, and are
looking
for things to automate, but I would be surprised if you had gotten that
far
already! :)
There are some other things you can do, too, to make it easier or
faster.
If you want to discuss it off-list, email me at j...@irie-inc.com.
On Mon, Jan 11, 2010 at 9:54 AM, John john.jian.f...@gmail.com
wrote:
Thanks for your reply. I will try to see if the background color on
the parent works or not.
As for checking the red color, I need to do a UI test and check if
the background color
is set correctly. That is to say, I am testing other people's code
and
web page.
Thanks,
John
On Jan 11, 12:41 pm, John Arrowwood jarro...@gmail.com wrote:
The short answer is because the background color of the item you
have
selected is in fact transparent.
Your style makes the li tag red. Then you query on a child
element
that
has no color specified. The background color of the child element
is
'transparent' which means that the color of something up the tree
is what
you will see.
You will never see 'red' by looking at the child element. But what
you
can
do (and jquery.color.js does this) is while you get 'transparent'
then
you
can look at the parent object. You can walk up the tree until you
get
what
you are looking for.
But before you go down that road, why are you looking to see the
color of
the element? If you can describe what you are trying to do in more
general
terms, someone
[jQuery] Jquery Cycle Plugin Bugs
Hey all: I'm having some odd bugs with 2 different kind slideshows. www.exhaciendalapetaca.com On my home page, on both mozilla and IE, instead of displaying the slideshow, the entire set of photos are displayed, stacked underneath eachother. It doesn't happen all the time. The second issue is on the events and rentals page. Sometime the slide photos turn into mini squashed photos. It doesn't happen all the time, and usually a refresh fixes it. Can anyone see from the code if i'm doing something to trigger this, or is there a bug fix? Thanks!
[jQuery] Cloning a table row that is not in a table
The scenario. I have a table with form inputs. I want to clone the row to provide another row of inputs to the user. How I plan to do it. I start the table with one row. I also place a copy of that row inside a hidden div on the page. When the user clicks a button I clone and append the row from the hidden div to the table. The problem. I cannot select the row in the hidden div. Not even from the Firebug console even though I can see the row in the source I have tried the following. 1) Removing the div and making the row hidden which did not work 2) Placing row inside the table and hiding. This did work. So it seems I can only select a row if its in a table? That makes no sense? Any ideas about why this is happening would be appreciated. Thanks Steve
[jQuery] treeview
I am using the treeview plugin (with the famfamfam theme) as a navigation tool, does anyone know how to stop a node which is a link, that also has child nodes from collapsing/expanding when the actual link is clicked? Basically, I want the tree to only collapse/expand when the plus/minus (hitarea) images are pressed? Thanks.
[jQuery] please can you help me with with :contains? :)
Hi all
I am using jQuery to toggle the visibility of some divs and at the
same time the content of the 'toggler' links.
Each time you click on a '.show_profile' link you show/hide a
'.directors_details' div.
At the same time, when you click on the above mentioned link
- the class of the link changes from 'show_profile' to 'hide_profile'
and back
- part of the text in the link changes from 'show' to 'hide' or from
'hide' to 'show'.
Most of this code works, but the confusing bit is the show/hide
replacing text.
It works only the first time you click on the button (changes from
'show' to 'hide'), while it remains almost always 'Hide' in all the
following clicks.
The if/else condition is not working correctly, as if all the
'.show_profile' links texts were checked and the 'show' condition was
almost always verified .
Is it the existence of several links with the same '.show_profile'
class that actually creates problems?
Everything else (toggling the class of the link and the visibility of
the div) works perfectly.
Hope it makes sense.
Any idea? Or better ways to toggle part of the link text?
Many many many thanks :)
Francesca
This is the code:
$('.show_profile').click(function() {
// toggle visibility profile
$(this).parent().next('.directors_details').toggle();
// toggle link class to change the arrow background image
$(this).toggleClass(hide_profile);
// change show/hide text in the link this is the part that
doesn't work correctly
if( $('$(this):contains(Show)').length 0) {
$(this).text($(this).text().replace('Show','Hide'));
}else{
$(this).text($(this).text().replace('Hide','Show'));
}
return false;
});
[jQuery] Re: Can anyone see this issue?
Anyone? :/
On Jan 13, 11:46 am, youradds andy.ne...@gmail.com wrote:
Hi,
Got another weird one with crappy IE :/
function finishAjax(linkid, id, response) {
jQuery('#ajax_rate_indicator' + linkid).hide();
response = unescape(response);
/* an erorr test, in case we get an error in the div id=error
div, which didn't get caught before for some reason */
var error = jQuery(response).find('div.error').html();
var message = jQuery(response).find('div.message').html();
var regextest1 = Morate se prijaviti da bi mogli pristupiti ovome;
/* alert(test: + error);*/
if (error) {
jQuery('#'+id).html(font color=greenYour rating has been
accepted/font);
} else if (regextest1.test(response) == true) {
jQuery('#'+id).html(font color=redPlease login before you can
rate!/font);
} else {
jQuery('#'+id).html(font color=greenYour rating has been
accepted/font);
}
} //finishAjax
I get the following error - but ONLY when an error exists (i.e the
div.error bit)
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64;
Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR
3.5.30729; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.
0.0; .NET CLR 3.0.30729)
Timestamp: Wed, 13 Jan 2010 11:42:37 UTC
Message: Object doesn't support this property or method
Line: 82
Char: 10
Code: 0
URI:http://www.unreal.hr/imenik/static/ajax_rate.js
Can anyone see a mess up? It works fine in FF and Chrome, and partly
in IE8, but just not this bit. I'm getting really ticked off with IE
atm :(
TIA!
Andy
Re: [jQuery] Cloning a table row that is not in a table
On Wed, Jan 13, 2010 at 9:15 AM, RhythmicDevil rhythmicde...@gmail.com wrote: So it seems I can only select a row if its in a table? That makes no sense? Makes perfect sense; a table row cannot exist outside of a table. Nathan
[jQuery] Re: Can anyone see this issue?
Anyone? :/
On Jan 13, 11:46 am, youradds andy.ne...@gmail.com wrote:
Hi,
Got another weird one with crappy IE :/
function finishAjax(linkid, id, response) {
jQuery('#ajax_rate_indicator' + linkid).hide();
response = unescape(response);
/* an erorr test, in case we get an error in the div id=error
div, which didn't get caught before for some reason */
var error = jQuery(response).find('div.error').html();
var message = jQuery(response).find('div.message').html();
var regextest1 = Morate se prijaviti da bi mogli pristupiti ovome;
/* alert(test: + error);*/
if (error) {
jQuery('#'+id).html(font color=greenYour rating has been
accepted/font);
} else if (regextest1.test(response) == true) {
jQuery('#'+id).html(font color=redPlease login before you can
rate!/font);
} else {
jQuery('#'+id).html(font color=greenYour rating has been
accepted/font);
}
} //finishAjax
I get the following error - but ONLY when an error exists (i.e the
div.error bit)
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64;
Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR
3.5.30729; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.
0.0; .NET CLR 3.0.30729)
Timestamp: Wed, 13 Jan 2010 11:42:37 UTC
Message: Object doesn't support this property or method
Line: 82
Char: 10
Code: 0
URI:http://www.unreal.hr/imenik/static/ajax_rate.js
Can anyone see a mess up? It works fine in FF and Chrome, and partly
in IE8, but just not this bit. I'm getting really ticked off with IE
atm :(
TIA!
Andy
[jQuery] Re: simplemodal, want function to run upon $(document).ready
I found that I could trigger a click event when the document was
loaded.
Not quite the straight fix I wanted, but a work around will do the
trick.
Thanks everyone,
Domanique
On Jan 12, 12:47 pm, Domanique Alicia domaniqueali...@gmail.com
wrote:
Hello all,
I wonder if anyone can shed some light on my problem.
I am updating a site that uses the simplemodal plug in
(http://www.ericmmartin.com/projects/simplemodal/) to create a lightbox-esque
effect when opening included php files.
Now then, the plug-in uses a function that is called when the item in
the DOM is clicked:
$('#__SELECTED_ELEMENT__:eq(0)').click(function (e) {
e.preventDefault();
$.get(__FILE.PHP__, function(data){
$(data).modal({
close: false,
overlayId: 'modalOverlay',
containerId: 'miniProteanContainer',
onOpen: site_terms.open,
onClose: site_terms.close
});
});
});
Essentially, I want this function to run as soon at the document is
loaded.
I have tried:
1. Seeing if I could change the event type to LOAD (thinking I would
be tricky and bypass the whole click) and I can only change the event
type to hover.
2. Setting this function in the $(document).ready(function(){} at the
root, assuming the function would run after the document was loaded.
(see the following example)
$(document).ready(function(e){
e.preventDefault();
$.get(__FILE.PHP__, function(data){
$(data).modal({
close: false,
overlayId: 'modalOverlay',
containerId: 'miniProteanContainer',
onOpen: site_terms.open,
onClose: site_terms.close
});
});
});
Has anyone else encountered this? Any recommendations on how I should
attack the problem?
Thanks,
Domanique
[jQuery] Re: Can anyone see this issue?
Eugh, now I feel like an idiot!
I had:
var regextest1 = Morate se prijaviti da bi mogli pristupiti ovome;
...but needed:
var regextest1 = /Morate se prijaviti da bi mogli pristupiti ovome/;
Seems to work fine now ;)
Cheers
Andy
On Jan 13, 5:17 pm, youradds andy.ne...@gmail.com wrote:
Anyone? :/
On Jan 13, 11:46 am, youradds andy.ne...@gmail.com wrote:
Hi,
Got another weird one with crappy IE :/
function finishAjax(linkid, id, response) {
jQuery('#ajax_rate_indicator' + linkid).hide();
response = unescape(response);
/* an erorr test, in case we get an error in the div id=error
div, which didn't get caught before for some reason */
var error = jQuery(response).find('div.error').html();
var message = jQuery(response).find('div.message').html();
var regextest1 = Morate se prijaviti da bi mogli pristupiti ovome;
/* alert(test: + error);*/
if (error) {
jQuery('#'+id).html(font color=greenYour rating has been
accepted/font);
} else if (regextest1.test(response) == true) {
jQuery('#'+id).html(font color=redPlease login before you can
rate!/font);
} else {
jQuery('#'+id).html(font color=greenYour rating has been
accepted/font);
}
} //finishAjax
I get the following error - but ONLY when an error exists (i.e the
div.error bit)
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64;
Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR
3.5.30729; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.
0.0; .NET CLR 3.0.30729)
Timestamp: Wed, 13 Jan 2010 11:42:37 UTC
Message: Object doesn't support this property or method
Line: 82
Char: 10
Code: 0
URI:http://www.unreal.hr/imenik/static/ajax_rate.js
Can anyone see a mess up? It works fine in FF and Chrome, and partly
in IE8, but just not this bit. I'm getting really ticked off with IE
atm :(
TIA!
Andy
[jQuery] ANNOUNCE: new rev of credit card validation extension
Hi All, We've released a new version of our jQuery Validation plugin credit card extension. Changes include: 1. updated card prefixes (including latest Discover Card changes) 2. support for LaserCard More info here: http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx We have other lab stuff here, too: http://www.ihwy.com/labs/ - Jack
[jQuery] Re: Cloning a table row that is not in a table
You are correct about that. But I did not think the selectors would enforce that. My solution is just to put another table with the row and hide that. Which makes it valid. On Jan 13, 12:03 pm, Nathan Klatt n8kl...@gmail.com wrote: On Wed, Jan 13, 2010 at 9:15 AM, RhythmicDevil rhythmicde...@gmail.com wrote: So it seems I can only select a row if its in a table? That makes no sense? Makes perfect sense; a table row cannot exist outside of a table. Nathan
[jQuery] jQuery 1.2.6 clone problem with internet explorer.
Hallo all. When i call the clone() function in Internet Explorer jQuery meltdowns :( The error reported in ie6 is: C.fx.step is null or not an object. Any idea how to fix the problem? Kind regards Massimo
Re: [jQuery] Re: Cloning a table row that is not in a table
On Wed, Jan 13, 2010 at 11:36 AM, RhythmicDevil rhythmicde...@gmail.com wrote: I did not think the selectors would enforce that. It's not the selectors; the problem is the tr never makes it into the DOM because the invalid html gets ignored by the browser. Because the tr isn't in the DOM, the selector has no chance of finding it. :) Nathan
[jQuery] Re: Cloning a table row that is not in a table
If its not in the DOM why do I see it in the source? I am having a disconnect here. I have fixed it as I said above. But I am curious I thought the DOM represented the HTML that is present at load time. On Jan 13, 12:54 pm, Nathan Klatt n8kl...@gmail.com wrote: On Wed, Jan 13, 2010 at 11:36 AM, RhythmicDevil rhythmicde...@gmail.com wrote: I did not think the selectors would enforce that. It's not the selectors; the problem is the tr never makes it into the DOM because the invalid html gets ignored by the browser. Because the tr isn't in the DOM, the selector has no chance of finding it. :) Nathan
Re: [jQuery] please can you help me with with :contains? :)
On Wed, Jan 13, 2010 at 10:54 AM, happysmile francesca.manc...@gmail.com
wrote:
It works only the first time you click on the button (changes from
'show' to 'hide'), while it remains almost always 'Hide' in all the
following clicks.
This won't help you understand :contains but I think it does what you want:
http://jsbin.com/udesu/edit
Assuming this markup:
p
button class=show_profileShow details/button
span class=directors_details style=display:none
br /details details details/span/p
The code:
$('.show_profile').click(function() {
// toggle link class to change the arrow background image
var jThis = $(this)
.toggleClass(hide_profile);
// toggle visibility profile
var jDetails = jThis.next('.directors_details')
.toggle();
// change show/hide text in the link
if (jDetails.is(:visible)) {
jThis.text(jThis.text().replace('Show','Hide'));
} else {
jThis.text(jThis.text().replace('Hide','Show'));
}
return false;
});
Nathan
Re: [jQuery] Re: Cloning a table row that is not in a table
On Wed, Jan 13, 2010 at 11:58 AM, RhythmicDevil rhythmicde...@gmail.comwrote: If its not in the DOM why do I see it in the source? I am having a disconnect here. I have fixed it as I said above. But I am curious I thought the DOM represented the HTML that is present at load time. Maybe I misunderstand what you mean by in the source - do you mean when you do a View | Source it's there? Because that is merely the text sent by the server to the browser. It's what the browser uses to generate the DOM, it is not the DOM itself. Know what I mean? Nathan
[jQuery] Re: Jquery Cycle Plugin Bugs
Homepage slideshow seems to work fine for me. Have you since found the error? As for the events slideshow, you should be able to avoid image size issues, try adding height and width attributes to the img tags. Should fix that. -Dan On Jan 13, 10:33 am, keli marks ckelima...@gmail.com wrote: Hey all: I'm having some odd bugs with 2 different kind slideshows. www.exhaciendalapetaca.com On my home page, on both mozilla and IE, instead of displaying the slideshow, the entire set of photos are displayed, stacked underneath eachother. It doesn't happen all the time. The second issue is on the events and rentals page. Sometime the slide photos turn into mini squashed photos. It doesn't happen all the time, and usually a refresh fixes it. Can anyone see from the code if i'm doing something to trigger this, or is there a bug fix? Thanks!
[jQuery] Re: Jquery Cycle Plugin Bugs
On another note, if you use fx: 'slideHorz' it will slide in the appropriate direction(left/right), depending on button you click (downwards = left, upwards = left). On Jan 13, 10:33 am, keli marks ckelima...@gmail.com wrote: Hey all: I'm having some odd bugs with 2 different kind slideshows. www.exhaciendalapetaca.com On my home page, on both mozilla and IE, instead of displaying the slideshow, the entire set of photos are displayed, stacked underneath eachother. It doesn't happen all the time. The second issue is on the events and rentals page. Sometime the slide photos turn into mini squashed photos. It doesn't happen all the time, and usually a refresh fixes it. Can anyone see from the code if i'm doing something to trigger this, or is there a bug fix? Thanks!
[jQuery] Shortest possible method of adding/removing class on mouseenter/leave without a plugin
Is this it, or do you have something shorter?
$('#nav li').each( function () {
var $this = $(this);
$this.bind('mouseenter mouseleave', function()
{ $this.toggleClass('hover') });
});
I thought hover would work, but it only does the mouseenter with one
parameter, instead of doing the same function for both enter and
leave.
$('#nav li').each( function () {
var $this = $(this);
$this.hover(function() { $this.toggleClass('hover') }); //
only mouseover
});
which could be abstracted to a hoverClass plugin
$('#nav li').hoverClass('hover');
[jQuery] Re: background-color always returns transparent
Sorry for the confusion. Actually, the getColor is a function called
by another function,
which first checks all different css, if the css is color related and
the value is transparent, then
passes in the dom element, not jquery object, to the getColor function
to get back the
actual color. I did trace in firebug and the getColor did walk up to
the body, all nodes
returned transparent if I put the css style in the head. If I use in-
line css style, it works
fine.
Thanks,
John
On Jan 13, 10:42 am, John Arrowwood jarro...@gmail.com wrote:
Make sure you are passing in a document node and not a jQuery object.
if ( elem instanceof jQuery ) elem = elem.get(0);
If you were passing in a jQuery object, the 'parent = parent.parentNode'
line would immediately set parent to null.
Also, shouldn't your getColor function return the color if it is set on
elem, too, instead of always looking up the chain? Doesn't it make more
sense to have one call, rather than putting some of your logic in the
function, and some outside of it?
function getColor( of, what ) {
var elem = of;
if ( elem instanceof jQuery ) elem = elem.get(0);
var color = null;
while ( elem != null ) {
color = $(elem).css(what);
if ( color != '' color != 'transparent' ||
jQuery.nodeName(elem,'body') ) break;
elem = elem.parentNode;
}
return color;
}
On Tue, Jan 12, 2010 at 11:12 AM, John john.jian.f...@gmail.com wrote:
Sorry, I have to come back for this question. I have really wired
problem.
I implemented the getColor similar to the jQuery color plugin as
follows,
function getColor(elem, cssName){
var color = null;
if (elem != null) {
var parent = elem.parentNode;
while (parent != null) {
color = $(parent).css(cssName);
//or
// color = jQuery.curCSS(parent, cssName);
if (color != '' color != 'transparent' || jQuery.nodeName
(parent, body))
break;
parent = parent.parentNode;
}
}
return color;
};
If I use the background color inline such as
html
head
/head
body
div class=categories
div class=content
div class=body
ul id=category-list
li class=division
ul
li class=category selected style=background-
color:red;
div class=title
a href=/suv class=category-
suvSUVs (6)/a
/div
/li
li class=category category_69564
div class=title
a href=/4by4 class=category-
general4x4 (6)/a
/div
/li
li class=category category_73293
div class=title
a href=/hybrid
class=category-hybridHybrid/a
/div
/li
/ul
/li
/ul
/div
/div
/div
/body
/html
I can get back the background color of the element li
class=category selected correctly, i.e.,
rgb(255,0,0). However, if I move the css style to the head as follows,
html
head
style type=text/css
.content .division .category.selected {
background-color: red;
}
/style
/head
I always get back the value transparent even with the getColor
method. I couldn't figure out
what was wrong and please help me with this. How can I get back the
background-color as
rgb(255,0,0) or red in the latter case.
Thanks in advance,
John
On Jan 11, 2:31 pm, John Arrowwood jarro...@gmail.com wrote:
As a QA tester with a lot of test automation experience, a bit of
advice:
Ask if the product would not ship if it wasn't red. If the answer is
no,
then you might not want to waste your time. Unless you have automated
everything else about the functionality of the application, and are
looking
for things to automate, but I would be surprised if you had gotten that
far
already! :)
There are some other things you can do, too, to make it easier or
faster.
If you want to discuss it off-list, email me at j...@irie-inc.com.
On Mon, Jan 11, 2010 at 9:54 AM, John john.jian.f...@gmail.com
wrote:
Thanks for your reply. I will try to see if the background color on
the parent works or not.
As for checking the red color, I need to do a UI test and check if
the background color
is set correctly. That is to say, I am testing other people's code
and
web page.
Thanks,
John
On Jan 11, 12:41 pm, John Arrowwood jarro...@gmail.com wrote:
The short answer is because the background color of the item you
have
selected is in fact transparent.
Your style makes the li tag red. Then you query on a child
[jQuery] Re: Shortest possible method of adding/removing class on mouseenter/leave without a plugin
i don't understand the .each part jQuery is already going to do
that
$('#nav li').bind('mouseenter mouseleave', function() { $
(this).toggleClass('hover'); });
*should* be equiv, although i must say that's untested
and how about *zero* jQuery code and just using CSS's :hover pseudo?
http://www.w3schools.com/css/pr_pseudo_hover.asp
On Jan 13, 1:22 pm, seasoup seas...@gmail.com wrote:
Is this it, or do you have something shorter?
$('#nav li').each( function () {
var $this = $(this);
$this.bind('mouseenter mouseleave', function()
{ $this.toggleClass('hover') });
});
I thought hover would work, but it only does the mouseenter with one
parameter, instead of doing the same function for both enter and
leave.
$('#nav li').each( function () {
var $this = $(this);
$this.hover(function() { $this.toggleClass('hover') }); //
only mouseover
});
which could be abstracted to a hoverClass plugin
$('#nav li').hoverClass('hover');
[jQuery] Re: Cloning a table row that is not in a table
Yes. Now I understand. Thank you. On Jan 13, 1:02 pm, Nathan Klatt n8kl...@gmail.com wrote: On Wed, Jan 13, 2010 at 11:58 AM, RhythmicDevil rhythmicde...@gmail.comwrote: If its not in the DOM why do I see it in the source? I am having a disconnect here. I have fixed it as I said above. But I am curious I thought the DOM represented the HTML that is present at load time. Maybe I misunderstand what you mean by in the source - do you mean when you do a View | Source it's there? Because that is merely the text sent by the server to the browser. It's what the browser uses to generate the DOM, it is not the DOM itself. Know what I mean? Nathan
[jQuery] Re: Help needed to find image dimensions
John and Michael,
Thanks to you both. I haven't checked the board in a while and I was
pleased to see your replies. I'll give it a shot.
On Jan 5, 9:03 am, devilmike devilm...@gmail.com wrote:
I believe John is correct on both counts. You can't get the image
dimensions before loading the image and the css method will work
unless you have to support versions of IE lower than 7.
In any case this script should work. To prevent seeing the full size
image before it resizes, hide the preview image with css and then show
it at the end of the hover on function.
$(a.preview).hover(
function(){
var imgSrc = this.title;
$(body).append('p id=previewimg src='+ imgSrc + ' alt=Image
preview/p');
var preImg = $('#preview img');
if (preImg.width() preImg.height()){
preImg.width(200)
}
else{
preImg.height(200)
}
},
function(){}
)
Michael
On Jan 5, 3:11 am, John Arrowwood jarro...@gmail.com wrote:
It would be wonderful if I am wrong, but I don't think you can get the image
dimensions via JavaScript. But you don't need to...
style
a.preview {
max-width: 200px;
max-height: 200px;}
/style
This will force the image to fit within a 200px by 200px window without
altering the image aspect ratio.
On Mon, Jan 4, 2010 at 6:51 AM,banacanbanaca...@gmail.com wrote:
I'm using Preview.js to create image previews on hover. The script as
it is now displays the full size image on hover, but that is often too
big. I have been able to reduce the preview size by defining
width='200px' which works fine in many cases, but when the image is
tall and narrow a 200px wide image my be 700px tall. So what I'm
trying to do is determine the image dimensions and if the width is
greater than the height, set width='200px', otherwise set
height='200px'. I haven't been able to figure out how to get the
image dimensions from the wrapped set.
Here is an excerpt of my markup:
a href=?php echo $mainImgDir . $mainImg; ? class=preview
title=?php echo $mainImg; ?img src=?php echo $thumbsDir . $image;
? alt=?php echo $image; ? class=center //a
Here is an excerpt of my js code:
$(a.preview).hover(function(e){
this.t = this.title;
this.title = ;
var orientation = ((this.img[src]).width()
(this.img[src]).height()) ? ' alt='Image preview' width ='200px' / : '
alt='Image preview' height='200px' /);
var c = (this.t != ) ? br/ + this.t : ;
$(body).append(p id='preview'img src='+ this.href +
orientation + c +/p);
Can anyone see what I'm doing wrong?
TIA
--
John Arrowwood
John (at) Irie (dash) Inc (dot) com
John (at) Arrowwood Photography (dot) com
John (at) Hanlons Razor (dot) com
--http://www.irie-inc.com/http://arrowwood.blogspot.com/
Re: [jQuery] Re: background-color always returns transparent
But it LOOKS right on screen?
On Wed, Jan 13, 2010 at 10:22 AM, John john.jian.f...@gmail.com wrote:
Sorry for the confusion. Actually, the getColor is a function called
by another function,
which first checks all different css, if the css is color related and
the value is transparent, then
passes in the dom element, not jquery object, to the getColor function
to get back the
actual color. I did trace in firebug and the getColor did walk up to
the body, all nodes
returned transparent if I put the css style in the head. If I use in-
line css style, it works
fine.
Thanks,
John
On Jan 13, 10:42 am, John Arrowwood jarro...@gmail.com wrote:
Make sure you are passing in a document node and not a jQuery object.
if ( elem instanceof jQuery ) elem = elem.get(0);
If you were passing in a jQuery object, the 'parent = parent.parentNode'
line would immediately set parent to null.
Also, shouldn't your getColor function return the color if it is set on
elem, too, instead of always looking up the chain? Doesn't it make more
sense to have one call, rather than putting some of your logic in the
function, and some outside of it?
function getColor( of, what ) {
var elem = of;
if ( elem instanceof jQuery ) elem = elem.get(0);
var color = null;
while ( elem != null ) {
color = $(elem).css(what);
if ( color != '' color != 'transparent' ||
jQuery.nodeName(elem,'body') ) break;
elem = elem.parentNode;
}
return color;
}
On Tue, Jan 12, 2010 at 11:12 AM, John john.jian.f...@gmail.com wrote:
Sorry, I have to come back for this question. I have really wired
problem.
I implemented the getColor similar to the jQuery color plugin as
follows,
function getColor(elem, cssName){
var color = null;
if (elem != null) {
var parent = elem.parentNode;
while (parent != null) {
color = $(parent).css(cssName);
//or
// color = jQuery.curCSS(parent, cssName);
if (color != '' color != 'transparent' || jQuery.nodeName
(parent, body))
break;
parent = parent.parentNode;
}
}
return color;
};
If I use the background color inline such as
html
head
/head
body
div class=categories
div class=content
div class=body
ul id=category-list
li class=division
ul
li class=category selected style=background-
color:red;
div class=title
a href=/suv class=category-
suvSUVs (6)/a
/div
/li
li class=category category_69564
div class=title
a href=/4by4 class=category-
general4x4 (6)/a
/div
/li
li class=category category_73293
div class=title
a href=/hybrid
class=category-hybridHybrid/a
/div
/li
/ul
/li
/ul
/div
/div
/div
/body
/html
I can get back the background color of the element li
class=category selected correctly, i.e.,
rgb(255,0,0). However, if I move the css style to the head as follows,
html
head
style type=text/css
.content .division .category.selected {
background-color: red;
}
/style
/head
I always get back the value transparent even with the getColor
method. I couldn't figure out
what was wrong and please help me with this. How can I get back the
background-color as
rgb(255,0,0) or red in the latter case.
Thanks in advance,
John
On Jan 11, 2:31 pm, John Arrowwood jarro...@gmail.com wrote:
As a QA tester with a lot of test automation experience, a bit of
advice:
Ask if the product would not ship if it wasn't red. If the answer
is
no,
then you might not want to waste your time. Unless you have
automated
everything else about the functionality of the application, and are
looking
for things to automate, but I would be surprised if you had gotten
that
far
already! :)
There are some other things you can do, too, to make it easier or
faster.
If you want to discuss it off-list, email me at j...@irie-inc.com.
On Mon, Jan 11, 2010 at 9:54 AM, John john.jian.f...@gmail.com
wrote:
Thanks for your reply. I will try to see if the background color
on
the parent works or not.
As for checking the red color, I need to do a UI test and check
if
the background color
is set correctly. That is to say, I am testing other people's
code
and
web page.
[jQuery] Re: Shortest possible method of adding/removing class on mouseenter/leave without a plugin
Hey MorningZ,
Yeah, sorry, the .each was in there because I actually have more
code in the $('#nav li).each(...
CSS :hover doesn't work in ie6, ie7 on li nodes.
Josh Powell
On Jan 13, 11:00 am, MorningZ morni...@gmail.com wrote:
i don't understand the .each part jQuery is already going to do
that
$('#nav li').bind('mouseenter mouseleave', function() { $
(this).toggleClass('hover'); });
*should* be equiv, although i must say that's untested
and how about *zero* jQuery code and just using CSS's :hover pseudo?
http://www.w3schools.com/css/pr_pseudo_hover.asp
On Jan 13, 1:22 pm, seasoup seas...@gmail.com wrote:
Is this it, or do you have something shorter?
$('#nav li').each( function () {
var $this = $(this);
$this.bind('mouseenter mouseleave', function()
{ $this.toggleClass('hover') });
});
I thought hover would work, but it only does the mouseenter with one
parameter, instead of doing the same function for both enter and
leave.
$('#nav li').each( function () {
var $this = $(this);
$this.hover(function() { $this.toggleClass('hover') }); //
only mouseover
});
which could be abstracted to a hoverClass plugin
$('#nav li').hoverClass('hover');
[jQuery] jquery draggable on live events
I was sure that drag drop from the jQuery UI wouldn't work on events
that are added dynamically to the dom.
But I found this thread which says to use '.live('mouseover')' to get
it to work, and it seems drag works like a charm.
Droppable, I can't seem to get the simplest of 'alerts' after an item
has been dropped. Any suggestions?
pre
jQuery('div.shift').live('mouseover', function(){
jQuery(this).draggable({ axis: 'y', containment: 'table' });
jQuery(this).droppable({
drop: function(){
alert('dropped');
}
});
});
/pre
[jQuery] jQuery Form Plugin
Hello.
I have a form:
form method=post id=mujform1 action=inc/update_homepage.php
fieldset
label for=NadpisstrongNadpis:/strong/labelbr /
input id=Nadpis name=Nadpis size=60 maxlength=250 type=text
value=?php echo $nadpis; ? /br /
label for=TextstrongText:/strong/labelbr /
textarea id=content name=content COLS=60 ROWS=19
?php echo $text; ?
/textarea
input id=id name=id type=hidden value=?php echo $id; ? /
input id=sekce name=sekce type=hidden value=?php echo
$adresa_sekce; ? /
input type=submit name=submit class=button value=Odešli text
na server /
/fieldset
/form
div id=odezva/div
and this form i want tu send trough jQuery plugin:
script language=javascript type=text/javascript
$(document).ready(function() {
$('#mujform1').ajaxForm({
target: '#odezva',
success: function() {
$('#odezva').fadeIn('slow');
}
});
});
/script
in update_homepage.php i save data to mysqldb.
But if i click to submit buton, i see in div id=odezva/div OK
echo from update_homepage.php, but in db is only first (Nadpis) field
of form. And (!!!) if i click to this button second time go to db also
second field!
If i close Javascript - all is right - the page is reloaded and all
data are in db.
Can you help me? I want ofcourse send all data of first click.
Zhank you very much!
[jQuery] Re: Shortest possible method of adding/removing class on mouseenter/leave without a plugin
css hover is not supported on some browsers.
Amos
On Jan 13, 1:00 pm, MorningZ morni...@gmail.com wrote:
i don't understand the .each part jQuery is already going to do
that
$('#nav li').bind('mouseenter mouseleave', function() { $
(this).toggleClass('hover'); });
*should* be equiv, although i must say that's untested
and how about *zero* jQuery code and just using CSS's :hover pseudo?
http://www.w3schools.com/css/pr_pseudo_hover.asp
On Jan 13, 1:22 pm, seasoup seas...@gmail.com wrote:
Is this it, or do you have something shorter?
$('#nav li').each( function () {
var $this = $(this);
$this.bind('mouseenter mouseleave', function()
{ $this.toggleClass('hover') });
});
I thought hover would work, but it only does the mouseenter with one
parameter, instead of doing the same function for both enter and
leave.
$('#nav li').each( function () {
var $this = $(this);
$this.hover(function() { $this.toggleClass('hover') }); //
only mouseover
});
which could be abstracted to a hoverClass plugin
$('#nav li').hoverClass('hover');
[jQuery] javascript loaded via ajax
hi i have a div whose content is loaded via ajax..that content contains html+javascript the javascript contains a function called test() when the content is loaded this function is added to the dom...now when i remove the div using remove(); i am still able to run the function test() as its still in the dom is there anyway to remove the newly added function from the dom? thanks for your help
[jQuery] Read ajax response headers?
Read ajax response headers?
How can I grab information from the response headers from within an
jQuery ajax callback?
I have an object, data, containing IDs to different items I'd like
to build a detailed list with. I need to grab these details by sending
a request to a server--one for each item.
The issue I'm running into, is the response from the server contains
half the information I need in the body of the response, and the other
half in the headers. I can't figure out a bullet-proof way of reading
the headers at the same time as the body...
Here's a look at what I'm working with:
function index(data) {
for (var i = 0; i data.length; i++) {
$.ajax({
type: 'GET',
url: 'http://domain.com/',
data: 'this=that',
success: function(data) {
/* Here I want to create a list item out of the
data returned in
the body and headers */
}, complete: function(XMLHttpRequest, textStatus) {
}, error: function() {
}
});
}
}
I've tried saving the $.ajax as a variable, and
using .getResponseHeader('name'), but that only works sometimes, and
other times returns Error: INVALID_STATE_ERR: DOM Exception 11,
which apparently means the headers aren't ready to be read. I've tried
this both in the success and complete function.
Any help would be incredibly awesome!
[jQuery] Sceptic about JQuery
Hi, I recently came across JQuery, but I'm not sure weather I should use it. Even though I already know JavaScript, would I have to learn a new language specific to JQuery? What would the advantages of using JQuery be? Finally, would it be hard to install? Thanks
Re: [jQuery] Actually deleting instead of .remove
Hmm. .remove() doesn't just hide an element; It removes it:
if ( this.parentNode ) {
this.parentNode.removeChild( this );
}
(from the source)
To prevent memory leaks, it also removes event handlers associated
with it. As of jQuery 1.4, it also removes data associated with it.
Maybe something else is going on? Or maybe something isn't being
caught. In any case, it might help to see a test case that shows the
memory leak. If you can reproduce the problem with a minimal test case
and post it publicly, send a note to the jquery-dev google group so
the devs can have a look.
thanks,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 12, 2010, at 6:52 PM, sophos707 wrote:
Hi everyone,
I'm running a script that processes text messages people send in, and
then it displays them on a screen. It will loop the text messages
when there are too many to show on one screen.
To accomplish this I add DIVs with a new ID for each new message. The
new messages push the old ones off the screen eventually. But when
this is the case the memory in the browser just keeps increasing to a
frightening load!
I tried using $(#MyDivId).remove() to get rid of the DIVs no longer
on the screen. Memory keeps increasing. Found out in this forum
that .remove() just hides an element in the DOM and makes in
inaccessible rather than actually deleting it.
How can we actually delete elements?
Thanks!
- Jeff
[jQuery] Pulling Filename into Textfield after AJAX Image Upload
As the subject suggests, I am trying to do an image upload (preferably through the use of LightBox popping up with an image upload form, which then submits to a hidden iframe), but I am unsure how to pull the image path back and place it into a separate input field once it's completed. Can someone just give me their general thoughts on how to do this? Thanks!
[jQuery] Re: background-color always returns transparent
Yes, it does look right on screen. Also the wired thing is that if I
use
Firebug console to manually get the color by
$(#category-list li.division:eq(0) ul li:eq(0)).css(background-
color);
it returns the correct one, rgb(255, 0, 0). Not sure why it does not
work programmatically.
Thanks,
John
On Jan 13, 2:37 pm, John Arrowwood jarro...@gmail.com wrote:
But it LOOKS right on screen?
On Wed, Jan 13, 2010 at 10:22 AM, John john.jian.f...@gmail.com wrote:
Sorry for the confusion. Actually, the getColor is a function called
by another function,
which first checks all different css, if the css is color related and
the value is transparent, then
passes in the dom element, not jquery object, to the getColor function
to get back the
actual color. I did trace in firebug and the getColor did walk up to
the body, all nodes
returned transparent if I put the css style in the head. If I use in-
line css style, it works
fine.
Thanks,
John
On Jan 13, 10:42 am, John Arrowwood jarro...@gmail.com wrote:
Make sure you are passing in a document node and not a jQuery object.
if ( elem instanceof jQuery ) elem = elem.get(0);
If you were passing in a jQuery object, the 'parent = parent.parentNode'
line would immediately set parent to null.
Also, shouldn't your getColor function return the color if it is set on
elem, too, instead of always looking up the chain? Doesn't it make more
sense to have one call, rather than putting some of your logic in the
function, and some outside of it?
function getColor( of, what ) {
var elem = of;
if ( elem instanceof jQuery ) elem = elem.get(0);
var color = null;
while ( elem != null ) {
color = $(elem).css(what);
if ( color != '' color != 'transparent' ||
jQuery.nodeName(elem,'body') ) break;
elem = elem.parentNode;
}
return color;
}
On Tue, Jan 12, 2010 at 11:12 AM, John john.jian.f...@gmail.com wrote:
Sorry, I have to come back for this question. I have really wired
problem.
I implemented the getColor similar to the jQuery color plugin as
follows,
function getColor(elem, cssName){
var color = null;
if (elem != null) {
var parent = elem.parentNode;
while (parent != null) {
color = $(parent).css(cssName);
//or
// color = jQuery.curCSS(parent, cssName);
if (color != '' color != 'transparent' || jQuery.nodeName
(parent, body))
break;
parent = parent.parentNode;
}
}
return color;
};
If I use the background color inline such as
html
head
/head
body
div class=categories
div class=content
div class=body
ul id=category-list
li class=division
ul
li class=category selected style=background-
color:red;
div class=title
a href=/suv class=category-
suvSUVs (6)/a
/div
/li
li class=category category_69564
div class=title
a href=/4by4 class=category-
general4x4 (6)/a
/div
/li
li class=category category_73293
div class=title
a href=/hybrid
class=category-hybridHybrid/a
/div
/li
/ul
/li
/ul
/div
/div
/div
/body
/html
I can get back the background color of the element li
class=category selected correctly, i.e.,
rgb(255,0,0). However, if I move the css style to the head as follows,
html
head
style type=text/css
.content .division .category.selected {
background-color: red;
}
/style
/head
I always get back the value transparent even with the getColor
method. I couldn't figure out
what was wrong and please help me with this. How can I get back the
background-color as
rgb(255,0,0) or red in the latter case.
Thanks in advance,
John
On Jan 11, 2:31 pm, John Arrowwood jarro...@gmail.com wrote:
As a QA tester with a lot of test automation experience, a bit of
advice:
Ask if the product would not ship if it wasn't red. If the answer
is
no,
then you might not want to waste your time. Unless you have
automated
everything else about the functionality of the application, and are
looking
for things to automate, but I would be surprised if you had gotten
that
far
already! :)
There are some other things you can do, too, to make it easier or
faster.
Re: [jQuery] Sceptic about JQuery
On Wed, Jan 13, 2010 at 9:11 AM, olliewebster ollie@googlemail.comwrote:
Hi,
I recently came across JQuery, but I'm not sure weather I should use
it. Even though I already know JavaScript, would I have to learn a new
language specific to JQuery? What would the advantages of using JQuery
be? Finally, would it be hard to install?
Thanks
I like to think I'm fairly competent ant JavaScript, and for the longest
time, I put off learning jQuery because really... why invest the time to
learn a different way to write stuff I already know how to write?
Then I saw this:
$('#element').toggle();
That right there is the same as:
if (document.getElementById('element').style.display == none) {
document.getElementById('element').style.display = block;
} else {
document.getElementById('element').style.display = none;
}
As you can see, that's code to toggle the display of an element. If it's
hidden, show it. If it's visible, hide it.
Let's say you wanted to trigger that based on a button click.
Normally, you'd have input type=button id=myButton
onclick=toggleElement(); /
In jQuery, your script is completely unobtrusive and should never show up in
the HTML itself.
In jQuery, that same click would be up int he script area:
script
$('#myButton').click(function() {
$('#element').toggle();
});
/script
So, as you can see... yes, it's taking the time to learn a new way to do
what you already know how to do... but it's a way that will save you a ton
of time. I've changed the behaviors of HTML pages entirely without ever
touching the .html file (all done in the .js).
If it takes you a week to grok the basics (because you'll probably always be
learning)... you'll make up that week in no time just by virtue of never
having to type document.getElementById() again :)
Installing jQuery is simply a link to the jQuery.js file.
If you're storing it locally, it's script
src=my/path/to/jQuery.js/script.
You can also point to google's repository where they host the jQuery file
(as well as other libraries).
script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
/script
Add the line above, and jQuery is installed. Go nuts :)
--
Charlie Griefer
http://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I love my
wife. And I wish you my kind of success.
[jQuery] Re: ANNOUNCE: new rev of credit card validation extension
Terrific! Downloading and installing now. Very impressive plugin, btw! dnfdrmn On Jan 13, 12:29 pm, Jack Killpatrick j...@ihwy.com wrote: Hi All, We've released a new version of our jQuery Validation plugin credit card extension. Changes include: 1. updated card prefixes (including latest Discover Card changes) 2. support for LaserCard More info here: http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx We have other lab stuff here, too: http://www.ihwy.com/labs/ - Jack
Re: [jQuery] Re: ANNOUNCE: new rev of credit card validation extension
Impressive, but I really tought it was another spam incomming by reading only the subject. 2010/1/13 dnfdrmn dbfeder...@gmail.com Terrific! Downloading and installing now. Very impressive plugin, btw! dnfdrmn On Jan 13, 12:29 pm, Jack Killpatrick j...@ihwy.com wrote: Hi All, We've released a new version of our jQuery Validation plugin credit card extension. Changes include: 1. updated card prefixes (including latest Discover Card changes) 2. support for LaserCard More info here: http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx We have other lab stuff here, too: http://www.ihwy.com/labs/ - Jack -- At, Leo Balter http://leobalter.net Blog técnico: http://blog.leobalter.net
Re: [jQuery] Sceptic about JQuery
Using a Javascript framework is definitely a Good Thing. It allows you to step back and focus on what you want to do rather than on the details of getting it done in a way that will work efficiently, in various browsers, etc. Unless there's some external force compelling you to use jQuery, it would be a good idea to at least consider the alternatives, a good starting point being the Wikipedia entry, of course, http://en.wikipedia.org/wiki/JavaScript_library. Nathan
Re: [jQuery] Actually deleting instead of .remove
.remove() does remove the element from the document head or body, but that
doesn't destroy it. It just makes it available for garbage collection - if
there are no other references to the element.
For example:
var $div = $('divtest/div');
$div.appendTo('body');
$div.remove();
Here we've created a new DIV element, appended it to the body, and then
removed it. It is no longer a part of the document body.
But the element still exists in memory! After all, somewhere later we may
repeat this code:
$div.appendTo('body'); // re-use the same DIV
Jeff, perhaps there are other references outstanding to the elements that
are being .remove()'d, preventing them from being garbage collected.
-Mike
On Wed, Jan 13, 2010 at 8:46 AM, Karl Swedberg k...@englishrules.comwrote:
Hmm. .remove() doesn't just hide an element; It removes it:
if ( this.parentNode ) {
this.parentNode.removeChild( this );
}
(from the source)
To prevent memory leaks, it also removes event handlers associated with it.
As of jQuery 1.4, it also removes data associated with it.
Maybe something else is going on? Or maybe something isn't being caught. In
any case, it might help to see a test case that shows the memory leak. If
you can reproduce the problem with a minimal test case and post it publicly,
send a note to the jquery-dev google group so the devs can have a look.
thanks,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 12, 2010, at 6:52 PM, sophos707 wrote:
Hi everyone,
I'm running a script that processes text messages people send in, and
then it displays them on a screen. It will loop the text messages
when there are too many to show on one screen.
To accomplish this I add DIVs with a new ID for each new message. The
new messages push the old ones off the screen eventually. But when
this is the case the memory in the browser just keeps increasing to a
frightening load!
I tried using $(#MyDivId).remove() to get rid of the DIVs no longer
on the screen. Memory keeps increasing. Found out in this forum
that .remove() just hides an element in the DOM and makes in
inaccessible rather than actually deleting it.
How can we actually delete elements?
Thanks!
- Jeff
Re: [jQuery] Re: ANNOUNCE: new rev of credit card validation extension
Hmm, was it the ANNOUNCE part (which I think is standard for this list?) or the credit card .. extension (as in extend your credit or pay later with out magic scam)? Just wondering. dnfdrmn (g) glad you like the plugin. Let me know if the change did the trick for you, if you have a sec. Thanks, Jack Leo Balter wrote: Impressive, but I really tought it was another spam incomming by reading only the subject. 2010/1/13 dnfdrmn dbfeder...@gmail.com mailto:dbfeder...@gmail.com Terrific! Downloading and installing now. Very impressive plugin, btw! dnfdrmn On Jan 13, 12:29 pm, Jack Killpatrick j...@ihwy.com mailto:j...@ihwy.com wrote: Hi All, We've released a new version of our jQuery Validation plugin credit card extension. Changes include: 1. updated card prefixes (including latest Discover Card changes) 2. support for LaserCard More info here: http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx We have other lab stuff here, too: http://www.ihwy.com/labs/ - Jack -- At, Leo Balter http://leobalter.net Blog técnico: http://blog.leobalter.net
Re: [jQuery] Are numerical properties/indexes supported?
On Jan 13, 2010, at 9:24 AM, Nathan Klatt wrote: On Wed, Jan 13, 2010 at 2:03 AM, Dean deanpe...@gmail.com wrote: Any jQuery object currently has numerical properties/indexes that store references to the DOM node elements matched in the search. (E.g., $(div)[0] is a reference to the first matched DOM node element in the search.) Can we rely on these properties remaining in jQuery indefinitely? Every time $(div) is executed, it queries the DOM. If you want to save the results, save them: var divs = $(div). Then, access them in the documented way: divs.eq(0). If brackets work now, as they are not mentioned in the documentation then, no, you can't count on that working in the future. Nathan Actually, I'm going to go out on a limb and say that you can count on the array notation staying in jQuery. By the way, divs.get(0) and divs[0] return the DOM node, but divs.eq(0) still returns the jQuery object. Also, jQuery is not an array at heart, but an array-like object. --Karl Karl Swedberg www.englishrules.com www.learningjquery.com
[jQuery] Sortable help
This is sort of in reference to this (http://groups.google.com/group/
jquery-en/browse_thread/thread/8219bd3a3f106497) post. Also to note, I
am completely new to jQuery, but it's awesome!!!
Ok, why does the following work in jquery 1.2.6 (UI: jquery-ui-
personalized-1.6rc2.min.js) but not in 1.3.2? What do I need to edit/
redo to perform the same task.
(Working version but with 1.2.6:
http://james.padolsey.com/demo/tut-inettuts-with-cookies/)
makeSortable : function () {
var iNettuts = this,
$ = this.jQuery,
settings = this.settings,
$sortableItems = (function () {
var notSortable = '';
$(settings.widgetSelector,$(settings.columns)).each
(function (i) {
if (!iNettuts.getWidgetSettings(this.id).movable)
if(!this.id) {
this.id = 'widget-no-id-' + i;
}
notSortable += '#' + this.id + ',';
}
});
return $(' li:not(' + notSortable + ')',
settings.columns);
})();
$sortableItems.find(settings.handleSelector).css({
cursor: 'move'
}).mousedown(function (e) {
$sortableItems.css({width:''});
$(this).parent().css({
width: $(this).parent().width() + 'px'
});
}).mouseup(function () {
if(!$(this).parent().hasClass('dragging')) {
$(this).parent().css({width:''});
} else {
$(settings.columns).sortable('disable');
}
});
$(settings.columns).sortable({
items: $sortableItems,
connectWith: $(settings.columns),
handle: settings.handleSelector,
placeholder: 'widget-placeholder',
forcePlaceholderSize: true,
revert: 300,
delay: 100,
opacity: 0.8,
containment: 'document',
start: function (e,ui) {
$(ui.helper).addClass('dragging');
},
stop: function (e,ui) {
$(ui.item).css({width:''}).removeClass('dragging');
$(settings.columns).sortable('enable');
/* Save prefs to cookie: */
iNettuts.savePreferences();
}
});
},
Re: [jQuery] Re: background-color always returns transparent
That suggests that the selector that you are using to do your test is not
quite right. Throw in a console.log( elem ) in a judicious location and
find out what is being passed in.
On Wed, Jan 13, 2010 at 12:00 PM, John john.jian.f...@gmail.com wrote:
Yes, it does look right on screen. Also the wired thing is that if I
use
Firebug console to manually get the color by
$(#category-list li.division:eq(0) ul li:eq(0)).css(background-
color);
it returns the correct one, rgb(255, 0, 0). Not sure why it does not
work programmatically.
Thanks,
John
On Jan 13, 2:37 pm, John Arrowwood jarro...@gmail.com wrote:
But it LOOKS right on screen?
On Wed, Jan 13, 2010 at 10:22 AM, John john.jian.f...@gmail.com wrote:
Sorry for the confusion. Actually, the getColor is a function called
by another function,
which first checks all different css, if the css is color related and
the value is transparent, then
passes in the dom element, not jquery object, to the getColor function
to get back the
actual color. I did trace in firebug and the getColor did walk up to
the body, all nodes
returned transparent if I put the css style in the head. If I use in-
line css style, it works
fine.
Thanks,
John
On Jan 13, 10:42 am, John Arrowwood jarro...@gmail.com wrote:
Make sure you are passing in a document node and not a jQuery object.
if ( elem instanceof jQuery ) elem = elem.get(0);
If you were passing in a jQuery object, the 'parent =
parent.parentNode'
line would immediately set parent to null.
Also, shouldn't your getColor function return the color if it is set
on
elem, too, instead of always looking up the chain? Doesn't it make
more
sense to have one call, rather than putting some of your logic in the
function, and some outside of it?
function getColor( of, what ) {
var elem = of;
if ( elem instanceof jQuery ) elem = elem.get(0);
var color = null;
while ( elem != null ) {
color = $(elem).css(what);
if ( color != '' color != 'transparent' ||
jQuery.nodeName(elem,'body') ) break;
elem = elem.parentNode;
}
return color;
}
On Tue, Jan 12, 2010 at 11:12 AM, John john.jian.f...@gmail.com
wrote:
Sorry, I have to come back for this question. I have really wired
problem.
I implemented the getColor similar to the jQuery color plugin as
follows,
function getColor(elem, cssName){
var color = null;
if (elem != null) {
var parent = elem.parentNode;
while (parent != null) {
color = $(parent).css(cssName);
//or
// color = jQuery.curCSS(parent, cssName);
if (color != '' color != 'transparent' ||
jQuery.nodeName
(parent, body))
break;
parent = parent.parentNode;
}
}
return color;
};
If I use the background color inline such as
html
head
/head
body
div class=categories
div class=content
div class=body
ul id=category-list
li class=division
ul
li class=category selected
style=background-
color:red;
div class=title
a href=/suv
class=category-
suvSUVs (6)/a
/div
/li
li class=category category_69564
div class=title
a href=/4by4
class=category-
general4x4 (6)/a
/div
/li
li class=category category_73293
div class=title
a href=/hybrid
class=category-hybridHybrid/a
/div
/li
/ul
/li
/ul
/div
/div
/div
/body
/html
I can get back the background color of the element li
class=category selected correctly, i.e.,
rgb(255,0,0). However, if I move the css style to the head as
follows,
html
head
style type=text/css
.content .division .category.selected {
background-color: red;
}
/style
/head
I always get back the value transparent even with the getColor
method. I couldn't figure out
what was wrong and please help me with this. How can I get back the
background-color as
rgb(255,0,0) or red in the latter case.
Thanks in advance,
John
On Jan 11, 2:31 pm, John Arrowwood jarro...@gmail.com wrote:
As a QA tester with a lot of test automation experience, a bit
of
advice:
Ask if the product
[jQuery] Link Clicks Double Firing
I have a bit of code on one page to make an entire table cell a
clickable area to open a PDF in a new window. It works perfectly,
unless you click the actual physical link. If someone clicks the link,
it opens the link twice in two new windows. Inside the usual document
ready, I have:
$('#factsheets td').click(function() {
$(this).find('a').each(function(){
window.open(this.href);
return false;
});
});
And a snippet of code from the document:
table id=factsheets
tr
td rowspan=3 id=factsheetpreviewimg src=/includes/images/
placeholder_preview.gif width=306 height=396 //td
td class=listcella href=/index.cfm/event/getFactSheet/
whichfactsheet/41/ rel=/dropinn/thumbnails/factsheet_41.jpgSRAC
0230br /Alligator Production: An Introduction/a/td
/tr
/table
How can I fix it so that clicking on the link is considered just a
single click instead of two, so that only one window opens?
~~ Summer
[jQuery] Re: Link Clicks Double Firing
You'll want to unbind the click event for the link, this should work
$(#factsheets td a').unbind('click');
Since the link is inside the cell, a click on the link should still
trigger the link.
Let me know how it goes (I don't get to answer questions very often )
On Jan 13, 1:22 pm, Collectonian collecton...@gmail.com wrote:
I have a bit of code on one page to make an entire table cell a
clickable area to open a PDF in a new window. It works perfectly,
unless you click the actual physical link. If someone clicks the link,
it opens the link twice in two new windows. Inside the usual document
ready, I have:
$('#factsheets td').click(function() {
$(this).find('a').each(function(){
window.open(this.href);
return false;
});
});
And a snippet of code from the document:
table id=factsheets
tr
td rowspan=3 id=factsheetpreviewimg src=/includes/images/
placeholder_preview.gif width=306 height=396 //td
td class=listcella href=/index.cfm/event/getFactSheet/
whichfactsheet/41/ rel=/dropinn/thumbnails/factsheet_41.jpgSRAC
0230br /Alligator Production: An Introduction/a/td
/tr
/table
How can I fix it so that clicking on the link is considered just a
single click instead of two, so that only one window opens?
~~ Summer
[jQuery] Re: Link Clicks Double Firing
change window.open to window.location both the anchor tag and the javascript are interpreting the click, and the problem is that your anchor tag is opening the link in the same window, whereas your js was opening the link in a new window. actually, pedalpete's solution is more correct (as there is now only one item interpreting the click), and should be followed.
[jQuery] Re: Link Clicks Double Firing
ack, i just realized i misread pedalpete's solution; each click will only get interpreted once, but depending on where the click happens determines whether or not the a tag or the js will handle it. this smacks of wrongness. let's examine other ways to handle this: 1. expand the size of the a to completely fill the td, which is not a good solution if this requires placing a block element in an inline element 2. leave out the a tag completely, putting your link in the title of an existing element, which is semantically poor and may negatively impact accessibility 3. just hide the a tag, so it cannot be clicked on, which just doesnt seem palpable. h. 4. remove the a tag from the dom once the link is extracted, which seems a bit like the unnecessary kidney operation i had has a youth 5. remove the 'href' from the a tag once the link is extracted, not as invasive as #4 but still questionable i'd vote for #3 but don't really like any of these approaches. can anyone come up with a correct solution that will allow us all to sleep better at night???
[jQuery] Re: Read ajax response headers?
try to change the paramater name inside the success function, to
something like xhr,
for example:
...
success:function (data,xhr) {}
complele:function (xhr) {}
..
You uses XMLHttpRequest. Maybe the browser think about the native
object.
On Jan 13, 9:16 pm, bryan br...@resenmedia.com wrote:
Read ajax response headers?
How can I grab information from the response headers from within an
jQuery ajax callback?
I have an object, data, containing IDs to different items I'd like
to build a detailed list with. I need to grab these details by sending
a request to a server--one for each item.
The issue I'm running into, is the response from the server contains
half the information I need in the body of the response, and the other
half in the headers. I can't figure out a bullet-proof way of reading
the headers at the same time as the body...
Here's a look at what I'm working with:
function index(data) {
for (var i = 0; i data.length; i++) {
$.ajax({
type: 'GET',
url: 'http://domain.com/',
data: 'this=that',
success: function(data) {
/* Here I want to create a list item out of
the data returned in
the body and headers */
}, complete: function(XMLHttpRequest, textStatus) {
}, error: function() {
}
});
}
}
I've tried saving the $.ajax as a variable, and
using .getResponseHeader('name'), but that only works sometimes, and
other times returns Error: INVALID_STATE_ERR: DOM Exception 11,
which apparently means the headers aren't ready to be read. I've tried
this both in the success and complete function.
Any help would be incredibly awesome!
[jQuery] Re: javascript loaded via ajax
Yes.
Two options.
1. to remove function from the DOM:
window.functionname=null;
2. To create one-time functions, like:
(function (){
function a() {alert('a')}
function b() {alert('b')}
function c() {a();b();}
})();
the function a,b,c are relase after they run.
OR
(function (){
a=function() {alert('a')}
b=function() {alert('b')}
c=function() {a();b();}
})();
On Jan 13, 9:53 pm, nihal nihal.c...@gmail.com wrote:
hi
i have a div whose content is loaded via ajax..that content contains
html+javascript
the javascript contains a function called test()
when the content is loaded this function is added to the dom...now
when i remove the div using remove(); i am still able to run the
function test() as its still in the dom
is there anyway to remove the newly added function from the dom?
thanks for your help
Re: [jQuery] javascript loaded via ajax
On Wed, Jan 13, 2010 at 1:53 PM, nihal nihal.c...@gmail.com wrote:
is there anyway to remove the newly added function from the dom?
Wrap the code you want to be removeable in its own script element,
give it an id, then remove it just like any other element. As has been
discussed today, removing it doesn't mean *poof* it's gone, just that
it could be removed by the garbage collector, so you'll likely be able
to continue calling the function after it's been removed. See:
http://jsbin.com/ixite/edit
script id=removeMe type=text/javascript
function hello(msg) { alert(msg); }
/script
script type=text/javascript
$().ready(function() {
hello(one);
$(#removeMe).remove();
hello(two);
setTimeout(hello('three'), 2500);
});
/script
The code gets removed from the DOM (verified using Firebug) but the
function still works 2.5 seconds later.
Nathan
[jQuery] Tabbed view and Flash Movies
Hi anyone that can help! I'm stuck and not sure how to proceed. Here's the issue: I am using jQuery tabs (seven tabs in total), and loading in iframed pages into the tab with .flvs in them. That's all working, but the issue is that I can't figure out how to get the tab to unload, so if you click on one tab and start the movie, and then click on another tab and start another movie, they both play. I can't use .php to fix this due to constraints out of my control... I'm stuck with html, css and jQuery. Any ideas on a couple nice lines of code that I could use to get this to work? If you want to see the live example, please tell me and I will send it. -- View this message in context: http://old.nabble.com/Tabbed-view-and-Flash-Movies-tp27153555s27240p27153555.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: please can you help me with with :contains? :)
Bless yo :)
Very true, it didn't help me to understand :contains, but it makes
things so much simpler.
I just changed the if condition and everything works!
I am impressed you understood what I wanted :)
Thanks a lot!!!
On Jan 13, 6:00 pm, Nathan Klatt n8kl...@gmail.com wrote:
On Wed, Jan 13, 2010 at 10:54 AM, happysmile francesca.manc...@gmail.com
wrote:
It works only the first time you click on the button (changes from
'show' to 'hide'), while it remains almost always 'Hide' in all the
following clicks.
This won't help you understand :contains but I think it does what you want:
http://jsbin.com/udesu/edit
Assuming this markup:
p
button class=show_profileShow details/button
span class=directors_details style=display:none
br /details details details/span/p
The code:
$('.show_profile').click(function() {
// toggle link class to change the arrow background image
var jThis = $(this)
.toggleClass(hide_profile);
// toggle visibility profile
var jDetails = jThis.next('.directors_details')
.toggle();
// change show/hide text in the link
if (jDetails.is(:visible)) {
jThis.text(jThis.text().replace('Show','Hide'));
} else {
jThis.text(jThis.text().replace('Hide','Show'));
}
return false;
});
Nathan
[jQuery] Re: Link Clicks Double Firing
Hi Bill,
I'm still learning lots, and was hoping you could better explain what
was wrong with my solution (as it seems the other solutions are FAR
more complicated.
What I was trying to acheive was to just disable the link for
javascript enabled browser, and keep it enabled for those without
javascript.
As the link is inside the cell, and the javascript action is triggered
on any click within the cell, I believe my recommendation should work
well in all instances.
I believe with .unbind('click'), the click on a link will not be
interpreted at all, and that the JS will always take the action.
I may be misunderstanding what is happening under the covers, but what
I recommend does not unbind after a click, it would unbind the clicks
at load time if I've got it right.
[jQuery] Re: jQuery Form Plugin
Use Firebug to see what data is actually being posted to the server. in update_homepage.php i save data to mysqldb. But if i click to submit buton, i see in div id=odezva/div OK echo from update_homepage.php, but in db is only first (Nadpis) field of form. And (!!!) if i click to this button second time go to db also second field! If i close Javascript - all is right - the page is reloaded and all data are in db. Can you help me? I want ofcourse send all data of first click. Zhank you very much!
[jQuery] Jquery Scrollable Customized - Errors
Hello, I am using the following plugin: flowplayer.org/tools/scrollable.html I've slightly customized it by removing the tabs, and using image buttons. you can view my work here: http://getitnow4free.com/FreeWebsite/Page2.html If you keep hitting next template and previous template buttons in order to cycle through all of the available templates, you will notice that the templates and preview, download buttons move more and more out of place the more you cycle through them. Can anyone tell me why this is and how to fix it? I also notice that when I click the preview template button for a template, it cycles on to the next template automatically. I don't want that. I would like for the template to remain in the window until next or previous is hit. Can anyone help me with these issues? -- View this message in context: http://old.nabble.com/Jquery-Scrollable-Customized---Errors-tp27154403s27240p27154403.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: jQuery 1.2.6 clone problem with internet explorer.
This clone() works for me in ie 6.0 :). May be C.fx.step is an
element in your page and IE 6 can't find it for some reason?
head
script src=../scripts/jquery-1.3.2.js type=text/javascript/
script
script type=text/javascript
$(document).ready(function() {
$(#btnCloneIt).click(function() {
$(#container).append($(#toBeCloned).clone());
});
});
/script
/head
body
div id=container
div id=toBeClonedI am a clone/div
/div
input type=button value=Clone It id=btnCloneIt
name=btnCloneIt /
/body
On Jan 14, 4:51 am, m.ugues m.ug...@gmail.com wrote:
Hallo all.
When i call the clone() function in Internet Explorer jQuery
meltdowns :(
The error reported in ie6 is:
C.fx.step is null or not an object.
Any idea how to fix the problem?
Kind regards
Massimo
[jQuery] Re: jQuery 1.2.6 clone problem with internet explorer.
Sorry, I just noticed you are using 1.2.6. Ignore my reply.
On Jan 14, 11:26 am, Jules jwira...@gmail.com wrote:
This clone() works for me in ie 6.0 :). May be C.fx.step is an
element in your page and IE 6 can't find it for some reason?
head
script src=../scripts/jquery-1.3.2.js type=text/javascript/
script
script type=text/javascript
$(document).ready(function() {
$(#btnCloneIt).click(function() {
$(#container).append($(#toBeCloned).clone());
});
});
/script
/head
body
div id=container
div id=toBeClonedI am a clone/div
/div
input type=button value=Clone It id=btnCloneIt
name=btnCloneIt /
/body
On Jan 14, 4:51 am, m.ugues m.ug...@gmail.com wrote:
Hallo all.
When i call the clone() function in Internet Explorer jQuery
meltdowns :(
The error reported in ie6 is:
C.fx.step is null or not an object.
Any idea how to fix the problem?
Kind regards
Massimo
Re: [jQuery] Re: Link Clicks Double Firing
What I'm assuming is happening here is that the even tied to the a tag is
firing as well as the click tied to the cell.
It appears as though two windows are opened because the page you're
currently on goes to the PDF and a new window is opened with the PDF.
The easiest solution would be to add return false; to the bottom of the
click function.
You currently have the return false inside the each function. This isn't
working due to scope.
$('#factsheets td').click(function() {
$(this).find('a').each(function(){
window.open(this.href);
return false;
});
return false; // stop the link from redirecting the page
});
This would do it, and is unobtrusive as well.
Though, since there is only one a inside the cell, you might consider
rewriting your code a little bit. Something more like:
$(#factsheets).find(td).click(
function () {
window.open( $(this).find(a).attr(href) ); // open the PDF
return false; // prevent the link from redirecting
}
);
Hopefully this makes sense to you.
Thanks,
Matt
On Wed, Jan 13, 2010 at 5:38 PM, pedalpete p...@hearwhere.com wrote:
Hi Bill,
I'm still learning lots, and was hoping you could better explain what
was wrong with my solution (as it seems the other solutions are FAR
more complicated.
What I was trying to acheive was to just disable the link for
javascript enabled browser, and keep it enabled for those without
javascript.
As the link is inside the cell, and the javascript action is triggered
on any click within the cell, I believe my recommendation should work
well in all instances.
I believe with .unbind('click'), the click on a link will not be
interpreted at all, and that the JS will always take the action.
I may be misunderstanding what is happening under the covers, but what
I recommend does not unbind after a click, it would unbind the clicks
at load time if I've got it right.
[jQuery] Re: Tabbed view and Flash Movies
This is completely untested, but it would seem to make sense to work
Given this HTML
div id=tabs
ul
lia href=video1.phpTab 1/a/li
lia href=video2.phpTab 2/a/li
lia href=video3.phpTab 3/a/li
/ul
div/div
div/div
div/div
/div
then
$(document).ready(function() {
$(#tabs).tabs({
select: function(event, ui) {
$(#tabs ul li).each(function(i) {
if (ui.index != i) {
$(#tabs div:nth-child( + (i+1) + )).html
();
}
});
};
});
});
On Jan 13, 6:01 pm, DaveMK davemarc...@hotmail.com wrote:
Hi anyone that can help!
I'm stuck and not sure how to proceed. Here's the issue:
I am using jQuery tabs (seven tabs in total), and loading in iframed pages
into the tab with .flvs in them. That's all working, but the issue is that I
can't figure out how to get the tab to unload, so if you click on one tab
and start the movie, and then click on another tab and start another movie,
they both play.
I can't use .php to fix this due to constraints out of my control... I'm
stuck with html, css and jQuery. Any ideas on a couple nice lines of code
that I could use to get this to work?
If you want to see the live example, please tell me and I will send it.
--
View this message in
context:http://old.nabble.com/Tabbed-view-and-Flash-Movies-tp27153555s27240p2...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] What is the proper way to write this if statement?
Want to check if the current links parent, which would be a list item
in my case, has an unordered list or not.. Am looking for all the ones
without unordered lists...
if($(this).parent().not(has(ul))){
$(this).addClass(active);
}
Re: [jQuery] javascript loaded via ajax
Removing a script element just removes the script's *source code* from the
DOM. It doesn't undo any actions that the script has already performed, such
as defining functions or variables or creating other DOM elements. It
doesn't change their availability for garbage collection at all.
In your example, the hello function will never be garbage collected, because
the window object has a property named 'hello' that holds a reference to the
function.
As Ami mentioned you can null out that window.hello property or use the
delete operator on it, or better, use the (function() { /* code here */
})(); wrapper to avoid setting global properties.
-Mike
On Wed, Jan 13, 2010 at 2:40 PM, Nathan Klatt n8kl...@gmail.com wrote:
On Wed, Jan 13, 2010 at 1:53 PM, nihal nihal.c...@gmail.com wrote:
is there anyway to remove the newly added function from the dom?
Wrap the code you want to be removeable in its own script element,
give it an id, then remove it just like any other element. As has been
discussed today, removing it doesn't mean *poof* it's gone, just that
it could be removed by the garbage collector, so you'll likely be able
to continue calling the function after it's been removed. See:
http://jsbin.com/ixite/edit
script id=removeMe type=text/javascript
function hello(msg) { alert(msg); }
/script
script type=text/javascript
$().ready(function() {
hello(one);
$(#removeMe).remove();
hello(two);
setTimeout(hello('three'), 2500);
});
/script
The code gets removed from the DOM (verified using Firebug) but the
function still works 2.5 seconds later.
Nathan
[jQuery] Plugin design pattern (common practice?) for dealing with private functions
Hey all,
I've been developing jQuery plugins for quite some time now, and I
like to think I got pretty good at it. One issue keeps nagging me
though, and that is how to deal with private functions in a powerful
yet elegant manner.
My plugins generally look something like this:
(function($) {
$.fn.myplugin = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'green');
...
};
$.fn.mypluginAnotherPublicMethod = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'red');
...
};
}(jQuery);
Now my question is: how to neatly DRY up that shared functionality? An
obvious solution would be to put it in a function within the plugin's
namespace:
var fill = function($obj, color) {
$obj.css('background-color', color);
};
Although this solution is effective and nicely namespaced, I really
dislike it. For one simple reason: I have to pass it the jQuery
object. I.e. I have to call it like this:
fill(this, 'red');
While I would like to call it like this:
this.fill('red');
Of course we could achieve this result by simply putting 'fill' into
jQuery.fn. But that feels very uncomfortable. Imagine having ten
plugins developed based on this approach and each plugin putting five
of those 'private' functions into the jQuery function namespace. It
ends up in a big mess. We could mitigate by prefixing each of these
functions with the name of the plugin they belong to, but that doesn't
really make it more attractive. These functions are supposed to be
private to the plugin, so we do not want to expose them to the outside
world at all (at least not directly).
So there's my question: does anyone of you have suggestions for how to
get the best of both worlds. So being able to call 'private' plugin
function in a way similar to this.fill('red') (or this.myplugin.fill
('red') or even this.myplugin().fill('red') etc.), while preventing
jQuery function namespace pollution. And of course it should be light-
weight, as these private functions might be called very frequently.
Thanks for your ideas.
Regards,
Tim Molendijk
[jQuery] Re: What is the proper way to write this if statement?
Everything that I've seen says you have to check the length of the
element you are looking for.
So I think you want
pre
if($(this).parents('ul').length==0){
$(this).addClass(active);
}
/pre
If a parent UL was found, the length would be 0
Re: [jQuery] Re: What is the proper way to write this if statement?
This is correct.
I actually wrote a few jQuery extensions that handle this.
The code is:
$.fn.extend({
// checks to see if an element exists
// if no callback is supplied, returns
// a boolean value stating if the element
// exists, otherwise executes the callback
exists: function (callback) {
if (typeof( callback ) === function) {
if (this.length 0) { callback.call( this ); }
return this;
}
else { return this.length 0; }
},
// checks to see if an element does not
// exist. if no callback is supplied, returns
// a boolean value stating if the element does
// not exists, otherwise, executes the callback
absent: function (callback) {
if (typeof( callback ) === function) {
if (this.length === 0) { callback(); }
return this;
}
else { return this.length === 0; }
}
});
Syntax would be
var that = this; // scope
$(this).parents(ul).absent(
function () {
$(that).addClass(active);
}
);
or if you needed to do an if/else type scenario:
var that = this;
$(this).parents(ul).exists(
function () {
// this === $(this)
this.removeClass(active);
}
).absent(
function () {
$(that).addClass(active);
}
);
Or you could also use the function to return a boolean value:
$(this).parent(ul).exists(); // true if ul is present
$(this).parent(ul).absent(); // true if no ul is present
Thanks,
Matt
On Wed, Jan 13, 2010 at 6:52 PM, pedalpete p...@hearwhere.com wrote:
Everything that I've seen says you have to check the length of the
element you are looking for.
So I think you want
pre
if($(this).parents('ul').length==0){
$(this).addClass(active);
}
/pre
If a parent UL was found, the length would be 0
Re: [jQuery] Plugin design pattern (common practice?) for dealing with private functions
Maybe try using something like:
$.myplugin.fill.call( this, red );
On Wed, Jan 13, 2010 at 6:47 PM, Tim Molendijk taw.molend...@gmail.comwrote:
Hey all,
I've been developing jQuery plugins for quite some time now, and I
like to think I got pretty good at it. One issue keeps nagging me
though, and that is how to deal with private functions in a powerful
yet elegant manner.
My plugins generally look something like this:
(function($) {
$.fn.myplugin = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'green');
...
};
$.fn.mypluginAnotherPublicMethod = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'red');
...
};
}(jQuery);
Now my question is: how to neatly DRY up that shared functionality? An
obvious solution would be to put it in a function within the plugin's
namespace:
var fill = function($obj, color) {
$obj.css('background-color', color);
};
Although this solution is effective and nicely namespaced, I really
dislike it. For one simple reason: I have to pass it the jQuery
object. I.e. I have to call it like this:
fill(this, 'red');
While I would like to call it like this:
this.fill('red');
Of course we could achieve this result by simply putting 'fill' into
jQuery.fn. But that feels very uncomfortable. Imagine having ten
plugins developed based on this approach and each plugin putting five
of those 'private' functions into the jQuery function namespace. It
ends up in a big mess. We could mitigate by prefixing each of these
functions with the name of the plugin they belong to, but that doesn't
really make it more attractive. These functions are supposed to be
private to the plugin, so we do not want to expose them to the outside
world at all (at least not directly).
So there's my question: does anyone of you have suggestions for how to
get the best of both worlds. So being able to call 'private' plugin
function in a way similar to this.fill('red') (or this.myplugin.fill
('red') or even this.myplugin().fill('red') etc.), while preventing
jQuery function namespace pollution. And of course it should be light-
weight, as these private functions might be called very frequently.
Thanks for your ideas.
Regards,
Tim Molendijk
Re: [jQuery] Plugin design pattern (common practice?) for dealing with private functions
Also, more information on the call function (if you're not familiar with it)
can be found here:
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Function/call
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Function/callYou
could also use the apply function:
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Function/apply
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Function/applyIf
you need any other help with that or don't understand my example, let me
know.
Thanks,
Matt
On Wed, Jan 13, 2010 at 7:04 PM, Matt Maxwell leftwithoutli...@gmail.comwrote:
Maybe try using something like:
$.myplugin.fill.call( this, red );
On Wed, Jan 13, 2010 at 6:47 PM, Tim Molendijk taw.molend...@gmail.comwrote:
Hey all,
I've been developing jQuery plugins for quite some time now, and I
like to think I got pretty good at it. One issue keeps nagging me
though, and that is how to deal with private functions in a powerful
yet elegant manner.
My plugins generally look something like this:
(function($) {
$.fn.myplugin = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'green');
...
};
$.fn.mypluginAnotherPublicMethod = function(...) {
...
// some shared functionality, for example:
this.css('background-color', 'red');
...
};
}(jQuery);
Now my question is: how to neatly DRY up that shared functionality? An
obvious solution would be to put it in a function within the plugin's
namespace:
var fill = function($obj, color) {
$obj.css('background-color', color);
};
Although this solution is effective and nicely namespaced, I really
dislike it. For one simple reason: I have to pass it the jQuery
object. I.e. I have to call it like this:
fill(this, 'red');
While I would like to call it like this:
this.fill('red');
Of course we could achieve this result by simply putting 'fill' into
jQuery.fn. But that feels very uncomfortable. Imagine having ten
plugins developed based on this approach and each plugin putting five
of those 'private' functions into the jQuery function namespace. It
ends up in a big mess. We could mitigate by prefixing each of these
functions with the name of the plugin they belong to, but that doesn't
really make it more attractive. These functions are supposed to be
private to the plugin, so we do not want to expose them to the outside
world at all (at least not directly).
So there's my question: does anyone of you have suggestions for how to
get the best of both worlds. So being able to call 'private' plugin
function in a way similar to this.fill('red') (or this.myplugin.fill
('red') or even this.myplugin().fill('red') etc.), while preventing
jQuery function namespace pollution. And of course it should be light-
weight, as these private functions might be called very frequently.
Thanks for your ideas.
Regards,
Tim Molendijk
[jQuery] Re: What is the proper way to write this if statement?
On Jan 14, 11:00 am, Matt Maxwell leftwithoutli...@gmail.com wrote: [...] var that = this; // scope The value of the this keyword has nothing whatever to do with scope. -- Rob
[jQuery] Re: What is the proper way to write this if statement?
Thanks guys!! Got it working..
On Jan 13, 7:00 pm, Matt Maxwell leftwithoutli...@gmail.com wrote:
This is correct.
I actually wrote a few jQuery extensions that handle this.
The code is:
$.fn.extend({
// checks to see if an element exists
// if no callback is supplied, returns
// a boolean value stating if the element
// exists, otherwise executes the callback
exists: function (callback) {
if (typeof( callback ) === function) {
if (this.length 0) { callback.call( this ); }
return this;}
else { return this.length 0; }},
// checks to see if an element does not
// exist. if no callback is supplied, returns
// a boolean value stating if the element does
// not exists, otherwise, executes the callback
absent: function (callback) {
if (typeof( callback ) === function) {
if (this.length === 0) { callback(); }
return this;}
else { return this.length === 0; }
}
});
Syntax would be
var that = this; // scope
$(this).parents(ul).absent(
function () {
$(that).addClass(active);}
);
or if you needed to do an if/else type scenario:
var that = this;
$(this).parents(ul).exists(
function () {
// this === $(this)
this.removeClass(active);}
).absent(
function () {
$(that).addClass(active);}
);
Or you could also use the function to return a boolean value:
$(this).parent(ul).exists(); // true if ul is present
$(this).parent(ul).absent(); // true if no ul is present
Thanks,
Matt
On Wed, Jan 13, 2010 at 6:52 PM, pedalpete p...@hearwhere.com wrote:
Everything that I've seen says you have to check the length of the
element you are looking for.
So I think you want
pre
if($(this).parents('ul').length==0){
$(this).addClass(active);
}
/pre
If a parent UL was found, the length would be 0
Re: [jQuery] Re: What is the proper way to write this if statement?
You're right. This was a small oversight on my end, though, it would have been a little more helpful to the OP if you had provided an explanation with your reply. :) The reason I use var that = this; is not for scope but rather to ensure that the proper object is being referenced inside the function. Thanks, Matt On Wed, Jan 13, 2010 at 7:12 PM, RobG rg...@iinet.net.au wrote: On Jan 14, 11:00 am, Matt Maxwell leftwithoutli...@gmail.com wrote: [...] var that = this; // scope The value of the this keyword has nothing whatever to do with scope. -- Rob
Re: [jQuery] javascript loaded via ajax
On Wed, Jan 13, 2010 at 6:45 PM, Michael Geary m...@mg.to wrote: In your example, the hello function will never be garbage collected, because the window object has a property named 'hello' that holds a reference to the function. Thanks for the correction. Nathan
[jQuery] Re: Why is this demo doesn't work?
thanks MorningZ but I am still kinda hoping that gets fixed for further inconvinience... take care On 2009년12월14일, 오후10시43분, MorningZ morni...@gmail.com wrote: Use one of the links listed on this page instead: http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery
[jQuery] jQuery stripping HTML tags from Ajax response
Hi,
Here's what I'm working with (#thing is a table):
$.get(/applications/stuff.php,
{ '_request':'thing', 'id':id, 'otherid':$('#otherid').val() },
function(data) {
$('#thing').append(data);
}
$(#thing).show();
});
The PHP file returns a table row:
tr
tda href=something1234/a/td
tdThing Name/td
/tr
When I add 'alert(data);' to my return function it shows that whole
HTML thing with tr's td's.
But what gets appended is:
a href=something1234/aThing Name
So all the HTML tags are gone.
Anyone know why?
Thanks.
[jQuery] Re: jQuery stripping HTML tags from Ajax response
Is #thing a THEAD or TBODY tag? That would be the only valid place to append a TR.
[jQuery] jQuery Cycle categorized Pager
Hello everyone, I've recently discovered the power of jQuery plug-in cycle, and I'm enjoying it. However, tonight I faced an obstacle trying to achieve something. Basically, what I want to do, is to split the pager for a single slideshow into multiple parts, each containing only a some of the slides: essentially, in my idea, the thumbnailed pager appears on the side of the slideshow, and the thumbnails appear beneath some heading tags depending on their category. For example, I have a slideshow with pictures about, say, beaches, mountains and people: the slideshow cycles randomly among all the pictures, but the pager is ordered as to display pictures about beaches in one row, pictures about mountains in the next row and pictures about people in the last row. I have tried manually creating the pager, but, though the cycling works, the pager itself is not interactive: you cannot click on it to change the pictures, as a default numbered pager appears on it if I don't specify any pagerAnchorBuilder. At the beginning I thought I had solved it by hiding this with the css, but I realized that, though the visualization works, nor hovering nor clicking changes the picture. So I tried to make the pagerAnchorBuilder function loop through the idxes and eachtime check if a specified class was there (i.e. beaches, mountains or people) and then return something different. But that, either, didn't work. I'm a bit puzzled on how I could do this and any help would be greatly appreciated. Thanks, Lucio Giannotta
[jQuery] Re: Read ajax response headers?
Hmmm, I tried what you suggested, but I don't believe it does anything
but change the name of the variable inside the callback function. The
same data is being passed.
On Jan 13, 2:34 pm, Ami aminad...@gmail.com wrote:
try to change the paramater name inside the success function, to
something like xhr,
for example:
...
success:function (data,xhr) {}
complele:function (xhr) {}
..
You uses XMLHttpRequest. Maybe the browser think about the native
object.
On Jan 13, 9:16 pm, bryan br...@resenmedia.com wrote:
Read ajax response headers?
How can I grab information from the response headers from within an
jQuery ajax callback?
I have an object, data, containing IDs to different items I'd like
to build a detailed list with. I need to grab these details by sending
a request to a server--one for each item.
The issue I'm running into, is the response from the server contains
half the information I need in the body of the response, and the other
half in the headers. I can't figure out a bullet-proof way of reading
the headers at the same time as the body...
Here's a look at what I'm working with:
function index(data) {
for (var i = 0; i data.length; i++) {
$.ajax({
type: 'GET',
url: 'http://domain.com/',
data: 'this=that',
success: function(data) {
/* Here I want to create a list item out of
the data returned in
the body and headers */
}, complete: function(XMLHttpRequest, textStatus) {
}, error: function() {
}
});
}
}
I've tried saving the $.ajax as a variable, and
using .getResponseHeader('name'), but that only works sometimes, and
other times returns Error: INVALID_STATE_ERR: DOM Exception 11,
which apparently means the headers aren't ready to be read. I've tried
this both in the success and complete function.
Any help would be incredibly awesome!
[jQuery] Re: ANNOUNCE: new rev of credit card validation extension
On Jan 14, 3:29 am, Jack Killpatrick j...@ihwy.com wrote:
Hi All,
We've released a new version of our jQuery Validation plugin credit card
extension.
It is likely that such validation is more hassle than it's worth...
Changes include:
1. updated card prefixes (including latest Discover Card changes)
2. support for LaserCard
...because you have to keep upadting the data and possibly the
algorithms and the data object structure if it turns out it isn't
suitable - perhaps cards have different rules depending on the prefix
or number of characters, the plugin data structure can't handle that.
If this is intended for an online payment system, it is more effective
to just give the data to the payment system and let it work it out.
Otherwise you are potentially preventing users from accessing the
payment system even though their details are valid and you can't be
sure that you've prevented invalid data being sent - so what do you
really gain?
The code itself seems a bit verbose and has redunant checks, e.g.
value = value.replace(/[\s-]/g, ); // remove spaces and dashes
if (value.length == 0) { return false; } // no length
/* RG
This test is redundant. If the cardNumber has fewer than the required
number of digits it will fail the test below.
*/
var cardNo = value;
/* RG
value has already beem modified from the value passed, there doesn't
seem much point in protecting its value now.
*/
var cardexp = /^[0-9]{13,19}$/;
if (!cardexp.exec(cardNo)) { return false; } // has chars or wrong
length
cardNo = cardNo.replace(/\D/g, ); // strip down to digits
/* RG
cardNo has already had spaces removed and been checked to ensure
that it contains only digits. What is left to remove? Also, the two
tests use different (though likely practically identical)
patterns: [0-9] vs \D.
*/
The code implementing the Mod 10 algorithm is inefficient and verbose,
some comments:
var checksum = 0;
var mychar = ;
mychar is not used.
var j = 1;
var calc;
for (i = cardNo.length - 1; i = 0; i--) {
calc = Number(cardNo.charAt(i)) * j;
There is no need for the call to Number(), multiplication will convert
the string to a number anyway.
if (calc 9) {
checksum = checksum + 1;
calc = calc - 10;
}
checksum = checksum + calc;
All of that can be replaced with:
checksum += (calc 9)? calc - 9 : calc;
The line:
if (j == 1) { j = 2 } else { j = 1 };
That can be:
j = (j%2) + 1;
}
if (checksum % 10 != 0) { return false; } // not mod10
Consider:
return !(checksum%10);
or perhaps:
return /0$/.test(checksum);
If the function is called frequently, the regExp can be stored in a
closure - whatever suits. An alternative Mod 10 implementation is:
var acc = cardNo.split('');
var i = acc.length;
var j = 0;
var n;
var sum = 0;
while (i--) {
n = (j++ % 2)? acc[i] * 2 : acc[i];
sum += (n 10)? n - 0 : n - 9;
}
return !(sum%10);
The prefix and length checks can also be done in less code (4 or 5
lines) and more efficiently using regular expressions.
--
Rob
Re: [jQuery] Tabbed view and Flash Movies
Thanks for the response! I ended up calling a lifeline friend and he helped
me figure it out. Very similar to your solution.
Again, much appreciated!
MorningZ wrote:
This is completely untested, but it would seem to make sense to work
Given this HTML
div id=tabs
ul
li video1.php Tab 1 /li
li video2.php Tab 2 /li
li video3.php Tab 3 /li
/ul
div/div
div/div
div/div
/div
then
$(document).ready(function() {
$(#tabs).tabs({
select: function(event, ui) {
$(#tabs ul li).each(function(i) {
if (ui.index != i) {
$(#tabs div:nth-child( + (i+1) + )).html
();
}
});
};
});
});
On Jan 13, 6:01 pm, DaveMK davemarc...@hotmail.com wrote:
Hi anyone that can help!
I'm stuck and not sure how to proceed. Here's the issue:
I am using jQuery tabs (seven tabs in total), and loading in iframed
pages
into the tab with .flvs in them. That's all working, but the issue is
that I
can't figure out how to get the tab to unload, so if you click on one tab
and start the movie, and then click on another tab and start another
movie,
they both play.
I can't use .php to fix this due to constraints out of my control... I'm
stuck with html, css and jQuery. Any ideas on a couple nice lines of code
that I could use to get this to work?
If you want to see the live example, please tell me and I will send it.
--
View this message in
context:http://old.nabble.com/Tabbed-view-and-Flash-Movies-tp27153555s27240p2...
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
--
View this message in context:
http://old.nabble.com/Tabbed-view-and-Flash-Movies-tp27153555s27240p27157157.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
