[jQuery] Re: caching result of selector in object, reusing
Never mind, it should have been obvious, the object properties weren't
in my document.ready
On Sep 16, 10:31 am, pantagruel wrote:
> Hi,
>
> I have some selectors - an example would be $("#LinkToPreviousHit")
> all of which work fine when used directly.
>
> If I use it to toggle the class, which also works, I might do -
> $("#LinkToPreviousHit").attr({"class": "activeNavButton"});
>
> since I am using my selectors in multiple places I figured I would
> remove the multiple class to the selector and move it into an object -
> here is what I have (names will probably be changed when working)
>
> var NavDisplay = {
> NextHitB: $("#LinkToNextHit"),
> LastHitB: $("#LinkToPreviousHit"),
> ToggleNext: function(switcher){
> if(typeOf(switcher)==='undefined' || typeOf(switcher) === null){
> switcher = Boolean(!navTrack.NextHitInactive);}
>
> if(switcher){
>
> navTrack.NextHitInactive = true;
> NavDisplay.NextHitB.attr({"class":
> "inactiveNavButton"});
>
> }else{
> navTrack.NextHitInactive = false;
> NavDisplay.NextHitB.attr({"class":
> "activeNavButton"});
> }},
>
> ShowPrevious: function(switcher){
> if(typeOf(switcher)==='undefined' || typeOf(switcher) === null){
>
> switcher = Boolean(!navTrack.HasPrevious);}
>
> if(switcher){
>
> if(!navTrack.HasPrevious){
>
> NavDisplay.LastHitB.attr({"class": "activeNavButton"});
>
> navTrack.HasPrevious=true;
> }
>
> }else{
>
> if(navTrack.HasPrevious){
>
> NavDisplay.LastHitB.attr({"class":
> "inactiveNavButton"});
> navTrack.HasPrevious=false;
> }
> }
>
> }
> };
>
> I have also tried using it as window.NavDisplay with no result. There
> are no errors raised and the properties of the navTrack object are
> changed correctly. However the class is never switched between
> inactiveNavButton and activeNavButton or vice versa. As soon as I use
> the selectors directly - for example as in the following:
>
> var NavDisplay = {
> NextHitB: $("#LinkToNextHit"),
> LastHitB: $("#LinkToPreviousHit"),
> NextHitInactive: function(){
> navTrack.NextHitInactive = true;
> NavDisplay.NextHitB.attr({"class":
> "inactiveNavButton"});
> },
> ToggleNext: function(switcher){
> if(typeOf(switcher)==='undefined' || typeOf(switcher) === null){
> switcher = Boolean(!navTrack.NextHitInactive);}
>
> if(switcher){
>
> navTrack.NextHitInactive = true;
> $("#LinkToNextHit").attr({"class":
> "inactiveNavButton"});
>
> }else{
> navTrack.NextHitInactive = false;
> $("#LinkToNextHit").attr({"class":
> "activeNavButton"});
> }},
>
> ShowPrevious: function(switcher){
> if(typeOf(switcher)==='undefined' || typeOf(switcher) === null){
>
> switcher = Boolean(!navTrack.HasPrevious);}
>
> if(switcher){
>
> if(!navTrack.HasPrevious){
>
> $("#LinkToPreviousHit").attr({"class":
> "activeNavButton"});
>
> navTrack.HasPrevious=true;
> }
>
> }else{
>
> if(navTrack.HasPrevious){
>
> $("#LinkToPreviousHit").attr({"class":
> "inactiveNavButton"});
> navTrack.HasPrevious=false;
> }
> }
>
> }
> };
>
> then it works fine.
>
> Is there any reason why my current caching of the selector is not
> working? And is there any way you can suggest whereby I can cache my
> selector that will work?
[jQuery] caching result of selector in object, reusing
Hi,
I have some selectors - an example would be $("#LinkToPreviousHit")
all of which work fine when used directly.
If I use it to toggle the class, which also works, I might do -
$("#LinkToPreviousHit").attr({"class": "activeNavButton"});
since I am using my selectors in multiple places I figured I would
remove the multiple class to the selector and move it into an object -
here is what I have (names will probably be changed when working)
var NavDisplay = {
NextHitB: $("#LinkToNextHit"),
LastHitB: $("#LinkToPreviousHit"),
ToggleNext: function(switcher){
if(typeOf(switcher)==='undefined' || typeOf(switcher) === null){
switcher = Boolean(!navTrack.NextHitInactive);
}
if(switcher){
navTrack.NextHitInactive = true;
NavDisplay.NextHitB.attr({"class":
"inactiveNavButton"});
}else{
navTrack.NextHitInactive = false;
NavDisplay.NextHitB.attr({"class": "activeNavButton"});
}
},
ShowPrevious: function(switcher){
if(typeOf(switcher)==='undefined' || typeOf(switcher) === null){
switcher = Boolean(!navTrack.HasPrevious);
}
if(switcher){
if(!navTrack.HasPrevious){
NavDisplay.LastHitB.attr({"class": "activeNavButton"});
navTrack.HasPrevious=true;
}
}else{
if(navTrack.HasPrevious){
NavDisplay.LastHitB.attr({"class":
"inactiveNavButton"});
navTrack.HasPrevious=false;
}
}
}
};
I have also tried using it as window.NavDisplay with no result. There
are no errors raised and the properties of the navTrack object are
changed correctly. However the class is never switched between
inactiveNavButton and activeNavButton or vice versa. As soon as I use
the selectors directly - for example as in the following:
var NavDisplay = {
NextHitB: $("#LinkToNextHit"),
LastHitB: $("#LinkToPreviousHit"),
NextHitInactive: function(){
navTrack.NextHitInactive = true;
NavDisplay.NextHitB.attr({"class":
"inactiveNavButton"});
},
ToggleNext: function(switcher){
if(typeOf(switcher)==='undefined' || typeOf(switcher) === null){
switcher = Boolean(!navTrack.NextHitInactive);
}
if(switcher){
navTrack.NextHitInactive = true;
$("#LinkToNextHit").attr({"class":
"inactiveNavButton"});
}else{
navTrack.NextHitInactive = false;
$("#LinkToNextHit").attr({"class": "activeNavButton"});
}
},
ShowPrevious: function(switcher){
if(typeOf(switcher)==='undefined' || typeOf(switcher) === null){
switcher = Boolean(!navTrack.HasPrevious);
}
if(switcher){
if(!navTrack.HasPrevious){
$("#LinkToPreviousHit").attr({"class":
"activeNavButton"});
navTrack.HasPrevious=true;
}
}else{
if(navTrack.HasPrevious){
$("#LinkToPreviousHit").attr({"class":
"inactiveNavButton"});
navTrack.HasPrevious=false;
}
}
}
};
then it works fine.
Is there any reason why my current caching of the selector is not
working? And is there any way you can suggest whereby I can cache my
selector that will work?
[jQuery] Get following rows in a table until id not match certain pattern
Hi, I have a situation where a user clicks on something in a particular table row which should cause all following rows in that table that have a particular format of id to toggle visibility.. so for example click here...rest of row data ... ... ... click here...rest of row data when someone clicks on top11_21click it should toggle the visibility of rows act11_21_1 to act11_21_30 I would like to have this efficient, thus not just a find or filter, but rather something that gets the context of the clicked row and then loops following rows until the input does not match - any suggestions for a jquery like way of handling this?
[jQuery] jquery prompt replacement
Hi,
I've seen a number of jquery prompt replacements that allow you to
have a customizable prompt of some sort but none that allow you to
actually use it the way a prompt is normally used - that would say
var x = prompt("please enter your value");
alert(x);
Is there anything like that?
If not - I have a situation like this where I have functions that take
a function as a parameter - for example:
newProc(Command('info'));
Command returns a value based on, in some cases at least, the value a
user inputs in response to a prompt.
Does anyone have an example of how you would do that using any of the
prompt replacing libraries?
[jQuery] Re: using replaceWith to overwrite a stylesheet, dynamically set styles
Ok, I solved the problem with using !important on the rule. But after
some more looking at the technique it is probably better to use script
insertion anyway.
On Feb 17, 7:38 am, pantagruel wrote:
> Hi,
>
> I want to do the following:
> function CheckCurrentDataStream(){
> window.setTimeout ("CheckCurrentDataStream()", 2);
> $("#statuscss").replaceWith('');
>
> }
>
> The css I'm getting either is empty or it has a style in it changing
> the color of a certain link to let people know that there is waiting
> data for them to get.
>
> The thing is when I replace the stylesheet my new styles do not
> register. Is there a method to force the styles to be evaluated, or
> should I instead use script insertion instead of css insertion?
[jQuery] Re: using replaceWith to overwrite a stylesheet, dynamically set styles
I should specify that I have tested the css, it works. It could be a
caching problem but I've set my cache-control to no-cache and the
expires header comfortably in the past. So I'm wondering if there is
some problem with registering new styles when they are dynamically
loaded after page load.
The current browser I'm testing on is Firefox.
On Feb 17, 7:38 am, pantagruel wrote:
> Hi,
>
> I want to do the following:
> function CheckCurrentDataStream(){
> window.setTimeout ("CheckCurrentDataStream()", 2);
> $("#statuscss").replaceWith('');
>
> }
>
> The css I'm getting either is empty or it has a style in it changing
> the color of a certain link to let people know that there is waiting
> data for them to get.
>
> The thing is when I replace the stylesheet my new styles do not
> register. Is there a method to force the styles to be evaluated, or
> should I instead use script insertion instead of css insertion?
[jQuery] using replaceWith to overwrite a stylesheet, dynamically set styles
Hi,
I want to do the following:
function CheckCurrentDataStream(){
window.setTimeout ("CheckCurrentDataStream()", 2);
$("#statuscss").replaceWith('');
}
The css I'm getting either is empty or it has a style in it changing
the color of a certain link to let people know that there is waiting
data for them to get.
The thing is when I replace the stylesheet my new styles do not
register. Is there a method to force the styles to be evaluated, or
should I instead use script insertion instead of css insertion?
[jQuery] Re: how to catch mouse click if it is also an onblur event
Never mind, obviously should just catch the onmousedown.
On Feb 13, 9:47 pm, pantagruel wrote:
> I hope the above is clear. I have an click event that should be
> happening at the same time that a blur event is happening (by clicking
> on a link in a menu I am blurring the input field) which event puts
> the display of the menu to none.
>
> It seems that when I do this however despite it is the click which
> causes the blur to happen it is the blur that takes precedence. (this
> is in Firefox 3.06)
>
> My function is the following:
>
> function losefocus(){
> var currentActiveCommands = jQuery("#menudiv ul li.runnable").find
> ("a.c");
> navigationalTracking.AutoCompletionId = "";
> navigationalTracking.AutoCompletionRow = 0;
> runcommandinputfocused = false;
> currentActiveCommands.each(function(i) {
> $(this).parent().css("display","none");
> });
>
> }
>
> If I remove the function on currentActiveCommands I don't have a
> problem catching the click.
[jQuery] how to catch mouse click if it is also an onblur event
I hope the above is clear. I have an click event that should be
happening at the same time that a blur event is happening (by clicking
on a link in a menu I am blurring the input field) which event puts
the display of the menu to none.
It seems that when I do this however despite it is the click which
causes the blur to happen it is the blur that takes precedence. (this
is in Firefox 3.06)
My function is the following:
function losefocus(){
var currentActiveCommands = jQuery("#menudiv ul li.runnable").find
("a.c");
navigationalTracking.AutoCompletionId = "";
navigationalTracking.AutoCompletionRow = 0;
runcommandinputfocused = false;
currentActiveCommands.each(function(i) {
$(this).parent().css("display","none");
});
}
If I remove the function on currentActiveCommands I don't have a
problem catching the click.
[jQuery] Re: selector to return the number of rows in a table before the row I just selected
>
> rowsBefore = row.rowIndex;
Ok, but jQuery("#activator" + input).parent().parent(); selects the
row, but when I try to get rowIndex of that selected row I get
undefined back.
var trow = jQuery("#activator" + input).parent().parent();
alert(trow.attr("class")); // the class of my row
alert(trow.rowIndex); // returns undefined.
Cheers,
Bryan Rasmussen
[jQuery] selector to return the number of rows in a table before the row I just selected
Hi, I am selecting the row of a table. I would like to be able to count how many rows there are in the table before the row I just selected. i suppose there is a jQuery selector that will do this. Thanks
[jQuery] selector finds element but changing css has no effect?
Hi,
I have a div that is inside a td.
My code is the following fragment:
var currentelement = jQuery("#" + activecolid);
var selectedcontent = jQuery("#" + activecolid).find
("div.contentdisplay");
alert(currentelement.html());
alert(selectedcontent.html());
selectedcontent.css({border: "10px solid #699000"});
currentActiveEl = activecolid;
both of the alerts show up:
alert 1:
☐http://radar.oreilly.com/";
type="text">O'Reilly Radar - Insight, analysis, and research
about emerging technologies
alert 2:
http://radar.oreilly.com/";>O'Reilly Radar - Insight,
analysis, and research about emerging technologies
however when I change the css on selectedcontent it doesn't make any
change. There isn't any setting for the contendisplay class in the
css.
I have tried to change setting the css to
selectedcontent.css("border","10px solid #699000");
I have also retrieved the css value for border afterwards and it
returns the correct value.
with alert(selectedcontent.css); returning
10px solid rgb(105, 144, 0)
[jQuery] Re: newbie: autocompletion using hidden data inline in document
Hi,
Ok solved my problem. Using methods shown here:
http://www.mattryall.net/blog/2008/07/jquery-filter-demo
Cheers,
Bryan Rasmussen
On Jan 28, 12:06 pm, pantagruel wrote:
> Hi,
>
> I have something like the following (fragment but shows context):
>
> var currentActiveCommands = jQuery("#menudiv ul li.runnable").find
> ("a.c");
> var len = currentActiveCommands.length;
> var resulthtml = "";
> var field = document.getElementById("run_command");
> var currentidtoclick ="";
>
> var display = jQuery("#autocompletval");
> var incrementer = 0;
> if(which != 13){
> if(len > 2){
>
> var reg = new RegExp(field.value,"i");
> currentActiveCommands.each(function(i) {
> if(reg.test($(this).html()))
> {
>
> if(incrementer == 0){
>
> firstidinline = $(this).attr("id");
>
> //alert("i is less than 1" +
> currentidtoclick);
> }
> incrementer = incrementer + 1;
> currentidtoclick = $(this).attr("id");
> //alert(currentidtoclick);
>
> //note clicker function must be made cross-
> browser, IE uses fireEvent I use dispatchevent
> resulthtml = resulthtml + " onclick='clicker(\"" + currentidtoclick + "\")'>" + $(this).html() +
> ""
> display.html(resulthtml);
> display.css("display", "block");
>
> // Add to body element
>
> }else{
>
> }
>
> });
>
> Anyway as can be seen what happens here is the data that needs to be
> queried is inside the document, currently hidden but could be
> displayed in some cases.
> When someone starts entering data in the input field it goes through
> this data and makes an autocomplete from the data in the document. The
> problem is that if data entered in the input field initially can match
> something in the document but then stops matching the previously
> possible matches are not removed from the display. What is the best
> way to handle this?
>
> Also should I perhaps do an initial read in of this data to some
> arrays and then do matches on the arrays? Or another suggestion?
[jQuery] newbie: autocompletion using hidden data inline in document
Hi,
I have something like the following (fragment but shows context):
var currentActiveCommands = jQuery("#menudiv ul li.runnable").find
("a.c");
var len = currentActiveCommands.length;
var resulthtml = "";
var field = document.getElementById("run_command");
var currentidtoclick ="";
var display = jQuery("#autocompletval");
var incrementer = 0;
if(which != 13){
if(len > 2){
var reg = new RegExp(field.value,"i");
currentActiveCommands.each(function(i) {
if(reg.test($(this).html()))
{
if(incrementer == 0){
firstidinline = $(this).attr("id");
//alert("i is less than 1" +
currentidtoclick);
}
incrementer = incrementer + 1;
currentidtoclick = $(this).attr("id");
//alert(currentidtoclick);
//note clicker function must be made cross-
browser, IE uses fireEvent I use dispatchevent
resulthtml = resulthtml + "" + $(this).html() +
""
display.html(resulthtml);
display.css("display", "block");
// Add to body element
}else{
}
});
Anyway as can be seen what happens here is the data that needs to be
queried is inside the document, currently hidden but could be
displayed in some cases.
When someone starts entering data in the input field it goes through
this data and makes an autocomplete from the data in the document. The
problem is that if data entered in the input field initially can match
something in the document but then stops matching the previously
possible matches are not removed from the display. What is the best
way to handle this?
Also should I perhaps do an initial read in of this data to some
arrays and then do matches on the arrays? Or another suggestion?
[jQuery] scrolling page when mouse at edge.
Hi, somewhat off-topic, but jQuery is the javascript library I've chosen... I have a menu that is longer than the page. When I go down this menu with the mouse I would like the page to scroll in the same direction and speed as the mouse. I guess scrolling should actually only happen if I get at the very edge of the page otherwise it could be quite annoying. Thanks, Bryan Rasmussen
[jQuery] multi-class display toggling
Hi, I have a menu of links that have multiple classes, for example xObject yObject zObject. I want to dynamically toggle display on elements of this menu dependent on classes, for example lets suppose I have three links: link1 has the classes xObject and yObject link2 has the classes yObject and zObject link3 has the class zObject. A user selection somewhere else in the page determines that now I should display the links that have the classes of xObject and yObject but I should not yet do the display of zObject - having a class takes preponderance so link2 with yObject and zObject will be shown because it has the class yObject. If the zObject classes on the page were displayed due to a previous selection they should be undisplayed now. Any suggestions for optimal code to do this, tutorials I should look at that will be especially useful for this scenario? I suppose something like: An array of currently displayed classes, if xObject is in the array don't do anything for anything that has xObject. If zObject is in the currently displayed classes undisplay zObject, for each zObject check if it has xObject or yObject before doing anything. If zObject is not currently displayed don't do anything about not displaying it. is that a good starting point, better suggestions,?
[jQuery] newbie: making a sortable table by some hidden value
Hi, I would like to sort a table a number of table rows by values inside hidden form elements inside cells of the table. These form elements can represent different 'datatypes' (I put datatypes in quotes because the types my application defines aren't necessarily always the classic types one might expect), the first case that I need to sort on is basically datetime values. Anyone can give some pseudo code to do this with jquery Thanks
[jQuery] navigating through checkboxes like in gmail
Hi, Originally posted to Jquery-ui: I was just wondering if anyone had already made anything similar to gmail's interface where you can navigate between the checkboxes in an application via keys, for example k selects the preceding checkbox, j selects the next? I'm supposing there is already an example implementation out there someone, if anyone can point me to one. Cheers, Bryan Rasmussen
