Re: [jQuery] need help with simple jQuery problem
Hi Rory,
I will try to give you a detailed explanation.
The file expand.js contains two scripts: the expandAll() plug-in and the
small toggler() plug-in.
1.) expandAll()
- generates the switch 'Expand All/Collapse All' (or, in your case, 'go
ahead.../ ...go back');
- when the 'switch' is clicked, the plug-in toggles the visibility of the
matched elements;
- when the 'switch' is clicked, the strings 'Expand All' / 'Collapse All'
(or 'go ahead... ' / ' ...go back') are swapped;
- if the HTML code consists of pairs of triggers and collapsible sections,
the plug-in toggles the class of the trigger elements. Your code does not
contain such pairs. You have only the generated 'switch', and one
collapsible section.
2.) toggler()
- this script is needed if the HTML code consists of pairs of triggers and
collapsible sections, e.g.,
div class=container
h4 class=expandTitle 1/h4
div class=collapse.../div
h4 class=expandTitle 2/h4
div class=collapse.../div
/div
As I said above, your page does not contain such a structure.
So, you need only the expandAll() plug-in.
In your HTML code, you call the plug-ins expandAll() and toggler() with the
following chunk of code:
$(function() {
$(#outer).expandAll({trigger: span.expand, ref: div.demo});
$(#outer div.demo span.expand).toggler({method: toggle, speed :
1});
});
All you need is expandAll().
When you call the plug-in, you'll want to change some of the default options
because you want a 'slide' effect with duration 'slow', i.e., 600
milliseconds.
Replace the above code with this:
$(function() {
$(#outer).expandAll({
ref: div.demo,
showMethod: slideDown,
hideMethod: slideUp,
speed: 600
});
});
That's all.
Please, let me know if this explanation is clear enough.
Regards,
Adriana
Rory Bernstein wrote:
Hi Adriana,
Adriana, I am honored that you wrote in to help me; it is, or course,
your script I am trying to work with.
I do not understand what you are asking me to do; can you please give
more info/context? Are you saying that I am missing the lines of code
you put in your response? If so, where do I put the code?
I am truly a novice, as you see.
Thank you so much,
Rory
On Jan 20, 9:36 am, Adriana P adipa...@yahoo.com wrote:
Hi Rory,
You need only the expandAll() plug-in:
$(function() {
$(#outer).expandAll({trigger: span.expand, ref: div.demo,
showMethod: slideDown, hideMethod: slideUp, speed: 600});
});
Regards,
Adriana
Rory Bernstein wrote:
Hello,
I am a total jQuery novice, and I tried to use jQuery for a project
but I'm having trouble.
http://www.rorybernstein.com/stage/index2.html
When you click the blue go ahead link, it expands the hidden div,
revealing content. I want the effect to be a slide effect, as on
this sample page:
http://adipalaz.awardspace.com/experiments/jquery/expand.html
From these various examples, I want the slideToggle effect -
slideToggle (slow), as shown in section 2 of the above link.
I cannot figure out what is wrong; my toggle link does work (it
expands the hidden div), but I do not know how to get it to slide at
the speed shown in the sample.
Any help would be appreciated.
Thanks,
Rory
--
View this message in
context:http://old.nabble.com/need-help-with-simple-jQuery-problem-tp27228125...
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
--
View this message in context:
http://old.nabble.com/need-help-with-simple-jQuery-problem-tp27228125s27240p27260787.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] need help with simple jQuery problem
Hi Rory,
You need only the expandAll() plug-in:
$(function() {
$(#outer).expandAll({trigger: span.expand, ref: div.demo,
showMethod: slideDown, hideMethod: slideUp, speed: 600});
});
Regards,
Adriana
Rory Bernstein wrote:
Hello,
I am a total jQuery novice, and I tried to use jQuery for a project
but I'm having trouble.
http://www.rorybernstein.com/stage/index2.html
When you click the blue go ahead link, it expands the hidden div,
revealing content. I want the effect to be a slide effect, as on
this sample page:
http://adipalaz.awardspace.com/experiments/jquery/expand.html
From these various examples, I want the slideToggle effect -
slideToggle (slow), as shown in section 2 of the above link.
I cannot figure out what is wrong; my toggle link does work (it
expands the hidden div), but I do not know how to get it to slide at
the speed shown in the sample.
Any help would be appreciated.
Thanks,
Rory
--
View this message in context:
http://old.nabble.com/need-help-with-simple-jQuery-problem-tp27228125s27240p27241857.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] jQuery 1.4 cross domain post bug?
I have a webservice sitting on my https server that accepts the POST
verb and responds with some JSON.
If I build a simple html form like
form method=post action=https://myserver.com/myWS;
input type=submit/
input type=hidden name=emailAddress value=a...@a.com /
input type=hidden name=password value=uk /
/form
it will return the correct json data, with content type application/
json, and the browser will ask to save the result. When I look at the
data it is 100% correct
if I try to access it with jquery using
$.post(https://myserver.com/myWS;, { emailAddress: a...@a.com,
password: uk }, function(data) { alert(hi!); }, json);
the call back will never execute. When I check firebug, in the net
panel, I can see the call go out (first the OPTIONS call which
completes successfully, then the POST) however I cannot view the
actual results. In the Console panel, the call is in red so firebug
thinks there is some kind of error.
Is there something I'm missing with how to handle cross domain POSTs
that return json data?
[jQuery] JQuery Validate div selector issues
Hi Guys
I am trying to get validate to work, but I am soo close and yet soo
far!
I think the problem is the selector and way i append the error or
valid classes to the label, or specify the element for errors?
Can anyone see the mismatch or problem?
HTML example...
[code]div class=namedivCompany Name:/div
div class=textdiv
div class=inputdivinput name=CompanyName
id=CompanyName
type=text class=input-text/ value=?if(isset($this-
company_name)){ echo $this-company_name;};?/div
div class=inputrightdiv
id=img_CompanyName/div
/div
div class=inputbottom-text
id=error_CompanyName?php echo
$this-error_array['company_name']; ?/div
[/code]
where the inputrightdiv is what holds my todo image,
then i want it replaced with inputrightdiv-valid which shows my nice
green tick image!
Jquery Validation initialization( i have taken out extra options for
simplicity )...
[code]
script
$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $(#recruiter_signup).validate({
rules: {
CompanyName: required
},
messages: {
CompanyName: Please ensure you have entered your
company name.
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
error.appendTo(element.parent().parent());
},
// Set Error Element
errorElement: div.inputrightdiv,
// Focus in textbox
focusInvalid: false,// show all form error at a time
// Set Error Class
//errorClass: error,
errorClass:inputrightdiv-error,
// specifying a submitHandler prevents the default submit, good
for
the demo
submitHandler: function() {
alert(submitted!);
},
// set this class to error-labels to indicate valid fields
success: function(label) {
label.addClass('inputrightdiv-valid');
}
});
});
/script[/code]
thanks for any tips or eagle eyes :)
[jQuery] Re: ClueTip focus/blur trouble
hi
i m karthick,i m ding MCA in VIT...for me honey well company is
coming for placement so can u give any model paper
thank u
2009/10/26 Shawn sgro...@open2space.com
Thanks Karl. I'll look at this more in a bit. but from what I can see I
think you have a solution for me..
Shawn
Karl Swedberg wrote:
Hi Shawn,
Here is what I'd probably do:
After you call $this.cluetip( ...), unbind the blur event:
$this.unbind('blur.cluetip');
Then you can handle the closing of the clueTip however you want using
$(document).trigger('hideCluetip');
Maybe something like this:
$('#cluetip').hover(function() {
$(this).data('hovered', true);
}, function() {
$(this).removeData('hovered');
});
$this.blur(function() {
setTimeout(function() {
if (!$('#cluetip').data('hovered')) {
$(document).trigger('hideCluetip');
}
}, 100);
});
You'll have to add the click handler to the list items, too, of course.
Hope that gets you on the right track.
--Karl
Karl Swedberg
www.englishrules.com http://www.englishrules.com
www.learningjquery.com http://www.learningjquery.com
On Oct 22, 2009, at 6:08 PM, Shawn wrote:
Hi Gang.
I'm working with ClueTip and have run into some oddities.
In particular, I want to show ClueTip when a textbox receives focus. The
source shows me that I can use activation:'focus' for this and that will
result in the cluetip showing on focus and disappearing on blur. Showing the
cluetip is working fine, blurring is not.
The code I have is this:
$this.cluetip({
activation: 'focus',
local: true,
showTitle: false,
sticky: true,
mouseOutClose: true,
arrows: true,
closeText: strongX/strong,
closePosition: title
}).focus( function (){
$(opts.source).children().removeClass(opts.hover); });
The .focus() method that I have here is simply resetting the classes on
the items the user may interact with.
I'm using ClueTip to provide a rapid selection tool - similar to a drop
down list, but without the drop down list UI. (large number of options,
needing HTML for formatting, etc.) The idea is that when the cursor arrives
at the textbox, the cluetip shows and the user can use either the mouse to
click an item, or the up/down keys and enter to do the same. Where I am
running into problems is with the click selection. If I add a blur handler
to the above code:
.blur( function () { $(document).trigger('hideCluetip'); })
then things work well for keyboard selection and blurring, but if I click
instead, the click event never happens. Because, clicking on the cluetip
triggers the blur of the textbox which closes the cluetip before the click
can be handled. I suspect this may be partly why the onblur isn't working
within ClueTip as well - the logistics seem rather complex...
So I'm looking for suggestions on how to get this running properly. OR
for a plugin that provides similar functionality already. Thanks for any
feedback.
Shawn
[jQuery] Re: $.post cross domain first sends an OPTIONS verb?
Were you able to find a solution to get it working in Firefox?
Thank you
david
On Oct 1, 10:25 am, Vitaly Piven vitaly.pi...@gmail.com wrote:
Hello David,
I have similar problem . $.post() sends some OPTIONS request instead
of expected POST (according to logs of web server).
On 25 сен, 21:32, David P dpio...@gmail.com wrote:
I use $.post like so:
$.post(http://mydomain.com/some/webservice;, $.toJSON({ emailAddress:
emailAddress }), callback, json);
this works great..the response of the POST is a json string and that
is used in the callback..now I added https:
$.post(https://mydomain.com/some/webservice;, $.toJSON
({ emailAddress: emailAddress }), callback, json);
so it is now a cross domain post...in firebug I see that instead of
POST'ing like in the http case..it first is sending an OPTIONS
verb..why? The webservice doesn't know how to respond to that and
gives a 403 forbidden...I need it to just send the POST like it did
when it was on the same domain...
Any insight?
[jQuery] $.post cross domain first sends an OPTIONS verb?
I use $.post like so:
$.post(http://mydomain.com/some/webservice;, $.toJSON({ emailAddress:
emailAddress }), callback, json);
this works great..the response of the POST is a json string and that
is used in the callback..now I added https:
$.post(https://mydomain.com/some/webservice;, $.toJSON
({ emailAddress: emailAddress }), callback, json);
so it is now a cross domain post...in firebug I see that instead of
POST'ing like in the http case..it first is sending an OPTIONS
verb..why? The webservice doesn't know how to respond to that and
gives a 403 forbidden...I need it to just send the POST like it did
when it was on the same domain...
Any insight?
[jQuery] Improving jquery performance on this site..(stop stutter)
Hey group! I am near completion on a site I chose to use Jquery for rather than Flash for a client. While some flash is used as a background image, the content is HTML and Jquery for effects. The issue as i see is stuttering and not smooth jquery actions in sliding etc on page load. Is there a better way hold a few seconds to ensure all page data in content and images are loaded and then trigger the flash and jquery actions? Or maybe preload the page on the page before (index.php) and then goto the required page? As i say simply i want to try to help out the initial page loading effects like the slide to stop it stuttering. http://scotche.gg/newsu thanks for any ideas or pointers.. scotch
[jQuery] Re: get parent where
$(this).closest(div).attr(id)
[jQuery] Validation plugin - submit form without validation
I'm using the Validation plugin for JQuery and was wondering if there was a function to submit the form without causing it to validate the form. I have a table with a list of radio-buttons and above that is a drop down list of states. The drop down list of states is used to filter the table rows and when the selected item changes it posts-back to the server (via $(#frm).submit()). I don't want this to cause any validation to occur. Is there another function I can call besides submit(), or some other method? Thanks
[jQuery] Fade in and then fade out element when using slideToggle
I have a div (#slide-panel) which is hidden by default (display:none)
but shows up when a button (.slide) is clicked.
Inside the div I have a h3 which also is hidden by default
(display:none) but fades in as the div slides out.
Here's the code:
$(.slide).click(function(){
$(#slide-panel).slideToggle(medium);
$(#slide-panel h3).fadeIn(slow);
$(this).toggleClass(.slide-active); return false;
});
Is it possible to make the h3 fade out as the user press the button
(.slide) and the div slides out? How?
[jQuery] append and *slowly* show new content in DOM
Hi,
I'm guessing this is an easy question, but I can't figure it out.
I want to add some new content to the DOM, so I have a line like this.
$('#div_container').append('phi there!/p');
However, I'd like it to slowly appear via show().
But adding show() doesn't work as I'd expect. The new content appears
instantly.
$('#div_container').append('phi there!/p').show('slow');
Thanks for reading,
Eric P
[jQuery] Re: Form validation - Add http:// to text field if user forgot it
Thanks for your reply but unfortenately this doesnt work...
On 28 Maj, 14:59, Jörn Zaefferer joern.zaeffe...@googlemail.com
wrote:
Try this:
$(input[name^=link]).blur(function() {
if (!/^http:\/\//.test(this.value) {
this.value = http://; + this.value;
}
});
Jörn
On Thu, May 28, 2009 at 2:19 PM, P pst...@gmail.com wrote:
In my form I have a couple of text fields into which the user enters
links.
input type=text name=link1 id=link1 /
input type=text name=link2 id=link2 /
input type=text name=link3 id=link3 /
Now I want to create a function that runs after the user has entered a
link. It should automatically add http://; in the beginning of the
link if the user forgot it. How do I do that?
[jQuery] Form validation - Add http:// to text field if user forgot it
In my form I have a couple of text fields into which the user enters links. input type=text name=link1 id=link1 / input type=text name=link2 id=link2 / input type=text name=link3 id=link3 / Now I want to create a function that runs after the user has entered a link. It should automatically add http://; in the beginning of the link if the user forgot it. How do I do that?
[jQuery] A troll on jQuery in Linkedin QA board
To those who in Linkedin, there a troll discrediting not only
jQuery but the practise of using any library:
http://www.linkedin.com/answers/technology/information-technology/computers-software/TCH_ITS_CMP/464788-10054134
Quote: You don't need a generic library, period. Bank it.
Funny. :-)
--
(stephan paul) Arif Sahari Wibowo
/___ /___/ /___/ /___ http://www.arifsaha.com/
/ / / / /
http://www.arifsaha.com/christhasrisen.html
[jQuery] Carousel Help Needed
Using: http://sorgalla.com/projects/jcarousel/examples/static_controls.html I would like to have a control bar that shows dots instead of page numbers, etc. the difference being that if you have 9 items and you show 3 at a time, you should have 3 dots. A dot would represent a page and not one image. Clicking on the dot, would scroll the page. Something like CNN http://www.cnn.com/ (top right side) Any input would be appreciated.
[jQuery] Help showing 'Showing 3 of 12' msg in Carousel
hi, I was wondering if anyone has used or know the link to jQuery carousel which shows 3 vidoes at a time with ofcourse next pre button and message something like this: 'Showing 3 of 12' Thanks for your help.
[jQuery] Help: Carousel Showing Current Total count
hi folks, I'm new to JQuery can anyone help me find how to display current total page count on carousel. Eg: Showing 1 of 10 Page I'm currently using this http://sorgalla.com/projects/jcarousel/examples/static_controls.html script. Please if anyone know help me figure out how to display text showing: 'Showing 1 of 10 page'. Thanks AM
[jQuery] .slideUp .slideDown issues in IE
I have been asked to build this slide up and down functionality on http://iuvodesign.com/ landing page. If you go to the address underneath the large image you will see Recent and Selected works. It seems to be working fine in all browsers, but IE displays the contents as soon as I click on the header and then things slide down over the contents. I have overflow:hidden applied. Does anyone know how I could fix this IE issue? Thanks!
[jQuery] Show div in div on mouseover
I have multiple divs on my page in which contains another div with links. These links should be hidden by default but then displayed when the mouse is over the div. HTML-code: div class=box Lorem ipsum div class=linksa href=#Foo/a a href=#bar/a/div /div div class=box Lorem ipsum 2 div class=linksa href=#Foo/a a href=#bar/a/div /div div class=box Lorem ipsum 3 div class=linksa href=#Foo/a a href=#bar/a/div /div
[jQuery] Re: Show div in div on mouseover
Ah... thats too easy. :)
Thanks!
On 10 Mar, 15:09, ryan.j ryan.joyce...@googlemail.com wrote:
sorry, i forgot to add
div.box div.links:hover { display:inline !important; }
On Mar 10, 11:27 am, ryan.j ryan.joyce...@googlemail.com wrote:
div.box div.links { display:none; }
div.box:hover div.links { display:inline; }
On Mar 10, 9:13 am, P pst...@gmail.com wrote:
I have multiple divs on my page in which contains another div with
links. These links should be hidden by default but then displayed when
the mouse is over the div.
HTML-code:
div class=box
Lorem ipsum
div class=linksa href=#Foo/a a href=#bar/a/div
/div
div class=box
Lorem ipsum 2
div class=linksa href=#Foo/a a href=#bar/a/div
/div
div class=box
Lorem ipsum 3
div class=linksa href=#Foo/a a href=#bar/a/div
/div
[jQuery] Ajax request -- passing additional paramters to success method
Is anyone aware of a way to pass some additional context information to the
success function of an ajax request?
For instance, here is my code which works fine:
$.ajax({
type: GET,
dataType: json,
url: tUrl,
success: GotNewData,
error: GetDataError,
complete: AjaxRequestComplete
});
To the GotNewData function, I would also like to pass some other
information. The url would be nice, but some other context info would be
fine too. A unique ID. Some random string. ...anything.
Any ideas?
--
Patrick Burrows
http://www.CleverHumans.com
[jQuery] Re: Ajax request -- passing additional paramters to success method
Nevermind... I can do it with lambdas.
--
Patrick Burrows
http://www.CleverHumans.com
On Thu, Feb 26, 2009 at 11:50 AM, P Burrows pburr...@gmail.com wrote:
Is anyone aware of a way to pass some additional context information to the
success function of an ajax request?
For instance, here is my code which works fine:
$.ajax({
type: GET,
dataType: json,
url: tUrl,
success: GotNewData,
error: GetDataError,
complete: AjaxRequestComplete
});
To the GotNewData function, I would also like to pass some other
information. The url would be nice, but some other context info would be
fine too. A unique ID. Some random string. ...anything.
Any ideas?
--
Patrick Burrows
http://www.CleverHumans.com
[jQuery] Best practice for replacing inline HTML function calls w/several arguments with an event handler
Hi,
I'm fairly new to jQuery (been using a few months now). Binding event handlers to HTML objects via jQuery is awesome,
but I find myself struggling to find a solid (I.e., best practice) method for getting numerous arguments to the event
handler that are pertinent to the object that triggered the event.
For example, old method:
script
function buy(item, color, price) { ... }
/script
...
img src=item01.jpg /a href=javascript:buy('123-ABC','red',9.99)Buy
Me!/abr /
img src=item02.jpg /a href=javascript:buy('123-ABC','blue',10.99)Buy
Me!/abr /
img src=item03.jpg /a href=javascript:buy('456-DEF','green',29.99)Buy
Me!/abr /
jQuery method:
script
$(function() {
$('.buy').click(function() { ... }
)};
/script
...
img src=item01.jpg /a class=buyBuy Me!/abr /
img src=item02.jpg /a class=buyBuy Me!/abr /
img src=item03.jpg /a class=buyBuy Me!/abr /
So in the jQuery method, what is the best way to make the multiple arguments (that were previously in the inline HTML/JS
function call) available to the event handling function?
I've been limping along using various methods to get arguments to the event handling function (E.g., like sticking
values in an object's id field, etc.), but I'm at a loss when it comes to a solid way to pass numerous arguments to
the event handling function.
Thanks for reading,
Eric P.
[jQuery] Re: Best practice for replacing inline HTML function calls w/several arguments with an event handler
James wrote:
I think a good way is to put the data into a separate JSON object and
give them a unique ID (eg. item01, item02...), and assign that ID
somewhere on the links to be clicked.
var productList = {
'item01':{name:123-ABC, color:'red', price:9.99},
'item02':{name:123-ABC, color:'blue', price:10.99},
'item03':{name:456-DEF, color:'green', price:29.99}
}
$(.buy).click(function() {
var id = $(this).attr(id);
var product = productList[id];
alert(product.name + ' ' + product.color + ' ' + product.price);
});
img src=item01.jpg /a href=. id=item01 class=buyBuy Me!/
abr /
img src=item02.jpg /a href=. id=item02 class=buyBuy Me!/
abr /
img src=item03.jpg /a href=. id=item03 class=buyBuy Me!/
abr /
On Feb 13, 10:35 am, Eric P eric.maill...@gmail.com wrote:
Hi,
I'm fairly new to jQuery (been using a few months now). Binding event handlers
to HTML objects via jQuery is awesome,
but I find myself struggling to find a solid (I.e., best practice) method for
getting numerous arguments to the event
handler that are pertinent to the object that triggered the event.
For example, old method:
script
function buy(item, color, price) { ... }
/script
...
img src=item01.jpg /a href=javascript:buy('123-ABC','red',9.99)Buy
Me!/abr /
img src=item02.jpg /a href=javascript:buy('123-ABC','blue',10.99)Buy
Me!/abr /
img src=item03.jpg /a href=javascript:buy('456-DEF','green',29.99)Buy
Me!/abr /
jQuery method:
script
$(function() {
$('.buy').click(function() { ... }
)};
/script
...
img src=item01.jpg /a class=buyBuy Me!/abr /
img src=item02.jpg /a class=buyBuy Me!/abr /
img src=item03.jpg /a class=buyBuy Me!/abr /
So in the jQuery method, what is the best way to make the multiple arguments
(that were previously in the inline HTML/JS
function call) available to the event handling function?
I've been limping along using various methods to get arguments to the event
handling function (E.g., like sticking
values in an object's id field, etc.), but I'm at a loss when it comes to a solid way to
pass numerous arguments to
the event handling function.
Thanks for reading,
Eric P.
James,
Your solution is elegant and robust. It fit the bill perfectly for what I was doing. I was about to use jQuery's data()
method to attach values to HTML objects, but your solution is much easier to digest.
Thanks for the great insight!
RobG,
Good point. It's always good to work w/the mindset that not all will have JavaScript turned on. Fortunately, the
functionality I'm building is for an administrative area for customers that must have JavaScript support to even log in.
donb,
Don't worry. The code example I gave was merely an example to simplify the
problem. No $0.01 items for you! ;)
Eric
[jQuery] Form field validation call out (mini pop-up) plugin?
Hi, I've been digging around the net for a jQuery plugin that does a form validation call out. This would be a little info pop-up near a form field notifying the user why their entry didn't validate. This demo shows pretty much what I'm looking for. Type in a non-integer phone number to see the call out. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ValidatorCallout/ValidatorCallout.aspx Most of the form validation notifications I found involve inline highlighting (which is nice), but doesn't always give much room for additional info to the user (E.g., showing an example of good input, etc.) Thanks for reading, Eric
[jQuery] Re: [tooltip] Problem in IE 6 with multiple tooltips of different 'extra' classes
Done. http://dev.jquery.com/ticket/3689 Thanks, Eric Jörn Zaefferer wrote: The code looks fine. Could you file a ticket for this? http://dev.jquery.com/newticket (requires registration) Thanks Jörn On Fri, Dec 5, 2008 at 2:46 AM, Eric P [EMAIL PROTECTED] wrote: Hi, Just started messing around with Jörn's tooltip plugin, and I think I found a bug while using IE 6 (not a problem in IE 7 and FF 3). Here's some reference code. http://epierce.freeshell.org/jquery-tooltip-bug/index.html In the example I'm assigning three different tooltips each with their own unique extraClass to three different p blocks. In IE 6 only the first p tooltip works (tooltip has a blue background). The other two don't use their respective extraClasses (different background colors, etc.). As I'm new to this plugin, I wouldn't be surprised if I've borked the syntax, but since it works in IE 7 and FF I'm not so sure. Thanks for any ideas. Eric
[jQuery] [tooltip] Problem in IE 6 with multiple tooltips of different 'extra' classes
Hi, Just started messing around with Jörn's tooltip plugin, and I think I found a bug while using IE 6 (not a problem in IE 7 and FF 3). Here's some reference code. http://epierce.freeshell.org/jquery-tooltip-bug/index.html In the example I'm assigning three different tooltips each with their own unique extraClass to three different p blocks. In IE 6 only the first p tooltip works (tooltip has a blue background). The other two don't use their respective extraClasses (different background colors, etc.). As I'm new to this plugin, I wouldn't be surprised if I've borked the syntax, but since it works in IE 7 and FF I'm not so sure. Thanks for any ideas. Eric
[jQuery] Re: mixing jQuery with regular JavaScript
On Fri, Oct 24, 2008 at 9:54 PM, Ryura [EMAIL PROTECTED] wrote:
Alternatively,
script
$(function(){
window.test = function(){ console.log('hi')}
});
/script
Thanks, Mike and Ryura. That's what I needed to hear.
For some odd reason I had it pounded in my head that everything jQuery
needed to defined within the jQuery document instance.
Thanks,
Eric P.
[jQuery] Re: mixing jQuery with regular JavaScript
On Fri, Oct 24, 2008 at 2:25 PM, Eric P [EMAIL PROTECTED] wrote:
Hi,
I'm trying to mix jQuery with some pre-existing JavaScript/HTML, but
I'm having what appears to be scope issues.
The code I'm working on already has a bunch of inline event handler
function calls in the HTML tags, and it'd be a ton of work to change
them all to the unobtrusive way via jQuery. Now when I wrap all the
pre-existing function definitions into the jQuery document instance
(i.e., $(function(){ ... }), I'm able to slip in some jQuery.
However, all the function definitions are now no longer available to
the inline event handler calls.
Here's a simple demonstration. In this example the test() function is
not available when the div.
script
$(function(){
function test(){ console.log('hi')}
});
/script
div onclick=test() style=background-color:red; width:300pxhi /div
Opps... small typo.
In this example the test() function is not available when the div
...is clicked.
[jQuery] mixing jQuery with regular JavaScript
Hi,
I'm trying to mix jQuery with some pre-existing JavaScript/HTML, but
I'm having what appears to be scope issues.
The code I'm working on already has a bunch of inline event handler
function calls in the HTML tags, and it'd be a ton of work to change
them all to the unobtrusive way via jQuery. Now when I wrap all the
pre-existing function definitions into the jQuery document instance
(i.e., $(function(){ ... }), I'm able to slip in some jQuery.
However, all the function definitions are now no longer available to
the inline event handler calls.
Here's a simple demonstration. In this example the test() function is
not available when the div.
script
$(function(){
function test(){ console.log('hi')}
});
/script
div onclick=test() style=background-color:red; width:300pxhi /div
Any ideas? I'm assuming many others have run into this predicament.
Thanks for reading,
Eric P.
[jQuery] Re: jCarousel - flickr intergration
*All I'm really looking for is a solution to not having a blank picture appearing when the it reaches the end of the photostream.* Well if I'm correct JCarousel controls is a .png picture called next-horizontal.png and another one called prev-horizontal.png. Usually is a picture with 4 arrows, where the brighter arrow is the one displayed once the scrolling reaches the end. In my implementation I just cutted out this arrow with a photo editor (like gimp), and when scrolling reaches the end the right arrow, or left arrow is not displayed and automatically JCarousel understands. *or alternatively, how to start scrolling from the beginning again. * I think that's called a circular feature and is also there somehwere in sorgallascom reference. Hope this helps. 2008/10/10 JBagley [EMAIL PROTECTED] I'm using Sorgalla.com's excellent jCarousel plugin on http://www.westcoastlife.co.za and integrating it with a flickr photostream: http://www.flickr.com/photos/westcoastlife/sets/72157607068305740/ The problem I am having is that I don't know how to determine when the end of the photostream has been reached, and then disabling the controls, or alternatively, how to start scrolling from the beginning again. Here is the code that I'm currently using on the dynamic_flickr_api.php: $url = 'http://api.flickr.com/services/rest/? method=flickr.photosets.getPhotosapi_key=http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotosapi_key=' . $api_key . 'photoset_id=72157607068305740'; Other than that, I haven't made much changes to the code that is supplied on http://sorgalla.com/jcarousel/ All I'm really looking for is a solution to not having a blank picture appearing when the it reaches the end of the photostream. Thanks in advance Jason Bagley -- Jose Pablo Carballo
[jQuery] Jcarousel - Changing the starting position of the carousel according to the last page visited.
Hi,
As the title says, i want to set the starting position of the jcarousel
according to the last page visited.
What I've done so far is to decompose the last url with*
document.referrer*and then process this String in order to set a value
of a variable named
*startingPosition*. Finally, in the *start* property of the configuration
hash i set start: startingPosition.
The problem is that this is somehow a slow solution, since when I load the
page where the carousel is, it starts by default in position 1, and then
after the client does the algorithm of calculating the new position it then
sets the starting point of the carousel where it should be. It's less than a
second, but it does look bad, enough for not implementing it if I don't find
a faster solution without jumps.
Please send me any ideas or suggestions. Don't consider me a pro with
Javascript or Jquery please.
Thanks.
PS: I add the code I'm using right now (I'm adding it in the
jquery.jcarousel.js file):
// Splits document.referrer
var reference = document.referrer.split('/');
// Initialize startingPosition to 1
var startingPosition = 1;
// Array with test I'm looking for in the referrer to select the
starting position of the carousel
var listOfStringsImLookinFor = new Array();
listOfStringsImLookinFor[0] = text1;
listOfStringsImLookinFor[1] = text2;
listOfStringsImLookinFor[2] = text3;
listOfStringsImLookinFor[3] = text4;
// Calculates starting position
for(var i = 0; i listOfStringsImLookinFor.length; i++)
for(var j = 0; j reference.length; j++)
if(reference[j] == listOfStringsImLookinFor[i])
startingPosition = i + 1;
and then down in the carousel configuration: (hash defaults)
start: startingPosition,
-- Forwarded message --
From: Jose P. Carballo [EMAIL PROTECTED]
Date: 2008/10/5
Subject: About JCarousel
To: [EMAIL PROTECTED]
Hello, first of all thanks for this software and all documentation etc. Good
job.
I have a small question, how could I change the image displaying in the
carrousel with html internal links or something.
My carrousel displays one image at a time, let's say I move until image 8,
and then i click on it and i go to another link in my site. When returnin to
the page where the carousel is in, I would want the carousel to be
positioned back on the image 8. So that if I want to check image 9 i dont
have to scroll 8 times.
Thanks!
--
Jose Pablo Carballo
--
Jose Pablo Carballo
[jQuery] Find / traverse to next node matching a criteria?
Hi! Is there any feature in jQuery to find the next node matching a criteria, regardless of that next node a sibling or not? I know there is next(expr) and prev(expr) methods, but this only works for sibling. I specifically need to have something to look into siblings and non-siblings. The algorithm will probably look like this: (a) for each subsequent siblings, check if that sibling match the criteria, if not, traverse down to find first tree match the criteria, (b) failing that, go up to parent, then do (a) again, (c) do that until no parent exist (means not found). Maybe there is a plugin already doing that? Thanks! -- (stephan paul) Arif Sahari Wibowo _ _ _ _ / // // / _/ / // _/ http://www.arifsaha.com/
[jQuery] Re: How to apply jQuery to an item which doesn't exist when the page is loaded.
On Fri, 5 Sep 2008, lukas wrote: My PHP code creates a button which doesn't exist when my page is loaded. Hence, the according jQuery command doesn't work. Not sure what you meant. For server-side scripting - such as PHP - loading a page is the only way for the script to create HTML objects - including buttons. So what you said does not make any sense. Are you talking about XMLHttpRequest / AJAX request? Maybe you should point to an example page + source. -- (stephan paul) Arif Sahari Wibowo _ _ _ _ / // // / _/ / // _/ http://www.arifsaha.com/
[jQuery] best practices for scripts dir structure, etc.
Hi, Are there any good practices for how to keep the jQuery scripts (core, ui, plugins, etc.) organized? I currently have something like this. /jquery/jquery-1.2.6.js /jquery/ui/1.5.2/effects.*.js /jquery/ui/1.5.2/ui.*.jg /jquery/plugins/jquery.simple.tree.js I don't know what exactly makes sense and don't like what I've got so far since I'm using version numbers inconsistently, both in filenames and dir names, or not at all. Any tips would be great. Thanks! Eric P.
[jQuery] Re: best practices for scripts dir structure, etc.
using versions is very handy when you want to incorporate the latest version on a new page in your project, but don't want to go back and regression test all the other pages in the application i've got structure like: - /jquery/ -/1.1.8/ - jquery.js - jquery.pack.js ..etc etc.. -/1.2.6/ - jquery.js - jquery.pack.js Huge improvement over what I had. Thanks a lot! Eric
[jQuery] Re: jQuery.data and pre-rendered pages.
Ok, Thanks for the answer. On Aug 26, 3:08 pm, Mike Alsup [EMAIL PROTECTED] wrote: The problem is that i don't have access to the metadata plugin. So the question is still... is this possible with the built in function $.data? No, the data function does not extract data from the markup. data is a convenient way of getting and storing runtime state. You could write your own logic for extracting data from the markup using attr or hasClass for example..
[jQuery] jQuery.data and pre-rendered pages.
Hi, Is it possible to store meta data in html-tags on the page without the help of jQuery. The problem I'm having is that I have an existing php-script rendering tables, and I really need to store meta data in each cell for later use by jQuery. Is this even possible? Thanks, Patrik Skoog
[jQuery] Re: jQuery.data and pre-rendered pages.
The problem is that i don't have access to the metadata plugin. So the question is still... is this possible with the built in function $.data? Patrik On Aug 26, 1:20 pm, Mike Alsup [EMAIL PROTECTED] wrote: The metadata plugin page describes several ways to do this: http://plugins.jquery.com/project/metadata Mike On Aug 26, 2:55 am, P. Skoog [EMAIL PROTECTED] wrote: Hi, Is it possible to store meta data in html-tags on the page without the help of jQuery. The problem I'm having is that I have an existing php-script rendering tables, and I really need to store meta data in each cell for later use by jQuery. Is this even possible? Thanks, Patrik Skoog
[jQuery] Replace multiple select box options with images
I have a select box that looks like this: div id=ratings-box select name=ratings2[] multiple=multiple id=edit-ratings2 option value=11/option option value=22/option option value=33/option option value=44/option option value=55/option option value=66/option /select /div Now instead of showing it as an regular select box I'd like to present images to the user. I have one image prepared if the option is selected: rating_x_selected.gif (where X is the number 1-6) And one image if the option isnt selected: rating_x.gif Can I solve this with jQuery?
[jQuery] Replacing DOM Elements While Maintaining Child Elements
Ok, I have this code (I know it's horrific). td class=ms-sbscopes ms-sbcell select class=ms-sbscopes title=Search Scope id=ctl00_PlaceHolderSearchArea_ctl01_SBScopesDDL name=ctl00$PlaceHolderSearchArea$ctl01$SBScopesDDL option value=This SiteThis Site: Hirsch Branding/option /select /td I want to alter this so the td class=... becomes a div (I don't need to maintain the classes) and the /td with a /div while maintaing the select control. I figured it's done with replaceWith but I can't maintain the select.
[jQuery] Modifying table cell text
I have a table that looks like this: -- div class=highest-rated table tr td class=titleLorem ipsum/td td class=categoryAudio/td td class=rating3/td /tr tr td class=titleFoo/td td class=categoryVideo/td td class=rating2/td /tr tr td class=titleBar/td td class=categoryVideo/td td class=rating2/td /tr tr td class=titleHello world/td td class=categoryAudio/td td class=rating1/td /tr /table /div -- With a little jquery magic I would like to modify the text of the rating cell and have it display an image. This should be the outcome: -- div class=highest-rated table tr td class=titleLorem ipsum/td td class=categoryAudio/td td class=ratingimg src=images/rating-3.gif //td /tr tr td class=titleFoo/td td class=categoryVideo/td td class=ratingimg src=images/rating-2.gif //td /tr tr td class=titleBar/td td class=categoryVideo/td td class=ratingimg src=images/rating-2.gif //td /tr tr td class=titleHello world/td td class=categoryAudio/td td class=ratingimg src=images/rating-1.gif //td /tr /table /div -- The number of table rows may vary on different pages. How should I do this...? Regards, Per
[jQuery] Re: Modifying table cell text
Thank you! Problem solved.
On Jul 2, 5:41 pm, Richard D. Worth [EMAIL PROTECTED] wrote:
$(.highest-rated td.rating).each(function() {
var rating = $(this).text();
$(this).html('img src=images/rating-' + rating + '.gif /');
});
- Richard
On Wed, Jul 2, 2008 at 11:02 AM, P [EMAIL PROTECTED] wrote:
I have a table that looks like this:
--
div class=highest-rated
table
tr
td class=titleLorem ipsum/td
td class=categoryAudio/td
td class=rating3/td
/tr
tr
td class=titleFoo/td
td class=categoryVideo/td
td class=rating2/td
/tr
tr
td class=titleBar/td
td class=categoryVideo/td
td class=rating2/td
/tr
tr
td class=titleHello world/td
td class=categoryAudio/td
td class=rating1/td
/tr
/table
/div
--
With a little jquery magic I would like to modify the text of the
rating cell and have it display an image.
This should be the outcome:
--
div class=highest-rated
table
tr
td class=titleLorem ipsum/td
td class=categoryAudio/td
td class=ratingimg src=images/rating-3.gif //td
/tr
tr
td class=titleFoo/td
td class=categoryVideo/td
td class=ratingimg src=images/rating-2.gif //td
/tr
tr
td class=titleBar/td
td class=categoryVideo/td
td class=ratingimg src=images/rating-2.gif //td
/tr
tr
td class=titleHello world/td
td class=categoryAudio/td
td class=ratingimg src=images/rating-1.gif //td
/tr
/table
/div
--
The number of table rows may vary on different pages.
How should I do this...?
Regards,
Per
[jQuery] Re: Gmail Progress Bar
There is a progress bar jquery plugin (I'm sure there must be more too) here: http://digitalbush.com/projects/progress-bar-plugin On May 24, 6:11 am, [EMAIL PROTECTED] wrote: Recently Google Added a Progress bar in gmail .. without any SWF uploader and any Flashes ... And it works in IE and FIrefox ... how could we do the same in jquery and How did they do this...?
[jQuery] Refactoring Functions
I wanted a script that would make a sticky footer, and it worked
perfectly with this (where 341 is the elements to offset).
var height = $(document).height();
var height = height - 341;
$('#footer').css('margin-top', height);
Then I want this code to re-run on browser resize. I also want to
refactor the code above to use a second time. The problem is that (1)
it doesn't re-run on browser resize and (2) I don't want to duplicate
code. How can I refactor?
var height = $(document).height();
var height = height - 341;
$('#footer').css('margin-top', height);
$(window).resize(function(){
var height = $(document).height();
var height = height - 341;
$('#footer').css('margin-top', height);
});
[jQuery] Re: Refactoring Functions
Better yet, change line second line of stickFooter function to:
var height = $(document).height() - 341;
And remove the third line entirely.
Carl
Thanks for responding Carl. This is what I ended up using as you
prescribed.
script type=text/javascript
var stickyFooter = function() {
var height = $(document).height() - 341;
$('#footer').css('margin-top', height);
}
$(document).ready(
stickyFooter()
);
$(window).resize(
stickyFooter()
);
/script
But Firebug tells me document.body has no properties with the error
seemingly in the jQuery library.
Thanks!
[jQuery] Re: jQuery Not Adding Class/Attributes in IE
I'm with Karl. I remember IE dying on me when I tried to set an expando called 'all', go figure... So.. use another attribute, jQuery.data or try setAttribute. Not sure whether it will fail as well or not. Sorry for the spamming of the list. I actually figured out why it didn't work. The script I was using (scrollovers - www.scrollovers.com) needed what I was trying to add, but the script was loaded before the document.ready. So the external file (I'm guessing) parsed the DOM, couldn't find what it needed, and just let it go. Once I moved the external script after the jQuery initialization it worked. Thanks.
[jQuery] Re: jQuery Not Adding Class/Attributes in IE
Anyone?
On May 26, 8:32 pm, Chris P [EMAIL PROTECTED] wrote:
Hello all,
For some reason this is not working in IE but fine in Safari/FF.
jQuery('ul.nav a').addClass('scrollover').attr('type','scrollover');
You can see it on my site (www.siolon.com). It's suppose to add it in
the navigation bar.
Cheers.
[jQuery] Re: jQuery Not Adding Class/Attributes in IE
Anyone on this?
On May 26, 8:32 pm, Chris P [EMAIL PROTECTED] wrote:
Hello all,
For some reason this is not working in IE but fine in Safari/FF.
jQuery('ul.nav a').addClass('scrollover').attr('type','scrollover');
You can see it on my site (www.siolon.com). It's suppose to add it in
the navigation bar.
Cheers.
[jQuery] Re: $(document).ready(function() { giving error $ is not a function - what am I doing wrong?
A little more specific:
You're using jQuery.noConflict() which allows you to use the variable
jQuery
jQuery(document).ready( function() {
jQuery(#sliding_cart).css({ display: none});
});
then later in your doc, you're using $ which is the same thing, if
you're not using jQuery.noConflict(). However, it's one or the other,
not both.
$(document).ready(function() {
$(a).click(function(){
alert(Thanks for visiting!);
});
});
If you're using Prototype.js or any other JS Library that may use $,
then you need noConflict. If you're sure you'll never use any other JS
Library, then drop the noConflict and use $ instead of jQuery variable
everywhere.
If you're using some plugins or third party script asking you to use
noConflict for any reason, then use jQuery instead of $ (like those
guys:
http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php).
Fred
[jQuery] Re: Trouble applying .show() to descendants
That did it!
Thanks for the help!
On Feb 13, 2:31 am, andrea varnier [EMAIL PROTECTED] wrote:
On 13 Feb, 01:11, Nick P [EMAIL PROTECTED] wrote:
The trouble comes when I try to append this cloned block to the end of
the table. If I just do:
blockCopy.appendTo([EMAIL PROTECTED]:resources] tbody:first);
It appends the clone correctly, but the hidden fields are still
hidden.
not sure, but I'd try something like this:
blockCopy.appendTo([EMAIL PROTECTED]:resources]
tbody:first).find('td').children(':hidden').show();
OR
blockCopy.appendTo([EMAIL PROTECTED]:resources]
tbody:first).find('*:hidden').show();
[jQuery] Trouble applying .show() to descendants
I'm trying to use the show function to display elements in a jQuery object that contains a block of code I cloned. I'm having trouble getting the show function to apply to all the descendants of the code in the object. It's probably better if I show an example than try to describe everything: This is something like what I've copied: table id=itemForm:resources tbody tr td ... more elements, some I've previously hidden using .hide() /td /tr tr td ... /td /tr ... /table I clone like this: var blockCopy = $([EMAIL PROTECTED]:resources] tr:first).clone(); The trouble comes when I try to append this cloned block to the end of the table. If I just do: blockCopy.appendTo([EMAIL PROTECTED]:resources] tbody:first); It appends the clone correctly, but the hidden fields are still hidden. I've tried something like: blockCopy.show(); But that (I'm assuming, since it didn't really do anything) doesn't apply the show throughout all the block down to the last descendant. How can I apply show to that cloned block to make the hidden fields visible again? Thanks in advance for any ideas and help! I'm relatively new to jQuery so any help is greatly appreciated! - Nick P
[jQuery] Re: Help With Odd ID Search
That did it. Thank you so much! I've been trying to escape the colon using one slash :p Thanks again! - Nick On Jan 7, 3:08 pm, Jonathan Sharp [EMAIL PROTECTED] wrote: Try escaping the colon: $(#itemForm\\:standards select:last) Cheers, -Jonathan On 1/7/08, npetcu [EMAIL PROTECTED] wrote: I'm updating some of the legacy software we have at my company and changing much of the JavaScript to jQuery. I'm having a bit of trouble with a few particular id's however. I'm trying to access the last select element of a block of code and retrieve the id like this: $(#itemForm:standards select:last).attr(id); itemForm:standards is the id of the block I'm attempting to access, and I'm using select:last to get the last select element. This doesn't work however. I tried the same method, but used the class name rather than the id and the function worked fine. $(.standardsBlock select:last).attr(id); I may be mistaken, but I think jQuery thinks I'm attempting to apply a selector to the id name because of the colon in the name. How would I go about searching for an id like that? Has anyone had any trouble with this before? Any help would be much appreciated. -- npetcu
[jQuery] Re: prototype.js and jquery.js conflict problems? (Lightbox and Thickbox) simple?
Hey Sam, I'm not sure if you figured this out yet but here it goes. You cannot just paste the code example found on the jQuery site. You need to make a couple of adjustments so it is customized to your needs. As the documentation says, the $ character serves as a shortcut for jQuery. By using the noConflict() function, any regular jQuery calls you were making before now need to reference jQuery instead of the $ character. $(div#myDiv).fadeIn(slow); becomes jQuery(div#myDiv).fadeIn(slow); The snippet from jQuery uses someid as an example. If you pasted this code without making changes, it's looking for that someid reference, which I doubt you have used. I hope that helps. Stephen
