[jQuery] Re: Interacting with TR an TD
From: Feed Thanks Ian, it seem to be working perfectly. I just have one more question: isn't there a big performance impact using this piece of code? It looks like the page it taking a while do load, but I guess you have to choose between the time the page takes to load and the time you take to do everything manually.. am I right? You can make it go faster. Try the second example from my previous message - it should be a little faster. You can even make it quite a bit faster than that with slightly different code - but first I'd verify whether this function is actually what's slowing down your page. The Firebug profiler is a great tool for checking that. -Mike
[jQuery] Determining when an image is fully loaded
I load images with
$('#pictures').html('img src='+files[pos]+' id=file'+pos+'
class=picture');
and want to save the loaded width,height afterwards. It seems this is
only possible after the image is fully loaded. Is there an event which
I could bind a function?
O. Wyss
[jQuery] simple fade in jqeury
my idea. content = klik= fade out new ''' new () '' oke,plz withd html
[jQuery] Re: click event and z-order
The event is not passed down to the underlying event but rather it
bubbles up through the dom tree from the event where the event was
triggered.
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-bubbling
An example is probably easier to digest. This code has click handlers
at body, td and div elements. Some the .stopTheEventBubbling elements
will stop the event.
Ian
html
head
script src=http://code.jquery.com/jquery-latest.pack.js;/script
script
$(document).ready(function(){
function setupHandler() {
var tag = this.toString();
$(tag).click(function(event) {
$('#log').append('event for ' + event.target.tagName + ' caught
@ ' + this.tagName + ' - ' + event.timeStamp + 'br/');
if ($(this).is(.stopTheEventBubbling)) {
$(this).css(background, #c44); var that = this;
setTimeout(function() { $(that).css(background, #fff); }, 2000);
//return false;
// or
event.stopPropagation();
}
});
}
$(['body','td','div']).each( setupHandler );
});
/script
/head
body
table border=1
tr
td
divI bubble all the way./div
div class=stopTheEventBubblingOnly the div catches me./div
/td
td class=stopTheEventBubbling
divThe TD stops my bubbling./div
/td
/tr
/table
div id=log/div
/body
/html
On 4/26/07, Stefan Kilp [sk-software] [EMAIL PROTECTED] wrote:
or event.stopPropagation()
is there a way to make this the default behavior.
at the moment i don't see any example where is would make sence that the click
event is
passed to the underliing element. i think it is a commen behavior in most gui's
(win, mac, ...)
the only the first element in the z-order receives the event (if it has been
registered).
the problem is that i have data in rows and at the and of each row there are
some 'action
icons' (edit, delete, ...) now to select a datarow i bind click event to the
surounding row
element (div or tr). when i now click on one of the action icons, my select
event is triggered,
which in this case is not intended.
any idea to solve this problem?
thanks
stefan
- Original Message
From: (J)(a)(k)(e) [EMAIL PROTECTED]
To: jquery-en@googlegroups.com
Sent: Wednesday, April 25, 2007 2:00:50 PM
Subject: [jQuery] Re: click event and z-order
I believe your answer is false.
if you return false at the end of the click code, no other element will be
bothered with the click event.
On 4/25/07,
Stefan Kilp [sk-software] [EMAIL PROTECTED] wrote:
hi,
if have two elements (a image in a table) which have a click event registered (on
img and
tr element). if i click on the img in the table both click events are
executed. i would expect
that only the first element in the z-order gets the click event.
it there something i missed, how can i change the behavior?
thanks
stefan
--
Stefan Kilp
SK-Software, Entwicklung Beratung
email: [EMAIL PROTECTED]
fon : +49 6151 93344-0
fax : +49 6151 93344-20
Herta-Mansbacher-Str. 98
64289 Darmstadt, Germany.
-
--
(J)(a)(k)(e) -
--
Stefan Kilp
SK-Software, Entwicklung Beratung
email: [EMAIL PROTECTED]
fon : +49 6151 93344-0
fax : +49 6151 93344-20
Herta-Mansbacher-Str. 98
64289 Darmstadt, Germany.
-
[jQuery] Difference of $.getJSON versus $get
What's the difference of $.getJSON versus $.get? I currently use
$.getJSON to load JSON data but I can't see any advantages.
Is $.getJSON just another way for
$.ajax({
type: GET,
url: link name,
dataType: json,
complete: function name
})
or is the callback excuted only when success?
What means data in the POST case? How could I access this data on
the server, e.g. in PHP?
O. Wyss
[jQuery] Re: About form upload
Hi Mike, Just start with something simple, like this: I was getting lost in a water glass many thanks for your help and great script, now is more clear. -- Massimiliano Marini - http://www.linuxtime.it/massimilianomarini/ It's easier to invent the future than to predict it. -- Alan Kay
[jQuery] Re: datePicker v2 beta
On Apr 24, 2:54 pm, Kelvin Luck [EMAIL PROTECTED] wrote: Hi, I'd like to announce the beta release of v2 of my datePicker plugin for jQuery. This release is a complete rewrite which makes the date picker considerably more powerful and flexible than it previously was. Check out the temporary project page: http://kelvinluck.com/assets/jquery/datePicker/v2/demo/ snip I suppose, you may take some of the nice concepts from http:// www.frequency-decoder.com/2005/10/14/unobtrusive-date-picker-widgit/ -- ?php echo 'Just another PHP saint'; ? Email: rrjanbiah-at-Y!comBlog: http://rajeshanbiah.blogspot.com/
[jQuery] Re: Interacting with TR an TD
[...] isn't there a big performance impact using this piece of code?
That's why I said play around a bit ;^) I threw that idea out there
mostly because it is sort of inside-out from style that I would
probably have tried first and it was just building off the previous
example. That sort of thing helps me get out of a rut sometimes. My
first stab at it would have normally been closer to Mike's #2
suggestion; a nested for loop for the td's.
Just out of curiosity is there a way to break out while iterating with
.each()? Again building on the previous example (Mike's #2 this time):
$(function() {
$('tr').each( function() {
var allEmpty = true;
$('td', this).each(funcion() {
if(this.innerHTML !== 'nbsp;' ) {
allEmpty = false;
// Is it possible to break out of the td.each() here?
}
});
allEmpty $(this).addClass( 'allEmptyTds' );
});
});
Mike - Thanks but I can't take credit for mark and sweep. I think I
got it while working on garbage collection in an OS class years ago.
On 4/27/07, Feed [EMAIL PROTECTED] wrote:
Thanks Ian, it seem to be working perfectly. I just have one more
question: isn't there a big performance impact using this piece of
code? It looks like the page it taking a while do load, but I guess
you have to choose between the time the page takes to load and the
time you take to do everything manually.. am I right?
On Apr 28, 1:20 am, Ian Struble [EMAIL PROTECTED] wrote:
Building on Karl's example and your new all-td's-must-be-empty
requirement; mark all the TR's with a target class then sweep through
the TD's and get rid of the target class if you find a td that is not
empty. Play around a bit and see what else you can come up with.
Ian
$(document).ready(function() {
$('tr').addClass('allEmptyTds');// mark
$('td').each(function() {
var $this = $(this);
if ($this.html() !== 'nbsp;') {
$this.parent().removeClass('allEmptyTds'); // and sweep
}
});
});
On 4/27/07, Feed [EMAIL PROTECTED] wrote:
Feed wrote:
Hello all, I'm getting used to the excellent jQuery library and I need
some help of more experienced programmers. I have this simple table:
table class=table
tr
tdcontent/td
tdcontent/td
tdcontent/td
/tr
tr
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
/tr
tr
tdcontent/td
tdcontent/td
tdcontent/td
/tr
/table
What I need is to add a class to the TRs that have children TDs that
have nbsp; inside (and ONLY nbsp;)... I'm having problems because
nbps; is not text, it's html code...
Thanks in advance!
Thanks guys, that really helped, specially Karl Swedberg's piece of
code. The problem is: the class must only be applied to the TR only if
ALL children TDs have nbsp; inside... I'm having a hard time making
it work, I'm still learning how to use jQuery properly.
[jQuery] Re: Interacting with TR an TD
From: Ian Struble
Just out of curiosity is there a way to break out while
iterating with .each()? Again building on the previous
example (Mike's #2 this time):
$(function() {
$('tr').each( function() {
var allEmpty = true;
$('td', this).each(funcion() {
if(this.innerHTML !== 'nbsp;' ) {
allEmpty = false;
// Is it possible to break out of the td.each() here?
}
});
allEmpty $(this).addClass( 'allEmptyTds' );
});
});
Indeed there is, return false. See my #1 example which is similar to
yours...
The for loop version is probably faster, though.
Fastest of all would be to use straight DOM code. It's not much more work,
and if this really were a performance bottleneck it could be worth it.
-Mike
[jQuery] Re: Interacting with TR an TD
On 4/28/07, Michael Geary [EMAIL PROTECTED] wrote: Indeed there is, return false. See my #1 example which is similar to yours... I should have used my eyes before I started typing. My question's code is almost exactly what you wrote, just cosmetic differences. I missed the assignment + return (return empty = false) on my first read. Glad I asked it though, it is definitely in my quiver now. Thanks, Ian
[jQuery] Re: Replacing the contents of a div that uses newsticker plug-in
Thanks for your replies on this.
I only just got around to trying out the suggestions to use jquery to
update the div contents.
Unfortunately, they don't seem to work and produce the same result as
my initial code?
There must be a way to do this.
Any advice most appreciated.
Thanks.
On 27 Apr 2007, at 15:57, Fabyo Guimaraes wrote:
Use jquery = )
$(document).ready(function() {
$(#news).newsTicker();
}
);
function showdiv() {
$(#news).css(display, block);
}
function hidediv() {
$(#news).css(display, none);
}
function replacecontents() {
$(#news).html(liReplaced 1/liliReplaced 2/
liliReplaced 3/liliReplaced 4/li);
}
2007/4/27, djl [EMAIL PROTECTED]:
Hi there,
I've got a simple page that uses the newsticker plug-in (http://
www.texotela.co.uk/code/jquery/newsticker/ ), as follows:-
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml
head
meta http-equiv=Content-Type content=text/html;
charset=ISO-8859-1 /
titleUntitled Document/title
style type=text/css
.newsticker {
list-style-type: none;
list-style-position:outside;
padding:0 0 0 0;
margin:0 0 0 0;
font-family:Lucida Grande, Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
}
/style
script type=text/javascript src=javascript/jquery-1.1.1.js/
script
script type=text/javascript src=javascript/jquery-
newsticker.js/script
script type=text/javascript
$(document).ready(
function()
{
$(#news).newsTicker();
}
);
function showdiv() {
document.getElementById('news').style.display='block';
}
function hidediv() {
document.getElementById('news').style.display='none';
}
function replacecontents() {
info='liReplaced 1/liliReplaced 2/liliReplaced 3/
liliReplaced 4/li';
document.getElementById('news').innerHTML=info;
}
/script
/head
body
ul id=news
liItem 1/li
liItem 2/li
liItem 3/li
liItem 4/li
/ul
input type=button value=Show onclick=showdiv(); /
input type=button value=Hide onclick=hidediv(); /
input type=button value=Replace onclick=replacecontents();
/
/body
/html
The resulting page looks like this:-
The ticker rotates through 'Item 1', 'Item 2', 'Item 3' and 'Item 4'
The problem is clicking the 'Replace' button runs the
replacecontents function which updates the div contents with a
list, thus breaking the ticker effect as below:-
Having had similar experiences with other plug-ins I'm thinking the
plug-in code needs to somehow be re-initiated.
My question is, is there a way to dynamically run or re-run $
(document).ready or similar?
Or am I missing something/is there a 'proper' way to do what I'm
after?
Many thanks in advance.
[jQuery] Re: Autocomplete plugin problem
Dan G. Switzer, II schrieb:
Stefan,
as i highlight multiple hits (search for jo ro in the single person demo)
i need to disable jörns
markup, but i did not find out how.
formatItem: false,
did not help. any hit for me?
Last time I checked, disabling the automatically highlighting was still not
added to the code base. I do know Jörn has some code done that hasn't been
checked in to the SVN yet.
I'm hoping to have lots of time to help Jörn out with the code this weekend,
so hopefully it'll be closer to be production ready.
Disabling highlighting is implemented. The interesting part is in the
plugin method itself:
// if highlight is set to false, replace it with a do-nothing function
options.highlight = options.highlight || function(value) { return value; };
--
Jörn Zaefferer
http://bassistance.de
[jQuery] Re: Replacing the contents of a div that uses newsticker plug-in
Looking at the code for newticker, you might/should be able to just
recall $(ul).newsticker() and it should reset the ul. If for some
reason it doesn't work, then this might be the change that the plugin
needs:
stopTicker = function(el) { if(el.tickfn) clearInterval(el.tickfn); }
~Sean
[jQuery] Re: Determining when an image is fully loaded
Try this:
$('#pictures').html(...).bind(load,function(){...});
~Sean
[jQuery] load image by ajax..how?
I need for one application relatively big size background images which change every few seconds. I was wondering if it is possible to load the images one by one using ajax and then set some clause to use it from the DOM after it is loaded for the cycle and not loading it from the server. The second part is easy I feel where I will set up a clause to not load it from the server by ajax but from the div where it is inserted. But how do I load the image first time using ajax. thanks
[jQuery] Re: plugins page!!!!
On Apr 28, 2007, at 1:02 AM, Shelane wrote:
when you click
one of the categories from the Home page, a horizontal scroll bar
appears and the focus outline is extended out just past the original
size of the fieldset element.
Hey Mike,
To get rid of that horizontal scrollbar*, looks like you just need to
add margin-right: 1px; to this style rule:
ul li.leaf a, ul li.expanded a, ul li.collapsed a {
display:block;
}
* Only tested in FF 2 Mac with Firebug
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: firefox and ie button onclick
Ah! In that case you can pull your Javascript form submit code into a function and then call that function in the callback of the ajax load. Whenever new content is added to the DOM, we need to re-bind events so they recognize the new DOM elements. Actually, there are other ways to do this, involving event bubbling, etc., but re-binding is probably the most intuitive. Hope that makes sense. --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Apr 28, 2007, at 1:27 AM, Dave wrote: I think I now realize what my problem is. I have a structure where php loads a header and footer. The central content div is updated via ajax. This is where the javascript resides so a $(document).ready may not actually be triggered since the http headers etc aren't being sent on ajax update. This'll require some more digging.
[jQuery] Re: Interacting with TR an TD
Michael! So great to see you on the list again! You have a brilliant
mind, and I always learn something new whenever you post.
I was beginning to wonder where you've been. Glad to have you back. :-)
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Apr 28, 2007, at 5:33 AM, Michael Geary wrote:
From: Ian Struble
Just out of curiosity is there a way to break out while
iterating with .each()? Again building on the previous
example (Mike's #2 this time):
$(function() {
$('tr').each( function() {
var allEmpty = true;
$('td', this).each(funcion() {
if(this.innerHTML !== 'nbsp;' ) {
allEmpty = false;
// Is it possible to break out of the td.each() here?
}
});
allEmpty $(this).addClass( 'allEmptyTds' );
});
});
Indeed there is, return false. See my #1 example which is similar to
yours...
The for loop version is probably faster, though.
Fastest of all would be to use straight DOM code. It's not much
more work,
and if this really were a performance bottleneck it could be worth it.
-Mike
[jQuery] Re: history in ajax and setting the ajax url
xavier schrieb:
Hello,
I want to have an application that works both with and without ajax.
Eg: without ajax, I get /contentWithMenu and with ajax I .load /
contentonly into #content
jQuery([EMAIL PROTECTED]/]).bind(click,function(){
jQuery(#main).load (/xajax/+this.pathname,{},function()
{this.style.opacity=1;}).fadeTo(slow,0.1);
return false;
});
I want to add that call to the history, so back and bookmarks work.
I'm looking at http://www.stilbuero.de/jquery/history/ and I don't
find a way to have separate urls for the normal link and for the ajax
one. I'm always tempted to blame the lack of documentation or feature
before having to admit that I'm blind, but feel free to fire ;)
In that case you're right. You can use the (yet) undocumented history
method instead of remote...
You can attach a click handler to a link pointing to a hash and then
enable history for that link. I'm using that for the tabs plugin:
$('whatever').bind('click', function() { /* do something */} ).history();
Don't forget to initialize history!
What I would like to have is a method to call from the click event to
add an #hash on the history, and a callback that I can customise so I
can load whatever needed based on the hash.
Does it make sense ? Is there a doc on the history plugin I missed or
another plugin that I missed ?
On the other history solutions I found (outside of jquery), you needed
to install an empty html that would be used with a iframe.Is it the
same here ?
Yes, for IE an iframe is required to hack history support, but I somehow
managed to get rid of the blank HTML. On the other hand it may be
required if you use the plugin on https pages to avoid a security
warning. I haven't tested that yet due to lack of possibility.
-- Klaus
[jQuery] My CSS presentation - recorded via Adobe Connect
For those of you that have been asking about the recorded presentation, here's the URL: https://admin.adobe.acrobat.com/_a17673838/p30028287/ And here's a link to the files used in my presentation so that you can follow along: http://www.ncfug.com/archive/AndyMatthews_April2007_CSS.zip Hope everyone likes it. Please feel free to give me feedback...this was my first time presenting. andy matthews founder | main man commadelimited dream | design | develop [EMAIL PROTECTED] www.commadelimited.com c: 615-414-5533 | h: 615-258-3634
[jQuery] Re: Difference of $.getJSON versus $get
wyo wrote:
What's the difference of $.getJSON versus $.get? I currently use
$.getJSON to load JSON data but I can't see any advantages.
Is $.getJSON just another way for
$.ajax({
type: GET,
url: link name,
dataType: json,
complete: function name
})
or is the callback excuted only when success?
What means data in the POST case? How could I access this data on
the server, e.g. in PHP?
O. Wyss
Both $.get and $.getJSON are shortcuts for $.ajax, for use when you
don't need the more complex features. $.getJSON explicitly sets the
dataType to json, as you speculated above, while $.get does not.
For $.get, the callback function will be passed a string containing what
was returned from the request. For $.getJSON however, the callback
function will be passed the data structure that the JSON represented
(see Wikipedia[1] and/or the jQuery docs[2] for more on that).
In the case of $.get and $.getJSON, the callback function is only used
when a successful request was made. If you want to handle errors as
well, you will need to use the more complex $.ajax. The AJAX page[3]
of the jQuery docs explains all this in detail.
For GET requests the data is passed as URL params (e.g.,
http://foo.com/bar.php?abc=defghi=jkl). If you set the request method
to post, it issues a normal HTTP POST (as if you had, for example,
submitted a normal HTML form). How to access these on the server side
does depend on your language. I'm not a PHP programmer, but I think you
might access them through the $_GET and $_POST arrays.
[1]http://en.wikipedia.org/wiki/JSON
[2]http://docs.jquery.com/Ajax#.24.getJSON.28_url.2C_params.2C_callback_.29
[3]http://docs.jquery.com/Ajax
--
Best wishes,
Dave Cardwell.
http://davecardwell.co.uk/javascript/jquery/
[jQuery] Re: Interacting with TR an TD
nbsp; is html. not javascript!
Does IE do this any differently than firefox?
?xml version=1.0 encoding=utf-8 ?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en
head
title
nbsp;
/title
script type=text/javascript src=/js/jquery.js/script
script type=text/javascript
$(function(){
var x = nbsp;
alert(x.length)
var y = \u00a0
alert(y.length)
alert($('span').text().length)
});
/script
/head
body
spannbsp;/span
/body
/html
[jQuery] Re: firefox and ie button onclick
Karl
I really appreciate the responses. I'm not new to programming but I
am very much a noob where javascript is concerned. What I'm now
looking for is an explicit example of how to do what I'm trying. The
code in this group helps, but it seems to be either confusing or
slightly off target. Basically this is what I'm looking to do now:
State 1
html
head
script src=js/jquery.js/script
script src=js/commonscripts.js/script!--load some stuff used on
every page, this all works great--
/head
body
!--lots of html that doens't really matter--
div id=containerWelcome to my App!/div
!--#container will change depending on function of page--
/body
html
State 2
html
head
script src=js/jquery.js/script
script src=js/commonscripts.js/script!--load some stuff used on
every page, this all works great--
/head
body
!--lots of html that doens't really matter--
div id=container
!--form.html loaded--
form id=search
fieldset
legend Search/legend
table
tr /td NOWRAP/lableFirst Name: /labletd /input type =
text name=first_name val=
tr /td NOWRAP/lableLast Name: /labletd /input type =
text name=last_name val=
tr /td colspan = 2/input type=submit id= trigger1
value=Find
!--I can't get the submit to bind to a function on page reload--
/table
/fieldset
div id=result!--results from search loaded here--/div
script$.getScript('js/external.js', search_rebind);/script
!--form.html loaded--
/div
!--#container will change depending on function of page--
/body
html
external.js:
script
function search_rebind() {
$('#trigger1').click(function() {
var temp = $('#search :input').serialize();
$.ajax({
type: POST,
url: 'controller/search/',
data: temp,
dataType: html,
success: function(html){
$('#result').empty().append(html);
}
});
return false;
});
};
/script
I've tried various ways of loading the script and some methods work in
FF, but none have worked so far in IE 6. Is there a simple, concise
example out there I can look over? Or is there an obvious way to do
this I'm just not seeing?
Dave
[jQuery] Newbie -- How to retrieve img src value in function?
I am using jquery 1.1.2, interface 1.2, working with drag/drop.
When user drops an image onto the drop area, I want to retrieve the
src value, so that eventually I can send that value to the server
and do some Ajax stuff. But so far, in my code below,
I have only gotten this to work:
var thePhoto = drag.innerHTML;
That returns img src=static/galleries/JQm49CWi09/_t/
lilly01_fuy.jpg
How can I just get the src string?
// The code
script type=text/javascript
$(document).ready(
function() {
$('#drag').Draggable( );
$('#dropbox').Droppable(
{
accept : 'dropaccept',
activeclass: 'dropactive',
hoverclass: 'drophover',
ondrop: function (drag) {
var thePhoto = drag.what should go here?;
//var thePhoto = drag.innerHTML; // almost there
alert( thePhoto );
},
tolerance: 'fit'
}
);
}
);
/script
[jQuery] Re: Newbie -- How to retrieve img src value in function?
Try drag.src ~Sean
[jQuery] Re: Newbie -- How to retrieve img src value in function?
On Apr 28, 4:00 pm, Sean Catchpole [EMAIL PROTECTED] wrote: Try drag.src ~Sean Hi Sean, drag.src returns undefined. Here is a partial list of various things I've tried. var thePhoto = drag.innerHTML.(img).attr(src); // no var thePhoto = drag.innerHTML.attr(src); // no var thePhoto = drag.(img).attr(src); // no var thePhoto = drag.attr(src); // no var thePhoto = drag.html(); // no var thePhoto = drag.src; // no (Obviously I'm way new to javascript; I'm stumbling around in the dark, blindfolded.) If this makes a difference, the image is defined within this set of divs: div id=theImages div id=drag class=dropaccept img src=static/galleries/JQm49CWi09/_t/lilly01_fuy.jpg/a /div /div
[jQuery] Re: Newbie -- How to retrieve img src value in function?
dennis wrote: If this makes a difference, the image is defined within this set of divs: div id=theImages div id=drag class=dropaccept img src=static/galleries/JQm49CWi09/_t/lilly01_fuy.jpg/a /div /div I haven't used draggables, but it looks like drag in this case is a jQuery object. In that case, you want drag.attr(src). http://docs.jquery.com/DOM/Attributes#attr.28_name_.29 -- Best wishes, Dave Cardwell. http://davecardwell.co.uk/javascript/jquery/
[jQuery] Re: Determining when an image is fully loaded
On 28 Apr., 15:39, Sean Catchpole [EMAIL PROTECTED] wrote:
Try this:
$('#pictures').html(...).bind(load,function(){...});
I've tried
$('#pictures').html('img src=...').bind ('load', sizeImage);
function sizeImage() {
alert ('sizeImage');
}
The alert is never shown, see http://www.orpatec.ch/gallery4.html
O. Wyss
[jQuery] Re: load image by ajax..how?
Thanks for your reply. I figured it out from the post. thanks again On Apr 28, 11:37 am, Dave Cardwell [EMAIL PROTECTED] wrote: joomlafreak wrote: I need for one application relatively big size background images which change every few seconds. I was wondering if it is possible to load the images one by one using ajax and then set some clause to use it from the DOM after it is loaded for the cycle and not loading it from the server. The second part is easy I feel where I will set up a clause to not load it from the server by ajax but from the div where it is inserted. But how do I load the image first time using ajax. thanks You don't need AJAX for that, you can just get the browser to download and cache the image using a normal hidden img element. See previous threads:http://groups.google.com/group/jquery-en/search?group=jquery-enq=ima... -- Best wishes, Dave Cardwell. http://davecardwell.co.uk/javascript/jquery/
[jQuery] Re: behaviors?
I had some down time this afternoon so I thought I would throw
something together real quick. I just checked it in:
http://dev.jquery.com/browser/trunk/plugins/behavior
This allows you to register any number of behaviors that will run any
jQuery method/plugin with any number of arguments. It also allows a
plugin developer to register their method so that behavior will auto
run when it is done. It also allows the developer to manually
run/remove a specific behavior or all behaviors.
It seems to be pretty flexible but with behavior auto running after a
DOM update, I could see it getting pretty out of hand with performance
if lots of behaviors are used.
Here is the test/example page that adds three behaviors; an append,
click and addClass. I also remove the addClass behavior before doing
the last two appendTo and prependTo calls.
http://brandon.jquery.com/plugins/behavior/test/test.html
--
Brandon Aaron
On 4/26/07, John Resig [EMAIL PROTECTED] wrote:
.behavior() does not exist - but it could (without too much effort)
the current solution with jQuery is shown in the previous slide (which
is, unfortunately, rather verbose). I hope that it'll exist one day -
I probably should've made that more explicit.
You would, simply, have to override append/prepend/before/after and
after the injection has occurred, re-run all behaviored expressions.
Of course, you'd also have to cache all expressions for future use
(and that's another nut, entirely). If someone feels compelled, you
can hack on it - otherwise, I may take a stab at it.
--John
On 4/26/07, Starbow [EMAIL PROTECTED] wrote:
I was just watching the video of John Resig at Yahoo, and in one slide
he talked about behaviors, as jquery bindings that act like css rules
and apply themselves to html fragments asynchronously loaded into the
page. The code sample looked like this:
$(document).ready( function() {
$('li).behavior( click, function() {
$(this).load(menu.html);
});
});
Is behavior a special jQuery function, something that is in the works,
or is it just a regular function and the code for it was missing from
the slide set?
[jQuery] Re: Determining when an image is fully loaded
Wyo,
Try something like this:
var $img = $('img src='+files[pos]+' id=file'+pos+'class=picture')
.appendTo('#pictures')
.bind('load', function() { alert('loaded') });
But be aware that if the image is already in the browser cache the
load event will not fire in IE. You can use the complete property
to test if the image is loaded:
if ($img[0].complete) {
// image is loaded
}
Mike
On 4/28/07, wyo [EMAIL PROTECTED] wrote:
I load images with
$('#pictures').html('img src='+files[pos]+' id=file'+pos+'
class=picture');
and want to save the loaded width,height afterwards. It seems this is
only possible after the image is fully loaded. Is there an event which
I could bind a function?
O. Wyss
[jQuery] Re: behaviors?
Brandon, That is really slick! Mike http://dev.jquery.com/browser/trunk/plugins/behavior
[jQuery] Re: Determining when an image is fully loaded
Maybe $('#pictures').html(...).children().bind(...)
But I think you're trying to hard to use jQuery. How about this
(tested on FF2/Mac):
var img = new Image();
img.onload = function() { img_width = this.width; img_height = this.height; };
img.src = '...';
$('#pictures').html(img);
Or if you want to not display the image until it is loaded, you could do:
var img = new Image();
img.onload = function() { img_width = this.width; img_height =
this.height; $('#pictures').html(this); };
img.src = '...';
--Erik
On 4/28/07, wyo [EMAIL PROTECTED] wrote:
On 28 Apr., 15:39, Sean Catchpole [EMAIL PROTECTED] wrote:
Try this:
$('#pictures').html(...).bind(load,function(){...});
I've tried
$('#pictures').html('img src=...').bind ('load', sizeImage);
function sizeImage() {
alert ('sizeImage');
}
The alert is never shown, see http://www.orpatec.ch/gallery4.html
O. Wyss
[jQuery] Re: Newbie -- How to retrieve img src value in function?
Try this: $('img', drag).attr('src');
--
Brandon Aaron
On 4/28/07, dennis [EMAIL PROTECTED] wrote:
On Apr 28, 4:27 pm, Dave Cardwell [EMAIL PROTECTED] wrote:
I haven't used draggables, but it looks like drag in this case is a
jQuery object. In that case, you want drag.attr(src).
http://docs.jquery.com/DOM/Attributes#attr.28_name_.29
Hi Dave,
It looks to me too that drag is a jQuery object.
I had read thru the page you referenced, and I also hoped that
drag.attr(src) would do the trick, but that's one of the many
combinations I tried, and it also doesn't work. In this case,
I get nothing returned, not even an alert. In some other
cases, I've at least gotten an alert saying undefined.
I really do appreciate the help efforts. I'll keep pluggin away here.
/dennis
[jQuery] Re: Newbie -- How to retrieve img src value in function?
On Apr 28, 5:25 pm, Brandon Aaron [EMAIL PROTECTED] wrote:
Try this: $('img', drag).attr('src');
Brandon, that idiom works. I'll stop banging my head now.
Thanks BIG!
/dennis
[jQuery] jQuery Tetris?!?
Not sure if the author is on this list, but awesome job either way! Check it out: http://fmarcia.info/jquery/tetris/tetris.html And vote it up if you think its good -- how could you not ;) @DZone: http://www.dzone.com/rsslinks/tetris_with_jquery.html @Digg: http://digg.com/programming/Game_Tetris_realized_by_jQuery
[jQuery] Repeated quick clicks mess up my code..please help
I used the code posted by Mr. Sean on this group and a working example
is at this url
http://www.levelfield.com/ticker.html. Thanks Sean and all who helped
him develop further.
I added few lines to this code to make something like Yahoo movie home
page module. It works nicely but I have noticed that on repeated
clicks on the navigation it seems like the module goes berserk and it
start to behave weird. Another thing is that inbetween at random the
translucent box does not show up and all the text gets aligned to left
as if it did not get the css to place it where it should be.
Here is my code
jQuery.noConflict()
var ppdelay = ?php echo $ppdelay; ?;
var newsitems;
var curritem=0;
var iPause=0;
var tbtype='';
var indicdelay = ppdelay-3000;
jQuery(document).ready(function(){
var protect = jQuery(a.navig_link:eq(0)).text();
if (protect.charAt(0) != P){
alert(Are you trying to copy this code?);
history.back();
}
jQuery(#imagebx).css(display,block);
var tickerSelector = #imagebx .imageitem;
newsitems = jQuery(tickerSelector).hide().hover(
function(){
jQuery(this).addClass(hovered);
iPause=1;
},
function(){
jQuery(this).removeClass(hovered);
iPause=0;
}
).filter(:eq(0)).show().add(tickerSelector).size();
//jQuery(#indic).animate({opacity: 0.0}, 3);
jQuery(.navig_item:eq(+curritem+)).addClass(navig_item_active);
var ntext = jQuery(.ntext:eq(+curritem+)).html();
var csstype = jQuery(.transboxpos:eq(+curritem+)).text();
switch(csstype)
{
case right:
var tbtype = 'tbright';
break;
case bottom:
var tbtype = 'tbbottom';
break;
default:
var tbtype = 'tbleft';
}
jQuery(#opaquetext).html(ntext);
jQuery(#translucentbox).addClass(tbtype).slideDown(slow,function()
{
indictimeset = setInterval(function(){showanim()},indicdelay);
//jQuery(#indic).animate({opacity: 0.01},
indicdelay).animate({opacity: 1.0}, 3);
});
timeset = setInterval(function(){ticknews()},ppdelay);
});
function ticknews(itemnum) {
if (iPause==0){
jQuery(.navig_item:eq(+curritem
+)).removeClass(navig_item_active);
//jQuery(#indic).animate({opacity: 0.0}, 3);
jQuery(#indic).hide();
jQuery(#translucentbox).slideUp(slow,function(){
jQuery(#translucentbox).removeClass(tbtype);
});
jQuery(#imagebx .imageitem:eq(+curritem
+)).fadeOut(slow,function(){
jQuery(this).hide();
});
if (itemnum !=undefined){
curritem = itemnum;
}else{
curritem = ++curritem%newsitems;
}
jQuery(.navig_item:eq(+curritem+)).addClass(navig_item_active);
jQuery(#imagebx .imageitem:eq(+curritem
+)).fadeIn(slow,function(){
var ntext = jQuery(.ntext:eq(+curritem+)).html();
jQuery(#opaquetext).html(ntext);
var csstype = jQuery(.transboxpos:eq(+curritem+)).text();
switch(csstype)
{
case right:
var tbtype = 'tbright';
break;
case bottom:
var tbtype = 'tbbottom';
break;
default:
var tbtype = 'tbleft';
}
jQuery(#translucentbox).addClass(tbtype).slideDown(slow,function()
{
indictimeset = setInterval(function(){showanim()},indicdelay);
//jQuery(#indic).animate({opacity: 0.01},
indicdelay).animate({opacity: 1.0}, 3);
});
});
}
}
function showanim(){
jQuery(#indic).show();
clearInterval(indictimeset);
}
function ticknews_new(elnum){
clearInterval(timeset);
//clearInterval(indictimeset);
ticknews(elnum);
timeset = setInterval(function(){ticknews()},ppdelay);
}
The function ticknews_new is what is called by navigation links.
I have tried all day to solve this but to no luck so at last the place
to seek help.
Thanks in advance
[jQuery] Re: Repeated quick clicks mess up my code..please help
Here is link to the live page where I am using this code. See how it
behaves on repeated clicks
http://www.joomlaprodigy.com/test/index.php?option=com_weblinksItemid=23
On Apr 28, 8:58 pm, joomlafreak [EMAIL PROTECTED] wrote:
jQuery.noConflict()
var ppdelay = ?php echo $ppdelay; ?;
var newsitems;
var curritem=0;
var iPause=0;
var tbtype;
var indicdelay = ppdelay-3000;
jQuery(document).ready(function(){
jQuery(#imagebx).css(display,block);
var tickerSelector = #imagebx .imageitem;
newsitems = jQuery(tickerSelector).hide().hover(
function(){
jQuery(this).addClass(hovered);
iPause=1;
},
function(){
jQuery(this).removeClass(hovered);
iPause=0;
}
).filter(:eq(0)).show().add(tickerSelector).size();
//jQuery(#indic).animate({opacity: 0.0}, 3);
jQuery(.navig_item:eq(+curritem+)).addClass(navig_item_active);
var ntext = jQuery(.ntext:eq(+curritem+)).html();
var csstype = jQuery(.transboxpos:eq(+curritem+)).text();
switch(csstype)
{
case right:
var tbtype = 'tbright';
break;
case bottom:
var tbtype = 'tbbottom';
break;
default:
var tbtype = 'tbleft';}
jQuery(#opaquetext).html(ntext);
jQuery(#translucentbox).addClass(tbtype).slideDown(slow,function()
{
indictimeset = setInterval(function(){showanim()},indicdelay);
//jQuery(#indic).animate({opacity: 0.01},
indicdelay).animate({opacity: 1.0}, 3);
});
timeset = setInterval(function(){ticknews()},ppdelay);
});
function ticknews(itemnum) {
if (iPause==0){
jQuery(.navig_item:eq(+curritem
+)).removeClass(navig_item_active);
//jQuery(#indic).animate({opacity: 0.0}, 3);
jQuery(#indic).hide();
jQuery(#translucentbox).slideUp(slow,function(){
jQuery(#translucentbox).removeClass(tbtype);
});
jQuery(#imagebx .imageitem:eq(+curritem
+)).fadeOut(slow,function(){
jQuery(this).hide();
});
if (itemnum !=undefined){
curritem = itemnum;
}else{
curritem = ++curritem%newsitems;
}
jQuery(.navig_item:eq(+curritem+)).addClass(navig_item_active);
jQuery(#imagebx .imageitem:eq(+curritem
+)).fadeIn(slow,function(){
var ntext = jQuery(.ntext:eq(+curritem+)).html();
jQuery(#opaquetext).html(ntext);
var csstype = jQuery(.transboxpos:eq(+curritem+)).text();
switch(csstype)
{
case right:
var tbtype = 'tbright';
break;
case bottom:
var tbtype = 'tbbottom';
break;
default:
var tbtype = 'tbleft';
}
jQuery(#translucentbox).addClass(tbtype).slideDown(slow,function()
{
indictimeset = setInterval(function(){showanim()},indicdelay);
//jQuery(#indic).animate({opacity: 0.01},
indicdelay).animate({opacity: 1.0}, 3);
});
});
}
}
function showanim(){
jQuery(#indic).show();
clearInterval(indictimeset);
}
function ticknews_new(elnum){
clearInterval(timeset);
clearInterval(indictimeset);
ticknews(elnum);
timeset = setInterval(function(){ticknews()},ppdelay);
}
[jQuery] Re: Estimated 1.1.3 release date?
What might we expect in the next release? You mentioned a few things related to faster selectors, animations, etc. What bug fixes might we see? IE issues? Why is IE always the problem child? Oh yeah, M$. OK, off my soapbox now. On Apr 26, 7:21 pm, John Resig [EMAIL PROTECTED] wrote: John! Wow :) Did not expect you to chime in on this! No problem - I'm busy at the moment, but I still like to watch out for meta-problems (site issues, releases dates, etc.) First thing's first... I bought your book Pro Javascript Techniques (published 2006?).. and my respect and recognition for your talent has skyrocketed since. jQuery itself demonstrates very clearly that you are skilled, but after even starting to read that book I was very pleasantly surprised. No fluff, no mess... just right into the JS goodness :). Exactly. I hate books that nuts around talking about The History of JavaScript and this is how you use document.write. I'm a programmer, I want code :-) (Especially code that is still relevant.) Glad you're enjoying it, though! Now back to the original topic lol.. glad to hear 1.1.3 will be out soon. Hope things are not getting too stressful over there. Looking forward to more jQuery releases! Have a good one. Yeah, things are less than ideal right now - however I really want to squeeze some time in and get the last changes into this release. There's speed improvements across the board (faster selectors and faster animations) along with a bunch of bug fixes. Not too shabby for a point release. I just have to stomp some final bugs then we can move ahead and release the alpha. (Just need to find a moment to clear my head.) --John
[jQuery] Re: Estimated 1.1.3 release date?
Here is a list of fixes thus far that will be in 1.1.3: http://tinyurl.com/2t2we5 -- Brandon Aaron On 4/28/07, Shelane [EMAIL PROTECTED] wrote: What might we expect in the next release? You mentioned a few things related to faster selectors, animations, etc. What bug fixes might we see? IE issues? Why is IE always the problem child? Oh yeah, M$. OK, off my soapbox now. On Apr 26, 7:21 pm, John Resig [EMAIL PROTECTED] wrote: John! Wow :) Did not expect you to chime in on this! No problem - I'm busy at the moment, but I still like to watch out for meta-problems (site issues, releases dates, etc.) First thing's first... I bought your book Pro Javascript Techniques (published 2006?).. and my respect and recognition for your talent has skyrocketed since. jQuery itself demonstrates very clearly that you are skilled, but after even starting to read that book I was very pleasantly surprised. No fluff, no mess... just right into the JS goodness :). Exactly. I hate books that nuts around talking about The History of JavaScript and this is how you use document.write. I'm a programmer, I want code :-) (Especially code that is still relevant.) Glad you're enjoying it, though! Now back to the original topic lol.. glad to hear 1.1.3 will be out soon. Hope things are not getting too stressful over there. Looking forward to more jQuery releases! Have a good one. Yeah, things are less than ideal right now - however I really want to squeeze some time in and get the last changes into this release. There's speed improvements across the board (faster selectors and faster animations) along with a bunch of bug fixes. Not too shabby for a point release. I just have to stomp some final bugs then we can move ahead and release the alpha. (Just need to find a moment to clear my head.) --John
[jQuery] Re: How to test if an event is already bound to an object ?
Hi,
The this.$events is never existing as far as I understand (based on
firebug), no matter if the link has an event or not.
I have events associated to the click that are created with the jquery
accordion plugin. I suppose they are normal events, and that's not why
they aren't seen.
Any idea?
Xavier
On Apr 27, 8:16 pm, Jeffrey Kretz [EMAIL PROTECTED] wrote:
This is not a terribly elegant way to do it, but it does work.
$('whatever_elements').each(function(i)
{
var hasclick = false;
if (this.$events this.$events['click'])
{
for (j in this.$events['click'])
{
hasclick = true;
break;
}
}
if (!hasclick)
{
jQuery(this).click( function(e) { /* do something
else */ } );
}
});
It tests for the existence of the jQuery click event, and if there are any
functions subscribed to it. Note that an unbound click event still exists,
but it has no event handlers attached (which is what the for loop checks).
JK
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of xavier
Sent: Friday, April 27, 2007 10:42 AM
To: jQuery (English)
Subject: [jQuery] How to test if an event is already bound to an object ?
Hello,
I want to add a default javascript function to all my internal links
that DON'T already have a behaviour.
If i do :
jQuery([EMAIL PROTECTED]/]).bind(click,function(){
//jQuery(#main).empty().append(Loading...).load (/test);
jQuery(#main).load (/xajax/+this.pathname,{},function()
{this.style.opacity=1;}).fadeTo(slow,0.1);
return false;
});
(it replaces all the normal links by an ajax call) Then it applies
it also to links that have already a javascript event to it.
Is it possible to select only the links that don't have any event
bound to the click event ?
Thanks in advance,
Xavier
