[jQuery] Classis ASP integrating Async Treeview Plugin using getJSON. Stops working when using response.write [variable name] instead of simple JSON string
Hi all,
I've loved using jQuery these past few months, but I'm really pulling
my hair our here.
The following is the "endpoint" asp code that gets called to populate
my treeview:
<%
rootid = request.querystring("rootid")
json = ""
set Conn = server.CreateObject("ADODB.Connection")
Conn.Open strProvider
if rootid = "source" then
json = "["
set RS = Server.CreateObject("ADODB.RecordSet")
Sql = "select categoryid,categoryname,(select count(*) from
tblcategories where parentid = c1.categoryid) ChildCount from
tblcategories c1 where parentid = 0"
session("errorsql") = sql
set Cmd = Server.CreateObject("ADODB.Command")
Cmd.CommandText = Sql
Cmd.ActiveConnection = Conn
rs.open Cmd
if not RS.EOF then
GotRows = "y"
arrResultSet = RS.GetRows()
numRows = ubound(arrResultSet,2)
For i = 0 to numRows
categoryid = arrResultSet(0,i)
categoryname = arrResultSet(1,i)
childcount = cint(arrResultSet(2,i))
json = json & "{'text': '" & categoryname & "','id':'"
& categoryid
& "'"
if childcount > 0 then
json = json & ", 'hasChildren':true"
end if
json = json & "}"
if i < numRows then
json = json & ","
end if
Next
else
GotRows = "n"
json = json & "{'text': 'No Categories have been created'}"
end if
json = json & "]"
RS.close
elseif isnumeric(rootid) and rootid <> "" then
json = "["
set RS = Server.CreateObject("ADODB.RecordSet")
Sql = "select categoryid,categoryname,(select count(*) from
tblcategories where parentid = c1.categoryid) ChildCount from
tblcategories c1 where parentid = ?"
session("errorsql") = sql
set Cmd = Server.CreateObject("ADODB.Command")
Cmd.Parameters.Append CreateIntParameter(Cmd, "rootid", rootid)
Cmd.CommandText = Sql
Cmd.ActiveConnection = Conn
rs.open Cmd
if not RS.EOF then
GotRows = "y"
arrResultSet = RS.GetRows()
numRows = ubound(arrResultSet,2)
For i = 0 to numRows
categoryid = arrResultSet(0,i)
categoryname = arrResultSet(1,i)
childcount = cint(arrResultSet(2,i))
json = json & "{'text': '" & categoryname & "','id':'"
& categoryid
& "'"
if childcount > 0 then
json = json & ", 'hasChildren':true"
end if
json = json & "}"
if i < numRows then
json = json & ","
end if
Next
else
GotRows = "n"
end if
json = json & "]"
RS.close
end if
set Cmd = nothing
set RS=nothing
conn.close
set conn=nothing
response.write json
%>
This code produces the following JSON string viewable when I hit the
page directly with the ?rootid=source parameter:
[{'text': 'Cat1.0','id':'1'},{'text': 'Cat1.1','id':'2',
'hasChildren':true},{'text': 'Cat1.2','id':'3'}]
Unless I've received a severe blow to the head, I recognize this as
valid JSON and just what the treeview needs to produce a flat display
of 3 nodes with the second having a '+' sign for expandability.
Here's the frustrating part, when I past that string into the body of
my asp page, comment out the response.write line, save, and run
everything I get the simple tree that I'd expect. When I remove the
JSON string, and uncomment the response.write line, nothing happens.
I've tried flushing the response object, ending the response object,
clearing the response before writing to it, yet nothing seems to work.
Please, please help!
[jQuery] Re: Superfish 1.4.8 accessibility enhancement
You can of course use my (minor) modification under an MIT license. Since Superfish 1.4.8 is offered under both MIT and GPL, you are free to create your own fork. This plugin still gets tons of use, I think it would be good for the community to have a more current release. You should start a google code project for it. -Jason On Jan 10, 2:12 pm, decola wrote: > Im really wondering where the developer of this project ... anyway i > made some enhancements to superfish by myself. Am i allowed to copy > and paste your code into my work. > > Because if the developer of superfish does not answer i will maybe > make an own project like "superfish menu enhanced" or so. > > so far decola > > On 7 Jan., 20:55, Jason Denizac wrote: > > > > > Superfish is a jQuery plugin for progressive enhancement of suckerfish- > > style HTML/CSS drop-down menus. It can be found > > athttp://users.tpg.com.au/j_birch/plugins/superfish/ > > > The original Superfish plugin used jQuery's hide() method, which sets > > an inline css attribute of display: none on the hidden menus. This has > > the unintended effect of making screen readers skip over the submenus. > > Since screen readers cannot easily trigger the hover event, this > > effectively blocks them from accessing any of the sub menu items. > > > This modification changes the css technique used to hide the menus > > visually while leaving them available for screen readers. > > > You can grab the updated code herehttp://jsbin.com/useku > > > (Apologies if this is the wrong place for this posting - the author of > > the original Superfish plugin mentioned this list as the place for > > support for the plugin. Thanks!) > > > Jason Denizac
[jQuery] Superfish - Working locally but not working live
Very confused. Working on a Wordpress site/theme and integrating superfish for the main (pages) navigation. Everything is working on locally (running XAMPP on an XP box), but on the live site, child pages are not appearing as dropdowns. I can see in the source that the children are being written into the page, but they are not visible. Currently staging at: http://mobileepiphany.com.previewdns.com/ - there should be two children beneath ABOUT. Once again, this IS WORKING on my localhost: ABOUT has two children and the menu adds a » arrow to indicate that it's a dropdown. Any insight/help/pointers would be greatly appreciated.
[jQuery] Superfish 1.4.8 accessibility enhancement
Superfish is a jQuery plugin for progressive enhancement of suckerfish- style HTML/CSS drop-down menus. It can be found at http://users.tpg.com.au/j_birch/plugins/superfish/ The original Superfish plugin used jQuery's hide() method, which sets an inline css attribute of display: none on the hidden menus. This has the unintended effect of making screen readers skip over the submenus. Since screen readers cannot easily trigger the hover event, this effectively blocks them from accessing any of the sub menu items. This modification changes the css technique used to hide the menus visually while leaving them available for screen readers. You can grab the updated code here http://jsbin.com/useku (Apologies if this is the wrong place for this posting - the author of the original Superfish plugin mentioned this list as the place for support for the plugin. Thanks!) Jason Denizac
[jQuery] Superfish Nav-bar Joomla issue
I'm using the superfish module for joomla 1.5 all options except Nav- bar seem to work fine i have a fix menu area width 705px the 1st and 3rd levels are fine however the second level does not fill the entire 705px and instead folds into a 3rd line any ideas on how to get it to fill out the width?
[jQuery] simple jquery question
Hey, was wondering if anyone could help me with a basic JQ question. Ok so I am trying to select each element that has a certain class on my page, and then use what is inside of the I am selecting to populate a drop down select box with the id of deptFilter. (with each result found inside of the H3, wrapped in tags.) I am having trouble understanding how I actually store the variables found in each H3 with the class of "example". Any help would be greatly appreciated.
[jQuery] jquery and tomcat
hello, i am looking to begin web development after a bit of experience with computer programming (computation and numerical methods). i am looking for a web host. so far anhosting.com seems like a fine option, but i would like to be able to make use of jquery. can anyone recommend a web host? also, anhosting asked if jquery requires tomcat. not really knowing much yet i am not sure if it does. could anyone she some light on this for me? thanks!
[jQuery] Re: Styling dynamic content
Ah, thank you very much.
On Dec 18, 12:29 am, "Richard D. Worth" wrote:
> Seehttp://docs.jquery.com/Frequently_Asked_Questions#Why_doesn.27t_an_ev...
>
> - Richard
>
> On Fri, Dec 18, 2009 at 12:23 AM, Jason Kaczmarsky
> wrote:
>
> > Ahah, this was the problem I thought i was having. I can't make jQuery
> > work on dynamic content.
>
> > If an element with a class of "file" is added to the document, like
> > the previous case, no jQuery event related to that element works.
> > Ex:
> > $(".file").click(function(){
> > alert(this)
> > });
> > Nothing is ever alerted if that element is clicked.
>
> > Example page:
> >http://pendarenstudios.com/NEW/file_sel.php
> > On Dec 17, 10:39 am, Jason Kaczmarsky wrote:
> > > I must have missed something cause I made a new page and rewrote the
> > > code and it worked fine. Thanks for the help guys.
>
> > > On Dec 17, 5:26 am, "Richard D. Worth" wrote:
>
> > > > Works for me:
>
> > > >http://jsbin.com/egoto/
>
> > > > - Richard
>
> > > > On Wed, Dec 16, 2009 at 8:44 PM, Jason Kaczmarsky <
> > jkaczmar...@yahoo.com>wrote:
>
> > > > > Yes, I am sure they are the correct class and are showing up
> > properly.
>
> > > > > Button press:
> > > > > //loop
> > > > > $("#files").append(''+Files[i]+'');
> > > > > //end loop
>
> > > > > Firebug:
> > > > >
> > > > > work.txt
> > > > > SAS Guide.txt
> > > > >
>
> > > > > On Dec 16, 7:43 pm, "Smith, Allex"
> > wrote:
> > > > > > The browser should render all the styles no matter when they enter.
>
> > > > > > Are you sure that the class is assigned to those elements? I would
> > make
> > > > > sure by peeking at the rendered html via Firebug.
>
> > > > > > -Original Message-
> > > > > > From: jquery-en@googlegroups.com [mailto:
> > jquery...@googlegroups.com] On
> > > > > Behalf Of Jason Kaczmarsky
> > > > > > Sent: Wednesday, December 16, 2009 2:14 PM
> > > > > > To: jQuery (English)
> > > > > > Subject: [jQuery] Styling dynamic content
>
> > > > > > So I've created a little app which loads some filenames into a div
> > via
> > > > > > an AJAX query. This happens when a user clicks a button, not when
> > the
> > > > > > page loads. Because of this, I cannot style the filenames how I
> > want.
> > > > > > I've tried using CSS to do the trick:
>
> > > > > > .file{
> > > > > > color: #F00;
> > > > > > }
>
> > > > > > .file:hover{
> > > > > > cursor:pointer;
> > > > > > color:#000;
> > > > > > }
>
> > > > > > This CSS colors the filenames red when it loads, but nothing in the
> > > > > > hover event works.
>
> > > > > > Instead of this, I tried using jQuery to style it.
>
> > > > > > $(".file").hover(function(){
> > > > > > $(this).css("background-color","#F00");
> > > > > > },function(){
> > > > > > $(this).css("background-color","#000");
> > > > > > });
>
> > > > > > This also does not change anything. I assume it is because the
> > element
> > > > > > does not exist when the page is rendered, but later on. Although
> > this
> > > > > > doesn't explain why the text is red when I use the CSS, so I'm a
> > bit
> > > > > > confused. How would I accomplish this?
[jQuery] Re: Styling dynamic content
Ahah, this was the problem I thought i was having. I can't make jQuery
work on dynamic content.
If an element with a class of "file" is added to the document, like
the previous case, no jQuery event related to that element works.
Ex:
$(".file").click(function(){
alert(this)
});
Nothing is ever alerted if that element is clicked.
Example page:
http://pendarenstudios.com/NEW/file_sel.php
On Dec 17, 10:39 am, Jason Kaczmarsky wrote:
> I must have missed something cause I made a new page and rewrote the
> code and it worked fine. Thanks for the help guys.
>
> On Dec 17, 5:26 am, "Richard D. Worth" wrote:
>
> > Works for me:
>
> >http://jsbin.com/egoto/
>
> > - Richard
>
> > On Wed, Dec 16, 2009 at 8:44 PM, Jason Kaczmarsky
> > wrote:
>
> > > Yes, I am sure they are the correct class and are showing up properly.
>
> > > Button press:
> > > //loop
> > > $("#files").append(''+Files[i]+'');
> > > //end loop
>
> > > Firebug:
> > >
> > > work.txt
> > > SAS Guide.txt
> > >
>
> > > On Dec 16, 7:43 pm, "Smith, Allex" wrote:
> > > > The browser should render all the styles no matter when they enter.
>
> > > > Are you sure that the class is assigned to those elements? I would make
> > > sure by peeking at the rendered html via Firebug.
>
> > > > -Original Message-
> > > > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> > > Behalf Of Jason Kaczmarsky
> > > > Sent: Wednesday, December 16, 2009 2:14 PM
> > > > To: jQuery (English)
> > > > Subject: [jQuery] Styling dynamic content
>
> > > > So I've created a little app which loads some filenames into a div via
> > > > an AJAX query. This happens when a user clicks a button, not when the
> > > > page loads. Because of this, I cannot style the filenames how I want.
> > > > I've tried using CSS to do the trick:
>
> > > > .file{
> > > > color: #F00;
> > > > }
>
> > > > .file:hover{
> > > > cursor:pointer;
> > > > color:#000;
> > > > }
>
> > > > This CSS colors the filenames red when it loads, but nothing in the
> > > > hover event works.
>
> > > > Instead of this, I tried using jQuery to style it.
>
> > > > $(".file").hover(function(){
> > > > $(this).css("background-color","#F00");
> > > > },function(){
> > > > $(this).css("background-color","#000");
> > > > });
>
> > > > This also does not change anything. I assume it is because the element
> > > > does not exist when the page is rendered, but later on. Although this
> > > > doesn't explain why the text is red when I use the CSS, so I'm a bit
> > > > confused. How would I accomplish this?
[jQuery] Re: Styling dynamic content
I must have missed something cause I made a new page and rewrote the
code and it worked fine. Thanks for the help guys.
On Dec 17, 5:26 am, "Richard D. Worth" wrote:
> Works for me:
>
> http://jsbin.com/egoto/
>
> - Richard
>
> On Wed, Dec 16, 2009 at 8:44 PM, Jason Kaczmarsky
> wrote:
>
> > Yes, I am sure they are the correct class and are showing up properly.
>
> > Button press:
> > //loop
> > $("#files").append(''+Files[i]+'');
> > //end loop
>
> > Firebug:
> >
> > work.txt
> > SAS Guide.txt
> >
>
> > On Dec 16, 7:43 pm, "Smith, Allex" wrote:
> > > The browser should render all the styles no matter when they enter.
>
> > > Are you sure that the class is assigned to those elements? I would make
> > sure by peeking at the rendered html via Firebug.
>
> > > -Original Message-
> > > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> > Behalf Of Jason Kaczmarsky
> > > Sent: Wednesday, December 16, 2009 2:14 PM
> > > To: jQuery (English)
> > > Subject: [jQuery] Styling dynamic content
>
> > > So I've created a little app which loads some filenames into a div via
> > > an AJAX query. This happens when a user clicks a button, not when the
> > > page loads. Because of this, I cannot style the filenames how I want.
> > > I've tried using CSS to do the trick:
>
> > > .file{
> > > color: #F00;
> > > }
>
> > > .file:hover{
> > > cursor:pointer;
> > > color:#000;
> > > }
>
> > > This CSS colors the filenames red when it loads, but nothing in the
> > > hover event works.
>
> > > Instead of this, I tried using jQuery to style it.
>
> > > $(".file").hover(function(){
> > > $(this).css("background-color","#F00");
> > > },function(){
> > > $(this).css("background-color","#000");
> > > });
>
> > > This also does not change anything. I assume it is because the element
> > > does not exist when the page is rendered, but later on. Although this
> > > doesn't explain why the text is red when I use the CSS, so I'm a bit
> > > confused. How would I accomplish this?
[jQuery] Re: Styling dynamic content
Yes, I am sure they are the correct class and are showing up properly.
Button press:
//loop
$("#files").append(''+Files[i]+'');
//end loop
Firebug:
work.txt
SAS Guide.txt
On Dec 16, 7:43 pm, "Smith, Allex" wrote:
> The browser should render all the styles no matter when they enter.
>
> Are you sure that the class is assigned to those elements? I would make sure
> by peeking at the rendered html via Firebug.
>
> -Original Message-
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
> Behalf Of Jason Kaczmarsky
> Sent: Wednesday, December 16, 2009 2:14 PM
> To: jQuery (English)
> Subject: [jQuery] Styling dynamic content
>
> So I've created a little app which loads some filenames into a div via
> an AJAX query. This happens when a user clicks a button, not when the
> page loads. Because of this, I cannot style the filenames how I want.
> I've tried using CSS to do the trick:
>
> .file{
> color: #F00;
> }
>
> .file:hover{
> cursor:pointer;
> color:#000;
> }
>
> This CSS colors the filenames red when it loads, but nothing in the
> hover event works.
>
> Instead of this, I tried using jQuery to style it.
>
> $(".file").hover(function(){
> $(this).css("background-color","#F00");
> },function(){
> $(this).css("background-color","#000");
> });
>
> This also does not change anything. I assume it is because the element
> does not exist when the page is rendered, but later on. Although this
> doesn't explain why the text is red when I use the CSS, so I'm a bit
> confused. How would I accomplish this?
[jQuery] Styling dynamic content
So I've created a little app which loads some filenames into a div via
an AJAX query. This happens when a user clicks a button, not when the
page loads. Because of this, I cannot style the filenames how I want.
I've tried using CSS to do the trick:
.file{
color: #F00;
}
.file:hover{
cursor:pointer;
color:#000;
}
This CSS colors the filenames red when it loads, but nothing in the
hover event works.
Instead of this, I tried using jQuery to style it.
$(".file").hover(function(){
$(this).css("background-color","#F00");
},function(){
$(this).css("background-color","#000");
});
This also does not change anything. I assume it is because the element
does not exist when the page is rendered, but later on. Although this
doesn't explain why the text is red when I use the CSS, so I'm a bit
confused. How would I accomplish this?
[jQuery] Re: simple accordion problem
why not use http://jqueryui.com/demos/accordion/
On Dec 10, 11:05 am, mojoeJohn wrote:
> thanks for the explanation. my accordion works fine but i was wanting
> to reduce it's sensitivity. i tried putting return false but it didn't
> help much. any other suggestions?
>
> On Dec 10, 10:02 am, MorningZ wrote:
>
> > if you have
>
> > $("#links li").hover(function(){
> > var hoveredOverLI = this;
>
> > });
>
> > then "this" is a reference to the item the user hovered over
>
> > so then
>
> > $("ul", this)
>
> > will select tags that are "in context" of "this" (meaning that
> > "this is an ancestor")
>
> > $(this).find("ul") is the same selector, and in fact, the core code
> > converts the first selector to the second
>
> > // HANDLE: $(expr, [context])
> > // (which is just equivalent to: $(content).find(expr)} else
>
> > return jQuery( context ).find( selector );
>
> > On Dec 10, 9:36 am, mojoeJohn wrote:
>
> > > could you explain how to read
>
> > > $("ul", this).slideUp("slow");
>
> > > the ("ul", this) has me confused. i just want to make sure i learn
> > > something from this instead of just copying and pasting code.
>
> > > thanks!
>
> > > On Dec 10, 9:34 am, mojoeJohn wrote:
>
> > > > thanks so much it worked perfectly!!!
>
> > > > On Dec 10, 3:38 am, Bideshi wrote:
>
> > > > > Hi mojeJhon,
> > > > > Please try this
>
> > > > > -
> > > > >
>
> > > > > $(document).ready(function(){
> > > > > $("#links ul").hide();
> > > > > $("#links li").hover(function(){
> > > > > $("ul",
> > > > > this).slideDown("slow");
> > > > > }, function(){
> > > > > $("ul", this).slideUp("slow");
> > > > > } );
>
> > > > > });
> > > > >
> > > > > -
>
> > > > > On Dec 10, 2:34 am, mojoeJohn wrote:
>
> > > > > > sorry i forgot to add the ul in the sublink menus:
>
> > > > > > here is the correct layout:
>
> > > > > >
> > > > > > Link Head
> > > > > >
> > > > > > Sub Link
> > > > > > Sub Link
> > > > > > Sub Link
> > > > > > Sub Link
> > > > > >
> > > > > >
> > > > > > Link Head
> > > > > >
> > > > > > Sub Link
> > > > > > Sub Link
> > > > > > Sub Link
> > > > > > Sub Link
> > > > > >
> > > > > >
> > > > > >
[jQuery] Re: jquery numeric spinner and jqueryui tabs
Richard, thank you, but that didn't work. for the same reasons as
before. if I try to reload the tab I am viewing then it doesn't work.
I dug around some and found 1. why this is happening 2. a hack to make
it work.
1. if I attempt to selected the selected tab and collapsible is false
the operation is doesn't fire (aborted?).
2. if I select the selected tab and collapsible is true the tab is
minimized.
3. the spinner is calculating hieght/width/margin when spinner() is
called to aline the icons to the textbox. it's using
element.outerHeight() and element.outerWidth() as part of the
calculation.
4. it seems that the panel's content is appended to the browser DOM
after load but before show. this is why the spinner formats work in
the call to show, not load.
does that make sense?
hacks:
1. Hidden hack tab
tab 1
tab 1
&nbps;
var HIDDEN_TAB_INDEX = $(".tabs").("option", "length")-1;
var tabs = $(".tabs");
var index = tabs.tabs("option", "selected");
tabs
.tabs("url", index, url)
.tabs("select", HIDDEN_TAB_INDEX)
.tabs("select", index);
this works, but causes a "flash" as you will see the panel shrink and
expand.
2. Collapsible hack
tab 1
tab 1
$(".tabs").tabs({collapsible:true});
var tabs = $(".tabs");
var index = tabs.tabs("option", "selected");
tabs
.tabs("url", index, url)
.tabs("select", index) //collapse
.tabs("select", index); //expand
which again produces a flash with the shrinking/expanding. it also
means the user can collapse any tab, which I don't want.
3. Hard code the style values.
$(".tabs").tabs({
load: function(event, ui){
$(".spinner", ui.panel).spinner().find(".ui-spinner-
buttons").css({hard coded values});
}
});
I like that I don't get a "flash" but it's also dependent on the
styling of the input box not changing. if it does then I have to
change my script.
right now I'm leaning towards option 3 since it's not used in that
many places.
I'm wondering... is there an event I can bind to that say after the
textbox (or entire ajax content) is attached to the browser DOM (or
after the content is attached to a parent), process the spinner?
$(function(){$(".spinner").spinner();}); doesn't work when placed
within the ajax content itself. it produces the same results as
calling spinner in the load event. the outerHeight/Width are 0.
On Dec 10, 6:29 am, "Richard D. Worth" wrote:
> On Wed, Dec 9, 2009 at 4:52 PM, Jason Meckley wrote:
>
>
>
> > it appears that calling load programatically (rather than clicking on
> > the tab manually) does not call the show function.
>
> In that case, you might try .triggerHandler('click')
>
> - Richard
[jQuery] jquery numeric spinner and jqueryui tabs
I have a set of tabs that loads it's contents using ajax. within some
of these tabs I have defined numeric spinners. I have found that i
need to configure my spinners on tabsshow, not tabsload. however tabs
load works for just about everything else i do dynamically. I'm
guessing this has something to do with how the spinner extension
builds the necessary DOM elements
this works fine if I manually click the tab. within a given tab I will
have an element which changes the url of the current tab and reloads
the tab. when i do this the spinners are not created (it's just a
textbox), but the panel is loaded. the script looks like this
$("#tabs").tabs({
show: function(event, ui) {
$(".spinner", ui.panel).spinner();
},
load: function(event, ui) {
//do other jquery stuff
},
});
$("a.category-selector").live("click", function() {
var index = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("url", index, this.href).tabs("load", index);
return false;
});
it appears that calling load programatically (rather than clicking on
the tab manually) does not call the show function.
also, if i try to place the spinner script in the html, rather than a
separate html file, the spinner's height is not properly set. Again, I
think this has to do with how the spinner is attaching itself to the
DOM.
the spinner is jQuery.ui.spinner 1.10 written by Brant Burnett. jquery-
ui-1.7.2.custom.min.js. I'm using modals, tabs and datepicker.
is there any way for force calling the show function on tabs? like I
can with loading tabs?
[jQuery] Re: slideToggle lag in Firefox
Ah thank you. That clears things up a bit. I'll do some more testing and come up with a solution if I have to. On Nov 24, 7:39 am, Alexandru Adrian Dinulescu wrote: > Firefox really eats a lot of memory when it's up for a long time. I also > encountered that issue not only in sliding but in animations that move stuff > around. Problem is that firebug really makes stuff slower, because it shows > you real-time what the browser is doing. The console / net thingy also eat a > lot of time, as it's ocnstantly fetching requests. > > Also after a while firefox itself starts to lag ( like every good program, > it has to be reinstalled once a year to keep things smooth ). > My advice is to go for the "fast" setting but if this problem only happens > for you then it doesnt mean that it will happen for everyone else also. If > you are concerned about firefox posibilities you can browser.detect gecko > (since that's firefox's engine) and make a different thing for it. > > Now it also depends on what firefox version you have, 3.5 is a lot faster > than 3 and i dont even compare it to 2. > > Regards > --- > Alexandru Dinulescu > Web Developer > (X)HTML/CSS Specialist > Expert Guarantee Certified Developer > XHTML:http://www.expertrating.com/transcript.asp?transcriptid=1879053 > CSS :http://www.expertrating.com/transcript.asp?transcriptid=1870619 > Odesk Profile:http://www.odesk.com/users/~~3a2d7f591313701b > RentACoder > Profile:http://www.rentacoder.com/RentACoder/DotNet/SoftwareCoders/ShowBioInf... > > LinkedIn Profile:http://ro.linkedin.com/in/alexandrudinulescu > XHTML/CSS/jQuery Blog ->http://alexdweb.com/blog > MainWebsite:http://alexdweb.com > > On Tue, Nov 24, 2009 at 5:11 AM, Dave Maharaj :: WidePixels.com < > > d...@widepixels.com> wrote: > > I have the same problem. Firefox eats up a lot of memory when open for a > > long time (900k sometimes) and my toggle divs drag ass. > > > If I find a solution I would be happy to hear. > > > Thanks, > > > Dave > > > -Original Message- > > From: Jason Kaczmarsky [mailto:jkaczmar...@yahoo.com] > > Sent: November-23-09 10:06 PM > > To: jQuery (English) > > Subject: [jQuery] slideToggle lag in Firefox > > > So I have a div with an input, textarea, and submit button. A link makes it > > so you can expand/contract this div. In Firefox only, the div resize is > > very > > laggy and its clearly shown on the site. > > > That happens when you open it. The rest of the site is pushed down like its > > supposed to, but the elements being moved seem to duplicate, like FF is not > > rending things fast enough. The above image is the bottom of the site, > > appearing multiple times when it should once appear once. > > > I read somewhere that Firebug causes things to be slower, and I do have > > Firebug installed, but I tested it on another computer without Firebug and > > the same thing happens. It works much smoother in any other browser. > > No virus found in this incoming message. > > Checked by AVG -www.avg.com > > Version: 9.0.709 / Virus Database: 270.14.76/2519 - Release Date: 11/23/09 > > 04:22:00
[jQuery] slideToggle lag in Firefox
So I have a div with an input, textarea, and submit button. A link makes it so you can expand/contract this div. In Firefox only, the div resize is very laggy and its clearly shown on the site. That happens when you open it. The rest of the site is pushed down like its supposed to, but the elements being moved seem to duplicate, like FF is not rending things fast enough. The above image is the bottom of the site, appearing multiple times when it should once appear once. I read somewhere that Firebug causes things to be slower, and I do have Firebug installed, but I tested it on another computer without Firebug and the same thing happens. It works much smoother in any other browser.
[jQuery] jQuery animating height in IE
So I have this login system which uses jQuery's animation function to
make the tab eventually disappear. It works in all browsers fine but
IE, of course.
Anyway heres the code,Height=39:
profile_info.animate({top:"+="+Height,height:"-="+Height},500,function
(){...});
If I take out the height, it works in IE with no errors, but of course
it doesn't look right. I noticed that if I decrease it by a certain
amount, such as 20, it works fine as well. But if I make it higher,
such as 30, it shows an error and doesn't complete.
I read that if the height isn't set in set in the css, it won't work
correctly but I already have the height equal to 39 so that's not the
problem.
Any ideas?
[jQuery] how to remove elements by attribute
Hi, How can I remove all div elements using the attribute foo for my selector? Basically any div with a foo attribute I want gone. Thanks, Jason
[jQuery] Re: Add value to Link. How can I do this?
$(".Download").each(function(){
$(this).attr('onClick', "javascript: pageTracker._trackPageview('/
downloads/map');");
});
On Oct 16, 5:51 pm, shapper wrote:
> Hello,
>
> I have the following anchor:
> http://www.example.com/files/map.pdf"; onClick="javascript:
> pageTracker._trackPageview('/downloads/map'); ">
>
> How can I add
>
> onClick="javascript: pageTracker._trackPageview('/downloads/
> map');"
>
> To all anchors of CSS class "Download" using JQuery?
>
> Thanks,
> Miguel
[jQuery] Index, .load issues
Hi Gang,
I've been wasting time trying to figure this out to no avail. Here's
my function:
//Toggle
$("#type_new").hide();
toggle = function(){
$("a.toggle").unbind('click').click(function(){
var aIndex = $("a#type").index(this);
if($("#type_new:eq("+aIndex+")").is(':visible')==true) $("a#type
small:eq("+aIndex+")").html("Add New Type"); else $("a#type small:eq
("+aIndex+")").html("Choose From Exisiting Types");
$("#type:input:eq("+aIndex+")").toggle();
$("#type_new:eq("+aIndex+")").toggle().val("");
});
}; toggle();
//Add Contact
$(".addItem").click(function(){
$("#addContact").load("ajax/addContact.php", '', function(){
$.thisIndex = $("tbody").index(this);
$(this).find("#type_new").hide();
$(this).attr("id", "newContact" +
$("tbody").index(this)).addClass
("highlight").after('');
$("tbody:not('#newContact"+$.thisIndex+"')").removeClass
("highlight");
toggle();
})
});
It's a toggle between a select box and a text input for users to
select from the list or create a new type. When I load a new section
into the table it then has another (new) type select and input. On
the newly created set the index comes up at 1 (rather than zero) but
that's when I get stuck. The Text changes in the tag to
"Choose from existing types" but the inputs don't toggle.
Here's what my HTML looks like. Imagine two of these after the load
event:
Type of Organization
Church
College
Theatre
Add New Type
Any thoughts or suggestions would help immensely.
[jQuery] Re: $.post and form data
Thanks! Looks perfect.
On Oct 12, 12:40 am, Karl Swedberg wrote:
> On Oct 11, 2009, at 3:35 PM, Jason wrote:
>
>
>
> > Can someone explain a little bit more (more then jQuery's docs) about
> > how the $.post operates? I know it's a "shortcut" for .ajax and it
> > uses the HTTP POST request. So I'm guessing it's not sending the same
> > request the form would send... i.e. you HAVE to provide the data to
> > the php script through $.post. Is that correct? Then my next
> > question is, if I have a set of check boxes and name each box
> > "services
> > []"... PHP will load the value of each into an array. Is there a
> > quick way to assign these value to a JS variable to pass onto the PHP
> > script? Because PHP doesn't create that array until the POST request,
> > correct? But since I am using $.post, PHP is not making the request,
> > therefore doesn't create the array. Is that right? So I must do it
> > manually in JS... what would be best/quickest way to go about this?
> > Thanks for the help.
>
> You can send the form's input values as a serialized string
> using .serialize(). So, if you have a form with id="foo" you could do
> something like this:
>
> $('#foo').submit() {
> var formData = $(this).serialize();
> $.post('/path/to/file/', formData, function() {
> // do something when post is successful.
> });
> return false;
>
> });
>
> --Karl
>
>
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
[jQuery] $.post and form data
Can someone explain a little bit more (more then jQuery's docs) about how the $.post operates? I know it's a "shortcut" for .ajax and it uses the HTTP POST request. So I'm guessing it's not sending the same request the form would send... i.e. you HAVE to provide the data to the php script through $.post. Is that correct? Then my next question is, if I have a set of check boxes and name each box "services []"... PHP will load the value of each into an array. Is there a quick way to assign these value to a JS variable to pass onto the PHP script? Because PHP doesn't create that array until the POST request, correct? But since I am using $.post, PHP is not making the request, therefore doesn't create the array. Is that right? So I must do it manually in JS... what would be best/quickest way to go about this? Thanks for the help.
[jQuery] Re: Block access to the page but unblock certains divs
Hi samh12,
I am working on something similar where I want to highlight elements
in a page in the way that you describe. I wonder if you have come
across a solution. One thought I have is to leverage jQuery's powerful
selection ability. Like, perhaps you apply $.blockUI to every element
on the page that id ":not" this? I am going to try to work on this
today a little, and share if I come up with anything. Also, let me
know if you were able to develop anything that met your requirements!
Thanks,
Jason
On Oct 2, 10:51 am, samh12 wrote:
> Hi Nalum,
> Idon't think that answers my question. I know I can block at page and
> element level however I want a mixture. I want to block the page but
> leave the element that's in error alone i.e.
>
> $(document).ready(function() {
> $('#btnSubmit').click(function() {
> $.blockUI({ message: null });
>
> $('#form_surname').unblock(); //now unblock the
> surname field as this needs correcting
>
> $('.blockOverlay').attr('title','Click to
> unblock').click($.unblockUI);
> });
> });
>
> Thanks.
[jQuery] jQuery Countdown help
I am attempting to use the jQuery Countdown plugin from
http://keith-wood.name/countdown.html, and i'm having trouble setting
the values to count down until. Any guidance would be greatly
appreciated.
$(function () {
var austDay = new Date();
austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
$('#count').countdown({until: austDay, layout: '{dn} {dl}, {hn} {hl},
{mn} {ml}, and {sn} {sl}'});
$('#year').text(austDay.getFullYear());
});
Cheers,
Jason
[jQuery] Re: Form and Validation Plugins
Can anyone help with my above query. I can not get it to validate
befor sending
the form. It only does after any empty form is submitted
Jason
On Jul 28, 7:33 pm, Jason wrote:
> I have created a new site that has a contact page and am trying to use
> the Forms plugin and Validation plugin. I can get the validation
> plugin to work fine and submit the form when it is valid but I am
> trying to use AJAX to update a div when the form has been successfully
> sent. All that is happening is it sends the form then validates
> meaning I get empty emails.. this is my code
>
>
> // prepare the form when the DOM is ready
> $(document).ready(function() {
> var options = {
> beforeSubmit: function() {
> return $('#signupForm').validate().form();
> },
>
> target: '#output2', // target element(s) to be
> updated with
> server response
> beforeSubmit: showRequest, // pre-submit callback
> success: showResponse // post-submit callback
>
> // other available options:
> //url: url // override for form's 'action'
> attribute
> //type: type // 'get' or 'post', override for
> form's 'method' attribute
> //dataType: null // 'xml', 'script', or
> 'json' (expected server response type)
> //clearForm: true, // clear all form fields after
> successful submit
> //resetForm: true // reset the form after successful
> submit
>
> // $.ajax options can be used here too, for example:
> //timeout: 3000
> };
>
> // bind to the form's submit event
> $('#signupForm').submit(function() {
> // inside event callbacks 'this' is the DOM element so we
> first
> // wrap it in a jQuery object and then invoke ajaxSubmit
> $(this).ajaxSubmit(options);
>
> // !!! Important !!!
> // always return false to prevent standard browser submit and
> page navigation
> return false;
> });
>
> $("#signupForm").validate({
> rules: {
> sendto: {
> required: true
> },
> fullname: "required",
> lastname: "required",
> email: {
> required: true,
> email: true
> },
> enquiry: {
> required: true
> }
>
> },
> messages: {
> sendto: "Please tell us who you wish to Contact",
> fullname: "Please enter your Name",
> lastname: "Please enter your lastname",
> email: "Please enter a valid email address",
> enquiry: "Please leave us a message"
> }
> });
>
> });
>
> // pre-submit callback
> function showRequest(formData, jqForm, options) {
> // formData is an array; here we use $.param to convert it to a
> string to display it
> // but the form plugin does this for you automatically when it
> submits the data
> var queryString = $.param(formData);
>
> // jqForm is a jQuery object encapsulating the form element. To
> access the
> // DOM element for the form do this:
> // var formElement = jqForm[0];
>
> alert('About to submit: \n\n' + queryString);
>
> // here we could return false to prevent the form from being
> submitted;
> // returning anything other than false will allow the form submit
> to continue
> return true;
>
> }
>
> // post-submit callback
> function showResponse(responseText, statusText) {
> // for normal html responses, the first argument to the success
> callback
> // is the XMLHttpRequest object's responseText property
>
> // if the ajaxSubmit method was passed an Options Object with the
> dataType
> // property set to 'xml' then the first argument to the success
> callback
> // is the XMLHttpRequest object's responseXML property
>
> // if the ajaxSubmit method was passed an Options Object with the
> dataType
> // property set to 'json' then the first argument to the success
> callback
> // is the json data object returned by the server
>
> alert('status: ' + statusText + '\n\nresponseText: \n' +
> responseText +
> '\n\nThe output div should have already been updated with the
> responseText.');}
>
>
>
> and the webpage ishttp://blackandmcfadden.com.au/newsite/fiat/contact.html
>
> Some help please
[jQuery] Form and Validation Plugins
I have created a new site that has a contact page and am trying to use
the Forms plugin and Validation plugin. I can get the validation
plugin to work fine and submit the form when it is valid but I am
trying to use AJAX to update a div when the form has been successfully
sent. All that is happening is it sends the form then validates
meaning I get empty emails.. this is my code
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
beforeSubmit: function() {
return $('#signupForm').validate().form();
},
target:'#output2', // target element(s) to be updated
with
server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action'
attribute
//type: type// 'get' or 'post', override for
form's 'method' attribute
//dataType: null// 'xml', 'script', or
'json' (expected server response type)
//clearForm: true, // clear all form fields after
successful submit
//resetForm: true// reset the form after successful
submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind to the form's submit event
$('#signupForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we
first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and
page navigation
return false;
});
$("#signupForm").validate({
rules: {
sendto: {
required: true
},
fullname: "required",
lastname: "required",
email: {
required: true,
email: true
},
enquiry: {
required: true
}
},
messages: {
sendto: "Please tell us who you wish to Contact",
fullname: "Please enter your Name",
lastname: "Please enter your lastname",
email: "Please enter a valid email address",
enquiry: "Please leave us a message"
}
});
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a
string to display it
// but the form plugin does this for you automatically when it
submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To
access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being
submitted;
// returning anything other than false will allow the form submit
to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
// for normal html responses, the first argument to the success
callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'xml' then the first argument to the success
callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'json' then the first argument to the success
callback
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' +
responseText +
'\n\nThe output div should have already been updated with the
responseText.');
}
and the webpage is http://blackandmcfadden.com.au/newsite/fiat/contact.html
Some help please
[jQuery] Form mailing script
Hi, I am new to jquery and have just created a contact form using the validation plugin and jquery. Everything works fine so far. My only issue is how do I submit this form to an email, I don't have any scripts etc and need a pretty secure way to do it. I also need to be able to customise the script to accept some other fields. The biggest bugbear for me is that I have a select box with different email destinations and need to send the mail to the one that is selected by the user. I want to have the value passed into the processing script to select the correct email address so I am not publishing it on the web. Has anyone done this and willing to give me some help and examples. regards Jason
[jQuery] Re: jQuery cycle plugin pager not working in FF and Safari
Thanks! Problem solved. It is always the simple things. I appreciate
the help.
On Jul 1, 8:54 am, Mike Alsup wrote:
> > I am having an odd error where the pager generates links but they
> > don't change the slide in FF and Safari. The biggest surprise of all
> > is that it actually works in IE.
>
> > Here is the page I am referring to:http://76.12.208.222/
>
> Try this:
>
> #slideshowPage { position: relative: z-index: 100; }
[jQuery] jQuery cycle plugin pager not working in FF and Safari
I am having an odd error where the pager generates links but they don't change the slide in FF and Safari. The biggest surprise of all is that it actually works in IE. Here is the page I am referring to: http://76.12.208.222/ Any suggestions?
[jQuery] Carousel with external controls problem
Well, I managed to put 2 "Carousel with external controls" together on a page. Now, I'm facing another problem, that's the external controls. The controls, I can't change the numbers to something else (name of the picture). You can check out what I mean here: http://jasonpang.com/test/test4.html Click on "Personal Projects", you'll see a carousel with external controls with text names, and It's not working, unless it's numbers. Please help :)
[jQuery] Re: Newbie question- declarative selectors inside procedural code
Excellent! Glad to see you figured that one out. Rest assured that
*every* web developer has pulled out hair related to that particular
issue. Fortunately, in many editors today, you can run a tool called
'jslint' that does a simple syntax check for you. In my editor
(TextMate), I actually have it set up to do that check every time I
save.
_jason
On May 26, 2:05 pm, colin_e wrote:
> Just to finish this one off, I discovered my problem in IE6 was
> nothing to do with the jquery search operation we were discussing.
>
> As I was working on the code I had added an object initialisation
> above the line in question that had an extra comma at the end, as in-
>
> var frames= {
> EM: 1*offset,
> .
> .
> .
> YH: 10*offset, //< };
>
> IE6 choked on this, whereas Firefox was quite happy with it.
>
> I've done enough little bits of Perl, PHP, and now JavaScript over the
> years that I have terrible trouble remembering exactly which bits of
> syntax will or won't work with each!
>
> Thanks again to Jason, my little dynamic map works like a charm.
>
> Regards: colin_e
>
> On May 25, 8:29 pm, kiusau wrote:
>
> > On May 25, 3:44 am, Jason Persampieri wrote:
>
> > > Certainly... you're really not all that far off at all... let me just
> > > point out a couple of things.
>
> > Very nice presentation!
>
> > It is likely that many novice users of jQuery will be able to benefit
> > from it. Please do respond to the originator's question about the use
> > of :first-child in IE, and suggest a work around if, indeed, it is an
> > issue.
>
> > Roddy
[jQuery] Re: Newbie question- declarative selectors inside procedural code
re: this vs $(this) -
this = DOMNode
$(this) = [DOMNode] (ie, an array containing the single element,
DOMNode) that also happens to have lots of nifty methods like
'children', 'find' and 'animate'.
The jQuery version should work in pretty much all browsers though...
the compatibility layer is built-in.
Oh, and if you aren't, use IE8 for IE debugging. It's nowhere near as
nice as FF+Firebug, but it's a lot better than IE7.
Also, http://api.jquery.com is a very handy reference tool :)
_jason
PS. Another couple of ways to get what you want -
/* get all direct children of this that are 's, then filter out all
remaning, but leave first children */
$(this).children('a').filter(":first-child")
/* get all direct children of this, grab just the first one, then
filter out all remaining, but leave 's */
$(this).children().eq(0).filter("a")
On May 25, 5:44 am, colin_e wrote:
> That is very, very helpful, thanks!
>
> I knew I hadn't found the correct way to say "constrain the search to
> children of 'this', now I know.
>
> To be honest I think i'm still unclear on the real difference between
> the vanilla Javascript 'this' and the jquery '$(this)'. For example I
> think that I could have got the selection I wanted with Javascript
> like-
>
> this.firstChild.className
>
> ...but I also know firstChild doesn't work in IE. I was hoping the
> jquery version would help solve that, but at the moment I still have a
> solution that works only in Firefox :-} At the moment I don't have
> an IE quivalent to Firebug so i'm slightly stuck on how to try to
> debug it.
>
> Anyway, in Firefox it works like a charm. Thanks for the help, much
> appreciated!
>
> Regards: colin_e
>
> On May 25, 11:44 am, Jason Persampieri wrote:
>
> > Certainly... you're really not all that far off at all... let me just
> > point out a couple of things.
>
> > 1) It's ":first-child", not ":first".
>
> > 2) inside the loop, the variable - this - is a reference to the DOM
> > node. Hence, to get the jQuery object for that node, use $(this)
> > (note the lack of quotes). Although I guess it's possible $("this")
> > may 'do the right thing' since there's no HTML Tag named "this".
>
> > 3) There is no 3.
>
> > 4) a:first-child says find every that happens to be the first-
> > child of its parent, *not* find the first child of my current
> > context. Is that clear? Here's an example.
>
> >
> > I am the first-child of 'p'.
> > I am not the first-child and hence will always live in
> > the shadow of my older brother, 'p'. Someday he'll pay.
> >
>
> > $("#foo a:first-child") => ['#bar']
>
> > 5) Putting it all together, you still need some way to say, "find
> > 's under my current ", here you have a few choices...
>
> > a) $("a:first-child", this) => find all s that are *any* descendant
> > of "this" that also happen to be a "first-child". Note that the
> > second parameter passed in to the '$' function is the context to
> > search within.
>
> > b) $(this).find("a:first-child") => same as a) but I happen to find
> > this syntax cleaner.
>
> > c) $(this).children("a:first-child") => finds all s that are
> > *direct* children of "this" and are also the "first-child". Astute
> > members of our audience will note this can only ever correspond to at
> > most one per . I think this is the one you are looking for.
>
> > Hope this helps!
>
> > _jason
>
> > On May 24, 1:12 pm, colin_e wrote:
>
> > > Hi. I'm very new to jquery, and a lightweight coder, so apologies for
> > > the newbie question.
>
> > > I think I understand the "implied loop" declarative nature of jquery
> > > selectors, that say (sort-of) "for everything matching the selector
> > > do"{ }
>
> > > What i'm struggling to get my head around is how this works inside a
> > > function once you HAVE a "this" object?
>
> > > Example:
> > > I have a list of the form-
>
> > >
> > > East
> > > Midlands
> > > North East > > span>
> > >
>
> > > This inside my document.ready I have a function like this-
>
> > > $('#map li').hover(
> > > function(){
> > > region= $('this a:first').attr('class'); //
> > > Tries to find the
> > > class of the first in
> > >
> > > //
> > > but always returns undefined??
> > > do_something_with_the_region();
> > > },
> > > function(){
> > > undo_something_with_the_region();
> > > }
> > > );
>
> > > The piece that says "region= $('this a:first').attr('class');" is my
> > > (clearly incorrect) attempt at the incantation to say "Give the
> > > current object (an ), return the class attribute of the first
> > > anchor that is a child of the current item".
>
> > > I suspect I haven't got the right idea at all, can anyone point me in
> > > the right direction?
>
> > > Regards: colin_e
[jQuery] Re: jQuery(document).ready() Type error on WebKit based Browsers
Sure,
I wasn't doing anything fancy, just -
try {
if ( div.getElementsByClassName("e").length === 0 )
return;
} catch (e) {}
but I'm not sure how that would have affected Opera and such (it
really
shouldn't).
As John said (on the jquery dev mailing list), the problem is due to
running
an exceedingly old version of Prototype (which I sadly don't have the
QA
hours to update)... I eventually fixed the problem by simply loading
jQuery
first.
_jason
*test*
On May 24, 10:02 pm, MichaelRuby wrote:
> Can you send me a code example for ignoring the exceptions?
>
> Thanks,
>
> Michael
>
> On May 13, 7:40 pm, Pappy wrote:
>
> > I've been hammering on this. I've narrowed it down to line 2238 of
> > jquery-1.3.2.js.
>
> > if ( div.getElementsByClassName("e").length === 0 )
> > return;
>
> > I threw a try/catch block around the code and am receiving this error
> > -
>
> > NOT_SUPPORTED_ERR: DOM Exception 9
>
> > I am currently running Safari Version 4 Public Beta (5528.16), but
> > apparently this bug is occurring in v3 as well (and of course,
> > Chrome).
>
> > By ignoring exceptions generated from the above, and the equivalent
> > line 2 statements later, my page loads and everything executes
> > perfectly.
>
> > _jason
>
> > On May 13, 6:32 pm, Pappy wrote:
>
> > > I am seeing the same error as Sulfura.
>
> > > My page works fine on Firefox and IE, but on Webkit-based browsers,
> > > any call to jQuery(function() {}) results in this error on line 83 of
> > > jquery-1.3.2.js --
>
> > > TypeError: Result of expression 'jQuery( document ).ready' [undefined]
> > > is not a function
>
> > > I have removed all external stylesheets from my page just in case, but
> > > no luck.
>
> > > _jason
>
> > > On Apr 30, 4:53 am, Sulfura wrote:
>
> > > > Yes, I noticed that afterwards and changed it accordingly. The Error
> > > > happend on line 3, jQuery(document).ready(). I copied it from jquery
> > > > tutorials but it still doesn't work. I made a new js file with a very
> > > > simple function but still no success. The Examples on jquery.com work
> > > > though, so I am quite puzzled by this.
>
> > > > On Apr 28, 7:40 pm, Jonathan wrote:
>
> > > > > Try changing jQuery("#dir").attr("disabled", false) to jQuery
> > > > > ("#dir").removeAttr('disabled');
>
> > > > > Also, does it give you a line number for the type mismatch that might
> > > > > help track it down?
>
> > > > > On Apr 28, 12:12 am, Sulfura wrote:
>
> > > > > > Hi there,
>
> > > > > > I searched the internet for hours but couldn't find a solution which
> > > > > > worked for me. I use jQuery to call a Perl-Module which outputs an
> > > > > > XML
> > > > > > File with all the Pictures in a specified Folder, which in turn is
> > > > > > interpreted by jQuery to show a preview of that same Folder.
>
> > > > > > It all works fine on Firefox, it works with some yet-unattended Bugs
> > > > > > on IE7, but on Safari and Opera (and all WebKit based Browsers for
> > > > > > that matter) it simply refuses to work. Both tell me that I have a
> > > > > > Type mismatch.
>
> > > > > > Code:
> > > > > > jQuery.noConflict();
>
> > > > > > jQuery(document).ready(function(){
>
> > > > > > jQuery("#dir").change(function () {
> > > > > > if (jQuery("input[name=mode]:checked").val() ==
> > > > > > "add_from_folder") {
> > > > > > jQuery("#preview").hide();
> > > > > > jQuery("select option:selected").each(function ()
> > > > > > {
> > > > > > jQuery("#preview").empty();
> > > > > > requestXML();
> > > > > > jQuery("#preview").slideDown("slow");
> > > > > > })
> > > > > > }
> > > > > > })
> > > > > > .change();
>
> > > > > > jQuery("input[name=mode]").change(function(){
> > > > > > if (jQuery("input[name=mode]").val() == "add_blank") {
> > > > > > jQuery("#preview").empty();
> > > > > > jQuery("#preview").hide();
> > > > > > jQuery("#dir").attr("value",";-;");
> > > > > > } else {
> > > > > > jQuery("#dir").attr("disabled", false);
> > > > > > }
> > > > > > })
> > > > > > .change();
>
> > > > > > });
>
> > > > > > function requestXML() {
> > > > > > jQuery.ajax({
> > > > > > type: "GET",
> > > > > > url: "/cgi-bin/apps/load_preview?directory=" + jQuery
> > > > > > ("#dir").val(),
> > > > > > dataType: "xml",
> > > > > > success: function(xml) {
> > > > > > jQuery(xml).find("picture").each(function(){
> > > > > > jQuery("#preview").append(" > > > > > src='/" + jQuery(this).find("reference").text() + "' />")
> > > > > > })
> > > > > > }
> > > > > > });
> > > > > > }
>
> > > > > > ##Code end
>
> > > > > > I know there are things that could be made more efficient but I am
> > > > > > still new to Ajax and jQuery and learned how to use it jus
[jQuery] Re: Newbie question- declarative selectors inside procedural code
Certainly... you're really not all that far off at all... let me just
point out a couple of things.
1) It's ":first-child", not ":first".
2) inside the loop, the variable - this - is a reference to the DOM
node. Hence, to get the jQuery object for that node, use $(this)
(note the lack of quotes). Although I guess it's possible $("this")
may 'do the right thing' since there's no HTML Tag named "this".
3) There is no 3.
4) a:first-child says find every that happens to be the first-
child of its parent, *not* find the first child of my current
context. Is that clear? Here's an example.
I am the first-child of 'p'.
I am not the first-child and hence will always live in
the shadow of my older brother, 'p'. Someday he'll pay.
$("#foo a:first-child") => ['#bar']
5) Putting it all together, you still need some way to say, "find
's under my current ", here you have a few choices...
a) $("a:first-child", this) => find all s that are *any* descendant
of "this" that also happen to be a "first-child". Note that the
second parameter passed in to the '$' function is the context to
search within.
b) $(this).find("a:first-child") => same as a) but I happen to find
this syntax cleaner.
c) $(this).children("a:first-child") => finds all s that are
*direct* children of "this" and are also the "first-child". Astute
members of our audience will note this can only ever correspond to at
most one per . I think this is the one you are looking for.
Hope this helps!
_jason
On May 24, 1:12 pm, colin_e wrote:
> Hi. I'm very new to jquery, and a lightweight coder, so apologies for
> the newbie question.
>
> I think I understand the "implied loop" declarative nature of jquery
> selectors, that say (sort-of) "for everything matching the selector
> do"{ }
>
> What i'm struggling to get my head around is how this works inside a
> function once you HAVE a "this" object?
>
> Example:
> I have a list of the form-
>
>
> East
> Midlands
> North East span>
>
>
> This inside my document.ready I have a function like this-
>
> $('#map li').hover(
> function(){
> region= $('this a:first').attr('class'); // Tries to
> find the
> class of the first in
> //
> but always returns undefined??
> do_something_with_the_region();
> },
> function(){
> undo_something_with_the_region();
> }
> );
>
> The piece that says "region= $('this a:first').attr('class');" is my
> (clearly incorrect) attempt at the incantation to say "Give the
> current object (an ), return the class attribute of the first
> anchor that is a child of the current item".
>
> I suspect I haven't got the right idea at all, can anyone point me in
> the right direction?
>
> Regards: colin_e
[jQuery] Re: jQuery functions called from setTimeout fails
Alternatively, another method would be -
setTimeout( function() { movebus(a, b, c);}, 300);
This format is preferred as it won't invoke 'eval', allows for more
complex logic and gets you some nifty closure action.
_jason
On May 25, 1:36 am, Surya Prakash wrote:
> Hi U can try as below:
> var a;
> var b;
> varc c;
> setTimeout("movebus("+a+","+ b+","+ c+")",300);
>
> i hope this is help ful..
> let me know this works for u r not,,,
>
> On Sun, May 24, 2009 at 4:05 PM, Mike wrote:
>
> > I have a jQuery function with three parameters which works just fine
> > when invoked directly,
>
> > movebus(a,b,c);
>
> > but when I try to delay its invocation using setTimeout, as in
>
> > setTimeout("movebus(a,b,c); ", 5000);
>
> > I receive the error message in Firebug "movebus(a,b,c) not defined".
>
> > Can anyone suggest why this is?
>
> > regards
>
> > Mike
[jQuery] Re: animate padding start value - Firefox (getComputedStyle)
Oh... gotcha. Yes, mine doesn't error-out either. It's just that if
I'm trying to animate to 12px from whatever is currently set in the
stylesheet, the padding first 'jumps' to 0px, then animates to 12px.
So, for yours, maybe if you tried setting the 4 sides individually (or
set the padding on the element directly), it would fix your
'jumpiness' as well?
_jason
On May 22, 6:51 am, Liam Byrne wrote:
> It has worked for me by just setting a single value in the CSS and using
> a single value in the animate function; as I said, the only issue I
> encountered was that FF, Chrome & Safari "jumped" as if I'd simply set
> the value.
>
> Maybe that's related to what you're seeing, but it "works" on some level
> without giving an error
>
> Liam
>
> Jason Persampieri wrote:
> > The problem occurs when trying to determine the 'start' value.
> > getComputedStyle explodes 'padding' into its four individual
> > components. If you want to animate padding (or margin), you either
> > have to specify each one in the first argument, or explicitly set the
> > initial padding on the element (as opposed to via a stylesheet).
>
> > On May 21, 12:16 pm, Liam Byrne wrote:
>
> >> Maybe I'm wrong, but I think
>
> >> myElement.animate( {padding: 12px} )
>
> >> won't work anyway ? Shouldn't it be
>
> >> myElement.animate( {padding: 12} )
>
> >> That said, tests here show that only IE & Opera offer a smooth animation
> >> - the others (FF, Chrome & Safari) seem to jump
>
> >> L
>
> >> Jason Persampieri wrote:
>
> >>> (Firefox 3.0.10, OS X)
>
> >>> I am setting a padding value via a stylesheet and trying to animate it
> >>> -
>
> >>> - CSS
> >>> myElement { padding: 20px }
>
> >>> - Javascript
> >>> myElement.animate( {padding: 12px} )
>
> >>> When calculating the start padding value, jQuery calls
> >>> 'getComputedStyle'. Unfortunately,
>
> >>> computedStyle.padding = ""
> >>> computedStyle.padding-top = "20px"
> >>> computedStyle.padding-right = "20px"
> >>> computedStyle.padding-bottom = "20px"
> >>> computedStyle.padding-left = "20px"
>
> >>> and the call to 'getPropertyValue' returns an empty string (which is
> >>> translated to 0px).
>
> >>> Would this be considered a jQuery or Firefox issue?
> >>>
>
> >>> No virus found in this incoming message.
> >>> Checked by AVG -www.avg.com
> >>> Version: 8.5.339 / Virus Database: 270.12.36/2126 - Release Date:
> >>> 05/21/09 06:22:00
> >>>
>
> >>> No virus found in this incoming message.
> >>> Checked by AVG -www.avg.com
> >>> Version: 8.5.339 / Virus Database: 270.12.36/2128 - Release Date:
> >>> 05/22/09 06:03:00
[jQuery] Re: how to get the element that triggered the event
Instead of declaring the javascript handler in the href, declare it
with jQuery in a script section.
Print
$("a.print").click(function() {
printSection( $(this).parent() );
return false;
})
_jason
On May 21, 7:18 pm, iceangel89 wrote:
> i have a link that onclick calls function printSection
>
> Print
>
> i want to find out which link isit so i can get the parent, and do
> whatever i need to
[jQuery] Re: submit() not submitting
That will only submit if form is the first-child of it's parent (in
the DOM). Can you verify that's the case?
alert( $("form:first").length ); // or something
On May 21, 12:51 pm, l3kris wrote:
> I have this function that validates and is supposed to submit a simple
> form:
>
> $(function() {
> $('#godkend').click(function() {
> if($('#Select1').val() == "") {
> alert('Du har ikke valgt første');
> } else if($('#Select2').val() == "" && $('#Select2').is(':visible'))
> {
> alert('Du har ikke valgt anden');
> } else if($('#Select3').val() == "" && $('#Select3').is(':visible'))
> {
> alert('Du har ikke valgt tredje');
> } else {
> alert('fint');
> $("form:first").submit();
> }
>
> });
> });
>
> The validation works fine, but the submitting doesn't. The test (alert
> ('fint')) pops up allright, so what should I change?
[jQuery] attribute selector order
(Firefox 3.0.10, OS X)
Can anyone explain why these two statements would return different
sets?
>>> inlineTips.filter("[title!=''][value='']")
[input.inlinetip, input.inlinetip, input.inlinetip, input.inlinetip,
input.inlinetip]
>>> inlineTips.filter("[value=''][title!='']")
[]
To make sure it's not just ignoring the second attribute...
>>> inlineTips.filter("[value='']")
[input.inlinetip, input.inlinetip, input.inlinetip, input.inlinetip,
input.inlinetip]
>>> inlineTips.filter("[title!='']")
[input.inlinetip, input.inlinetip, input.inlinetip, input.inlinetip,
input.inlinetip]
Does attribute order really matter? Am I just having a massive brain
fart?
[jQuery] Re: animate padding start value - Firefox (getComputedStyle)
The problem occurs when trying to determine the 'start' value.
getComputedStyle explodes 'padding' into its four individual
components. If you want to animate padding (or margin), you either
have to specify each one in the first argument, or explicitly set the
initial padding on the element (as opposed to via a stylesheet).
On May 21, 12:16 pm, Liam Byrne wrote:
> Maybe I'm wrong, but I think
>
> myElement.animate( {padding: 12px} )
>
> won't work anyway ? Shouldn't it be
>
> myElement.animate( {padding: 12} )
>
> That said, tests here show that only IE & Opera offer a smooth animation
> - the others (FF, Chrome & Safari) seem to jump
>
> L
>
> Jason Persampieri wrote:
> > (Firefox 3.0.10, OS X)
>
> > I am setting a padding value via a stylesheet and trying to animate it
> > -
>
> > - CSS
> > myElement { padding: 20px }
>
> > - Javascript
> > myElement.animate( {padding: 12px} )
>
> > When calculating the start padding value, jQuery calls
> > 'getComputedStyle'. Unfortunately,
>
> > computedStyle.padding = ""
> > computedStyle.padding-top = "20px"
> > computedStyle.padding-right = "20px"
> > computedStyle.padding-bottom = "20px"
> > computedStyle.padding-left = "20px"
>
> > and the call to 'getPropertyValue' returns an empty string (which is
> > translated to 0px).
>
> > Would this be considered a jQuery or Firefox issue?
> >
>
> > No virus found in this incoming message.
> > Checked by AVG -www.avg.com
> > Version: 8.5.339 / Virus Database: 270.12.36/2126 - Release Date: 05/21/09
> > 06:22:00
[jQuery] animate padding start value - Firefox (getComputedStyle)
(Firefox 3.0.10, OS X)
I am setting a padding value via a stylesheet and trying to animate it
-
- CSS
myElement { padding: 20px }
- Javascript
myElement.animate( {padding: 12px} )
When calculating the start padding value, jQuery calls
'getComputedStyle'. Unfortunately,
computedStyle.padding = ""
computedStyle.padding-top = "20px"
computedStyle.padding-right = "20px"
computedStyle.padding-bottom = "20px"
computedStyle.padding-left = "20px"
and the call to 'getPropertyValue' returns an empty string (which is
translated to 0px).
Would this be considered a jQuery or Firefox issue?
[jQuery] Re: How to display additional text along with link
Is this what you're looking for?
$("a:not[href^=http]").each(function(){
var ext=$(this).attr("href").match(/\.[^\.]*$/);
if (ext) $(this).after("("+ext.slice
(1)+")");
} );
On May 15, 8:09 am, infoaddicted wrote:
> This calls for a function, where you can hide the gory details. Use a
> selector to gather up the "a" elements, and pass that as the argument
> to the function.
> pseudocode:
>
> var linksToChange = JQuery Selector;
> function changeLinks( linksToChange ){
>
> either:
> a "for" loop to step through the object links ToChangelike an
> array
> probably an "if" conditional in every iteration
> see:http://tinyurl.com/3sdkgl
> also check out jquery's .each() iterator in the Utilities
> section of the docs
>
> or:
> a "switch" statement
> see:http://tinyurl.com/osezq2
>
> }
>
> On May 14, 3:18 pm, vmrao wrote:
>
> > OK. I was able to add the text as well as apply special style to it
> > using the following code.
>
> > $("a[href$='.doc']:not(a[href^='http'])").after($('').attr
> > ('class','fileExtension').html(" (" + '.doc' + ") "));
> > $("a[href$='.docx']:not(a[href^='http'])").after($('').attr
> > ('class','fileExtension').html(" (" + '.docx' + ") "));
> > $("a[href$='.xls']:not(a[href^='http'])").after($('').attr
> > ('class','fileExtension').html(" (" + '.xls' + ") "));
> > $("a[href$='.xlsx']:not(a[href^='http'])").after($('').attr
> > ('class','fileExtension').html(" (" + '.xlsx' + ") "));
> > $("a[href$='.ppt']:not(a[href^='http'])").after($('').attr
> > ('class','fileExtension').html(" (" + '.ppt' + ") "));
> > $("a[href$='.pptx']:not(a[href^='http'])").after($('').attr
> > ('class','fileExtension').html(" (" + '.pptx' + ") "));
> > $("a[href$='.pdf']:not(a[href^='http'])").after($('').attr
> > ('class','fileExtension').html(" (" + '.pdf' + ") "));
> > $("a[href$='.mpg']:not(a[href^='http'])").after($('').attr
> > ('class','fileExtension').html(" (" + '.mpg' + ") "));
>
> > However, I am not sure if there is scope to minimize the above code
> > (as you see one line for every file extension).
>
> > On May 14, 2:42 pm, vmrao wrote:
>
> > > I think it is not clear. Here is my code.
>
> > > $("a[href$='.doc']").after(" (" + '.doc' + ") ");
> > > $("a[href$='.docx']").after(" (" + '.docx' + ") ");
> > > $("a[href$='.xls']").after(" (" + '.xls' + ") ");
> > > $("a[href$='.xlsx']").after(" (" + '.xlsx' + ") ");
> > > $("a[href$='.ppt']").after(" (" + '.ppt' + ") ");
> > > $("a[href$='.pptx']").after(" (" + '.pptx' + ") ");
> > > $("a[href$='.pdf']").after(" (" + '.pdf' + ") ");
> > > $("a[href$='.mpg']").after(" (" + '.mpg' + ") ");
>
> > > I would like to know if it is possible to have a one-line code which
> > > replaces all the above code. Also, for the extra text (ex: .doc) being
> > > added, I need to add a special CSS style. I tried this and it does not
> > > work.
>
> > > $("a[href$='.doc']").after(" (" + '.doc' + ") ").addClass
> > > ("fileExtension");
>
> > > On May 14, 2:00 pm, waseem sabjee wrote:
>
> > > > here i modified my code for class adding
>
> > > > var obj = $("a");
>
> > > > for(var i = 0; i < obj.length; i++) {
> > > > obj.eq(i).wrap(""
>
> > > > > ); // wrap the hyperlink in a span tag
> > > > > obj.parent().eq(i).prepend('This is text before
> > > > > the
> > > > > hyperlink');
> > > > > obj.parent().eq(i).append('This is text after the
> > > > > hyperlink');
> > > > > }
>
> > > > On Thu, May 14, 2009 at 7:58 PM, waseem sabjee
> > > > wrote:
>
> > > > > var obj = $("a");
>
> > > > > for(var i = 0; i < obj.length; i++) {
> > > > > obj.eq(i).wrap(""); // wrap the hyperlink in a span tag
> > > > > obj.parent().eq(i).prepend("This is text before the hyperlink");
> > > > > obj.parent().eq(i).append('This is text after the hyperlink');
> > > > > }
>
> > > > > use the above common method and you can furthur change this script to
> > > > > look
> > > > > for hyperlinks with a specific class by saying :
> > > > > var obj = $("a.myclass");
> > > > > or
> > > > > var obj = $("a#myid");
> > > > > may be even
> > > > > var obj = $("h2 a");
>
> > > > > On Thu, May 14, 2009 at 7:46 PM, vmrao wrote:
>
> > > > >> Also, I would like to apply a specific CSS style to the text being
> > > > >> added.
>
> > > > >> Here is my CSS.
> > > > >> .fileExtension {
> > > > >> padding-left:0pt;
> > > > >> font-family: Arial, Helvetica, sans-serif;
> > > > >> font-size: 7pt;
> > > > >> font-weight: normal;
> > > > >> color: #354963;
> > > > >> }
>
> > > > >> On May 14, 1:18 pm, vmrao wrote:
> > > > >> > Thanks. How about if I want to make it dynamic ? Say, I have
> > > > >> > several
> > > > >> > links on the page with different extensions
> > > > >> > (Ex: .doc, .docx, .ppt, .pptx, .pdf, .mpg). Can I accomplish the
> > > > >> > above
> > > > >> > with one statement rather than hard coding what text to append for
> > > > >> > each extension ?
>
> > > > >> > On May 14, 12:23 pm, brian wrote:
>
> >
[jQuery] Re: 1st and 2nd level menu item widths
All sorted - just found supersubs :-) On May 6, 12:00 pm, Jason wrote: > Does any know if it is possible to make the superfish drop down menu > item width the same as the main menu items widths (i.e. so that the > 1st and second level menu items have the same width) - And if so how > do you about setting it? Is it just in the CSS or is in the script > somewhere? > > I have been playing with the style sheets setting widths to lists and > list items but nothing seems to change. > > Any suggestions would be greatly appreciated. > > Regards, > Jason
[jQuery] [Superfish] 1st and 2nd level menu item widths
Does any know if it is possible to make the superfish drop down menu item width the same as the main menu items widths (i.e. so that the 1st and second level menu items have the same width) - And if so how do you about setting it? Is it just in the CSS or is in the script somewhere? I have been playing with the style sheets setting widths to lists and list items but nothing seems to change. Any suggestions would be greatly appreciated. Regards, Jason
[jQuery] jCarousel remove method problems
I have added buttons to my jCarousel to trigger removing any image from the carousel. However, it seems the remove() method is not working for this. First off, it only allows you to remove images that are off-screen. Even if I hack around that problem the carousel does not update to remove the gap where the removed image was. If have tried resetting the size() value and then calling reset() or reload() but neither of those work either. Any ideas?
[jQuery] Re: Managing scripts in AJAX applications
On Apr 1, 1:39 pm, JMan wrote:
> One thing I have been struggling with is AJAX applications is managing
> the js code that powers them.
>
> For example if you have a page that loads content from an AJAX call to
> the server and that content also has js code associated with it in
> order to function how do I manage that code? If I have 20 pages that
> get loaded from the server via AJAX at one point or another I do not
> want to have one huge js file with a bunch of code for each page in
> it.
JMan,
Consider letting your server side framework manage your scripts for
you. Instead of using $.getScript to include required scripts on the
fly on the client side, I push them into a list as needed on the
server side, and then a process combines all of the individual scripts
into one large one, runs it through YUI Compressor, writes it to disk,
and inserts a link to it in the final assembled HTML. Everything gets
cached, too, so that process is only repeated when a script is added,
modified, or removed in the mix for a particular request.
This lets me manage all of my scripts which are specific to single
screens/pages in their own organized, easy to find, external
little .js files, but still take advantage of the performance gains
provided from externalizing the scripts, reducing the total number of
HTTP requests, and using compression and minification. It works for
CSS files, too!
I've been using some variation of this system for a couple of years
now on various sites, and have been very pleased with the performance
and productivity gains. It's written in Lasso, but the concepts are
straightforward enough that it should be easy to implement in other
languages.
The gist of it is this: There's an "asset_manager" class that you
initialize up front. It grabs whatever items you deem "global" (i.e.,
the base jQuery library, a CSS reset, etc.) automatically. Then, as
the rest of the request is processed, you can add additional scripts
and styles either implicitly or explicitly. The implicit method
replaces a normal server side 'include' with one that checks for the
existence of matching .js and .css files, so instead of this:
include('/path/to/include.inc')
...I do this:
asset_manager->load('/path/to/include.inc')
...and if these files exist on disk:
/path/to/include.js
/path/to/include.css
...they are automatically included. If there are additional plugins,
etc. that I need to add for a particular include, I add them
explicitly within the include like so:
asset_manager->add('/path/to/plugins/jquery.plugin.js')
I presented the system as part of a talk on client-side optimization
last year at the Lasso Developer Conference in Chicago. It covers the
13 original rules from the Yahoo! Exceptional Performance Team that
became the basis of the tests used by the YSlow plugin for Firebug,
and then explains how this system automates adherence to many of those
rules. The paper, slides, and sample code that I presented are
available here:
http://devblog.jasonhuck.com/2008/09/23/an-asset-management-system-for-lasso-powered-sites/
- jason
[jQuery] Re: multiple dynamic jcarousel instances
Here is an example on how to have multiple jCarousels on one page.
Summary: you need to name each jCarousel with a different ID.
http://sorgalla.com/projects/jcarousel/examples/static_multiple.html
On Apr 2, 12:22 pm, amuhlou wrote:
> Hello,
>
> I'm working with thejCarouselplugin and would like to have multiple
> carousels on one page, each dynamically pulling the scrolling items
> from an array. I am wondering what sort of modifications I would need
> to make to the jcarousel_functions.php file and page xhtml to
> accommodate 2+ instances?
>
> Here's my sample:http://static.spartaninternet.com/sandbox/carousel/
>
> And here is the code from the jcarousel_functions.php file:
>
>
> $jcarousel_items = array(
> array(
> 'title' => 'Face 1',
> 'src' => 'images/thumbs/beach.jpg',
>
> ),
>
> array(
> 'title' => 'Face on a dock',
> 'src' => 'images/thumbs/beach2.jpg',
>
> ),
> array(
> 'title' => 'blue monkey face',
> 'src' => 'images/thumbs/beachsunset.jpg',
>
> ),
> array(
> 'title' => 'scooter face',
> 'src' => 'images/thumbs/frogs.jpg',
>
> ),
> array(
> 'title' => 'fun face',
> 'src' => 'images/thumbs/market.jpg',
>
> ),
> array(
> 'title' => 'Flower 6',
> 'src' => 'images/thumbs/monkey.jpg',
>
> ),
> array(
> 'title' => 'Flower 7',
> 'src' => 'images/thumbs/monkey2.jpg',
>
> ),
> array(
> 'title' => 'Flower 8',
> 'src' => 'images/thumbs/rooftops.jpg',
>
> ),
> array(
> 'title' => 'Flower 9',
> 'src' => 'images/thumbs/volcano.jpg',
>
> ),
> array(
> 'title' => 'Flower 10',
> 'src' => 'images/thumbs/waterfall.jpg',
>
> ),
> );
>
> /**
> * This function returns the number items. Typically, this
> * would fetch it from a database (SELECT COUNT(*) FROM items) or
> * from a directory.
> */
> function jcarousel_countItems()
> {
> global $jcarousel_items;
>
> return count($jcarousel_items);
>
> }
>
> /**
> * This function returns the items. Typically, this
> * would fetch it from a database (SELECT * FROM items LIMIT $limit
> OFFSET $offset) or
> * from a directory.
> */
> function jcarousel_getItems($limit = null, $offset = null)
> {
> global $jcarousel_items;
>
> // Copy items over
> $return = $jcarousel_items;
>
> if ($offset !== null) {
> $return = array_slice($return, $offset);
> }
>
> if ($limit !== null) {
> $return = array_slice($return, 0, $limit);
> }
>
> return $return;
>
> }
>
> ?>
>
> Thanks!
[jQuery] captions and jcarousel
Forgive my ignorance first of all, but i have a horizontal "carousel" (not sure of the technical term) with images. Is it possible to include a caption(text) above and below each image? Secondly, is the size of each image only limited to 75x75? Many thanks jason
[jQuery] Stuttering background with accordion in Firefox
Trying my luck over here because I am not getting any love in the
jquery ui mailing list.
I am getting a strange behavior with Firefox using the accordion. This
works fine in all other browsers including Internet Explorer. First,
let me describe my setup.
Firefox 3 (Tested in OS X and Windows, same behavior)
jQuery 1.3.
jQuery UI 1.7
Relevant screenshots:
Normal- http://www.jasonism.org/media/normal.png
Broken- http://www.jasonism.org/media/broken.png
Corresponding code:
$(function() {
$("#accordion").accordion({
autoHeight: false,
alwaysOpen: false,
collapsable: true,
header: 'h3',
active: false
});
});
If you take a look at the above screenshots you will notice a tree.
This tree is a background image. Whenever I click on one of the
accordion tabs, it in turns drops down everything underneath of it to
make room for the content as it should. But the problem I am seeing is
with the tree creating a stuttering effect. I know this may not be
something I can personally fix and may just be a bug. But I thought I
would start here. Thanks for any help you may be able to provide.
I still have not been able to fix this. I tried a different solution
where I made the tree an absolute image and put a z-index the middle
container. This solved the problem for most browser but on
the 2 pages I am using the accordion UI. In internet explorer the
images z-index gets messed up and it does not show up at all. I would
really love for the first solution to work. It is strange that this
only happens in Firefox.
[jQuery] Nested draggable list not causing droppable events to fire
I have a nested list which represents a folder hierarchy. An example
of one of these lists is below. Basically I want the user to be able
to drag any of the folders into a droppable. As is, if the user
starts dragging Folder1 in the example below, the whole list is
dragged along as well (which is what I want). However, when trying to
drop the list into a Droppable, the "drop" event doesn't fire. If I
drag Folder1.1.1 or Folder1.1.2 below, the Droppable events fire just
fine.
Folder1
Folder1.1
Folder1.1.1
Folder1.1.2
I have this in my Javascript:
$(document).ready(function() {
$(".draggers").draggable({
revert: true,
opacity: 0.2
});
$(".dropZone").droppable({ //dropZone is a div
accept: ".draggers",
drop: function (ev,ui) {
alert("dropped");
}
});
});
There is another quirk. When the page first loads, any element in the
'children' class has it's display set to "none" in my CSS. If the
user clicks on a plus sign (the img tag in the example), the
'children' class has it's display set to "inline", causing it to
appear. Prior to clicking on the plus sign to expand out the tree,
the element can be successfully dragged and dropped as well. But once
it's children have their display set to inline, the parent list cannot
be successfully dropped (it can still be dragged though). Has anyone
else had (and hopefully solved) this problem?
[jQuery] Nested draggable list not causing droppable events to fire
I have a nested list of the type below. It represents a folder
hierarchy and I am trying to make it so that if the user drags any
folder in the tree, all of the children will be dragged along with
it. In the example below, if the user drags Folder1 the entire tree
comes with it (which is what I want). However, Droppable events only
fire when one of the child li's (Folder1.1.1 and Folder1.1.2 in this
example) are dragged into the droppable area (a div called dropZone).
It seems to me that if an element is allowed to be made Draggable, it
also should fire Droppable events. Has any else had this problem?
I've also noticed that if I use CSS to change the display property of
Folder1.1.1 and Folder1.1.2 from inline to none, Folder1.1 will now
cause Droppable events to fire.
Folder1
Folder1.1
Folder1.1.1
Folder1.1.2
My Javascript is below:
$(document).ready(function() {
$(".draggers").draggable({
revert: true,
opacity: 0.2
});
$(".dropZone").droppable({
accept: ".draggers",
drop: function (ev,ui) {
alert("dropped");
}
});
});
I am using jQuery 1.3.2 and UI version 1.7
[jQuery] linkselect plugin: problem with javascript set value
I'm trying to externally update the value of the linkselect field
using
this._itemSelect.linkselect("val", newValue);
and am getting the following exception on FF3: 'self is undefined' on
line 37, since the 'self' lookup from $.data returned null. Digging in
to things, it looks like $.data is getting initialized with $input[0],
but at least in my browser, the retrieval is being done with $select.
Changing line 178 to
$.data($select[0], "linkselect", this);
fixed the issue for me. Is this the proper fix? Can this get
integrated?
I'm also having an issue with the width of the dropdown list, my
linkselect item is an inline element in a span, so it's unable to
properly size the parent and the dropdown width is always set to the
max-width from the CSS class. What's the proper way to get the list to
size to its contents when its in an inline element?
Thanks,
Jason
[jQuery] tablesorter doesn't sort negative currency properly
Hi, I have a column with values $4.50, $127.00, -$130.00, -15.76 and the sorting doesn't work. It works fine if all values are positive, however. Does anyone have any idea how to fix this? For now I just have to eliminate the "$" in order for it to work. Thanks, Jason
[jQuery] linkselect plugin: issue with setting value
I'm trying to externally update the value of the linkselect field
using
this._itemSelect.linkselect("val", newValue);
and am getting the following exception on FF3: 'self is undefined' on
line 37, since the 'self' lookup from $.data returned null.
Digging in to things, it looks like $.data is getting initialized with
$input[0], but at least in my browser, the retrieval is being done
with $select. Changing line 178 to
$.data($select[0], "linkselect", this);
fixed the issue for me. Is this the proper fix? Can this get
integrated?
I'm also having an issue with the width of the dropdown list, my
linkselect item is an inline element in a span, so it's unable to
properly size the parent and the dropdown width is always set to the
max-width from the CSS class. What's the proper way to get the list to
size to its contents when its in an inline element?
Thanks,
Jason
[jQuery] Re: BlockUI: multiple blocks
Was actually able to figure this out. I needed to pass in a blank
string for the message, then my css would get applied to the message,
so all I had to do was manually move it offsreen:
$.blockUI( {message:' ', css: { left: '-1000px'} , overlayCss:
{opacity: '0'} } );
Thanks again,
Jason
On Feb 5, 9:16 am, Jason wrote:
> Hi Mike,
> Thanks for the help. The multiple calls to blockUI do work fine, but I
> can't get the page-wide block to not show a message. I'm using
> external CSS to define the overlays:
> $.blockUI.defaults.overlayCSS = {};
> $.blockUI.defaults.css = {};
> And I'm trying to pass no message or css to my call:
> $.blockUI( {message:null, css: { opacity: '0' }, overlayCss:
> {opacity: '0'} } );
> But I'm still seeing the message box display even though there is no
> message. Is there any way to suppress completely and still use
> external CSS definitions?
>
> Thanks again,
> Jason
>
> On Feb 1, 9:03 am, Mike Alsup wrote:
>
> > > data in the table. What I'd really like to do is block user input on
> > > the entire page but only draw the overlay and message on the table
> > > portion. What's the best way to do this? Can I block the div as I am
> > > now and still call $.blockUI with no message in order to block input
> > > to the entire page
>
> > Yes, you can do that. To block the page without a message and without
> > the overlay try this:
>
> > $.blockUI({
> > message: null,
> > overlayCSS: {
> > opacity: 0
> > }
>
> > });
[jQuery] Re: BlockUI: multiple blocks
Hi Mike,
Thanks for the help. The multiple calls to blockUI do work fine, but I
can't get the page-wide block to not show a message. I'm using
external CSS to define the overlays:
$.blockUI.defaults.overlayCSS = {};
$.blockUI.defaults.css = {};
And I'm trying to pass no message or css to my call:
$.blockUI( {message:null, css: { opacity: '0' }, overlayCss:
{opacity: '0'} } );
But I'm still seeing the message box display even though there is no
message. Is there any way to suppress completely and still use
external CSS definitions?
Thanks again,
Jason
On Feb 1, 9:03 am, Mike Alsup wrote:
> > data in the table. What I'd really like to do is block user input on
> > the entire page but only draw the overlay and message on the table
> > portion. What's the best way to do this? Can I block the div as I am
> > now and still call $.blockUI with no message in order to block input
> > to the entire page
>
> Yes, you can do that. To block the page without a message and without
> the overlay try this:
>
> $.blockUI({
> message: null,
> overlayCSS: {
> opacity: 0
> }
>
> });
[jQuery] BlockUI: multiple blocks
Hi all, I'm using the BlockUI plugin with great success on my data table that's asynchronously loading data via AJAX, when new data is being loaded I'm visually overlaying the table (wrapped in a div) to let the user know that data is being loaded and prevent manipulation of the data in the table. What I'd really like to do is block user input on the entire page but only draw the overlay and message on the table portion. What's the best way to do this? Can I block the div as I am now and still call $.blockUI with no message in order to block input to the entire page, or will multiple invocations like this cause issues? Thanks, Jason
[jQuery] json and dates
I just started working with jquery yesterday in conjunctions with
Castle Monorail. I'm spiking a very simple ajax call.
here is my html
$(document).ready(function() {
$("#ajax-link").click(function() {
$.getJSON("CurrentTime.mvc", function (time_from_the_server,
the_status) {
$("#server-time").html(the_status + ' - ' +
time_from_the_server);
});
});
});
Get the current time from the
server.
[should be displayed here]
the results of the this are:
success - /Date(1232547949287-0500)/
reading up on json it appears that dates where an after thought. my
understanding is that the / mean it's not a literal string, it's a
date. 1232547949287 is epnoch, or seconds since 1970, or something
like that and -0500 is the timezone.
how can I convert /Date(1232547949287-0500)/ to display the actual
default date. something like:
Wednesday, January 21, 2009, 9:30 am
I believe I have to do some regex, prasing and eval the result. If
that is correct, then I should be able to build a prototype function
which could automatically convert this for me, correct?
Jason
[jQuery] setting default value for datepicker.
today I'm learnig jquery. I downloaded jquery-1.3.min.js and jquery-ui-
personalized-1.6rc5.min.js with everything.
I'm trying to get the calendar working. so far I have most elements
that I need:
start on saturday
formatted date
select year/month
display with image and textbox focus
there are 2 things remaining.
1. disable specific days (if date != saturday, disable)
2. set the default date.
the getDate and setDate do not seem to work at all. here is my code:
$(document).ready(function() {
var birthday = new Date(1980, 11, 25);
$('#selected_date').datepicker({
setDate:birthday,
dateFormat:"mm-dd-y",
changeMonth:true,
changeYear:true,
firstDay:6,
showOn: 'both'}
);
});
am I missing something, or is this functionality broken? I'm assuming
when I pass in the setDate property the calendar will show that date
selected and the value will be placed in the textbox.
[jQuery] Re: LavaLamp for jQuery menu
Please ignore this post. I found that a newer version is made at...
http://nixboxdesigns.com/lavalamp.php
On Jan 10, 11:30 am, Jason Broyles wrote:
> I am trying to implement this LavaLamp for jQuery
> menu.http://gmarwaha.com/blog/?p=7
> It comes with jQuery 1.1.3.1 and it works just fine with it. However,
> I was already using 1.2.6 on my site and the menu will not work with
> it. The code to initialize the menu is below but I think everything is
> ok with that. Does anyone have an idea why it doesn't work with a
> newer version? Thanks for your time.
>
>
> $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed:
> 700 })});
>
[jQuery] LavaLamp for jQuery menu
I am trying to implement this LavaLamp for jQuery menu.
http://gmarwaha.com/blog/?p=7
It comes with jQuery 1.1.3.1 and it works just fine with it. However,
I was already using 1.2.6 on my site and the menu will not work with
it. The code to initialize the menu is below but I think everything is
ok with that. Does anyone have an idea why it doesn't work with a
newer version? Thanks for your time.
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed:
700 })});
[jQuery] [validate] Requiring values on optional fields
I've got a user contact information form, which has among other fields
an e-mail address field. The e-mail address field has a "test"
function that allows the user to send a test e-mail message to confirm
that the e-mail address is indeed correct. However, the e-mail address
isn't required in order to save the user contact information form, so
I've got it defined as:
E-Mail address
Test
And my validator set up simply as
$(document).ready(function() {
validator = $("#form").validate({
meta: "validate"
});
});
Although the e-mail address isn't required to submit the form, it
should be required for the test e-mail function, so in my
testEmailAddress(), I'd like to validate the particular field as if
required: true, in addition to the standard submit rules. What's the
proper way to go about this? I couldn't figure out how to use a
depends clause or a custom validator callback that would depend on
what button was pressed or something of the sort.
Thanks,
Jason
[jQuery] Dequeue Animations with multiple Aniamtions Occuring at the Same Time (JCarousel)
To see my current bug, click multiple thumbnails in rapid succession and notice the scrolling effects above - the animations will go out of sync. Demo page: http://www.jasonstockman.com/mockup/help.html JS: http://www.jasonstockman.com/mockup/js/custom2.js LINES 33 - 72 Upon initializing the 2 carousels a separate function (LINE 59) binds a scroll effect to occur (for both carousels) when a thumbnail is clicked. The problem with these two scroll effects is that they each have their own, different, durations - 500ms and 1500ms respectively. SO, when you click multiple thumbnails quickly, the scrolling effect becomes out of sync. I think this is is because 2 custom animations are being triggered that have different durations. I do not have enough experience to solve this problem, but I would suspect there is a way to clear/stop all animations in order to have a clean slate for new animations (thumbnail clicks) to act upon. I think adding a new line between lines 68 and 69 that would halt current scrolling/animations would help to fix this, but I need help. Thanks, -Jason
[jQuery] Calling a jQuery function from html onClick
I am working on a project where I would like to click a link and call
a jQuery function to swap some images. I have this working just with
javascript, but I am stuck in syntax errors with jQuery. Essentially,
I want to duplicate the functionality triggered by the link below.
//---Javascript-//
function swapImage(i){
//alert(i);
var image = document.getElementById('swap_image');
image.src = i;
}
//---//
Thanks for any help,
Jason
[jQuery] Re: MIT or GPL License
Thanks Karl! On Nov 25, 6:53 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote: > Yes, you can use one or the other. > > --Karl > > > Karl Swedbergwww.englishrules.comwww.learningjquery.com > > On Nov 25, 2008, at 9:13 AM, Jason Coudriet wrote:> Hello, > > > When using jQuery, do have we have the option to use just the MIT > > license? > > > Thanks, > > Jason
[jQuery] Re: Change overflow of div when element clicked
I WAS missing the brackets...duh!
Thanks, that solved the problem.
On Nov 27, 1:24 am, ricardobeat <[EMAIL PROTECTED]> wrote:
> Are you missing the brackets?
>
> $(document).ready(function(){
>
> $("#test").click(function(){ $("#faq").css("overflow","auto") };
>
> });
>
> On Nov 26, 5:25 pm, Jason Turcotte <[EMAIL PROTECTED]> wrote:
>
> > Hello,
>
> > I'm fairly new to jQuery and am trying to do the following.
>
> > I am using a coda slider effect for a website, which is working fine.
>
> > What I need to do is change the overflow CSS property for a div when
> > another element is clicked.
>
> > Here's what I have:
>
> >
> > $(document).ready(function(){
>
> > $("#test").click(function() $("#faq").css("overflow","auto");
>
> > });
>
> >
>
> > ...snip...
>
> >
> >
> > Home
> > About
> > Practice Areas
> > Common Questions
> > Contact and Directions > a>
> >
> >
>
> > ...snip...
>
> >
> > Common Questions
> > Intro Paragraph
> >
> > Do I need a lawyer?
> > Paragraph 2 content
> >
>
> > CSS for #faq has overflow set to hidden. What I want to happen is
> > when people click on the Common Questions link that is changes the
> > overflow property of #faq to auto (overflow:auto).
>
> > Right now, nothing happens when I click the link.
>
> > Help is appreciated!
[jQuery] Change overflow of div when element clicked
Hello,
I'm fairly new to jQuery and am trying to do the following.
I am using a coda slider effect for a website, which is working fine.
What I need to do is change the overflow CSS property for a div when
another element is clicked.
Here's what I have:
$(document).ready(function(){
$("#test").click(function() $("#faq").css("overflow","auto");
});
...snip...
Home
About
Practice Areas
Common Questions
Contact and Directions
...snip...
Common Questions
Intro Paragraph
Do I need a lawyer?
Paragraph 2 content
CSS for #faq has overflow set to hidden. What I want to happen is
when people click on the Common Questions link that is changes the
overflow property of #faq to auto (overflow:auto).
Right now, nothing happens when I click the link.
Help is appreciated!
[jQuery] Re: Selector Help
Excellent, thank you.
On Nov 25, 4:24 pm, "Charlie Griefer" <[EMAIL PROTECTED]>
wrote:
> On Tue, Nov 25, 2008 at 3:28 PM, Jason <[EMAIL PROTECTED]> wrote:
>
> > Code:
>
> >
> >
> >
>
> >
> >
> >
>
> >
> >
> >
>
> > When a link is clicked, I would like to be able to reference the
> > particular parent fieldset element, and not all of them.
>
> > Something like this doesn't work:
>
> > $('.link').click(function () {
> > $(this+':parent').BLAHBLAHBLAH();
> > });
>
> > Thanks in advance, the help here is top notch!
>
> $('.link').click(function () {
> $(this).parent()
>
> });
>
> so if you wanted to get the id of the parent (assuming one
> existed), it'd be:
>
> $('.link').click(function () {
> alert($(this).parent().attr('id'));
>
> });
>
> --
> I have failed as much as I have succeeded. But I love my life. I love my
> wife. And I wish you my kind of success.
[jQuery] Selector Help
Code:
When a link is clicked, I would like to be able to reference the
particular parent fieldset element, and not all of them.
Something like this doesn't work:
$('.link').click(function () {
$(this+':parent').BLAHBLAHBLAH();
});
Thanks in advance, the help here is top notch!
[jQuery] MIT or GPL License
Hello, When using jQuery, do have we have the option to use just the MIT license? Thanks, Jason
[jQuery] Re: help with jquery add/remove class
I would suggest dropping the add-/remove- class stuff entirely in
favor of simply switching out the background image. Try something like
this:
// Attach a click event to every input in the .nav section.
$('div.nav input').click(function(){
// Extract the specific floor plan from the class.
// (Consider using ID's for this instead, since they are unique.)
var fp = $(this).attr('class').substr(4);
// Switch the viewer's background-image attribute.
$('p.viewer').css('background-image', 'url(graphics/' + fp + '.png');
});
HTH,
Jason
On Nov 15, 6:44 pm, bjreed <[EMAIL PROTECTED]> wrote:
> Hello. I am new to JQuery, and I thought I'd try creating a small app
> to learn more. I've hit a problem that I cannot seem to fix. I have
> a right navigation bar with 8 floor plan links. When you click one,
> the accordian menu drops and shows some details (this works great),
> the other thing that is suppose to happen on click is a large image is
> to appear in the left area. You'll see that it works fine at first,
> BUT when you start clicking down the list AND then try and return to
> an earlier click, is when the problem occurs. It seems there is
> problem removing the classes that have already been called.
>
> I know that there is probably an easy solution, but I have not found
> it yet. I'd appreciate any advice. Thanks
>
> You can view it athttp://jquery.pixeltrails.com/
> All the script is on the default.htm source page. Add/Remove class
> script is at the bottom of the source.
[jQuery] Re: Its possible to do this??
If you want to concatenate strings in order to create selectors, don't
make them jQuery objects first. In other words, just do this:
var row = ".flexigrid .bDiv #socios .trSelected:first";
$(row + " td:first").css("color", "red");
Also, as long as your ID's are unique, which they should be, there's
no need to put anything in front of them in your selector, so you
should be able to shorten it like so:
var row = "#socios.trSelected:first";
$(row + " td:first").css("color", "red");
HTH,
Jason
On Nov 16, 11:30 am, SoutlinK <[EMAIL PROTECTED]> wrote:
> Hi.
>
> I am new with jQuery, and i want to know if its possible to do the
> follow.
>
> var row = $(".flexigrid .bDiv #socios .trSelected:first");
> $(row + " td:first").css("color", "red");
>
> Or something like that.
>
> I mean.
>
> I have a row selected in jQuery. Now I want to go for each column, of
> this row without do this
> var col0 = $(".flexigrid .bDiv #socios .trSelected:first td:eq(0));
>
> Thanks
[jQuery] Re: Why is the behavior only attached to the first select?
This line is the likely culprit, because the css selector is not
specific to an individual element:
var selected = $("select option:selected").val();
Try this instead, to constrain the selection within the current
context:
var selected = $("option:selected", this).val();
Or, IIRC, I believe this works nowadays as well:
var selected = $(this).val();
You might also consider storing the base URLs in an associative array
rather than relying on custom (non-validating) attributes.
HTH,
Jason
On Nov 16, 3:08 pm, Fluffy Convict <[EMAIL PROTECTED]> wrote:
> I'm trying to attach a function to all selects that have the custom
> goto-attribute. It works for the first one, but the behavior isn't
> being attached to the second . Any ideas how to fix it?
>
> $(document).ready(function() {
> $('select[goto]').each(function () {
> $(this).change(function () {
> var selected = $("select option:selected").val();
> if (selected != 'ignore') {
> document.location = $(this).attr("goto") + '/' + selected;
> }
> });
> });
>
> });
>
> // with html:
>
>
> Choose...
> CNN Finance
> CNN Sports
>
>
>
> Choose...
> BBC Finance
> BBC Sports
>
[jQuery] Re: Trouble with Selectors, Syntax, and more... Small Amount of Code
I am once again thrilled with the help and support offered here.
Thanks Mike, you're response was beyond helpful.
On Nov 14, 2:58 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote:
> As you get familiar with it, you will really appreciate how easy it is to do
> string manipulation in JavaScript. I suggest spending some time learning
> about the String object and the RegExp (regular expression) object. Note
> that you won't find these in the jQuery docs - they are native JavaScript
> features.
>
> Don't worry if regular expressions seem complicated at first - try out some
> examples and you'll get the hang of them. The Firebug console is one easy
> way to try out JavaScript expressions of any sort.
>
> For an easy case like this, you don't need regular expressions, just some
> simple String and Array operations:
>
> $('#wrap li').click(function () {
> $( '#' + this.id.split('-')[0] ).fadeIn();
> });
>
> Breaking that down:
>
> this.id is the ID of the element that was clicked.
>
> .split('-') splits that string at the - character, creating an array of two
> elements:
>
> [ 'nameN', 'link' ]
>
> [0] selects the first element of that array, 'nameN'.
>
> We then combine that string with a '#' (not '.') to make it an ID selector.
>
> Also note that this.attr('id') wouldn't work: In the context of the click
> handler, 'this' is a DOM element, not a jQuery object. You could do
> $(this).attr('id'), but this.id is simpler.
>
> -Mike
>
> > From: Jason
>
> > HTML:
>
> >
> > link
> > link
> > link
> > link
> >
>
> >
> > text here
> > text here
> > text here
> > text here
> >
>
> > CSS:
>
> > #wrap li {display:none;}
>
> > Javascript Goal:
>
> > When a link is clicked, it's corresponding div is shown. All
> > divs are hidden by default via CSS.
>
> > Something like this:
>
> > $('#wrap li').click(function () {
> > //reference the li that was clicked and grab its ID
> > //strip out the " -link " part of the id
> > //show the div that matches this new ID });
>
> > Current Javscript:
>
> > $('#wrap li').click(function () {
> > var liName = this.attr('id');
> > $('.'+liName+-'link').fadeIn();
> > });
>
> > As you can see I'm a JavaScript amateur. If
> > truncating/manipulating the ID of the link is too difficult,
> > I can switch the ID name formats
> > - making it so that I would need to ADD the '-link' part,
> > which may be easier than removing? My core questions are how I would:
>
> > -select/reference the li that was clicked, and not the whole
> > array -maniuplate the ID of the id that was clicked (and store in a
> > variable?)
> > -use the manipulated ID to show the corresponding div (easiest part)
>
> > Thank you.
[jQuery] Re: Trouble with Selectors, Syntax, and more... Small Amount of Code
I am once again thrilled with the help and support offered here.
Thanks Mike, you're response was beyond helpful.
On Nov 14, 2:58 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote:
> As you get familiar with it, you will really appreciate how easy it is to do
> string manipulation in JavaScript. I suggest spending some time learning
> about the String object and the RegExp (regular expression) object. Note
> that you won't find these in the jQuery docs - they are native JavaScript
> features.
>
> Don't worry if regular expressions seem complicated at first - try out some
> examples and you'll get the hang of them. The Firebug console is one easy
> way to try out JavaScript expressions of any sort.
>
> For an easy case like this, you don't need regular expressions, just some
> simple String and Array operations:
>
> $('#wrap li').click(function () {
> $( '#' + this.id.split('-')[0] ).fadeIn();
> });
>
> Breaking that down:
>
> this.id is the ID of the element that was clicked.
>
> .split('-') splits that string at the - character, creating an array of two
> elements:
>
> [ 'nameN', 'link' ]
>
> [0] selects the first element of that array, 'nameN'.
>
> We then combine that string with a '#' (not '.') to make it an ID selector.
>
> Also note that this.attr('id') wouldn't work: In the context of the click
> handler, 'this' is a DOM element, not a jQuery object. You could do
> $(this).attr('id'), but this.id is simpler.
>
> -Mike
>
> > From: Jason
>
> > HTML:
>
> >
> > link
> > link
> > link
> > link
> >
>
> >
> > text here
> > text here
> > text here
> > text here
> >
>
> > CSS:
>
> > #wrap li {display:none;}
>
> > Javascript Goal:
>
> > When a link is clicked, it's corresponding div is shown. All
> > divs are hidden by default via CSS.
>
> > Something like this:
>
> > $('#wrap li').click(function () {
> > //reference the li that was clicked and grab its ID
> > //strip out the " -link " part of the id
> > //show the div that matches this new ID });
>
> > Current Javscript:
>
> > $('#wrap li').click(function () {
> > var liName = this.attr('id');
> > $('.'+liName+-'link').fadeIn();
> > });
>
> > As you can see I'm a JavaScript amateur. If
> > truncating/manipulating the ID of the link is too difficult,
> > I can switch the ID name formats
> > - making it so that I would need to ADD the '-link' part,
> > which may be easier than removing? My core questions are how I would:
>
> > -select/reference the li that was clicked, and not the whole
> > array -maniuplate the ID of the id that was clicked (and store in a
> > variable?)
> > -use the manipulated ID to show the corresponding div (easiest part)
>
> > Thank you.
[jQuery] Trouble with Selectors, Syntax, and more... Small Amount of Code
HTML:
link
link
link
link
text here
text here
text here
text here
CSS:
#wrap li {display:none;}
Javascript Goal:
When a link is clicked, it's corresponding div is shown. All divs are
hidden by default via CSS.
Something like this:
$('#wrap li').click(function () {
//reference the li that was clicked and grab its ID
//strip out the " -link " part of the id
//show the div that matches this new ID
});
Current Javscript:
$('#wrap li').click(function () {
var liName = this.attr('id');
$('.'+liName+-'link').fadeIn();
});
As you can see I'm a JavaScript amateur. If truncating/manipulating
the ID of the link is too difficult, I can switch the ID name formats
- making it so that I would need to ADD the '-link' part, which may be
easier than removing? My core questions are how I would:
-select/reference the li that was clicked, and not the whole array
-maniuplate the ID of the id that was clicked (and store in a
variable?)
-use the manipulated ID to show the corresponding div (easiest part)
Thank you.
[jQuery] Simple Code, not working.
var lawls = 1;
$('#next').click(function () {
$('.item').hide();
$('.item:eq(lawls)').fadeIn();
++lawls;
});
I have multiple divs, that I would like to sequentially appear when a
button is clicked. My current code isn't working. This will work:
$('#next').click(function () {
$('.item').hide();
$('.item:eq(2)').fadeIn();
});
...but obviously it's not dynamic, and won't cycle through the divs.
Help!
[jQuery] Re: Traversing Question with Parent and Children
Resolved.
On Oct 25, 11:51 am, Jason <[EMAIL PROTECTED]> wrote:
> I have HTML similar to the following:
>
>
> red border
>
>
> Essentially I have a div with a link inside of it.
>
> What I want to do is have the div selected when the link is clicked. I
> need this done without referencing the class/id of the parent div.
>
> So far I have:
>
> $(".link").click(function () {
> //somehow select the parent div
>
> });
>
> I've looked at 'children' and 'parent' traversing but I can't wrap my
> head around a solution for this problem. Thanks in advance, you guys
> are great.
>
> -Jason
[jQuery] Traversing Question with Parent and Children
I have HTML similar to the following:
red border
Essentially I have a div with a link inside of it.
What I want to do is have the div selected when the link is clicked. I
need this done without referencing the class/id of the parent div.
So far I have:
$(".link").click(function () {
//somehow select the parent div
});
I've looked at 'children' and 'parent' traversing but I can't wrap my
head around a solution for this problem. Thanks in advance, you guys
are great.
-Jason
[jQuery] Modal using dimScreen and Dimensions
I can't get it to work. Anyone have a test page I can look at to see it working.
[jQuery] Re: Beginner: Load Bind Event Problem
Thanks for the reply. It makes since to query the dom live right. I'll try to get it to work. And I agree that putting the js in the loaded file is baaad. Thanks a ton. On Oct 15, 11:37 am, "Alexandre Plennevaux" <[EMAIL PROTECTED]> wrote: > Because the events are initialised on page load for the dom state available > at that moment (more on this > here:http://docs.jquery.com/Tutorials:AJAX_and_Events)<http://docs.jquery.com/Tutorials:AJAX_and_Events> > . > either you include your javascript inside the ajaxed html (baad), or > (wiser solution) you use livequery plugin, available > here:http://plugins.jquery.com/project/livequery > > On Wed, Oct 15, 2008 at 6:46 PM, Jason <[EMAIL PROTECTED]> wrote: > > > My page: > > > I click a tab and it loads in the html file for the tab. I click a > > link on the newly loaded html file but it doesn't run the function I > > wrote for it. The link only runs the function when it's in the home > > file, rather than the loaded file. I know this has to do with > > binding, but it's too confusing. Any help would be appreciated. > > > Thanks, > > > Jason
[jQuery] Beginner: Load Bind Event Problem
My page: I click a tab and it loads in the html file for the tab. I click a link on the newly loaded html file but it doesn't run the function I wrote for it. The link only runs the function when it's in the home file, rather than the loaded file. I know this has to do with binding, but it's too confusing. Any help would be appreciated. Thanks, Jason
[jQuery] using draggable from within a container with over-flow:hidden.
I'm using jcarousel to display a list of images that I want the user
to be able to drag to certain drop targets.
The code looks like:
...children('img').addClass('flashCatalogPage').draggable({ helper:
'clone', opacity: .5 });
The problem is, the container for the jcarousel uses the css attribute
over-flow:hidden to hide elements further down in the list.
I tried playing with the container attribute but that doesn't seem to
work. Does anyone have any suggestions?
[jQuery] Re: Superfish problem and solution
On Oct 3, 5:09 am, "Joel Birch" <[EMAIL PROTECTED]> wrote: > Hi Jason, > > This is interesting because the only problems I have seen like this > with regard to Mac FF2 have always been easily solved by setting > wmode="transparent" on the 'embed' tag. Did you give that a try that > first? Yes, that didn't work -- tried both transparent and opaque modes, same effect. In fact, that's how the designer originally embedded the Flash, with the transparent wmode. The problem seemed to be the fade in rather than just the fact of semi- transparency (which is all handled by PNGs in my case anyway), which was fixed by just doing a plain show in Mac FF2. - Jason
[jQuery] Superfish problem and solution
When using Superfish to create a dropdown menu that dropped/faded in
over the top of a Flash movie, I was having weird behavior on Firefox
2 on the Mac (and only that browser). Turns out to be a bug in the
interaction between semi-transparent areas and Flash. In my case,
when the menu faded in, the Flash movie turned white until the menu
was completely faded in.
My solution (in case anyone else runs into this problem):
In the superfish.js file, added this function after the sf.IE7fix
function:
sf.MacFF2fix = function() {
var userAgent = navigator.userAgent.toLowerCase();
if (/firefox[\/\s](\d+\.\d+)/.test(userAgent)) {
var ffversion = new Number(RegExp.$1);
if (ffversion < 3 && userAgent.indexOf('mac') != -1) {
return true;
}
}
};
And then in the showSuperfishUl function, changed this:
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul);
o.onShow.call($ul); });
to this:
if (sf.MacFF2fix()) {
$ul.show();
} else {
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul);
o.onShow.call($ul); });
}
Which means that the fancy fade-in is absent on FF2 on the Mac, but
that was a whole lot better than the alternative.
Credit for the FF2 detection function go to this blog post:
http://jakeo.org/blog/2007/03/16/css-opacity-and-flash-transparency-in-mac-firefox/
Best,
Jason
[jQuery] tablesorter with pager addon: Adding rows with ajax and auto-sorting
I've been trying to get tablesorterPager working with AJAX addition of rows. I can get the rows added, but they are always on the last page, and are never get sorted properly. I've been trying various methods of trying to update the caches that are held by pager and tablesorter, but I haven't found the magic combination. Does anyone have example code for doing this?
[jQuery] Re: jdMenu problem in IE6 & IE7
I commented out stuff and noticed that the menu is showing, it's failing due to the z-index IE bug, staying behind page content in both IE6 & IE7. On Sep 9, 8:58 am, Jason Stanbery <[EMAIL PROTECTED]> wrote: > I will preface with the statement that I'm not a javascript super > star. > > My drop down menu isn't functioning for either IE6 or IE7. In FF2 on > Windows it works, acts a little funny sometimes, works fine on FF3 & > Safari on Mac. If I was to guess, I would probably guess that the > issue is in my customization of the style sheet though it appears drop > down menus and IE aren't best friends. > > Link to site:http://flyartinc.com/newsite/ > > Link to menu style sheet:http://flyartinc.com/newsite/styles/jquery.jdMenu.css > > Any help would be appreciated.
[jQuery] jdMenu problem in IE6 & IE7
I will preface with the statement that I'm not a javascript super star. My drop down menu isn't functioning for either IE6 or IE7. In FF2 on Windows it works, acts a little funny sometimes, works fine on FF3 & Safari on Mac. If I was to guess, I would probably guess that the issue is in my customization of the style sheet though it appears drop down menus and IE aren't best friends. Link to site: http://flyartinc.com/newsite/ Link to menu style sheet: http://flyartinc.com/newsite/styles/jquery.jdMenu.css Any help would be appreciated.
[jQuery] Superfish Navigation bar text color
Hi. Maybe I'm just dumb... hehe I'm using Superfish. I want to have the text on my nav bar be white and the dropdowns be a different color. I can't figure out how to do this Help! Thanks!
[jQuery] Re: JQuery with Flash
Yes, you can call javascript functions (or jquery functions for that matter) in flash. (And vice versa) See ExternalInterface: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_15683 On Sep 2, 8:14 pm, Gill Bates <[EMAIL PROTECTED]> wrote: > I don't know if I could handle flash with Jquery. > Currently I have a div embedde with a flv video in my page.I want > detect when the current flash is finished playing. To be exact, when > the flash is finished playing I want jump back to my index page. > I wonder if I could do this?
[jQuery] Re: Nesting if statements not working
One thing I would suggest is casting the .val() as an integer before
comparing it:
var dulicateCheck = parseInt($("#duplicateInput").val());
Otherwise it's doing a string comparison, which will throw off your
results.
- jason
On Sep 1, 9:25 pm, hubbs <[EMAIL PROTECTED]> wrote:
> For some reason, when I am nesting if statements, it seems to bypass
> the first if, and go right to the second one, even if the value of
> #duplicateInput is more than 10. I want the statement to check to see
> if the input field has a number that is equal or less than 10, then,
> if it is, throw an alert making sure they want to delete multiple
> items.
>
> If the number is higher than 10, an alert will let them know they need
> to enter a lower number.
>
> Did I do something wrong here?
>
> //Add click function and confirm to mass delete confirm button
> $("#massRemoveAssetConfirm").click(function() {
> var dulicateCheck = $("#duplicateInput").val();
> if (dulicateCheck <= 10) {
> //Confirm that we want to mass delete assets
> var answerDelete = confirm("Are you sure you want to delete
> multiple assets? This cannot be undone!");
> if (answerDelete) {
> //Find all checkboxes that are checked, and put their
> values into an array
> $
> ("#adminToolsHoldListing :checkbox:checked").each(function() {
> // Pass the values to ajax post
> $.ajax({
> type: "POST",
> url: this.value + "?action=delete"
> });
> });
> //Hide the asset we just delete from the asset list
> $("#adminToolsHoldListing .scroll
> input:checked").parent(".deleteCheck").parent(".itemHolder").hide();
> //Remove the contents of the iframe, for the current asset
> that we deleted
> $("#assetEditFrame").contents().html("");
> }
> } else {
> alert("You are limited to 10 duplicates or less, please adjust
> your value.");
> $("#duplicateInput").val("");
> return false;
> }
>
> });
[jQuery] Re: descendants
$(this).find('input[id*=mycheckname]:first');
http://docs.jquery.com/Traversing/find#expr
- jason
On Sep 1, 5:27 pm, matt knapp <[EMAIL PROTECTED]> wrote:
> I have some table rows:
>
>
> Blah
>
> Blah
>
> Blah
>
>
>
> that I am selecting like
>
> $("tr[class=.tableRow]").each( function(i)
> {
>
> //inside each table row, there are several td's
> //inside one of the TD's there is a checkbox that I want to find
>
> //how can I search $(this) to find a checkbox that is nested inside a
> td and some div's?
>
> //I'm thinking something like this:
>
> $(this).children("input[id*=mycheckname]:first")
>
> //but children() only searches the IMMEDIATE children of and the
> checkbox is nested inside a TD and some
> //div's
>
> //I think I need to be able to search descendants of the but I
> can't figure it out
>
> }
>
> Thanks
[jQuery] Trouble loading an HTML page after animation is completed
Hello!
Here is my setup: I want to click my link, have the content box
animate to the proper width, and then have my HTML page appear once
the animation is completed. In the snipped below, the content of the
HTML pages loads before the animation is complete. How do I make this
work?
$("#link").click(function(){
$("#contentbox").animate({width: "550px"}, 300 );
$("#contentbox").load("interactive.html");
});
Thanks,
Jason
[jQuery] Re: Adding the dialog function dynamically to each li element
I think, at a bare minimum, you'll want to change this:
var title = $(this h3).val();
...to this:
var title = $('h3', this).text();
...and this:
$(this h3).append...
...to this:
$('h3', this).append...
I think that'll solve your immediate problem.
- jason
On Jun 17, 2:37 pm, Dan <[EMAIL PROTECTED]> wrote:
> I have a list like: TITLE and I
> want to add the content "Open" after TITLE in the h3 tags that will
> open a dialog corresponding to this li, but do this to every other
> element just like it.
>
> $(".editable").each(function(){ //get each editable li element
> var title = $(this h3).val(); //get the content in the h3 tag
> $(this h3).append( "OPEN span>" ); //add the open content with a marker so the right dialog is
> opened
> $(this).append( " class='edit_dialog'>" ).append( $(".same_content") ).append( " div>" ); //create the content in the dialog and mark the dialog div
> with the same marker as the "Open" content/button});
>
> $(".edit_dialog").dialog(); //make the dialog content a dialog
> $(".edit").click(function () { //When the "Open" content is
> clicked, ...
> var title = $(this).attr("title"); //... get the title marker ...
> $("div #" + title).dialog("open"); //... and open the corresponding
> dialog
>
> });
>
> I added the comments to this post, they aren't really there on my
> file.
> I think I have the right idea, but my jQuery isn't correct. Firebug
> said the 2nd line was missing a ), but that must be caused by
> something else. How should this look to work like the comments say?
[jQuery] Re: Can the JQuery file be included in another JavaScript file?
Hi Mike, Basically, I have a global javascript file called globalutilities.js. I have included the jquery and other scripts in this file to simplify code mangement. When I include jquery file this way, I get errors with $ function. When I include it directly in the html file it works. I have tried including with relative and absolute paths in globalutities.js, but with no success. Note, I have functions in globalutilities.js that call functions from jquery. On Jun 8, 12:13 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote: > That's not quite enough information to tell what went wrong. :-) > > You can certainly concatenate several .js files into one, if that's what you > mean. > > Can you post a link to a test page? > > -Mike > > > > > I have been trying to consolidate a good number of scripts > > into include to simplify mgt. The trouble is when I include > > the jquery file it does not recognize the jquery functions. > > If I include it directly in the html page all works fine. I > > have even included remote files that I have confirmed are > > correct urls. Has anyone run into this issue?- Hide quoted text - > > - Show quoted text -
[jQuery] Can the JQuery file be included in another JavaScript file?
Hi Folks, I have been trying to consolidate a good number of scripts into include to simplify mgt. The trouble is when I include the jquery file it does not recognize the jquery functions. If I include it directly in the html page all works fine. I have even included remote files that I have confirmed are correct urls. Has anyone run into this issue? Thanks in advance
[jQuery] Re: jQuery v1.2.6 is now Officially Released and Release Notes are Available
This looks fantastic. Thanks to everyone on the team for their continued hard work. You guys rock! - jason On Jun 3, 1:46 pm, Rey Bango <[EMAIL PROTECTED]> wrote: > jQuery v1.2.6 is now official and release notes have been > posted:http://docs.jquery.com/Release:jQuery_1.2.6 > > The biggest changes are improvements in performance, especially event > handling, which is now 103% faster. > > Also, the Dimensions plugin is now part of core. The remaining methods > of the Dimensions plugin, by Brandon Aaron, have been introduced into > jQuery core, along with additional bug fixes and performance > improvements. This plugin has seen considerable use amongst developers > and plugin authors and has become a solid part of the jQuery ecosystem. > We've been, slowly, introducing the most-used methods from the > Dimensions plugin over the past couple releases - but with the release > of 1.2.6 all remaining methods are now part of core. > > If you're upgrading your copy of jQuery to version 1.2.6 you can now opt > to exclude the Dimensions plugin from your code. > > There are plenty of other updates so please read the release note for > full details. > > http://docs.jquery.com/Release:jQuery_1.2.6 > > The jQuery Team...
[jQuery] Re: reseting values of input fields that have been cloned
I haven't tested this, but I think you'd just select the inputs within
the clone, and reset them before inserting, like so:
var clonedRow = $("tbody.gltb tr#guest_new").clone();
$('input', clonedRow).val('');
- jason
On Jun 2, 11:42 am, jarp <[EMAIL PROTECTED]> wrote:
> new to jquery. here is what I am trying to do.
>
> -- I am using the clone function to clone a table row.
> -- the table row contains 3 input fields
> -- they are inheriting the values already in them
> -- i need to reset them to "" (blank")
>
> $(document).ready(function() {
> // Initialise the table
> $("a.addNew").click(function() {
> var clonedRow = $("tbody.gltb tr#guest_new").clone();
> //this will grab the last table row.
> $("tbody.gltb tr#guest_new input").attr("value", "");
> $("tbody.gltb").append(clonedRow); //add the row back to the
> table
>
> var n = $("tbody.gltb tr").length;
> //alert(n);
> //$("tbody.gltb tr#guest_new input").attr("value", "");
> //var r = $("tbody.gltb tr").get(n);
> // now i am lost :-(
> });
> });
[jQuery] Re: Newbie Q: Insert last paragraph just before fourth paragraph?
Here's one way, no "last" class required, though it probably could be
improved upon:
$($('p').get(3)).before($('p:last'));
- jason
On Jun 1, 9:02 am, swortis <[EMAIL PROTECTED]> wrote:
> Hi all-
>
> I suspect this is ridiculously easy.. but I'm lost..
>
> I'm looking for a jquery way of taking the last paragraph (with
> class="last") of a many paragraph page and 'inserting' it just before
> the fourth paragraph (which does not have a class).
>
> So:
>
> something
> something
> something
> something
> something
> something
>
> Is actually seen as:
>
> something
> something
> something
> something
> something
> something
>
> Anyone have a cool way of doing this?
>
> Thanks!
>
> -S
