[jQuery] Re: Question related to Javascript
$(imgDisplay0_title).innerHTML = title;
$(imgDisplay0_caption).innerHTML = caption;
$(imgDisplay0_number).innerHTML = 1 of + imgs0Slideshow.length +
Articles;
should be
$(imgDisplay0_title).html(title);
$(imgDisplay0_caption).html(caption);
$(imgDisplay0_number).html('1 of ' + imgs0Slideshow.length + '
Articles');
or
$(imgDisplay0_title).text(title);
$(imgDisplay0_caption).text(caption);
$(imgDisplay0_number).text('1 of ' + imgs0Slideshow.length + '
Articles');
or
$(imgDisplay0_title).get(0).innerHTML = title;
$(imgDisplay0_caption).get(0).innerHTML = caption;
$(imgDisplay0_number).get(0).innerHTML = 1 of +
imgs0Slideshow.length + Articles;
or
$(imgDisplay0_title)[0].innerHTML = title;
$(imgDisplay0_caption)[0].innerHTML = caption;
$(imgDisplay0_number)[0].innerHTML = 1 of + imgs0Slideshow.length
+ Articles;
.html('text'); is the standard jQuery way to do add html, but is
slower then .text which is the jQuery way to add plain text, which is
slower then .innerHTML, but not by significant amounts unless you are
in a big loop. .html() also handles removing events from DOM Elements
that are written over this way which prevents circular references that
can cause memory leaks. but, if speed is a big factor and you don't
have any events doing .get(0) or [0] work.
The problem is that $() returns a jQuery collection not a DOM object
with the .innerHTML method. .get(0) or [0] will return the first
element in the jQuery collection which is the DOM node you are looking
for with the innerHTML method.
Hope that helps.
Josh Powell
On Feb 7, 10:10 pm, MH1988 m.lawrencehu...@gmail.com wrote:
I hope I am able to still receive assistance even though this isn't
jQuery 100% and what I have is an image gallery I am using. The only
thing I need to work out is how to make sure the initial title and
captions appear when you load the webpage?
script type='text/javascript'
var imgs0Slideshow = new Array();
var imgs0;
imgs0Slideshow[0] = new Object();
imgs0Slideshow[0].image = ;
imgs0Slideshow[0].title = ;
imgs0Slideshow[0].caption = shshshshshsh;
imgs0Slideshow[1] = new Object();
imgs0Slideshow[1].image = ;
imgs0Slideshow[1].title = Array;
imgs0Slideshow[1].caption = shshshshs;
imgs0Slideshow[2] = new Object();
imgs0Slideshow[2].image = ;
imgs0Slideshow[2].title = ;
imgs0Slideshow[2].caption = shshshsh;
var start = 0;
imgs0 = new MudFadeGallery('imgs0', 'imgDisplay0', imgs0Slideshow,
{startNum: start, preload: true, autoplay: 4});
var title = (imgs0Slideshow[0].title) ? imgs0Slideshow[0].title : No
Title;
var caption = (imgs0Slideshow[0].caption) ? imgs0Slideshow
[0].caption : No caption;
$(imgDisplay0_title).innerHTML = title;
$(imgDisplay0_caption).innerHTML = caption;
$(imgDisplay0_number).innerHTML = 1 of + imgs0Slideshow.length +
Articles;
$(imgDisplay0).src = imgs0Slideshow[start].image;
/script
The entire Gallery works correctly but I am not sure if the last part
of the script is structured correctly. When it is first loaded, the
first image does appear but without it's title and captions and I want
to show it.
[jQuery] Re: Question related to Javascript
Also, instead of saying
var imgs0Slideshow = new Array();
imgs0Slideshow[0] = new Object();
It's easier to just say
var imgs0Slideshow = [];
imgs0Slideshow[0] = {};
and that achieves the exact same thing.
On Feb 8, 1:10 am, seasoup seas...@gmail.com wrote:
$(imgDisplay0_title).innerHTML = title;
$(imgDisplay0_caption).innerHTML = caption;
$(imgDisplay0_number).innerHTML = 1 of + imgs0Slideshow.length +
Articles;
should be
$(imgDisplay0_title).html(title);
$(imgDisplay0_caption).html(caption);
$(imgDisplay0_number).html('1 of ' + imgs0Slideshow.length + '
Articles');
or
$(imgDisplay0_title).text(title);
$(imgDisplay0_caption).text(caption);
$(imgDisplay0_number).text('1 of ' + imgs0Slideshow.length + '
Articles');
or
$(imgDisplay0_title).get(0).innerHTML = title;
$(imgDisplay0_caption).get(0).innerHTML = caption;
$(imgDisplay0_number).get(0).innerHTML = 1 of +
imgs0Slideshow.length + Articles;
or
$(imgDisplay0_title)[0].innerHTML = title;
$(imgDisplay0_caption)[0].innerHTML = caption;
$(imgDisplay0_number)[0].innerHTML = 1 of + imgs0Slideshow.length
+ Articles;
.html('text'); is the standard jQuery way to do add html, but is
slower then .text which is the jQuery way to add plain text, which is
slower then .innerHTML, but not by significant amounts unless you are
in a big loop. .html() also handles removing events from DOM Elements
that are written over this way which prevents circular references that
can cause memory leaks. but, if speed is a big factor and you don't
have any events doing .get(0) or [0] work.
The problem is that $() returns a jQuery collection not a DOM object
with the .innerHTML method. .get(0) or [0] will return the first
element in the jQuery collection which is the DOM node you are looking
for with the innerHTML method.
Hope that helps.
Josh Powell
On Feb 7, 10:10 pm, MH1988 m.lawrencehu...@gmail.com wrote:
I hope I am able to still receive assistance even though this isn't
jQuery 100% and what I have is an image gallery I am using. The only
thing I need to work out is how to make sure the initial title and
captions appear when you load the webpage?
script type='text/javascript'
var imgs0Slideshow = new Array();
var imgs0;
imgs0Slideshow[0] = new Object();
imgs0Slideshow[0].image = ;
imgs0Slideshow[0].title = ;
imgs0Slideshow[0].caption = shshshshshsh;
imgs0Slideshow[1] = new Object();
imgs0Slideshow[1].image = ;
imgs0Slideshow[1].title = Array;
imgs0Slideshow[1].caption = shshshshs;
imgs0Slideshow[2] = new Object();
imgs0Slideshow[2].image = ;
imgs0Slideshow[2].title = ;
imgs0Slideshow[2].caption = shshshsh;
var start = 0;
imgs0 = new MudFadeGallery('imgs0', 'imgDisplay0', imgs0Slideshow,
{startNum: start, preload: true, autoplay: 4});
var title = (imgs0Slideshow[0].title) ? imgs0Slideshow[0].title : No
Title;
var caption = (imgs0Slideshow[0].caption) ? imgs0Slideshow
[0].caption : No caption;
$(imgDisplay0_title).innerHTML = title;
$(imgDisplay0_caption).innerHTML = caption;
$(imgDisplay0_number).innerHTML = 1 of + imgs0Slideshow.length
+
Articles;
$(imgDisplay0).src = imgs0Slideshow[start].image;
/script
The entire Gallery works correctly but I am not sure if the last part
of the script is structured correctly. When it is first loaded, the
first image does appear but without it's title and captions and I want
to show it.
[jQuery] Re: Using selectors successfully...?
In firefox, to see the changed html markup click on the page and do ctrl-A to select all and then right click and View Selection Source. This also work if you just highlight the element you want to see the source of. On Feb 7, 10:05 pm, brian bally.z...@gmail.com wrote: On Sun, Feb 8, 2009 at 12:37 AM, gberz3 gbe...@gmail.com wrote: I'm just glad it only took 2 hours, and not 2 weeks. I always tend to think outside the box. Unfortunately, I often find myself inside another box just beside the original box. Are there any sorts of explicit documentation that warns against gotchas of this nature? Thanks for the hand-holding all. You guys rock! I think of it less as hand-holding as ants mutually forming a bridge. Wait -- all the ants make it across in the end, right?!
[jQuery] Re: [validate] dynamic message
Hi,
I am trying to validate an optional field but it is validated every
time either it is included or not on the form.Please help me that how
can i validate optional fields using jQuery validator.
Regards,
Himanshu Singh
On Jan 26, 3:18 pm, Jörn Zaefferer joern.zaeffe...@googlemail.com
wrote:
Try this workaround - updatevalidator.settings.messages[element.name]
with the appropiate value inside your validation method:
$.validator.addMethod(dynamic_check, function(value, element, param) {
if(incorrect(value, param)){
this.settings.messages[element.name] = some dynamic message
+ dynamicValue;
return false;
}
}, whatever));
On Sun, Jan 25, 2009 at 10:33 PM, thomas thomas.bik...@gmail.com wrote:
Thanks Jörn,
but is there a way to change param dynamically during JS runtime?
As example in your custom-methods-demo.html I'd like 11 to be a
function of value ...
math: {equal: 11}
In my barcoding example, I'd like not only tell user that barcode
number is wrong, but also what the check digit should be for what he
has typed. In order to pass it into template Entered number is wrong
the check digit must be {0} I need to be able to alter param
somehow ...
Regards,
Thomas
On Jan 25, 2:29 pm, Jörn Zaefferer joern.zaeffe...@googlemail.com
wrote:
You can use $.format to create dynamic messages, but that works only
when the dynamic part is specified as a parameter.
$.validator.addMethod(dynamic_check, function(value, element, param) {
if(incorrect(value, param)){
return false;}
}, $.format('dynamic message goes here with param {0}'));
Jörn
On Sat, Jan 24, 2009 at 10:54 AM, thomas thomas.bik...@gmail.com wrote:
Hello group!
Very happy to have deployed validation plugin ( I mostly need to check
validity of EAN/UPC numbers for barcode generation). You can see it in
action here:http://www.barcoderobot.com/ean-13.html
The question I am struggling with though is howto return a
'dynamically generated' message. Say, '13 digits are required, you
have XX'?
$.validator.addMethod(dynamic_check, function(value) {
if(_value is incorrect_){
return False;}
}, 'dynamic message goes here');
[jQuery] Re: Does it hurt to call functions that don't do anything on the page?
Hi
I guess you have your $().ready() function in an external js file,
otherwise you could
customize it for the according html page.
Another construct similar to Ricardos one, but a bit more flexible:
Use a global variable in every html file to specify the init functions
you want to call for this page:
script type=text/javascript
myInitFxn = [ManageCategoriesClick, HideByDefault,
PrepareSplitForm,...];
/script
ready.js:
$().ready(function(){
for(var i in myInitFxn) {
myInitFxn[i](); // call init function
}
});
by(e)
Stephan
2009/2/8 brian bally.z...@gmail.com:
On Sat, Feb 7, 2009 at 11:21 PM, Ricardo Tomasi ricardob...@gmail.com wrote:
Alternatively you could add a different class to the body of each
page, then use this rather amusing construct:
$(document).ready((function(){
var is = function(v){ return ++document.body.className.indexOf(v) };
return(
is('categories')
? ManageCategoriesClick :
is('hidebydefault')
? HideByDefault :
is('form')
? PrepareSplitForm :
is('advert')
? SetUpAdvertPopup :
function(){} //nothing
);
})());
That is, indeed, amusing. And one for my toy chest. Thanks!
Who knew, back in '96, that javascript was going to turn out to be so much
fun?
[jQuery] Re: Question related to Javascript
Thanks so much for the help. I'm afraid it still isn't working
correctly. I tried [0] which to me means it initiates the very first
image as soon as it preloads. For more details of how I am using this,
I am actually using the Prototype script framework which makes this
image gallery work.
Is $(imgDisplay0).src = imgs0Slideshow[start].image; correct?
I'm wondering if there is still something missing to make it work?
Also, it would also be great if you could explain some of the things
mentioned more simpler as I'm inexperienced.
Many thanks.
On Feb 8, 8:11 pm, seasoup seas...@gmail.com wrote:
Also, instead of saying
var imgs0Slideshow = new Array();
imgs0Slideshow[0] = new Object();
It's easier to just say
var imgs0Slideshow = [];
imgs0Slideshow[0] = {};
and that achieves the exact same thing.
On Feb 8, 1:10 am, seasoup seas...@gmail.com wrote:
$(imgDisplay0_title).innerHTML = title;
$(imgDisplay0_caption).innerHTML = caption;
$(imgDisplay0_number).innerHTML = 1 of + imgs0Slideshow.length +
Articles;
should be
$(imgDisplay0_title).html(title);
$(imgDisplay0_caption).html(caption);
$(imgDisplay0_number).html('1 of ' + imgs0Slideshow.length + '
Articles');
or
$(imgDisplay0_title).text(title);
$(imgDisplay0_caption).text(caption);
$(imgDisplay0_number).text('1 of ' + imgs0Slideshow.length + '
Articles');
or
$(imgDisplay0_title).get(0).innerHTML = title;
$(imgDisplay0_caption).get(0).innerHTML = caption;
$(imgDisplay0_number).get(0).innerHTML = 1 of +
imgs0Slideshow.length + Articles;
or
$(imgDisplay0_title)[0].innerHTML = title;
$(imgDisplay0_caption)[0].innerHTML = caption;
$(imgDisplay0_number)[0].innerHTML = 1 of + imgs0Slideshow.length
+ Articles;
.html('text'); is the standard jQuery way to do add html, but is
slower then .text which is the jQuery way to add plain text, which is
slower then .innerHTML, but not by significant amounts unless you are
in a big loop. .html() also handles removing events from DOM Elements
that are written over this way which prevents circular references that
can cause memory leaks. but, if speed is a big factor and you don't
have any events doing .get(0) or [0] work.
The problem is that $() returns a jQuery collection not a DOM object
with the .innerHTML method. .get(0) or [0] will return the first
element in the jQuery collection which is the DOM node you are looking
for with the innerHTML method.
Hope that helps.
Josh Powell
On Feb 7, 10:10 pm, MH1988 m.lawrencehu...@gmail.com wrote:
I hope I am able to still receive assistance even though this isn't
jQuery 100% and what I have is an image gallery I am using. The only
thing I need to work out is how to make sure the initial title and
captions appear when you load the webpage?
script type='text/javascript'
var imgs0Slideshow = new Array();
var imgs0;
imgs0Slideshow[0] = new Object();
imgs0Slideshow[0].image = ;
imgs0Slideshow[0].title = ;
imgs0Slideshow[0].caption = shshshshshsh;
imgs0Slideshow[1] = new Object();
imgs0Slideshow[1].image = ;
imgs0Slideshow[1].title = Array;
imgs0Slideshow[1].caption = shshshshs;
imgs0Slideshow[2] = new Object();
imgs0Slideshow[2].image = ;
imgs0Slideshow[2].title = ;
imgs0Slideshow[2].caption = shshshsh;
var start = 0;
imgs0 = new MudFadeGallery('imgs0', 'imgDisplay0', imgs0Slideshow,
{startNum: start, preload: true, autoplay: 4});
var title = (imgs0Slideshow[0].title) ? imgs0Slideshow[0].title : No
Title;
var caption = (imgs0Slideshow[0].caption) ? imgs0Slideshow
[0].caption : No caption;
$(imgDisplay0_title).innerHTML = title;
$(imgDisplay0_caption).innerHTML = caption;
$(imgDisplay0_number).innerHTML = 1 of +
imgs0Slideshow.length +
Articles;
$(imgDisplay0).src = imgs0Slideshow[start].image;
/script
The entire Gallery works correctly but I am not sure if the last part
of the script is structured correctly. When it is first loaded, the
first image does appear but without it's title and captions and I want
to show it.
[jQuery] Re: Question related to Javascript
Sorry, just also to mention, I am integrating this within WordPress
and I am using the jQuery framework for another gallery.
On Feb 8, 9:58 pm, MH1988 m.lawrencehu...@gmail.com wrote:
Thanks so much for the help. I'm afraid it still isn't working
correctly. I tried [0] which to me means it initiates the very first
image as soon as it preloads. For more details of how I am using this,
I am actually using the Prototype script framework which makes this
image gallery work.
Is $(imgDisplay0).src = imgs0Slideshow[start].image; correct?
I'm wondering if there is still something missing to make it work?
Also, it would also be great if you could explain some of the things
mentioned more simpler as I'm inexperienced.
Many thanks.
On Feb 8, 8:11 pm, seasoup seas...@gmail.com wrote:
Also, instead of saying
var imgs0Slideshow = new Array();
imgs0Slideshow[0] = new Object();
It's easier to just say
var imgs0Slideshow = [];
imgs0Slideshow[0] = {};
and that achieves the exact same thing.
On Feb 8, 1:10 am, seasoup seas...@gmail.com wrote:
$(imgDisplay0_title).innerHTML = title;
$(imgDisplay0_caption).innerHTML = caption;
$(imgDisplay0_number).innerHTML = 1 of + imgs0Slideshow.length +
Articles;
should be
$(imgDisplay0_title).html(title);
$(imgDisplay0_caption).html(caption);
$(imgDisplay0_number).html('1 of ' + imgs0Slideshow.length + '
Articles');
or
$(imgDisplay0_title).text(title);
$(imgDisplay0_caption).text(caption);
$(imgDisplay0_number).text('1 of ' + imgs0Slideshow.length + '
Articles');
or
$(imgDisplay0_title).get(0).innerHTML = title;
$(imgDisplay0_caption).get(0).innerHTML = caption;
$(imgDisplay0_number).get(0).innerHTML = 1 of +
imgs0Slideshow.length + Articles;
or
$(imgDisplay0_title)[0].innerHTML = title;
$(imgDisplay0_caption)[0].innerHTML = caption;
$(imgDisplay0_number)[0].innerHTML = 1 of + imgs0Slideshow.length
+ Articles;
.html('text'); is the standard jQuery way to do add html, but is
slower then .text which is the jQuery way to add plain text, which is
slower then .innerHTML, but not by significant amounts unless you are
in a big loop. .html() also handles removing events from DOM Elements
that are written over this way which prevents circular references that
can cause memory leaks. but, if speed is a big factor and you don't
have any events doing .get(0) or [0] work.
The problem is that $() returns a jQuery collection not a DOM object
with the .innerHTML method. .get(0) or [0] will return the first
element in the jQuery collection which is the DOM node you are looking
for with the innerHTML method.
Hope that helps.
Josh Powell
On Feb 7, 10:10 pm, MH1988 m.lawrencehu...@gmail.com wrote:
I hope I am able to still receive assistance even though this isn't
jQuery 100% and what I have is an image gallery I am using. The only
thing I need to work out is how to make sure the initial title and
captions appear when you load the webpage?
script type='text/javascript'
var imgs0Slideshow = new Array();
var imgs0;
imgs0Slideshow[0] = new Object();
imgs0Slideshow[0].image = ;
imgs0Slideshow[0].title = ;
imgs0Slideshow[0].caption = shshshshshsh;
imgs0Slideshow[1] = new Object();
imgs0Slideshow[1].image = ;
imgs0Slideshow[1].title = Array;
imgs0Slideshow[1].caption = shshshshs;
imgs0Slideshow[2] = new Object();
imgs0Slideshow[2].image = ;
imgs0Slideshow[2].title = ;
imgs0Slideshow[2].caption = shshshsh;
var start = 0;
imgs0 = new MudFadeGallery('imgs0', 'imgDisplay0', imgs0Slideshow,
{startNum: start, preload: true, autoplay: 4});
var title = (imgs0Slideshow[0].title) ? imgs0Slideshow[0].title : No
Title;
var caption = (imgs0Slideshow[0].caption) ? imgs0Slideshow
[0].caption : No caption;
$(imgDisplay0_title).innerHTML = title;
$(imgDisplay0_caption).innerHTML = caption;
$(imgDisplay0_number).innerHTML = 1 of +
imgs0Slideshow.length +
Articles;
$(imgDisplay0).src = imgs0Slideshow[start].image;
/script
The entire Gallery works correctly but I am not sure if the last part
of the script is structured correctly. When it is first loaded, the
first image does appear but without it's title and captions and I want
to show it.
[jQuery] dropping between items that have no gap between them
Hi.. Quick question about drag-n-drop with jQuery UI. For my CMS, I have a admin tree of items of various types, that i want to enable drag-n-drop between. I aim to emulate windows explorer in most aspects of operations, with some improvements ofcourse. I had already found a drag-n-drop library (Toolman's) before i found jQuery, and built something where you could re-arrange the order in which items are displayed (making them non-alphabetical, yep) by dragging them to another position in the tree. I can drag something _between_ 2 other items(xy), and it will take the same parent as those xy, but the LevelOrder is set to Y, and all nodes with LevelOrder Y get an increase of 1 ofcourse. I'd really like to keep this functionality. It is usefull to re-arrange menu-items. So can jQuery UI do this? I have two divs within a container div or td, underneath eachother, with no gap between 'm. I want to detect (easilly or even with lots of custom code) that a dragged div is dragged between two of those items. The only thing i can think of is to have a 1-pixel div between items, that's also a droppable-container. But then the mouse-pointer has to Exactly be on that spot.. It's too cumbersome for even an exp end-user (me), i've already tried it, not with jQuery UI but with Toolman's lib.. I had to increase the text-size of items in the tree so i had enough pixel resolution to both select 'the 50% of height centered around the middle of a div', and the 25%'s at top and bottom. And really, it's worth having this feature ppl :) Much better than again more buttons that an average end-user gets scared by. Less buttons - better, imo. Anyways, thanks for reading this, and if you have an anwser to my question i'd really like to hear it asap. I'm on hold with my explorer-func until i know more... ;)
[jQuery] problem with superfish plugin
hi i used superfish menu on my project i got problem with IE6. that menu appears backside of my sliding image. how can i solve this problem if any one can help me? please help me as soon as possible. u can check problem on my site http://ihricon.org.np
[jQuery] gm jq mushup post
Hi all,
I am writing a greasemonkey user script which uses jquery for most
things it does.
the user script is supposed to work on a page with lots of elements i
want to discard so that focusing on the main content is easier. this
part is easy, i just select the div containing what i want and store
its content in a variable, then i remove everything in body, and
finally append a div with the content from the variable. it works.
but i have another objective too. the page is very slow as it has lots
of js, css, and images which i discard, but ... AFTER they are fetched
from the server! this is ridiculous, i load the page and make 48 HTTP
requests to fetch things i'll be trowing away seconds latter.
the sensible way to do this is fetching ONLY the html, and BEFORE any
of the linked resources start downloading the reference to them is
discarded preventing expensive and lengthy HTTP requests.
i know that this sort of thing is possible with libcurl, but is it
impossible without it?
i have tried several approaches:
1. i put the $('html').children().remove(); line before and outside
$(document).ready(function(){ but still all resources are fetched;
2. i put a window.stop() at the begining of the user script, it stops
the rest of the script, but only after all resources are fetched;
i concluded that the user script itself is evaluated only after full
page load so anything inside it should be wrapped in a timemachine
goback=10 seconds tag to work ;)
so i started to look elsewhere and tried this:
3. i made a minimal empty page including only jquery and the js code
to fetch the page i want to improve via ajax. i wanted to fetch the
page's html as text, discard all the referenced and content from it
and then add dom elements with what remains. this time i got an error
saying an uncaught exception has occured and that permission was
denied to call method XMLHttpRequest.open ... PUFFF! i tried both
opening the page from file, and opening it from localhost, no way,
won't work.
[jQuery] Re: Does it hurt to call functions that don't do anything on the page?
Thanks for the ideas everyone!
@Stephan: Yes, it's in an external JS file. I'd prefer to not have to
do any inline javascript. I've considered it, but thanks for the
suggestion!
@Ricardo: Thanks for those. I may end up doing a variation of them.
On Feb 8, 4:50 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi
I guess you have your $().ready() function in an external js file,
otherwise you could
customize it for the according html page.
Another construct similar to Ricardos one, but a bit more flexible:
Use a global variable in every html file to specify the init functions
you want to call for this page:
script type=text/javascript
myInitFxn = [ManageCategoriesClick, HideByDefault,
PrepareSplitForm,...];
/script
ready.js:
$().ready(function(){
for(var i in myInitFxn) {
myInitFxn[i](); // call init function
}
});
by(e)
Stephan
2009/2/8 brian bally.z...@gmail.com:
On Sat, Feb 7, 2009 at 11:21 PM, Ricardo Tomasi ricardob...@gmail.com
wrote:
Alternatively you could add a different class to the body of each
page, then use this rather amusing construct:
$(document).ready((function(){
var is = function(v){ return ++document.body.className.indexOf(v) };
return(
is('categories')
? ManageCategoriesClick :
is('hidebydefault')
? HideByDefault :
is('form')
? PrepareSplitForm :
is('advert')
? SetUpAdvertPopup :
function(){} //nothing
);
})());
That is, indeed, amusing. And one for my toy chest. Thanks!
Who knew, back in '96, that javascript was going to turn out to be so much
fun?
[jQuery] $(element in other iframe)
Can I use jQuery to work with elements in other frames? For Example: html iframe id=frame1/iframe script $(#frame1 document) OR $(document, $(#frame1)) /script
[jQuery] Numbering ... Could someone please help me out with this?
Hi,
I am adding list items to a list as follows:
$('#AddTheme').bind('click', function(){
// Other code
$theme = $('li class=Themes/li').appendTo
('#Themes');
$theme.append('input type=hidden name=Themes[0].Subject
value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes
[0].LevelsCsv value = ' + levelsTypes.join(,) + ' /');
$theme.append('input type=hidden name=Themes
[0].Description value = ' + description.val() + ' /');
});
Basically, every time I add a new item I want to give the next number
to Themes[0], i.e., Themes[1].
If I add 3 themes I will have Themes[0], Themes[1], Themes[2]
Basically, I need to have at all times themes numbered as 0, 1, 2, ...
Could someone please help me out?
Thanks,
Miguel
Just in case, here is my entire code fully commented:
$('#Cancel').click(function() { location.href = '/Account/
List'; });
// Themes
// Define remove event
$('.Remove').livequery('click', function(event) {
$(this).parent().remove();
});
// Bind add button
$('#AddTheme').bind('click', function(){
// Define valid
var valid = new Boolean(true);
// Define fields
$description = $('#Description');
$levels = $('input[name=Levels]:checked + label');
$levelsTypes = $('input[name=Levels]:checked');
$subject = $('#Subject option:selected');
// Map levels
levels = $levels.map(function() { return $(this).text(); }).get
();
levelsTypes = $levelsTypes.map(function() { return $(this).val
(); }).get();
// Check subject
if (!$subject.val()) { valid = false; }
// Check levels
if (!levels.length) { valid = false; }
// Check boolean
if (valid) {
// Define theme
$theme = $('li class=Themes/li').appendTo
('#Themes');
// Add fields
$theme.append($subject.text()).append('br /');
$theme.append( Levels(levels) + 'br /' );
if ($description.val()) { $theme.append($description.val
()).append('br /'); }
// Add button
$theme.append('a href=#Remove class=RemoveRemover/
a');
// Add inputs
$theme.append('input type=hidden name=Themes[0].Subject
value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes
[0].LevelsCsv value = ' + levelsTypes.join(,) + ' /');
$theme.append('input type=hidden name=Themes
[0].Description value = ' + description.val() + ' /');
// Add input
//$theme.append(' input type=hidden name=Themes value =
' + theme + ' /');
}
});
// Levels
function Levels(levels) {
// Check levels
if (levels.length 2) return levels.join('');
// Define first
var first = levels.slice(0, -1), last = levels.slice(-1);
// Define result
var result = first.join(', ');
// Check last
if (last) { result += ' and ' + last; }
// Return results
return result;
} // Levels
[jQuery] Re: $(element in other iframe)
Hi Ami you can access an iframe with: var frame = window.frames[0].document; -or- var frame = $(#iframe)[0].contentDocument; var div = $(div, frame); just remember to wait until the iframe has been loaded. by(e) Stephan 2009/2/8 Ami aminad...@gmail.com: Can I use jQuery to work with elements in other frames? For Example: html iframe id=frame1/iframe script $(#frame1 document) OR $(document, $(#frame1)) /script
[jQuery] css or cookie problem with ie6?
Hi Everyone, does anyone know if ie6 has limitations with cookies or the jquery css? I have this code which works great in ie7 and firefox. It detects if the maiLNav cookie is set and displays accordingly. In ie6 it seems to ignore the check. http://pastebin.com/m6c227f24
[jQuery] Re: css or cookie problem with ie6?
Ok actually i narrowed it down to a cookie because when i alert the cookie it returns null. So that leads me to believe that the cookies arent working proper in ie6? here is my code that sets the cookie http://pastebin.com/m2390bf8e Does anyone see anything wrong wtih that? Thanks allot Anthony Brown(Worcester Wide Web) wrote: Hi Everyone, does anyone know if ie6 has limitations with cookies or the jquery css? I have this code which works great in ie7 and firefox. It detects if the maiLNav cookie is set and displays accordingly. In ie6 it seems to ignore the check. http://pastebin.com/m6c227f24 No virus found in this incoming message. Checked by AVG - www.avg.com Version: 8.0.233 / Virus Database: 270.10.19/1939 - Release Date: 02/04/09 08:24:00
[jQuery] Re: Numbering ... Could someone please help me out with this?
Hi Miguel,
you could use a global counter.
e.g.
var themesCounter = 0;
$('#AddTheme').bind('click', function(){
...
$theme.append('input type=hidden
name=Themes[themesCounter].Subject value = ' + $subject.val() + '
/');
...
themesCounter++;
});
by(e)
Stephan
2009/2/8 shapper mdmo...@gmail.com:
Hi,
I am adding list items to a list as follows:
$('#AddTheme').bind('click', function(){
// Other code
$theme = $('li class=Themes/li').appendTo
('#Themes');
$theme.append('input type=hidden name=Themes[0].Subject
value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes
[0].LevelsCsv value = ' + levelsTypes.join(,) + ' /');
$theme.append('input type=hidden name=Themes
[0].Description value = ' + description.val() + ' /');
});
Basically, every time I add a new item I want to give the next number
to Themes[0], i.e., Themes[1].
If I add 3 themes I will have Themes[0], Themes[1], Themes[2]
Basically, I need to have at all times themes numbered as 0, 1, 2, ...
Could someone please help me out?
Thanks,
Miguel
Just in case, here is my entire code fully commented:
$('#Cancel').click(function() { location.href = '/Account/
List'; });
// Themes
// Define remove event
$('.Remove').livequery('click', function(event) {
$(this).parent().remove();
});
// Bind add button
$('#AddTheme').bind('click', function(){
// Define valid
var valid = new Boolean(true);
// Define fields
$description = $('#Description');
$levels = $('input[name=Levels]:checked + label');
$levelsTypes = $('input[name=Levels]:checked');
$subject = $('#Subject option:selected');
// Map levels
levels = $levels.map(function() { return $(this).text(); }).get
();
levelsTypes = $levelsTypes.map(function() { return $(this).val
(); }).get();
// Check subject
if (!$subject.val()) { valid = false; }
// Check levels
if (!levels.length) { valid = false; }
// Check boolean
if (valid) {
// Define theme
$theme = $('li class=Themes/li').appendTo
('#Themes');
// Add fields
$theme.append($subject.text()).append('br /');
$theme.append( Levels(levels) + 'br /' );
if ($description.val()) { $theme.append($description.val
()).append('br /'); }
// Add button
$theme.append('a href=#Remove class=RemoveRemover/
a');
// Add inputs
$theme.append('input type=hidden name=Themes[0].Subject
value = ' + $subject.val() + ' /');
$theme.append('input type=hidden name=Themes
[0].LevelsCsv value = ' + levelsTypes.join(,) + ' /');
$theme.append('input type=hidden name=Themes
[0].Description value = ' + description.val() + ' /');
// Add input
//$theme.append(' input type=hidden name=Themes value =
' + theme + ' /');
}
});
// Levels
function Levels(levels) {
// Check levels
if (levels.length 2) return levels.join('');
// Define first
var first = levels.slice(0, -1), last = levels.slice(-1);
// Define result
var result = first.join(', ');
// Check last
if (last) { result += ' and ' + last; }
// Return results
return result;
} // Levels
[jQuery] Re: Deep $.extend() doesn't work with Date objects
I can see why it is working the way it does, but it seems like a clear
and easily fixable bug to me. $.extend() could be made aware of the
intrinsic JavaScript objects so that they are copied (i.e. recreated)
properly.
On Feb 5, 3:11 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
this is because jQuery creates anonymous objects for the clones and
copies the object properties. For the Date object there are no public
properties, so only the empty object hull is created.
But you are right, not copying Dates correctly is a bit strange.
If you disable the copy deep flag, your date will be in the clone, but
in this case it's no clone, but a reference to the original date
object.
by(e)
Stephan
2009/2/5 Tin michael.leib...@gmail.com:
Hi guys,
I'm trying to create a deep copy of an object with $.extend(true, {},
obj), but I've noticed that all of the dates get copied as a simple
Object with no properties. Here's a sample code that demonstrates it:
var clone = $.extend(true, {}, {myDate:new Date()});
// clone.myDate returns {}
// clone.myDate.toString() - [object Object]
Any ideas on why this is happening?
[jQuery] Re: alignment IN IE6 ... with jquery..
did you go to the home button??? and type username TEST all caps for both the user name and password? in the account I use jquery for the javascript. when you look at the page in IE7 and IE6 you will see the menu and other stuff all positioned in weird places and the menu is shown in a random place no fade in nor fade out. I couldn't see the screen shot you gave. I saw a error message in german or something. On Feb 6, 4:21 pm, Stephan Veigl stephan.ve...@gmail.com wrote: I've taken an additional look at your HTML CSS and it seems like you are positioning all your images absolute with left top position, so I don't see what should be different on IE. by(e) Stephan 2009/2/6 Stephan Veigl stephan.ve...@gmail.com: Hi I've tested the page and it looks similar in FF3 and IE7 for me. Here is a screenshot (http://www.bilderbeutel.de/pic_call_hires.php?tab=pic_upid=11), I'm not sure if this is how it should look like. by(e) Stephan 2009/2/6 shyhockey...@gmail.com shyhockey...@gmail.com: OK, My website is : www.chillenvillen.com on that site click the home button. It will take you to a login page use TEST for both user name and password. this takes you to a test account. This account page has jquery javascript. Use Firefox to see what it supposed to be doing and then look at it with IE7 or 6 and you will see what I am complaining about. hope this helps any. On Feb 5, 4:15 am, Stephan Veigl stephan.ve...@gmail.com wrote: Hi, can you post your code (e.g. at jsbin.com) or give us a link to it. Being standard compliant is always a good idea :-) by(e) Stephan 2009/2/5 shyhockey...@gmail.com shyhockey...@gmail.com: Hi, ok currently I just looked at my website using IE6 and IE7. I notice the pages I used jquery and javascript, would be randomly placed around the website and also the menus that needed to fade in and out when a mouse hover occurs over the user image. Well those menus show up as images and dosen't fade in or out but is randomly placed around the website. In firefox it works fine. I can see it fade in and out and many other stuff. So firefox is set to go. it's just that IE 7, and 6 is weird. It would randomly place the elements around the website. It would also show hidden elements meaning that they are hidden first and then fade in upon a certain condition. So is there anyway I can fix this??? I heard that I need to comply with WS3 . I heard their is a standard that I need to follow in order for my javascript or jquery to show properly. Any ideas?
[jQuery] Re: Need to make a edit layout system using php and jquery...?
Ok, Now I am having trouble using php with css. I made a php file with the header content text/css and the css works kinda.. the render is not proper. the htmlcheck button is supposed to display at the footer and it is being displayed in the top left corner of the screen. On Feb 6, 3:15 am, jQuery Lover ilovejqu...@gmail.com wrote: Yeap. I suggest you add a save button so you make an ajax call only once (when user decides to save his/her settings) and don't kill your server ... :) Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Fri, Feb 6, 2009 at 5:01 AM, shyhockey...@gmail.com shyhockey...@gmail.com wrote: Thanks... So I can save these values with php??? Cause I plan to allow people to make their own profile page layout and need to save these values. On Feb 2, 7:11 am, jQuery Lover ilovejqu...@gmail.com wrote: To find positions and everything:http://docs.jquery.com/CSS Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Mon, Feb 2, 2009 at 3:19 AM, shyhockey...@gmail.com shyhockey...@gmail.com wrote: Hi, I am right now trying to make a edit layout system. basicly I want to know how I can use jquery to grab the height width and position elements are at. Cause I plan to make in the edit mode to allow users to move like images and tables and texts around on the layout and even change background images and add more artistic images for their profiles. I will add also a music player. So I need to know how I can grab all positions height and width of each element on my layout and then store that data. I am planning to make databases for users where I will store their edited stuff. So I need the x and y position of where the elements are at and also the height and width. Some told me I should just grab what css element of height and width and top and left of the elements using javascript. What would you suggest on how I should do it? Can I do it using jquery or no??? Thanks for your time.
[jQuery] scrollTo plugin failing with no errors or warnings
Could somebody tell me how this is managing to go wrong? Site is at antoniocaniparoli.co.uk/wip I am trying to animate movement between # locations on the page — the #s being references to images in a gallery. Each image has a little caption at the bottom giving its position in the list and offering href=# links to the next and/or last one in the sequence. As it stands the default behaviour works absolutely fine, but that's all that happens. My syntax (relevant script is at the bottom of antoniocaniparoli.co.uk/wip/antonio.js line 70) appears to be fine, all the right values are getting parsed according to Firebug and I can step through about 60 actions in Firebug with all the right variables showing... But then it just jumps to the next/last image as if there were no scripting at all — with no errors or warnings or anything. Anybody care to take a look and tell me what's missing?
[jQuery] Re: Help : Difficulty binding event to selected jQuery object
Maybe it's just a typo, but you're creating a div with the ID
toolbar_button_target
...prepend(div class='toolbar_button'
id='toolbar_button_target'...
and then calling it with a class selector:
$(.toolbar_button_target)
is that right?
On Feb 7, 5:38 pm, James S jamespstrac...@gmail.com wrote:
Dear jQuery,
Can find plenty of discussion on the use of livequery but little on
binding problems which are less dynamic. If you could point out a nice
simple thing I'm overlooking then that would be great :)
Background:
As part of a UI I'm coding I serve a series of working panes. Content
is ajaxed into the pane and then livequeries pick out class flags from
the loaded content. One such flag is toolbar_button class which
signals to lift the element out and make it into a button on the
toolbar. Post relocation, toolbar html's something like:
==\/
div class=toolbar
div class=toolbar_buttonSave/div
div class=toolbar_button Cancel/div
div class=kill/div
/div
==/\
Along with the toolbar_button class flag, a second flag can be used
which clones the function of the button to a new button on the toolbar
(for stuff that has to be in place in the html to function - in this
case form buttons). These two types of toolbar button creation are
dealt with by the following jQuery:
==\/
$(.toolbar_button).livequery(function(){
p=parent_pane($(this)); // Finds the parent pane of the
button so it
can be added to the correct toolbar
if($(this).hasClass('copy_me')){ // If the page element
needs to
stay in position, copy it to toolbar
p.children('.toolbar').prepend(div
class='toolbar_button'
id='toolbar_button_target'+$(this).val()+/div);
$(.toolbar_button_target).css('color','red').click(function(e){
alert('This code is never run!');
}).removeClass('toolbar_button_target');
}else{ // Move it to the toolbar
p.children('.toolbar').prepend($(this).remove());
}
});
==/\
Buttons without the copy_me class are successfully transposed and
function as they should. However, when adding a copy of a copy_me
button the resulting object can be selected (the css() rule in the
code above turns it red) but doesn't respond to event binding. Click()
function as above doesn't work, nor other events.
I can't find any complication with event bubbling, nothing is stopping
the propagation.
I would be much obliged if someone with a greater insight could point
me right on this one.
Thanks,
James
[jQuery] jQuery + Validation: submit() is sending multiple form submits
I'm having a problem with validating first then submitting a form with
jQuery after success. It works however it seems like my submit()
function keeps sending multiple submits and keeps growing each time i
reuse the form (i made sure the values are reset after each submit).
I'm not sure if its my code since i've re-checked it for hours to no
avail. Here is the code in a nut-shell:
My form with id of #form-external-link is validated when submit button
is clicked:
$(#form-external-link).validate({
rules: {
exlink_url: {
required: true,
url: true
}
},
submitHandler: function(form) {
alert('This will pop up only once as it should');
$(form).submit(function() {
alert('This will pop up every twice, 3x, 4x, etc. after
each
validate success');
});
}
});
Am I missing something from my code??
[jQuery] Re: validation remote
Another figure out the solution for this? I am having a similar
problem.
Thanks guys,
Kris
On Dec 15 2008, 4:17 am, Jet webones...@hotmail.com wrote:
Hi,
Sounds like we are having the same problem.
I have posted about the problem in this thread.
http://groups.google.com/group/jquery-en/browse_thread/thread/5d29f6e...
The thread above though refers to a field not usingremote, but I'm
also having the same problem on another page when usingremote.
URL:http://www.thaidatelink.com/account/register/
(checkout the Username field which I'm using remote.)
Well...sorry I'm not of much help.
Just to bring to your attention about this similar thread and hope
that Jörn (the author of this wonderful script) could help.
Good luck!
;)
On Dec 15, 4:48 am, kemalemin kemale...@gmail.com wrote:
Hi, myvalidationsummary worked quite fine before I made aremote
username check available to it. The problem is when for the first time
an already existing username is entered into the username box, the
error div pops alright saying that the username already exists in the
db. however when I go back and correct it, the error message
disappears but the containing div still exists on the page. below is
the code, I hope somebody can help
var container = $('#error_container');
// validate the form when it is submitted
var validator = $(#frmUserRegister).validate({
onkeyup: false,
errorContainer: container,
errorLabelContainer: $(ol, container),
wrapper: 'li',
meta: validate,
rules: {
txtFullName: {
required: true,
rangelength:[3, 100]},
txtUsername: {
required: true,
rangelength:[5, 30],
remote:ajaxCheckUsername.aspx}, // returns 'true' or
'false' as string
txtEmail: {
required: true,
email: true},
txtPassword: {
required: true,
rangelength:[5, 20]},
txtConfirmPassword: {
equalTo: #txtPassword}
},
messages: {
txtFullName: {
required: Please enter your strongfull name/
strong.,
rangelength: Fullname must be strongbetween 3 and
100 characters/strong},
txtUsername: {
required: Please enter a strongvalid username/
strong.,
rangelength: Username must be strongbetween 5 and
30 characters/strong.,
remote: jQuery.format(strongu{0}/u is already
taken/strong, please choose a different username.)},
txtEmail: {
required: please provide an strongemail/strong
address.,
email: please provide a strongvalid email/strong
address},
txtPassword: {
required: please provide a strongpassword/
strong,
rangelength: Password must be strong between 6 and
20 characters/strong},
txtConfirmPassword: {
equalTo: passwords strongmust match/strong.}
},
});
});
/script
style type=text/css
#error_container
{
background-image:url(img/error.gif);
background-repeat:no-repeat;
background-color: #FFE8E8;
border: 1px solid #CC;
color: #CC;
font-family:Tahoma;
font-size:11px;
padding:4px 0 0 40px;
display: none;
}
#error_container ol li {
list-style-type:circle;
}
form.frmUserRegister label.frmUserRegister, label.error {
/* remove the next line when you have trouble in IE6 with labels in
list */
color: #CC;
}
/style
/head
body
form id=frmUserRegister runat=server
div id=error_container
strongplease review and correct the following errors:/strong
ol
li style=display:none;/li
/ol
/div
the rest of the page are the form fields...
here, the div with the id of error_container is still being
displayed...
[jQuery] Re: Block UI problem
Hi! I've found a way to work workaround it. I've moved that style at unblockui callback. Thanks. Rodolfo. 2009/2/7 Mike Alsup mal...@gmail.com I'm having problems with BlockUI plugin. For some reason it applies style=poistion: relative; to parent div and this mess up with my contextMenu plugin. Is there any way to disable this? It only does that if the element currently has 'static' position and no, there is no way to disable it. The element being blocked needs to have a non-static position so that the blocking elements can be positioned within. Mike
[jQuery] Re: please help me for the performance
I think so, but it's the requirement, so maybe there is another way to achieve it, I still figure on it. On 2月7日, 下午3時23分, jQuery Lover ilovejqu...@gmail.com wrote: Removing image reflection might improve performance... Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Sat, Feb 7, 2009 at 2:58 AM, David .Wu chan1...@gmail.com wrote: url:http://chan.idv.tw:90/test/marquee/marquee.html rar:http://chan.idv.tw:90/test/marquee/marquee.rar Hi, this is a image marquee to display the product, I feel a little bit lag when mouse over the image from left to right at the same time, please help me to improve the performance.
[jQuery] selector to return the number of rows in a table before the row I just selected
Hi, I am selecting the row of a table. I would like to be able to count how many rows there are in the table before the row I just selected. i suppose there is a jQuery selector that will do this. Thanks
[jQuery] rookies in jQuery and grid
Hi, i'm newbie to jQuery however i watched those videos on internet and it seems that jQuery is a very powerful library now. i have a grid/table that i would like to create using jQuery, it would be a wonderful try from my side. I know that some tables and grids plug-ins already exist but i want to try by my own. 1. what should i take care to create my own plug-in using jQuery ? 2. where should i look for to base my grid with basic features (sorted columns, filtering columns, pagination, and so on...) ? I'm looking for some basic tutorial or helps. thanks a lot, -- Alain --- Windows XP x64 SP2 / Fedora 10 KDE 4.2 PostgreSQL 8.3.5 / MS SQL server 2005 Apache 2.2.10 PHP 5.2.6 C# 2005-2008
[jQuery] pager plugin
All, I'm using the pager plugin (http://rikrikrik.com/jquery/pager/) to work through a mysql result set that is broken up into divs. I'd like to preserve back button functionality when using this plugin. I've seen the history plugin (http://plugins.jquery.com/project/ history) which looks promising, and well suited for ajax page calls, which mine is not. I'm wondering if anyone here has done this before. I'm about to trudge my way through it, so if it's already been done, please do point me in the direction. Thanks, irms
[jQuery] Re: tooltip - image preview does not respect window border
Hi there I am in the same position. I see you suggested a different script all together, from bassistance.de, instead of the original one from cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery . The one you suggested is much more than i need. Was anyone able to modify the original script to allow the preview tooltip to not break the window borders? Thanks! PS: my test URL: http://tinyurl.com/dnd8gb Jörn Zaefferer-2 wrote: It looks like you got an old version of the plugin. Try the latest release, it has built-in support for repositioning the tooltip at the viewport border: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ Jörn On Sat, Jan 24, 2009 at 11:26 PM, CNN_news nagit...@gmail.com wrote: Hello, I have a theme that shows a preview of the image that the mouse is currently hovering over with a larger image using jquery tooltip. The problem is that it always places the preview on the right and if the image is on the right side of the page the preview causes horizontal scrolling, see for yourself: http://torontopersonalinjurylawyers.org Is it possible make the preview switch to the left side of the mouse if the mouse if on the right side of the page (ie. past a certain point in the x-axis), Somebody posted this code as a solution but I have not been able to implement it: --- Thanks a lot of the extremely useful script! To position the tooltip depending where you are, you need to rewrite some of the code using the offset() property of jQUERY. var toolTipPosition = $(this).offset(); //Declare the Offset object var offsetX = 0; var offsetY = 0; //Then in the hover property $(#tooltip) .css(top,( toolTipPosition.top - posiY) + px)//Will set where the link/thumbnail is horizontally .css(left,( toolTipPosition.left + this.offsetWidth/2 + posiX) + px) /*Will be positioned to the middle of the link/thumbnail, you can alway remove this.offsetWidth/2 to remove the middle placement thing.*/ //Remove the mouseover function and your set! .fadeIn(fast); --- Thanks. -- View this message in context: http://www.nabble.com/tooltip---image-preview-does-not-respect-window-border-tp21646181s27240p21901828.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] [Validate] list of metadata options?
I may be missing something obvious. The docs for Validation (http:// docs.jquery.com/Plugins/Validation) are very clear on the JavaScript API. But I'm trying to find documentation on what is supported in metadata. The example uses: input id=cemail name=email size=25 class=required email / Which tells me that this field is required and must be a valid email address, but nowhere do I see a list of what kind of stuff can I use in the class field. Can I do required url, required number, etc? Is this documented somewhere and I'm just missing it?
[jQuery] Re: Optimize large DOM inserts
I identified why the $(table /).append syntax is so extremely slow
in the sample page. It actually has nothing to do with being a 'second
DOM append' as was assumed. Here is what I learned from my testing...
This is the HTML mark-up for the tests:
BODY
DIV id=container/DIV
TABLE id=Table/TABLE
/BODY
I generated the same 'html' var from Mike's test page - containing
2000 table-rows. The loop used is irrelevant to these tests because
the times shown below are for the DOM insertion *only*.
First, here is the original append-code from Mike's sample page...
$('#container').append(
$('tabletbody/tbody/table').append(html)
);
// run-time: 7.5 sec
Note the extreme slowness of the insertion - over 7 seconds!
But by just *moving* the tbody tags, it becomes 20-times faster...
$('#container').append(
$('table/table').append('tbody'+ html +'/tbody')
);
// run-time: 0.36 sec
If we reduce it to a single command, it becomes 35-times faster...
$('#container').append(
'tabletbody'+ html +'/tbody/table'
);
// run-time: 0.24 sec
BTW, the speed is the same whether .html() or .append() is used.
If the existing table is used instead, we gain only a few ms.
$('#Table').append('tbody'+ html +'/tbody');
// run-time: 0.22 sec
To see if it makes a difference appending to a table that's 'not
empty', I appended the same 2000 rows *10-times* (to keep the math
simple)
html = 'tbody'+ html +'/tbody';
$('#Table')
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
.append( html )
;
// run-time: 2.23 sec
The run-time to append 10-times is *exactly* 10-times as long as
appending the first time. This means it makes no difference whether
the table is 'empty' or already has content.
So, in my tests, there is *no benefit* to appending an entire table to
an empty container. You get identical performance (in IE7) by
appending the new rows to a table - as long as they are wrapped in a
tbody. If the rows are not inside a tbody, then they are appended one-
by-one! This is why the syntax used by Mike was so extremely slow. It
actually had nothing to do with appending 2 elements, which I knew
could not account for a 3000% difference!
I dynamically generate table rows A LOT. My current web-app appends a
7-row tbody as a 'new record'. But I do not use loops to generate
html. Instead I use a hidden 'template tbody' that I clone. This has
all the events for the form-fields pre-attached. All I do is rename
all the fields after cloning the template, and before appending it to
the target table. This method is much easier to read and update than a
hundred lines of html-generating script. Plus I actually use the same
mark-up to generate the existing records onLoad (via JSP), so there is
zero code duplication.
I wanted to identify the cause of the slow append in Mike's sample
because I never see this in my applications. Now that I understand
what was happening, I see that appending a tbody is actually extremely
efficient - in fact, even faster than writing a new table! This is
good news because I cannot regenerate the entire table each time - I
must append new rows/records to an existing table.
I thought I'd share these results because appending a tbody (or a
single row) provides many more options than writing an entire table.
And now I know there is no performance difference - at least not in
IE7.
Thanks to Mike for providing a starting points for these tests, in
addition to his loop-optimization tips.
/Kevin
[jQuery] Re: dynamically inserted droppable
Nothing guys? Still couldn't figure it out on my own. Everything
appreciated.
On Feb 7, 6:20 pm, Chris ch0...@googlemail.com wrote:
Hi,
I am relatively new to developing applications with both javascript
and the jquery framework. What I can't figure out is what to do if I
dynamically insert something on my page (imagine I click on a button
to create a new div-container) and that div should then automatically
become a droppable or something.
Right now, I have the following code loaded on the top of my site.
This is not working when I dynamically load the div but of course is
when I manually add that markup to the page.
$('.usergroup').droppable({
accept: function(draggable) {
// imagine certain logic that will return true
},
drop: function(event, ui) {
// do something...
}
});
$('#newgroup').live('click', function() {
$('div class=usergroupnew user group/div').appendTo
('#container_usergroups').css('display', 'none').fadeIn('slow');
});
How can I make that div actually be droppable / whatever I want it to
be?
Thanks,
Christian
[jQuery] Re: jQuery + Validation: submit() is sending multiple form submits
Every time you're doing:
you're re-attaching an additional submit event to the form, so it's
executing it multiple times every time you submit.
What is it you're trying to do? When you define submitHandler for
validate, you should be doing whatever you're doing in $(form).submit
() inside the submitHandler.
On Feb 8, 7:21 am, zubin zubin...@yahoo.com wrote:
I'm having a problem with validating first then submitting a form with
jQuery after success. It works however it seems like my submit()
function keeps sending multiple submits and keeps growing each time i
reuse the form (i made sure the values are reset after each submit).
I'm not sure if its my code since i've re-checked it for hours to no
avail. Here is the code in a nut-shell:
My form with id of #form-external-link is validated when submit button
is clicked:
$(#form-external-link).validate({
rules: {
exlink_url: {
required: true,
url: true
}
},
submitHandler: function(form) {
alert('This will pop up only once as it should');
$(form).submit(function() {
alert('This will pop up every twice, 3x, 4x, etc.
after each
validate success');
});
}
});
Am I missing something from my code??
[jQuery] Re: jQuery + Validation: submit() is sending multiple form submits
Hmm.. code didn't display properly.
I wanted to say, every time you're doing
$(form).submit(...)
you're re-attaching an additional submit...
On Feb 8, 9:13 am, James james.gp@gmail.com wrote:
Every time you're doing:
you're re-attaching an additional submit event to the form, so it's
executing it multiple times every time you submit.
What is it you're trying to do? When you define submitHandler for
validate, you should be doing whatever you're doing in $(form).submit
() inside the submitHandler.
On Feb 8, 7:21 am, zubin zubin...@yahoo.com wrote:
I'm having a problem with validating first then submitting a form with
jQuery after success. It works however it seems like my submit()
function keeps sending multiple submits and keeps growing each time i
reuse the form (i made sure the values are reset after each submit).
I'm not sure if its my code since i've re-checked it for hours to no
avail. Here is the code in a nut-shell:
My form with id of #form-external-link is validated when submit button
is clicked:
$(#form-external-link).validate({
rules: {
exlink_url: {
required: true,
url: true
}
},
submitHandler: function(form) {
alert('This will pop up only once as it should');
$(form).submit(function() {
alert('This will pop up every twice, 3x, 4x, etc.
after each
validate success');
});
}
});
Am I missing something from my code??
[jQuery] Re: Optimize large DOM inserts
Rick, based on what I've learned from testing, you have another option
now...
Here is a modified version of Mike's code - without generating the
table.
function populateDutyTable(response) {
var currentDay = '';
var rows = response.QGETDUTYSCHEDULE.DATA;
var out = [], o = -1;
out[++o] = 'tbody'; // CHANGED
for( var row, i = -1; row = rows[++i]; ) {
var day = row[1];
if( currentDay != day ) {
currentDay = day;
out[++o] = 'trtd class=cell-day';
out[++o] = row[1];
out[++o] = '/tdtd class=cell-date';
out[++o] = row[2];
out[++o] = '/tdtd class=cell-blank
colspan=5nbsp;/td/tr';
}
out[++o] = 'trtd class=cell-blank-daynbsp;/tdtd
class=cell-blank-datenbsp;/tdtd class=cell-am-am';
out[++o] = row[3];
out[++o] = '/tdtd class=cell-position';
out[++o] = row[4];
out[++o] = '/tdtd colspan=3Cell Content/td/tr';
}
out[++o] = '/tbody'; // CHANGED
$('#scheduleBody').append( out.join('') ); // CHANGED
}
A container around the table is no longer required because wrapping
the rows in a tbody achieves the same performance as wrapping them in
a table. Plus, you could now add rows without regenerating the entire
table. This provides more options with no penalty. For example, now
you could hard-code the table with column headers - for example...
table id=scheduleBody
thead
tr
thID/th
thDay/th
thDate/th
thName/th
/tr
/thead
/table
This is cleaner and faster than adding column headers inside your
Javascript loop.
I suggest you try both methods, Rick. Use a timer (like MIike's sample
pages) to confirm whether both are equally fast. Based on my tests,
you may find appending to the table even faster, with cleaner markup
as a bonus.
Ciao,
/Kevin
On Feb 7, 3:20 pm, Rick Faircloth r...@whitestonemedia.com wrote:
Hey, thanks Michael for taking the time to provide the
explanation and the re-write. I'll put this into place
and see how it performs. I'm sure it'll be *much* better!
Rick
[jQuery] Re: selector to return the number of rows in a table before the row I just selected
Assuming row means the number of tr, and your tables looks like: table trtddata/td/tr trtddata/td/tr trtddata/td/tr trtddata/td/tr trtddata/td/tr /table you can do something like: var count = $(table tr).length; http://docs.jquery.com/Core/length On Feb 8, 8:23 am, pantagruel rasmussen.br...@gmail.com wrote: Hi, I am selecting the row of a table. I would like to be able to count how many rows there are in the table before the row I just selected. i suppose there is a jQuery selector that will do this. Thanks
[jQuery] Re: selector to return the number of rows in a table before the row I just selected
Oops, I misread. You wanted the count before the one you selected. Please disregard my response! On Feb 8, 9:22 am, James james.gp@gmail.com wrote: Assuming row means the number of tr, and your tables looks like: table trtddata/td/tr trtddata/td/tr trtddata/td/tr trtddata/td/tr trtddata/td/tr /table you can do something like: var count = $(table tr).length; http://docs.jquery.com/Core/length On Feb 8, 8:23 am, pantagruel rasmussen.br...@gmail.com wrote: Hi, I am selecting the row of a table. I would like to be able to count how many rows there are in the table before the row I just selected. i suppose there is a jQuery selector that will do this. Thanks
[jQuery] Re: selector to return the number of rows in a table before the row I just selected
I did a search but I could only find a selector that selected after something: http://docs.jquery.com/Selectors/siblings#prevsiblings can help. Maybe you can get the total rows count, subtract from the count from prev ~ siblings (and probably subtract 1 also). I hope that helps somewhat. On Feb 8, 9:24 am, James james.gp@gmail.com wrote: Oops, I misread. You wanted the count before the one you selected. Please disregard my response! On Feb 8, 9:22 am, James james.gp@gmail.com wrote: Assuming row means the number of tr, and your tables looks like: table trtddata/td/tr trtddata/td/tr trtddata/td/tr trtddata/td/tr trtddata/td/tr /table you can do something like: var count = $(table tr).length; http://docs.jquery.com/Core/length On Feb 8, 8:23 am, pantagruel rasmussen.br...@gmail.com wrote: Hi, I am selecting the row of a table. I would like to be able to count how many rows there are in the table before the row I just selected. i suppose there is a jQuery selector that will do this. Thanks
[jQuery] Re: Accordians in Tabs works correctly on IE but not Firefox
What does working correctly (or not working) mean? I'm using FF 3.0.6 and it seems to be functioning correctly. I click on the boxes on the left (test tools, graphing, etc.) and the tabs box changes. I click on the tabs in that box and it seems to be switching tabs as expected. On Feb 7, 11:41 am, lorlarz lorl...@gmail.com wrote: Accordians in Tabs works correctly on IE but not Firefox http://mynichecomputing.org/testpage/ Help would be appreciated
[jQuery] Re: jQuery + Validation: submit() is sending multiple form submits
Hi James! Thanks for the quick reply. I'm still confused as to where I
should place my $(form).submit(..). so i'm not re-attaching additional
submit events?
What i'm doing basically is: 1. have Validate pass the form 2. submit
the form via ajax
The only thing is that the form is always being reused to submit data
which causes the symptoms you've identifed...
On Feb 9, 3:14 am, James james.gp@gmail.com wrote:
Hmm.. code didn't display properly.
I wanted to say, every time you're doing
$(form).submit(...)
you're re-attaching an additional submit...
On Feb 8, 9:13 am, James james.gp@gmail.com wrote:
Every time you're doing:
you're re-attaching an additional submit event to the form, so it's
executing it multiple times every time you submit.
What is it you're trying to do? When you define submitHandler for
validate, you should be doing whatever you're doing in $(form).submit
() inside the submitHandler.
On Feb 8, 7:21 am, zubin zubin...@yahoo.com wrote:
I'm having a problem with validating first then submitting a form with
jQuery after success. It works however it seems like my submit()
function keeps sending multiple submits and keeps growing each time i
reuse the form (i made sure the values are reset after each submit).
I'm not sure if its my code since i've re-checked it for hours to no
avail. Here is the code in a nut-shell:
My form with id of #form-external-link is validated when submit button
is clicked:
$(#form-external-link).validate({
rules: {
exlink_url: {
required: true,
url: true
}
},
submitHandler: function(form) {
alert('This will pop up only once as it should');
$(form).submit(function() {
alert('This will pop up every twice, 3x, 4x, etc.
after each
validate success');
});
}
});
Am I missing something from my code??- Hide quoted text -
- Show quoted text -
[jQuery] select after AJAX
I am trying to make chained select. I have three selects: type, category, product. I created ajax response conected to change of type or category. When I change type select (list types is static, taking from base by php), ajax give mi the list of category. It works. But after this, when I want to change category (after taking of list of category) second function AJAX don't responses and don't gives mi the list of the product. It looks like the function $().html(html) don't refresh the DOM structure. How to refersh injection html to be parsed by JS.
[jQuery] Re: Jquery pagination plugin problem
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] Optimize Horizontal Scroll Interface
Hello Peoples. I have been working on an interface using the jquery plugin ScrollTo. I have large left and right buttons which scroll the page content left and right. 10 items are displayed at a time, when the visitor is on item 10 the left and right buttons load the page with next or previous ten items. Here is the testing page: http://www.kith-kin.co.uk/xmas08/studio/ I needed to find out which item was being 'viewed' so the buttons would perform correctly, even if the page was manually scrolled. I count which item was being viewed by taking the scroll offset and then looping through the width of the content. I think this could be improved, I am not that well versed in javascript / jquery. Here is the js, the calculation is in the scroll function. http://www.kith-kin.co.uk/js/09/studio/kithkin.js Can I do this calculation only on horizontal scroll, jquery's method seems to be for both vertical and horizontal. Or could i run the calculation only at the end of scrolling, not whilst scrolling? Any tips or suggestions would be ace, im still learning! Cheers. Ian.
[jQuery] Wmode Flash in an iframe
Hello. I've got an annoying problem with flash widget embeds always being on top of absolute positioned divs. The problem comes that one widget is an iframe, and within that iframe is the flash without wmode set. I can't seem to access the flash properties with jquery, I think due to cross domain security? To see the issue, scroll right. http://www.kith-kin.co.uk/xmas08/search/?find=bleep The embed are from user generated content, and I can't really get users change the code at embed point. I had the a similar problem with youtube embeds, but I set the wmode with jquery, and show and hid the element. Is there any way to hide an element once it is in a certain area of the screen? Cheers. Ian.
[jQuery] Re: jQuery + Validation: submit() is sending multiple form submits
Try this:
$(#form-external-link).validate({
rules: {
exlink_url: {
required: true,
url: true
}
},
submitHandler: function(form) {
alert('This will pop up only once as it should');
form.submit();
}
});
It triggers the native submit event just once, without binding an
additional submit event or, even worse, triggering the validation to
run again.
Jörn
On Sun, Feb 8, 2009 at 6:21 PM, zubin zubin...@yahoo.com wrote:
I'm having a problem with validating first then submitting a form with
jQuery after success. It works however it seems like my submit()
function keeps sending multiple submits and keeps growing each time i
reuse the form (i made sure the values are reset after each submit).
I'm not sure if its my code since i've re-checked it for hours to no
avail. Here is the code in a nut-shell:
My form with id of #form-external-link is validated when submit button
is clicked:
$(#form-external-link).validate({
rules: {
exlink_url: {
required: true,
url: true
}
},
submitHandler: function(form) {
alert('This will pop up only once as it should');
$(form).submit(function() {
alert('This will pop up every twice, 3x, 4x, etc.
after each
validate success');
});
}
});
Am I missing something from my code??
[jQuery] Re: selector to return the number of rows in a table before the row I just selected
you should be looking at http://docs.jquery.com/Traversing
var currentRow = $('table tr').eq(7);
var howManyBefore = currentRow.prevAll('tr').length;
cheers,
- ricardo
On Feb 8, 3:23 pm, pantagruel rasmussen.br...@gmail.com wrote:
Hi,
I am selecting the row of a table. I would like to be able to count
how many rows there are in the table before the row I just selected. i
suppose there is a jQuery selector that will do this.
Thanks
[jQuery] Re: [Validate] list of metadata options?
All documented methods are supported that way, with the exception of methods that require a parameter. Available methods are documented here: http://docs.jquery.com/Plugins/Validation#List_of_built-in_Validation_methods Jörn On Sun, Feb 8, 2009 at 7:38 PM, Raymond Camden rcam...@gmail.com wrote: I may be missing something obvious. The docs for Validation (http:// docs.jquery.com/Plugins/Validation) are very clear on the JavaScript API. But I'm trying to find documentation on what is supported in metadata. The example uses: input id=cemail name=email size=25 class=required email / Which tells me that this field is required and must be a valid email address, but nowhere do I see a list of what kind of stuff can I use in the class field. Can I do required url, required number, etc? Is this documented somewhere and I'm just missing it?
[jQuery] Re: validation remote
This is probably a bug that occurs only in combination of error
containers and the remote methods. I'll look into it.
Jörn
On Sun, Feb 8, 2009 at 6:07 PM, Kris k...@kriskhoury.com wrote:
Another figure out the solution for this? I am having a similar
problem.
Thanks guys,
Kris
On Dec 15 2008, 4:17 am, Jet webones...@hotmail.com wrote:
Hi,
Sounds like we are having the same problem.
I have posted about the problem in this thread.
http://groups.google.com/group/jquery-en/browse_thread/thread/5d29f6e...
The thread above though refers to a field not usingremote, but I'm
also having the same problem on another page when usingremote.
URL:http://www.thaidatelink.com/account/register/
(checkout the Username field which I'm using remote.)
Well...sorry I'm not of much help.
Just to bring to your attention about this similar thread and hope
that Jörn (the author of this wonderful script) could help.
Good luck!
;)
On Dec 15, 4:48 am, kemalemin kemale...@gmail.com wrote:
Hi, myvalidationsummary worked quite fine before I made aremote
username check available to it. The problem is when for the first time
an already existing username is entered into the username box, the
error div pops alright saying that the username already exists in the
db. however when I go back and correct it, the error message
disappears but the containing div still exists on the page. below is
the code, I hope somebody can help
var container = $('#error_container');
// validate the form when it is submitted
var validator = $(#frmUserRegister).validate({
onkeyup: false,
errorContainer: container,
errorLabelContainer: $(ol, container),
wrapper: 'li',
meta: validate,
rules: {
txtFullName: {
required: true,
rangelength:[3, 100]},
txtUsername: {
required: true,
rangelength:[5, 30],
remote:ajaxCheckUsername.aspx}, // returns 'true' or
'false' as string
txtEmail: {
required: true,
email: true},
txtPassword: {
required: true,
rangelength:[5, 20]},
txtConfirmPassword: {
equalTo: #txtPassword}
},
messages: {
txtFullName: {
required: Please enter your strongfull name/
strong.,
rangelength: Fullname must be strongbetween 3 and
100 characters/strong},
txtUsername: {
required: Please enter a strongvalid username/
strong.,
rangelength: Username must be strongbetween 5 and
30 characters/strong.,
remote: jQuery.format(strongu{0}/u is already
taken/strong, please choose a different username.)},
txtEmail: {
required: please provide an strongemail/strong
address.,
email: please provide a strongvalid email/strong
address},
txtPassword: {
required: please provide a strongpassword/
strong,
rangelength: Password must be strong between 6 and
20 characters/strong},
txtConfirmPassword: {
equalTo: passwords strongmust match/strong.}
},
});
});
/script
style type=text/css
#error_container
{
background-image:url(img/error.gif);
background-repeat:no-repeat;
background-color: #FFE8E8;
border: 1px solid #CC;
color: #CC;
font-family:Tahoma;
font-size:11px;
padding:4px 0 0 40px;
display: none;
}
#error_container ol li {
list-style-type:circle;
}
form.frmUserRegister label.frmUserRegister, label.error {
/* remove the next line when you have trouble in IE6 with labels in
list */
color: #CC;
}
/style
/head
body
form id=frmUserRegister runat=server
div id=error_container
strongplease review and correct the following errors:/strong
ol
li style=display:none;/li
/ol
/div
the rest of the page are the form fields...
here, the div with the id of error_container is still being
displayed...
[jQuery] Re: [Validate] list of metadata options?
Hmm. So a min check is not available since it requires a value, but url is because it does. I guess that makes sense. But is that actually documented though? On Feb 8, 4:17 pm, Jörn Zaefferer joern.zaeffe...@googlemail.com wrote: All documented methods are supported that way, with the exception of methods that require a parameter. Available methods are documented here:http://docs.jquery.com/Plugins/Validation#List_of_built-in_Validation... Jörn
[jQuery] Re: hide()
http://www.w3.org/TR/html4/struct/global.html#adef-id HTML standards state that the id attribute should be unique in an html document. Use class or somesuch. Then you can do something like $(.trContactInfo).hide() and it will hide everything. A. Gundel On Sun, Feb 8, 2009 at 1:30 PM, WebAppDeveloper minhle0...@yahoo.com wrote: Hi, If I have an html table with 3 rows each with the same id, for example, id=trContactInfo, as in the html code below. Using jQuery, if I want to hide these 3 rows with the same id, i would do something like $(tr#trContactInfo).hide().next().hide().next().hide. My question is: Instead of running hide() 3 times, is there a way to hide all the rows with the same id by looping thru all the rows, basically these 3 rows plus any new rows that may be added to the table with the same id in the future? table tr id=trContactInfo tdFull Name:/td tdinput type=text name=FullName size=40/td /tr tr id=trContactInfo tdE-mail:/td tdinput type=text name=Email size=40/td /tr tr id=trContactInfo tdPhone:/td tdinput type=text name=Phone size=40/td /tr tr tdField 4:/td tdinput type=text name=Field4 size=40/td /tr tr tdField 5:/td tdinput type=text name=Field5 size=40/td /tr tr tdField 6:/td tdinput type=text name=Field6 size=40/td /tr /table Thanks very much in advance. -- View this message in context: http://www.nabble.com/hide%28%29-tp21886844s27240p21886844.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] [autocomplete] send a json object?
Hi, i need to send a json object to the autocompleter. i see this
example on the demo:
$(#thickboxEmail).autocomplete(emails, {
minChars: 0,
width: 310,
matchContains: true,
highlightItem: false,
formatItem: function(row, i, max, term) {
return row.name.replace(new RegExp(( + term + ),
gi),
strong$1/strong) + brspan style='font-size: 80%;'Email:
lt; + row.to + gt;/span;
},
formatResult: function(row) {
return row.to;
}
});
the emails object var is a object, so
emails = {name: 'aasdfasd', to: 'asdfqweqwe'}
i need just that, the problem is that my mail is on a mysql DB. i dont
want to send a one item per line. i want to send a json object. is
there anyway?
[jQuery] Re: [autocomplete] send a json object?
Check this example for using remote data with JSON:
http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/json.html
Jörn
On Sun, Feb 8, 2009 at 11:53 PM, arnoldroa mano...@gmail.com wrote:
Hi, i need to send a json object to the autocompleter. i see this
example on the demo:
$(#thickboxEmail).autocomplete(emails, {
minChars: 0,
width: 310,
matchContains: true,
highlightItem: false,
formatItem: function(row, i, max, term) {
return row.name.replace(new RegExp(( + term + ),
gi),
strong$1/strong) + brspan style='font-size: 80%;'Email:
lt; + row.to + gt;/span;
},
formatResult: function(row) {
return row.to;
}
});
the emails object var is a object, so
emails = {name: 'aasdfasd', to: 'asdfqweqwe'}
i need just that, the problem is that my mail is on a mysql DB. i dont
want to send a one item per line. i want to send a json object. is
there anyway?
[jQuery] reloading new objects from json
I've got a ajax request that grabs a json response.
In order to be able to sort and get data from the response, I put the
response into a few objects using
[code]
function(jsondata){
var dates={};
var ids={};
$.each(jsondata.entry, function(){
if(!ids[this.id])
ids[this.id] = [];
ids[this.id].push(this);
if(!dates[this.date])
dates[this.date] = [];
dates[this.date].push(this);
});
for(var d in dates){
var date=d;
$('div#holddates').append('ul class=dayList id='+date
+'li class=date '+date+'/li/ul');
$.each(dates[date], function(){
$('ul#'+date).append('li class=cal id='+this.id
+''+this.name+'/li');
});
}
[/code]
When a user clicks on one of the dates, i go back to the json and get
a location from the id object
[code]
$('li.show').livequery('click', function(){
var getSid=$(this).attr('id');
alert(getSid);
$.each(bids[getSid], function(){
alert(this.name);
});
});
[/code]
All of this code works the first time I get an ajax response, however,
if I make another ajax request, the first portion loads (so I get the
list with the id and name), but if I click that name, I seem to not
get access to the object again.
The first alert does show the correct id is being clicked, but I can't
seem to get past that.
Whats I found very strange is that if I pass the object into the
livequery function, then it always fails, even on the first response.
[jQuery] Re: selector to return the number of rows in a table before the row I just selected
You could use prevAll()
$('#myrow').prevAll().length;
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 8, 2009, at 2:30 PM, James wrote:
I did a search but I could only find a selector that selected after
something:
http://docs.jquery.com/Selectors/siblings#prevsiblings
can help.
Maybe you can get the total rows count, subtract from the count from
prev ~ siblings (and probably subtract 1 also).
I hope that helps somewhat.
On Feb 8, 9:24 am, James james.gp@gmail.com wrote:
Oops, I misread. You wanted the count before the one you selected.
Please disregard my response!
On Feb 8, 9:22 am, James james.gp@gmail.com wrote:
Assuming row means the number of tr,
and your tables looks like:
table
trtddata/td/tr
trtddata/td/tr
trtddata/td/tr
trtddata/td/tr
trtddata/td/tr
/table
you can do something like:
var count = $(table tr).length;
http://docs.jquery.com/Core/length
On Feb 8, 8:23 am, pantagruel rasmussen.br...@gmail.com wrote:
Hi,
I am selecting the row of a table. I would like to be able to count
how many rows there are in the table before the row I just
selected. i
suppose there is a jQuery selector that will do this.
Thanks
[jQuery] Re: selector to return the number of rows in a table before the row I just selected
Oops. Sorry, I didn't see Ricardo's reply before posting. In any case,
there's no need to filter the .prevAll() with 'tr', since no other
element is allowed as a sibling of a tr.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 8, 2009, at 6:06 PM, Karl Swedberg wrote:
You could use prevAll()
$('#myrow').prevAll().length;
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 8, 2009, at 2:30 PM, James wrote:
I did a search but I could only find a selector that selected after
something:
http://docs.jquery.com/Selectors/siblings#prevsiblings
can help.
Maybe you can get the total rows count, subtract from the count from
prev ~ siblings (and probably subtract 1 also).
I hope that helps somewhat.
On Feb 8, 9:24 am, James james.gp@gmail.com wrote:
Oops, I misread. You wanted the count before the one you selected.
Please disregard my response!
On Feb 8, 9:22 am, James james.gp@gmail.com wrote:
Assuming row means the number of tr,
and your tables looks like:
table
trtddata/td/tr
trtddata/td/tr
trtddata/td/tr
trtddata/td/tr
trtddata/td/tr
/table
you can do something like:
var count = $(table tr).length;
http://docs.jquery.com/Core/length
On Feb 8, 8:23 am, pantagruel rasmussen.br...@gmail.com wrote:
Hi,
I am selecting the row of a table. I would like to be able to
count
how many rows there are in the table before the row I just
selected. i
suppose there is a jQuery selector that will do this.
Thanks
[jQuery] Using jQuery Validation with Dot Net
I'm having issues getting the validation plugin (http://bassistance.de/
jquery-plugins/jquery-plugin-validation/) to work with dot net.
Whatever i try i can't stop the form from submitting. I've tried
several things i've found on this group and the web. Can anyone help
me getting this to work?
Here's my html.
span id=ctl00_Control_LeftColumn_CF_Contact class=ContactForm
p class=SuccessMessageSubmitted/p
span class=Field
span class=LabelName /span
span class=Validation
span id=ctl00_Control_LeftColumn_CF_Contact_ctl01_ctl04
style=display: none;/
/span
input id=ctl00_Control_LeftColumn_CF_Contact_ctl01_TB_TextBox
class=TextBox Name type=text name=ctl00$Control_LeftColumn
$CF_Contact$ctl01$TB_TextBox/
/span
span class=Field
/span
span class=Field
/span
a id=ctl00_Control_LeftColumn_CF_Contact_LB_Submit class=Submit
href=javascript:__doPostBack('ctl00$Control_LeftColumn$CF_Contact
$LB_Submit','') style=background-color: rgb(51, 51, 51);Submit/a
/span
And here is my javascript:
$(document).ready(function(){
$(#aspnetForm).validate({
rules: {
ctl00$Control_LeftColumn$CF_Contact$ctl01$TB_TextBox:
required,
ctl00$Control_LeftColumn$CF_Contact$ctl02$TB_TextBox: {
required: true,
email: true
},
ctl00$Control_LeftColumn$CF_Contact$ctl04$TB_TextBox:
required
}
});
});
As i say above, the form just submits regardless so i'm lost on a
solution!
[jQuery] Convert from AjaxRequest to jQuery/ajax
For some time I've been using a little ajax library called AjaxRequest.
Because I'm working with code generation tools, I'd like to make a
first - step switch to jQuery as simple as possible.
A sample AjaxRequest function follows:
function CheckForm0(theform) {
AjaxRequest.submit(
theform
,{
'onSuccess':function(req){
var res = req.responseText.split('\n')
document.getElementById(cell1).innerHTML = res[1];
document.getElementById(div1).innerHTML = res[2];
document.getElementById(span1).innerHTML = res[3];
alert(res[0]);
},
'onError':function(req){ alert(ERROR: + req.statusText);}
}
);
return false;
} // end function
// Form tag follows:
form method=post
action=http://bart.johnson.com/cgi-bin/baker/reb/test-ajax.r;
onsubmit=return CheckForm0(this);
// Note that method, action, and onsubmit parameters are in the tag
// and I would prefer that they remain there. Also the form is referenced
// by 'this' in the onsubmit parameter and passed to the Ajax function.
I'd appreciate pointers to jQuery examples that would help me with the
transition. I'd like an approach that requires as few changes to the form
tag as possible.
Thanks
Tim
[jQuery] Re: dynamically inserted droppable
After you add the element to the page, just call .droppable() on it.
$('div class=usergroupnew user
group/div').appendTo('#container_usergroups').css('display',
'none').fadeIn('slow').droppable(options);
- Richard
On Sat, Feb 7, 2009 at 12:20 PM, Chris ch0...@googlemail.com wrote:
Hi,
I am relatively new to developing applications with both javascript
and the jquery framework. What I can't figure out is what to do if I
dynamically insert something on my page (imagine I click on a button
to create a new div-container) and that div should then automatically
become a droppable or something.
Right now, I have the following code loaded on the top of my site.
This is not working when I dynamically load the div but of course is
when I manually add that markup to the page.
$('.usergroup').droppable({
accept: function(draggable) {
// imagine certain logic that will return true
},
drop: function(event, ui) {
// do something...
}
});
$('#newgroup').live('click', function() {
$('div class=usergroupnew user group/div').appendTo
('#container_usergroups').css('display', 'none').fadeIn('slow');
});
How can I make that div actually be droppable / whatever I want it to
be?
Thanks,
Christian
[jQuery] Re: Using jQuery Validation with Dot Net
Do you have an internet facing page set up to view this?
On Sun, Feb 8, 2009 at 2:30 PM, Jon cakeordeat...@gmail.com wrote:
I'm having issues getting the validation plugin (http://bassistance.de/
jquery-plugins/jquery-plugin-validation/) to work with dot net.
Whatever i try i can't stop the form from submitting. I've tried
several things i've found on this group and the web. Can anyone help
me getting this to work?
Here's my html.
span id=ctl00_Control_LeftColumn_CF_Contact class=ContactForm
p class=SuccessMessageSubmitted/p
span class=Field
span class=LabelName /span
span class=Validation
span id=ctl00_Control_LeftColumn_CF_Contact_ctl01_ctl04
style=display: none;/
/span
input id=ctl00_Control_LeftColumn_CF_Contact_ctl01_TB_TextBox
class=TextBox Name type=text name=ctl00$Control_LeftColumn
$CF_Contact$ctl01$TB_TextBox/
/span
span class=Field
/span
span class=Field
/span
a id=ctl00_Control_LeftColumn_CF_Contact_LB_Submit class=Submit
href=javascript:__doPostBack('ctl00$Control_LeftColumn$CF_Contact
$LB_Submit','') style=background-color: rgb(51, 51, 51);Submit/a
/span
And here is my javascript:
$(document).ready(function(){
$(#aspnetForm).validate({
rules: {
ctl00$Control_LeftColumn$CF_Contact$ctl01$TB_TextBox:
required,
ctl00$Control_LeftColumn$CF_Contact$ctl02$TB_TextBox: {
required: true,
email: true
},
ctl00$Control_LeftColumn$CF_Contact$ctl04$TB_TextBox:
required
}
});
});
As i say above, the form just submits regardless so i'm lost on a
solution!
[jQuery] Re: Form Plugin with file upload
Mike, thank you so much for your patience with me on this one. I've created a simplified version of this page taking out all of the css and unnecessary javascript. all that is there is jquery, form plugin, and the few functions used for the page: http://www.paperdemon.com/tests/comments_plain.php I still get the same behavior. File upload works fine in non-AJAX. Plain text comments work fine in AJAX. As soon as you add the file upload, it has a cow and doesn't properly submit in the AJAX environment. I just upgraded the plain page to the latest version of jquery and the form plugin. And I noticed that with the new version, it does not make it to the success callback and you'll see this when you submit the form it gets stuck on the loading... text This was likely a bug fix of some kind. But still my file uploads are not working in ajax. What should my next steps be? Susie BogusRed Sahim http://www.PaperDemon.com On Mon, Feb 2, 2009 at 8:14 AM, phicarre gam...@bluewin.ch wrote: If I resume the situation : text fields file field $_POST $_FILES Remark -- filledfilled empty filled abnormal - filled empty filled normal filled- filled empty normal - - empty empty normal On 30 jan, 19:06, phicarre gam...@bluewin.ch wrote: Hi Mike, This thread seems to be similar to my problem submitted by email (subjet: about url) On 30 jan, 18:37, Mike Alsup mal...@gmail.com wrote: No, you are not supposed to do anything at all with the iframe. The plugin handles all of that for you. I'll try to take a look at your page tomorrow. Well, I have to admit that I'm not sure why your page isn't working. However, I did create a very simple test case here: http://jquery.malsup.com/form/file-test3.html This page has a file input and a text input and the form is submitted to http://jquery.malsup.com/form/test-xml.php which you can see returns the exact same response as your server (I think). Could you create a simple test case like this and run it on your server? Mike
[jQuery] Re: Convert from AjaxRequest to jQuery/ajax
I believe the code you are looking for would be something like this
[code]
$('form').submit(function(){
var cell1 = $('#cell1').html();
var div1= $('#div1).html();
var span1=$('#span1).html();
$.ajax({
type: GET,
url : 'urlToGet.php',
data: 'cell1='+cell1+'div1='+div1+'span1='+span1,
success: function(response){
// whatever you want to do with the response
}
});
});
[/code]
On Feb 8, 4:23 pm, Tim Johnson t...@johnsons-web.com wrote:
For some time I've been using a little ajax library called AjaxRequest.
Because I'm working with code generation tools, I'd like to make a
first - step switch to jQuery as simple as possible.
A sample AjaxRequest function follows:
function CheckForm0(theform) {
AjaxRequest.submit(
theform
,{
'onSuccess':function(req){
var res = req.responseText.split('\n')
document.getElementById(cell1).innerHTML = res[1];
document.getElementById(div1).innerHTML = res[2];
document.getElementById(span1).innerHTML = res[3];
alert(res[0]);
},
'onError':function(req){ alert(ERROR: + req.statusText);}
}
);
return false;
} // end function
// Form tag follows:
form method=post
action=http://bart.johnson.com/cgi-bin/baker/reb/test-ajax.r;
onsubmit=return CheckForm0(this);
// Note that method, action, and onsubmit parameters are in the tag
// and I would prefer that they remain there. Also the form is referenced
// by 'this' in the onsubmit parameter and passed to the Ajax function.
I'd appreciate pointers to jQuery examples that would help me with the
transition. I'd like an approach that requires as few changes to the form
tag as possible.
Thanks
Tim
[jQuery] Re: jQuery + Validation: submit() is sending multiple form submits
Since you wanted do submit by Ajax;
$(#form-external-link).validate({
rules: {
exlink_url: {
required: true,
url: true
}
},
submitHandler: function(form) {
$.ajax(...);
}
});
On Feb 8, 9:50 am, zubin zubin...@yahoo.com wrote:
Hi James! Thanks for the quick reply. I'm still confused as to where I
should place my $(form).submit(..). so i'm not re-attaching additional
submit events?
What i'm doing basically is: 1. have Validate pass the form 2. submit
the form via ajax
The only thing is that the form is always being reused to submit data
which causes the symptoms you've identifed...
On Feb 9, 3:14 am, James james.gp@gmail.com wrote:
Hmm.. code didn't display properly.
I wanted to say, every time you're doing
$(form).submit(...)
you're re-attaching an additional submit...
On Feb 8, 9:13 am, James james.gp@gmail.com wrote:
Every time you're doing:
you're re-attaching an additional submit event to the form, so it's
executing it multiple times every time you submit.
What is it you're trying to do? When you define submitHandler for
validate, you should be doing whatever you're doing in $(form).submit
() inside the submitHandler.
On Feb 8, 7:21 am, zubin zubin...@yahoo.com wrote:
I'm having a problem with validating first then submitting a form with
jQuery after success. It works however it seems like my submit()
function keeps sending multiple submits and keeps growing each time i
reuse the form (i made sure the values are reset after each submit).
I'm not sure if its my code since i've re-checked it for hours to no
avail. Here is the code in a nut-shell:
My form with id of #form-external-link is validated when submit button
is clicked:
$(#form-external-link).validate({
rules: {
exlink_url: {
required: true,
url: true
}
},
submitHandler: function(form) {
alert('This will pop up only once as it should');
$(form).submit(function() {
alert('This will pop up every twice, 3x, 4x,
etc. after each
validate success');
});
}
});
Am I missing something from my code??- Hide quoted text -
- Show quoted text -
[jQuery] Re: Convert from AjaxRequest to jQuery/ajax
On Sunday 08 February 2009, pedalpete wrote:
I believe the code you are looking for would be something like this
Hi pedalpete:
Thanks you for the quick response.
[code]
$('form').submit(function(){
var cell1 = $('#cell1').html();
var div1= $('#div1).html();
var span1=$('#span1).html();
$.ajax({
type: GET,
url : 'urlToGet.php',
data: 'cell1='+cell1+'div1='+div1+'span1='+span1,
success: function(response){
// whatever you want to do with the response
}
});
As you see, the type and url are hard coded into the function.
Furthermore, if I understand the interface to the function, 'form'
as also hardcoded
In the case of the example that I submitted, the form is passed
as the 'this' keyword, allowing this function to have more than one caller.
Thanks again, more examples are welcome, but perhaps I would have
to dig deep and learn to write a wrapper.
cheers
tim
});
[/code]
On Feb 8, 4:23 pm, Tim Johnson t...@johnsons-web.com wrote:
For some time I've been using a little ajax library called AjaxRequest.
Because I'm working with code generation tools, I'd like to make a
first - step switch to jQuery as simple as possible.
A sample AjaxRequest function follows:
function CheckForm0(theform) {
AjaxRequest.submit(
theform
,{
'onSuccess':function(req){
var res = req.responseText.split('\n')
document.getElementById(cell1).innerHTML = res[1];
document.getElementById(div1).innerHTML = res[2];
document.getElementById(span1).innerHTML = res[3];
alert(res[0]);
},
'onError':function(req){ alert(ERROR: + req.statusText);}
}
);
return false;
} // end function
// Form tag follows:
form method=post
action=http://bart.johnson.com/cgi-bin/baker/reb/test-ajax.r;
onsubmit=return CheckForm0(this);
// Note that method, action, and onsubmit parameters are in the tag
// and I would prefer that they remain there. Also the form is referenced
// by 'this' in the onsubmit parameter and passed to the Ajax function.
I'd appreciate pointers to jQuery examples that would help me with the
transition. I'd like an approach that requires as few changes to the form
tag as possible.
Thanks
Tim
[jQuery] Re: Does it hurt to call functions that don't do anything on the page?
You could also just keep the list of functions in an array in your
external js file and then check the window object for them:
$(function() {
var funcs = [
'ManageCategoriesClick',
'HideByDefault',
'PrepareSplitForm',
'SetUpAdvertPopup',
'CheckAll',
'CheckNone',
'EditCategoryInPlace',
'PreparePaneLinks',
'PrepareToolTips'
]
$.each(funcs,function(i,f){
if(typeof(window[f]) == 'function'){
console.log('found '+f);
window[f]();
}
});
});
On Feb 8, 5:21 am, Beau zar...@gmail.com wrote:
Thanks for the ideas everyone!
@Stephan: Yes, it's in an external JS file. I'd prefer to not have to
do any inline javascript. I've considered it, but thanks for the
suggestion!
@Ricardo: Thanks for those. I may end up doing a variation of them.
On Feb 8, 4:50 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi
I guess you have your $().ready() function in an external js file,
otherwise you could
customize it for the according html page.
Another construct similar to Ricardos one, but a bit more flexible:
Use a global variable in every html file to specify the init functions
you want to call for this page:
script type=text/javascript
myInitFxn = [ManageCategoriesClick, HideByDefault,
PrepareSplitForm,...];
/script
ready.js:
$().ready(function(){
for(var i in myInitFxn) {
myInitFxn[i](); // call init function
}
});
by(e)
Stephan
2009/2/8 brian bally.z...@gmail.com:
On Sat, Feb 7, 2009 at 11:21 PM, Ricardo Tomasi ricardob...@gmail.com
wrote:
Alternatively you could add a different class to the body of each
page, then use this rather amusing construct:
$(document).ready((function(){
var is = function(v){ return ++document.body.className.indexOf(v) };
return(
is('categories')
? ManageCategoriesClick :
is('hidebydefault')
? HideByDefault :
is('form')
? PrepareSplitForm :
is('advert')
? SetUpAdvertPopup :
function(){} //nothing
);
})());
That is, indeed, amusing. And one for my toy chest. Thanks!
Who knew, back in '96, that javascript was going to turn out to be so
much fun?
[jQuery] Re: Does it hurt to call functions that don't do anything on the page?
*Tab+spacebar and it posts :P
You could put your list of functions in an array in your external js,
then call them on the window object in a loop:
$(function() {
var funcs = [
'ManageCategoriesClick',
'HideByDefault',
'PrepareSplitForm',
'SetUpAdvertPopup',
'CheckAll',
'CheckNone',
'EditCategoryInPlace',
'PreparePaneLinks',
'PrepareToolTips'
]
$.each(funcs,function(i,f){
if(typeof(window[f]) == 'function'){
window[f]();
}
});
});
On Feb 8, 5:21 am, Beau zar...@gmail.com wrote:
Thanks for the ideas everyone!
@Stephan: Yes, it's in an external JS file. I'd prefer to not have to
do any inline javascript. I've considered it, but thanks for the
suggestion!
@Ricardo: Thanks for those. I may end up doing a variation of them.
On Feb 8, 4:50 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi
I guess you have your $().ready() function in an external js file,
otherwise you could
customize it for the according html page.
Another construct similar to Ricardos one, but a bit more flexible:
Use a global variable in every html file to specify the init functions
you want to call for this page:
script type=text/javascript
myInitFxn = [ManageCategoriesClick, HideByDefault,
PrepareSplitForm,...];
/script
ready.js:
$().ready(function(){
for(var i in myInitFxn) {
myInitFxn[i](); // call init function
}
});
by(e)
Stephan
2009/2/8 brian bally.z...@gmail.com:
On Sat, Feb 7, 2009 at 11:21 PM, Ricardo Tomasi ricardob...@gmail.com
wrote:
Alternatively you could add a different class to the body of each
page, then use this rather amusing construct:
$(document).ready((function(){
var is = function(v){ return ++document.body.className.indexOf(v) };
return(
is('categories')
? ManageCategoriesClick :
is('hidebydefault')
? HideByDefault :
is('form')
? PrepareSplitForm :
is('advert')
? SetUpAdvertPopup :
function(){} //nothing
);
})());
That is, indeed, amusing. And one for my toy chest. Thanks!
Who knew, back in '96, that javascript was going to turn out to be so
much fun?
[jQuery] Re: Convert from AjaxRequest to jQuery/ajax
Sorry Tim, I didn't understand it that way.
You should still be able to do this fairly simply.
You don't have to specify the url, you can pass it as a variable.
But you would need to put your $.ajax function into another function,
and call it when clicked. You can also build the data variables in the
other functions.
For instance
[code]
$('form#1').submit(function(){
var url=$('form#1).attr('action');
// then get your data variables and do whatever you want to do with
them
var type= get;
submitForm(url, data);
});
function submitForm(url, data){
$.ajax({
type: type,
url: url,
data: data,
success: function(){
}
})
}
[/code]
I hope that helps, and that I understand what you were trying to do
better than my first answer.
[jQuery] Newbie Questions
I'm a newbie at jQuery so bear with me here. For the relevant stats: I
am using FF3.0.6, jQuery
I am attempting to recreate the Spain Map from Pragmatic Ajax. I did
it with GWT and now I am recreating it (or trying to) with jQuery. The
GWT version I did also support mouse wheel for zooming.
However I am not get getting very far. I did a bit of research and
found this[1] and this[2] but I need the images to be tiled.
So I jumped in after reading Plugins/Authoring[3] tutorial. However
things didn't go as smoothly as I would of hoped and so I started
scaling back. And scaling back. In the end this is what I ended up
with in jQuery.spainmap.js
jQuery.logError = function() { alert(Error); };
jQuery.logWarning = function { alert(Warning); };
jQuery.logDebug = function { alert(Debug); };
Which is not very exciting. When I run this in the document.ready:
$(document).ready(function() {
$.logError();
$(innerDiv).logDebug();
$(outerDiv).logWarning();
});
Nothing fires. The first is just a variation I tried to see if I
could provoke a reaction. This is the very same code in [3].
So: How do I get it this very simple example to work - ie Fire the
alerts.
[1] http://tinyjs.com/examples/draggable/index.html
[2] http://pupunzi.wordpress.com/2009/01/20/mbimgnavigator/
[3] http://docs.jquery.com/Plugins/Authoring
[jQuery] .hasClass() not behaving as expected.
Please help, I've been wrestling with this for too long now.
I've put together this code to change the background of a div when the
mouse hovers over a list of divs. One of the listed divs has a class
name of ash and I want to add a background image on that one hover;
all of the other listed divs only have colors. The problem is that
the .hasClass() doesn't seem to be behaving as it should, or I'm not
doing something, or I'm just completely clueless?
Below is my code and a sample html to test. Can someone please tell me
what I'm doing wrong? Why is my $(this).hasClass('ash') not
recognizing when my mouse hovers over the div with the class=ash?
Thanks in advance,
[code]
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; lang=en-us xml:lang=
en-us
head
meta content=text/html; charset=UTF-8
http-equiv=content-type /
titlemouseover color changer with preview/title
script type=text/javascript
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/
jquery.min.js/script
script type=text/javascript
//![CDATA[
$(document).ready(function () {
$.cstmzclrns = {clkclr : white};//$.cstmzclrns.clkclr
$(#colors ul li a).hover(
function () {
if (!$(this).hasClass('ash')) {
var color = $(this).css(background-color);
$(#cfilter).css({'background-color' : color});
$(#cfilter).css({'background-image' :
'none'});
} else {
$(#cfilter).css({'background-color' :
'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/ash.png)'});
}
}, function () {
if ($.cstmzclrns.clkclr == 'ash') {
$(#cfilter).css({'background-color' :
'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/ash.png)'});
} else {
$(#cfilter).css({'background-color' :
$.cstmzclrns.clkclr});
$(#cfilter).css({'background-image' :
'none'});
}
}).click(
function () {
if ($(this).hasClass('ash')) {
$.cstmzclrns = {clkclr : ash};
$(#cfilter).css({'background-color' :
'transparent'});
$(#cfilter).css({'background-image' : 'url(img/ts/
ash.png)'});
} else {
$.cstmzclrns = {clkclr :
$(this).css(background-color)};
$(#cfilter).css({'background-color' :
$.cstmzclrns.clkclr});
$(#cfilter).css({'background-image' :
'none'});
}
});
});
//]]
/script
style media=screen type=text/css
body {
background-color: black;
}
#cfilter {
margin: 0px;
padding: 0px;
opacity: 0.503;
position: absolute;
width: 473px;
height: 466px;
display: block;
right: 0px;
top: 0px;
float: right;
z-index: 1;
clear: none;
background-color: white;
}
#customize {
border: 3px solid #afa688;
margin: 0px;
padding: 10px 10px 10px 13px;
font-size: 0.8em;
font-family: Arial,Helvetica,sans-serif;
display: block;
float: left;
clear: left;
position: absolute;
opacity: 0.899;
background-color: #f4e2ab;
color: black;
width: 200px;
top: 25px;
z-index: 3;
}
#colors {
border-style: solid;
border-width: 1px;
padding: 0px;
position: relative;
background-color: white;
height: 21px;
top: 9px;
width: 137px;
left: 31px;
display: block;
}
#colors ul {
border-style: none;
border-width: 1px;
list-style-type: none;
position: relative;
top: -11px;
width: 99.9%;
left: -39px;
height: 99.9%;
}
#colors ul li {
margin: 0px;
padding: 0px;
float: left;
}
#colors ul li a {
border: 1px solid black;
margin: 0px 0px 0px 2px;
padding: 0px;
height: 15px;
display: block;
list-style-type: none;
list-style-position: inside;
width: 15px;
float: left;
}
/style
/head
body style=direction: ltr;
div id=customizeMouse over color blocks to see the
design in available colors.
div id=colors
ul
li class=white
a href=# style=
background-color: white; color: white;./a
/li
li class=ash
a href=# style=
background: gray url(img/ts/ash.png); color:
gray;
./a
/li
li class=light_blue
a href=# style=
background-color: #baedff; color: #baedff;./a
/li
li class=yellow_haze
a href=# style=
background-color: #ffdb87; color: #ffdb87;./a
/li
li class=kiwi_lime
a href=# style=
background-color: #5ba621; color:
[jQuery] Re: .hasClass() not behaving as expected.
In your code you're attaching the hover event to the anchor tags; in
the sample html none of the anchors has a class (the class is on the
parent li element).
On Feb 8, 4:24 pm, MiD-AwE cr.midda...@gmail.com wrote:
Please help, I've been wrestling with this for too long now.
I've put together this code to change the background of a div when the
mouse hovers over a list of divs. One of the listed divs has a class
name of ash and I want to add a background image on that one hover;
all of the other listed divs only have colors. The problem is that
the .hasClass() doesn't seem to be behaving as it should, or I'm not
doing something, or I'm just completely clueless?
Below is my code and a sample html to test. Can someone please tell me
what I'm doing wrong? Why is my $(this).hasClass('ash') not
recognizing when my mouse hovers over the div with the class=ash?
Thanks in advance,
[code]
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; lang=en-us xml:lang=
en-us
head
meta content=text/html; charset=UTF-8
http-equiv=content-type /
titlemouseover color changer with preview/title
script type=text/javascript
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/
jquery.min.js/script
script type=text/javascript
//![CDATA[
$(document).ready(function () {
$.cstmzclrns = {clkclr : white};//$.cstmzclrns.clkclr
$(#colors ul li a).hover(
function () {
if (!$(this).hasClass('ash')) {
var color = $(this).css(background-color);
$(#cfilter).css({'background-color' : color});
$(#cfilter).css({'background-image' :
'none'});
} else {
$(#cfilter).css({'background-color' :
'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/ash.png)'});
}
}, function () {
if ($.cstmzclrns.clkclr == 'ash') {
$(#cfilter).css({'background-color' :
'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/ash.png)'});
} else {
$(#cfilter).css({'background-color' :
$.cstmzclrns.clkclr});
$(#cfilter).css({'background-image' :
'none'});
}
}).click(
function () {
if ($(this).hasClass('ash')) {
$.cstmzclrns = {clkclr : ash};
$(#cfilter).css({'background-color'
: 'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/
ash.png)'});
} else {
$.cstmzclrns = {clkclr :
$(this).css(background-color)};
$(#cfilter).css({'background-color' :
$.cstmzclrns.clkclr});
$(#cfilter).css({'background-image'
: 'none'});
}
});});
//]]
/script
style media=screen type=text/css
body {
background-color: black;}
#cfilter {
margin: 0px;
padding: 0px;
opacity: 0.503;
position: absolute;
width: 473px;
height: 466px;
display: block;
right: 0px;
top: 0px;
float: right;
z-index: 1;
clear: none;
background-color: white;}
#customize {
border: 3px solid #afa688;
margin: 0px;
padding: 10px 10px 10px 13px;
font-size: 0.8em;
font-family: Arial,Helvetica,sans-serif;
display: block;
float: left;
clear: left;
position: absolute;
opacity: 0.899;
background-color: #f4e2ab;
color: black;
width: 200px;
top: 25px;
z-index: 3;}
#colors {
border-style: solid;
border-width: 1px;
padding: 0px;
position: relative;
background-color: white;
height: 21px;
top: 9px;
width: 137px;
left: 31px;
display: block;}
#colors ul {
border-style: none;
border-width: 1px;
list-style-type: none;
position: relative;
top: -11px;
width: 99.9%;
left: -39px;
height: 99.9%;}
#colors ul li {
margin: 0px;
padding: 0px;
float: left;}
#colors ul li a {
border: 1px solid black;
margin: 0px 0px 0px 2px;
padding: 0px;
height: 15px;
display: block;
list-style-type: none;
list-style-position: inside;
width: 15px;
float: left;}
/style
/head
body style=direction: ltr;
div id=customizeMouse over color blocks to see the
design in available colors.
div id=colors
ul
li class=white
a href=# style=
background-color: white; color: white;./a
/li
li class=ash
a href=# style=
background: gray url(img/ts/ash.png); color:
gray;
./a
/li
li class=light_blue
a
[jQuery] Re: Newbie Questions
I've now got it working, using the syntax I used in the first
instance...
Now I need to figure out what part of the fiddling I performed fixed
my problem...
G.
On Feb 9, 1:20 am, graham.reeds graham.re...@gmail.com wrote:
I'm a newbie at jQuery so bear with me here. For the relevant stats: I
am using FF3.0.6, jQuery
I am attempting to recreate the Spain Map from Pragmatic Ajax. I did
it with GWT and now I am recreating it (or trying to) with jQuery. The
GWT version I did also support mouse wheel for zooming.
However I am not get getting very far. I did a bit of research and
found this[1] and this[2] but I need the images to be tiled.
So I jumped in after reading Plugins/Authoring[3] tutorial. However
things didn't go as smoothly as I would of hoped and so I started
scaling back. And scaling back. In the end this is what I ended up
with in jQuery.spainmap.js
jQuery.logError = function() { alert(Error); };
jQuery.logWarning = function { alert(Warning); };
jQuery.logDebug = function { alert(Debug); };
Which is not very exciting. When I run this in the document.ready:
$(document).ready(function() {
$.logError();
$(innerDiv).logDebug();
$(outerDiv).logWarning();
});
Nothing fires. The first is just a variation I tried to see if I
could provoke a reaction. This is the very same code in [3].
So: How do I get it this very simple example to work - ie Fire the
alerts.
[1]http://tinyjs.com/examples/draggable/index.html
[2]http://pupunzi.wordpress.com/2009/01/20/mbimgnavigator/
[3]http://docs.jquery.com/Plugins/Authoring
[jQuery] Re: Using jQuery Validation with Dot Net
On Feb 9, 8:30 am, Jon cakeordeat...@gmail.com wrote:
I'm having issues getting the validation plugin (http://bassistance.de/
jquery-plugins/jquery-plugin-validation/) to work with dot net.
Whatever i try i can't stop the form from submitting. I've tried
several things i've found on this group and the web. Can anyone help
me getting this to work?
Here's my html.
span id=ctl00_Control_LeftColumn_CF_Contact class=ContactForm
p class=SuccessMessageSubmitted/p
span class=Field
span class=LabelName /span
span class=Validation
span id=ctl00_Control_LeftColumn_CF_Contact_ctl01_ctl04
style=display: none;/
/span
input id=ctl00_Control_LeftColumn_CF_Contact_ctl01_TB_TextBox
class=TextBox Name type=text name=ctl00$Control_LeftColumn
$CF_Contact$ctl01$TB_TextBox/
/span
span class=Field
/span
span class=Field
/span
a id=ctl00_Control_LeftColumn_CF_Contact_LB_Submit class=Submit
href=javascript:__doPostBack('ctl00$Control_LeftColumn$CF_Contact
$LB_Submit','') style=background-color: rgb(51, 51, 51);Submit/a
/span
Invalid markup, there is no form.
And here is my javascript:
$(document).ready(function(){
$(#aspnetForm).validate({
Where is #aspnetForm?
--
Rob
[jQuery] Re: Convert from AjaxRequest to jQuery/ajax
On Sunday 08 February 2009, pedalpete wrote:
Sorry Tim, I didn't understand it that way.
:-)
You should still be able to do this fairly simply.
Looks like I will also have to use a wrapper to get the form
using the 'this' keyword, since I work with multiple forms.
I think I can get what I need by something like this:
Illustrated by:
function CheckForm(f) { // triggered by onsubmit=CheckForm(this);
var formname = f.name;
var url = f.action;
var meth = f.method;
// illustrated by
alert('Action: ' + f.action + '\nMethod ' + f.method + \nName: +
f.name);
// I'll review your examples, this gives me a start
// more code ..
return false;
}
//Thanks
//tim
You don't have to specify the url, you can pass it as a variable.
But you would need to put your $.ajax function into another function,
and call it when clicked. You can also build the data variables in the
other functions.
For instance
[code]
$('form#1').submit(function(){
var url=$('form#1).attr('action');
// then get your data variables and do whatever you want to do with
them
var type= get;
submitForm(url, data);
});
function submitForm(url, data){
$.ajax({
type: type,
url: url,
data: data,
success: function(){
}
})
}
[/code]
I hope that helps, and that I understand what you were trying to do
better than my first answer.
[jQuery] Calling SimpleModal .modal
jQuery n00bie here. I have the following script that is called from
the onclick event of a link:
function getUserModsAsList(obj) {
jQuery(document).ready(function() {
var userID = obj.getAttribute('userid');
jQuery.ajax( {
type: POST,
dataType: html,
cache: false,
timeout: 3,
url: window.location.protocol + '//' + location.host +
'/
getusermodslist.php',
data: userid= + userID,
success: function(data) {
alert(Retrieved user's mod list: + data); //
WORKS!
//jQuery.modal(data); DOESN'T WORK!
},
error: function(request, error) {
if (error = timeout) {
alert(Unable to retrieve mods for this
member!\r\nPlease try
again later.);
}
else {
alert(An error occured: + error +
\r\nPlease contact the site
administrator to help resolve this problem.);
}
}
});
return false;
});
}
This script works great and displays an alert box with the data
returned from the ajax call to the server. My issue is with
calling .modal(data) from this script. I have to use the jQuery
calling syntax rather than the usual $. syntax because of a conflict
with prototype.js. How do I call .modal using the jQuery convention
rather than the $.modal convention? If I use jQuery.modal(data) I get
a function not defined error in Firebug.
Thanks for the help
[jQuery] Re: Form Plugin with file upload
I just upgraded the plain page to the latest version of jquery and the form plugin. And I noticed that with the new version, it does not make it to the success callback and you'll see this when you submit the form it gets stuck on the loading... text This was likely a bug fix of some kind. But still my file uploads are not working in ajax. What should my next steps be? Susie BogusRed Sahimhttp://www.PaperDemon.com Hi Susie, Looks like I had a bug in that latest version of the plugin. Could you grab v2.21 and upload it to your test location? I can't do much debugging with the current one. http://www.malsup.com/jquery/form/jquery.form.js Thanks. Mike
[jQuery] Accordian not sliding out when specifying autoheight:false
I have been trying to implent an accodian that requires a click to open and a click to close. This is working fine here: http://jamespfarrell.com/dev/consult3fixedheight.htm all of the divs that contain the data are being returned as the same height as the largest of them all... so I added auto height false, which you can see here: http://jamespfarrell.com/dev/consult3fixedheight.htm As you see everything works now but the new active frame no longer slides when clicked, it just appears. I slides if you click the same one twice, but it jumps if you click a diffent link. does anyone know what's causing this or how I can work around it?
[jQuery] Validation Plugin: Too Much Recursion
I have an odd thing happening with the Validation Plugin (latest build
on JQuery 1.3). I have several forms setup on a page, with validation
on two. My first works fine, but my second keeps giving me errors in
Firebug about 'too much recursion'. The configs for these two form
validations are nearly identical, with the exception of the rules and
messages, which are very basic field-is-requirewswwd kinda stuff. Some
searching on the web shows me that there used to be a ticket on this
(#2995), but that it was closed without fix.
I have stripped down my second form's validate method (the one that is
erroring) to the barest of validation scripts, and can not get by it
for the life of me. The configs each set a validate() method on a
separate form.
$('#frm1').validate({
// config here
}
$('#frm2').validate({
// second config here
}
I am getting nowhere. Anyone?
(BTW, I can't post the code, or show you a form, because it's all
behind the firewall)
[jQuery] get visibility state after toggle()
How can I tell what the visibility state of an element is which has
just been toggled? Is my selector no good or is it a matter of timing?
. The situation is that I'm displaying a page of search results. I'd
like the advanced search features to be present at the top but I'd
prefer to hide them. So, I'm creating a link which will toggle the box
display. What I haven't been able to figure out is how to swap the
text of the link depending upon the state of the box. Or, rather, it
will change to hide form the first time the box is displayed but
remains that way ever after.
Here's the code I'm working with:
$(function() {
$('#advanced_search').hide().after('a href=#
id=toggle_formrefine search/a');
$('#toggle_form').css('float', 'right').click(function(e)
{
e.preventDefault();
$('#advanced_search').toggle('fast');
$(this).text($('#advanced_search:visible').length ? 'hide form'
:
'refine search');
});
});
I also tried:
$('#toggle_form').css('float', 'right').click(function(e)
{
e.preventDefault();
var search = $('#advanced_search');
search.toggle('fast');
$(this).text(search.css('display') == 'block' ? 'hide form' :
'refine search');
});
[jQuery] Re: jQuery UI Tabs Flash
I searched the archives, but I couldn't find an answer. For some
reason the tabs, when initialized flashes, three times. Any idea why?
http://www.chris-gwen.com/
I fixed it. I need this at the end of document.ready()
$('body').append('style type=text/css.ui-tabs-hide {display:none}/
style');
[jQuery] Re: Validation Plugin: Too Much Recursion
Since you can't show any code, with only what I see there should not
be any issues...
That is, there is no issue with using two validate functions on two
different forms, each with it's own set of rules.
You're going to have to show more code for us to get to down to the
issue.
On Feb 8, 5:54 pm, Cutter cutte...@gmail.com wrote:
I have an odd thing happening with the Validation Plugin (latest build
on JQuery 1.3). I have several forms setup on a page, with validation
on two. My first works fine, but my second keeps giving me errors in
Firebug about 'too much recursion'. The configs for these two form
validations are nearly identical, with the exception of the rules and
messages, which are very basic field-is-requirewswwd kinda stuff. Some
searching on the web shows me that there used to be a ticket on this
(#2995), but that it was closed without fix.
I have stripped down my second form's validate method (the one that is
erroring) to the barest of validation scripts, and can not get by it
for the life of me. The configs each set a validate() method on a
separate form.
$('#frm1').validate({
// config here
}
$('#frm2').validate({
// second config here
}
I am getting nowhere. Anyone?
(BTW, I can't post the code, or show you a form, because it's all
behind the firewall)
[jQuery] Re: hide()
Great, thank you very much, Aeron. Using class as you suggested is what I'll do. Aaron Gundel wrote: http://www.w3.org/TR/html4/struct/global.html#adef-id HTML standards state that the id attribute should be unique in an html document. Use class or somesuch. Then you can do something like $(.trContactInfo).hide() and it will hide everything. A. Gundel On Sun, Feb 8, 2009 at 1:30 PM, WebAppDeveloper minhle0...@yahoo.com wrote: Hi, If I have an html table with 3 rows each with the same id, for example, id=trContactInfo, as in the html code below. Using jQuery, if I want to hide these 3 rows with the same id, i would do something like $(tr#trContactInfo).hide().next().hide().next().hide. My question is: Instead of running hide() 3 times, is there a way to hide all the rows with the same id by looping thru all the rows, basically these 3 rows plus any new rows that may be added to the table with the same id in the future? table tr id=trContactInfo tdFull Name:/td tdinput type=text name=FullName size=40/td /tr tr id=trContactInfo tdE-mail:/td tdinput type=text name=Email size=40/td /tr tr id=trContactInfo tdPhone:/td tdinput type=text name=Phone size=40/td /tr tr tdField 4:/td tdinput type=text name=Field4 size=40/td /tr tr tdField 5:/td tdinput type=text name=Field5 size=40/td /tr tr tdField 6:/td tdinput type=text name=Field6 size=40/td /tr /table Thanks very much in advance. -- View this message in context: http://www.nabble.com/hide%28%29-tp21886844s27240p21886844.html Sent from the jQuery General Discussion mailing list archive at Nabble.com. -- View this message in context: http://www.nabble.com/hide%28%29-tp21886844s27240p21907411.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] test for css selector capability?
I'm working on a project where I need to detect if the browser natively supports a given CSS selector. For example, if I am using the selector 'ul li:first-child', this is supported by IE7, FF, and Safari but not by IE6 and below. Is there a way that I can test that selector to see if the current browser supports it? A feature that returns a simple boolean status would be awesome.
[jQuery] Passing a Index to a function
Dear folk,
I want to get the index of the TR and send it to the Function , I
don't know how to it . this is what I'm trying to do
$(table tr).bind(click,{IndexName:$(this).index(this)},clickFunc)
function clickFunc(event){
console.log(event.data.IndexName);
}
[jQuery] How to make hyperlink failed
If I got a hyperlink a href=http://xxx.com; id=xx/a
$(function() {
$('#xxx').click(function() {
.
..//do something
});
})
I want to make the link doing something if browser opened javascript,
and if not, it go to the page it referred.
[jQuery] Re: Passing a Index to a function
$(table tr).click(function() {
clickFunc($('table tr').index(this);
});
On Feb 8, 10:54 pm, Pedram pedram...@gmail.com wrote:
Dear folk,
I want to get the index of the TR and send it to the Function , I
don't know how to it . this is what I'm trying to do
$(table tr).bind(click,{IndexName:$(this).index(this)},clickFunc)
function clickFunc(event){
console.log(event.data.IndexName);
}
[jQuery] Re: How to make hyperlink failed
I think you're asking, how do you prevent a link from doing anything
when the browser has javascript enabled.
$('#xxx').click(function(){
//your stuff
return false;
}
On Feb 8, 11:22 pm, David .Wu chan1...@gmail.com wrote:
If I got a hyperlink a href=http://xxx.com; id=xx/a
$(function() {
$('#xxx').click(function() {
.
..//do something
});
})
I want to make the link doing something if browser opened javascript,
and if not, it go to the page it referred.
[jQuery] Re: How to make hyperlink failed
yup, that's what I want, thank you very much.
On 2月9日, 下午3時27分, Geuis geuis.te...@gmail.com wrote:
I think you're asking, how do you prevent a link from doing anything
when the browser has javascript enabled.
$('#xxx').click(function(){
//your stuff
return false;
}
On Feb 8, 11:22 pm, David .Wu chan1...@gmail.com wrote:
If I got a hyperlink a href=http://xxx.com; id=xx/a
$(function() {
$('#xxx').click(function() {
.
..//do something
});
})
I want to make the link doing something if browser opened javascript,
and if not, it go to the page it referred.
[jQuery] Re: selector to return the number of rows in a table before the row I just selected
On Feb 9, 4:23 am, pantagruel rasmussen.br...@gmail.com wrote: Hi, I am selecting the row of a table. I would like to be able to count how many rows there are in the table before the row I just selected. i suppose there is a jQuery selector that will do this. Not necessary - table rows have a rowIndex property, and since it's zero indexed: rowsBefore = row.rowIndex; URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67347567 -- Rob
[jQuery] Re: Passing a Index to a function
On Feb 9, 4:54 pm, Pedram pedram...@gmail.com wrote:
Dear folk,
I want to get the index of the TR and send it to the Function , I
don't know how to it . this is what I'm trying to do
$(table tr).bind(click,{IndexName:$(this).index(this)},clickFunc)
The DOM 2 HTML TR.rowIndex property should do the job.
--
Rob
[jQuery] Re: jQuery + Validation: submit() is sending multiple form submits
Hey Jörn thanks for the reply, good to know! I went with James
solution which is perfect for what i'm working with. Thanks again
guys.
On Feb 9, 9:07 am, James james.gp@gmail.com wrote:
Since you wanted do submit by Ajax;
$(#form-external-link).validate({
rules: {
exlink_url: {
required: true,
url: true
}
},
submitHandler: function(form) {
$.ajax(...);
}
});
On Feb 8, 9:50 am, zubin zubin...@yahoo.com wrote:
Hi James! Thanks for the quick reply. I'm still confused as to where I
should place my $(form).submit(..). so i'm not re-attaching additional
submit events?
What i'm doing basically is: 1. have Validate pass the form 2. submit
the form via ajax
The only thing is that the form is always being reused to submit data
which causes the symptoms you've identifed...
On Feb 9, 3:14 am, James james.gp@gmail.com wrote:
Hmm.. code didn't display properly.
I wanted to say, every time you're doing
$(form).submit(...)
you're re-attaching an additional submit...
On Feb 8, 9:13 am, James james.gp@gmail.com wrote:
Every time you're doing:
you're re-attaching an additional submit event to the form, so it's
executing it multiple times every time you submit.
What is it you're trying to do? When you define submitHandler for
validate, you should be doing whatever you're doing in $(form).submit
() inside the submitHandler.
On Feb 8, 7:21 am, zubin zubin...@yahoo.com wrote:
I'm having a problem with validating first then submitting a form with
jQuery after success. It works however it seems like my submit()
function keeps sending multiple submits and keeps growing each time i
reuse the form (i made sure the values are reset after each submit).
I'm not sure if its my code since i've re-checked it for hours to no
avail. Here is the code in a nut-shell:
My form with id of #form-external-link is validated when submit button
is clicked:
$(#form-external-link).validate({
rules: {
exlink_url: {
required: true,
url: true
}
},
submitHandler: function(form) {
alert('This will pop up only once as it should');
$(form).submit(function() {
alert('This will pop up every twice, 3x, 4x,
etc. after each
validate success');
});
}
});
Am I missing something from my code??- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -
[jQuery] Re: Question related to Javascript
Would be great if someone could still help me out?
On Feb 8, 10:01 pm, MH1988 m.lawrencehu...@gmail.com wrote:
Sorry, just also to mention, I am integrating this within WordPress
and I am using the jQuery framework for another gallery.
On Feb 8, 9:58 pm, MH1988 m.lawrencehu...@gmail.com wrote:
Thanks so much for the help. I'm afraid it still isn't working
correctly. I tried [0] which to me means it initiates the very first
image as soon as it preloads. For more details of how I am using this,
I am actually using the Prototype script framework which makes this
image gallery work.
Is $(imgDisplay0).src = imgs0Slideshow[start].image; correct?
I'm wondering if there is still something missing to make it work?
Also, it would also be great if you could explain some of the things
mentioned more simpler as I'm inexperienced.
Many thanks.
On Feb 8, 8:11 pm, seasoup seas...@gmail.com wrote:
Also, instead of saying
var imgs0Slideshow = new Array();
imgs0Slideshow[0] = new Object();
It's easier to just say
var imgs0Slideshow = [];
imgs0Slideshow[0] = {};
and that achieves the exact same thing.
On Feb 8, 1:10 am, seasoup seas...@gmail.com wrote:
$(imgDisplay0_title).innerHTML = title;
$(imgDisplay0_caption).innerHTML = caption;
$(imgDisplay0_number).innerHTML = 1 of + imgs0Slideshow.length +
Articles;
should be
$(imgDisplay0_title).html(title);
$(imgDisplay0_caption).html(caption);
$(imgDisplay0_number).html('1 of ' + imgs0Slideshow.length + '
Articles');
or
$(imgDisplay0_title).text(title);
$(imgDisplay0_caption).text(caption);
$(imgDisplay0_number).text('1 of ' + imgs0Slideshow.length + '
Articles');
or
$(imgDisplay0_title).get(0).innerHTML = title;
$(imgDisplay0_caption).get(0).innerHTML = caption;
$(imgDisplay0_number).get(0).innerHTML = 1 of +
imgs0Slideshow.length + Articles;
or
$(imgDisplay0_title)[0].innerHTML = title;
$(imgDisplay0_caption)[0].innerHTML = caption;
$(imgDisplay0_number)[0].innerHTML = 1 of + imgs0Slideshow.length
+ Articles;
.html('text'); is the standard jQuery way to do add html, but is
slower then .text which is the jQuery way to add plain text, which is
slower then .innerHTML, but not by significant amounts unless you are
in a big loop. .html() also handles removing events from DOM Elements
that are written over this way which prevents circular references that
can cause memory leaks. but, if speed is a big factor and you don't
have any events doing .get(0) or [0] work.
The problem is that $() returns a jQuery collection not a DOM object
with the .innerHTML method. .get(0) or [0] will return the first
element in the jQuery collection which is the DOM node you are looking
for with the innerHTML method.
Hope that helps.
Josh Powell
On Feb 7, 10:10 pm, MH1988 m.lawrencehu...@gmail.com wrote:
I hope I am able to still receive assistance even though this isn't
jQuery 100% and what I have is an image gallery I am using. The only
thing I need to work out is how to make sure the initial title and
captions appear when you load the webpage?
script type='text/javascript'
var imgs0Slideshow = new Array();
var imgs0;
imgs0Slideshow[0] = new Object();
imgs0Slideshow[0].image = ;
imgs0Slideshow[0].title = ;
imgs0Slideshow[0].caption = shshshshshsh;
imgs0Slideshow[1] = new Object();
imgs0Slideshow[1].image = ;
imgs0Slideshow[1].title = Array;
imgs0Slideshow[1].caption = shshshshs;
imgs0Slideshow[2] = new Object();
imgs0Slideshow[2].image = ;
imgs0Slideshow[2].title = ;
imgs0Slideshow[2].caption = shshshsh;
var start = 0;
imgs0 = new MudFadeGallery('imgs0', 'imgDisplay0', imgs0Slideshow,
{startNum: start, preload: true, autoplay: 4});
var title = (imgs0Slideshow[0].title) ? imgs0Slideshow[0].title : No
Title;
var caption = (imgs0Slideshow[0].caption) ? imgs0Slideshow
[0].caption : No caption;
$(imgDisplay0_title).innerHTML = title;
$(imgDisplay0_caption).innerHTML = caption;
$(imgDisplay0_number).innerHTML = 1 of +
imgs0Slideshow.length +
Articles;
$(imgDisplay0).src = imgs0Slideshow[start].image;
/script
The entire Gallery works correctly but I am not sure if the last part
of the script is structured correctly. When it is first loaded, the
first image does appear but without it's title and captions and I want
to show it.
