[jQuery] Re: $(document).ready() vs $(function () {});
Both are exactly the same, the first one is just a shorter way to write and
one step further in fast development with jQuery
On Tue, Oct 21, 2008 at 6:56 AM, Shawn <[EMAIL PROTECTED]> wrote:
>
> I am seeing more and more references to using the $(function() {}); format
> for
> the ready method. Is there a compelling reason for this? Or will
> $(document).ready() perform as well?
>
> Or perhaps I'm mis-understanding what the newer format is being used for?
>
> Thanks for any tips.
>
> Shawn
>
--
Isaak Malik
Web Developer
[jQuery] $(document).ready() vs $(function () {});
I am seeing more and more references to using the $(function() {}); format for
the ready method. Is there a compelling reason for this? Or will
$(document).ready() perform as well?
Or perhaps I'm mis-understanding what the newer format is being used for?
Thanks for any tips.
Shawn
[jQuery] Help optimising jquery code - there must be a better way
I am relatively new to jquery, but have managed to muddle my way through a
complicated navigation design that has overlapping selected states, eg with
menu items 1,2,3,4 and 5, when item 2 is selected, the images for items 1
and 3 also have to change.
The code is long and convoluted, and I am sure there is a cleaner way to do
what I am doing. If anyone has any ideas, that would be great.
Here's the code:
// setup before and after classes
$(".current_page_item").next().addClass('after');
$(".current_page_item").prev().addClass('before');
$(".current_page_ancestor").next().addClass('after');
$(".current_page_ancestor").prev().addClass('before');
// do overlapping images
$("#primary_nav a").hover(
function() {
if ((!$(this).parent().hasClass('current_page_ancestor')) &&
(!$(this).parent().hasClass('current_page_item'))) {
$(".current_page_item").next().removeClass('after');
$(".current_page_item").prev().removeClass('before');
$(".current_page_item").addClass("current_disabled");
$(".current_page_ancestor").next().removeClass('after');
$(".current_page_ancestor").prev().removeClass('before');
$(".current_page_ancestor").addClass("current_disabled");
}
},
function() {
$(".current_disabled").next().addClass('after');
$(".current_disabled").prev().addClass('before');
$(".current_disabled").removeClass("current_disabled");
}
);
$("#page_item_2 a").hover(
function() {
$("#page_item_5").addClass('after');
},
function() {
if (!$(this).parent().hasClass('current_page_item')) {
$("#page_item_5").removeClass('after');
}
}
);
$("#page_item_5 a").hover(
function() {
$("#page_item_2").addClass('before');
$("#page_item_7").addClass('after');
},
function () {
if ((!$(this).parent().hasClass('current_page_ancestor')) &&
(!$(this).parent().hasClass('current_page_item'))) {
$("#page_item_2").removeClass('before');
$("#page_item_7").removeClass('after');
}
}
);
$("#page_item_7 a").hover(
function() {
$("#page_item_5").addClass('before');
$("#page_item_9").addClass('after');
},
function () {
if (!$(this).parent().hasClass('current_page_item')) {
$("#page_item_5").removeClass('before');
$("#page_item_9").removeClass('after');
}
}
);
$("#page_item_9 a").hover(
function() {
$("#page_item_7").addClass('before');
$("#page_item_11").addClass('after');
},
function () {
if (!$(this).parent().hasClass('current_page_item')) {
$("#page_item_7").removeClass('before');
$("#page_item_11").removeClass('after');
}
}
);
$("#page_item_11 a").hover(
function() {
$("#page_item_9").addClass('before');
},
function () {
if (!$(this).parent().hasClass('current_page_item')) {
$("#page_item_9").removeClass('before');
}
}
);
By way of explanation, this is using the css sprites method where I have a
single image that is all the different states of the nav. The 'before' and
'after' classes are used to indicate the nav items either side of the
selected item. 'current_page_item' and 'current_page_ancestor' are what
WordPress uses to indicate the selected item, or the parent of the selected
item. I am using 'current_disabled' to disable the 'current_page_item'
style, so when you rollover the other nav items they highlight.
If there were some way to combine those if statements, say into a
switch/case statement, that'd be cool. Not sure if there's anything else
that can be done.
--
View this message in context:
http://www.nabble.com/Help-optimising-jquery-code---there-must-be-a-better-way-tp20082703s27240p20082703.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: BUG: oversized overlay in IE web browsers ( demo included )
Thanks for the reply, Josh... but that isn't the problem. To
demonstrate, I updated my demo according to your suggestion:
http://74.205.76.81/blockuitest/
Even if that WAS the solution, it would force people to zero out their
body padding and margins. Not a problem for most, but inconvenient for
many. If you consider IE important, it's a blockUI bug.
Any other takers? Here's how Boxy's author fixed it (in his own
words):
"I've added a separate sizing method specifically for IE6 which uses
the viewport dimensions instead of the document, and repositions on
scroll as well as on resize. I tried using this approach for all
browsers but Firefox was having none of it."
JR
On Oct 20, 4:09 pm, "Josh Nathanson" <[EMAIL PROTECTED]> wrote:
> This happens where there is some padding or margin on the body. If you set
> them to 0 via css it should take care of the problem.
>
> /* css */
> body {
> padding: 0;
> margin: 0;
>
> }
>
> -- Josh
>
> - Original Message -
> From: "tallvanilla" <[EMAIL PROTECTED]>
> To: "jQuery (English)"
> Sent: Monday, October 20, 2008 2:27 PM
> Subject: [jQuery] BUG: oversized overlay in IE web browsers ( demo
>
> included )
>
> > Hello. I found a minor bug that affects overlay in IE web browsers (at
> > least in IE6).
>
> > Please take a look at this very simple demo:
>
> >http://74.205.76.81/blockuitest/
>
> > In IE(6), the overlay is a bit taller than the browser window, so a
> > scrollbar appears on the right whenever the overlay is present. In
> > other web browsers, this doesn't happen.
>
> > I found a similar bug with the Boxy plug-in a couple of weeks ago, and
> > its author was able to fix it pretty easily. I'm a jQuery/javascript
> > novice, so I'm not sure how the fix was implemented. Would this be
> > worthwhile and easy fix for blockUI as well?
>
> > JR
[jQuery] Re: Only Fire Mouseover If Not Already Active
Thanks ricardo.
It just got too "buggy" trying to do what I had original wanted so I
ended up just using the "slide" effect to show it, and then the drop
effect to hide it. It gives the same overall appeal but it avoids the
hassle with the popup div being covered.
Thanks again for your help!
For anyone who is interested, my modified code looks like:
// Hover function
$(nowIcon).hover(function(){
// Fade icon & show popup
$(this).fadeTo(outSpeed, outOpacity);
$(nowPopup).show("slide", {direction: "up"},
600);
},function(){
// Un-fade icon & hide popup
$(this).fadeTo(inSpeed, inOpacity);
$(nowPopup).hide("drop", {direction: "down"},
600);
});
Thanks again!
On Oct 20, 10:48 am, ricardobeat <[EMAIL PROTECTED]> wrote:
> This helps a bit, but there are still many problems.. your best bet is
> to avoid covering the button with the popup:
>
> // Make icon fade
> $(nowIcon).mouseover(function(){
> if ( !$(nowPopup).is(':visible') ) {
> $(this).fadeTo(outSpeed,
> outOpacity);
> $(nowPopup).show("drop",
> {direction: "up"}, 600);
> }
> });
>
> // Un-fade icon
> $(nowIcon).mouseout(function(){
> if ( !$(nowPopup).is(':animated') ) {
> $(this).fadeTo(inSpeed, inOpacity);
> $(nowPopup).hide("drop",
> {direction: "down"}, 1000);
> }
> });
>
> - ricardo
>
> On Oct 19, 11:44 pm, QuickScriptz <[EMAIL PROTECTED]> wrote:
>
> > Hey,
>
> > I have a row of icons that each have a mouseover function. I'm using
> > the "drop" animation to produce a popup below each icon on mouseover
> > of the icon. The problem is that the "drop" animation makes the popup
> > flow down over top of the icon and then it stops below the icon.
>
> > That being said, while the "drop" animation is happening, the popup
> > covers the icon which in turn makes the page think the user has just
> > "mouseout" and then when the popup stops below the icon, it thinks the
> > user has "mouseover" again. When this all happens, the animation just
> > continually repeats itself over and over. So, I just want to stop the
> > repeat. I've tried some stuff like having a variable for whether the
> > popup is hidden or visible but I just couldn't seem to make it work
> > properly. If anyone could help me out it'd be really appreciated!
>
> > I know my description may be a bit weak so visit the link below for an
> > example. It's the icons in the top corner and to see what the problem
> > is just mouseover near the bottom of the icons and just leave your
> > mouse there for a bit.
>
> > Example:http://dev.quickscriptz.ca/v4/
>
> > And here is my code:
>
> > function doFade(i){
>
> > // Variables
> > var nowIcon, nowPopup, nowIconPos, topPx, leftPx,
> > topPxS, leftPxS;
>
> > // Variable for icon id
> > nowIcon = "#icon" + i;
> > nowPopup = "#popup" + i;
> > nowIconPos = $(nowIcon).position();
>
> > // Height from top of icon
> > topPx = nowIconPos.top;
> > leftPx = nowIconPos.left;
>
> > // Popup showing position
> > topPxS = topPx + 70;
> > leftPxS = leftPx + 457;
>
> > // Position the popups (start as hidden)
> > $(nowPopup).css({position: "absolute", top: topPxS,
> > left:
> > leftPxS}).hide();
>
> > // Make icon fade
> > $(nowIcon).mouseover(function(){
> > $(this).fadeTo(outSpeed, outOpacity);
> > $(nowPopup).show("drop", {direction: "up"},
> > 600);
> > });
>
> > // Un-fade icon
> > $(nowIcon).mouseout(function(){
> > $(this).fadeTo(inSpeed, inOpacity);
> > $(nowPopup).hide("drop", {direction:
> > "down"}, 1000);
> > });
>
> > Any help is greatly appreciated!
[jQuery] Treeview - close/hide list item when list item/submenu item is clicked
Hi, I really enjoy this plugin, great job to all the folks who have made it possible. I'm using treeview to have as an FAQ page. Right now, to close out a submenu, the user has to reclick the parent menu. I would like to add a feature where the viewer can click the an li item/submenu (in this case, an answer) it would close out that answer /list/submenu. this should paint a better image of what im talking about: question 1 the viewers click the question to show/hide an answer but only one answer is opened/shown at a time answer 1 --- I want to give the viewers the ability to close out the answer by clicking it question 2 answer 2 question 3 answer 3 please help and thank you in advance -- View this message in context: http://www.nabble.com/Treeview---close-hide-list-item-when-list-item-submenu-item-is-clicked-tp20082266s27240p20082266.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: ANNOUNCE: Context Menu Plugin v1.0 - new plugin with themes, highly extensible
VERY nice! One thing... You might want to disable the normal browser context menu on the jquery context menu... (as in right-clicking one of the context menu options) Matt Kruse-3 wrote: > > > I've just released version 1.0 of my Context Menu plugin: > http://plugins.jquery.com/project/cmenu > ( plugin home: http://www.javascripttoolbox.com/lib/contextmenu/ ) > > Here is the description from the plugin page: > > This plugin enables you to display a custom context menu on right > click in browsers that support it. This is commonly used in web > applications that are simulating desktop behavior or wish to add > advanced functionality for their users. > > There are other context menu plugins - so why did I write one? This > one is extremely configurable, customizable, and extensible. If any > part of the default behavior is not exactly what you need, it is very > simple to override the default functionality without changing the > plugin code. Several themes are included so you can display the > context menus in a style that you pick. Writing your own themes is > very simple. Understanding and customizing the CSS is straight-forward > and documented. > > There are many examples showing off lots of the functionality here. > The best way to see what this plugin can do is to try it out! > http://www.javascripttoolbox.com/lib/contextmenu/ > > I hope it is useful to some of you. Feedback is of course appreciated. > > Matt Kruse > > -- View this message in context: http://www.nabble.com/ANNOUNCE%3A-Context-Menu-Plugin-v1.0---new-plugin-with-themes%2C-highly--extensible-tp20073226s27240p20082096.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Group validation - validate per page in one form.
Perhaps I could use the depends parameter (http://dev.jquery.com/
ticket/2456) in order to check what page I'm on and therefore validate
accordingly for only the visible page.
There are several other options I've thought through (including
actually going with the real estate example above, which would involve
reinventing the wheel in several places where cannot use the
validation plugin for error display, etc.), but I'm looking for the
best recommended solution.
Thanks in advance for any pointers!
On Oct 20, 12:32 pm, ovalsquare <[EMAIL PROTECTED]> wrote:
> I am attempting to paginate a form, and validate for each page (page
> navigation via accordion or simply .show()/.hide()). However, the only
> sample I've seen of this appears to be the Help me Buy and Sell a
> House demo athttp://jquery.bassistance.de/validate/demo/multipart/.
> This sample requires that a "pageRequired" method be added as follows:
>
> $.validator.addMethod("pageRequired", function(value, element) {
> var $element = $(element)
> function match(index) {
> return current == index && $(element).parents("#sf" +
> (index +
> 1)).length;
> }
> if (match(0) || match(1) || match(2)) {
> return !this.optional(element);
> }
> return "dependency-mismatch";
> }, $.validator.messages.required)
>
> var v = $("#cmaForm").validate({
> errorClass: "warning",
> onkeyup: false,
> onblur: false,
> submitHandler: function() {
> alert("Submitted, thanks!");
> }
> });
>
> I would much prefer to take my existing setup with custom validation
> messages for each field, as well as the ability to use per field
> specific validation (i.e. email, maxLength, custom addMethods, etc.),
> as in the following:
>
> // Validation
> var container = $("#myForm div.validationSuggestion");
>
> $('#myForm').validate({
> errorContainer: container,
> errorLabelContainer: $("ul",container),
> rules: {
> someField: { required: true },
> someOtherField: {required: true, maxLength:20 }
> //many other fields.
> },
> messages: {
> someField: 'Error message for someField.',
> someOtherField: 'Another specific error message.'
> // many other fields.
> },
> highlight: function(element, errorClass) {
> $(element).addClass(errorClass);
> $(element.form).find("label[for=" + element.id +
> "]").addClass(errorClass);
> $(element.form).find("label[for=" + element.id +
> "]").removeClass("valid");
> },
> unhighlight: function(element, errorClass) {
> $(element).removeClass(errorClass);
> $(element.form).find("label[for=" + element.id +
> "]").removeClass(errorClass);
> $(element.form).find("label[for=" + element.id +
> "]").addClass("valid");
> },
> wrapper: 'li'
> });
>
> I cannot have multiple forms (I only want to submit on the last page).
> Am I missing something obvious?
[jQuery] Web page navigation question....
Hello, I am new to Javascript and Jquery and I have a question on a web page I am building. I have an interactive form where I have two columns, one column holds the form the second holds the results. When the user comes to the page, the form and the result window are blank. The form allows the user to query a database and retrieve information and the information is displayed in the results window. So here is my problem. After the the form is filled out and submited, a cgi script runs and submits the query to a database and an HTML is generated on the server. I have a callback on submit button to display the result page using the load function. This works fine. However on the page that is loaded has links for more information. If I drill down to these links. the new information is loaded to the current browser and not in the "result" panel. But not only that if I hit the back button, I go to the original form page and all the information is blank. 1) How can I go back to the form page with query results? 2) Even better, when I click on the link in the results area, can the new information be loaded to this area AND have the ability when I hit the back button to show the previous results? Thanks for any help or suggestions. Steve
[jQuery] Re: ui.tabs + cycle + WebKit = not working
> I guess this leads to the question... > > When the tabs load an external page as the tab content using ajax, > does the external page inherit all the js files from the tab page? Yes, but that's not what's happening on your site. Clicking on those links is navigating to a different page, not loading new content in to the current page.
[jQuery] Re: JQuery Cycle + lazyload
> I am using cycle for a slideshow and it works great. The problem is > that I have a gallery with about 60 large images and it can be a real > pain for slow connections. I figured using lazyload would be a good > option so that the images only load as needed. I can't seem to get > cycle and lazyload to work together - any thoughts? > > I have the development online > athttp://www.megperotti.com/weddings/index_weddings.php > > Thanks everyone, > TR There are numerous demos of how to add slides after the slideshow has started. Hopefully one of them will get you going: http://www.malsup.com/jquery/cycle/add.html http://www.malsup.com/jquery/cycle/add2.html http://www.malsup.com/jquery/cycle/add3.html http://www.malsup.com/jquery/cycle/add4.html http://www.malsup.com/jquery/cycle/add5.html http://www.malsup.com/jquery/cycle/add6.html Mike
[jQuery] Atribute selector with squared brackets
We got a ticket about how to select elements by an attribute with
brackets.
I replied with the common link to the FAQ and the reporter replied
that the example in the docs doesn't work.
I tried that myself, and indeed, that didn't work.
http://dev.jquery.com/ticket/3443
$('[name=foo[bar]]'); // Doesn't work
$('[name=foo\\[bar\\]]'); // Should work, but doesn't
$('[name="foo[bar]"]'); // Does work
Now... I think the last option is good enough. But we need to update
the docs.
Anything to add ?
Anyone volunteers to update the docs ?
Cheers
--
Ariel Flesler
http://flesler.blogspot.com/
[jQuery] Re: Help with Superfish
Hello,
>From a scan of your CSS it seems that you are applying the images to
the anchor elements. However, when you are hovering within a submenu,
the associated parent anchor is no longer being hovered, so the hover
image is lost. Try applying the images to the li elements and leave
the anchor backgrounds transparent. The parent li element is still
being hovered when the cursor is within the associated submenu, hence
the hover image will remain.
Replace this type of declaration:
#nav-aboutus a:hover { background-image: ...
With this kind of thing:
#nav-aboutus:hover,
#nav-aboutus.sfHover { background-image: ...
Notice that you will need to add the .sfHover selector in addition to
each :hover selector in order to support IE6. It also has the added
bonus of applying your desired affect when using the keyboard to tab
through the menu.
Joel Birch.
[jQuery] Re: Good MVC tutorial?
Assuming that you are using Cakephp (is there any other MVC framework - my personal bias coming to the fore) Some older cake/ajax tutorials are based on protoype but can easily be adapted Marc Grabanski (part of jQuery UI team) > The CakePHP core is moving to jQuery. I'll be helping on that effort to > convert existing prototype code to jQuery. Then I my plan is to make a > jQuery UI ajax framework on top of CakePHP. > > Just a heads up. > sounds great to me :) http://blog.wekeroad.com/2007/10/25/how-mvc-jquery-and-subsonic-will-make-you-smile/ http://jollytoad.googlepages.com/mvcusingjquery http://weblogs.asp.net/mikebosch/archive/2008/02/15/asp-net-mvc-submitting-ajax-form-with-jquery.aspx http://marcgrabanski.com/ http://bakery.cakephp.org/articles/view/jquery-image-upload-crop http://www.davidgolding.net/cakephp/ajax-file-uploading-with-cake-and-jquery.html 2008/10/20 greenie2600 <[EMAIL PROTECTED]> > > Hi all - > > I'm looking for a good tutorial on the MVC pattern in the context of > jQuery AJAX apps. (I'm using a PHP back-end, if that matters.) > > I understand basic design patterns such as the singleton, the strategy > pattern, etc., but I've never really grokked MVC. From what I know of > it, it seems like it's especially appropriate for complex AJAX apps > (please correct me if I'm wrong). > > I've Googled, but haven't found much. Is there anything out there that > (1) provides a good explanation of MVC, and (2) illustrates its usage > in an AJAX-based (preferably jQuery-based) application? > > Thanks! >
[jQuery] Re: ui.tabs + cycle + WebKit = not working
I guess this leads to the question... When the tabs load an external page as the tab content using ajax, does the external page inherit all the js files from the tab page? On Oct 20, 7:22 pm, Mike Alsup <[EMAIL PROTECTED]> wrote: > >http://www.petersurrena.com/ > > > The first project that loads is a great example of the problem. > > I have no idea what I'm looking for. All those links go to pages that > don't load jQuery???
[jQuery] Re: Hover not work properly when moving mouse fast...
I wouldn't put Flash as the single cause for this...
I have a table of ~ 30 rows that i tried to wire in a hover event
which colored/de-colored the row the user was over so it was obvious
what row they were one moving the mouse in and out very quickly
made the "out" event not fire resulting in multiple rows being
highlighted (technically is was changing/removing a background-color)
This was on our company intranet site, i'll rip out some HTML and post
up a sample if that helps diagnose first thing i will do is rip
out the ".hover" wiring and use "mouseenter" and "mouseleave" to see
if that fixes the issue
On Oct 20, 7:52 pm, "Karl Rudd" <[EMAIL PROTECTED]> wrote:
> Oh, you're working with Flash... hmmm that's probably the reason.
> Getting events from "object" or "embed" nodes can be... tricky, in my
> very limited experience.
>
> My suggestion is that you drop the SIFR menu items and use background
> images. Either that or you'll have to somehow tap into the "hover"
> event inside the SIFR Flash object.
>
> Sorry I can't really help more.
>
> Karl
>
> On Mon, Oct 20, 2008 at 6:21 PM, Mech7 <[EMAIL PROTECTED]> wrote:
>
> > What is not working correctly with me is when I hover the dropdown
> > menu i change the color of the sifr text so it remains black:
>
> >http://www.mech7.net/tmp/sifr/
>
> > In script.js in line 26:
>
> > ,onRollOut: function(cb) {
> > var currentMenuItem =
> > cb.getFlashElement().parentNode.parentNode;
> > $(currentMenuItem).hover(
> > function () {
> > cb.changeCSS(
> > 'a{color:#00; text-align:center;
> > text-decoration:none;}'
> > );
> > },
> > function () {
> > cb.changeCSS(
> > 'a{color:#ee; text-align:center;
> > text-decoration:none;}'
> > );
> > }
> > );
> > }
>
> > If you move the mouse slow it works correct, but hover the main items
> > fast and they stay black but not change back anymore.
>
> > On Oct 15, 2:54 pm, "Karl Rudd" <[EMAIL PROTECTED]> wrote:
> >> Right. That's what I'd expect.
>
> >> The mouseout (and mouseover) events "bubble" up through child DOM
> >> nodes, and often fire at odd times, which is why it you should use the
> >> "mouseenter" and "mouseleave" events. The enter and leave events are
> >> specially built to not bubble (at least not unexpectedly).
>
> >> I do see what you mean by the mouseleave firing more than once in some
> >> cases. No idea why.
>
> >> Do you have a particular page that isn't working?
>
> >> Karl Rudd
>
> >> On Wed, Oct 15, 2008 at 6:00 PM,Mech7<[EMAIL PROTECTED]> wrote:
>
> >> > Ok when I go over the example one fast stroke in Firefox 3 then I get
> >> > 4 and 6 for the outer.. in the 1st example. Now try to do a circlular
> >> > movement in the orange box in the 1st example... stay inside the
> >> > orange, over keeps firing, do a movement from left to right and it
> >> > doesn't
>
> >> > On the 2nd example, try to go really fast with the mouse over the
> >> > entire area, sometimes it will fire once and sometimes 3 times.
>
> >> > On Oct 15, 11:39 am, "Karl Rudd" <[EMAIL PROTECTED]> wrote:
> >> >> It seems to work as I expect it too on the example page.
>
> >> >> Can you provide a working example and explain what you expect to happen?
>
> >> >> Karl Rudd
>
> >> >> On Wed, Oct 15, 2008 at 2:02 PM,Mech7<[EMAIL PROTECTED]> wrote:
>
> >> >> >http://docs.jquery.com/Events/mouseout
>
> >> >> > Even in the example it does not work correct.. for example make some
> >> >> > circles with the mouse on mouseout.. it will keep adding numbers.
>
> >> >> > Also with mousenter, move it fast and the numbers will go up with big
> >> >> > amounts. :( How to fix this, i can't use mouseout cause it will fire
> >> >> > also with the child elements.
[jQuery] Re: Hover not work properly when moving mouse fast...
Oh, you're working with Flash... hmmm that's probably the reason.
Getting events from "object" or "embed" nodes can be... tricky, in my
very limited experience.
My suggestion is that you drop the SIFR menu items and use background
images. Either that or you'll have to somehow tap into the "hover"
event inside the SIFR Flash object.
Sorry I can't really help more.
Karl
On Mon, Oct 20, 2008 at 6:21 PM, Mech7 <[EMAIL PROTECTED]> wrote:
>
> What is not working correctly with me is when I hover the dropdown
> menu i change the color of the sifr text so it remains black:
>
> http://www.mech7.net/tmp/sifr/
>
> In script.js in line 26:
>
>,onRollOut: function(cb) {
>var currentMenuItem =
> cb.getFlashElement().parentNode.parentNode;
> $(currentMenuItem).hover(
> function () {
>cb.changeCSS(
>'a{color:#00; text-align:center;
> text-decoration:none;}'
>);
> },
> function () {
>cb.changeCSS(
>'a{color:#ee; text-align:center;
> text-decoration:none;}'
>);
> }
>);
>}
>
> If you move the mouse slow it works correct, but hover the main items
> fast and they stay black but not change back anymore.
>
> On Oct 15, 2:54 pm, "Karl Rudd" <[EMAIL PROTECTED]> wrote:
>> Right. That's what I'd expect.
>>
>> The mouseout (and mouseover) events "bubble" up through child DOM
>> nodes, and often fire at odd times, which is why it you should use the
>> "mouseenter" and "mouseleave" events. The enter and leave events are
>> specially built to not bubble (at least not unexpectedly).
>>
>> I do see what you mean by the mouseleave firing more than once in some
>> cases. No idea why.
>>
>> Do you have a particular page that isn't working?
>>
>> Karl Rudd
>>
>> On Wed, Oct 15, 2008 at 6:00 PM,Mech7<[EMAIL PROTECTED]> wrote:
>>
>> > Ok when I go over the example one fast stroke in Firefox 3 then I get
>> > 4 and 6 for the outer.. in the 1st example. Now try to do a circlular
>> > movement in the orange box in the 1st example... stay inside the
>> > orange, over keeps firing, do a movement from left to right and it
>> > doesn't
>>
>> > On the 2nd example, try to go really fast with the mouse over the
>> > entire area, sometimes it will fire once and sometimes 3 times.
>>
>> > On Oct 15, 11:39 am, "Karl Rudd" <[EMAIL PROTECTED]> wrote:
>> >> It seems to work as I expect it too on the example page.
>>
>> >> Can you provide a working example and explain what you expect to happen?
>>
>> >> Karl Rudd
>>
>> >> On Wed, Oct 15, 2008 at 2:02 PM,Mech7<[EMAIL PROTECTED]> wrote:
>>
>> >> >http://docs.jquery.com/Events/mouseout
>>
>> >> > Even in the example it does not work correct.. for example make some
>> >> > circles with the mouse on mouseout.. it will keep adding numbers.
>>
>> >> > Also with mousenter, move it fast and the numbers will go up with big
>> >> > amounts. :( How to fix this, i can't use mouseout cause it will fire
>> >> > also with the child elements.
[jQuery] JQuery Cycle + lazyload
I have a photo gallery using cycle and it works well. I am running into an issue with slow connections because I have a gallery with 60+ large images in it. I figured I could use lazyload to remedy the problem and have the images only load when they are called(or next to be called). I can't seem to get lazyload and cycle to work together though... any ideas? Thanks, TR Development is here: http://www.megperotti.com/weddings/index_weddings.php
[jQuery] JQuery Cycle + lazyload
I am using cycle for a slideshow and it works great. The problem is that I have a gallery with about 60 large images and it can be a real pain for slow connections. I figured using lazyload would be a good option so that the images only load as needed. I can't seem to get cycle and lazyload to work together - any thoughts? I have the development online at http://www.megperotti.com/weddings/index_weddings.php Thanks everyone, TR
[jQuery] Re: ui.tabs + cycle + WebKit = not working
> http://www.petersurrena.com/ > > The first project that loads is a great example of the problem. I have no idea what I'm looking for. All those links go to pages that don't load jQuery???
[jQuery] Improving a tooltip code
Hi everyone,
I'm trying to build a hoverable Jquery tooltip.
This tooltip should appear when I hover over some element, and stay
put if I choose to hover over the tooltip itself too.
The tooltip should disappear only if I hover away from the original
element or from the tooltip body.
Based on an example I found, I managed to create this behavior, but
since I'm new to Jquery, I'd be glad to hear your comments about
improving the function.
The code:
-
http://www.w3.org/1999/xhtml";>
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
text-align: left;
}
jQuery.fn.extend({
'tooltip': function(text){
xOffset = 10;
yOffset = 20;
var that = this;
$(this).mouseover(function(e){
this.t = text;
$("body").append(""+ this.t
+"");
$("#tooltip")
.css('position', 'absolute')
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
});
$(this).mouseout(function(){
that.hide_ff =
setTimeout('$("#tooltip").hidetooltip()', 1000);
$("#tooltip").hover(function(){
clearTimeout (that.hide_ff);
},
function(){
$("#tooltip").hidetooltip()
});
//$("#tooltip").hidetooltip()
});
$(this).mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
},
'hidetooltip': function()
{
var that = this;
$(this).remove();
if (that.hide_ff)
{
clearTimeout (that.hide_ff);
}
}
});
ToolTip
This is a Tooltip.
Click Me
$(document).ready(function() {
$("#fff").tooltip($('#tooltip_share_text').html());
});
-
Two things bother me most:
1. I needed to extend Jquery with 2 function (tooltip and
hidetooltip), i would like to achieve the same behavior with only one
extension but I didn't succeed in accomplishing this.
2. The use I made of "that.hide_ff" just doesn't seem right. Once
again, I think this variable should belong to a "tooltip" object, but
if I am not mistaken it is attached to the Jquery object itself.
In addition, I would be happy to hear any other improvements...
Thanks in advance,
Gordi
[jQuery] Re: [tooltip] fixing the tooltip position relative to tooltipped element's position, not mouse position on event firing
Thanks Jorn, clueTip is flexible indeed. I'd like to mod my tooltip though, as I've put in a bit of effort in getting things right. Any ideas on how I can get the correct co-ordinates? Using current.offsetLeft for example just dumps the tooltip at same spot, not matter where the tooltipped element happens to be.
[jQuery] Re: BUG: oversized overlay in IE web browsers ( demo included )
This happens where there is some padding or margin on the body. If you set
them to 0 via css it should take care of the problem.
/* css */
body {
padding: 0;
margin: 0;
}
-- Josh
- Original Message -
From: "tallvanilla" <[EMAIL PROTECTED]>
To: "jQuery (English)"
Sent: Monday, October 20, 2008 2:27 PM
Subject: [jQuery] BUG: oversized overlay in IE web browsers ( demo
included )
Hello. I found a minor bug that affects overlay in IE web browsers (at
least in IE6).
Please take a look at this very simple demo:
http://74.205.76.81/blockuitest/
In IE(6), the overlay is a bit taller than the browser window, so a
scrollbar appears on the right whenever the overlay is present. In
other web browsers, this doesn't happen.
I found a similar bug with the Boxy plug-in a couple of weeks ago, and
its author was able to fix it pretty easily. I'm a jQuery/javascript
novice, so I'm not sure how the fix was implemented. Would this be
worthwhile and easy fix for blockUI as well?
JR
[jQuery] jquery newbie help please!
Hi,
I'm new to jquery and am having a couple issues on a site I've
designed. I am using 2 jquery techniques: dd accordian and a animated
image load i sorta hacked together. Both have slight glitches that I
can's seem to figure out. Can someone please offer some guidance on
either of the following issues on http://www.elizabethkosichnewyork.com/:
1. DDAccordian: It seems to be mainly an IE6.0 issue, though I've run
into it on Safari as well, but there is some overlapping that occurs
between the hidden subcats and the other categories as you click thru
the menu. It's almost as if they're colliding with each other. There's
a chance the problem could be more CSS related than JQuery, but I
can't figure it out.
2. Image load: I have a little script on the about pages, the store
locator page, and the content page that looks like this:
$(window).bind("load", function() {
$('#wrapper').hide();
$('#wrapper').show('slow');
return false;
});
What I am wanting this to do is, once the image is loaded (I tried DOM
Ready before but that was too soon) and then slide in like it does.
Right now, the images is flashing ever-so briefly before it hides. Any
idea how I can do this better?
Thanks so much for your help!
[jQuery] [validate] Group validation - validate per page in one form.
I am attempting to paginate a form, and validate for each page (page
navigation via accordion or simply .show()/.hide()). However, the only
sample I've seen of this appears to be the Help me Buy and Sell a
House demo at http://jquery.bassistance.de/validate/demo/multipart/.
This sample requires that a "pageRequired" method be added as follows:
$.validator.addMethod("pageRequired", function(value, element) {
var $element = $(element)
function match(index) {
return current == index && $(element).parents("#sf" +
(index +
1)).length;
}
if (match(0) || match(1) || match(2)) {
return !this.optional(element);
}
return "dependency-mismatch";
}, $.validator.messages.required)
var v = $("#cmaForm").validate({
errorClass: "warning",
onkeyup: false,
onblur: false,
submitHandler: function() {
alert("Submitted, thanks!");
}
});
I would much prefer to take my existing setup with custom validation
messages for each field, as well as the ability to use per field
specific validation (i.e. email, maxLength, custom addMethods, etc.),
as in the following:
// Validation
var container = $("#myForm div.validationSuggestion");
$('#myForm').validate({
errorContainer: container,
errorLabelContainer: $("ul",container),
rules: {
someField: { required: true },
someOtherField: {required: true, maxLength:20 }
//many other fields.
},
messages: {
someField: 'Error message for someField.',
someOtherField: 'Another specific error message.'
// many other fields.
},
highlight: function(element, errorClass) {
$(element).addClass(errorClass);
$(element.form).find("label[for=" + element.id +
"]").addClass(errorClass);
$(element.form).find("label[for=" + element.id +
"]").removeClass("valid");
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorClass);
$(element.form).find("label[for=" + element.id +
"]").removeClass(errorClass);
$(element.form).find("label[for=" + element.id +
"]").addClass("valid");
},
wrapper: 'li'
});
I cannot have multiple forms (I only want to submit on the last page).
Am I missing something obvious?
[jQuery] addClass / removeClass Multiple Divs
Hi all,
First off, I am a bit new to jQuery so please excuse any newbie-ness.
Thank you all for the great group. It is extremely informative and I
hope to be able to give back soon.
I have been working with multiple jQuery scripts at
http://dev.betweenbrain.com/telos_systems/Support/supportRev3.5.html.
Everything seems to work as desired, except I am adding / removing a
class on .click to the links within the lower-left (FAQ) accordion
menu. The class is added fine, removed from siblings within the same
div, but doesn't remove the class from other links within the other
div. All divs have the same classes. Give it a try: Click on a
question to reveal the answer, then toggle the accordion menu, click
on a link, and then toggle back. You'll see what I mean.
The FAQ script is as follows:
$(document).ready(function() {
var hideFaqs = function() {
$('.faqs > div').hide();
}
hideFaqs();
$('.faqLink a').each(function(index) {
$(this).click(function(){
$(this).parents('.faqLink').find('a').removeClass('active');
$(this).addClass('active');
hideFaqs();
$('.faqs > div:eq(' + index + ')').show();
return false;
});
});
});
The accordion menu script is:
$(document).ready(function() {
$('div.accordianMenu> div').hide();
$('div.defaultOpen').show();
$('div.accordianMenu> h3').click(function() {
$(this).addClass('active').siblings('h3').removeClass('active');
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideToggle('slow', function()
{
$nextDiv.slideToggle('slow');
});
} else {
$nextDiv.slideToggle('slow');
}
});
});
(props to Karl Swedberg for the basis of the accordion menu)
Any thoughts on how to better remove the class of 'active' from the
FAQ link siblings would be greatly appreciated. Maybe I can add a
'removeClass' to the accordion script when it toggles?
Thanks,
Matt
[jQuery] Good MVC tutorial?
Hi all - I'm looking for a good tutorial on the MVC pattern in the context of jQuery AJAX apps. (I'm using a PHP back-end, if that matters.) I understand basic design patterns such as the singleton, the strategy pattern, etc., but I've never really grokked MVC. From what I know of it, it seems like it's especially appropriate for complex AJAX apps (please correct me if I'm wrong). I've Googled, but haven't found much. Is there anything out there that (1) provides a good explanation of MVC, and (2) illustrates its usage in an AJAX-based (preferably jQuery-based) application? Thanks!
[jQuery] Help with Superfish
Hello,
As suggested on the superfish homepage (http://users.tpg.com.au/
j_birch/plugins/superfish/#download) i am posting here with a problem
i am experiencing its probably user error, but i cant seem to get
it to work properly.
The problem is that when users hover of the menu "buttons" and a user
start mousing around in the menu the menu "button" turns back to the
normal (non-hover) image, when it should stay as the hover-state
image.
The example available on the superfish site works the way i desire,
but my usage is a bit more complicated because my menu buttons (top-
most list item ) are images and not simple css background colors.
and assistance would be greatly appreciated, i have been working on
this for hours :(
i am pasting my css and html code, i hope google groups wont break it.
html code:
About Us
News
Mission Statement
Portfolio
Services
Consultation
Support
Knowledge Base
Contact Us
General Inquiries
Get Help
Contact Directory
css-code:
#nav { line-height: 1; z-index: 9998; }
#nav a {
display: block;
height: 30px;
text-indent: -999em;
overflow: hidden;
border: 0px;
}
#nav li { float: left; position: relative; }
* html #nav li * { position: relative; }
#nav li, #nav ul { margin: 0; padding: 0; list-style:none;}
/*--- Default ---*/
#nav-aboutus { background-image: url(test/res/gui/about.png); width:
72px;}
#nav-services a { background-image: url(test/res/gui/
servicessprite.png); width: 91px; }
#nav-support a { background-image: url(test/res/gui/support.png);
width: 91px; }
#nav-contactus a { background-image: url(test/res/gui/contact.png);
width: 91px; }
/*--- Hovering ---*/
#nav-aboutus a:hover { background-image: url(test/res/gui/
abouthot.png); width: 72px; }
#nav-services a:hover { background-image: url(test/res/gui/
servicessprite.png); width: 91px; }
#nav-support a:hover { background-image: url(test/res/gui/
supportsprite.png); width: 91px; }
#nav-contactus a:hover { background-image: url(test/res/gui/
contactussprite.png); width: 125px; }
/*--- Clicking ---*/
#nav-aboutus a:active { background-image: url(test/res/gui/
abouthot.png); width: 72px; }
#nav-services a:active { background-image: url(test/res/gui/
serviceshot.png); width: 98px; }
#nav-support a:active { background-image: url(test/res/gui/
supporthot.png); width: 91px; }
#nav-contactus a:active { background-image: url(test/res/gui/
contacthot.png); width: 91px; }
/*--- Dropdowns ---*/
#nav li.over ul { left: 0; display: block;}
#nav li li { float: none; position: static; width: 100%; }
#nav li li a, #nav li li a:hover, #nav li li a:active {
background: none;
height: auto;
padding: 5px 10px 5px 10px ;
text-indent: 0;
width: 155px;
}
#nav li li a { color: #ff; text-decoration: none;}
/* hover for all menu items */
#nav li li a:hover { background: #ac8c6b; color: #ff;}
/* menu characteristics */
#nav li ul {
background: #784e25;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
border: 1px solid #2D2D2D;
border-top: 0px solid #2D2D2D;
display: none;
line-height: 1.5;
padding: 2px;
position: absolute;
top: 30px;
width: 175px;
z-index: ;
}
[jQuery] BUG: oversized overlay in IE web browsers ( demo included )
Hello. I found a minor bug that affects overlay in IE web browsers (at least in IE6). Please take a look at this very simple demo: http://74.205.76.81/blockuitest/ In IE(6), the overlay is a bit taller than the browser window, so a scrollbar appears on the right whenever the overlay is present. In other web browsers, this doesn't happen. I found a similar bug with the Boxy plug-in a couple of weeks ago, and its author was able to fix it pretty easily. I'm a jQuery/javascript novice, so I'm not sure how the fix was implemented. Would this be worthwhile and easy fix for blockUI as well? JR
[jQuery] load dynamic content into myobj
Hello,
what I am trying to do is this... I have a link on a page when i click the
link i want it to load "Page2.php?+..." into "myobj".
here is some of the code i was working with... hope someone can help...
Thank you.
$(document).ready(function(){
$("#generate2").click(function(){
$("#myobj").fadeOut("fast");
$("#myobj").slideToggle("slow");
$("#myobj").load(" what goes here ");
$(this).toggleClass("active");
});
});
*
"Page2.php?idctg_ctg=
--
View this message in context:
http://www.nabble.com/load-dynamic-content-into-myobj-tp20080199s27240p20080199.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: ANNOUNCE: Context Menu Plugin v1.0 - new plugin with themes, highly extensible
Matt, you rule ! On Mon, Oct 20, 2008 at 6:11 PM, Matt Kruse <[EMAIL PROTECTED]> wrote: > > I've just released version 1.0 of my Context Menu plugin: > http://plugins.jquery.com/project/cmenu > ( plugin home: http://www.javascripttoolbox.com/lib/contextmenu/ ) > > Here is the description from the plugin page: > > This plugin enables you to display a custom context menu on right > click in browsers that support it. This is commonly used in web > applications that are simulating desktop behavior or wish to add > advanced functionality for their users. > > There are other context menu plugins - so why did I write one? This > one is extremely configurable, customizable, and extensible. If any > part of the default behavior is not exactly what you need, it is very > simple to override the default functionality without changing the > plugin code. Several themes are included so you can display the > context menus in a style that you pick. Writing your own themes is > very simple. Understanding and customizing the CSS is straight-forward > and documented. > > There are many examples showing off lots of the functionality here. > The best way to see what this plugin can do is to try it out! > http://www.javascripttoolbox.com/lib/contextmenu/ > > I hope it is useful to some of you. Feedback is of course appreciated. > > Matt Kruse >
[jQuery] Re: Plugins website in IE7
I have the same problem, I have a div that shows with show() and the links inside are unclickable in IE7 On Oct 20, 6:51 am, Adam Frame <[EMAIL PROTECTED]> wrote: > Is it just me or is the plugins page (plugins.jquery.com) a little broke > in IE7? The footer appears to ride up the page and makes all category > links unclickable. Looks fine in firefox 3. > > I think a little float clearing at the bottom of the category list > should fix it, but I'm no expert. > > Maybe they're still working out kinks, and if already reported, > apologies for duplication. > > Adam
[jQuery] Re: pngFix and display:none
I've had a look at the Fancy Box and it seems the pngfix seems to do its job. It would be helpful if you provided us with a demo where it's not working. Also, you might want to give this pngfix hack a try: http://jquery.khurshid.com/ifixpng.php On Mon, Oct 20, 2008 at 10:37 PM, yabdab <[EMAIL PROTECTED]> wrote: > > The problem is, they are never "shown". > > Fancy Box takes the html from the original hidden div, then presents > that to the user. I cannot figure out a way to apply the fix to this > png on-the-fly??? :-( > > On Oct 20, 1:22 pm, "Isaak Malik" <[EMAIL PROTECTED]> wrote: > > You just need to apply the pngfix to those elements as soon as they are > > shown. Nothing more, nothing less.. > > > > On Mon, Oct 20, 2008 at 5:59 PM, yabdab <[EMAIL PROTECTED]> wrote: > > > > > I am seeing an issue in that POS browser IE6 that goes like this... > > > > > pngFix() works only on images that are displayed. I have some hidden > > > divs (display:none) that contain png files that are reveled when > > > needed. But they are missing when I show() them. > > > > > Any ideas what is happening to them? > > > > -- > > Isaak Malik > > Web Developer > -- Isaak Malik Web Developer
[jQuery] Re: [validate] Validation max number of checkboxes
Works beautifully -- Thanks!
[jQuery] Re: How to address JSON data once returned with getJSON ?
Absolutely Mike, thats the problem, a really newbie mistake. Thanks / Colm
[jQuery] Re: pngFix and display:none
The problem is, they are never "shown". Fancy Box takes the html from the original hidden div, then presents that to the user. I cannot figure out a way to apply the fix to this png on-the-fly??? :-( On Oct 20, 1:22 pm, "Isaak Malik" <[EMAIL PROTECTED]> wrote: > You just need to apply the pngfix to those elements as soon as they are > shown. Nothing more, nothing less.. > > On Mon, Oct 20, 2008 at 5:59 PM, yabdab <[EMAIL PROTECTED]> wrote: > > > I am seeing an issue in that POS browser IE6 that goes like this... > > > pngFix() works only on images that are displayed. I have some hidden > > divs (display:none) that contain png files that are reveled when > > needed. But they are missing when I show() them. > > > Any ideas what is happening to them? > > -- > Isaak Malik > Web Developer
[jQuery] Re: Combining jQuery and jQuery UI
They already have the semicolons straight from jQuery, so no changes were needed. Any other suggestions? On Oct 16, 5:16 pm, Mike Alsup <[EMAIL PROTECTED]> wrote: > > I'd like to combine and compress my jQuery and jQuery UI files into a > > single minified file, but I've noticed that every time I do this It > > just breaks and gives me "$ is not defined". > > > If I do a copy/paste of the two uncompressed files together, it works > > fine but it's a 100kb file! When I got to minify or pack this file, > > that's when it always breaks. I've tried Dean Edwards packer, JSmin, > > and YUI all with the same results. > > > The same goes for any jQuery plugins I've downloaded. I'm using a > > several that I need avalible on all pages, and I'd like to combine > > them - these also break when I do this. > > > Am I missing something here? > > Make sure each file has a leading and a trailing semicolon.
[jQuery] Re: How To Create Array(s) in jQuery?
Thank you all for your quick support. The error was caused due to incorrect markup in the user script jQuery file and now it's working fine. enjoy :)
[jQuery] Re: jcarousellite vertical issues
Just trying to bump this thread a little, see if anyone can help, still having problems
[jQuery] Re: Disabling jQuery on printing?
http://www.hiya4kids.co.uk/girls.htm
This page shows the maphilighting in action. When I click Print
Preview, the large page images (showing the toys) disappears showing
just the super-imposed text.
If I rem out the $('.map').maphilight(); statement, and then print
preview, the images appear OK (after reducing the preview by 60%).
This seems to suggest to me that maphilight is active during printing.
Ian
On Oct 20, 9:39 am, "Ca-Phun Ung" <[EMAIL PROTECTED]> wrote:
> On Mon, Oct 20, 2008 at 4:13 PM, iantresman <[EMAIL PROTECTED]> wrote:
>
> > I'm sure my jQuery scripts are doing something, because I when I REM
> > them out, my printouts are fine.
>
> Could you post up a demo?
>
> --
> Ca-Phun Ung
> +http://yelotofu.com
> + css, django, hongkong, html, javascript, php
[jQuery] Re: Faceted navigation Solution Ideas
Have a look at: http://jquery.bassistance.de/accordion/demo/ Mauricio I want a starting point for a faceted navigation system, using jquery, similar to that at http://www.indeed.com/jobs?q=programmer&l= for example Can someone please point me in the right direction ... Thanks for any help
[jQuery] Re: Disabling Textarea, Select
Nevermind I figured it out.
- Justin
On Oct 20, 2:20 pm, Justin Kozuch <[EMAIL PROTECTED]> wrote:
> Hi,
>
> I've hit a bit of a snag in some code I've repurposed for a form I'm
> creating:
>
> $(document).ready(function() {
> var termsagree = $("#termsagree");
> var inital = termsagree.is(":checked");
> var terms = $("#contractualreqs")[inital ? "removeClass" :
> "addClass"]("gray");
> var termsInputs = terms.find("input").attr("disabled", !inital);
>
> //$("#contractualreqs").hide();
> termsagree.click(function() {
> //$("#contractualreqs").show();
> terms[this.checked ? "removeClass" : "addClass"]("gray");
> termsInputs.attr("disabled", !this.checked);
> });
>
> var reqsagree = $("#reqsagree");
> var inital = reqsagree.is(":checked");
> var reqs = $("#supplierform")[inital ? "removeClass" : "addClass"]
> ("gray");
> var reqsInputs = reqs.find("input").attr("disabled", !inital);
>
> //$("#supplierform").hide();
> reqsagree.click(function() {
> //$("#supplierform").show();
> reqs[this.checked ? "removeClass" : "addClass"]("gray");
> reqsInputs.attr("disabled", !this.checked);
> });
>
> });
>
> What I would like to do is disable ALL input fields, including selects
> and textarea elements, which is something that is not happening right
> now.
>
> Does anyone have any insight on how to accomplish this? I figured
> that
>
> var termsInputs = terms.find("input").attr("disabled", !inital);
>
> would do it, but alas, it was not to be.
>
> Best,
>
> justin
[jQuery] Re: Linkselect Plug-in Released...
On Mon, Oct 20, 2008 at 11:22 AM, Ca-Phun Ung <[EMAIL PROTECTED]> wrote: > Very cool! Excellent work! I like how you are able to change the entire > look purely through CSS. It also looks very adaptable. Thanks for sharing. > :) > Thanks!
[jQuery] Faceted navigation Solution Ideas
I want a starting point for a faceted navigation system, using jquery, similar to that at http://www.indeed.com/jobs?q=programmer&l= for example Can someone please point me in the right direction ... Thanks for any help
[jQuery] Nested GetJson Requests
Is there a plugin or some documentation as to how I can make say 10 async GetJson requests in a neat and managed way? By that I mean I fire off 10 async requests and as soon as I get the data back I want to display it on the page (order is not important, whatever finishes first gets displayed first). Also, I want to make sure I don't kill the browser due limitations as to how many connections I can have open at once. I recently saw a the functionality implemented on a site called usniff.com but they were using Mootools as I want to stick with JQuery. Any help, pointers, jquery plugins would be highly appreciated. Thanks
[jQuery] Re: [validate] Trouble using rules( "add", rules ) as well as setting attribute for range validations
I have made a patch for my app to the rules function to support custom
messages:
This is the new function, would be nice to have something similar to
this.
rules: function(command, argument) {
var element = this[0];
if (command) {
var staticRules = $.data(element.form,
'validator').settings.rules;
var existingRules = $.validator.staticRules(element);
switch(command) {
case "add":
$.extend(existingRules,
$.validator.normalizeRule(argument));
staticRules[element.name] = existingRules;
/ PATCH ***/
if (argument.messages) {
if ($.data(element.form,
'validator').settings.messages[element.name])
$.extend($.data(element.form,
'validator').settings.messages[element.name],argument.messages);
else
$.data(element.form,
'validator').settings.messages[element.name] = argument.messages;
}
/ END PATCH ***/
break;
case "remove":
if (!argument) {
delete staticRules[element.name];
return existingRules;
}
var filtered = {};
$.each(argument.split(/\s/), function(index,
method) {
filtered[method] =
existingRules[method];
delete existingRules[method];
});
return filtered;
}
}
var data = $.validator.normalizeRules(
$.extend(
{},
$.validator.metadataRules(element),
$.validator.classRules(element),
$.validator.attributeRules(element),
$.validator.staticRules(element)
), element);
// make sure required is at front
if (data.required) {
var param = data.required;
delete data.required;
data = $.extend({required: param}, data);
}
return data;
},
And I use it like this:
$("#field").rules("add", {"required":true,"range":[5,45],"messages":
{"required":"The field can\'t be blank.","range":"The field must have
5 to 45 characters."}});
Hope it helps.
On Oct 9, 11:00 pm, "Jörn Zaefferer" <[EMAIL PROTECTED]>
wrote:
> You can use metadata, too. Currently barely documented, and not really
> recommended either, but works since 1.4.
>
> name="whatever" />
>
> Jörn
>
> On Thu, Oct 9, 2008 at 5:20 PM, Bob Silverberg <[EMAIL PROTECTED]> wrote:
>
> > Thanks for the quick response. That fixed my problem.
>
> > One more question:
>
> > I'd like to addcustomerror messages to some of my dynamic
> > validations. Is it correct that the only way to add acustomerror
> >messageto a particular rule is either by:
>
> > 1. using the form.validate() method
> > 2. using $.validator.addMethod to clone an existing method
>
> > Thanks,
> > Bob
>
> > On Thu, Oct 9, 2008 at 4:22 AM, Jörn Zaefferer
> > <[EMAIL PROTECTED]> wrote:
> >> Forrules("add") to work, the element's form has to be validated, that
> >> is, call $("form").validate() first. I've updated the documentation
> >> accordingly.
>
> >> Not sure why the attr-approach failed, I'll take a look at that.
>
> >> Jörn
>
> >> On Thu, Oct 9, 2008 at 2:37 AM, BobS <[EMAIL PROTECTED]> wrote:
>
> >>> I'm working on a server-side component that will generate all of my
> >>> jQuery validationrulesfrom xml metadata, so I'm trying to
> >>> dynamically addrulesone at a time.
>
> >>> My first attempt was to use therules( "add",rules) syntax, but I'm
> >>> getting an error on page load:
>
> >>> jQuery.data(element.form, "validator") is undefined
>
> >>> Here's the syntax I'm using:
>
> >>> $("#VerifyPassword").rules('add',{equalTo: '#UserPass'}); which seems
> >>> to be correct according to the docs.
>
> >>> So, I decided to try setting attributes instead, which works fine for
> >>> the equalTo. For example, this works:
>
> >>> $("#VerifyPassword").attr('equalTo','#UserPass');
>
> >>> But when trying to use attr to set a range I cannot figure out what to
> >>> pass in for the range.
>
> >>> I've tried:
> >>> $("#UserPass").attr('rangelength','[5,10]'); -> yeilds themessage
> >>> "Please enter a value between NaN and 5 characters long."
> >>> $("#UserPass").attr('rangelength',[5,10]
[jQuery] Disabling Textarea, Select
Hi,
I've hit a bit of a snag in some code I've repurposed for a form I'm
creating:
$(document).ready(function() {
var termsagree = $("#termsagree");
var inital = termsagree.is(":checked");
var terms = $("#contractualreqs")[inital ? "removeClass" :
"addClass"]("gray");
var termsInputs = terms.find("input").attr("disabled", !inital);
//$("#contractualreqs").hide();
termsagree.click(function() {
//$("#contractualreqs").show();
terms[this.checked ? "removeClass" : "addClass"]("gray");
termsInputs.attr("disabled", !this.checked);
});
var reqsagree = $("#reqsagree");
var inital = reqsagree.is(":checked");
var reqs = $("#supplierform")[inital ? "removeClass" : "addClass"]
("gray");
var reqsInputs = reqs.find("input").attr("disabled", !inital);
//$("#supplierform").hide();
reqsagree.click(function() {
//$("#supplierform").show();
reqs[this.checked ? "removeClass" : "addClass"]("gray");
reqsInputs.attr("disabled", !this.checked);
});
});
What I would like to do is disable ALL input fields, including selects
and textarea elements, which is something that is not happening right
now.
Does anyone have any insight on how to accomplish this? I figured
that
var termsInputs = terms.find("input").attr("disabled", !inital);
would do it, but alas, it was not to be.
Best,
justin
[jQuery] Table Sorter - Freeze Panes (like Excel)
Hi. I know there are solutions that work for freezing the TH or first row of a table. However I can't seem to find one that also has been tested with table sorter. Suggestions? Thanks, D.
[jQuery] Re: How To Create Array(s) in jQuery?
> > What makes you say that? An array is an array is an array. jQuery > > doesn't change how they work or how you create them. > Yep. An array is an Array. But in my case while working with > jQuery the array data is not executing properly and the same > is working fine in typical javascript. var a = []; var b = [ 'one', 'two', 'buckle my shoe' ]; var c = new Array; var d = new Array( 42 ); var e = new Array( 'three', 'four', 'shut the door' ); jQuery shouldn't affect any of those in the slightest. Which one didn't work? Post a link to a test page, or at least some sample code you and trouble with, and we can see what went wrong. -Mike
[jQuery] jQuery Uploader Flash player 10 fix
Guys; A lot (8) people have allready asked me if i was going to fix the mess Adobe made and my answer is yes, i am working on it. This post is to assure you that the jQuery Flash based uploader i wrote in 2006 has been revived. The project will no longer be based on swfupload, since i added way to much code of my own into it. The new version is (looseley) based upon YUI uploader component, and off course i've taken a peek to see what FancyUpload does in their code. To be honest; they are both very good products and both have their pro's and con's. I am hoping to create a project which will be the best of both worlds and more (currently, approx. 80% code is my own work) I've allready put about 10 hours of work in the new jQuery upload plugin (which was originally hosted on http://uploader.webunity.nl/) but unfortunately it is not finished yet. Since i based the startcode (e.g. how to create an AS3 movieclip) on YUI, I must abide by their license, which is BSD. The uploader plugin (Javascript) is going to be included as full source, but the Actionscript file is going to be precompiled. This is due to the fact that i simply put to much work in it. Some stuff that i added; - A lot more and consistant event handlers - A lot more and better logging - Multiple simultanous (!!) uploads And, ported from my old version: - Queue managemen - Max file size - Max queue size - Max queue count The idea is to even make it possible to add files while you are allready uploading; sort of background file transfer so to say. Anyway; i'll hope to finish the Actionscript code tomorrow evening (it is now 20:00 here) and the demo's the day after that. Basically; by the end of the week you should have some working examples. Thank you for al your wonderfull feedback -- Gilles http://www.webunity.nl/
[jQuery] Re: How to gzip a javascript file | I am not able to find.
Do you have a link so that we can take a closer look at the response
headers associated with file requests?
In the past on shared hosts I had to go the route of ob_start and
ob_end_flush. This isn't terrible if you are using includes for your
header and footer.
At this point, assuming you have tried the above suggestions, it looks
like your options are narrow otherwise. You might want to contact
tech support and ask about gzip support. Good luck with that though.
Unless you get a tech. savvy support person this could be a waste of
your time.
On Oct 20, 1:38 pm, "Sridhar Kuppalli" <[EMAIL PROTECTED]>
wrote:
> Hi,
>
> My php_info(); shows these things
> _ENV["HTTP_ACCEPT_ENCODING"] ==> gzip,deflate
> HTTP_ACCEPT_ENCODING ==> gzip,deflate
> _SERVER["HTTP_ACCEPT_ENCODING"] ==> gzip,deflate
>
> Now i am adding headers to js file by inlcuding it in my php file.
> ob_start( 'ob_gzhandler' );
> echo join('',file('uitabs.js'));
> ob_end_flush();
> ?>
>
> Then i am including uitabs.php in my index.php file. Now gzip is happening.
>
> Can we do it automatically this one?
>
> Thanks & Regards
> Sridhar K N
>
>
>
> On Mon, Oct 20, 2008 at 6:55 PM, leveille <[EMAIL PROTECTED]> wrote:
>
> > Are you certain that you have enabled/loaded the deflate module on
> > your server? Add a phpinfo() page (I'm assuming you are writing a PHP
> > app based on earlier comments) and look for the section labeled
> > "Loaded Modules". In that section, look for "mod_deflate" as a loaded
> > module.
>
> > On Oct 19, 2:08 pm, "Sridhar Kuppalli" <[EMAIL PROTECTED]>
> > wrote:
> > > Hi Karl,
>
> > > Yes i am using apache.
> > > I have created a new .htaccess file with the below mentioned line and
> > added
> > > to root directory of my site.
> > > It started giving 500 internal server error.
>
> > > Then i have replaced that with this content specified in this url-
> >http://nathanbowers.com/wp-content/uploads/2008/04/htaccess.txt
>
> > > Now my Performance Grade has been changed to C(76) !!! :-) which is
> > really
> > > good, before it was D(60).
> > > Thanks for your help.
>
> > > But still my JS gzip is not happening. :-(
> >http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js==> 55KB
> > ==>
> > > Response time is only 594.http://mysites/jsfolder/myjsfile.js==> 17KB
> > ==>Response time is 1327.
>
> > > Why such a huge huge difference?
> > > Yslow is clearly showing that myjsfile.js is not gziped.
>
> > > Thanks & Regards
> > > Sridhar K N
>
> > > On Sun, Oct 19, 2008 at 9:13 PM, Karl Swedberg <[EMAIL PROTECTED]
> > >wrote:
>
> > > > Sridhar,
> > > > Are you using apache? Or are you using IIS?
>
> > > > If apache, you can create a .htaccess file and add this line to it:
>
> > > > AddOutputFilterByType DEFLATE text/javascript text/css
> > > > application/javascript application/x-javascript
>
> > > > If IIS, please take a look at the link I posted earlier.
>
> > > >http://www.keylimetie.com/Blog/2008/5/20/How-to-enable-HTTP-Compressi.
> > ..
>
> > > > MorningZ, glad to hear that the instructions in that linked page worked
> > for
> > > > you!
>
> > > > --Karl
>
> > > >
> > > > Karl Swedberg
> > > >www.englishrules.com
> > > >www.learningjquery.com
>
> > > > On Oct 19, 2008, at 9:01 AM, Sridhar Kuppalli wrote:
>
> > > > Thanks man,
>
> > > > Its really a good one, my request time for jquery library has been
> > reduced
> > > > by 50%.
> > > > In the similar way I have to do for other js files also. Is there any
> > way
> > > > to achive gziping?
> > > > I cannot configure apache.
>
> > > > Regards
> > > > Sridhar K N
>
> > > > On Sun, Oct 19, 2008 at 3:34 PM, poncz <[EMAIL PROTECTED]>
> > wrote:
>
> > > >> You can use
> > > >>http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
> > > >> it is minified, gzip, and the load is not on your servers.
> > > >> It is a free google ajax service.
>
> > > >> Enjoy,
>
> > > --
> > >
> > > Thanks & Regards
> > > S Kuppalli N
>
> --
>
> Thanks & Regards
> S Kuppalli N
[jQuery] Re: How to gzip a javascript file | I am not able to find.
Hi, My php_info(); shows these things _ENV["HTTP_ACCEPT_ENCODING"] ==> gzip,deflate HTTP_ACCEPT_ENCODING ==> gzip,deflate _SERVER["HTTP_ACCEPT_ENCODING"] ==> gzip,deflate Now i am adding headers to js file by inlcuding it in my php file. Then i am including uitabs.php in my index.php file. Now gzip is happening. Can we do it automatically this one? Thanks & Regards Sridhar K N On Mon, Oct 20, 2008 at 6:55 PM, leveille <[EMAIL PROTECTED]> wrote: > > Are you certain that you have enabled/loaded the deflate module on > your server? Add a phpinfo() page (I'm assuming you are writing a PHP > app based on earlier comments) and look for the section labeled > "Loaded Modules". In that section, look for "mod_deflate" as a loaded > module. > > On Oct 19, 2:08 pm, "Sridhar Kuppalli" <[EMAIL PROTECTED]> > wrote: > > Hi Karl, > > > > Yes i am using apache. > > I have created a new .htaccess file with the below mentioned line and > added > > to root directory of my site. > > It started giving 500 internal server error. > > > > Then i have replaced that with this content specified in this url- > http://nathanbowers.com/wp-content/uploads/2008/04/htaccess.txt > > > > Now my Performance Grade has been changed to C(76) !!! :-) which is > really > > good, before it was D(60). > > Thanks for your help. > > > > But still my JS gzip is not happening. :-( > http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js==> 55KB > ==> > > Response time is only 594.http://mysites/jsfolder/myjsfile.js==> 17KB > ==>Response time is 1327. > > > > Why such a huge huge difference? > > Yslow is clearly showing that myjsfile.js is not gziped. > > > > Thanks & Regards > > Sridhar K N > > > > On Sun, Oct 19, 2008 at 9:13 PM, Karl Swedberg <[EMAIL PROTECTED] > >wrote: > > > > > > > > > Sridhar, > > > Are you using apache? Or are you using IIS? > > > > > If apache, you can create a .htaccess file and add this line to it: > > > > > AddOutputFilterByType DEFLATE text/javascript text/css > > > application/javascript application/x-javascript > > > > > If IIS, please take a look at the link I posted earlier. > > > > >http://www.keylimetie.com/Blog/2008/5/20/How-to-enable-HTTP-Compressi. > .. > > > > > MorningZ, glad to hear that the instructions in that linked page worked > for > > > you! > > > > > --Karl > > > > > > > > Karl Swedberg > > >www.englishrules.com > > >www.learningjquery.com > > > > > On Oct 19, 2008, at 9:01 AM, Sridhar Kuppalli wrote: > > > > > Thanks man, > > > > > Its really a good one, my request time for jquery library has been > reduced > > > by 50%. > > > In the similar way I have to do for other js files also. Is there any > way > > > to achive gziping? > > > I cannot configure apache. > > > > > Regards > > > Sridhar K N > > > > > On Sun, Oct 19, 2008 at 3:34 PM, poncz <[EMAIL PROTECTED]> > wrote: > > > > >> You can use > > >>http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js > > >> it is minified, gzip, and the load is not on your servers. > > >> It is a free google ajax service. > > > > >> Enjoy, > > > > -- > > > > Thanks & Regards > > S Kuppalli N > -- Thanks & Regards S Kuppalli N
[jQuery] Re: pngFix and display:none
You just need to apply the pngfix to those elements as soon as they are shown. Nothing more, nothing less.. On Mon, Oct 20, 2008 at 5:59 PM, yabdab <[EMAIL PROTECTED]> wrote: > > I am seeing an issue in that POS browser IE6 that goes like this... > > pngFix() works only on images that are displayed. I have some hidden > divs (display:none) that contain png files that are reveled when > needed. But they are missing when I show() them. > > Any ideas what is happening to them? -- Isaak Malik Web Developer
[jQuery] Re: jQuery can't work if sending http header with text/xml
Have you tried using an 'application/xhtml+xml' header?
You could also put the MathML stuff inside an iframe in a XHTML page.
On Oct 20, 12:05 pm, jockey <[EMAIL PROTECTED]> wrote:
> I use perl as server-side language to generate pages dynamically.
> The problem is: if I use ==> $q->header(-type=>'text/html', -
> charset=>'utf-8'); <==
> jQuery works fluently.
> But if I use ==> $q->header(-type=>'text/xml', -charset=>'utf-8'); <==
> jQuery fail to do the job.
> I use MathML in my pages, so I have to send http header with text/xml.
> Can anyone solve the problem?
> Thanks a lot.
>
> partial html file content generated by perl:
> html #
>
> Hello World
> How are you
>
> html #
>
> jQuery file:
> jQuery #
> $(document).ready(function(){
> $("a").click(function(){
> $('peter').appendTo('#box');
> if($('#name').length){
> $('#name').show("slow");
> }else{
> alert("It doesn't exist.");
> }
> });});
>
> jQuery #
[jQuery] Re: Mouse-responsive scrolling content within a container, with mouse position and easing
It's quite a heavy page for this kind of effect, Flash would look much
smoother in most computers.
This looks a little better, but is still rough:
(caching the objects avoids looking up the DOM for each mousemove,
checking for a distance greater than 10 saves 9 unnecessary function
calls)
var $list = $('ul.projects-list');
var containerwidth = $('#projects-container').width();
var listwidth = $('ul.projects-list').width();
var mousepos = 1;
$('#projects-container').mousemove(function(e) {
var diff = e.pageX - mousepos;
if (diff > 10 || diff < -10) {
mousepos = e.pageX;
newX = (containerwidth - listwidth) * (e.pageX/containerwidth);
diff = parseInt(Math.abs( $list.css('left').substring(0,4)-
newX ));
$list.stop().animate({'left':newX},
{duration:diff*3,easing:'easeOutExpo'});
}
});
You should also change your hover effects to
$("li.project-strip").hover(
function() { $(this).stop().fadeTo(200, 1.0); },
function() { $(this).stop().fadeTo(800, 0.5); }
);
to avoid unwanted looping.
cheers,
- ricardo
On Oct 20, 3:54 am, dzeibin <[EMAIL PROTECTED]> wrote:
> Hi!
>
> I'm trying to emulate a Flash behavior I see quite often, like
> so:http://mgb-architecture.ca/
>
> I've implemented a one-to-one scrolling version here, but I would like
> it to be smoother, easing in to its final position based on the mouse
> position:http://www.jillanholt.ca/projects
>
> The current jquery code is like so:
>
> $('#projects-container').mousemove(function(e) {
> newX = ($('#projects-container').width() - $('ul.projects-
> list').width()) * e.pageX/$('#projects-container').width();
> $('ul.projects-list').css({left: newX});
>
> });
>
> So, that works great, but when I tried doing it with .animate() and
> easing, it becomes very jumpy (i.e. unusable) in Internet Explorer. It
> seemed like it was lining up animations as the mouse moved and just
> became paralyzed. Is this something where the event needs to interrupt
> any current animations each time it's triggered?
>
> Thanks in advance for any help you can offer!
>
> David
[jQuery] Re: using jquery to get at the img data???
Yes, Firefox supports canvas. Unfortunately IE does not... but I found this - http://ajaxian.com/archives/canvas-in-ie. I have not tried this so do not know whether it will work for you. Won't hurt to try though. :) On Tue, Oct 21, 2008 at 12:14 AM, whitewaterbug <[EMAIL PROTECTED]>wrote: > Canvas sounds like it might do the trick. Is canvas supported on IE and > firefox? > > I looked into dataurl and the other limitation is also the size of the > image must be small, which doesn't work for my purposes either. > > > > > On Mon, Oct 20, 2008 at 11:55 AM, Ca-Phun Ung <[EMAIL PROTECTED]> wrote: > >> On Mon, Oct 20, 2008 at 6:19 AM, whitewaterbug <[EMAIL PROTECTED]>wrote: >> >>> >>> I believe this would require a 2nd download of the image so that it is >>> within the applet. I am trying to get the actual image data into the >>> applet through javascript to applet communication or having the applet >>> access the DOM directly. >> >> >> I see, you might want to look into image "data: URL". Basically you could >> use a backend script, such as PHP, to convert your image into base64 data >> and insert that directly into HTML. Another method would be to use >> - insert the image into a canvas element, convert to base64 and extract as a >> string. >> >> >>> >>> Since the image data is downloaded as the HTML is being parsed by the >>> browser...I am not sure if I can get at the image data. >> >> >> You will not have this problem if you use a data url because the image >> data is injected directly into HTML. >> >> A downer is I don't think IE6 and 7 support data URLs. >> >> >> -- >> Ca-Phun Ung >> + http://yelotofu.com >> + css, django, hongkong, html, javascript, php >> > > -- Ca-Phun Ung + http://yelotofu.com + css, django, hongkong, html, javascript, php
[jQuery] Re: using jquery to get at the img data???
Canvas sounds like it might do the trick. Is canvas supported on IE and firefox? I looked into dataurl and the other limitation is also the size of the image must be small, which doesn't work for my purposes either. On Mon, Oct 20, 2008 at 11:55 AM, Ca-Phun Ung <[EMAIL PROTECTED]> wrote: > On Mon, Oct 20, 2008 at 6:19 AM, whitewaterbug <[EMAIL PROTECTED]>wrote: > >> >> I believe this would require a 2nd download of the image so that it is >> within the applet. I am trying to get the actual image data into the >> applet through javascript to applet communication or having the applet >> access the DOM directly. > > > I see, you might want to look into image "data: URL". Basically you could > use a backend script, such as PHP, to convert your image into base64 data > and insert that directly into HTML. Another method would be to use > - insert the image into a canvas element, convert to base64 and extract as a > string. > > >> >> Since the image data is downloaded as the HTML is being parsed by the >> browser...I am not sure if I can get at the image data. > > > You will not have this problem if you use a data url because the image data > is injected directly into HTML. > > A downer is I don't think IE6 and 7 support data URLs. > > > -- > Ca-Phun Ung > + http://yelotofu.com > + css, django, hongkong, html, javascript, php >
[jQuery] ANNOUNCE: Context Menu Plugin v1.0 - new plugin with themes, highly extensible
I've just released version 1.0 of my Context Menu plugin: http://plugins.jquery.com/project/cmenu ( plugin home: http://www.javascripttoolbox.com/lib/contextmenu/ ) Here is the description from the plugin page: This plugin enables you to display a custom context menu on right click in browsers that support it. This is commonly used in web applications that are simulating desktop behavior or wish to add advanced functionality for their users. There are other context menu plugins - so why did I write one? This one is extremely configurable, customizable, and extensible. If any part of the default behavior is not exactly what you need, it is very simple to override the default functionality without changing the plugin code. Several themes are included so you can display the context menus in a style that you pick. Writing your own themes is very simple. Understanding and customizing the CSS is straight-forward and documented. There are many examples showing off lots of the functionality here. The best way to see what this plugin can do is to try it out! http://www.javascripttoolbox.com/lib/contextmenu/ I hope it is useful to some of you. Feedback is of course appreciated. Matt Kruse
[jQuery] pngFix and display:none
I am seeing an issue in that POS browser IE6 that goes like this... pngFix() works only on images that are displayed. I have some hidden divs (display:none) that contain png files that are reveled when needed. But they are missing when I show() them. Any ideas what is happening to them?
[jQuery] Re: using jquery to get at the img data???
On Mon, Oct 20, 2008 at 6:19 AM, whitewaterbug <[EMAIL PROTECTED]>wrote: > > I believe this would require a 2nd download of the image so that it is > within the applet. I am trying to get the actual image data into the > applet through javascript to applet communication or having the applet > access the DOM directly. I see, you might want to look into image "data: URL". Basically you could use a backend script, such as PHP, to convert your image into base64 data and insert that directly into HTML. Another method would be to use - insert the image into a canvas element, convert to base64 and extract as a string. > > Since the image data is downloaded as the HTML is being parsed by the > browser...I am not sure if I can get at the image data. You will not have this problem if you use a data url because the image data is injected directly into HTML. A downer is I don't think IE6 and 7 support data URLs. -- Ca-Phun Ung + http://yelotofu.com + css, django, hongkong, html, javascript, php
[jQuery] validate plugin and radio button
hi
another little issue in my long form:)
i got 5 couples of radio button:
The validation rule against them must be:
- at least one radiobutton with value 'si' must be checked.
I added a classRule but apparently this doesn't work for
radiobuttons.
$.validator.addClassRules({
className: { required: function(element){
var id ;
var chk;
var val;
$(element).each(function(){
id =
$(this).attr('id');
chk =
$(this).attr('checked');
val =
$(this).val();
alert (id + ' '
+ chk + ' ' + val)
if ((val ==
'si') && (chk == true)){
return
true;
}
});
}
}
I put the alert to show that the plugin in its cycle takes into
consderation only the radiobutton with value 'si' (twice) and no the
seconds one with value no!
Is this possible or is just a mistake of mine?
Thanks Vitto
[jQuery] Re: JQuery Selector and Java Script Variable
@ricardobeat: Great! thank you for your help. I see that there are plenty of manners that can be used to retrieve the type of an element, now it's to choose the good one ;) . I'll use the ternary one for my code but I will also keep in mind the other functions you gave here for using them in my next coding @Remy: I did that already! ... but when i saw that the ouput was without any tag (stripped), i told myself that the the code won't have been recognized as xml but as text only. If i understand well, the script will parse the html tab and not the output tab ? Again thousand of thanks to all of you here ! you saved me from a violent headache !!
[jQuery] Re: Disabling jQuery on printing?
To be more constructive lets analyse what we're trying to do in the first
place. Based on the code posted am I right to assume that the maphilight()
method applied to $('.map') writes inline css / markup to highlight the map?
If so there are a few ways to remove these highlights for print. First
create a print stylesheet and add it to the HTML:
Then apply any reverse styles inside print.css, i.e. if you've added colours
remove them. If you've added additional markup that is not required in
print, hide them etc...
In order for print.css to effectively reverse the styles applied by the
maphilight() method I'd recommend favouring class over inline-style
Hope this helps :)
On Mon, Oct 20, 2008 at 10:54 PM, ricardobeat <[EMAIL PROTECTED]> wrote:
>
> In-line CSS modifications will remain. When you send the
> window.print() command, the page is printed *as it is* at the moment,
> including styling via Javascript. If something is affecting your print
> output, it is happening before you press 'print'.
>
> - ricardo
>
> On Oct 20, 6:39 am, "Ca-Phun Ung" <[EMAIL PROTECTED]> wrote:
> > On Mon, Oct 20, 2008 at 4:13 PM, iantresman <[EMAIL PROTECTED]>
> wrote:
> >
> > > I'm sure my jQuery scripts are doing something, because I when I REM
> > > them out, my printouts are fine.
> >
> > Could you post up a demo?
> >
> > --
> > Ca-Phun Ung
> > +http://yelotofu.com
> > + css, django, hongkong, html, javascript, php
>
--
Ca-Phun Ung
+ http://yelotofu.com
+ css, django, hongkong, html, javascript, php
[jQuery] Re: ui.tabs + cycle + WebKit = not working
http://www.petersurrena.com/
The first project that loads is a great example of the problem.
On Oct 20, 11:16 am, Mike Alsup <[EMAIL PROTECTED]> wrote:
> > This is ideal but does not work with webkit...ie and mozzila work
> > fine.
> >
> >
> >
> > <-- Cycle Div -->
> > <-- Tab Div -->
> > > include_once("portfolio/wrt.php");
> > ?>
> >
> >
>
> > here's the js
> >
> > $(function(){
> > // Create pagination element
> > $('#pager').before('').cycle({
> > fx: 'fade',
> > speed: 'fast',
> > timeout: 0,
> > pager: '#nav',
> > cleartype: 1
> > });
> > });
> >
>
> > Any idea on how to get the second option to work or is there a better
> > plugin to get the job done?
>
> Can you post a demo link? Also, no need to include "before(' id="nav">')" if that element is already in your markup.
>
> Mike
[jQuery] Re: ui.tabs + cycle + WebKit = not working
> This is ideal but does not work with webkit...ie and mozzila work
> fine.
>
>
>
> <-- Cycle Div -->
> <-- Tab Div -->
> include_once("portfolio/wrt.php");
> ?>
>
>
>
> here's the js
>
> $(function(){
> // Create pagination element
> $('#pager').before('').cycle({
> fx: 'fade',
> speed: 'fast',
> timeout: 0,
> pager: '#nav',
> cleartype: 1
> });
> });
>
>
> Any idea on how to get the second option to work or is there a better
> plugin to get the job done?
Can you post a demo link? Also, no need to include "before('')" if that element is already in your markup.
Mike
[jQuery] Re: Linkselect Plug-in Released...
Very cool! Excellent work! I like how you are able to change the entire look
purely through CSS. It also looks very adaptable. Thanks for sharing. :)
On Mon, Oct 20, 2008 at 9:57 PM, Dan G. Switzer, II <[EMAIL PROTECTED]
> wrote:
>
> My current employer has released another jQuery plug-in: the Linkselect
> jQuery Plug-in. This plug-in converts a normal element into a
> component that can be highly stylized via CSS. While there are a number of
> similar plug-ins already, there are a several of key differences which we
> think make this unique:
>
> * Drop down menus are intelligently positioned to stay in the viewport
> * Specifically designed to work in a limited amount of real estate
> * Specifically designed to work well with elements aligned on the right
> edge
> of the viewport
> * Full keyboard support (emulates IE6's element)
> * Feature rich API (for updating value, replacing options, disabling
> elements, etc)
> * Many callback features to control behavior (on change, on init, on
> format,
> etc.)
> * Supports tabindex
>
> I blogged about this on Friday and also posted a little video demo:
>
> http://blog.pengoworks.com/index.cfm/2008/10/17/Linkselect-jQuery-Plugin-Rel
> eased
>
> You can download the plug-in from:
> http://www.givainc.com/labs/linkselect_jquery_plugin.htm
>
> Here's an example page:
> http://www.givainc.com/labs/linkselect_example.htm
>
> -Dan
>
>
--
Ca-Phun Ung
+ http://yelotofu.com
+ css, django, hongkong, html, javascript, php
[jQuery] jQuery can't work if sending http header with text/xml
I use perl as server-side language to generate pages dynamically.
The problem is: if I use ==> $q->header(-type=>'text/html', -
charset=>'utf-8'); <==
jQuery works fluently.
But if I use ==> $q->header(-type=>'text/xml', -charset=>'utf-8'); <==
jQuery fail to do the job.
I use MathML in my pages, so I have to send http header with text/xml.
Can anyone solve the problem?
Thanks a lot.
partial html file content generated by perl:
html #
Hello World
How are you
html #
jQuery file:
jQuery #
$(document).ready(function(){
$("a").click(function(){
$('peter').appendTo('#box');
if($('#name').length){
$('#name').show("slow");
}else{
alert("It doesn't exist.");
}
});
});
jQuery #
[jQuery] Edit table
Hello.
I was wondering if you guys knew how to edit a table cell with JQuery
and update it? I'm currently using JAVA/Spring for my webapp but I
can't seem to figure out how to update a table cell within my jsp-page
in the database.
I have tried the plugin UITableEdit and tableEditor but the later
didn't work with the latest version of JQuery.
Any tip would help!
Best regards
// Olle Asplund
[jQuery] Re: How to gzip a javascript file | I am not able to find.
Are you certain that you have enabled/loaded the deflate module on
your server? Add a phpinfo() page (I'm assuming you are writing a PHP
app based on earlier comments) and look for the section labeled
"Loaded Modules". In that section, look for "mod_deflate" as a loaded
module.
On Oct 19, 2:08 pm, "Sridhar Kuppalli" <[EMAIL PROTECTED]>
wrote:
> Hi Karl,
>
> Yes i am using apache.
> I have created a new .htaccess file with the below mentioned line and added
> to root directory of my site.
> It started giving 500 internal server error.
>
> Then i have replaced that with this content specified in this
> url-http://nathanbowers.com/wp-content/uploads/2008/04/htaccess.txt
>
> Now my Performance Grade has been changed to C(76) !!! :-) which is really
> good, before it was D(60).
> Thanks for your help.
>
> But still my JS gzip is not happening.
> :-(http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js==> 55KB ==>
> Response time is only 594.http://mysites/jsfolder/myjsfile.js==> 17KB
> ==>Response time is 1327.
>
> Why such a huge huge difference?
> Yslow is clearly showing that myjsfile.js is not gziped.
>
> Thanks & Regards
> Sridhar K N
>
> On Sun, Oct 19, 2008 at 9:13 PM, Karl Swedberg <[EMAIL PROTECTED]>wrote:
>
>
>
> > Sridhar,
> > Are you using apache? Or are you using IIS?
>
> > If apache, you can create a .htaccess file and add this line to it:
>
> > AddOutputFilterByType DEFLATE text/javascript text/css
> > application/javascript application/x-javascript
>
> > If IIS, please take a look at the link I posted earlier.
>
> >http://www.keylimetie.com/Blog/2008/5/20/How-to-enable-HTTP-Compressi...
>
> > MorningZ, glad to hear that the instructions in that linked page worked for
> > you!
>
> > --Karl
>
> >
> > Karl Swedberg
> >www.englishrules.com
> >www.learningjquery.com
>
> > On Oct 19, 2008, at 9:01 AM, Sridhar Kuppalli wrote:
>
> > Thanks man,
>
> > Its really a good one, my request time for jquery library has been reduced
> > by 50%.
> > In the similar way I have to do for other js files also. Is there any way
> > to achive gziping?
> > I cannot configure apache.
>
> > Regards
> > Sridhar K N
>
> > On Sun, Oct 19, 2008 at 3:34 PM, poncz <[EMAIL PROTECTED]> wrote:
>
> >> You can use
> >>http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
> >> it is minified, gzip, and the load is not on your servers.
> >> It is a free google ajax service.
>
> >> Enjoy,
>
> --
>
> Thanks & Regards
> S Kuppalli N
[jQuery] ui.tabs + cycle + WebKit = not working
Hello,
I am running into a problem on my website when the jQuery cycle plugin
is used with ui.tabs. When a portfolio item has multiple images, the
Cycle plugin is used for pagination. I chose this plugin since it's
easy to add a description / file links / web address and, I didn't
want image thumbnails so pagination is the best option.
http://www.petersurrena.com/
For example, this works but with multiple projects you end up with
multiple pager divs which overlap. Not good. It seems pointless to
create multiple pager objects, it would end up being a mess.
<-- Tab Div -->
<-- Cycle Div -->
This is ideal but does not work with webkit...ie and mozzila work
fine.
<-- Cycle Div -->
<-- Tab Div -->
here's the js
$(function(){
// Create pagination element
$('#pager').before('
