|
Dromio posted:I'm trying to integrate my jQuery-heavy page into a site that was already using scriptaculous/prototype. I've put "jQuery.noConflict();" so it runs immediately and I've replaced all instances of "$" with "jQuery" in my code. Are you sure jQuery is loaded at the time that function is called? Wrapped everything in a jQuery(function(){})?
|
#
?
Oct 15, 2008 21:40
|
|
|
|
| # ? Apr 25, 2024 02:10 |
|
|
LOLLERZ posted:Are you sure jQuery is loaded at the time that function is called? Wrapped everything in a jQuery(function(){})?
|
|
#
?
Oct 15, 2008 21:41
|
|
|
I'll just jump right in. I have a bunch of these... code:code:code: Suggestions? Edit: Nothing with .map will work, because .map only operates on arrays, not objects. This alerts exactly what I want my resulting object to look like. I know exactly what I want to do, I just don't know how. code:epswing fucked around with this message at 17:51 on Oct 31, 2008 |
|
#
?
Oct 31, 2008 17:44
|
|
|
epswing posted:I'll just jump right in. Hopefully this puts you in the right direction. code:
|
|
#
?
Oct 31, 2008 17:49
|
|
|
sonic bed head posted:Hopefully this puts you in the right direction. Much thanks, this is what I'm using now: code:
|
|
#
?
Oct 31, 2008 18:12
|
|
|
epswing posted:Much thanks, this is what I'm using now: Awesome I have a question in general about jQuery, and this is coming as a prototype/scriptaculous man myself. Why would you need a .val() method for a dom element instead of just getting the field .value? Isn't there some overhead associated with calling a function instead of getting a property? Is there something I'm missing as to how that works? I can see the slight use of $F(id) for the value of an input box in prototype, because at least it's less typing but .val() and .value are the exact same amount of characters.
|
|
#
?
Oct 31, 2008 21:34
|
|
|
sonic bed head posted:Awesome You don't really, but .val() is a setter and a getter, so it's "habit" to use that.
|
|
#
?
Oct 31, 2008 21:37
|
|
|
Dromio posted:I'm trying to integrate my jQuery-heavy page into a site that was already using scriptaculous/prototype. I've put "jQuery.noConflict();" so it runs immediately and I've replaced all instances of "$" with "jQuery" in my code. I am assuming that you already went through the plugins to check to see if they had any instances of "$" in them, and also tried the extreme version of noConflict, noConflict(true). That said, what version of jQuery are you using? In 1.2.6, cloneNode only comes into play in the clone function in jQuery, so you might want to start looking through the plugins for that kind of thing. It sounds like one of the plugins is using clone on an object that isn't a dom node, or is accidentally overwriting the cloneNode function. If you tell us the name of the plugins, I could help a bit more.
|
|
#
?
Nov 1, 2008 02:31
|
|
|
oryx: Thanks, but I got it worked out. So many days ago I don't even remember how. Sorry I didn't post the resolution at the time, I usually try to do that.
|
|
#
?
Nov 1, 2008 13:30
|
|
|
Dromio posted:oryx: Thanks, but I got it worked out. So many days ago I don't even remember how. Sorry I didn't post the resolution at the time, I usually try to do that. I had a similar problem which was attributed to using an older version of scriptaculous. The explanation I heard was that it was prototyping the default javascript array, causing bugs in other stuff, but I'm not quite sure about that last part. -- I'm wondering if there's a way to override some effects, or just stop them. What I'd like to do is basically having a div that will gradually fade out, unless the mouse enters it, where it'd gain 100% opacity back. The problem is that even if I use $('#mydiv').hide(), or some flavour of $.fadeTo(), $.fadeIn() or $.fadeOut(), I can't seem to be able to stop the fading. What would be the best way of doing this?
|
|
#
?
Nov 3, 2008 19:48
|
|
|
MononcQc posted:What would be the best way of doing this? Would this work? code:Zorilla fucked around with this message at 21:54 on Nov 3, 2008 |
|
#
?
Nov 3, 2008 21:03
|
|
|
Zorilla posted:Would this work? code:The fade is necessary because otherwise, moving the mouse over from the link to the div (about 10 px away) is impossible as stuff instantly disappears. Maybe I'm thinking of it wrong, but assuming the fade is really what I need (looks nifty, too), the problem is that going this way, the actions are kind of like this: code:I guess there must be some other way of making things pretty and usable.
|
|
#
?
Nov 3, 2008 21:34
|
|
|
Unfortunately, I'm having trouble visualizing exactly what's going on, but that's my fault. I do see that you're not using an explicit fade speed on the mouseover events, so it's probably defaulting to 400ms. I assume you want a normal speed fade-in when an element is clicked, but you want to make it instant if the element that is fading in has the cursor over it, right? Also, you probably already know this, but you can stack your methods: php:<?
$('a.someclass')
.bind('mouseover', function(){
$('#mydiv').fadeIn();
// <snip> positionning and content stuff
})
.bind('mouseleave', function(){
$('#mydiv').fadeOut();
});
$('#mydiv')
.bind('mouseenter', function(){
$(this).fadeIn();
})
.bind('mouseleave', function(){
$(this).fadeOut();
});
?>Better yet, the hover() method is great when you need to handle both mouseover and mouseout at once. (any reason you were using Microsoft-only events like mouseenter and mouseleave?) php:<?
$('a.someclass').hover(
function() {
$('#mydiv').fadeIn();
// <snip> positionning and content stuff
},
function() {
$('#mydiv').fadeOut();
}
);
$('#mydiv').hover(
function() {
$(this).fadeIn();
},
function() {
$(this).fadeOut();
}
);
?>edit: I think I see what you're talking about. If you move your mouse back and forth over the blue links on the jQuery's documentation for hover(), you can see each event just queues up instead of interrupting each other. Zorilla fucked around with this message at 22:03 on Nov 3, 2008 |
|
#
?
Nov 3, 2008 21:46
|
|
|
Zorilla posted:edit: I think I see what you're talking about. If you move your mouse back and forth over the blue links on the jQuery's documentation for hover(), you can see each event just queues up instead of interrupting each other. Exactly, that's the problem. I'd like to be able to interrupt the animations, which seems impossible to do. I guess I'll have to make my own fading system with the css opacity property. That's pretty bad.
|
|
#
?
Nov 3, 2008 22:03
|
|
|
MononcQc posted:I'd like to be able to interrupt the animations, which seems impossible to do. I just found this: http://docs.jquery.com/Effects/stop Sounds like just what you were looking for. Try putting $(this).stop().show() (or fadeIn(0), whatever works) on your mouseout events and see what happens. Zorilla fucked around with this message at 22:11 on Nov 3, 2008 |
|
#
?
Nov 3, 2008 22:08
|
|
|
Zorilla posted:I just found this: Doesn't work too well with fadeIn and fadeOut, but with animate({opacity:'x'},time), it works fine! Thanks!
|
|
#
?
Nov 3, 2008 22:25
|
|
|
MononcQc posted:Doesn't work too well with fadeIn and fadeOut, but with animate({opacity:'x'},time), it works fine! Thanks! Does that work cross-browser? If not, you may want to also animate filter: alpha(opacity='x') as well (where x goes from 0 to 100) just to make sure things work in IE. Also, this looks even better: http://docs.jquery.com/Effects/dequeue Zorilla fucked around with this message at 22:44 on Nov 3, 2008 |
|
#
?
Nov 3, 2008 22:31
|
|
|
So you got it working? I'd be interested in this, can you post a working example?
|
|
#
?
Nov 4, 2008 02:35
|
|
|
epswing posted:So you got it working? I'd be interested in this, can you post a working example? IE still fucks up sometimes, but the way it does is completely acceptable to me. I don't exactly get why fadeIn() and fadeOut() wouldn't cooperate with stop, but eh, animate() did it. -- Zorilla, alpha(opacity='x') is not necessary. You can find this bit of code in the jQuery source: code:
|
|
#
?
Nov 4, 2008 17:12
|
|
|
I have a bit of code in jQuery that isn't working as I expect at all.code:
|
|
#
?
Nov 14, 2008 20:06
|
|
|
sonic bed head posted:I'm expecting this to on the first click of a main category, make it 50px and then on subsequent clicks, close the previous one, and then continue making the newly clicked one 50px. For some reason when I try this code, it just bounces the first click up and down - from 50 to 20px. Also, I don't understand why I am only logging the clicked div rather nothing being logged because it should never enter that line. What am I doing incorrectly here? I don't know the exact details of this, but maybe the $(this).animate({height: "50px"}); line needs to be inside an else portion of the if statement? In its current state, it looks like it runs no matter what. How about this: php:<?
$(function(){
$("#mainCategories").empty();
var oldOne = false;
jQuery.each(mainCats, function(i, val) {
$("#mainCategories").append("<div class=\"mainCats\">"+val+"</div>");
$(".mainCats").click(function() {
if (this != oldOne) {
// First click
$(this).animate({height: "50px"});
oldOne = this;
} else {
// Subsequent clicks
console.log("oldOne: "+oldOne);
$(oldOne).animate({height: "20px"});
}
});
});
});
?>(edit: that solution was likely wrong. It probably should have looked like this: ) php:<?
$(function(){
$('#mainCategories').empty();
var oldOne = false;
jQuery.each(mainCats, function(i, val) {
$('#mainCategories').append('<div class="mainCats">'+val+'</div>');
});
$('.mainCats').click(function() {
$(this).animate('height', '50px');
if (oldOne) $(oldOne).animate('height', '20px');
oldOne = this;
});
});
?>Zorilla fucked around with this message at 23:58 on Nov 14, 2008 |
|
#
?
Nov 14, 2008 20:37
|
|
|
Zorilla posted:I don't know the exact details of this, but maybe the $(this).animate({height: "50px"}); line needs to be inside an else portion of the if statement? In its current state, it looks like it runs no matter what. How about this: Ah! I figured it out. Only after seeing you clean up my code did I think about it. I'm attaching those event handlers inside a .each loop. so it is getting added ~20 times for each .mainCats div. Thank you, it's all fixed now
|
|
#
?
Nov 14, 2008 20:46
|
|
|
Cool- I screwed up a line or two, so don't expect it to work right away (the part where I wrote this.oldOne was totally wrong) edit: actually, my whole thing was probably wrong. Oh well, it's fixed by now anyway. Zorilla fucked around with this message at 21:02 on Nov 14, 2008 |
|
#
?
Nov 14, 2008 20:48
|
|
|
I guess this is more of an xpath thing, but how can locate all anchor elements where the href is blank?code:
|
|
#
?
Nov 27, 2008 08:56
|
|
|
nbv4 posted:I guess this is more of an xpath thing, but how can locate all anchor elements where the href is blank? As far as I know, XPath and CSS3 selectors (what jQuery uses) use totally separate syntaxes, even if they look really similar. You probably want $('a[href=""']) Zorilla fucked around with this message at 20:17 on Nov 27, 2008 |
|
#
?
Nov 27, 2008 20:14
|
|
|
^^ before I had my links as "<span class="fake_anchor" onclick="[blah]">text</span>" but once I found jQuery, I changed all the "fake anchors" to anchors, but for some dumb reason, forgot to change the <\span>'s to </a>'s. Oops. New question: code:Also, I kind of accidentally stumbled onto innerHeight(). Is this a jQuery function and therefore cross broswer, or a javascript function and therefore non cross browser? I can't find it documented anywhere. I know there is an attribute called innerHeight (which most definitely not cross browser supported), but not the function...
|
|
#
?
Dec 7, 2008 13:04
|
|
|
nbv4 posted:^^ before I had my links as "<span class="fake_anchor" onclick="[blah]">text</span>" but once I found jQuery, I changed all the "fake anchors" to anchors, but for some dumb reason, forgot to change the <\span>'s to </a>'s. Oops. It is definitely a jQuery function. I can't find the documentation either but here's the source: code:
|
|
#
?
Dec 7, 2008 17:31
|
|
|
sonic bed head posted:It is definitely a jQuery function. I can't find the documentation either but here's the source: It's in the CSS section: http://docs.jquery.com/CSS code:
|
|
#
?
Dec 7, 2008 18:20
|
|
|
Any ideas on a good way to animate a growing border around a positioned div? I've got an absolutely positioned div on my page that I want to "highlight" for the user if they cannot find it. I wanted to do this by drawing a red border around it that grows/shrinks to draw their eye. But since the border is included "inside" the div rectangle, the text ends up moving down/right to accommodate the growing border. Is there an easy way to handle this that I'm missing?
|
|
#
?
Jan 5, 2009 17:37
|
|
|
Dromio posted:Any ideas on a good way to animate a growing border around a positioned div? I've got an absolutely positioned div on my page that I want to "highlight" for the user if they cannot find it. I wanted to do this by drawing a red border around it that grows/shrinks to draw their eye. But since the border is included "inside" the div rectangle, the text ends up moving down/right to accommodate the growing border. Borders, padding, and margins aren't included in the width and height definitions of a block element. This means that, given a box with a constant 300px width, it will still get bigger if the border gets thicker, pushing everything inside down and to the right. You might try animating the width and height of the box down the same number of pixels the border thickens to. I don't know if that will end up looking jumpy or jerky though.
|
|
#
?
Jan 5, 2009 18:50
|
|
|
Zorilla posted:Borders, padding, and margins aren't included in the width and height definitions of a block element. This means that, given a box with a constant 300px width, it will still get bigger if the border gets thicker, pushing everything inside down and to the right. I think I'll just have to come up with another method of highlighting the area.
|
|
#
?
Jan 5, 2009 20:55
|
|
|
Dromio posted:Yes, this is my problem exactly. I tried animating the position AND border size at the same time, but like you said, it ended up looking kind of jumpy.
|
|
#
?
Jan 5, 2009 22:20
|
|
|
I've used some of the jQuery plugins and they've worked well for me. The validation plugin is a pretty nice way to validate user input on a form. Here's an example of it in use. Gone Fission fucked around with this message at 20:46 on Jan 8, 2009 |
|
#
?
Jan 8, 2009 20:44
|
|
|
This is probably painfully obvious, but I want to run a function I have defined elsewhere in my code after a jQuery chain is done. How do I do that? currently: code:code:
|
|
#
?
Jan 21, 2009 19:22
|
|
|
Lumpy posted:This is probably painfully obvious, but I want to run a function I have defined elsewhere in my code after a jQuery chain is done. How do I do that? You want to be writing a plugin to jQuery, which is as simple as: [code] jQuery.myFunction = function() { // your code here return jQuery; // this maintains chaining }; [/php] http://docs.jquery.com/Plugins/Authoring for their docs then jQuery('#someEl').empty().myFunction(); will work, and so will jQuery.myFunction().hide(); etc
|
|
#
?
Jan 21, 2009 19:48
|
|
|
KuruMonkey posted:You want to be writing a plugin to jQuery, which is as simple as: Thanks, I knew it would be something simple 
|
|
#
?
Jan 21, 2009 20:55
|
|
|
This is pretty cool, it does the whole default text that disappears when you click it. It also has it in the background that text will never get submitted to you: http://github.com/hpoydar/jquery-form-prompt/tree/master
|
|
#
?
Jan 22, 2009 01:32
|
|
|
Pardot posted:This is pretty cool, it does the whole default text that disappears when you click it. It also has it in the background that text will never get submitted to you: http://github.com/hpoydar/jquery-form-prompt/tree/master From it's documentation: quote:Seemingly populate form inputs with text that disappears when the field is focussed. Works by not actually modifying the form field at all, instead an overlay div with the prompt text is added to the DOM. This approach works better than direct form field modification with AJAX-submitted forms and components.
|
|
#
?
Jan 22, 2009 01:48
|
|
|
I'm completely stuck with a Cluetip issue. Ive set activation to 'click' and sticky to 'true'. But I want to make it so that if another Cluetip link is clicked whilst one is already open, it will close the current one and open the new one that the user has clicked. I hope that made sense. Essentially, can I close open Cluetips when the user clicks to open another one? It only seems to close the currently open one if activation is set to hover. My set up is as follows: code:EDIT: gently caress, never mind, it looks like there was some corruption in the ClueTip file. All fixed now. Warbling Castrato fucked around with this message at 12:40 on Jan 22, 2009 |
|
#
?
Jan 22, 2009 12:29
|
|
|
|
| # ? Apr 25, 2024 02:10 |
|
|
supster posted:From it's documentation: I'm guessing because you're not messing with the form fields themselves, which eliminates the possibility of someone submitting the "example" text unless they manually type it in.
|
|
#
?
Jan 22, 2009 14:01
|
|
