[jQuery] Re: Repositioning a Google Gadget
This seems to have something to do with moving a SCRIPT tag around in the DOM. The gadget creates a script and a style tag. If I *remove* the script tag from the DOM, and then reposition the wrapper to another location in the DOM, all works well. If I try to *move* the script tag to another DOM element then the original problem occurs. So *moving* a script tag around the DOM seems to be the cause -- regardless of when the move occurs (even post-load). I've added this scenario to the demo. Has anyone seen this before? ~ ~ Dave On Nov 23, 5:26 pm, DaveG [EMAIL PROTECTED] wrote: Hi, I don't believe this is strictly a jq issue, but I'm hoping someone can help. I'm using the Fish Gadget (http://abowman.com/google-modules/fish/) within a wiki based CMS, and need to reposition the gadget from one HTML element to another. If I directly reposition the gadget using what appears to be the gadgets base class ig-reset, then everything works. If I try to reposition using a surrounding wrapper, then the iframe used by the gadget seems to take over. Unfortunately I need the flexibility of repositioning using the surrounding wrapper. I've tried setting various position, float, and display attributes of the wrapper to no avail. I put a test up here:http://solidgone.com/jquery/google-gadget.html Anyone have any insights? ~ ~ Dave
[jQuery] Repositioning a Google Gadget
Hi, I don't believe this is strictly a jq issue, but I'm hoping someone can help. I'm using the Fish Gadget (http://abowman.com/google-modules/fish/) within a wiki based CMS, and need to reposition the gadget from one HTML element to another. If I directly reposition the gadget using what appears to be the gadgets base class ig-reset, then everything works. If I try to reposition using a surrounding wrapper, then the iframe used by the gadget seems to take over. Unfortunately I need the flexibility of repositioning using the surrounding wrapper. I've tried setting various position, float, and display attributes of the wrapper to no avail. I put a test up here: http://solidgone.com/jquery/google-gadget.html Anyone have any insights? ~ ~ Dave
[jQuery] Re: Show/Hide divs beginning with a specified string
Since you're already using css to show/hide, then why not apply a class
to the shown/hidden rows, and select on that instead?
Thus, for hidden rows apply the class hide_row, which will include the
css required to hide the row, and apply show_row on those rows you
want displayed.
~ ~ Dave
Adam wrote:
Hi,
I have a system where data is placed in a div, using AjaxSubmit to a
php page, in the below format.
{Employee Name1} {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
{Employee Name2} {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
As more employees are added I would like to be able to collapse the
job information for employees I click on using css.
i.e.
{Employee Name1}[-] {Date Mon} {Date Tue} {Date Wed} {Date Thu} {Date
Fri}
{Job Mon1} {Job Tue1} {Job Wed1} {Job
Thu1} {Job Fri1}
{Job Mon2} {Job Tue2} {Job Wed2} {Job
Thu2} {Job Fri2}
{Employee Name2}[+]
etc where [-] is a button to hide employee1's jobs and [+] is a button
to show employee2's jobs.
I could do this by putting different inline javascript functions into
the formatted data that is returned from the php page, however I would
prefer to use jQuery and put everything in the HEAD of the container
page.
The current template for the above data is:
div class=diary_engineer_week
div class=diary_engineer_name{EngineerName}img
id=showhide_{EngineerShortName} src=images/Apr08Design/
plus_button_new.png alt=Show or Hide /br/{NumberJobs} Job(s)/
div
div id=block_{EngineerShortName}
div class=diary_day1div class=diary_header{day1}/
div{job1}/div
div class=diary_day2div class=diary_header{day2}/
div{job2}/div
div class=diary_day1div class=diary_header{day3}/
div{job3}/div
div class=diary_day2div class=diary_header{day4}/
div{job4}/div
div class=diary_day1div class=diary_header{day5}/
div{job5}/div
div
/div
I want to create some jQuery code which when any show/hide button with
an id beginning with showhide is clicked, the corresponding div with
id=block_{EngineerShortName} is shown or hidden using css.
The trouble is how do I select something in jQuery where the id begins
with something?
Also, how do I then hide the corresponding div?
Would this be possible using a parent-child relationship if I used
div id=block_{EngineerShortName} as a child of a engineer_week
div?
Thank you for any help,
Adam Sykes
[jQuery] Re: Problem with jQuery performance
FF3 should be coming out soon and hopefully the adoption rate will be quick. Well, we may be seeing different problems, but I'm running FF3 on Windows, and the fade transition between large images is not particularly smooth, so not sure that's going to be the savior. ~ ~ Dave daveJay wrote: Thanks for the suggestions, that's very handy! =) While I think it has helped some, it hasn't made an appreciable difference on the overall performance. I don't think it's the method of dissolve that's the problem. I tried a scriptaculous fade and had the same issue. I think it's mostly the fact that I have to move and resize the image, requiring the image to be redrawn, thereby making a fade much more complex a procedure. And it's also just the size of the image as well. I took out the resizing code and the fade still had difficulty working on an image of that size. Fortunately, this issue does not seem to affect any browser except the Mac version of Firefox 2. I'm almost to the point where I would consider putting in a browser detect script to detect for the Mac FF2 and suggest they download FF3 to improve performance. FF3 should be coming out soon and hopefully the adoption rate will be quick. This whole thing may be a non-issue in a few months.
[jQuery] Re: Problem with jQuery performance
I just read another post about the cycle plugin. Maybe that will help? http://www.malsup.com/jquery/cycle/ daveJay wrote: Thanks for the suggestions, that's very handy! =) While I think it has helped some, it hasn't made an appreciable difference on the overall performance. I don't think it's the method of dissolve that's the problem. I tried a scriptaculous fade and had the same issue. I think it's mostly the fact that I have to move and resize the image, requiring the image to be redrawn, thereby making a fade much more complex a procedure. And it's also just the size of the image as well. I took out the resizing code and the fade still had difficulty working on an image of that size. Fortunately, this issue does not seem to affect any browser except the Mac version of Firefox 2. I'm almost to the point where I would consider putting in a browser detect script to detect for the Mac FF2 and suggest they download FF3 to improve performance. FF3 should be coming out soon and hopefully the adoption rate will be quick. This whole thing may be a non-issue in a few months.
[jQuery] Re: Problem with jQuery performance
I made some minor code and css changes to your template, but still didn't manage to get a smooth fade effect, so I'm not sure the issue lies there alone. You might want to check http://brainerror.net/scripts/javascript/blendtrans/ -- there is a pretty smooth image fade effect that seems to work quite well with large images. ~ ~ Dave daveJay wrote: Upon further investigation, it's the Mac Firefox that's giving me grief, the performance while still a tad hampered is acceptable. I guess there's not much I can do about it except hope that things will improve in the Mac FF3.
[jQuery] Re: Problem with jQuery performance
Just found this jQ fade technique: http://jqueryfordesigners.com/image-cross-fade-transition/ DaveG wrote: I made some minor code and css changes to your template, but still didn't manage to get a smooth fade effect, so I'm not sure the issue lies there alone. You might want to check http://brainerror.net/scripts/javascript/blendtrans/ -- there is a pretty smooth image fade effect that seems to work quite well with large images. ~ ~ Dave daveJay wrote: Upon further investigation, it's the Mac Firefox that's giving me grief, the performance while still a tad hampered is acceptable. I guess there's not much I can do about it except hope that things will improve in the Mac FF3.
[jQuery] Re: Cornerz 0.4
Andy Matthews wrote: it kept showing the squared-off corners in addition to the rounded corners. I finally figured out that the corner has to be set to the same color as the background. Ah, thanks for that. I had the same squared off problem (only in FF though). However in my case I'm using a gradient image as a background so this corner method won't work. Also had the same issue. ~ ~ Dave
[jQuery] Re: cluetip plugin prevents click event
driven wrote:
I am using cluetip to put tooltips on the links in a search results
page. I have the 'activation' setting as 'hover' but unfortunately
cluetip cancels the normal click event and I can't actually follow the
links. I don't see any examples or settings that will let me actually
click on the links. Is this possible?
I'm not 100% sure, but I seem to recal that this might be what you're
looking for:
onActivate: function(e) {return true;}
That should be the default though, so not sure if you've overridden it.
~ ~ David
[jQuery] Re: hover and className
Glen Lipka wrote: Well it sounds like you are in a better place than last week. :) Absolutely -- thanks for your help.
[jQuery] Re: hover and className
David Serduke wrote: Sorry to butt in but I was wondering if this was a weird jQuery bug so looked in to it. What I found was it appears the way you are changing the className is the problem. I came to the same conclusion; it looks like replacing the class name causes the hover to re-fire. When I took out that part and replaced it with addClass and removeClass it seemed better. Right. Switching to this method seems reasonable. I took some liberties with your code while testing but thought my test might be useful to you. http://www.exfer.net/test/jquery/hover_test.html Of course this isn't a hover state system by any means but hopefully can help you get past the current hurdle. Thanks for the input. I've not used regex with exec before -- learned something new :) ~ ~ David
[jQuery] Re: hover and className
Glen Lipka wrote: Let's start at the beginning. Let's assume (work with me here) that autogeneration of sprites and css is the path to ruin. Actually, I don't agree with this statement. Auto-generation get you the sprite and positioning css, which is nice, and is useful. One of the primary benefits though is automation -- a consistent, theoretically error free management of the process. It's the same reason people prefer to automate build processes. Take the chance of tedium induced errors out of the equation. Let's assume 100 images should be manageable in a very easy way. (When you add new images it should take under 3 minutes to update things) Okay. Here a beginning... http://www.commadot.com/jquery/hoverSprite.php Structure is everything. When you set up a good architecture, maintenance is easy. So, basically we have a large grid structure with a single image in each cell. Since the grid is statically sized, we have a fixed offset to apply for the hover effect. So far in the demo I have. 1. Images are variable size, currently width is variable, if height is variable that is fine, but I would like to see the range of possible heights/widths. 2. Some are hoverable and some not. I use the canHover class and the button class in tandem to achieve the right selection. This approach clearly makes the markup cleaner, and makes the hover js simpler as well. I haven't run any performance metrics, but I'd suspect this approach is quicker, but the difference is probably not user noticeable, even on 100's of images. So we now have a cleaner coded solution, but have lost the benefit of automation, and with it incurred a larger testing effort, every time an image is added/removed. In our case I'm not sure this is an appropriate trade-off, given the relatively small amount of code simplification we gained. Look at the source and go slow. I am sure this doesn't scale for some reason. Show me the images to add and I will show you how it scales. I think it does scale, although at some point there's going to be an overhead due to the 'whitespace' around the smaller images. PNG seems to do pretty well at compressing this though, so a few k at the most. PS. This technique works for a sprite I manage. Rows: 80, Cols: 8. Its gigantic and super easy to manage. Thanks for sharing your approach -- it certainly helped me think some things through, and it's always good to bounce the idea around for a sanity check. Oh, and I did realize a fundamental assumption I made way early on. For some reason I decided that the initially combined over/out sprites needed to be separated in order to use the large sprite idea. Not true. In fact keeping the over/out sprite combined as a single image, and merging that image into the larger sprite would have opened another option, of simply off-setting the initial image by the image width (or height depending on how the over/out sprite was stacked). ~ ~ David
[jQuery] hover and className
I'm trying to change an elements class on mouse-over/out. The code below
seems to fire repeatedly when the mouse moves over the target, even when
the mouse is stationary, causing a slow (10/sec) flicker effect. What's
causing the flicker? I was expecting the over/out functions to fire once
on mouse over, and once on mouse out.
jQuery([EMAIL PROTECTED]'xxx-']).hover(
function(){
jQuery(this)
.attr(
'class',
this.className.replace(/xxx-(\w+)-off/gi, 'xxx-$1-on')
);
},
function(){
jQuery(this)
.attr(
'class',
this.className.replace(/xxx-(\w+)-on/gi, 'xxx-$1-off')
);
}
);
~ ~ David
[jQuery] Re: hover and className
Glen Lipka wrote: One way is with a sprite. (Background or foreground) http://learningtheworld.eu/2007/foreground-sprites/ Actually I'm using sprites, that's why I'm switching from css :hover to this :) We've gone beyond the 'normal' approach of combining over/out images into a single sprite, and are combining multiple over/out images into a single sprite. We're using a sprite generator, which takes all the images, creates a sprite, and provide the background-position classes, with classes named the same as the image names, with a prefix. Because the classes for over/out images are named differently, and now have different class names, the css :hover is not easily applied. Thus, this jQuery approach. There are lots of methods. The one you have has flicker written all over it. :) Any way to stop it, with this method?
[jQuery] Re: hover and className
Glen Lipka wrote:
Do you have a page that has the example?
If you mean an example of the flickering problem, then I'll put one up.
Also, I use jQuery with sprites in multiple methods here. Some use a
very powerful matrix approach, which has really clean CSS.
We considered the matrix idea, but in this case the images are all
different sizes. Even after grouping common sizes in their own sprites,
we ended up with more sprites than was worth the effort.
In the meantime, I this seems to work. It makes various assumptions
regarding class positioning, but that can be corrected.
jQuery(document).ready(function() {
jQuery([EMAIL PROTECTED]'sprite-hover-']).hover(
function(){
var x=this.className.split(' ');
jQuery(this).addClass(x[x.length-1].replace('-off','-on'));
if (this.className == '') this.className =
x[0].replace('-off','-on');
},
function(){
var x=this.className.split(' ');
jQuery(this).removeClass(x[x.length-1]);
if (this.className == '') this.className =
x[0].replace('-on','-off');
}
);
});
[jQuery] Re: hover and className
Do you have a page that has the example? If you mean an example of the flickering problem, then I'll put one up. Test: http://solidgone.com/jquery/hover-test.html
[jQuery] Re: hover and className
A slightly better working version:
jQuery(document).ready(function() {
jQuery([EMAIL PROTECTED]'sprite-hover-']).hover(
function(){
jQuery(this).addClass(
this.className.replace(/sprite-hover-(\w+)-off/gi, 'sprite-hover-$1-on') );
// jQuery(this).attr('class',
this.className.replace(/sprite-hover-(\w+)-off/gi, 'sprite-hover-$1-on') );
},
function(){
jQuery(this).removeClass(
this.className.match(/sprite-hover-(\w+)-on/gi) );
// jQuery(this).attr('class',
this.className.replace(/sprite-hover-(\w+)-on/gi, 'sprite-hover-$1-off') );
}
);
});
This adds/removes a class. My guess is that replacing the entire class
is causing the hover event to retrigger for some reason, whereas adding
replacing classes does not.
~ ~ Dave
[jQuery] Re: hover and className
Hey, if you can help simplify this, great!
1. Different size images.
2. *Some* images have 'hover' effects.
3. Classes within the sprite are named the same as the originating image
name.
4. When images are added/changed/removed and the sprite is regenerated,
need to be able to copy/paste the auto-generated positioning CSS.
Current approach, is to:
* name hover images with a 'hover-' prefix.
* package the images into a zip and use
http://spritegen.website-performance.org/ to create the sprite and
positioning css.
* for hover elements ensure the 'hover-' class is first in the class list.
* use the hover function below to grab all 'hover-' elements, and attach
the switching code.
One of the driving factors here is to simplify on-going maintenance. We
have ~100 images, so changes to the sprite need to be easy to integrate
to the code base.
~ ~ Dave
Glen Lipka wrote:
Let's slow down a little. I think this might be much easier than you
imagine.
Let's go over the requirements.
1. You have different shaped buttons.
2. Each button has a hover.
3. You want to add all the hover handlers using jQuery.
Does this sound correct? Add to this list, but keep it straightforward.
Can you post some of the other sized button images?
I think I could help whip this up pretty quickly.
Glen
On Dec 4, 2007 6:43 PM, DaveG [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
A slightly better working version:
jQuery(document).ready(function() {
jQuery([EMAIL PROTECTED]'sprite-hover-']).hover(
function(){
jQuery(this).addClass(
this.className.replace(/sprite-hover-(\w+)-off/gi,
'sprite-hover-$1-on') );
// jQuery(this).attr('class',
this.className.replace(/sprite-hover-(\w+)-off/gi,
'sprite-hover-$1-on') );
},
function(){
jQuery(this).removeClass(
this.className.match(/sprite-hover-(\w+)-on/gi) );
// jQuery(this).attr('class',
this.className.replace(/sprite-hover-(\w+)-on/gi,
'sprite-hover-$1-off') );
}
);
});
This adds/removes a class. My guess is that replacing the entire class
is causing the hover event to retrigger for some reason, whereas adding
replacing classes does not.
~ ~ Dave
[jQuery] Getting background-position
How do I get the background-position?
$('.XXX').css(background_position);
$('.XXX').css(background-position);
$('.XXX').css(backgroundPosition);
...do not work. Other variants like background-color work fine.
~ ~ David
[jQuery] Re: Getting background-position
DaveG wrote:
How do I get the background-position?
$('.XXX').css(background_position);
$('.XXX').css(background-position);
$('.XXX').css(backgroundPosition);
...do not work. Other variants like background-color work fine.
The problem seems to be that I'm trying to get the background position
of a class. What I'm trying to do is copy the background-position
attributes from one CSS class to another.
However, even trying on an ID, where this works:
document.getElementById('ID').style.backgroundPosition;
This does not:
$('#ID').css(backgroundPosition);
~ ~ Dave
[jQuery] Re: Getting background-position
Thanks for the information -- I would never have considered looking at
FF for the bug.
~ ~ David
Karl Rudd wrote:
Actually background is the shorthand property, backgroundPostion
is the fully qualified property.
There is/was a bug in Firefox:
Bug 316981 – background-position property is not available through
the CSS DOM interface
https://bugzilla.mozilla.org/show_bug.cgi?id=316981
Karl Rudd
On Nov 28, 2007 9:25 AM, Richard D. Worth [EMAIL PROTECTED] wrote:
This is what css calls a shorthand property. It's used for setting. Browsers
differ in their treatment of it as a getter. jQuery doesn't (yet) normalize
this. See these threads for more info:
element.css(background) returns undefined
http://groups.google.com/group/jquery-en/browse_thread/thread/b1c863aa49ba185b
.css(border-color) returning undefined
http://groups.google.com/group/jquery-en/browse_thread/thread/9fdb1c44c2d9083f
Background-position related CSS properties issue
http://groups.google.com/group/jquery-dev/browse_thread/thread/6e9e0ba3486aebc6
- Richard
On Nov 27, 2007 4:40 PM, Karl Swedberg [EMAIL PROTECTED] wrote:
Weird. That must be a bug. You can set the background position...
$('.XXX').css('backgroundPosition', '0 50%');
and then get it ...
$('.XXX').css('backgroundPosition');
// returns 0pt 50%
but you can't get it without setting first.
Hmmm.
--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Nov 27, 2007, at 2:13 PM, DaveG wrote:
How do I get the background-position?
$('.XXX').css(background_position);
$('.XXX').css(background-position);
$('.XXX').css(backgroundPosition);
...do not work. Other variants like background-color work fine.
~ ~ David
[jQuery] Re: Scripts at the bottom of the page
I experienced this problem, and ended up wrapping these events inside jQuery's ready function. That solved 99% of the problem. Of course it still occurs, but maybe I missed some events :) Bil Corry wrote: mike503 wrote on 11/8/2007 4:22 PM: What is confusing is why I can bind the event to the jquery- initialized object but the action inside the event is confused. Perhaps I can try replacing $(this) with $(#theactual div name) That won't work because jQuery doesn't exist -- you'd have to use straight JavaScript. Probably the best solution is to make the event wait until jQuery exists. Seems like a task jQuery itself should take care of though. - Bil
[jQuery] Re: Scripts at the bottom of the page
If you click on one of the links, while it's loading that page if your mouse moves over the other one it will raise the Javascript warning... I've seen this exact behavior with other tip libraries jQuery based, and others. I didn't fully track down the issue, but managed to minimize it by wrapping all 'inline' and attached javascript calls inside document.ready. The presumption at the time was that some script loading tags took longer to process, and were doing so whilst the page was building, and events firing. And if so, I guess the fix is to include jquery in the head (as soon as possible) and the rest can still be in the footer... In this case we loaded in the head, so if we have the same issue, that may not correct it. Of course we may have the same symptoms, but entirely different issues. ~ ~ David
[jQuery] In Use: RoundCube
Not new news, but apparently the RoundCube mail server will be increasingly using jQuery. Plus it's a great mail server! http://trac.roundcube.net/wiki/Plugin_API_Draft ~ ~ Dave
[jQuery] Re: clueTip feedback and suggestions
[EMAIL PROTECTED] wrote: Many thanks to Karl for an awesome plugin. I've just started using it and am going to most likely standardize to clueTip for popover use across all our websites. Dave, I have to say I'm impressed with your dedication to debugging clueTip ;) Thank Karl, he's the one who's stuck with it! And, hey, if I don't report the problems, how's he going to fix them? :) ~ ~ Dave
[jQuery] Re: clueTip feedback and suggestions
Using 0.9.2.1, this line is the problem:
if (tipAttribute == $this.attr('href')) {
return false;
}
Problem is that both tipAttribute and $this.attr('href') are undefined,
returning false, which seems to prevent the anchor inside the triggered
div from firing.
Here's my workaround:
if (typeof tipAttribute == undefined typeof $this.attr('href')
== undefined) {
return true;
} else if (tipAttribute == $this.attr('href')) {
return false;
}
Not sure what else that might screw-up though...
~ ~ Dave
DaveG wrote:
If you have an anchor inside a div (or some other element, LI for
example), and you put a hint on the div, then the anchor stops
forwarding to the href -- onclick handlers fire okay, but the link does
not get followed when the user clicks.
Is there an option I've mis-set, or something I need to do to ensure
links inside hint'ed elements remain active?
~ ~ Dave
DaveG wrote:
Responses below.
Karl Swedberg wrote:
5] Consider adding a top/bottom arrow pointer for use with
positionBy:'bottomTop'.
Added! :-) Already had this working, but forgot to upload the new
images and the updated css file to the server.
I see it working on the demo site -- now you just need to release it
on jQuery plugins site :) In the meantime, I grabbed it from the site.
6] The left/right arrow appears very specific to putting the arrow
in the top left/right corners. It would be nice to be able to put
the arrow in the center, so it might be used in conjunction with the
bubble type style.
One way to do this might be to provide a means of replacing the
tl.gif and bl.gif classes with their top/bottom or left/right
equivalents. This would fix [5] as well.
Hmmm. The code is supposed to adjust the background position of the
clue-left-[theme name] and clue-right-[theme name] classes so that
the arrows will point to the invoking element even if the tooltip is
adjusted upwards. However, the rounded corners css, specifically the
background images, might make it difficult to implement arrows with
it. I'm not sure where to go with this one. But maybe since I added
support for #5, this is already a possibility?
I *think* what you've done on [5] addresses this.
--- *Possible Bugs* ---
7] positionBy 'auto' appears not to work. The hint does not seem to
accommodate the viewport scrolling. The other positioning methods
work fine though. (I'm using the latest dimensions -- the one
provided in the clueTip download.)
The only time I have heard of this breaking is when the plugin has
been used with the latest Dimensions plugin in svn, not the one that
comes with the clueTip download bundle. But maybe there is a problem
on a particular browser that I'm not aware of yet.
Could you please do 2 things for me?
1. tell me which browser you're using
Firefox 2.0.0.8
2. test the examples at
http://plugins.learningjquery.com/cluetip/demo/ and let me know if
you encounter the problem there as well.
I do not see any errors on the demo site.
There *seems* to be a pattern where the elements are floated, it
causes the problem -- I'm not 100% sure of this though.
The problem is odd in that there seems to be a relationship between
where the hint last appeared, and where it is displayed for a
subsequent element.
There are some elements on the page where the hint is consistently
shown in the correct place (the element is non-floated, but lives
within floated elements). If I then hover over a 'broken' element, the
hint appears in the same 'top' position as the prior correctly shown
hint; the left position is probably correct.
Now, it gets stranger... if I hover over another element with the same
class as the prior 'broken' element, the tip shows in the exact same
location as the last 'broken' element, even though the two targets
have very different 'top' positions.
And finally, if I scroll one of the broken elements to the bottom of
the viewport, the hint appears in the correct top position.
Hope that helps :)
btw, I switched to positionBy:'bottomTop', so this is not a problem
for me right now. I'm happy to continue to help track the problem down
though.
8] When shrinking the window, the hint for elements on the right
side gets moved over to the center of the window, too far from the
target element.
I haven't come across this one before, but I'll play around with
resizing and see if I can find/solve the problem.
I suspect it's related to [7].
~ ~ David
[jQuery] Re: clueTip feedback and suggestions
There *seems* to be a pattern where the elements are floated, it causes
the problem -- I'm not 100% sure of this though.
The problem is odd in that there seems to be a relationship between
where the hint last appeared, and where it is displayed for a subsequent
element.
There are some elements on the page where the hint is consistently shown
in the correct place (the element is non-floated, but lives within
floated elements). If I then hover over a 'broken' element, the hint
appears in the same 'top' position as the prior correctly shown hint;
the left position is probably correct.
Now, it gets stranger... if I hover over another element with the same
class as the prior 'broken' element, the tip shows in the exact same
location as the last 'broken' element, even though the two targets have
very different 'top' positions.
And finally, if I scroll one of the broken elements to the bottom of the
viewport, the hint appears in the correct top position.
Okay, I have a little more, and now it's more important :) Due to the
positioning issues I was having I switched to use bottomTop. This works
fine, *except* when the target element is close to the right side. In
this case the hint gets pushed horizontally out to the center of the
viewport. But only when the cursor is in a position over the target
greater than around half the distance between the object and the browser
edge.
Thus, if the distance from the right edge of the object and the browser
is 20px, then moving the cursor anywhere from around 0-10px on the left
of the target works fine. From 10+px from the left edge of the target,
then the hint is horizontally centered in the browser.
You can see this even on the demo page, by changing adding positionBy to
the right edge demo:
$('a.jt:eq(1)').cluetip({positionBy:'bottomTop',
~ ~ Dave
[jQuery] Re: clueTip feedback and suggestions
DaveG wrote:
Okay, I have a little more, and now it's more important :) Due to the
positioning issues I was having I switched to use bottomTop. This works
fine, *except* when the target element is close to the right side. In
this case the hint gets pushed horizontally out to the center of the
viewport. But only when the cursor is in a position over the target
greater than around half the distance between the object and the browser
edge.
Thus, if the distance from the right edge of the object and the browser
is 20px, then moving the cursor anywhere from around 0-10px on the left
of the target works fine. From 10+px from the left edge of the target,
then the hint is horizontally centered in the browser.
You can see this even on the demo page, by changing adding positionBy to
the right edge demo:
$('a.jt:eq(1)').cluetip({positionBy:'bottomTop',
Fix seems to be to change this line:
$cluetip.css({left: (posX 0 defaults.positionBy != 'bottomTop')
? posX : (mouseX + (tipWidth/2) winWidth) ? winWidth/2 - tipWidth/2 :
Math.max(mouseX - (tipWidth/2),0)});
to:
$cluetip.css({left: (posX 0 defaults.positionBy != 'bottomTop')
? posX : (mouseX + (tipWidth/2) winWidth) ?
linkLeft+linkWidth-tipWidth-lOffset: Math.max(mouseX - (tipWidth/2),0)});
Basically positioning to the right edge of the target object.
~ ~ Dave
[jQuery] Re: clueTip feedback and suggestions
Karl Swedberg wrote: thanks, Dave. You're right about that. Problem is, I'm not sure how to deal with it. I'm afraid I was too stingy with the DIVs when I decided on the HTML structure. The rounded-corner theme was an afterthought that I kind of shoe-horned into what was there. Guess that explains why the top/bottom arrow doesn't work with shadow either ;) Now, if you don't want anything to appear in the title part, you can write start the title attribute's value with a pipe, like this: title=|first line body|second line body That's the approach I have been using, thanks. Then, (only tested in FF because it's past midnight), you can modify the margin declaration for .cluetip-rounded #cluetip-inner to have a top margin of -12px. That will adjust the text up into a bit more appealing position within the tooltip. I'll try that -- thanks again.
[jQuery] Re: clueTip feedback and suggestions
And another buglet. In my implementation, for some reason, the bl.gif is
not positioned correctly (ie, the bl corner is not visible/round, and
it's squared off) -- this is across all browsers. I'm basically using
the standard clueTip, with the rounded theme. However, removing the line:
$cluetip.css({backgroundPosition: bgPos});
Seems to make everything better, across all browsers. I'm not using
arrows, so not sure if that line even needs to be active in that case.
~ ~ Dave
(btw, let me know if there's somewhere else you'd rather I report these
things to.)
[jQuery] Re: PHP Contest Scoreboard, utilising the jQuery library
I'd guess it's this: http://www.doheth.co.uk/codelair/php-mysql/scoreboard ~ ~ Dave Rey Bango wrote: Hi Scott. Can you provide a link? Rey RichUncleSkeleton wrote: Just thought I'd post this here, I've just finished a new version of my contest script. You can set up questions, let users submit their answers, then mark it quickly and easily. The admin interface utilises the jQuery library to handle all the interaction - adding questions, marking individual entries (by clicking on them), the 'quick mark' function. After a bit of debate with form styling issues I decided to use spans instead of inputs for the buttons and use jQuery for form submission too. I really fell in love with jQuery while doing this project! :) Any comments, etc are welcome of couse. Cheers, Scott.
[jQuery] Re: clueTip feedback and suggestions
If you have an anchor inside a div (or some other element, LI for example), and you put a hint on the div, then the anchor stops forwarding to the href -- onclick handlers fire okay, but the link does not get followed when the user clicks. Is there an option I've mis-set, or something I need to do to ensure links inside hint'ed elements remain active? ~ ~ Dave DaveG wrote: Responses below. Karl Swedberg wrote: 5] Consider adding a top/bottom arrow pointer for use with positionBy:'bottomTop'. Added! :-) Already had this working, but forgot to upload the new images and the updated css file to the server. I see it working on the demo site -- now you just need to release it on jQuery plugins site :) In the meantime, I grabbed it from the site. 6] The left/right arrow appears very specific to putting the arrow in the top left/right corners. It would be nice to be able to put the arrow in the center, so it might be used in conjunction with the bubble type style. One way to do this might be to provide a means of replacing the tl.gif and bl.gif classes with their top/bottom or left/right equivalents. This would fix [5] as well. Hmmm. The code is supposed to adjust the background position of the clue-left-[theme name] and clue-right-[theme name] classes so that the arrows will point to the invoking element even if the tooltip is adjusted upwards. However, the rounded corners css, specifically the background images, might make it difficult to implement arrows with it. I'm not sure where to go with this one. But maybe since I added support for #5, this is already a possibility? I *think* what you've done on [5] addresses this. --- *Possible Bugs* --- 7] positionBy 'auto' appears not to work. The hint does not seem to accommodate the viewport scrolling. The other positioning methods work fine though. (I'm using the latest dimensions -- the one provided in the clueTip download.) The only time I have heard of this breaking is when the plugin has been used with the latest Dimensions plugin in svn, not the one that comes with the clueTip download bundle. But maybe there is a problem on a particular browser that I'm not aware of yet. Could you please do 2 things for me? 1. tell me which browser you're using Firefox 2.0.0.8 2. test the examples at http://plugins.learningjquery.com/cluetip/demo/ and let me know if you encounter the problem there as well. I do not see any errors on the demo site. There *seems* to be a pattern where the elements are floated, it causes the problem -- I'm not 100% sure of this though. The problem is odd in that there seems to be a relationship between where the hint last appeared, and where it is displayed for a subsequent element. There are some elements on the page where the hint is consistently shown in the correct place (the element is non-floated, but lives within floated elements). If I then hover over a 'broken' element, the hint appears in the same 'top' position as the prior correctly shown hint; the left position is probably correct. Now, it gets stranger... if I hover over another element with the same class as the prior 'broken' element, the tip shows in the exact same location as the last 'broken' element, even though the two targets have very different 'top' positions. And finally, if I scroll one of the broken elements to the bottom of the viewport, the hint appears in the correct top position. Hope that helps :) btw, I switched to positionBy:'bottomTop', so this is not a problem for me right now. I'm happy to continue to help track the problem down though. 8] When shrinking the window, the hint for elements on the right side gets moved over to the center of the window, too far from the target element. I haven't come across this one before, but I'll play around with resizing and see if I can find/solve the problem. I suspect it's related to [7]. ~ ~ David
[jQuery] Re: clueTip feedback and suggestions
Under the possible bugs category: When using the parameters below, the title element gets hidden, which hides the tr.gif element, cutting off the tr corner. titleAttribute:'title', splitTitle:'|', showTitle: false, dropShadow: false, cluetipClass: 'rounded' ~ ~ Dave
[jQuery] clueTip feedback and suggestions
After looking into a few of the tooltip libraries, I've ended up
implementing clueTip (http://jquery.com/plugins/project/cluetip/) on an
existing project. In general it fit in very well, with pretty nearly all
the features we need. The only real issue was [7], which I didn't manage
to work around.
This post is a little long, but I just want to share my experience, and
provide a little feedback to hopefully make the library even better!
All-in-all, I found this library to be the most feature complete, so
great job Karl!
~ ~ David
PS: Some of the books on your Amazon list look interesting :)
--- *Usage* ---
1] On the demo page, I'd suggest that the simplest case (from a library
user perspective) is actually a link with a tip provided in the title.
It took me quite a while to work out how to do this, as the hint
attempted to get loaded from the title element as if title was a URL. My
problem was that I was trying to use attribute to set my hint text,
not *titleAttribute*.
However after I figured it out I did find the appropriate documentation,
just scattered around a little. Here's the new demo I'd suggest adding
as number 1, simple case:
a id='e' href=http://; title=My title|my hintabc/a
jQuery('#e')
.cluetip({
titleAttribute:'title',
splitTitle:'|'
});
2] Next demo you might add is a hint with no title.
a id='e' href=http://; title=|my hintabc/a
jQuery('#e')
.cluetip({
titleAttribute:'title',
splitTitle:'|',
showTitle: false;
});
3] It looks like adding a hint to an element, and then hovering over the
target changes the cursor to a 'question-mark arrow'. That's fine,
except when combined with the ability to turn off hints, when elements
which were hovered over retain the question-mark cursor, which seems odd
to users, now that hints are off.
I'd suggest returning the cursor state to it's original value on
mouseout. That way when hints are later turned off all is well.
4] You might consider adding a means of removing hints from elements (or
simply document the workaround). I accomplished this by simply adding an
onActivate handler:
jQuery( element )
.cluetip({
onActivate: function(e) {
return false;
}
});
5] Consider adding a top/bottom arrow pointer for use with
positionBy:'bottomTop'.
6] The left/right arrow appears very specific to putting the arrow in
the top left/right corners. It would be nice to be able to put the arrow
in the center, so it might be used in conjunction with the bubble type
style.
One way to do this might be to provide a means of replacing the tl.gif
and bl.gif classes with their top/bottom or left/right equivalents. This
would fix [5] as well.
--- *Possible Bugs* ---
7] positionBy 'auto' appears not to work. The hint does not seem to
accommodate the viewport scrolling. The other positioning methods work
fine though. (I'm using the latest dimensions -- the one provided in the
clueTip download.)
8] When shrinking the window, the hint for elements on the right side
gets moved over to the center of the window, too far from the target
element.
-- *Documentation* ---
9] The Demo Page seems to have Known Issues and Downloads at the bottom
-- not sure that's meant to be there.
10] On the details page you mention that hints can fade in, but it takes
a little digging to find out *how* to do this (it's on the API page).
11] Example 5 shows how hints can be turned off. However the code in the
download does not include the onActivate parameter required to make this
happen. I found a copy in SVN which has this in it, so presumably the
doc is a little ahead of the production code. Took a while to work out
what I was doing wrong though :)
In the meantime, I simply copy/pasted the few lines required for this
functionality from svn.
[jQuery] Re: clueTip feedback and suggestions
Responses below. Karl Swedberg wrote: 5] Consider adding a top/bottom arrow pointer for use with positionBy:'bottomTop'. Added! :-) Already had this working, but forgot to upload the new images and the updated css file to the server. I see it working on the demo site -- now you just need to release it on jQuery plugins site :) In the meantime, I grabbed it from the site. 6] The left/right arrow appears very specific to putting the arrow in the top left/right corners. It would be nice to be able to put the arrow in the center, so it might be used in conjunction with the bubble type style. One way to do this might be to provide a means of replacing the tl.gif and bl.gif classes with their top/bottom or left/right equivalents. This would fix [5] as well. Hmmm. The code is supposed to adjust the background position of the clue-left-[theme name] and clue-right-[theme name] classes so that the arrows will point to the invoking element even if the tooltip is adjusted upwards. However, the rounded corners css, specifically the background images, might make it difficult to implement arrows with it. I'm not sure where to go with this one. But maybe since I added support for #5, this is already a possibility? I *think* what you've done on [5] addresses this. --- *Possible Bugs* --- 7] positionBy 'auto' appears not to work. The hint does not seem to accommodate the viewport scrolling. The other positioning methods work fine though. (I'm using the latest dimensions -- the one provided in the clueTip download.) The only time I have heard of this breaking is when the plugin has been used with the latest Dimensions plugin in svn, not the one that comes with the clueTip download bundle. But maybe there is a problem on a particular browser that I'm not aware of yet. Could you please do 2 things for me? 1. tell me which browser you're using Firefox 2.0.0.8 2. test the examples at http://plugins.learningjquery.com/cluetip/demo/ and let me know if you encounter the problem there as well. I do not see any errors on the demo site. There *seems* to be a pattern where the elements are floated, it causes the problem -- I'm not 100% sure of this though. The problem is odd in that there seems to be a relationship between where the hint last appeared, and where it is displayed for a subsequent element. There are some elements on the page where the hint is consistently shown in the correct place (the element is non-floated, but lives within floated elements). If I then hover over a 'broken' element, the hint appears in the same 'top' position as the prior correctly shown hint; the left position is probably correct. Now, it gets stranger... if I hover over another element with the same class as the prior 'broken' element, the tip shows in the exact same location as the last 'broken' element, even though the two targets have very different 'top' positions. And finally, if I scroll one of the broken elements to the bottom of the viewport, the hint appears in the correct top position. Hope that helps :) btw, I switched to positionBy:'bottomTop', so this is not a problem for me right now. I'm happy to continue to help track the problem down though. 8] When shrinking the window, the hint for elements on the right side gets moved over to the center of the window, too far from the target element. I haven't come across this one before, but I'll play around with resizing and see if I can find/solve the problem. I suspect it's related to [7]. ~ ~ David
[jQuery] Re: What´s the name of this sintax
That is an outstanding explanation, thanks!
Michael Geary wrote:
From: Leandro Vieira Pinho
(function(){
...
})();
I would like to know, what´s the name of that sintax.
From: Josh Nathanson
Is that a closure?
Not exactly. One common use of the anonymous function called in place is
to create a closure, but this itself isn't a closure.
For example:
(function() {
var message = 'hello';
function test() { alert(message); }
test();
})();
test(); // fails
There's no closure here, because there are no references outside the
function to any of the function's local variables or local functions.
However, there is a local scope, so the call to test() outside the anonymous
function will fail (as expected).
var test1;
(function() {
var message = 'hello';
function test() { alert(message); }
test();
test1 = test;
})();
test1(); // succeeds
test(); // fails
Almost the same thing, but the test1 = test; statement creates a reference
to the test function *outside* the anonymous function. Now we have a
closure, where variables local to the function are preserved for later use
outside the function.
Basically, every function call creates a local scope. If the function
creates any references to its local variables or functions that are outside
the function, then a closure is created to save those variables. The closure
remains in existence as long as any of those references are kept.
This is true for named functions as well as anonymous functions - there's no
difference between the two.
People do often refer to a local scope as a closure, but it's not really
correct - a closure refers specifically to the situation where local
variables and local functions outlive the function call in which they were
created.
-Mike
[jQuery] OT: Page layout issues
Although I'm using jQ on this project, this particular issue is CSS related, not jQ related. I'm having a fairly minor layout problem, but I've been trying to resolve it forever, and getting no-where. Hopefully some can shed some light on the problem. Here's the URL: http://skidoo.solidgone.com/ Firefox and IE7 both display correctly. Problem(s): 1] Safari Opera: each tab seem to be shifted up 1px or so. I have no idea why this is shifting. 2] IE6: 2a] the whole tab-holder is shifted down 1px; 2b] there is a #FDFDFA bottom-border on selected tabs. I could fix [2a] shift problem using an IE6 specific padding-top of 10px, but the I suspect I have something wrong with the basic layout that's causing the problems in Safari and Opera. If not, then I have no issue using a browser specific fix. Technical: The primary CSS files being used are Skidoo.css, and color-darkblue.css. The main css elements are in the section labeled Tabs starting with class .tabHolder. Any insight is appreciated. ~ ~ Dave
[jQuery] Re: Plugin to get URL Parameters
I also came across this: http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1var2=2var3=3 Glen Lipka wrote: Answered my own question http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2 Sorry, Glen On 9/20/07, *Glen Lipka* [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: Is there a plugin to get all of the URL parameters and make them variables? (assuming its not already built in?) Glen
[jQuery] Re: OT: Hosting Service
I've been using asmallorange.com for a few years now, and have had nothing but good experience. Very cheap, as many add-ons/parked domains as you like. Pretty much the only restriction is bandwidth and disk space. ~ ~ Dave Glen Lipka wrote: I used to use Powweb, but the site was unbearably slow for me. Pings were 3x slower than anywhere else. So I switched to LunarPages. It has good speed, but the service fails every other day. (using siteUptime.com to check every 5 minutes) http://www.siteuptime.com/prem_statistics.php?Id=8892UserId=69056 http://www.siteuptime.com/prem_statistics.php?Id=8892UserId=69056 - LAME For the company site, I switched to MediaTemple. Good service, has not been down, with good speed. But It's too expensive for me personally and the Plesk UI makes me dizzy. Does anyone have a strong recommendation for a host? Requirements: 1. Wordpress 2. PHP 3. Free Parked Domains 4. Sub Domains 5. Fast 6. Reliable 7. Nice UI 8. Inexpensive. Anyone have experience with bluehost.com http://bluehost.com? Thanks, Glen
[jQuery] Re: document ready shortcut and scoping
Michael Geary wrote:
Ah, now I'm following you! I'm slow today.
Heh -- just remember, slow is relative :)
This will work:
var test;
jQuery ( function() { test = function() {alert('here')} } );
// and sometime later in your code, after document.ready fires
test(); // test is defined at this point...
It works indeed, thanks for the help.
~ ~ Dave
[jQuery] document ready shortcut and scoping
If I use the jQuery document.ready shortcut to delay the definition of a
javascript function test(), what is the correct way to reference test()?
This does not work:
jQuery ( function() { function test() {alert('here')} } );
test; // assume that test is defined at this point...
I thought it might be something like this, but no joy there either:
localJQ = jQuery ( function() { function test() {alert('here')} } );
localJQ.test;
~ ~ Dave
[jQuery] Re: document ready shortcut and scoping
Why would you want to delay the definition of a function?
I'm not really sure we need to, but it's basically some pre-existing
code. One of those rush things where we had a problem with the DOM not
being ready, and ended up blitzing all inline javascript with onready calls.
Erik Beeson wrote:
Why would you want to delay the definition of a function?
--Erik
On 8/28/07, DaveG [EMAIL PROTECTED] wrote:
If I use the jQuery document.ready shortcut to delay the definition of a
javascript function test(), what is the correct way to reference test()?
This does not work:
jQuery ( function() { function test() {alert('here')} } );
test; // assume that test is defined at this point...
I thought it might be something like this, but no joy there either:
localJQ = jQuery ( function() { function test() {alert('here')} } );
localJQ.test;
~ ~ Dave
[jQuery] Re: document ready shortcut and scoping
Erik Beeson wrote:
You should be fine defining your functions outside of document.ready.
I agree with your thought, but at this point in time we really want to
avoid having to retest the original DOM not ready problem that we fixed
with our code blitz -- it was very elusive, and very sporadic.
If your really want, you could do something like:
var myFunction;
$(document).ready(function() {
myFunction = function(param1, param2) {
};
...
});
Or:
$(document).ready(function() {
window.myFunction = function(...) {
};
...
});
Excellent, that works, thanks.
~ ~ Dave
[jQuery] Re: Nice jQuery writeup
IMO this should be prominently on the Jq site. This article explains the jQ way so well, it's invaluable. ~ ~ Dave Priest, James (NIH/NIEHS) [C] wrote: I didn't write this but saw it on Reddit while browsing at lunch: http://simonwillison.net/2007/Aug/15/jquery/ Jim
[jQuery] Re: Getting prev siblings
Thanks for the heads-up. I did use nextUntil, but did not know that page
was there -- contains some useful info.
~ ~ Dave
patcoll wrote:
jQuery 1.2 looks to have a prevUntil() function planned.
http://docs.jquery.com/JQuery_1.2_Roadmap#.nextUntil.28.29_.2F_.prevUntil.28.29
There's a sample for nextUntil there... copy it and change it for your
needs?
Pat
On Aug 6, 11:44 am, DaveG [EMAIL PROTECTED] wrote:
On Mon, 6 Aug 2007 08:14:28 -0700, Glen Lipka [EMAIL PROTECTED] wrote:
It would help if you put up a skeleton page somewhere to demonstrate the
challenge.
:)
Good point. Unfortunately, I can't do that right now, but here's a skeleton of
the issue:
h2 id=h2a class=h2Heading 2a/h2
h3 id=h3a class=h3Heading 3a/h3
h3 id=h3b class=h3Heading 3b/h3
h2 id=h2b class=h2Heading 2b/h2
In this case, I'd like to be able to do the following:
1] From #h2b, get the previous level 2 header (should return #h2a). Note,
this does not work: ('#h2b').prev('.h2')
2] From #h2b, get the previous level 3 header. (should return #h3b).
3] From #h2b, get the first level 3 header from the previous level 2 header (should
return #h3a).
Note, that this is a 'clean' sample. The real scenario has plenty of other DOM
objects between header levels.
~ ~ Dave
[jQuery] Re: Before automatically closes tags...?
Sam Collett wrote: Any chance that this will be added to the plugins page and SVN? It's a useful plugin that many may miss otherwise. patcol pointed me to this in another thread: jQuery 1.2 looks to have a prevUntil() function planned. http://docs.jquery.com/JQuery_1.2_Roadmap#.nextUntil.28.29_.2F_.prevUntil.28.29
[jQuery] Getting prev siblings
Is there a way to get the previous sibling of a specific class in the DOM (a) at the same level as the start point, and (b) at lower levels? .prev appears to obtain the sibling *only* if it's the immediate sibling in the DOM. It doesn't return the first previous matching sibling as one might expect. ~ ~ Dave
[jQuery] Re: Getting prev siblings
On Mon, 6 Aug 2007 08:14:28 -0700, Glen Lipka [EMAIL PROTECTED] wrote:
It would help if you put up a skeleton page somewhere to demonstrate the
challenge.
:)
Good point. Unfortunately, I can't do that right now, but here's a skeleton of
the issue:
h2 id=h2a class=h2Heading 2a/h2
h3 id=h3a class=h3Heading 3a/h3
h3 id=h3b class=h3Heading 3b/h3
h2 id=h2b class=h2Heading 2b/h2
In this case, I'd like to be able to do the following:
1] From #h2b, get the previous level 2 header (should return #h2a). Note,
this does not work: ('#h2b').prev('.h2')
2] From #h2b, get the previous level 3 header. (should return #h3b).
3] From #h2b, get the first level 3 header from the previous level 2 header
(should return #h3a).
Note, that this is a 'clean' sample. The real scenario has plenty of other DOM
objects between header levels.
~ ~ Dave
[jQuery] Re: Getting prev siblings
This should work... but it is a little wasteful as it performs the same
search on h2s over and over again. Another way (that I'm not sure will
work) is:
var h2cache = $('h2');
var prevIndex = h2cache.index( $('#h2b')[0] ) - 1;
h2cache.filter(':eq('+prevIndex+')');
This is *exactly* what I needed, and works as is! Thanks very much.
I'm not sure if there is an easier way... but I'm sure someone will
correct me if there is :)
If there is, that would be great, but your solution does the job.
~ ~ Dave
[jQuery] Before automatically closes tags...?
I'm trying to enclose sections of the dom with a DIV tag. Basically I want all
elements between headings (and including the top-most heading) enclosed in a
DIV.
My approach is to scan through the DOM, find a header tag, insert an opening
DIV tag, continue scanning until I hit the next header, close the prior div,
and open a new div tag. Thus:
h2heading 2a\h2
...html tags...
h3heading 3a\h3
...html tags...
h2heading 2b\h2
...html tags...
Becomes (indent added for clarity only):
div
h2heading 2a\h2
...html tags...
\div
div
h3heading 3a\h3
...html tags...
/div
div
h2heading 2b\h2
...html tags...
/div
I'm using .before to add the starting div tag, but it looks like .before
automatically closes open tags. I don't see any mention of this in the docs.
How would I go about adding an open ended tag to the DOM?
Alternately, is there a way of identifying each section between headers so I
can .wrap with a div?
Here's the code snippet:
var open = false;
$('#text').children().each(function(i) {
if( this.nodeName.match(/^H\d+$/) ) {
if (open) {
$(this).before('/div');
}
$(this).before('div class=xxx');
open = true;
}
});
[jQuery] Re: Before automatically closes tags...?
On Thu, 02 Aug 2007 15:55:20 -, Sam Collett [EMAIL PROTECTED] wrote: There is a plugin called nextUntil that you may be able to use. An example is available at http://dev.jquery.com/~john/jquery/test/nextuntil.html I hadn't seen that before. It's close, but not quite what I'm looking for, as I need to be able to specify a list of next elements: nextUnitl (h1,h2,h3...). I think amending the function to do that would be considerable work. What I'd really like is a way to insert dom elements without automatic closure taking place. I checked out jQ and didn't see a flag in the code; although to be honest I'm not sure I fully understood what's going on in there ;) ~ ~ Dave
[jQuery] Re: Before automatically closes tags...?
On Thu, 2 Aug 2007 13:56:25 -0400, John Resig [EMAIL PROTECTED] wrote:
I just made a quick tweak to .nextUntil() so that it can take a
comma-separated list of items. I updated the demo to reflect this as
well, for example:
$(h2).each(function(){
$(this).nextUntil(h1, h2).wrapAll(div class='note'/div);
});
--John
On 8/2/07, DaveG [EMAIL PROTECTED] wrote:
On Thu, 02 Aug 2007 15:55:20 -, Sam Collett [EMAIL PROTECTED]
wrote:
There is a plugin called nextUntil that you may be able to use. An
example is available at
http://dev.jquery.com/~john/jquery/test/nextuntil.html
I hadn't seen that before. It's close, but not quite what I'm looking
for, as I need to be able to specify a list of next elements: nextUnitl
(h1,h2,h3...). I think amending the function to do that would be
considerable work.
What I'd really like is a way to insert dom elements without automatic
closure taking place. I checked out jQ and didn't see a flag in the code;
although to be honest I'm not sure I fully understood what's going on in
there ;)
~ ~ Dave
[jQuery] Re: Before automatically closes tags...?
On Thu, 2 Aug 2007 13:56:25 -0400, John Resig [EMAIL PROTECTED] wrote:
I just made a quick tweak to .nextUntil() so that it can take a
comma-separated list of items. I updated the demo to reflect this as
well, for example:
$(h2).each(function(){
$(this).nextUntil(h1, h2).wrapAll(div class='note'/div);
});
--John
Not sure your patch works. Using:
$(h2,h3,h4,h5).each(function(){
$(this).nextUntil(h1,h2,h3,h4,h5).wrapAll(div class='xxx'/div);
});
I'd interpret this as saying wrap DOM elements between each header element.
That's not what appears to happen. It looks like it wraps from each header
element to the end of the dom. I think this line:
expr = expr[0];
may be the culprit...?
[jQuery] Re: Before automatically closes tags...?
On Thu, 02 Aug 2007 18:12:02 -, Stephan Beal [EMAIL PROTECTED] wrote: On Aug 2, 7:46 pm, DaveG [EMAIL PROTECTED] wrote: What I'd really like is a way to insert dom elements without automatic closure taking place. I checked out jQ and didn't see a flag in the code; although to be honest I'm not sure I fully understood what's going on in there ;) The automatic closure is happening due to HOW the functions like after() and before() are implemented. When you pass HTML to them, they use the browser-supplied DOM functions to create a miniature DOM tree. Your BROWSER is what creates the tree and gives jQuery back a well- formed DOM tree, which jQuery can than append/prepend/whatever to your existing DOM tree. This is, in fact, the only sane way to implement the behaviour, as implementing a full-fledged HTML parser into jQ would increase its size by several times. I was not suggesting that the way it's currently handled was wrong. I'd just like to be able to optionally not have the tag closed, since I want the closure to occur later in the DOM. If I had a means of 'grabbing' the whole block I needed, then the auto-closure would be fine in this case, but at this point I don't have a way to specify 'grab the dom elements between any header level and any other subsequent header level'.
[jQuery] Re: Determine DOM element based on mouse position
oliver wrote: I think you will need to wrap the paragraphs in some tag, p or span or something else. This approach seems the most doable -- I'd have to wrap the elements with jQ. Essentially I'd want to wrap all DOM elements between headers in a div tag. Anyone have suggestions of other more efficient ways to accomplish this? ~ ~ Dave
[jQuery] Determine DOM element based on mouse position
I need a way of determining a parent element of the element at the mouse position at the time of a double click. Specifically I'd need to find the 'parent' header (H1, H2, H3, etc) based on the DOM element that a user clicks on. Parent in this case being the closest header in the stack, since DOM elements are not children of header tags. Thus, in a document structure below, when the user clicks on paragraph 2, the h3 DOM element is returned, click on paragraph 3 and the second h2 is returned (where paragraphs are any valid DOM elements): h2 paragraph 1 h3 paragraph 2 h2 paragraph 3 Thinking about it, I may be able to bind mouse events to all paragraphs, and then determine the parent header -- problem there is the text under the header could be any valid html, not just paragraphs; alternately somehow find the mouse coordinates, and then the DOM element under those coordinates...? Suggestions and alternate approaches appreciated, ~ ~ Dave
[jQuery] Re: Determine DOM element based on mouse position
oliver wrote: I think 'previous sibling' is a good term for the element you are trying to find. Sibling is probably the right term. If you put a click handler on the parent of the paragraphs and the headers, and click on one of the paragraphs, the event.target is that parent object. I think you will need to wrap the paragraphs in some tag, p or span or something else. Then, the event.target will be a specific element, and you can navigate from that with $ (this).prev(h2) Therin lies two challenges. 1] I could put click handlers, but then I'd basically need to add a click handler to *every* DOM element on the page, as they could all be siblings of a heading tag. Probably better to put the click handler on document, and work out what the target was from mouse coords...? 2] Specifying multiple types of tag might be tricky in a consise way, since the statement below doesn't return an ordered list that gets me the very previous sibling: $(this).prev(h2, h3, h4, h5) I guess a simple loop would resolve that though. The mouse coords seems so clunky though. ~ ~ Dave
[jQuery] Re: Mootools
Reason I asked about Mootools is I love there slideshow. It allows doing the Ken Burns effects that was mentioned Nicolas last week. Check out this wicked class demo: http://www.electricprism.com/aeron/slideshow/ Wow -- that's a helluva plugin, and a *really* great demo. ~ ~ Dave
[jQuery] Re: How to Rotate an Image 90 Degrees
Looks like example 3 does the rotating you seek... weepy wrote: i've tried excanvas and it works very well indeed - amazing in fact when you think what its doing. it runs a bit slower on ie check some demos here : http://labs.parkerfox.co.uk/excanvas/examples/
[jQuery] Re: ANNOUNCE: Proposal for Site Submissions
In the spirit of jQ brevity, how about: Subject: site: http:\\xyz.com ~ ~ Dave On Mon, 18 Jun 2007 09:49:59 -0400, Rey Bango [EMAIL PROTECTED] wrote: Hey guys, I usually take care of site submissions and I do my best to stay on top of it. I've found that I've missed a couple of submissions to the list as they got mixed in with others and I just overlooked it. So I would like to propose a prefix for any site submissions that would allow me to create a message filter and catch them accordingly. I'm thinking something like this: SITE SUBMISSION: The rest of the subject line an example would be: SITE SUBMISSION: Please jQuery.com to the list of sites or SITE SUBMISSION: LearningjQuery.com uses jQuery Tell me what you think. Rey -- BrightLight Development, LLC. 954-775- (o) 954-600-2726 (c) [EMAIL PROTECTED] http://www.iambright.com
[jQuery] Re: SlickSpeed CSS Selector TestSuite
A lot is being made of how small jQ is. From the quick check I did, jQ compressed is 5k smaller than Prototype, and MooTools with a quick selection of the functions that seem to be in jQ was 27k, only 10k more than jQ. Considering the library is typically downloaded once and then cached, 5-10k is negligible. File size is important, but not when we're already down in the single digits for differences. Even low double digit difference aren't that significant. At this range of difference the only reason file size makes a difference is perhaps in understanding/reading the library code -- I suspect that's not something that many people do anyway. What is important is the perception of things like speed tests. People will make a library decision by eliminating the slower running, larger sized, libraries, and will deifniately steer clear of libraries that seem to fail tests. If correcting and improving those things adds a few bytes, then jQ is foimproved. As others have said, 'soft-factors' like ease of use, maintainability, documentation (and ability to find and access the documentation), and community are the keys. However, being at the bottom of the pile in speed, file size, etc, will form a barrier of entry that may override the 'soft-factors'. ~ ~ Dave On Tue, 12 Jun 2007 09:08:25 -0700, Glen Lipka [EMAIL PROTECTED] wrote: This topic comes up every time a speed test emerges. To me, speed is totally irrelevant in most circumstances that I use jQuery. Speed of Development is most important. if I can finish my job faster then the user will be happier. If they have to wait 1/10 of a second longer, they will not be heart broken. These tests are geeky comparisons of technical detail that is irrelevant to human beings. It's like video card comparisons that talk about speed of polygonal shading textures per billionth of a second. Apple just redesigned their site. On the inside they use Scriptaculous/Prorotype. Check http://www.apple.com/mac. Notice the file size, 772k! That is humongous. Does it matter what the script is at that point? So with that said, although I do like jQuery small, I don't think it makes a difference whether its 20k or 50k. In the tradeoff's, I think you need to find out how much major improvements in speed will really cost? Is it really 10k more? Can it be a plugin? I have no idea. I am just saying, I am not concerned with file size up to 50k. My only concern is about ease of use and maintainability. As long as jQuery has that, then all these tests miss the point. Glen On 6/12/07, Robert O'Rourke [EMAIL PROTECTED] wrote: Rey Bango wrote: Hi Robert, Thats precisely the reason that its slower. We continue to work on providing the most comprehensive functionality in the smallest package. This is one of the drawbacks of that approach. Rey... Robert O'Rourke wrote: Is Jquery slower because it's more compact then? ie. better for light usage? I much prefer the syntax and the community around jquery. I never got any helpful responses from anyone on the mootools forum when I was using that library. Righto, cheers Rey. I'm definitely sticking with jquery as a tool of choice but I wonder, seeing as how mootools is modular couldn't someone just take that selector code snippet and write a plugin to make it spit out the jquery object? Rob
[jQuery] jQuery and Prototype Conflicts
I'm using prototype and jQ on the same page. I'm using noConflict(). script src=/javascripts/jquery.js type=text/javascript/script script type=text/javascript jQuery.noConflict(); /script Everything is happy. Until I use prototypes Ajax.Update(). The response is a bunch of javascript calls that include calls to prototype routines, like Element.show(). It seems that I need to include a call to noConflict() at the start of the response, otherwise $ does not point to prototype. Am I doing something fundamentally wrong here? Why do I need subsequent calls to noConflict()? ~ ~ Dave
[jQuery] Re: jQuery and Prototype Conflicts
Okay, it turns out that I initially had noConflict() within a function on .ready. This turns out to be a bad idea. Moving noConflict() inline, below the library include (as below) works fine, and prevents the need to load noConflict() multiple times. ~ ~ Dave DaveG wrote: Unfortunately this is on an internal environment, and I can't create an external test file -- I don't have access to a server environment that Ajax.update can call. I know, that's not much help, sorry :) ~ ~ Dave Brandon Aaron wrote: You shouldn't need to call noConflict more than once. Could you post up an example? -- Brandon Aaron On 6/1/07, *DaveG* [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: I'm using prototype and jQ on the same page. I'm using noConflict(). script src=/javascripts/jquery.js type=text/javascript/script script type=text/javascript jQuery.noConflict(); /script Everything is happy. Until I use prototypes Ajax.Update(). The response is a bunch of javascript calls that include calls to prototype routines, like Element.show(). It seems that I need to include a call to noConflict() at the start of the response, otherwise $ does not point to prototype. Am I doing something fundamentally wrong here? Why do I need subsequent calls to noConflict()? ~ ~ Dave
[jQuery] Re: Best way to do horizontal sub-menus...
I've used this non-jQ version in the past with good success: http://www.twinhelix.com/dhtml/popupmenu/ He also has a newer version, which I've not used: http://www.twinhelix.com/dhtml/fsmenu/ ~ ~ Dave Rick Faircloth wrote: Hi, again, Olaf... Both of the approaches you mentioned get me started with some coding ideas, but both utilize drop-down submenus. What I'm after is a first-level horizontal menu that when a link is moused-over, another *horizontal menu appears. Perhaps it's just a matter of styling the submenu via css? Rick -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Olaf Bosch Sent: Thursday, May 31, 2007 2:44 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Best way to do horizontal sub-menus... Rick Faircloth schrieb: Well, I've finally given in and after 10 years of web design, I'm ready to create my *first* horizontal menus. What, is this true!? ;) jQuery? CSS? Combination? right, this are may favorit (without JQuery): http://www.htmldog.com/articles/suckerfish/dropdowns/ this with JQuery: http://be.twixt.us/jquery/suckerFish.php
[jQuery] Re: Best way to do horizontal sub-menus...
Have you styled these into horizontal menus, for both primary and secondary menus? Using the popupmenu, yes, I have done this. Also, he has an example of a horizontal top-level CSS menu (look at the pulldown list top right on the examples page). I suspect it would be trivial to do a second-level horizontal as well. ~ ~ Dave Rick -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of DaveG Sent: Thursday, May 31, 2007 7:52 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Best way to do horizontal sub-menus... I've used this non-jQ version in the past with good success: http://www.twinhelix.com/dhtml/popupmenu/ He also has a newer version, which I've not used: http://www.twinhelix.com/dhtml/fsmenu/ ~ ~ Dave Rick Faircloth wrote: Hi, again, Olaf... Both of the approaches you mentioned get me started with some coding ideas, but both utilize drop-down submenus. What I'm after is a first-level horizontal menu that when a link is moused-over, another *horizontal menu appears. Perhaps it's just a matter of styling the submenu via css? Rick -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Olaf Bosch Sent: Thursday, May 31, 2007 2:44 AM To: jquery-en@googlegroups.com Subject: [jQuery] Re: Best way to do horizontal sub-menus... Rick Faircloth schrieb: Well, I've finally given in and after 10 years of web design, I'm ready to create my *first* horizontal menus. What, is this true!? ;) jQuery? CSS? Combination? right, this are may favorit (without JQuery): http://www.htmldog.com/articles/suckerfish/dropdowns/ this with JQuery: http://be.twixt.us/jquery/suckerFish.php
[jQuery] .ready and javascript library loading
Does $(document).ready ensure that all javascript libraries are loaded in addition to the DOM being ready? I have a case on a very slow network connection, where a call to a library function is made seemingly before the library is loaded. ~ ~ Dave
[jQuery] Finding first text element
How do I find the first text-node of a given DOM object? Input: divphere is/p some text/div Output: some text Input: h1a href=#id1/aHeader 1/h1 Output: Header 1 ~ ~ Dave
[jQuery] Re: Finding first text element
Indeed it is, thanks. I worked that out after posting -- I figured it had to be
something incredibly complicated ;)
~ ~ Dave
On Tue, 29 May 2007 14:56:58 -0500, Jonathan Sharp [EMAIL PROTECTED] wrote:
I believe it's something like $('div').text();
-js
On 5/29/07, DaveG [EMAIL PROTECTED] wrote:
How do I find the first text-node of a given DOM object?
Input: divphere is/p some text/div
Output: some text
Input: h1a href=#id1/aHeader 1/h1
Output: Header 1
~ ~ Dave
[jQuery] Re: Finding first text element
Actually, I withdraw that. .text() returns the text of all nodes combined (in
example 1: here is some text).
~ ~ Dave
On Tue, 29 May 2007 15:57:55 -0400, DaveG [EMAIL PROTECTED] wrote:
Indeed it is, thanks. I worked that out after posting -- I figured it had
to be something incredibly complicated ;)
~ ~ Dave
On Tue, 29 May 2007 14:56:58 -0500, Jonathan Sharp [EMAIL PROTECTED]
wrote:
I believe it's something like $('div').text();
-js
On 5/29/07, DaveG [EMAIL PROTECTED] wrote:
How do I find the first text-node of a given DOM object?
Input: divphere is/p some text/div
Output: some text
Input: h1a href=#id1/aHeader 1/h1
Output: Header 1
~ ~ Dave
[jQuery] Re: Finding first text element
I didn't find a way to do this yet, but I did discover a way to crash my browser: Warning: locks up FF2 Input: div id=id1phere is/p some text/div jQ: $(#id1).text() I also discovered a way to get the text of the first element: Input: div id=id1phere is/p some text/div jQ: $(#id1).text() Output: here is ~ ~ Dave On Tue, 29 May 2007 15:48:30 -0400, DaveG [EMAIL PROTECTED] wrote: How do I find the first text-node of a given DOM object? Input: divphere is/p some text/div Output: some text Input: h1a href=#id1/aHeader 1/h1 Output: Header 1 ~ ~ Dave
[jQuery] Re: jQuery on Rails-related
Is there a post which has more details somewhere? Yehuda Katz wrote: Hey guys, Great news! Hpricot has accepted my patches to make hpricot compatible with jQuery, which means you'll only need to checkout the latest hpricot from svn to use jQuery on Rails. -- Yehuda Katz Web Developer | Wycats Designs (ph) 718.877.1325
[jQuery] Re: Drop shadows and Tooltips
Thanks for the pointer to the new version. Cured all known conflicts with prototype. ~ ~ Dave Brandon Aaron wrote: Perhaps I can help fix any issues that dimensions.js might be having working along side prototype. Could you shed some light on what is breaking? You can get the latest version here: http://jquery.com/plugins/project/dimensions -- Brandon Aaron On 5/23/07, DaveG [EMAIL PROTECTED] wrote: That one looks pretty neat, but it uses dimensions.js, which *appears* not to work well with Prototype. Anyone else using drop-shadows with tooltips? ~ ~ Dave Alexandre Plennevaux wrote: You should check clueTip out, it's really great: http://examples.learningjquery.com/62/ As for the drop shadow effect, i used the one delivered with clueTip, and simply resize it tremendously so as to accomodate any (reasonable) size. -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of DaveG Sent: mardi 22 mai 2007 23:09 To: jquery-en@googlegroups.com Subject: [jQuery] Drop shadows and Tooltips Has anyone managed to create a dynamically resizing drop-shadow effect for the tooltips plugin (http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/) that they could share? The sample on the website looks good but is a static size (ie, does not change size based on the content-length). Thanks, ~ ~ Dave Ce message Envoi est certifié sans virus connu. Analyse effectuée par AVG. Version: 7.5.467 / Base de données virus: 269.7.6/814 - Date: 21/05/2007 14:01
[jQuery] Re: Drop shadows and Tooltips
That one looks pretty neat, but it uses dimensions.js, which *appears* not to work well with Prototype. Anyone else using drop-shadows with tooltips? ~ ~ Dave Alexandre Plennevaux wrote: You should check clueTip out, it's really great: http://examples.learningjquery.com/62/ As for the drop shadow effect, i used the one delivered with clueTip, and simply resize it tremendously so as to accomodate any (reasonable) size. -Original Message- From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of DaveG Sent: mardi 22 mai 2007 23:09 To: jquery-en@googlegroups.com Subject: [jQuery] Drop shadows and Tooltips Has anyone managed to create a dynamically resizing drop-shadow effect for the tooltips plugin (http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/) that they could share? The sample on the website looks good but is a static size (ie, does not change size based on the content-length). Thanks, ~ ~ Dave Ce message Envoi est certifié sans virus connu. Analyse effectuée par AVG. Version: 7.5.467 / Base de données virus: 269.7.6/814 - Date: 21/05/2007 14:01
[jQuery] Drop shadows and Tooltips
Has anyone managed to create a dynamically resizing drop-shadow effect for the tooltips plugin (http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/) that they could share? The sample on the website looks good but is a static size (ie, does not change size based on the content-length). Thanks, ~ ~ Dave
[jQuery] Re: Disabling Tooltips + Tooltip Text
Jörn Zaefferer wrote:
DaveG wrote:
What I'd really like to do is maintain an array of tips, and
selectors, and then iterate through that calling Tooltip. I can do
that with the syntax above.
No, that won't work. The bodyHandler is supposed to be a callback
function that is called whenever a tooltip is to be displayed. On the
other hand, it would be easy to check if it is a string and use that
as the body.
Is there another parameter that parses out the title and the body
based on a : delimiter? I thought I read a post regarding that (of
course, now I can't find the post).
So what I'm looking for, basically, is a way to pass the tooltip text
in via a parameter, rather than from the 'title'. This will let me
maintain all tooltip text in a single place -- an array of
tips/selectors.
Could you provide some pseudo-code how you'd like to work with that? I'm
especially interested in the data format you're using, with the idea in
mind, that you can achieve what you want with the existing features. I
just need to take a look at your data to give you the right idea.
Something like:
$(...).Tooltip({body: some text for a hint -- no title needed});
$(...).Tooltip({body: some text for another hint.});
Of course, as I started playing around it occured to me that:
$(...).attr(title, some text for a hint -- no title
needed).Tooltip();
should work equally well. I'll do a quick test tonight.
~ ~ Dave
NB: Some specific samples:
'Drag and drop the item image into the xyz or press the \'xyz\' button
to add items.'
'Click on \'Save This Search\' to add your current search to your saved
search list. Any searches in your Saved Searches can be used again
without you having to remember all of the details. Just click the Saved
Search name!'
'Click here to save your search'
[jQuery] Re: Disabling Tooltips + Tooltip Text
I think my idea when asking for the data was if there is a link between
elements and their tooltips that can be used to automate the
association. You could have an object of key/value pairs, each key being
the same as an ID or class on an element, and the value containing the
value to display as a tooltip.
That was my thinking as well, and the idea behind the array of objects.
Something like:
x = [
{#id,tip1},
{id2,tip2},
...
];
for (var i = 0; ilength(x); i++;)
$(x[i].[0]).Tooltip({body: x[i].[1]});
Although my code array references aren't right, the idea is there.
~ ~ Dave
[jQuery] Re: Disabling Tooltips + Tooltip Text
Just as an aside, the version of the tooltip library in the SVN
repository (and the used as a download from your website) is 2.0 Alpha.
This version does not work with your demo page. You might want to note
that on the Tooltip pages.
~ ~ Dave
DaveG wrote:
I think my idea when asking for the data was if there is a link
between elements and their tooltips that can be used to automate the
association. You could have an object of key/value pairs, each key
being the same as an ID or class on an element, and the value
containing the value to display as a tooltip.
That was my thinking as well, and the idea behind the array of objects.
Something like:
x = [
{#id,tip1},
{id2,tip2},
...
];
for (var i = 0; ilength(x); i++;)
$(x[i].[0]).Tooltip({body: x[i].[1]});
Although my code array references aren't right, the idea is there.
~ ~ Dave
[jQuery] Compatibility (jQ + Libraries) + (Prototype + Libraries)
According to the Compatibility page (http://docs.jquery.com/Using_jQuery_with_Other_Libraries) it's possible to redefine $ to something else to avoid conflicts with Prototype. Thus all your jQ code will now use myjQ. prefix rather than $. How will this work if you're also using jQ libraries, which are clearly expecting jQ to be on $. Is it possible? Other examples on the page seem to indicate that you can rebind $ from Prototype to jQ. However the examples all seem to embed jQ code within .ready -- I'm not sure what significance that has. Why is this critical -- or do we just need to make sure jQ has loaded? Is binding to a specfic $ fn done at load time? I guess, the Conflicts page is not very clear -- I'm happy to rewrite/add to the page, if someone can help me understand first. The scenario is that we're working on a fairly large Ruby implementation, and prototype was the first choice of js library. The availability of small and quick libraries has made us want to use jQ. So we'll start to selectively migrate away from Prototype to jQ. Clearly not going to happen all at once, so for a time we'll be using Prototype+libraries, and jQ+libraries. I'm presuming this is doable, since WP is in the process of migrating... ~ ~ Dave
[jQuery] Re: Disabling Tooltips + Tooltip Text
A global switch/method to turn tooltips on/off, or a method on the jQuery object you used to apply the tooltip? Either this: $.Tooltip.on(); $.Tooltip.off(); This would be better for me as I then don't have to track all the tips. I simply need a way to turn on/off all tips. Ok, I'll add that. Excellent, thanks. What I'd really like to do is maintain an array of tips, and selectors, and then iterate through that calling Tooltip. I can do that with the syntax above. No, that won't work. The bodyHandler is supposed to be a callback function that is called whenever a tooltip is to be displayed. On the other hand, it would be easy to check if it is a string and use that as the body. Is there another parameter that parses out the title and the body based on a : delimiter? I thought I read a post regarding that (of course, now I can't find the post). So what I'm looking for, basically, is a way to pass the tooltip text in via a parameter, rather than from the 'title'. This will let me maintain all tooltip text in a single place -- an array of tips/selectors. ~ ~ Dave
[jQuery] Re: Compatibility (jQ + Libraries) + (Prototype + Libraries)
That's excellent info Erik, thanks. Erik Beeson wrote: jQuery plugins are designed to deal with this situation. See this section of the plugin authoring page: http://docs.jquery.com/Plugins/Authoring#Custom_Alias_in_plugin_code Also, this this thread from earlier this evening: http://groups.google.com/group/jquery-en/browse_thread/thread/2e3baab6b98b1894/ef15211a2832a2e7#ef15211a2832a2e7 --Erik On 5/18/07, DaveG [EMAIL PROTECTED] wrote: According to the Compatibility page (http://docs.jquery.com/Using_jQuery_with_Other_Libraries) it's possible to redefine $ to something else to avoid conflicts with Prototype. Thus all your jQ code will now use myjQ. prefix rather than $. How will this work if you're also using jQ libraries, which are clearly expecting jQ to be on $. Is it possible? Other examples on the page seem to indicate that you can rebind $ from Prototype to jQ. However the examples all seem to embed jQ code within .ready -- I'm not sure what significance that has. Why is this critical -- or do we just need to make sure jQ has loaded? Is binding to a specfic $ fn done at load time? I guess, the Conflicts page is not very clear -- I'm happy to rewrite/add to the page, if someone can help me understand first. The scenario is that we're working on a fairly large Ruby implementation, and prototype was the first choice of js library. The availability of small and quick libraries has made us want to use jQ. So we'll start to selectively migrate away from Prototype to jQ. Clearly not going to happen all at once, so for a time we'll be using Prototype+libraries, and jQ+libraries. I'm presuming this is doable, since WP is in the process of migrating... ~ ~ Dave
[jQuery] Disabling Tooltips + Tooltip Text
1] I'd like to make a request to have a flag to turn off all tool-tips (http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/). The easiest way to do this might be to retain existing object events, and simply put a flag in the code to not process tip events. Alternately is there a simple way to identify all tip events and remove them? 2] Is there a way to send in the tool-tip text as a parameter rather than relying on the Title attribute? The reason I'd like to do this is to source all tip text in a central location. ~ ~ Dave
[jQuery] Re: Getting the full class set of the current object
Am I just going the wrong way? Should I switch to normal loop, or an
each loop? Comments?
$(.a)
.each(function(i){
$(this).wrap('div class=outter ' +$(this).attr(class)+
'/div')
.removeClass().addClass(z);
});
Here's my attempt. It works. Is there a better/different way, perhaps
not using the each, but simply chaining?
[jQuery] Re: Keyboard shortcuts
Did you get a chance to work on this? No hurry, I'd just like to use it if it's available. ~ ~ Dave Gilles (Webunity) wrote: Yes i've ported this to jQuery, i'll add it to SVN tonight. It has thesame options as the keyboard_shortcuts, but i've improved (cleaned up) the code a lot. You can bind any combination you want.
[jQuery] Re: Google AJAX Feed API
In very basic terms you can pretty much substitute the word join or combine for mash-up. Thus, in this case we're combining RSS feeds from multiple sources into a single presentation. ~ ~ Dave On Fri, 20 Apr 2007 11:25:54 -0500, Christopher Jordan [EMAIL PROTECTED] wrote: So by mashing you mean supplying multiple feeds from different domains? Maybe I should just google mashing feeds or feed mashing defined or something. Chris Mike Alsup wrote: Hi Chris, Typically you need a server-side component to pull off a mashup because you're combining content from multiple sources. JavaScript employs a same origin policy to prevent XHR requests to foreign domains so you need to do your mashing on the server. But with this new Google API you can mash feed urls on the client because they're providing the server-side logic for you. Thanks, Google! Mike Can you explain what you mean by mashing feeds on the client? I'm not really well versed in RSS feeds (which is what I'm assuming you mean by feeds) so I'm interested in what this means.
[jQuery] jQ Site
Not sure where we're supposed to submit jQ sites, but here's http://www.e-texteditor.com/ -- looks like a cool text editor too. ~ ~ Dave
[jQuery] Re: Remembering settings
How about using something like this: http://www.lalit.org/lab/jsoncookies/ It's not jQ based, but it may offer a good way to store/retrieve the amount of data you're looking at. ~ ~ Dave On Wed, 18 Apr 2007 15:52:48 -, Trekmp [EMAIL PROTECTED] wrote: Thanks to both of you for your advice. I'm not just wanting to store if an element is open/closed, I need to be able to do something like google where I can move objects around and remember where they are and what their status is (open/closed). I'm no javascript programmer so is it possible you can elborate some more with regards to the cookies, using jquery, setting and reading. When would be the best time to set the cookie for the objects. Many thanks again for your help On Apr 17, 7:08 pm, Benjamin Sterling [EMAIL PROTECTED] wrote: Piggie backing off of what Rafael said, you can take the params for each thing and put that in a cookie and when you do you $(document).ready, have a function that looks at the cookie and gets the params. Say you have a menu that the user wants hidden: menuParams:hidden; and when you come in to the page, it looks for the menuParams and sees if it is set and what the value is. -- Benjamin Sterlinghttp://www.KenzoMedia.comhttp://www.KenzoHosting.com
[jQuery] Re: jQuery Powered Sites - More Sites Added.
http://www.dzone.com/ looks like it's jQ enabled as well. ~ ~ Dave On Apr 10, 10:33 am, Rey Bango [EMAIL PROTECTED] wrote: Added: - GameGum Free Flash Games - ToonGum ToonGum is a flash cartoon community. View, submit, and interact with our many flash cartoons and large community. - Penumbra:Overture Penumbra: Overture is a first person adventure game which focuses on story, immersion and puzzles. Keep the sites coming guys! Rey... --
[jQuery] Re: Multiple .bind
Thanks for the workaround, and the patch!
Jesse Skinner wrote:
I've just submitted a patch to fix this, but in the meantime you can use
an anonymous function (as I just described in another message) like so:
function tocDisplay(e){
$('#toc_content')[e.data.mode]();
}
$('#toc_header').bind('click', {mode: 'toggle'}, function(e){
tocDisplay(e);
});
$('#toc_content a').bind('click', {mode: 'hide'}, function(e){
tocDisplay(e);
});
[jQuery] Re: Updated plugin: jqTOC -- table of contents
The only other (and extremely minor) thing I could think of, as far as feedback for you, is the situation where the browser's viewport height is less than the content ment's height. If that happens there is no way to get to the bottom of the menu. I'm not sure of the best way to remedy that. It is possible the content div could have a container with a height of 100%, and then the menu itself would live inside the container with an overflow of auto. I noticed that, and took a quick attempt at fixing it, but didn't get far. I'll try your idea, and see what I get. The other thing I need to fix is IE6 support for fixed positioning. ~ ~ Dave
[jQuery] Re: Updated plugin: jqTOC -- table of contents
The other thing I need to fix is IE6 support for fixed positioning. IE6 now works, and 5 *should* work.
[jQuery] Re: Updated plugin: jqTOC -- table of contents
It might be nice to have an autohide type behavior after x seconds on that Content menu. Basically a delay on closing after clicking? Not sure that would be to intuitive. A delay on closing after mouse out might make sense though. I was considering triggering on mouse over, so that might work well.
[jQuery] Multiple .bind
I'm binding a click function. If I include either one of the binds it
works -- so the syntax and object references are correct.
If I include both binds they do not work. No errors, they just don't
trigger.
function tocDisplay(e){
$('#toc_content')[e.data.mode]();
}
$('#toc_header').bind('click', {mode: 'toggle'}, tocDisplay);
$('#toc_content a').bind('click', {mode: 'hide'}, tocDisplay);
Is there a problem binding the same function to multiple objects?
~ ~ Dave
[jQuery] Re: Table of Contents (TOC) plugin
Thanks for the code links. I didn't work on the positioning yet, but
your samples will help. I did take a quick look, and the current
absolute positioning is complicated here because the position of the TOC
is dynamic based on the parameter'ed width. I'm not sure fixed
positioning will be possible or not based on the changeable width.
I couldn't work out specifically why the old selector did not work, but
I a quick search came up with a new style that seems to function fine,
using .children(). If there's a better or more efficient selector,
advice would be welcomed.
Here's the core of my updated version (link to full:
http://solidgone.com/jquery/jqpagecontent.htm):
var t = $('#toc_content');
this.children().each(function(i) {
var headerLevel = this.nodeName.substr(1,1);
if(this.nodeName.match(/^H\d+$/) headerLevel = settings.tocStart
headerLevel = settings.tocEnd) {
var headerId = this.id || 'link' + i;
t.append('a href=#'+ headerId +' ' +
(headerLevel != settings.tocStart ? 'class=indent
style=margin-left: ' + (headerLevel-settings.tocStart)*15 +'px;' : '') +
''+ $(this).html() +'/a');
this.id = headerId;
}
});
It adds two new settings, specifying the heading levels at which to
start and stop building.
~ ~ Dave
Joel Birch wrote:
On 15/04/2007, at 6:39 AM, DaveG wrote:
Does anyone have any insight into what happened, or alternatively is
there an alternate TOC plugin somewhere?
I made a contentMenu plugin that does something very similar to this
from what I can tell. Here is the basic code - sorry, no demo page or
documentation but the code is very short and hopefully easy to understand.
http://users.tpg.com.au/j_birch/plugins/jquery.contentMenu.js
You can pass in options to specify where the menu (TOC) is injected into
the document. With that in mind, inspired by a suggestion from Klaus
Hartl, I have used this plugin to append the menu to the body element
and set its position to 'fixed' so that it floats in place in the window
similar to the TOC plugin you pointed to. I wrapped all this up in its
own plugin called contentMenuDrawer and also used a whole bunch of other
plugins to further enhance the functionality (scrollTo, hoverIntent,
jqEm). If you want to do something similar, you can see this in action
at the following url (content of the page is irrelevant to this topic).
http://users.tpg.com.au/j_birch/plugins/superfish/
The relevant code I used for this is here:
http://users.tpg.com.au/j_birch/plugins/superfish/demoPage.js
Everything in that file is relevant except for the bgIframe plugin which
is used for an unrelated purpose.
I have not added fixed positioning support for IE6 so it fails silently
in that browser. It should be easy to add support if you wanted to.
I just thought this may be of some use to you. Good luck.
Joel Birch.
[jQuery] Updated plugin: jqTOC -- table of contents
I've updated the existing plugin to work with the latest version of jQuery. In addition to being more compact, the code now: - uses fixed positioning - parameterized starting and ending header levels - parameterized TOC container Code and example is http://solidgone.com/jquery/jqTOC/jqTOC.htm. Feedback on code and functionality are welcomed. ~ ~ Dave
[jQuery] Table of Contents (TOC) plugin
The TOC plugin listed on the plugins page seems not to work correctly with the latest version of jQuery. It shows only the first occurrence of the first heading level. Does anyone have any insight into what happened, or alternatively is there an alternate TOC plugin somewhere? Test page (linked to latest jQuery): http://solidgone.com/jquery/jqpagecontent.htm Original plugin: http://dimitarspassov.googlepages.com/jqpagecontent ~ ~ Dave
[jQuery] Round corners and jQ conversion help
I'd like some improvements feedback and some verification of my
attempt to jQueryize the code here
http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/
What I have seems to work just fine, but I'm concerned that I'm not
reading the original correctly.
Here's what the original code does: transforms all DIVs with the class
cbb into this structure:
div class=cb original_class
div class=bt
div class=i1
div class=i3
div id=original class=i3 original_class
div class=bb
I'm confused as to why the original copies the original DIV classes to
the outer cb class. My version does not do that, and seems to have
no ill effects. What's the best way to change my version to do this,
if necessary?
Here's my jQ version:
function initCB(){
$(div.cbb).wrap('div class=cbdiv class=i1'+
'div class=i2/div/div/div')
.toggleClass(cbb).addClass(i3);
$('div.cb')
.prepend('div class=btdiv/div/div')
.append('div class=bbdiv/div/div');
}
Here's the important part of the original:
function initCB()
{
// Find all div elements
var divs = document.getElementsByTagName('div');
var cbDivs = [];
for (var i = 0; i divs.length; i++) {
// Find all div elements with cbb in their class attribute while
allowing for multiple class names
if (/\bcbb\b/.test(divs[i].className))
cbDivs[cbDivs.length] = divs[i];
}
// Loop through the found div elements
var thediv, outer, i1, i2;
for (var i = 0; i cbDivs.length; i++) {
// Save the original outer div for later
thediv = cbDivs[i];
// Create a new div, give it the original div's class attribute,
and
replace 'cbb' with 'cb'
outer = createElement('div');
outer.className = thediv.className;
outer.className = thediv.className.replace('cbb', 'cb');
// Change the original div's class name and replace it with the new
div
thediv.className = 'i3';
thediv.parentNode.replaceChild(outer, thediv);
// Create two new div elements and insert them into the outermost div
i1 = createElement('div');
i1.className = 'i1';
outer.appendChild(i1);
i2 = createElement('div');
i2.className = 'i2';
i1.appendChild(i2);
// Insert the original div
i2.appendChild(thediv);
// Insert the top and bottom divs
insertTop(outer);
insertBottom(outer);
}
}
~ ~ Dave
- - - - - - - - - - -
Here's the original support functions for reference:
function createElement(element) {
if (typeof document.createElementNS != 'undefined') {
return document.createElementNS('http://www.w3.org/1999/xhtml',
element);
}
if (typeof document.createElement != 'undefined') {
return document.createElement(element);
}
return false;
}
function insertTop(obj) {
// Create the two div elements needed for the top of the box
d=createElement(div);
d.className=bt; // The outer div needs a class name
d2=createElement(div);
d.appendChild(d2);
obj.insertBefore(d,obj.firstChild);
}
function insertBottom(obj) {
// Create the two div elements needed for the bottom of the box
d=createElement(div);
d.className=bb; // The outer div needs a class name
d2=createElement(div);
d.appendChild(d2);
obj.appendChild(d);
}
