[jQuery] Re: mediocre css skills combined with noob to jquery and .cycle
ok...solved the issue of timing. the system we use is placing br tags in spite of the fact that this was all coded in their html module. i got around it by eliminating all returns and spaces in the code. (the a tags had nothing to do with the timing issues...only the spaces and returns...just in case someone else runs into a similar issue) i'm still having a strange issue with all four images loading initially on top of each other, and then moving into the slideshow. can you shed some light on why that might be? On Nov 13, 4:54 pm, danny.copel...@gmail.com danny.copel...@gmail.com wrote: ### Insight: Cycle is trying to fade those break tags as well. It just finds all direct children of #homepage, in your case, and those are the a tags and the br tags... On Nov 13, 5:52 pm, danny.copel...@gmail.com danny.copel...@gmail.com wrote: Oh, wait! No, what the actual problem is is that you have brs after each anchor...remove those and you should be golden. You can still play around with the delay option to get the timing right afterwards. Also, those are HTML break tags, if yr ever going to use that to give content a line-break, pls use br /, which is valid XHTML - the same as your DOCTYPE declares. Good luck! Dan
[jQuery] mediocre css skills combined with noob to jquery and .cycle
so, i found this while looking for a non-flash method of doing
hyperlinked slideshows for our website.
i have gotten the basic function to work, but i'm having some issues
with setting this up the way i'd like to. because we will eventually
have more than one slideshow on certain pages, i made slideshow a
class thinking we could call versions of the class and name them for
the various shows. e.g. .slideshow.wedding
and .slideshow.churchinstall, etc.
i'm having two issues. i could not seem to make that work, first of
all. second, i cannot figure out how to pass the various code like
timeout/delay/etc for each specific slideshow.
for now i have dumbed myself down as much as possible and have one
slideshow. our site is through Volusion, which may have something to
do with it. they give us a template page inside which all other pages
fall.
here's the code i have in the head section:
script type=text/javascript src=http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.min.js/script
!-- include Cycle plugin --
script type=text/javascript src=http://cloud.github.com/downloads/
malsup/cycle/jquery.cycle.all.2.72.js/script
script type=text/javascript
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp,
shuffle, etc...
});
});
/script
i also call the .css file here.
here's the code from the page:
h3test/h3
div class=slideshow
a
href=http://www.midweststereo.com/Roland_Shoulder_Synthesizer_p/
roland-ax-synth.htmimg src=/v/vspfiles/assets/images/
axsynth_2.jpg/a
a href=http://www.midweststereo.com/Amplifiers_s/75.htm;img
src=/v/vspfiles/assets/images/amps_man.jpg//a
a href=http://www.midweststereo.com/
Pioneer_Professional_Multimedia_Player_p/pioneer-mep-7000.htmimg
src=/v/vspfiles/assets/images/mep7000-2.jpg//a
a
href=http://www.midweststereo.com/Samson_Portable_PA_System_p/
samson-xp308i.htmimg src=/v/vspfiles/assets/images/
samson_revised.jpg//a
/div
here's the .css code:
.slideshow {
height: 22px;
width: 575px;
padding: 0px;
margin: 0px;
}
.slideshow img {
padding: 0px;
border: none;
background-color: #ff;
width: 575px;
height: 225px;
top: 0px;
left: 0px;
}
and here's the url to the test page.
https://www.midweststereo.com/Articles.asp?ID=170
i am getting the .slideshow img section to work. i can play with it
and it does whatever i do. however, if i make any adjustments to
the .slideshow section it doesn't seem to do anything.
and i guess my big question regarding the timing for fadeout, etc
is...can i put that into the .css file so that i can have different
parameters for each slideshow? or is there a way to put that in the
html code? and how do i pass that info? i'm reading like crazy,
found this google group, and am still out on the web looking for
answers. i greatly appreciate any help.
sorry for the sort of long post.
[jQuery] Is it possible to sort columns by a row using jQuery
for example when row two is clicked I would like the table to reorder a, b, c, d table tr tdcol 1/td tdcol 2/td tdcol 3/td tdcol 4/td /tr tr tdb/td tda/td tdd/td tdc/td /tr tr tdz/td tdx/td tdy/td tdw/td /tr /table
[jQuery] trouble calling a function
Hello
I am trying to set up a toggle to allow users to show more precision
when a user clicks a button. I have a function high() that doesn't do
anything when it is called. I am fairly new to jQuery so I am not to
familiar with the syntax and am hoping that you can help me.
var numeric_data = new Array();
$('.numeric', this).each(function() {
data = parseFloat($(this).text());
numeric_data.push(data)
});
i = 0;
this works
$('.numeric', this).each(function() {
data = numeric_data[i];
data = data.toFixed(2);
$(this).text(data);
i++;
});
i = 0;
this doesn't work
high = function(){
$('.numeric', this).each(function() {
data = numeric_data[i];
data = data.toFixed(5);
$(this).text(data);
i++;
});
}
high();
thanks,
Nate
[jQuery] Re: trouble calling a function
Excellent! that works. Thanks for the fast response. Nate
[jQuery] Access to variables hidden by scope in a jQuery Javascript function
I'm trying to edit an existing jQuery plugin. As a brief explanation,
this plugin turns a regular Table into a TreeTable - a table with a
hierarchy, similar to a folder browser, except with the additional
columns. So there are parameters for which row is the parent of which
other row, etc.
I'm still pretty new to jQuery so I may be interpreting this
incorrectly, but it looks to me like when I call the jqTreeTable
function on a tbody, it performs its work and returns a new object
that takes the place of the original tbody.
So! To get to my question, I am trying to add expand all and
collapse all functionality to this plugin, but I'm unsure how to add
these hooks into a closed function, because I need access to internal
variables in the closed function in order to do the work. One solution
that occurred to me was that I might setup some empty links with
unique ids, pass those links into the jqTreeTable function along with
the other parameters, and then alter the links to point at internal
functions that do the work. That doesn't seem very clean (and maybe
impossible?). I also tried altering the function to have another
parameter that specified whether I wanted the table built (initial
call), or whether I wanted to expand or collapse all nodes (subsequent
calls). I couldn't figure out how to access the original internal
variables - I just created a new scope every time I called the
function.
Here is a simplified version of the plugin:
(function(jq){
jq.fn.jqTreeTable = function(options){
var /*a bunch of stuff*/ x,
expandKids = function(num, last){//Expands immediate children,
and their uncollapsed children
jq(# + tid + num).attr(src, (last) ?
opts.lastOpenImg : opts.openImg);//
for (var x = 0, xl = mapa[num].length; x xl; x++) {
var mnx = mapa[num][x];
jq(# + tid + mnx).parents(tr).removeClass
(collapsed);
if (mapa[mnx] opts.state jq.inArray(mnx,
collarr) 0) {If it is a parent and its number is not in the
collapsed array
arguments.callee(mnx, (x == xl - 1));//Expand it.
More intuitive way of displaying the tree
}
}
},
collapseKids = function(num, last){//Recursively collapses all
children and their children and change icon
jq(# + tid + num).attr(src, (last) ?
opts.lastShutImg : opts.shutImg);
for (var x = 0, xl = mapa[num].length; x xl; x++) {
var mnx = mapa[num][x];
jq(# + tid + mnx).parents(tr).addClass
(collapsed);
if (mapa[mnx]) {//If it is a parent
arguments.callee(mnx, (x == xl - 1));
}
};
};
/* build the tree table */
};
return this;
})(jQuery);
which gets called like this:
$(#treet1).jqTreeTable(options);
where 'treet1' is an id on a tbody. I want to write a function that
can make subsequent calls to expandKids and collapseKids that operate
on the same internal variables.
To sum up: it seems to me that this jquery plugin is returning an
altered tbody with a set of closed functions that do the work. I want
to add some functions that I can call externally, but which have
access to the internal arrays and variables of the other function.
Some of these assumptions may be incorrect since I'm no jquery master,
so please enlighten me.
Here is the link to the original project if you feel the need to take
a look:
http://www.hanpau.com/index.php?page=jqtreetable
[jQuery] Clone tr w/ New Data
I have a table set up like so:
table id=groups
tr
tdGroup Name/td
tdOptions/td
/tr
tr
td class=tbldata/td
td class=tbldata/td
/tr
/table
I'm using Impromptu to pop up a message when you click Add New
Group. You type in the group name, and then submit. It posts to a
PHP file, and then returns that posted info in JSON format.
How do I put in that data that is returned into the two empty td
columns?
here is the jQuery code I have so far - and it does duplicate my last
TR, which is what I want..but now I need that data that is returned to
me from my PHP file:
$.post(addressbook_addgroup.php, { groupname:f.groupname },
function(data){
$(#groups tr:last).clone(true).insertAfter(#groups tr:last);
}, 'json');
So when all is said and done, my last TR there would return a NEW tr
that looks like this:
tr
td class=tbldataNew Group Name/td
td class=tbldataedit/td
/tr
[jQuery] Clone and Replace
I have a table that is dynamically populated by PHP and MySQL.
At the bottom, I've created an empty table row: tr/tr
I have a jQuery function that posts data to a PHP file. When the PHP
file returns true, I want it to clone that emtpy table row, and then
manipulate it by giving the table row an ID.
For example, that empty table row would clone (creating an additional
empty table row for future use), and then look like tr
id=group34tddata here/td/tr
Here's the jQuery I have now, however, it creates the tr with no ID:
$.post(addgroup.php, { groupname:f.groupname },
function(data){
$(#groups tr:last)
.clone(true)
.insertAfter(#groups tr:last)
.fadeIn(fast)
.html('tdspan'+
'a href=javascript:; alt=Modify title=Modify
class=editgroup onclick=editGroup(' + data.id + ');'+
'img src=images/icons/pencil.png //a'+
'a href=javascript:; alt=Remove title=Remove
class=deletegroup onclick=deleteGroup('+data.id+');'+
'img src=images/icons/cross.png //a/span'+
'span id=groupid' + data.id + 'span class=gname' +
data.groupname + '/span/span/td')
}, 'json');
[jQuery] Re: Clone and Replace
Also, James, each table row has a unique id. it will be called something like id=group34 or id=group35 - no two are the same. It's info that is related to the ID of the database. So when my jQuery posts to addgroup.php, it inserts the data into the database, and then I use the mysql_inser_id() function to retrieve the ID of the entry I just made. I then return that data to the main page, and I simply want to stick it below all of the data that was generated by PHP. To give you an idea - here is a screen capture of it in action, and some of the issues along with it: http://www.nathanledet.com/removingdata_jquery.mov
[jQuery] Re: Clone and Replace
LOL - I swear I thought of almost the exact same thing when I went out
and took a drive...it's amazing what time away from the computer
does...and of course, a little help.
Now I seem to be missing something (yeah, I am new to jQuery...)
I still want that table row to fade in...but neither method works:
$('#groups').append('tr id=ohaitdhello/td/tr').fadeIn
(fast);
$('#groups').fadeIn(fast).append('tr id=ohaitdhello/td/
tr');
On Jul 13, 7:35 pm, James james.gp@gmail.com wrote:
How about just removing the empty tr/tr and use something like the
following for your insert row after your AJAX response:
$(#groups).append('tr id=group'+data.id+'td/td/tr');
On Jul 13, 1:00 pm, Nate nathanle...@gmail.com wrote:
Also, James, each table row has a unique id. it will be called
something like id=group34 or id=group35 - no two are the same.
It's info that is related to the ID of the database.
So when my jQuery posts to addgroup.php, it inserts the data into the
database, and then I use the mysql_inser_id() function to retrieve the
ID of the entry I just made. I then return that data to the main
page, and I simply want to stick it below all of the data that was
generated by PHP.
To give you an idea - here is a screen capture of it in action, and
some of the issues along with it:
http://www.nathanledet.com/removingdata_jquery.mov
[jQuery] Re: Clone and Replace
Thanks a lot for the help James. I'll give that a shot. I am re-
tooling this little application and I'm beginning to think I may not
need tables at all. I'll keep you posted.
Thanks again
On Jul 13, 8:24 pm, James james.gp@gmail.com wrote:
I think there's some issues with fadeIn/fadeOut for tr.
Try something like the following:
var html = 'tr id=ohaitd class=hidehello/td/tr';
$('#groups').append(html).find(td).fadeIn(fast);
The class hide on the td is style with display:none;
Add this to all your td if you have more than one.
On Jul 13, 2:05 pm, Nate nathanle...@gmail.com wrote:
LOL - I swear I thought of almost the exact same thing when I went out
and took a drive...it's amazing what time away from the computer
does...and of course, a little help.
Now I seem to be missing something (yeah, I am new to jQuery...)
I still want that table row to fade in...but neither method works:
$('#groups').append('tr id=ohaitdhello/td/tr').fadeIn
(fast);
$('#groups').fadeIn(fast).append('tr id=ohaitdhello/td/
tr');
On Jul 13, 7:35 pm, James james.gp@gmail.com wrote:
How about just removing the empty tr/tr and use something like the
following for your insert row after your AJAX response:
$(#groups).append('tr id=group'+data.id+'td/td/tr');
On Jul 13, 1:00 pm, Nate nathanle...@gmail.com wrote:
Also, James, each table row has a unique id. it will be called
something like id=group34 or id=group35 - no two are the same.
It's info that is related to the ID of the database.
So when my jQuery posts to addgroup.php, it inserts the data into the
database, and then I use the mysql_inser_id() function to retrieve the
ID of the entry I just made. I then return that data to the main
page, and I simply want to stick it below all of the data that was
generated by PHP.
To give you an idea - here is a screen capture of it in action, and
some of the issues along with it:
http://www.nathanledet.com/removingdata_jquery.mov
[jQuery] Required callback [validate]
In firefox 3, jquery 1.3.2, requiredcallback does not seem to work. I
have the following:
$('form').validate({ element1: {required: function(element) { return
false; }}}), and element1 never gives the this element is required
error. All other validation rules are working, including some remotes
and some equalTos, so I know that the validation function is working.
I can switch the required callback with one that always returns
true, no dice. If I put in some console.logs in the required callback,
they log correctly. How do I get required: function() to work? I'm
obviously doing something wrong.
Thanks,
-Nate
[jQuery] jQuery validtion plugin questions
I am trying to make sure that the three tablechoice fields are not
equal to each other.
I have set up a remote script to return true or false based on the
field settings.
If I select tables a,b and c the form subits as expected.
however for example if it set them equal to a, b, and b and then
changes the
values to a, b,c it still thinks there is an error for some reason.
Any thoughts on what I might be doing wrong? After clicking the
submit buttons a few times it will finally submit.
$().ready(function() {
$(#signupForm).validate({
rules: {
firstname: required,
lastname: required,
companyname: required,
email: {
required: true,
email: true
},
phone:{ phoneUS: true },
firstchoice: {
onblur: false ;
remote: {
url: attendee_paypal_validate_table.php,
type: post,
data: {
choice1: function() {
return $(#firstchoice).val();
},// send choices as post var
choice2: function() {
return $(#secondchoice).val();
},
choice3: function() {
return $(#thirdchoice).val();
}
}// end data
}// end remote
},// end firstchoice
secondchoice: {
remote: {
url: attendee_paypal_validate_table.php,
type: post,
data: {
choice1: function() {
return $(#firstchoice).val();
},// send choices as post var
choice2: function() {
return $(#secondchoice).val();
},
choice3: function() {
return $(#thirdchoice).val();
}
}// end data
}// end remote
},// end secondchoice
thirdchoice: {
remote: {
url: attendee_paypal_validate_table.php,
type: post,
data: {
choice1: function() {
return $(#firstchoice).val();
},// send choices as post var
choice2: function() {
return $(#secondchoice).val();
},
choice3: function() {
return $(#thirdchoice).val();
}
}// end data
}// end remote
}// end thirdchoice
}, // end rules
messages: {
firstname: Please enter your first name,
lastname: Please enter your last name,
companyname: Please enter your company name,
//secondchoice: You cannot select the same table
twice,
confirm_password: {
required: Please provide a password,
minlength: Your password must be at least 5
characters long,
equalTo: Please enter the same password as
above
},
email: Please enter a valid email address,
agree: Please accept our policy
}
});
});
[jQuery] JSON handling: A modest non-proposal
Hello all,
Please consider the following snippet of code, which transparently
intercepts all Ajax requests, detects whether the data being POSTed is
a JSON object, and based on that, switches the content type to
application/json, and serializes the data to a string:
$(document).ready(function() {
$._ajax = $.ajax;
$.ajax = function(s) {
if (s.data s.type == 'POST') {
if (typeof s.data == 'object') {
JSON.stringify(s.data);
s.contentType = 'application/json';
}
}
return $._ajax(s);
};
});
What I'm trying to figure out is how to achieve this (properly)
without having to overwrite a core jQuery method, or if indeed there
is a way.
In an effort to save everyone time, here are the Wrong Answers:
(1) Write my own custom method. This is wrong, because it breaks the
inheritance pretty much every Ajax-related method jQuery has. The goal
of this exercise should be associated with words like seamless and
transparent. This isn't.
(2) Use beforeSend(). This does not work, because the Content-Type
header has already been set, and amazingly, the XHR object offers no
facility for removing or replacing headers, only appending.
(3) Use $.ajaxSetup, and set contentType: application/json across
the board. This simply reverses the problem by requiring me to
specify contentType any time I *don't* want to use JSON in an Ajax
request. Incidentally, this also breaks $.post, since it provides no
way to specify the contentType (which I suppose would normally be
redundant anyway).
(4) Use ajaxStart(). Again, not an option, since it is global (which
means any requests fired off in parallel will result in at least one
not being intercepted). Also, it doesn't have access to the XHR
object, which puts a bit of a damper on things.
If a solution within the required parameters does not exist, is this
something that people have run into before? Would it be worth kicking
up the chain? Handling JSON data transparently seems like an obvious
thing to want to do, and thus far I've been a little taken aback at
how many issues I've run into.
Thanks for your time and consideration.
[jQuery] Re: Jquery pagination plugin problem
There are a lot of ways to do it, here is a simple solution, of course
'length' will have to be determined somehow.
var items_per_page = 10;
var length = 1000;
function pageSelectCallback(page_index, container){
$(#contentarea).load(url,{page:page_index})
return false;
}
$(#pagination).pagination(length,{
callback: pageSelectCallback,
items_per_page:items_per_page
});
On Feb 8, 1:51 pm, deviateDesigns dustin.good...@gmail.com wrote:
How would set this up with list items and pulling from a external html
file? I am new to using this library.
On Feb 6, 8:28 pm, nate laws natel...@gmail.com wrote:
I just tried this plugin for the first time today. The think to
realize is that it does not directly have anything to do with which
items and how many are displayed. Instead it only controls the
pagination links. You have to manually display whichever items you
want to be shown in the callback function. demo_options.htm shows one
way of doing it when grabbing from am array.
Personally I use a method like:
var items_per_page = 10;
function pageSelectCallback(page_index, container){
$(table tr).hide();
var start = page_index * items_per_page;
$(table tr:gt(+start+):lt(+items_per_page+)).show()
return false;
}
On Feb 6, 2:49 pm, deviateDesigns dustin.good...@gmail.com wrote:
I am having the same issue not sure what is the issue still
researching looks like the items_per_page is passing only a 1.
On Jan 26, 4:53 am, Andy789 e...@abcstudio.com.au wrote:
Hi all,
I am playing with thepaginationplugin(http://plugins.jquery.com/
node/5912) and cannot figure out how to change number of items showing
on a single page. Changing the param items_per_page changes the number
of page links (navigation), but still shows a single item on a page.
You may play with the demo.htm from the download to see what I am
talking about..
Has someone faced the sameproblem? Any suggestions how to fix this?
[jQuery] Re: Jquery pagination plugin problem
I just tried this plugin for the first time today. The think to
realize is that it does not directly have anything to do with which
items and how many are displayed. Instead it only controls the
pagination links. You have to manually display whichever items you
want to be shown in the callback function. demo_options.htm shows one
way of doing it when grabbing from am array.
Personally I use a method like:
var items_per_page = 10;
function pageSelectCallback(page_index, container){
$(table tr).hide();
var start = page_index * items_per_page;
$(table tr:gt(+start+):lt(+items_per_page+)).show()
return false;
}
On Feb 6, 2:49 pm, deviateDesigns dustin.good...@gmail.com wrote:
I am having the same issue not sure what is the issue still
researching looks like the items_per_page is passing only a 1.
On Jan 26, 4:53 am, Andy789 e...@abcstudio.com.au wrote:
Hi all,
I am playing with thepaginationplugin(http://plugins.jquery.com/
node/5912) and cannot figure out how to change number of items showing
on a single page. Changing the param items_per_page changes the number
of page links (navigation), but still shows a single item on a page.
You may play with the demo.htm from the download to see what I am
talking about..
Has someone faced the sameproblem? Any suggestions how to fix this?
[jQuery] jquery Validate on page load
Is it possible to validate a form that is populated with data from a database on page load before the user clicks on anything? thanks
[jQuery] Re: jquery Validate on page load
I am using the jQuery validate plugin.
[jQuery] Re: jQuery Validate plugin with cake php form won't submit
Jörn,
Thanks for your response.
I got it to submit with
submitHandler: function(form) {
form.submit();
},
now I have a problem when using the cakephp form helper.
This works with the manually created input
rules: {
phone: {phoneUS: true}
}
input name=phone id=phone value=555-555-/
however I am not sure how to setup the rules when using the cakePHP
form helper.
The helper generates the following:
input name=data[UserContactDetail][phone] type=text
value=555-555- id=UserContactDetailPhone /
I have tried using
rules: {
data[UserContactDetail][phone]: {phoneUS: true}
}
and this
rules: {
UserContactDetailPhone: {phoneUS: true}
}
but it doesn't validate.
[jQuery] Re: jQuery Validate plugin with cake php form won't submit
Brian thanks for the tip. I tried both single and double quotes but that didn't work.
[jQuery] Re: jQuery Validate plugin with cake php form won't submit
Got it working with data[UserContactDetail][phone]: {phoneUS:
true}
and instead of using echo $form-input('phone'); to generate the code
I manually typed input name=data[UserContactDetail][phone] /. I
am unsure as to why the auto generated field doesn't work since it
looks the same to me.
[jQuery] jQuery Validate plugin with cake php form won't submit
I am using the jQuery Validate plugin with a form in cakePHP. When I click submit the form is validated but not submitted to the server. When I change the form name From user to user1 it submits properly so it seems that once the form is bound to the javascript it stops submitting the data. any thoughts on how I could get this to work?
[jQuery] Superfish IE Pixel-Shift in vertical mode
Please view this URL using IE6 or IE7: http://www.postcardfromparis.com/.
When hovering over the menu items that contain sub-level menu's notice
that the next sibling of the menu shifts down 1-2 pixels when the sub-
level menu is revealed. I thought doing this CSS would fix it but to
no avail.
#topNavigation ul ul { position: absolute; top: 0; left: 190px;
display: none; }
Any ideas? It's working fine in Safari, FF3, FF2 (haven't checked
Opera yet).
Best Regards,
Nate
[jQuery] Re: Disappearing events?
Thanks!
I thought events would stay unless the actual element the event is
attached to is changed, not the necessarily the contents of the
element.
I guess I'll be rewriting that portion...
Thanks again...
-Nate
On Feb 11, 3:11 pm, Kyle Browning [EMAIL PROTECTED] wrote:
Use either the live query plugin OR, reapply the events.
The issue is, the events are added once the dom is ready. after that, the
functions never get called again. So if you change out elements, your events
are gone. Live Query solves this.
Kyle
On Feb 11, 2008 11:13 AM, Nate [EMAIL PROTECTED] wrote:
I created three table elements using jquery, and each td cell in the
tables has hover and click events attached to it.
The basic table generation is cached in an array and the only changes
that happen to the initial content occur by updating individual td
contents using $(this).text(val). All of the events fire correctly the
first time a table is rendered, but when the table is updated, only
using .text(..), the events disappear. I've tried tracing what is
happening, but eventually get lost, and was hoping someone would be
able to explain why the events are disappearing.
Here are the affected parts of the code for reference:
var drawInitial = function(wks) {
var cal = [];
for(var i = 4; i = 6; i++) {
cal[i] = $('table cellpadding=0 cellspacing=0
border=0/table');
for(var j = 0; j i; j++) {
drawWeek().appendTo(cal[i]);
}
}
drawInitial = function(wks) {
return cal[wks];
}
return drawInitial(wks);
}
function drawWeek() {
var wk = $(tr/tr);
for(var j = 0; j 7; j++) {
drawDay(j).appendTo(wk);
}
return wk;
}
function drawDay(dayOfWeek) {
var css = ;
(dayOfWeek == 0 || dayOfWeek == 6) ? css = calendarWeekend : css
= calendarWeekday;
var day = $('td class=calendarBox '+css+'/td');
day.hover(
function() { if($(this).text()) {$
(this).addClass(calendarHover);} },
function() { if($(this).text()) {$
(this).removeClass(calendarHover);} }
);
day.click( function() {
if($(this).text()) {
setSelected($(this).text());
} else {
delayHide();
}
});
return day;
}
function drawMonth() {
var year = widgetDate.getFullYear();
var month = widgetDate.getMonth();
var firstDay = new Date(year, month, 1).getDay();
var daysInMonth = Date.getDaysInMonth(year, month);
var weeksInMonth = Math.ceil((firstDay + daysInMonth) / 7);
var cal = drawInitial(weeksInMonth);
var i = 0, //week
j = 1; //day of month
cal.find(tr:not(.calendarWeek)).each( function() {
$(this).children(td).each( function() {
if(j firstDay j = firstDay + daysInMonth) {
$(this).text(j - firstDay);
} else {
$(this).text();
}
j++;
});
i++;
});
$(#+widgetId).html(cal);
}
[jQuery] Re: Dynamic Variables
If you had a consistent naming convention, I think something like the
following would work:
function setClick() {
var id = ;
for(var i = 0; i arguments.length; i++) {
id = arguments[i];
$(#ckbx_+id).click( function() {
$(this).attr(checked) ? $(#opt_+id).show(medium) : $
(#opt_+id).hide(medium);
});
}
}
setClick(wgmpo, wgmse, tydgc, tydoe, ...);
On Feb 11, 3:11 pm, rsmolkin [EMAIL PROTECTED] wrote:
Hi,
I hope someone can help me out a bit.
I am finding myself doing a lot of code (as I'll paste below). It's
basically the same block of code with different variables.
What I am trying to do is consolidate all that code into a funciton
where I can declare all the checkboxes I need to create an Click
function for, and then loop through them and generate the click
handler as well as other functions for all of them.
Here is the code snippet:
$('#ckbx_wgmpo').click(
function() {
if ($(this).attr(checked) == true){
$('table#tbl_wgmpo').show('medium');
}
else{
$('table#tbl_wgmpo').hide('medium');
}
}
);
$('#ckbx_wgmse').click(
function() {
if ($(this).attr(checked) == true){
$('table#tbl_wgmse').show('medium');
}
else{
$('table#tbl_wgmse').hide('medium');
}
}
);
$('#ckbx_wgmoe').click(
function() {
if ($(this).attr(checked) == true){
$('table#tbl_wgmoe').show('medium');
}
else{
$('table#tbl_wgmoe').hide('medium');
}
}
);
$('#ckbx_tyd').click(
function() {
if ($(this).attr(checked) == true){
$('div#tyd_info').show('medium');
}
else{
$('div#tyd_info').hide('medium');
}
}
);
$('#ckbx_tydpo').click(
function() {
if ($(this).attr(checked) == true){
$('table#tbl_tydpo').show('medium');
}
else{
$('table#tbl_tydpo').hide('medium');
}
}
);
$('#ckbx_tydgc').click(
function() {
if ($(this).attr(checked) == true){
$('table#tbl_tydgc').show('medium');
}
else{
$('table#tbl_tydgc').hide('medium');
}
}
);
$('#ckbx_tydoe').click(
function() {
if ($(this).attr(checked) == true){
$('table#tbl_tydoe').show('medium');
}
else{
$('table#tbl_tydoe').hide('medium');
}
}
);
[jQuery] Disappearing events?
I created three table elements using jquery, and each td cell in the
tables has hover and click events attached to it.
The basic table generation is cached in an array and the only changes
that happen to the initial content occur by updating individual td
contents using $(this).text(val). All of the events fire correctly the
first time a table is rendered, but when the table is updated, only
using .text(..), the events disappear. I've tried tracing what is
happening, but eventually get lost, and was hoping someone would be
able to explain why the events are disappearing.
Here are the affected parts of the code for reference:
var drawInitial = function(wks) {
var cal = [];
for(var i = 4; i = 6; i++) {
cal[i] = $('table cellpadding=0 cellspacing=0
border=0/table');
for(var j = 0; j i; j++) {
drawWeek().appendTo(cal[i]);
}
}
drawInitial = function(wks) {
return cal[wks];
}
return drawInitial(wks);
}
function drawWeek() {
var wk = $(tr/tr);
for(var j = 0; j 7; j++) {
drawDay(j).appendTo(wk);
}
return wk;
}
function drawDay(dayOfWeek) {
var css = ;
(dayOfWeek == 0 || dayOfWeek == 6) ? css = calendarWeekend : css
= calendarWeekday;
var day = $('td class=calendarBox '+css+'/td');
day.hover(
function() { if($(this).text()) {$
(this).addClass(calendarHover);} },
function() { if($(this).text()) {$
(this).removeClass(calendarHover);} }
);
day.click( function() {
if($(this).text()) {
setSelected($(this).text());
} else {
delayHide();
}
});
return day;
}
function drawMonth() {
var year = widgetDate.getFullYear();
var month = widgetDate.getMonth();
var firstDay = new Date(year, month, 1).getDay();
var daysInMonth = Date.getDaysInMonth(year, month);
var weeksInMonth = Math.ceil((firstDay + daysInMonth) / 7);
var cal = drawInitial(weeksInMonth);
var i = 0, //week
j = 1; //day of month
cal.find(tr:not(.calendarWeek)).each( function() {
$(this).children(td).each( function() {
if(j firstDay j = firstDay + daysInMonth) {
$(this).text(j - firstDay);
} else {
$(this).text();
}
j++;
});
i++;
});
$(#+widgetId).html(cal);
}
[jQuery] Re: FireFox Click Function Can't Access DHTML Element
Ha, you sound like an earlier version of me. This was a LOT of diggin
to find an answer and since I happen to have saved it, I'll share it
with you. I did not test this with your code at all, it is meant to be
plug and play. You may need to have the prototype library. I don't
know since I have it.
Just add this into your page:
var browser=navigator.appName
if(browser == Netscape){
HTMLElement.prototype.click = function() {
var evt = this.ownerDocument.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true,
this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false,
false, 0, null);
this.dispatchEvent(evt);
}
}
[jQuery] Re: |OT| craigslist parsing (Was Re: SITE SUBMISSION: Please add gsalr.com to the list of sites)
On Jul 26, 11:42 pm, R. Rajesh Jeba Anbiah [EMAIL PROTECTED] wrote: To phrase to question better, how were you able to parse the addresses if you're getting the data from craigslist directly? Or which web service are you using if you're using one? Obviously, batch web scraping. For address, look at the yahoo maps link, easy to parse, say http://minneapolis.craigslist.org/apa/ 382334294.html Except the garage sale listings don't have map links, so parsing the address out of those is a lot more difficult. It's done with some custom perl parsing routines, using Google and Yahoo geocoding to verify results. -Nate
[jQuery] Re: Loosing access to 'this' objects in callback method!
Hi Glenn,
Closures are a pretty tough concept to fully explain. In this case, I should
have just said to use an anonymous function, as it would probably lead to
less confusion.
Here is a great online resource about closures that really helped me a lot:
http://www.hunlock.com/blogs/Closing_The_Book_On_Javascript_Closures
About the mechanism of this:
This always points to the current object that it's running in, except in two
cases: when it's pointing to the element that executed an action, or it is
explicitly set to something different.
I'll give you a good example:
var obj = {
init: function() {
var instance = this; // points to obj
var obj2 = {
run: function() {
var instance = this; // points to obj2
}
};
$('a').click(
function(e) {
var item = this; // points to the element that
was clicked
}
);
obj2.run.call(instance); // now obj2.run is called, it's own
'this' points
to obj instead of obj2
}
};
That piece of code covers the different situations I was talking about.
The 'call' method explicitly overrides the this in obj2 with a new obj, and
'this' now points to the object passed in.
But in every other case, this points to the current object that it's
existing in.
By the way, to limit confusion a bit, your code, even though it was
functions, in Javascript those functions are objects as well, so the scoping
applies.
I hope that helps clear things up, but if not, feel free to ask away :)
knnelg wrote:
Hi Nate,
First of all, thank you very much for taking the time to respond. It's
greatly appreciated.
I had to modify your solution slightly, in that the ajax.complete
callback passes two parameters which I need, so I changed the code to...
var instance = this;
$.ajax(
{
type: POST, // type of http request
url: this.sourceURL, // where to get file from
dataType: xml, // type of file to retrieve
complete: function(ajaxResponse, status){
instance.parseXML(ajaxResponse, status);
}
}
);
This works just fine, and I thank you once again. I'd never have worked
this out using the books I have.
I have to admit though, I still don't fully understand the mechanism
going on here. If anyone is aware of any on-line resources that go into
detail about the scope of 'this', I'd be grateful.
You mention the phrase you can use a closure, is this a common term in
Javascript? What does it mean?
Once again, thank you.
Regards,
Glenn
Nate Cavanaugh wrote:
Hi Glenn,
Keeping scope is definitely one of the more frustrating aspects of
Javascript sometimes.
What's happening is that you're running the ajax call, and the complete
method is a method of the object that you're passing into the ajax
handler.
So this now points to the object containing the properties you sent in.
To do this so that your member method (the this.parseXML) retains the
proper
scope, you can use a closure. I also like to always start off my methods
with a var declaration pointing to the instance this (so I always know
when
I am pointing to the instance, and when I use this, that I am pointing to
an
element, such as in an event call back):
var instance = this;
$.ajax(
{
type: POST, // type of http request
url: this.sourceURL, // where to get file from
dataType: xml, // type of file to retrieve
complete: function(){
instance.parseXML();
}
}
);
Now your parseXML method will run in the proper scope.
I hope that helps :)
knnelg wrote:
Hi, I'm another newbie to jQuery and also not that experienced in
JavaScript so I'm not sure if my issue is jQuery or JavaScript.
The issue is that I'm creating a constructor for an object, in which I
initialise some instance properties, then kick off an asynchronous
$.ajax event to retrieve an XML file. The callback method of
the .ajax object is bound to a prototype method of the same object as
the constructor.
My problem is that when the ajax call is complete and the callback
method is called, it appears that the callback method cannot see any
of the 'this'.properties that were initialized in the constructor.
I'm beginning to think that the asynchronous nature of the ajax object
has actually created a new instance of my object in which no
constructor was called and therefore is not working against the
original instance I created. But then again I always look for the
most obscure explanation instead of noticing the simple error I've
made.
I've included the code below. If anyone can show me the errors of my
ways, I'd be very grateful.
The line causing me a problem is commented with // THIS LINE FAILS
[jQuery] Re: Moving Images as objects
Hi Paulo, What you're trying to do is more than likely not possible, unless I am misunderstanding. Are you trying to stack the images? If so, you could do this by setting the object's z-index to a value higher than the other. If you're trying to move image 1 to the top location (such as the top right, top center, or top left), then no, this is impossible. If this is the case, you're trying to set coordinates that are relative to other coordinates. If image 1 is set to the top right of image 2, image 2 must have coordinates inside of the document, otherwise the coordinates of image 1 could be set to anywhere on the page. I think you're trying to do a relative link of objects, but the object does not have any inherent coordinates until it enters the document flow. Hopefully I understood what you meant. If not, please let me know more about what you're trying to do. Thanks, Paolo-31 wrote: Hello, I have 2 images and 1 button. When I click on the button, I'd like to move image 2 on top of image 2. I know there are some ways of doing this, but they all require the image coordinates. Is there a way to do this at the object level as i don't have coordinates? thanks, Paolo -- View this message in context: http://www.nabble.com/Moving-Images-as-objects-tf3970779s15494.html#a11271584 Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] Re: Loosing access to 'this' objects in callback method!
Hi Glenn,
Keeping scope is definitely one of the more frustrating aspects of
Javascript sometimes.
What's happening is that you're running the ajax call, and the complete
method is a method of the object that you're passing into the ajax handler.
So this now points to the object containing the properties you sent in.
To do this so that your member method (the this.parseXML) retains the proper
scope, you can use a closure. I also like to always start off my methods
with a var declaration pointing to the instance this (so I always know when
I am pointing to the instance, and when I use this, that I am pointing to an
element, such as in an event call back):
var instance = this;
$.ajax(
{
type: POST, // type of http request
url: this.sourceURL, // where to get file from
dataType: xml, // type of file to retrieve
complete: function(){
instance.parseXML();
}
}
);
Now your parseXML method will run in the proper scope.
I hope that helps :)
knnelg wrote:
Hi, I'm another newbie to jQuery and also not that experienced in
JavaScript so I'm not sure if my issue is jQuery or JavaScript.
The issue is that I'm creating a constructor for an object, in which I
initialise some instance properties, then kick off an asynchronous
$.ajax event to retrieve an XML file. The callback method of
the .ajax object is bound to a prototype method of the same object as
the constructor.
My problem is that when the ajax call is complete and the callback
method is called, it appears that the callback method cannot see any
of the 'this'.properties that were initialized in the constructor.
I'm beginning to think that the asynchronous nature of the ajax object
has actually created a new instance of my object in which no
constructor was called and therefore is not working against the
original instance I created. But then again I always look for the
most obscure explanation instead of noticing the simple error I've
made.
I've included the code below. If anyone can show me the errors of my
ways, I'd be very grateful.
The line causing me a problem is commented with // THIS LINE FAILS
WITH AN this.woffers has no properties ERROR
// Use jQuery 'document.ready' selector to define the function to call
when page is ready.
$(main);
//
// The main entry function hopefully called by the jQuery 'ready'
selector
//
function main() {
try {
//create a new 'Woffers' instance
var woffers = new Woffers(woffersdata.xml, xml);
}
// Catch any exceptions...
catch(e) {
// ...and report them. TODO: remove this for live
alert(e);
}
}
//
// Constructor for a 'Woffers' class which will contain all our
'Woffer' items
// and some methods to retrieve them.
//
// Expects:
//sourceURL - a String containing the location of the file containing
the
//data to be used to construct our object.
//sourceType - a String containing the type of file we are using to
//construct the object. Can be xml or json
//
function Woffers(sourceURL, sourceType) {
if(sourceType != xml) {
throw new Error(Invalid source type ( + sourceType + )
supplied
to Woffers constructor.);
}
// Store parameters for later use by any method
this.sourceURL = sourceURL;
this.sourceType = sourceType;
// Create a property to hold a list of Woffer objects
this.woffers = new Array(); // -- This property should get populated
by the $.ajax callback method
switch(this.sourceType) {
case xml: {
$.ajax(
{
type: POST, // type of http request
url: this.sourceURL, // where to get
file from
dataType: xml, // type of file to
retrieve
complete: this.parseXML // Function to
run on completion which
will populate this.woffers
}
)
break;
} // End case(xml)
case json: {
$.ajax(
{
type: POST, // type of http request
url: this.sourceURL, // where to get
file from
dataType: json, // type of file to
retrieve
complete: this.parseJson //
[jQuery] Re: jQuery Powered Sites - The List Continues to Grow
http://www.gamegum.com and http://www.toongum.com both use jQuery extensively for AJAX, effects, and DOM manipulation. On Apr 5, 4:04 pm, Karl Rudd [EMAIL PROTECTED] wrote: Please release it. While Ext is wonderful, it is relatively large, and the LGPL license can be a little annoying to some. Karl Rudd On 4/6/07, Stefan Petre [EMAIL PROTECTED] wrote: I don't think I will release this since Ext does a better job Andy Matthews wrote: I'm more interested to see if he's going to be able to release that as a plugin! Just to clarify, I think that looks amazing! andy -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Priest, James (NIH/NIEHS) [C] Sent: Thursday, April 05, 2007 9:14 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: jQuery Powered Sites - The List Continues to Grow I'll ditto Andy's comment. :) This is really slick. I'd love to hear more on how you actually did this! Jim -Original Message- From: Andy Matthews [mailto:[EMAIL PROTECTED] Sent: Thursday, April 05, 2007 10:07 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: jQuery Powered Sites - The List Continues to Grow Holy WOW!!! I'm assuming that uses PHP for the back end? -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Gareth Hughes Sent: Thursday, April 05, 2007 9:03 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: jQuery Powered Sites - The List Continues to Grow Looks excellent. Very impressive. - Original Message - From: [EMAIL PROTECTED] To: jQuery (English) jquery-en@googlegroups.com Sent: Thursday, April 05, 2007 8:49 AM Subject: [jQuery] Re: jQuery Powered Sites - The List Continues to Grow I can not show actual links because the products are white labeled. I made a little screencast from a back end using jQuery to do all sorts of things http://www.eyecon.ro/demos/imagebrowser.html
