[jQuery] Re: jQuery called twice, if I delete one, all jQuery scripts stop working
did you get it to work?
On Sep 12, 1:33 pm, Adrian Chen ac...@mac.com wrote:
On Sep 12, 10:09 am, Alex Weber alexwebe...@gmail.com wrote:
That's totally weird!
I would start over, delete all the include files and add it once
before any other external js script. Test it and gradually add the
others one by one afterwards... This is really a weird problem, its
the best I can think of because this hasn't happened to me!!
Also, re-download jQuery and check for any conflicts the other files
might have. Try calling jQuery.noConflict() at any point after jQuery
and the other libraries have been loaded!
Alex
After some testing, found out the culprit; one of the js files that
were in the list. I got no clue what could be triggering it, this is
the code inside the js file that is giving the issue:
var j = jQuery.noConflict();
j(document).ready(function()
{
j('a#content-link').click(function()
{
j('#content-div').toggle(400);
return false;
});
});
That's from this
scripthttp://www.studioyucca.com/2008/10/03/hideshow-content-with-jquery/
[jQuery] Re: Selects populating other selects from JSON data
Hey, two suggestions:
First off, if you're using JSON data to populate it then I assume the
data will come from an external source and you are only generating it
in your script for testing purposes. In that case, perfect. If not,
and the data is actually hard-coded, then you shouldn't really be
doing it like this!
Finally, what I would do and its really just matter of preference,
instead of doing this:
$(select[name='model']).empty();
$.each(model, function (){
$(select[name='model']).append('option value=' + this + '' +
this +
'/option') });
}
I would do the following:
var options = '';
$.each(model, function (){
html += 'option value=' + this + '' + this + '/option');
});
$(select[name='model']).html(options);
It should increase the performance because you cache all the data in a
variable and insert it into the select in one step, instead of
appending it during each iteration.
Using html() will overwrite the previous contents too, so no need to
use empty() either.
Cheers,
Alex
On Sep 12, 12:48 am, Steffan A. Cline stef...@hldns.com wrote:
on 9/11/09 8:02 PM, Steffan Cline at stef...@hldns.com wrote:
on 9/11/09 5:15 PM, Steffan Cline at stef...@hldns.com wrote:
Perhaps I am not Googling correctly to find the data I am after.
I want to have a select that upon making a choice will add elements to a
second select. I've seen code to do this using ajax calls but what if I
embed the data into the page in a JSON format? I am looking for a good
example of this. Anyone seen one?
Ok, getting closer:
$(document).ready(function () {
var items = { Aquatech : [Canon 5D Mark II,Nikon D3,Nikon
D3x,Canon 1D,Canon 1Ds,Canon 1Ds Mark II,Canon 1Ds Mark III,Canon
1D Mark III,Canon 30D,Canon EOS 5D,Canon 20D,Nikon D200,Nikon
D700,Canon 40D,Canon 50D,Nikon D300],
Canon : [Canon HF20,Canon SD800,Canon
A570,Canon G10,Canon G11],
Ikelite : [Olympus FE-360,Canon 20D,Canon
Rebel 350 / XT,Nikon D300,Canon Rebel 400 / XTi,Canon 30D,Canon
5D,Nikon D200,Nikon D40,Nikon D40x,Nikon D60,Olympus
SP-510,Olympus E-500,Canon G9,Nikon P5000,Nikon P5100,Nikon
D80,Nikon D90,Nikon P6000,Nikon D700,Canon 40D,Canon 50D,Canon
G10,Canon 5D Mark II,Canon Rebel 500 / T1i,Canon Rebel 450 / XSi],
Sony : [Sony W300]
};
$.each( items, function(brand){
$(select[name='manufacturer']).append('option value=' +
brand + '' + brand + '/option');
});
$(select[name='manufacturer']).change( function(){
$
});
});
So, that is populating the first. Great. Now, it's a matter of finding the
chosen value and then adding the elements of the array to the select.
A nudge anyone?
This is ugly but works. Any suggestions on how to shorten it?
$(document).ready(function () {
var items = { Aquatech : [Canon 5D Mark II,Nikon D3,Nikon
D3x,Canon 1D,Canon 1Ds,Canon 1Ds Mark II,Canon 1Ds Mark III,Canon
1D Mark III,Canon 30D,Canon EOS 5D,Canon 20D,Nikon D200,Nikon
D700,Canon 40D,Canon 50D,Nikon D300],
Canon : [Canon HF20,Canon SD800,Canon
A570,Canon G10,Canon G11],
Ikelite : [Olympus FE-360,Canon 20D,Canon
Rebel 350 / XT,Nikon D300,Canon Rebel 400 / XTi,Canon 30D,Canon
5D,Nikon D200,Nikon D40,Nikon D40x,Nikon D60,Olympus
SP-510,Olympus E-500,Canon G9,Nikon P5000,Nikon P5100,Nikon
D80,Nikon D90,Nikon P6000,Nikon D700,Canon 40D,Canon 50D,Canon
G10,Canon 5D Mark II,Canon Rebel 500 / T1i,Canon Rebel 450 / XSi],
Sony : [Sony W300]
};
$.each( items, function(brand){
$(select[name='manufacturer']).append('option value=' +
brand + '' + brand + '/option');
});
$(select[name='manufacturer']).change( function(x){
var man = this.value;
$.each( items, function(brand, model){
if(brand==man) {
$(select[name='model']).empty();
$.each(model, function (){
$(select[name='model']).append('option value=' + this + '' + this +
'/option') });
}
});
});
});
Thanks
Steffan
[jQuery] Re: IDE supporting jQuery
I use linux and I gotta say Aptana has come a long way recently... it was really slow and put me off a few months ago but now it's about the same as Netbeans... both are kind of clunky to initialize but after that they are fine! What I love in Netbeans is that you can get intellisense-style code completion for jquery if you include the fully-documented version: http://jqueryjs.googlecode.com/files/jquery-1.3.2-vsdoc2.js However, personally, I prefer editing using gedit + plugins. Its less bureaucratic in terms of having to creating a project for every file you edit, etc. Plus, with plugins, you can customize it to become quite powerful! No code-completion for jquery as far as I know though. Alex On Sep 11, 1:02 pm, KirbySaysHi imjustthepianopla...@gmail.com wrote: NetBeans ftw! For JavaScript and PHP, it's probably the best around. Last time I used aptana, it seemed very slow, that was a year ago or so. On Sep 11, 9:20 am, Alex Weber alexwebe...@gmail.com wrote: Just confirming: Aptana and Netbeans are excellent choices! :) On Sep 11, 8:15 am, szymon jankowski szymon.jankow...@gmail.com wrote: NetBeans IDE also has jquery support. best regards, SJ On Sep 10, 7:58 pm, MorningZ morni...@gmail.com wrote: Are you looking for something where Intellisense would work for jQuery? Something else? Open source so it's free or some other reason? A lot will depend on what you use for server side code so you don't have two IDE's to mess with On Sep 10, 11:41 am, Saga rgk.su...@gmail.com wrote: is there any IDE supporting jQuery..i prefer some open source IDE...pls suggest me on
[jQuery] Re: jQuery called twice, if I delete one, all jQuery scripts stop working
That's totally weird! I would start over, delete all the include files and add it once before any other external js script. Test it and gradually add the others one by one afterwards... This is really a weird problem, its the best I can think of because this hasn't happened to me!! Also, re-download jQuery and check for any conflicts the other files might have. Try calling jQuery.noConflict() at any point after jQuery and the other libraries have been loaded! Alex On Sep 12, 11:33 am, Adrian Chen ac...@mac.com wrote: I got this at the bottom of a website: script type=text/javascript src=/js/jquery.js/script script type=text/javascript src=/js/jquery.cycle.all.js/script script type=text/javascript src=/js/slider.js/script script type=text/javascript src=/js/newnav.js/script script src=/js/jquery.js type=text/javascript/script script type=text/javascript src=/js/whymac.js/script If you notice, jquery is called twice. If I delete either one, anything that works with jQuery stops working.
[jQuery] Re: IDE supporting jQuery
Just confirming: Aptana and Netbeans are excellent choices! :) On Sep 11, 8:15 am, szymon jankowski szymon.jankow...@gmail.com wrote: NetBeans IDE also has jquery support. best regards, SJ On Sep 10, 7:58 pm, MorningZ morni...@gmail.com wrote: Are you looking for something where Intellisense would work for jQuery? Something else? Open source so it's free or some other reason? A lot will depend on what you use for server side code so you don't have two IDE's to mess with On Sep 10, 11:41 am, Saga rgk.su...@gmail.com wrote: is there any IDE supporting jQuery..i prefer some open source IDE...pls suggest me on
[jQuery] Re: how can I treat a string as JSON?
Thanks again Michael!
I changed that particular line to use eval() and it works just the
same... saved me an external js with 50 lines or so, great stuff! :)
Thanks for the svn link too, I doubt I'll be using it regularly but
always good to know what's cooking!
On Sep 9, 12:57 am, Michael Geary m...@mg.to wrote:
Glad to help, Alex.
Some people say eval() is evil, but it isn't. Like any powerful tool, it has
certain characteristics that can be good or bad, depending.
The 1.3.3-style code is certainly better, using either JSON.parse if it's
available or else the Function constructor. The Function constructor is
basically just another flavor of eval(), but by chance it happens that
eval() can be rather slow if Firebug is running, but the Function
constructor doesn't slow down the same way.
I don't know when 1.3.3 will be released, but you can always check out the
code from Subversion if you want to see the very latest:
http://jqueryjs.googlecode.com/svn/trunk
Or if you want *all* the tagged versions:
http://jqueryjs.googlecode.com/svn
-Mike
On Tue, Sep 8, 2009 at 6:39 PM, Alex Weber alexwebe...@gmail.com wrote:
Thanks for that Michael!
I guess I've heard so many eval() horror stories that I automatically
decided against it...
BTW what's this 1.3.3 talk? I thought it was supposed to be released
last month? ;)
Alex
On Sep 8, 5:11 am, Michael Geary m...@mg.to wrote:
Why do you not want to use eval()? That's what jQuery 1.3.2 does in
$.getJSON and $.ajax:
// Get the JavaScript object, if JSON is used.
if ( type == json )
data = window[eval](( + data + ));
Or better, you can use this code from jQuery 1.3.3:
// Get the JavaScript object, if JSON is used.
if ( type === json ) {
if ( typeof JSON === object JSON.parse ) {
data = JSON.parse( data );
} else {
data = (new Function(return + data))();
}
}
-Mike
On Mon, Sep 7, 2009 at 11:02 PM, Alex Weber alexwebe...@gmail.com
wrote:
I use $.getJSON for all my ajax stuff and it works beautifully but
there is one particular situation where I use an iframe hack to do an
ajax file upload and even though the returned value is a json object
(created with PHP), jQuery treats it like a string.
I'm using json2.js right now and it does the trick but I don't like
including that much extra code because of one rare situation.
So my question is, be it with $.getJSON or by specifying 'json' as the
expected return type of an ajax request, jQuery *seems* to be able to
convert into json.
The string returned is already a json object, I just need jQuery to be
able to treat it like one. I've tried wrapping it in a jQuery object
but no use. (and I really don't want to go down the eval() path)...
Any suggestions?
Thanks!!
[jQuery] Re: post an array
You can't post a javascript object, its gotta be key-value pairs
if the data is coming from a form you can do:
var serial = $('#myform').serialize();
and post the variable serial
if not then as far as I know you gotta convert the object into key-
value pairs some other way!
On Sep 9, 6:13 am, Adonis achrysoch...@hotmail.com wrote:
Hi,
I can not upload an array to the server...
I am using this:
$.post(/addPolyline/, {project_name:project_name,
polyline_coordinates:vertexArray}, function(data){
alert(Done);
});
project_name is a string.
The vertexArray contains coordinates so it could look like this:
[(-11.2323,34.3455),(12.2323,34.3455),(18.2323,-78.3455),
(13.2323,35.3455)]. The server side is fine because it works if i do
not send the array.
I tried different syntax such as the site recommends(e.g
'polyline_coordinates[]':vertexArray) but still it does not work...
Any ideas?
[jQuery] Re: tooltips not working on content loaded via ajax
I'm not sure I understand completely, if you mean that the tooltip
doesnt work with elements dynamically generated via load(), then it
could be a binding issue... try binding an alert() and see if that
works. in case it doesn't its because when the event was bound the
elements didn't exist... the solution is to use live():
$('.tooltipElement').live(..)
On Sep 9, 1:46 am, Canadaka canad...@gmail.com wrote:
I have some simple tooltips on my site that load the content of the
title tag into the tooltip. I am currently using this
pluginhttp://cssglobe.com/post/4380/easy-tooltip--jquery-pluginbut I have
tried several others.
They all work fine for static elements, but the main content of my
pages are loaded by an ajax load() call. The tooltips don't work on
any this content loaded via ajax. Why is this happening and is there a
way to fix this? Or maybe a tooltip plugin that will work for this?
[jQuery] how can I treat a string as JSON?
I use $.getJSON for all my ajax stuff and it works beautifully but there is one particular situation where I use an iframe hack to do an ajax file upload and even though the returned value is a json object (created with PHP), jQuery treats it like a string. I'm using json2.js right now and it does the trick but I don't like including that much extra code because of one rare situation. So my question is, be it with $.getJSON or by specifying 'json' as the expected return type of an ajax request, jQuery *seems* to be able to convert into json. The string returned is already a json object, I just need jQuery to be able to treat it like one. I've tried wrapping it in a jQuery object but no use. (and I really don't want to go down the eval() path)... Any suggestions? Thanks!!
[jQuery] Re: how can I treat a string as JSON?
Thanks for that Michael!
I guess I've heard so many eval() horror stories that I automatically
decided against it...
BTW what's this 1.3.3 talk? I thought it was supposed to be released
last month? ;)
Alex
On Sep 8, 5:11 am, Michael Geary m...@mg.to wrote:
Why do you not want to use eval()? That's what jQuery 1.3.2 does in
$.getJSON and $.ajax:
// Get the JavaScript object, if JSON is used.
if ( type == json )
data = window[eval](( + data + ));
Or better, you can use this code from jQuery 1.3.3:
// Get the JavaScript object, if JSON is used.
if ( type === json ) {
if ( typeof JSON === object JSON.parse ) {
data = JSON.parse( data );
} else {
data = (new Function(return + data))();
}
}
-Mike
On Mon, Sep 7, 2009 at 11:02 PM, Alex Weber alexwebe...@gmail.com wrote:
I use $.getJSON for all my ajax stuff and it works beautifully but
there is one particular situation where I use an iframe hack to do an
ajax file upload and even though the returned value is a json object
(created with PHP), jQuery treats it like a string.
I'm using json2.js right now and it does the trick but I don't like
including that much extra code because of one rare situation.
So my question is, be it with $.getJSON or by specifying 'json' as the
expected return type of an ajax request, jQuery *seems* to be able to
convert into json.
The string returned is already a json object, I just need jQuery to be
able to treat it like one. I've tried wrapping it in a jQuery object
but no use. (and I really don't want to go down the eval() path)...
Any suggestions?
Thanks!!
[jQuery] Re: WP-Cumulus
Its definitely possible although it would probably not run so smooth on anything but the latest generation of browsers due to the heavy-ish JS required... I've never seen anything like it done but Dynacloud is a very good tag cloud plugin for jQuery, it could be a good starting point! On Sep 8, 4:11 am, ykb yadu.ma...@gmail.com wrote: Is it possible to create an animated tag cloud like WP-Cumulus using javascript? Does anyone know of any plug-in that can emulate WP-Cumulus? [ See:http://www.bloggerbuster.com/2008/08/blogumus-flash-animated-label-cl... andhttp://wordpress.org/extend/plugins/wp-cumulus/] Thanks.
[jQuery] possible to override inline onchange() event?
I have a select box with an inline onchange() event that reloads the
page.
Using jQuery I've created a $('#myForm select').live('change', function
(e){...}) event handler to intercept the onchange() behavior and even
though I have e.preventDefault() and e.stopPropagation() after my
jquery event runs the inline onchange() is still triggered...
Am I missing something here? I realize I could easily remove the
onchange() from the code but ideally I shouldn't edit the HTML
directly and just override it using jquery...
Thanks!
[jQuery] context issues when using $.ajax please help!
I'm having problems returning values from within functions that make
use of $.ajax functions
For example:
var obj = {
this.foo = 'foo',
this.bar = function(variable){
$.post('myscript.php', 'var='+variable, this.callback,
'json');
},
this.callback = function(json){
// this.foo is undefined!!
if(json.msg == this.foo) alert('foo');
}
}
ok its a stupid example but basically I cannot I lose my context when
I run $.post (or $.get/$.ajax). the callback, whether anonymous or
not is limited to the $.post context and i can't access my object's
variables and methods
on the same note I can't return any values from within $.post
either
$.post always returns a XMLHTTPRequest object. and for some reason
this.bar() doesnt return anything if i were to add a return
statement based on the value received from the $.post
this is killing me!! sorry if its not too clear , well it is to me but
ive been working on this for hours...
thanks
Alex
[jQuery] Re: minify + gzip??????? stupid question i know but please explain...
Thanks tlphipps,
Your script is an example of on-the-fly compression right?
Think I got it now! :)
On Oct 15, 12:18 pm, tlphipps [EMAIL PROTECTED] wrote:
If you're using PHP on the backend, here is the solution we use:
?php
//define array that will hold an entry for each javascript file
$jsfiles = array();
//just add a new line for each javascript file needed
$jsfiles[] = jquery.yuimin.js;
$jsfiles[] = jquery.autocomplete.yuimin.js;
$jsfiles[] = jquery.bgiframe.yuimin.js;
$jsfiles[] = jquery.blockui.yuimin.js;
$jsfiles[] = jquery.contextmenu.yuimin.js;
$jsfiles[] = jquery.cookie.yuimin.js;
$jsfiles[] = jquery.cookiejar.yuimin.js;
$jsfiles[] = jquery.curvycorners.yuimin.js;
$jsfiles[] = jquery.date.yuimin.js;
$jsfiles[] = jquery.datepicker.yuimin.js;
$jsfiles[] = jquery.filetree.yuimin.js;
$jsfiles[] = jquery.history_remote.yuimin.js;
$jsfiles[] = jquery.inplace.yuimin.js;
$jsfiles[] = jquery.json.yuimin.js;
$jsfiles[] = jquery.livequery.yuimin.js;
$jsfiles[] = jquery.media.yuimin.js;
$jsfiles[] = jquery.metadata.yuimin.js;
$jsfiles[] = jquery.scrollto.yuimin.js;
$jsfiles[] = jquery.tablesorter.yuimin.js;
$jsfiles[] = jquery.tablesorter.cookie.yuimin.js;
$jsfiles[] = jquery.tabs.yuimin.js;
$jsfiles[] = jquery.thickbox.yuimin.js;
$jsfiles[] = jquery.tooltip.yuimin.js;
$jsfiles[] = ui.core.yuimin.js;
$jsfiles[] = ui.draggable.yuimin.js;
ob_start('ob_gzhandler'); //start output buffering using gzip
compression
header(Content-type: text/javascript; charset: UTF-8); //declare
this to the browser as javascript
//setup header info to force caching
header(Cache-Control: must-revalidate, public);
$offset = 60 * 60 * 4;
$ExpStr = Expires: . gmdate(D, d M Y H:i:s,time() + $offset) .
GMT;
header($ExpStr); //set expiration header
foreach ($jsfiles as $fn) {
echo file_get_contents($fn);
echo ;\n; // accommodate scripts which are missing a trailing
semicolon}
ob_end_flush(); //output the content
?
On Oct 15, 10:12 am, Chris Jordan [EMAIL PROTECTED] wrote:
Yeah, nothing bugs me more than when I'm searching for the answer to
something on google only to come up with fifteen mailing list posts on the
subject where the only answer is some smart-ass telling me to search google
for it. :o/
On Wed, Oct 15, 2008 at 9:06 AM, Alex Weber [EMAIL PROTECTED] wrote:
lol
tried that, had to wade through a lot of stuff but I guess I found my
answers.
if you knew it off the top of your head wouldn't hurt to just say it!
=P
thanks!
-Alex
On Oct 15, 9:23 am, MorningZ [EMAIL PROTECTED] wrote:
Answers to your questions, every single one of them
http://www.google.com/search?q=gzip
On Oct 15, 7:58 am, Alex Weber [EMAIL PROTECTED] wrote:
the recomendation out there is serve your JS minified + gzipped
ok, i downloaded the YUI minified and use it to minify all my files
(~50% size reduction)... now whats all this talk about gzipping?
do i have to manually download gzip and do the same thing? AFTER I
minify the file?
(or write a batch that does both?)
or if i enable mod_deflate it takes care of the gzipping?
thanks! :)
--http://cjordan.us
[jQuery] Re: minify + gzip??????? stupid question i know but please explain...
Hmmm thanks :)
I use YUI too for manual compression...
I found this article while I was researching and I think it might
interest you:
http://www.tummblr.com/wordpress/minify-and-gzip-javascript-and-css-with-minimal-cpu-overhead/
Alex
On Oct 15, 12:50 pm, tlphipps [EMAIL PROTECTED] wrote:
Correct. We use yuimin to manuall compress/minify the original .js
file.
Then this script handles the gzip compression on-the-fly.
I really wish we could do the yuimin on the fly as well, but we
haven't found a good way to handle that.
On Oct 15, 10:35 am, Alex Weber [EMAIL PROTECTED] wrote:
Thanks tlphipps,
Your script is an example of on-the-fly compression right?
Think I got it now! :)
On Oct 15, 12:18 pm, tlphipps [EMAIL PROTECTED] wrote:
If you're using PHP on the backend, here is the solution we use:
?php
//define array that will hold an entry for each javascript file
$jsfiles = array();
//just add a new line for each javascript file needed
$jsfiles[] = jquery.yuimin.js;
$jsfiles[] = jquery.autocomplete.yuimin.js;
$jsfiles[] = jquery.bgiframe.yuimin.js;
$jsfiles[] = jquery.blockui.yuimin.js;
$jsfiles[] = jquery.contextmenu.yuimin.js;
$jsfiles[] = jquery.cookie.yuimin.js;
$jsfiles[] = jquery.cookiejar.yuimin.js;
$jsfiles[] = jquery.curvycorners.yuimin.js;
$jsfiles[] = jquery.date.yuimin.js;
$jsfiles[] = jquery.datepicker.yuimin.js;
$jsfiles[] = jquery.filetree.yuimin.js;
$jsfiles[] = jquery.history_remote.yuimin.js;
$jsfiles[] = jquery.inplace.yuimin.js;
$jsfiles[] = jquery.json.yuimin.js;
$jsfiles[] = jquery.livequery.yuimin.js;
$jsfiles[] = jquery.media.yuimin.js;
$jsfiles[] = jquery.metadata.yuimin.js;
$jsfiles[] = jquery.scrollto.yuimin.js;
$jsfiles[] = jquery.tablesorter.yuimin.js;
$jsfiles[] = jquery.tablesorter.cookie.yuimin.js;
$jsfiles[] = jquery.tabs.yuimin.js;
$jsfiles[] = jquery.thickbox.yuimin.js;
$jsfiles[] = jquery.tooltip.yuimin.js;
$jsfiles[] = ui.core.yuimin.js;
$jsfiles[] = ui.draggable.yuimin.js;
ob_start('ob_gzhandler'); //start output buffering using gzip
compression
header(Content-type: text/javascript; charset: UTF-8); //declare
this to the browser as javascript
//setup header info to force caching
header(Cache-Control: must-revalidate, public);
$offset = 60 * 60 * 4;
$ExpStr = Expires: . gmdate(D, d M Y H:i:s,time() + $offset) .
GMT;
header($ExpStr); //set expiration header
foreach ($jsfiles as $fn) {
echo file_get_contents($fn);
echo ;\n; // accommodate scripts which are missing a trailing
semicolon}
ob_end_flush(); //output the content
?
On Oct 15, 10:12 am, Chris Jordan [EMAIL PROTECTED] wrote:
Yeah, nothing bugs me more than when I'm searching for the answer to
something on google only to come up with fifteen mailing list posts on
the
subject where the only answer is some smart-ass telling me to search
google
for it. :o/
On Wed, Oct 15, 2008 at 9:06 AM, Alex Weber [EMAIL PROTECTED] wrote:
lol
tried that, had to wade through a lot of stuff but I guess I found my
answers.
if you knew it off the top of your head wouldn't hurt to just say it!
=P
thanks!
-Alex
On Oct 15, 9:23 am, MorningZ [EMAIL PROTECTED] wrote:
Answers to your questions, every single one of them
http://www.google.com/search?q=gzip
On Oct 15, 7:58 am, Alex Weber [EMAIL PROTECTED] wrote:
the recomendation out there is serve your JS minified +
gzipped
ok, i downloaded the YUI minified and use it to minify all my
files
(~50% size reduction)... now whats all this talk about gzipping?
do i have to manually download gzip and do the same thing? AFTER I
minify the file?
(or write a batch that does both?)
or if i enable mod_deflate it takes care of the gzipping?
thanks! :)
--http://cjordan.us
[jQuery] Re: minify + gzip??????? stupid question i know but please explain...
lol tried that, had to wade through a lot of stuff but I guess I found my answers. if you knew it off the top of your head wouldn't hurt to just say it! =P thanks! -Alex On Oct 15, 9:23 am, MorningZ [EMAIL PROTECTED] wrote: Answers to your questions, every single one of them http://www.google.com/search?q=gzip On Oct 15, 7:58 am, Alex Weber [EMAIL PROTECTED] wrote: the recomendation out there is serve your JS minified + gzipped ok, i downloaded the YUI minified and use it to minify all my files (~50% size reduction)... now whats all this talk about gzipping? do i have to manually download gzip and do the same thing? AFTER I minify the file? (or write a batch that does both?) or if i enable mod_deflate it takes care of the gzipping? thanks! :)
[jQuery] minify + gzip??????? stupid question i know but please explain...
the recomendation out there is serve your JS minified + gzipped ok, i downloaded the YUI minified and use it to minify all my files (~50% size reduction)... now whats all this talk about gzipping? do i have to manually download gzip and do the same thing? AFTER I minify the file? (or write a batch that does both?) or if i enable mod_deflate it takes care of the gzipping? thanks! :)
[jQuery] Re: Thickbox vs jqModal
i use SimpleModal! :) http://www.ericmmartin.com/projects/simplemodal/ On Oct 13, 8:22 am, MorningZ [EMAIL PROTECTED] wrote: I also use jqModal i'm not sure what view you are looking for... use which ever one makes more sense for you and is easier for you to code/understand functionally they do the same things (as does UI's modal) On Oct 13, 5:01 am, bookme [EMAIL PROTECTED] wrote: Thanks for your suggestions !! Any body have any view for it On Oct 13, 11:51 am, Alexandre Plennevaux [EMAIL PROTECTED] wrote: I personally prefer jqmodal, the result is snappier. Maybe this conversion tutorial will help you out:http://www.pixeline.be/blog/2008/javascript-loading-external-urls-in-... cheers, alexandre LAb[au] _ *lab*oratory for *a*rchitecture and *u*rbanism Alexandre Plennevaux Lakensestraat 104 Rue de Laeken Brussel 1000 Bruxelles België _ Belgique _ Belgium tel:+32 (0)2 2196555 fax: +32 (0)2 4266986 mail: [EMAIL PROTECTED] [EMAIL PROTECTED]http://www.lab-au.com VAT: BE0475.210.720 On Mon, Oct 13, 2008 at 7:43 AM, bookme [EMAIL PROTECTED] wrote: Hi, I am confused what plugin should I use either Thickbox or jqModal? Can some body tell me which one is better in terms of performance, look and feel and for future help Thanks
[jQuery] help with $.getJSON() ... just cant figure it out
first off, i dont get the difference between using $.ajax, $.post or $.get instead since the concept is the same afaik: you send a request and receive a response. the only difference in this case is that the response would be a JSON object... right? anyway... i've managed to generate tons of JSON objects of all sorts but haven't been able to come up with a decent parser thats not uber specific to each case... does anyone have any tips or a more generic kind of jQuery JSON parser and some help on how to put it all together? thanks!! -Alex
[jQuery] Re: help with $.getJSON() ... just cant figure it out
Thanks Mickster and MorningZ! :)
Gonna read up on those articles and functions tonight and give it a
shot! :)
I know its terrible practice but laziness always made me return AJAX
requests as CSV strings that i'd then explode and access the array's
indices (since i know in what order the values come)
But yeah, terrible, i know
I'm working on implementing JSON as the standard for my AJAX stuff
which will not only make my code more buzzword-compliant but secure :)
and yeah im aware that JSON isn't the magic solution to ajax security
but it sure as hell beats plain-text! :)
-Alex
On Oct 13, 11:30 am, MorningZ [EMAIL PROTECTED] wrote:
$.post
gets some data, puts the outgoing data in the header, data comes back
as whatever
$.get
gets some data, but puts the outgoing data on the querystring, data
comes back as whatever
$.getJSON
gets some data, using get by default, data comes back and jQuery
*expects* it to be a JSON object
$.ajax
The underlying call for all of the above
As for a tip on a generic kind of jQuery parser, if you use
getJSON then there is nothing to parse, the returned object *will*
be a JSON object (as long as you properly crafted it on the server)
if you need a more configurable version of getJSON, i wrote and use
this wrapper function
function reqJSON(url, params, success, error) {
var CallParams = {};
CallParams.type = params.Method || POST;
CallParams.url = url;
CallParams.processData = true;
CallParams.data = params;
CallParams.dataType = json;
CallParams.success = success;
if (error) {
CallParams.error = error;
}
$.ajax(CallParams);
}
and call it like so
var Params = {};
Params.SomeKey1 = some value;
Params.SomeKey2 = some value;
Params.Method = GET; // or POST, which it defaults to
reqJSON(
url of server page,
Params,
function(json) {
// if here, then json *is* a JSON object
},
function(x,y,z) {
// if here, then some error on server, x has the details
}
);
On Oct 13, 10:21 am, Alex Weber [EMAIL PROTECTED] wrote:
first off, i dont get the difference between using $.ajax, $.post or
$.get instead since the concept is the same afaik: you send a request
and receive a response. the only difference in this case is that the
response would be a JSON object... right?
anyway... i've managed to generate tons of JSON objects of all sorts
but haven't been able to come up with a decent parser thats not uber
specific to each case...
does anyone have any tips or a more generic kind of jQuery JSON parser
and some help on how to put it all together?
thanks!!
-Alex
[jQuery] Re: help with $.getJSON() ... just cant figure it out
true :)
short of encrypting the hell outta all my responses and then decrypting them
client-side there's nothing to do really..
and even in that case since the decryption is done client-side the algorithm
would be easily accessible :P
i guess just try not to pass sensitive information and also minify
production js to make it less easy for people to glance at it and see whats
goin on :)
On Mon, Oct 13, 2008 at 1:21 PM, MorningZ [EMAIL PROTECTED] wrote:
Any security you feel like you get from JSON or CSV is flat out naive
Either one is just as insecure as plain ol text
The advantage of using the $.getJSON method (which remember, is just
$.ajax but with the dataType set to json) is that you don't need to
do anything special to parse it when you get it back from the call
On Oct 13, 12:04 pm, Alex Weber [EMAIL PROTECTED] wrote:
Thanks Mickster and MorningZ! :)
Gonna read up on those articles and functions tonight and give it a
shot! :)
I know its terrible practice but laziness always made me return AJAX
requests as CSV strings that i'd then explode and access the array's
indices (since i know in what order the values come)
But yeah, terrible, i know
I'm working on implementing JSON as the standard for my AJAX stuff
which will not only make my code more buzzword-compliant but secure :)
and yeah im aware that JSON isn't the magic solution to ajax security
but it sure as hell beats plain-text! :)
-Alex
On Oct 13, 11:30 am, MorningZ [EMAIL PROTECTED] wrote:
$.post
gets some data, puts the outgoing data in the header, data comes back
as whatever
$.get
gets some data, but puts the outgoing data on the querystring, data
comes back as whatever
$.getJSON
gets some data, using get by default, data comes back and jQuery
*expects* it to be a JSON object
$.ajax
The underlying call for all of the above
As for a tip on a generic kind of jQuery parser, if you use
getJSON then there is nothing to parse, the returned object *will*
be a JSON object (as long as you properly crafted it on the server)
if you need a more configurable version of getJSON, i wrote and use
this wrapper function
function reqJSON(url, params, success, error) {
var CallParams = {};
CallParams.type = params.Method || POST;
CallParams.url = url;
CallParams.processData = true;
CallParams.data = params;
CallParams.dataType = json;
CallParams.success = success;
if (error) {
CallParams.error = error;
}
$.ajax(CallParams);
}
and call it like so
var Params = {};
Params.SomeKey1 = some value;
Params.SomeKey2 = some value;
Params.Method = GET; // or POST, which it defaults to
reqJSON(
url of server page,
Params,
function(json) {
// if here, then json *is* a JSON object
},
function(x,y,z) {
// if here, then some error on server, x has the details
}
);
On Oct 13, 10:21 am, Alex Weber [EMAIL PROTECTED] wrote:
first off, i dont get the difference between using $.ajax, $.post or
$.get instead since the concept is the same afaik: you send a request
and receive a response. the only difference in this case is that the
response would be a JSON object... right?
anyway... i've managed to generate tons of JSON objects of all sorts
but haven't been able to come up with a decent parser thats not uber
specific to each case...
does anyone have any tips or a more generic kind of jQuery JSON
parser
and some help on how to put it all together?
thanks!!
-Alex
[jQuery] implementing double cookie submit with jquery?
anyone have any suggestions on where to start? read pretty much everything on google but still kinda confused... thanks Alex
[jQuery] Re: Is it possible to avoid jumpy / disappearing content
Just a random question here: why would you hide the element with
jQuery as opposed to using CSS? (on pageload that is...)
On Oct 7, 5:50 pm, John D. [EMAIL PROTECTED] wrote:
Ok I found the culprit. There was a JavaScript for our Google site
search. Commenting it out solves the problem.
It's a Coldfusion page. I'm not sure why this bit of JavaScript, which
is included at the bottom of the page is causing the problem.
Shouldn't the paragraph hide before the site search JavaScript is
executed?
Thanks for helping!
John
Brandon Aaron wrote:
Make sure your styles are included before the script tags. Is this happening
in a particular browser?
--
Brandon Aaron
On Tue, Oct 7, 2008 at 1:58 PM, John D. [EMAIL PROTECTED] wrote:
Hmm...I'm still having trouble with this.
my showHide script is as follows:
$(document).domready(function() {
$('body').addClass('jsEnabled'); // let css know js is enabled
$('p.firstparagraph').hide()
$('#showh1').click(function(){
$('p.firstparagraph').show(200);
});
$('#hideh1').click(function(){
$('p.firstparagraph').hide(200);
});
});
Including the following:
script type=text/javascript src=http://code.jquery.com/
jquery.js http://code.jquery.com/jquery.js/script
script type=text/javascript src=js/jquery.domready.js/script
script type=text/javascript src=js/showHide.js/script
and added the following CSS rule:
body.jsEnabled p.firstparagraph { display: none; }
Still the firstparagraph is showing then disappearing on page load.
The page validates for both css and html.
Any thoughts?
Thanks!
John
On Oct 7, 10:28 am, Nabha [EMAIL PROTECTED] wrote:
Installed the plugin, and it works great! I'm using it just as you
suggested.
For those who find this later, you'll want to minify the javascript
file:http://www.digitaloverload.co.uk/jsmin/
And this is code you can copy and paste (has a fixed typo):
$(document).domready(function() {
$('body').addClass('jsEnabled');
});
[jQuery] Re: OT : javascript editor (with code formatting)
NetBeans is good and free :)
I do all of my design in Dreamweaver and PHP in nuSphere so I write my
JS in whatever IDE i'm using at the time :)
On Oct 8, 5:14 am, zizi [EMAIL PROTECTED] wrote:
Komodo (I use it under Ubuntu, but it has a Win version, too)
under Win Ultraedit rulez, but it's not free
--
---{ zizi }---
[jQuery] intercept navigation away from page?
i have a modal window and when the close button gets clicked i log the time and date the user closed the modal. but what about if he just closes the browser or directly navigates to another page? is there any way to implement cleanup stuff here? thanks
[jQuery] Re: Is it possible to avoid jumpy / disappearing content
Thanks Karl! Unfortunately I havan't yet become a huge adopter of progressive enhancement/graceful degrading :) i just assume that users have js (and cookies for that matter) enabled... lol it works most of the time and i haven't really had to do any mission critical stuff yet :) thx for the link! Alex On Oct 8, 10:19 am, Karl Swedberg [EMAIL PROTECTED] wrote: On Oct 8, 9:14 am, Karl Swedberg [EMAIL PROTECTED] wrote: Hi Alex, Often, if you're hiding information on page load, you'll want to have that information available upon some user interaction. Hiding that information with CSS would make the information unavailable to anyone who has JS off but CSS on. Probably not a huge percentage of users, but it's nice to let everyone see the content. Hiding the content with JavaScript follows the principle of Progressive Enhancement™ . Nice article -- the first in a series -- about that on alistapart.com:http://www.alistapart.com/comments/understandingprogressiveenhancement/ Oops. wrong URL. Try this one: http://www.alistapart.com/articles/understandingprogressiveenhancement --Karl
[jQuery] [off-topic] Jyte Users Unite!
theres a jquery community on jyte and some of the usual js library bashing and arguments going on... just inviting you all to join the cause! (no urls on purpose in not trying to spam or anything!)
[jQuery] Re: dealing with multiple forms having same id
for example if you bind something to that ID only the first one will
work. so yeah i suggest either using classes or even prefixing the id
so you can access them all with 1 selector $(div[id^=prefix_]) this
is also similar to the valid CSS to style it (using selectors- but
unfortunately it wont work in IE 6 and maybe not even in 7 cant
rememver)
On Sep 29, 11:02 pm, Donkeybob [EMAIL PROTECTED] wrote:
XHTML standards based development states that the id attribute must be
unique. So if you want you pages to have valid markup, use the class
attribute.
from w3c:
-
id = ID
The id attribute assigns an identifier to an element. The value of
this attribute must be unique within a document.
http://www.w3.org/TR/xhtml2/mod-core.html#adef_core_id
-
On Sep 29, 3:03 pm, Amardeep [EMAIL PROTECTED] wrote:
HI Donkeybob
can u please tell me what do u mean by invalid page ? r u saying it wont be
a valid HTML page ??
On Mon, Sep 29, 2008 at 10:26 PM, Donkeybob [EMAIL PROTECTED] wrote:
as far as I know . . multiple id's is not allowed and would make your
page invalid.
On Sep 29, 11:40 am, ♫ cheskonov [EMAIL PROTECTED] wrote:
Hi,
i am a new customer in jQuery so the following may sound stupid .. the
problem i am facing is as bellow:
I am working in a site where i am dealing with multiple forms having
same id and every this .. all the forms contain some radio buttons (no
of buttons may vary) and one submit button .. now how do i find out
which submit button is clicked . all the submit buttons are also
having the same id anb everything . any help please :
the html for my page is as follows :
div class=boxcontent style=padding: 5px; height: 495px;
id=div_poll
form action=/effinfunny_beta/node/2015 method=post id=poll-
view-voting
div
input name=nid id=edit-nid value=2015 type=hidden
input name=current_nid id=edit-current-nid value=
type=hidden
table border=0 cellpadding=0 cellspacing=3 width=100%
tbody
tr
td colspan=2h2 class=yellow_txtWhat's the best
version of 'Zelda?'/h2/td
/tr
tr
tdspan class=fanart style=margin-bottom: 5em;
div class=form-item
label class=option
input name=choice value=0 class=form-radio
type=radio
Legend of Zelda/label
/div
/span/td
tdspan class=fanart style=margin-bottom: 5em;
div class=form-item
label class=option
input name=choice value=1 class=form-radio
type=radio
Majora's Mask/label
/div
/span/td
/tr
tr
tdspan class=fanart style=margin-bottom: 5em;
div class=form-item
label class=option
input name=choice value=2 class=form-radio
type=radio
Twilight Princess/label
/div
/span/td
tdspan class=fanart style=margin-bottom: 5em;
div class=form-item
label class=option
input name=choice value=3 class=form-radio
type=radio
The Wind Waker/label
/div
/span/td
/tr
tr
tdspan class=fanart style=margin-bottom: 5em;
div class=form-item
label class=option
input name=choice value=4 class=form-radio
type=radio
Ocarina of Time/label
/div
/span/td
tdspan class=fanart style=margin-bottom: 5em;
div class=form-item
label class=option
input name=choice value=5 class=form-radio
type=radio
The Minish Cap/label
/div
/span/td
/tr
tr/tr
tr
tdnbsp;/td
tdnbsp;/td
/tr
tr
tdinput name=op id=edit-vote value=Vote
class=form-submit legend_polls onClick=$('#edit-current-
nid').val('2015');return false; type=submit
/td
tddiv class=form-radios/div
input name=form_token id=edit-poll-view-voting-form-
token value=23b6d81824cd64e8c1e18c75b760f24c type=hidden
input name=form_id id=edit-poll-view-voting
value=poll_view_voting type=hidden
/td
/tr
/tbody
/table
/div
/form
[jQuery] Re: form select...
$('#fruits').val()
On Sep 28, 2:12 am, GARIL [EMAIL PROTECTED] wrote:
How do I use jQuery to determine which item was selected from the
forms below?
Thank you for the help.
form
Select your favorite fruit:
select id=fruits
optionApple/option
optionOrange/option
optionPineapple/option
optionBanana/option
/select
/form
form
Select your favorite fruit:
select id=analysis
optionAll fruits/option
optionSome only.../option
/select
/form
[jQuery] Re: no callback for css/addClass?
Thanks Eric about the fadeIn() params that was careless of me but it
doesn't seem to have made a difference... :(
btw the div has no padding and ive tried resizing it down to 50px and
it still doesnt fit
man i really hate IE sometimes...
On Sep 25, 12:43 am, Eric [EMAIL PROTECTED] wrote:
Does #produtos_contato have any padding added to it? If so, IE could
be calculating the width of the overall element as more than 350px,
causing it to get bumped to the next line.
On Sep 24, 5:05 pm, Alex Weber [EMAIL PROTECTED] wrote:
sorry i just took a look at the code and its a fadeIn() not a show()
but really it doesn't change anything.. here's the code:
$('#produtos_contato').css('width','350px');
$('#produtos_links').fadeIn(resize);
where resize() is a function that stretches the left menu panel as far
down or up as the content goes (completely unrelated to the divs in
the js)
in firefox, opera, etc it works ok but in IE #produtos_contato
doesn't seem to resize in time because its supposed to fit in
alongside the div that fades in but instead sits under it...
On Sep 24, 5:48 pm, ricardobeat [EMAIL PROTECTED] wrote:
There is no way a css() and show() could happen in the wrong order, as
the second one only executes after the first one returns the object.
Is it an animated resize?
On Sep 24, 3:59 pm, Alex Weber [EMAIL PROTECTED] wrote:
yeah bud thats a given i just wanted to confirm that there wasn't a
callback and why not.
thanks for all the replies!
ajpiano wrote:
that sounds like an issue that needs debugging, not a (superfluous)
change to the library core...
On Sep 24, 1:06 pm, Alex Weber [EMAIL PROTECTED] wrote:
i realize that... i just needed this in a rare case where jquery is
showing an element before resizing it, even though the resize
statement (css) is before the show()...
On Sep 23, 9:05 pm, ricardobeat [EMAIL PROTECTED] wrote:
Yeah, it's just like doing
$('color','red'); alert('color changed');
On Sep 23, 5:15 pm, MorningZ [EMAIL PROTECTED] wrote:
Callbacks are used to know when asynchronous events are
complete...
setting the css or class doesn't happen asynchronously
[jQuery] Re: no callback for css/addClass?
and by sometimes i mean all the time :)
On Sep 25, 10:18 am, Alex Weber [EMAIL PROTECTED] wrote:
Thanks Eric about the fadeIn() params that was careless of me but it
doesn't seem to have made a difference... :(
btw the div has no padding and ive tried resizing it down to 50px and
it still doesnt fit
man i really hate IE sometimes...
On Sep 25, 12:43 am, Eric [EMAIL PROTECTED] wrote:
Does #produtos_contato have any padding added to it? If so, IE could
be calculating the width of the overall element as more than 350px,
causing it to get bumped to the next line.
On Sep 24, 5:05 pm, Alex Weber [EMAIL PROTECTED] wrote:
sorry i just took a look at the code and its a fadeIn() not a show()
but really it doesn't change anything.. here's the code:
$('#produtos_contato').css('width','350px');
$('#produtos_links').fadeIn(resize);
where resize() is a function that stretches the left menu panel as far
down or up as the content goes (completely unrelated to the divs in
the js)
in firefox, opera, etc it works ok but in IE #produtos_contato
doesn't seem to resize in time because its supposed to fit in
alongside the div that fades in but instead sits under it...
On Sep 24, 5:48 pm, ricardobeat [EMAIL PROTECTED] wrote:
There is no way a css() and show() could happen in the wrong order, as
the second one only executes after the first one returns the object.
Is it an animated resize?
On Sep 24, 3:59 pm, Alex Weber [EMAIL PROTECTED] wrote:
yeah bud thats a given i just wanted to confirm that there wasn't a
callback and why not.
thanks for all the replies!
ajpiano wrote:
that sounds like an issue that needs debugging, not a (superfluous)
change to the library core...
On Sep 24, 1:06 pm, Alex Weber [EMAIL PROTECTED] wrote:
i realize that... i just needed this in a rare case where jquery
is
showing an element before resizing it, even though the resize
statement (css) is before the show()...
On Sep 23, 9:05 pm, ricardobeat [EMAIL PROTECTED] wrote:
Yeah, it's just like doing
$('color','red'); alert('color changed');
On Sep 23, 5:15 pm, MorningZ [EMAIL PROTECTED] wrote:
Callbacks are used to know when asynchronous events are
complete...
setting the css or class doesn't happen asynchronously
[jQuery] Re: no callback for css/addClass?
absolutely!
www.weberseguros.com/productos.php
its the div with the border on the bottom with contact details... when
you click on any product link it expands and when you click on the
Volver al Menu de Productos link its supposed to shrink back to its
original size...
im considering just refreshing the page because its in position when
the section opens if you're using IE, specially because the whole
thing just doesn't work so nicely in terms of the menu resizing to fit
the contents (in fact it doesnt work at all) but since i made this
website pretty much for free for a family member (that lives in spain
btw hence the spanish) im not gonna spend too much time on minor
details like that :)
On Sep 25, 1:03 pm, Eric [EMAIL PROTECTED] wrote:
Hmmm... If it's working in FF/Safari but not in IE, I'm still
guessing that a browser rendering difference is to blame (rather than
jQuery). Do you have any sample pages live on the web that I could
check out?
On Sep 25, 9:18 am, Alex Weber [EMAIL PROTECTED] wrote:
Thanks Eric about the fadeIn() params that was careless of me but it
doesn't seem to have made a difference... :(
btw the div has no padding and ive tried resizing it down to 50px and
it still doesnt fit
man i really hate IE sometimes...
On Sep 25, 12:43 am, Eric [EMAIL PROTECTED] wrote:
Does #produtos_contato have any padding added to it? If so, IE could
be calculating the width of the overall element as more than 350px,
causing it to get bumped to the next line.
On Sep 24, 5:05 pm, Alex Weber [EMAIL PROTECTED] wrote:
sorry i just took a look at the code and its a fadeIn() not a show()
but really it doesn't change anything.. here's the code:
$('#produtos_contato').css('width','350px');
$('#produtos_links').fadeIn(resize);
where resize() is a function that stretches the left menu panel as far
down or up as the content goes (completely unrelated to the divs in
the js)
in firefox, opera, etc it works ok but in IE #produtos_contato
doesn't seem to resize in time because its supposed to fit in
alongside the div that fades in but instead sits under it...
On Sep 24, 5:48 pm, ricardobeat [EMAIL PROTECTED] wrote:
There is no way a css() and show() could happen in the wrong order, as
the second one only executes after the first one returns the object.
Is it an animated resize?
On Sep 24, 3:59 pm, Alex Weber [EMAIL PROTECTED] wrote:
yeah bud thats a given i just wanted to confirm that there wasn't a
callback and why not.
thanks for all the replies!
ajpiano wrote:
that sounds like an issue that needs debugging, not a
(superfluous)
change to the library core...
On Sep 24, 1:06 pm, Alex Weber [EMAIL PROTECTED] wrote:
i realize that... i just needed this in a rare case where
jquery is
showing an element before resizing it, even though the resize
statement (css) is before the show()...
On Sep 23, 9:05 pm, ricardobeat [EMAIL PROTECTED] wrote:
Yeah, it's just like doing
$('color','red'); alert('color changed');
On Sep 23, 5:15 pm, MorningZ [EMAIL PROTECTED] wrote:
Callbacks are used to know when asynchronous events are
complete...
setting the css or class doesn't happen asynchronously
[jQuery] Re: no callback for css/addClass?
hey thanks for bringing that to my attention about the image, fixed
now.
although i'd say you jumped the gun a little on screaming poor
design and misused jQuery...
like i said i did this website for close to nothing for a family
member (while having full-time job, uni and freelance on the side) so
its acceptable that its not as good as it should be... in fact i did
it all in a weekend so im pretty happy with it.
the fade ins and outs are superfluous i know but if it makes my uncle
happy (and its friggin website) then im happy to leave them there =P
anyway i just went with the page refresh on IE and fixed the menu
resizing (another typo) all good now :)
-Alex
On Sep 25, 2:02 pm, ricardobeat [EMAIL PROTECTED] wrote:
Sorry for being rude and I know you didn't ask for design tips, but
why on earth is that banner image inside the first list item? This is
a clear example of misused jQuery aiding poor design, you should be
very happy it works the way it is! :D
But seriously, there is no need for the fade effects or ajax in this
page, plain old XHTML and good design would do it better.
Now for a proper technical answer: I'm really impressed it works as it
is in Firefox, for some reason it allows the img to go outside the
li bounds without affecting it's height, without a float or abs/rel
positioning. On IE your first li element extends all the way down to
the bottom of the image on the right, it's a wild guess why the
contact box is in place when you first load the page. I'd be inclined
to say that the proper positioning for it (with your code) is the
'wrong' one, when it's down after the image. The obvious solution is
to put that image in it's right place in the XHTML, a floated DIV
separate from the product list (ol).
- ricardo
On Sep 25, 1:36 pm, Alex Weber [EMAIL PROTECTED] wrote:
absolutely!
www.weberseguros.com/productos.php
its the div with the border on the bottom with contact details... when
you click on any product link it expands and when you click on the
Volver al Menu de Productos link its supposed to shrink back to its
original size...
im considering just refreshing the page because its in position when
the section opens if you're using IE, specially because the whole
thing just doesn't work so nicely in terms of the menu resizing to fit
the contents (in fact it doesnt work at all) but since i made this
website pretty much for free for a family member (that lives in spain
btw hence the spanish) im not gonna spend too much time on minor
details like that :)
On Sep 25, 1:03 pm, Eric [EMAIL PROTECTED] wrote:
Hmmm... If it's working in FF/Safari but not in IE, I'm still
guessing that a browser rendering difference is to blame (rather than
jQuery). Do you have any sample pages live on the web that I could
check out?
On Sep 25, 9:18 am, Alex Weber [EMAIL PROTECTED] wrote:
Thanks Eric about the fadeIn() params that was careless of me but it
doesn't seem to have made a difference... :(
btw the div has no padding and ive tried resizing it down to 50px and
it still doesnt fit
man i really hate IE sometimes...
On Sep 25, 12:43 am, Eric [EMAIL PROTECTED] wrote:
Does #produtos_contato have any padding added to it? If so, IE could
be calculating the width of the overall element as more than 350px,
causing it to get bumped to the next line.
On Sep 24, 5:05 pm, Alex Weber [EMAIL PROTECTED] wrote:
sorry i just took a look at the code and its a fadeIn() not a show()
but really it doesn't change anything.. here's the code:
$('#produtos_contato').css('width','350px');
$('#produtos_links').fadeIn(resize);
where resize() is a function that stretches the left menu panel as
far
down or up as the content goes (completely unrelated to the divs in
the js)
in firefox, opera, etc it works ok but in IE #produtos_contato
doesn't seem to resize in time because its supposed to fit in
alongside the div that fades in but instead sits under it...
On Sep 24, 5:48 pm, ricardobeat [EMAIL PROTECTED] wrote:
There is no way a css() and show() could happen in the wrong
order, as
the second one only executes after the first one returns the
object.
Is it an animated resize?
On Sep 24, 3:59 pm, Alex Weber [EMAIL PROTECTED] wrote:
yeah bud thats a given i just wanted to confirm that there
wasn't a
callback and why not.
thanks for all the replies!
ajpiano wrote:
that sounds like an issue that needs debugging, not a
(superfluous)
change to the library core...
On Sep 24, 1:06 pm, Alex Weber [EMAIL PROTECTED] wrote:
i realize that... i just needed this in a rare case where
jquery is
showing an element before resizing it, even though the
resize
statement (css
[jQuery] Re: no callback for css/addClass?
i realize that... i just needed this in a rare case where jquery is
showing an element before resizing it, even though the resize
statement (css) is before the show()...
On Sep 23, 9:05 pm, ricardobeat [EMAIL PROTECTED] wrote:
Yeah, it's just like doing
$('color','red'); alert('color changed');
On Sep 23, 5:15 pm, MorningZ [EMAIL PROTECTED] wrote:
Callbacks are used to know when asynchronous events are complete...
setting the css or class doesn't happen asynchronously
[jQuery] Re: no callback for css/addClass?
yeah bud thats a given i just wanted to confirm that there wasn't a
callback and why not.
thanks for all the replies!
ajpiano wrote:
that sounds like an issue that needs debugging, not a (superfluous)
change to the library core...
On Sep 24, 1:06�pm, Alex Weber [EMAIL PROTECTED] wrote:
i realize that... i just needed this in a rare case where jquery is
showing an element before resizing it, even though the resize
statement (css) is before the show()...
On Sep 23, 9:05�pm, ricardobeat [EMAIL PROTECTED] wrote:
Yeah, it's just like doing
$('color','red'); alert('color changed');
On Sep 23, 5:15�pm, MorningZ [EMAIL PROTECTED] wrote:
Callbacks are used to know when asynchronous events are complete...
setting the css or class doesn't happen asynchronously
[jQuery] Re: no callback for css/addClass?
sorry i just took a look at the code and its a fadeIn() not a show()
but really it doesn't change anything.. here's the code:
$('#produtos_contato').css('width','350px');
$('#produtos_links').fadeIn(resize);
where resize() is a function that stretches the left menu panel as far
down or up as the content goes (completely unrelated to the divs in
the js)
in firefox, opera, etc it works ok but in IE #produtos_contato
doesn't seem to resize in time because its supposed to fit in
alongside the div that fades in but instead sits under it...
On Sep 24, 5:48 pm, ricardobeat [EMAIL PROTECTED] wrote:
There is no way a css() and show() could happen in the wrong order, as
the second one only executes after the first one returns the object.
Is it an animated resize?
On Sep 24, 3:59 pm, Alex Weber [EMAIL PROTECTED] wrote:
yeah bud thats a given i just wanted to confirm that there wasn't a
callback and why not.
thanks for all the replies!
ajpiano wrote:
that sounds like an issue that needs debugging, not a (superfluous)
change to the library core...
On Sep 24, 1:06 pm, Alex Weber [EMAIL PROTECTED] wrote:
i realize that... i just needed this in a rare case where jquery is
showing an element before resizing it, even though the resize
statement (css) is before the show()...
On Sep 23, 9:05 pm, ricardobeat [EMAIL PROTECTED] wrote:
Yeah, it's just like doing
$('color','red'); alert('color changed');
On Sep 23, 5:15 pm, MorningZ [EMAIL PROTECTED] wrote:
Callbacks are used to know when asynchronous events are complete...
setting the css or class doesn't happen asynchronously
[jQuery] no callback for css/addClass?
i guess it makes sense since in most cases its instant but it would be
useful to have a callback as in:
$('#myDiv').css('color','red', function(){
alert('color changed!');
});
addClass() doesnt have a callback either...
is there any particular reason for this?
thanks!
[jQuery] Re: Best JQuery pop-up plugin.
SimpleModal is great http://code.google.com/p/simplemodal/ And also Thickbox best afaik On Sep 18, 5:30 pm, Chris Jordan [EMAIL PROTECTED] wrote: Um... jQueryUI's dialog widget is good... and super easy to use. I'm just sayin'... ;o) Chris On Thu, Sep 18, 2008 at 11:51 AM, crypto5 [EMAIL PROTECTED] wrote: Hi All, what is the best JQuery pop-up window plugin in your opinion? I am not strong experienced in JQuery and looking for such plugin but don't want test everything. So lloking for short cut. Thanks All! -- View this message in context: http://www.nabble.com/Best-JQuery-pop-up-plugin.-tp19556756s27240p195... Sent from the jQuery General Discussion mailing list archive at Nabble.com. --http://cjordan.us
[jQuery] Re: custom / slimmed-down jquery possible?
True enough but the whole point is that since the main concern is requiring jquery simply for loading a simplemodal from a banner outside our website, there is no guarantee that people will have jquery cached beforehand But as far as out own internal use goes then yeah you're totally right and it shouldnt even be a concern! -Alex On Sep 19, 9:03 am, Matt Kruse [EMAIL PROTECTED] wrote: If you've used jQuery on other pages, then it's very likely that the js has been cached in the user's browser anyway. Loading it again should not affect load times in most cases. Matt Kruse On Sep 18, 3:50 pm, Alex Weber [EMAIL PROTECTED] wrote: That's possibly the smartest thing I've heard all day! :) The content INSIDE the lightbox/modal does need jquery but the biggest problem is that im dependent on using jquery to display the modal in the first place... thanks i'm gonna look for alternatives! :) On Sep 17, 2:04 pm, ricardobeat [EMAIL PROTECTED] wrote: Don't feel tied tojQuery. There are many lightbox scripts offering modal dialogs, independent from any library, with less than 10kb uncompressed. Just google lightbox. On Sep 17, 12:45 pm, Eric Martin [EMAIL PROTECTED] wrote: Alex - I briefly went throughjQueryand removed some of the unused parts (as it relates to SimpleModal). I was able to get it down to just under 75k, 42k minified (which is about 12k less that the non-modified version). I can't make any guarantees, but if you'd like to try the slimmed down version, just send me an email. I don't really see how 55k would really cripple your load times - especially if you are loading the scripts near the bottom of your page. In addition, if you are using compression, you should hardly notice the loading time for the script(s). -Eric On Sep 17, 1:20 am, Alex Weber [EMAIL PROTECTED] wrote: and no i dont mean packing or minifying! :) basically all i need is 1 plugin (simplemodal) and because of that i'm forced to load the entirejquerylibrary, which is crippling load times... we usejqueryextensively in our website but we have banners in other sites that open a simplemodal (lightboxish) dialog and as far as the banners are concerned since its many sites and many different viewers we can't really count on caching to help either... so here's my question, is it possible to strip-down the original jquerysource code *just* for the banner modal? i guess it could be a kind of trial and error thing, but i'm wondering how interconnected the seperate parts of the library are and whether i should even spend any time on this... although it seems silly to have to load almost 50kb of additional JS when all i want is a 5Kb plugin :) thanks! -Alex
[jQuery] Re: Finding DIVS with similar IDs
$('div[id^=test]').hide();
:)
if it doesnt work i think its just a case of syntax
$([EMAIL PROTECTED]).hide();
On Sep 17, 9:14 pm, ripple [EMAIL PROTECTED] wrote:
Try this.
$(div[id*=test]).hide();
The second attempt evaulates the text in the div. Not the id of the div.
--- On Wed, 9/17/08, MACE [EMAIL PROTECTED] wrote:
From: MACE [EMAIL PROTECTED]
Subject: [jQuery] Finding DIVS with similar IDs
To: jQuery (English) jquery-en@googlegroups.com
Date: Wednesday, September 17, 2008, 7:40 PM
I have multiple DIVs with similar IDs:
div id=test1Test 1/div
div id=test2Test 2/div
div id=test5Test 15/div
div id=test11Test 11/div
What is the syntax to hide all the DIVs that start with 'test'?
This doesn't work:
$(id*=test).hide();
also tried:
$(id:contains('test')).hide();
[jQuery] Re: best/standard way to benchmark your own scripts?
thanks :) i use firebug but i wasnt aware of the profiling... :) On Sep 17, 8:20 pm, Ariel Flesler [EMAIL PROTECTED] wrote: I made my own benchmarker some time ago (3-4 months). It's not perfect but it did the job for me. You can check it here:http://benchmarker.flesler.com/ The deploy part isn't included in the js. It's OO, you can create Benchmarker instances. I used it mainly to check different approaches for frequent problems. Also some experiments. -- Ariel Fleslerhttp://flesler.blogspot.com/ On Sep 17, 1:14 am, Alex Weber [EMAIL PROTECTED] wrote: looking to find possible bottlenecks and basically optimize the hell outta my js which relies heavily on jquery and the occasional plugin... is there a more elegant and efficient way to do this than to toss a few document.write()s at my code?? =P thanks!! -Alex
[jQuery] Re: custom / slimmed-down jquery possible?
That's possibly the smartest thing I've heard all day! :) The content INSIDE the lightbox/modal does need jquery but the biggest problem is that im dependent on using jquery to display the modal in the first place... thanks i'm gonna look for alternatives! :) On Sep 17, 2:04 pm, ricardobeat [EMAIL PROTECTED] wrote: Don't feel tied tojQuery. There are many lightbox scripts offering modal dialogs, independent from any library, with less than 10kb uncompressed. Just google lightbox. On Sep 17, 12:45 pm, Eric Martin [EMAIL PROTECTED] wrote: Alex - I briefly went throughjQueryand removed some of the unused parts (as it relates to SimpleModal). I was able to get it down to just under 75k, 42k minified (which is about 12k less that the non-modified version). I can't make any guarantees, but if you'd like to try the slimmed down version, just send me an email. I don't really see how 55k would really cripple your load times - especially if you are loading the scripts near the bottom of your page. In addition, if you are using compression, you should hardly notice the loading time for the script(s). -Eric On Sep 17, 1:20 am, Alex Weber [EMAIL PROTECTED] wrote: and no i dont mean packing or minifying! :) basically all i need is 1 plugin (simplemodal) and because of that i'm forced to load the entirejquerylibrary, which is crippling load times... we usejqueryextensively in our website but we have banners in other sites that open a simplemodal (lightboxish) dialog and as far as the banners are concerned since its many sites and many different viewers we can't really count on caching to help either... so here's my question, is it possible to strip-down the original jquerysource code *just* for the banner modal? i guess it could be a kind of trial and error thing, but i'm wondering how interconnected the seperate parts of the library are and whether i should even spend any time on this... although it seems silly to have to load almost 50kb of additional JS when all i want is a 5Kb plugin :) thanks! -Alex
[jQuery] best/standard way to benchmark your own scripts?
looking to find possible bottlenecks and basically optimize the hell outta my js which relies heavily on jquery and the occasional plugin... is there a more elegant and efficient way to do this than to toss a few document.write()s at my code?? =P thanks!! -Alex
[jQuery] Re: input box on change event?
I'm not sure I understand exactly what you mean but I can answer the
question in the title of your thread :)
instead of using the 'blur' event use the 'change' jquery event
(analogous to onChange() traditional js)
http://docs.jquery.com/Events/change
-Alex
On Sep 16, 11:08 pm, bombaru [EMAIL PROTECTED] wrote:
I've got an input box and am displaying a form button on focus... then
hiding the form button on blur. Ideally, I want to display the form
button on focus, but only hide the button if the original contents of
the input box have not changed (put another way... persist the form
button if the quantity has changed). Can someone help steer me in the
right direction? This is for a cart checkout page that I am working
on and will provide users a way to update the quantity of an item in
their cart. Here's the code I am using:
// flag the document as OK for JS
$('html').removeClass('nojs');
//show Update buttons only as necessary
$('input.qty').each(function()
{
var $qButton = $
(this).siblings('[EMAIL PROTECTED]image]');
$(this).focus(function()
{
$qButton.fadeIn(200);
});
$(this).blur(function()
{
$qButton.fadeOut(200);
});
});
As you can probably tell, this approach is less than ideal and
provides the user no time to click the update button after a change
has been made. I can increase the fadeOut duration, but that still
blows.
Thanks for any help you might be able to provide me.
[jQuery] Re: jQuery prototype magic
Just a bump here since I'm curious too! :)
I just kind if take things like jQuery for granted and use and abuse
them without really knowing or caring how it does what it does, so
long as it works :)
(I guess that's a textbook OOP abstraction definition lol)
Anyway, wanna know the answer too if anyone has it...
-Alex
On Sep 16, 9:56 pm, Andrei Maxim [EMAIL PROTECTED] wrote:
Hi all,
I've recently grabbed the latest edition of the Rhino book and I'm
trying to build some small JavaScript libraries in order to get the
hang of coding in JS. I've been also reading lots of blog posts and
I've been looking at the code of several major JS frameworks and
libraries, like jQuery, Prototype and script.aculo.us and I'm trying
to understand why the author wrote that code.
For some reason, I've been growing very fond of the pattern used in
jQuery to create the jQuery object. Here's the code I'm talking about,
taken from v1.2.6:
var jQuery = window.jQuery = window.$ = function( selector, context )
{
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
};
[...]
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {
// Make sure that a selection was provided
selector = selector || document;
// Handle $(DOMElement)
if ( selector.nodeType ) {
this[0] = selector;
this.length = 1;
return this;
}
[...]
};
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;
When I tried to add my custom object, I had some problems with
accessing the functions I defined inside jQuery.prototype. Only after
a couple of hours I added a line similar to jQuery.fn.init.prototype =
jQuery.fn and then it magically worked.
However, I don't get what's going on.
From what I understood reading JavaScript docs, jQuery.fn =
jQuery.prototype means that we reference jQuery object's prototype
and I'm guessing this is used just to simplify the code (I might be
extremely wrong on this). Also, the defined functions are shared by
each jQuery object.
But why do we need to add jQuery.fn.init.prototype = jQuery.fn for
things to work?
Thanks a lot,
Andrei
[jQuery] Re: JQuery Form Plugin and json
Stefan, Any particular reason why you'd want to do this?? Usually its the opposite... posting form fields normally (usually easier to interpret by the server-side script) and then returning a JSON object to jQuery, in which case you can use $.getJSON() Alex On Aug 29, 3:19 am, Stefan Sturm [EMAIL PROTECTED] wrote: Hello, I'm using the jQuery Form PlugIn(http://www.malsup.com/jquery/form/) to handle my Forms. I like it, but I have a question about an improvment: At this time all form fields are send using post, but it wold be nice, to send all form fields json encoded as one post parameter. Is there a way to do this? Thanks and greetings, Stefan Sturm
[jQuery] Re: Timeout/sleep in jQuery?
.mouseout( function() {
setTimeout('$
(this).children(ul).css(display,none);', 500);
Another option that works better instead of using getTimeout and such
in jQuery is to use animate(callback) on an already visible
element...
ex:
.mouseout(function(){
$(#main-menu').animate({opacity: 1.0}, 850,function(){
$(this).children(ul).hide();\
});
});
On Sep 10, 1:48 pm, Karl Swedberg [EMAIL PROTECTED] wrote:
For this sort of thing, I strongly recommend the hoverIntent plugin:
http://cherne.net/brian/resources/jquery.hoverIntent.html
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Sep 10, 2008, at 10:59 AM, RichUncleSkeleton wrote:
I've made a drop-down menu with jQuery which works great, except that
on mouseout the menu disappears instantly. I'd like it if there was a
delay before the menu disappeared, in case the user moves the mouse
out slightly by accident (or when moving to other parts of the menu).
Here is my current code:
jQuery.noConflict();
jQuery(document).ready( function($) {
$(#main-menu ul.menu li)
.mouseover( function() {
$(this).children(ul).css(display,block);
})
.mouseout( function() {
$(this).children(ul).css(display,none);
});
});
I was originally using the fadeIn/fadeOut effect but it proved
problematic. So I'd just like to call a timeout in the mouseout
function, followed by the code to hide the menu.
[jQuery] Re: Determining visible elements in an overflowed div
not sure about the whole overflowed DIV thing but in general
$('p:visible') will select only visible p elements
On Sep 10, 9:06 pm, spaceage [EMAIL PROTECTED] wrote:
Is there any way to use jQuery to determine which elements/items are visible
within a div that is overflowing?
ie. let's say I have a bunch of p elements contained within a div, where
the p elements are overflowing the div. I want to use localScroll to
scroll vertically to a given p element, but I'd like to know what other
p elements are visible within the div once this scroll completes.
Is there any way to accomplish this?
--
View this message in
context:http://www.nabble.com/Determining-visible-elements-in-an-overflowed-d...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: How to load remoate jquery code with document.write() that works with IE6/7?
check this thread out:
http://groups.google.com/group/jquery-en/browse_thread/thread/f4277815d73f06ca?hl=en
its mainly about loading multiple libraries but the concept of
appending elements to the DOM vs using document.write() might work for
you :)
On Sep 10, 4:39 pm, henry [EMAIL PROTECTED] wrote:
I have a problem with IE (6 7) when I have something like this:
script type=text/javascript src=http://domain.com/
generateCode.php/script
and the server returns HTML and JS in place using document.write(),
such as:
script type=text/javascript
document.write('
div id=xTESTING/div
script type=text/javascript src=http://domain2.com/
jquery.js/script
script type=text/javascript
$().ready({
$('#x').css(color:red);
});
);
/script
IE6 IE7 would give me script error, Error: Object expected. But FF
is fine.
I found 2 solutions,
a.) use defer=true
script type=text/javascript src=http://domain.com/
generateCode.php defer=true/script
b.) server returns JS that use window.onload instead of $().ready()
Are there any other solutions?
Thank you
[jQuery] Re: best techniques to optimize loading of multiple libraries?
Thanks so much Mike!
Got it! :)
Cheers!
Alex
On Sep 2, 6:33 pm, Michael Geary [EMAIL PROTECTED] wrote:
No worries on being pedantic, Alex. If I'd been working 24 hours straight,
I'd be worried I might understand a critical detail too.
Yes, I do mean to have you concatenate all of jquery.js along with the
plugin and your code into a single large .js file, and have your loader.js
create a dynamic script element to load that single file (or a
packed/minified/gzipped version of it).
No, it won't cause you any problems to concatenate jquery.js along with your
other files. There's nothing special about jquery.js; it's just a .js file
like any other.
There is one problem you can run into when you concatenate files. If one
source file has a missing semicolon at the very end, then when you append
another file, the JS interpreter may combine statements in a way you didn't
intend.
This shouldn't be a problem for jquery.js and a typical plugin, but it you
want to be absolutely sure, simply add a ; between each source file. You can
make that part of a separator line if you want, perhaps like this:
;//
jquery.js goes here
;//
Plugin goes here
;//
Your script goes here
;//
That way you get a nice visual separation between the scripts, and the extra
semicolons won't hurt anything.
-Mike
From: Alex Weber
Sent: Tuesday, September 02, 2008 2:07 PM
To: jQuery (English)
Subject: [jQuery] Re: best techniques to optimize loading of
multiple libraries?
Thanks again Mike!
I reckon I have it down to a 'T' now! :)
Just one doubt (sorry i've taken so much of your time already!):
When you say:
Concatenate all of your scripts into a single file.
Do you mean the entire jquery library as well?
Is this feasible? Like, copy and paste the entire jquery
library (uncompressed), one plugin, and my custom code into
one huge .js file and then pack or minify it?
And host it somewhere fast like cachefly?
I can see doing this for the plugin and my custom js but
jquery also seems asking for trouble no?
Or am i not getting it? Did you mean dynamically append loader.js
in the main document body, and then in loader.js have 3
separate script src? (wait does that even work?) sorry its
late here ive been on a crazy reching on 24 hour work bender :S
Thanks again and sorry for being so pedantic!!
Alex
On Sep 2, 4:40 pm, Michael Geary [EMAIL PROTECTED] wrote:
From: Alex Weber
So just to clear things up, you prefer using document.write() to
insert script tags instead of appending the elements to the DOM:
var finan = document.createElement('script');
finan.type = 'text/javascript';
finan.src =
'http://www.mydomain.com/js/mts_finan.js';
head.appendChild(finan);
i guess its more efficient because you don't have to access the
document object, but any other particular reasons?
No, that isn't the reason at all. It's because it makes the
code much
simpler. You don't have to write any code to load the
scripts in their
proper sequence; it happens automatically. script tags
are evaluated
in the order they appear in the source code, and code you add with
document.write is inserted immediately after the end of the
script tag
that does the document.write.
Dynamically inserting a script element with
createElement/appendChild
is a great technique - in fact it's the basis for the popular JSONP
method of cross-domain JSON downloads - but it doesn't
automatically
tell you when the script is loaded. That why your developer
wrote that
repeating interval code
- to check when each script is ready and load the next one
in sequence.
Awesome, one huge problem out of the way!
Well, maybe, maybe not... :-) See below...
We're currently at a point where our server isn't exactly being
overloaded so i think its safe to host jquery.min on
google code and
the plugin (yet to be minified) and custom code possibly
combined in
1 file, since there won't be a lot of custom code to begin with.
Also, to satisfy your curiosity, the whole purpose of using the
mts_load.js function is because this code is a part of a banner
we're planning to distribute and host in numerous
websites, so a lot
of them won't want scripts other than their own embedded
directly,
so we found that calling one simple function (mts_load)
that would
to all the dirty work was acceptable with them :)
When I recommended document.write, I wasn't really thinking
about the
whole context. There may be one good reason to use the
dynamic script
elements instead. When you document.write the script tags
[jQuery] Re: best techniques to optimize loading of multiple libraries?
There's quite a few ways! :) You can use this link to do it directly from your browser: http://fmarcia.info/jsmin/test.html Or if you're more skeptical the original implementation and ports to every programming language you can eat with a spoon are here: http://javascript.crockford.com/jsmin.html Caution: When doing any sort of javascript (or code in general) compression do test thoroughly before and after... stuff like missing semicolons (as mentioned by Mike) can really fudge your code! :) On Sep 3, 12:44 am, viktor [EMAIL PROTECTED] wrote: How do you minify a .js file? On Aug 29, 11:04 pm, Bil Corry [EMAIL PROTECTED] wrote: Alex Weber wrote on 8/29/2008 10:15 AM: i'd rather use packed then minified though :) Use minified, not packed. Although a packed file is smaller, it's overall performance is worse when compared to minified: - This means, in the end, that using a minifed version of the code is much faster than the packed one - even though its file size is quite larger. http://ejohn.org/blog/library-loading-speed/ - - Bil
[jQuery] Re: best techniques to optimize loading of multiple libraries?
Thanks again Mike!
I reckon I have it down to a 'T' now! :)
Just one doubt (sorry i've taken so much of your time already!):
When you say:
Concatenate all of your scripts into a single file.
Do you mean the entire jquery library as well?
Is this feasible? Like, copy and paste the entire jquery library
(uncompressed), one plugin, and my custom code into one huge .js file
and then pack or minify it?
And host it somewhere fast like cachefly?
I can see doing this for the plugin and my custom js but jquery also
seems asking for trouble no?
Or am i not getting it? Did you mean dynamically append loader.js
in the main document body, and then in loader.js have 3 separate
script src? (wait does that even work?) sorry its late here ive
been on a crazy reching on 24 hour work bender :S
Thanks again and sorry for being so pedantic!!
Alex
On Sep 2, 4:40 pm, Michael Geary [EMAIL PROTECTED] wrote:
From: Alex Weber
So just to clear things up, you prefer using document.write()
to insert script tags instead of appending the elements to the DOM:
var finan = document.createElement('script');
finan.type = 'text/javascript';
finan.src = 'http://www.mydomain.com/js/mts_finan.js';
head.appendChild(finan);
i guess its more efficient because you don't have to access
the document object, but any other particular reasons?
No, that isn't the reason at all. It's because it makes the code much
simpler. You don't have to write any code to load the scripts in their
proper sequence; it happens automatically. script tags are evaluated in
the order they appear in the source code, and code you add with
document.write is inserted immediately after the end of the script tag that
does the document.write.
Dynamically inserting a script element with createElement/appendChild is a
great technique - in fact it's the basis for the popular JSONP method of
cross-domain JSON downloads - but it doesn't automatically tell you when the
script is loaded. That why your developer wrote that repeating interval code
- to check when each script is ready and load the next one in sequence.
Awesome, one huge problem out of the way!
Well, maybe, maybe not... :-) See below...
We're currently at a point where our server isn't exactly
being overloaded so i think its safe to host jquery.min on
google code and the plugin (yet to be minified) and custom
code possibly combined in 1 file, since there won't be a lot
of custom code to begin with.
Also, to satisfy your curiosity, the whole purpose of using
the mts_load.js function is because this code is a part of a
banner we're planning to distribute and host in numerous
websites, so a lot of them won't want scripts other than
their own embedded directly, so we found that calling one
simple function (mts_load) that would to all the dirty work
was acceptable with them :)
When I recommended document.write, I wasn't really thinking about the whole
context. There may be one good reason to use the dynamic script elements
instead. When you document.write the script tags, the browser will wait
while those script files are loaded. If you use dynamic script elements, the
browser continues loading the rest of the page while the additional scripts
are loaded. The only script it waits for is the main loader script which is
loaded with a script tag.
If this behavior is what you want, then you can still get it without all the
timers and extra complication. Concatenate all of your scripts (except the
loader itself) into a single file. Then simply use a single dynamic script
element to load that entire script. You don't need any timers or sequencing
that way. Simply load that one big script, and the code in it will run in
the order you expect. Very simple, and you still get the benefit of letting
the page continue loading while the secondary scripts are fetched
asynchronously.
-Mike
[jQuery] Re: best techniques to optimize loading of multiple libraries?
Thanks a million Mike!
I hated that code but wasn't sure how to make it better... :)
So just to clear things up, you prefer using document.write() to
insert script tags instead of appending the elements to the DOM:
var finan = document.createElement('script');
finan.type = 'text/javascript';
finan.src = 'http://www.mydomain.com/js/mts_finan.js';
head.appendChild(finan);
i guess its more efficient because you don't have to access the
document object, but any other particular reasons?
Awesome, one huge problem out of the way!
We're currently at a point where our server isn't exactly being
overloaded so i think its safe to host jquery.min on google code and
the plugin (yet to be minified) and custom code possibly combined in 1
file, since there won't be a lot of custom code to begin with.
Also, to satisfy your curiosity, the whole purpose of using the
mts_load.js function is because this code is a part of a banner we're
planning to distribute and host in numerous websites, so a lot of them
won't want scripts other than their own embedded directly, so we found
that calling one simple function (mts_load) that would to all the
dirty work was acceptable with them :)
On Aug 31, 6:59 pm, Michael Geary [EMAIL PROTECTED] wrote:
Holy moly, that is complicated! No, you don't need to do any of that.
Even if it were the right approach, it's poorly coded, with the same
ten-line function duplicated three times, and a completely hard-coded,
non-generalized way of handing the load sequencing. (What do you do if you
need to add *another* .js file, or two or three? Add another special load
function for each one, and another nested callback at the end?)
My apologies to the developer who coded this - it's nothing personal -
please don't shoot the messenger!
Assuming that you want to keep the mts_loader.js file, then all you need to
do is change it to:
== mts_loader.js ==
function script( url ) {
document.write(
'script type=text/javascript src=', url, '',
'\/script'
);
}
script(
'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js');
script( 'http://www.mydomain.com/js/jquery.simplemodal-1.1.1.js');
script( 'http://www.mydomain.com/js/mts_finan.js');
== end mts_loader.js ==
That's it! That's the whole thing.
The complicated sequencing logic is made unnecessary by using simple
script tags and document.write. They automatically get executed in the
order they are written to the document.
It will also cut at least .9 seconds off your page load time, since the
existing code waits at least .3 seconds after loading each file.
Now, the question of *where* host your .js files and whether to combine them
is separate from the question of *how* to load them. Let's cover the where
separately, since it is independent of the loading technique.
-Mike
From: Alex Weber
Thanks for the reply Mike, here goes: (the ==pagename.ext==
denotes a new file - sure there are better ways of doing this
but i hope its
legible)
==index.html==
script type=text/javascript
src=http://www.mydomain.com/js/mts_loader.js;/script
==mts_loader.js==
var mts_finan_times, mts_finan_timeout, mts_finan_loaded,
mts_finan_callback;
function mts_finan_waitFor(loaded, callback) {
mts_finan_timeout = 300;
mts_finan_times = 40;
mts_finan_loaded = loaded;
mts_finan_callback = callback;
mts_finan_wait();
}
function mts_finan_wait(){
if(mts_finan_times 0){
if(!mts_finan_loaded()){
mts_finan_times -= 1;
setTimeout('mts_finan_wait()',
mts_finan_timeout);
} else {
mts_finan_callback();
}
}
}
function mts_finan_loadJQuery(){
if(!window.jQuery){
var head;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
var jquery = document.createElement('script');
jquery.type = 'text/javascript';
jquery.src =
'http://www.mydomain.com/js/jquery-1.2.6.pack.js';
head.appendChild(jquery);
}
}
function mts_finan_loadModal(){
if(window.jQuery !window.jQuery.modal){
var head;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
var modal = document.createElement('script');
modal.type = 'text/javascript';
modal.src = 'http://www.mydomain.com/js/
jquery.simplemodal-1.1.1.js';
head.appendChild(modal);
}
}
function mts_finan_laod(){
if(window.jQuery window.jQuery.modal){
var head;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
var finan = document.createElement('script');
finan.type = 'text/javascript';
finan.src = 'http://www.mydomain.com/js/mts_finan.js
[jQuery] Re: Best practices - js includes, plugins, greasemonkey
this thread might shed some light on your problem! :) http://groups.google.com/group/jquery-en/browse_thread/thread/f4277815d73f06ca?hl=en On Aug 14, 7:50 pm, mickes [EMAIL PROTECTED] wrote: Can the jquery powerusers shed some light onbestpractices for using multiple plugins and or any external js libraries. What do you do when you use jquery and lets say 10 to 15 plugins. Do you src them all in the head of your document or is there a better way to include them. Does anyone use greasemonkey with more than the jquery library. How do you include other libraries in addition to jquery into your script. I know this is more of a greasemonkey question but I thought there may be a few jquery/greasemonkey users in this group. Is it possible to pull in a page from another site lets say in an iframe or similarmodalwindow and apply or inject jquery into it if it does not already use jquery? Thanks for the feedback! Kind regards, Mike
[jQuery] Re: best techniques to optimize loading of multiple libraries?
Thanks for the reply Mike, here goes: (the ==pagename.ext== denotes a
new file - sure there are better ways of doing this but i hope its
legible)
==index.html==
script type=text/javascript src=http://www.mydomain.com/js/
mts_loader.js/script
==mts_loader.js==
var mts_finan_times, mts_finan_timeout, mts_finan_loaded,
mts_finan_callback;
function mts_finan_waitFor(loaded, callback) {
mts_finan_timeout = 300;
mts_finan_times = 40;
mts_finan_loaded = loaded;
mts_finan_callback = callback;
mts_finan_wait();
}
function mts_finan_wait(){
if(mts_finan_times 0){
if(!mts_finan_loaded()){
mts_finan_times -= 1;
setTimeout('mts_finan_wait()', mts_finan_timeout);
} else {
mts_finan_callback();
}
}
}
function mts_finan_loadJQuery(){
if(!window.jQuery){
var head;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
var jquery = document.createElement('script');
jquery.type = 'text/javascript';
jquery.src = 'http://www.mydomain.com/js/jquery-1.2.6.pack.js';
head.appendChild(jquery);
}
}
function mts_finan_loadModal(){
if(window.jQuery !window.jQuery.modal){
var head;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
var modal = document.createElement('script');
modal.type = 'text/javascript';
modal.src = 'http://www.mydomain.com/js/
jquery.simplemodal-1.1.1.js';
head.appendChild(modal);
}
}
function mts_finan_laod(){
if(window.jQuery window.jQuery.modal){
var head;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
var finan = document.createElement('script');
finan.type = 'text/javascript';
finan.src = 'http://www.mydomain.com/js/mts_finan.js';
head.appendChild(finan);
}
}
(function init(){
mts_finan_loadJQuery();
mts_finan_waitFor(
function(){
return !!(window.jQuery);
},
function(){
mts_finan_loadModal();
mts_finan_waitFor(
function(){
return !!(window.jQuery.modal);
},
function(){
mts_finan_laod();
}
);
});
})();
==mts_finan.js==
// here i assume everything is loaded and fire off the modal window
with content. no big secret here.
so basically, i inherited this code and don't like it one bit but the
guy who developed it insists its the best way to do this.
my proposed changes (based on feedback ive received) are:
1) use minified jquery and plugins instead of packed for
2) use google code or some other proper hosting service to host jquery
and plugins
3) gotta work on mts_loader.js
see what i mean now?
it checks for the existence of jquery and once its there loads the
plugins and tests if its there and only then does it load my file
(mts_finan.js)
hope this explains more than confuses! thanks! :)
-Alex
On Aug 30, 2:15 pm, Michael Geary [EMAIL PROTECTED] wrote:
From: Alex Weber
Currently what I'm doing is:
1) Call function 1, checks for jQuery and if not then loads
the library and recursively checks until its available.
2) Once its available, a second function is called and does
the same thing to load a plugin
3) Ditto for my custom .js file
You really need to post a link to a test page that illustrates your loading
technique. Or at least, post a complete HTML+JS example with real code in a
message here.
From your description, it's anyone's guess what you're actually doing. Does
loads mean document.write() a script tag, or create a dynamic script
element, or what? Does recursively mean repeated calls to setTimeout?
(BTW, that may look recursive, but it isn't.) Does checks mean... Well,
you get the idea.
My guess was that you're using dynamic script elements to load the .js
files, and watching for certain symbols becoming defined on repeated
setTimeout calls. But that is such a complicated solution that I have to
think I guessed wrong.
I don't like this because of the excessive opening and
closing of connections required... is combining libraries +
custom code into 1 file a terrible pratice?
Of course not! Who ever said combining .js files was a terrible practice?
The fewer the files you download, the better. Combine all of your .js files
into a single file, with the likely exception of jquery.min.js since you can
let Google
[jQuery] Re: best techniques to optimize loading of multiple libraries?
Thanks Billy, I wasn't aware of that! While we're on the subject I have another question: Currently what I'm doing is: 1) Call function 1, checks for jQuery and if not then loads the library and recursively checks until its available. 2) Once its available, a second function is called and does the same thing to load a plugin 3) Ditto for my custom .js file I don't like this because of the excessive opening and closing of connections required... is combining libraries + custom code into 1 file a terrible pratice? Any other decent way to get by this step-by-step rudimentary approach? Thanks again! -Alex On Aug 29, 3:04 pm, Bil Corry [EMAIL PROTECTED] wrote: Alex Weber wrote on 8/29/2008 10:15 AM: i'd rather use packed then minified though :) Use minified, not packed. Although a packed file is smaller, it's overall performance is worse when compared to minified: - This means, in the end, that using a minifed version of the code is much faster than the packed one - even though its file size is quite larger. http://ejohn.org/blog/library-loading-speed/ - - Bil
[jQuery] Re: best techniques to optimize loading of multiple libraries?
thats a pretty good solution... ive also been thinking about using cachefly as a backup maybe... i'd rather use packed then minified though :) im sure i can find one here on googlecode thogh thanks! On Aug 28, 9:48 pm, Michael Geary [EMAIL PROTECTED] wrote: These are just static files? You could use Google's copy of jQuery: script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js; /script And host the rest of your files on Amazon S3. Let them worry about the scaling. Combine the plugin and the other JS file into a single .JS file and minify it. How big are the JS files and the images? -Mike From: Alex Weber First off hi! Here's the scenario: I have a banner that I'm going to put up on various different websites. The banner relies on the packed jquery core library, 1 plugin and another simple js file. Oh, and obviously, I can't host anything on the destination site's servers. What's happening is that every time a banner is displayed, all 3 javascript files and 3 images are downloaded and displayed on the page. Which works fine for 1 user at a time visiting 1 website at a time. Now, our goal is to have this banner up on running on maybe 10-20 websites each of which have between hundreds and thousands of pageviews a day. So basically this will be a disaster because there is no way our server will be able to handle this. I've been suggested 3 possibilities: lazy-loading, caching and dynamic javascript generation. I don't see how lazy-loading will help much and caching seems like a great idea because the external files won't change but I don't really know how to go about implementing it. And I have NO idea what was meant by dynamic js generation... Can somebody please shed some light on this and point me in the right direction please? thanks! -Alex
[jQuery] best techniques to optimize loading of multiple libraries?
First off hi! Here's the scenario: I have a banner that I'm going to put up on various different websites. The banner relies on the packed jquery core library, 1 plugin and another simple js file. Oh, and obviously, I can't host anything on the destination site's servers. What's happening is that every time a banner is displayed, all 3 javascript files and 3 images are downloaded and displayed on the page. Which works fine for 1 user at a time visiting 1 website at a time. Now, our goal is to have this banner up on running on maybe 10-20 websites each of which have between hundreds and thousands of pageviews a day. So basically this will be a disaster because there is no way our server will be able to handle this. I've been suggested 3 possibilities: lazy-loading, caching and dynamic javascript generation. I don't see how lazy-loading will help much and caching seems like a great idea because the external files won't change but I don't really know how to go about implementing it. And I have NO idea what was meant by dynamic js generation... Can somebody please shed some light on this and point me in the right direction please? thanks! -Alex
