[jQuery] Re: Superfish - Nav-bar style with bgIframe?
> No dice, I'm afraid. The only change was that it generated white, drop- > down arrows again. Thank you for trying to help me out. I'm going to > create a test environment later today, with the same settings and > files, but without being embedded in one of my pages. I think bgIframe > may have a conflict with other javascript on the page. I'll post any > results. Odd... I'm using that same code and it's working fine on my end. What version of Superfish and BgiFrame are you using? Currently, I'm running Superfish ver. 1.4.8 and BgiFrame ver. 2.1.1 with the code I mentioned earlier, and it's working flawlessly.
[jQuery] Re: Giving a text link a hover state when hovering over an image
Is this what you are trying to do?
$(document).ready(function(){
// This is the border code
$("img, li.img-corner").hover(
function(){
$(this).next("li.event").css({borderBottom: "1px solid
#00"});
},
function(){
$(this).next("li.event").css({borderBottom: "0"});
}
);
// This is the image code
$("a, li.event").hover(
function(){
$(this).prev("li").find("img").attr("src","PICTURE2.jpg")
},
function(){
$(this).prev("li").find("img").attr("src","assets/img/
woi_luncheonseries.jpg");
}
);
});
[jQuery] Re: submit a form with a link
> I have a form with 3 inputs: > > > > > > > > Submit link > First off, why do you have an submit button and a submit link? Second, what are you using to validate the form?
[jQuery] Re: submit a form with a link
> I'm using jquery to validate a form and that I'm using this link to to > the submit: > > < a href="javascript:void(0);" onclick="document.form.submit();"> > Submit This will not work because you are calling the submit method for the form, not any validation script... Also, is there any reason you are using the onclick event handler? > The problem is that this kind of submit doesn't activate the jquery > validation. How can I do to force the validation? Please provide more of your code so we can see exactly what you are trying to accomplish...
[jQuery] Re: Superfish - Nav-bar style with bgIframe?
> The initiation:
>
> $(document).ready(function(){
> $("ul#sf-menu-id").superfish({
> autoArrows: false,
> pathClass: 'current'
> }).find('ul').bgIframe();
>
> });
Try changing your document.ready statement to this:
$(document).ready(function(){
$("ul#sf-menu").superfish().find('ul').bgIframe({opacity:false});
});
[jQuery] Re: Div control
> Where would the code that you've listed go?
jQuery is really designed to be separate from the HTML content; so
with that being said, it is typically found in the head section of the
document.
Now, you can't just put that in the head section and expect it to
work, because it will fire before the elements actually exist. In
traditional Javascript, this problem was solved by attaching events to
the window.onload event handler. The only issue with this method, is
the window.onload event fires after the entire page loads, meaning
your script would not execute until after every html element, image,
etc is loaded.
jQuery provides a solution for this, $(document).ready() method. This
method executes immediatly after the DOM and only the DOM finishes
loading. With that being said, you can do the following:
function myFunction()
{
// Insert Code
}
$(document).ready(myfunction)
however, or you can just pass an anonymous function like this:
$(document).ready(function(){
// Insert Code
});
[jQuery] Re: Problems selecting elements...
I ended up fixing the issue myself. For those that want to know, it
was type-casting issue. I change the following line:
>var pageIndex = $("body").attr("id");// Pulls ID value from body tag
>pageIndex = pageIndex.substring(4);
to
var pageIndex = $("body").attr("id");// Pulls ID value from body
tag
pageIndex = parseInt(pageIndex.substring(4)); // Extracts Index from
value
Hopefully, this saves someone else a huge headache...
[jQuery] Re: Problems selecting elements...
Alright, I'm really confused now. On my index page, the body tag has an ID with a value of "Link0." On this page it works fine; only the first link in the navigation section is changed. Now on all the other pages where the body tag ID is another number (i.e. Link1, Link2, etc), everything just falls apart. What happens is that it selects that particular link but it applies the style changes to that link and all the following links. For example, if I had a body ID with a value of "Link4," links 4, 5, 6, and so on are all changed. I'm losing my mind on this one. Why does it work on one page and not the others? Same markup and script on all pages, only the body id is changing...
[jQuery] Problems selecting elements...
I've been beating my head over this code for quite some time. I was
hoping somewhere here can send me on the right direction...
Here is my jQuery Code:
$(document).ready(function()
{
// Dynamically Configures the active link based on ID attribute in
body tag
var pageIndex = $("body").attr("id");// Pulls ID value from body
tag
pageIndex = pageIndex.substring(4); // Extracts Index from value
$("#nav_container ul span").slice(pageIndex, pageIndex+1).addClass
("activeLink").prepend(">");
});
Here is a basic example of the applicable Markup:
> Link 1
> Link 2
> Link 3
Basically, what I want to happen is to have jQuery determine the page
it's on by pulling and parsing the data stored in the body's id tag.
Then using that data, apply the appropriate changes to navigational
link for the page it's on. This way users can tell which page they are
on.
Also, please don't bash me for using tables. This is for college
assignment and the markup was part of the requirement...
Also, please don't post any solutions involving changing the ul list
section. The tag is pulled in using a php include so any changes
there will have a global affect on my site.
[jQuery] Re: $this and Hover Method...
> Here's a rundown on 'this'... > > this - is a JavaScript keyword. Inside a function that is called as a method > of some object, this is a reference to the object in question. But whoever > calls a function can explicitly set this to be any object. In the hover > event handlers (and all jQuery event handlers), this is a reference to the > DOM element that triggered the event. In your code, this is a reference to > the element whose ID is 'rightDiv'. In particular, this is *not* a jQuery > object here. (It's different in an jQuery *plugin* function, i.e. a function > that is added to jQuery.fn or jQuery.prototype. In those functions, this is > a reference to the jQuery object, not to a DOM element.) > > $(anyDomElement) or jQuery(anyDomElement) - creates a jQuery object > containing the single DOM element referenced in the call. As a result: > > $(this) or jQuery(this) - if this is a DOM element, then $(this) or > jQuery(this) creates a jQuery object containing that DOM element, so you can > call jQuery methods such as your .css() call. > > $ (this) or jQuery (this) - the space is not significant, so it means the > same as $(this) or jQuery(this). I personally consider it a bad coding > practice to put a space between a function name and the opening paren. > > $.this - is invalid because this is a JavaScript reserved word. $.this is > attempting to use "this" as the name of a property of the $ object. Some > browsers may allow it anyway, for example Firefox allows $.this - but no one > should ever use it. > > $.(this) - is invalid syntax. It's unlikely that any browser would ever let > you use it. > > $this - is an ordinary variable name with no special meaning whatsoever. It > can be used in the same way as any other variable name. > > Note that $ is not a magic character. It's treated just like a letter of the > alphabet in JavaScript function and variable names. > > -Mike That has to be the best explanation I've heard in a long long long time. You've have really helped de-mystify the $this variable. Thanks a million!
[jQuery] $this and Hover Method...
I'm pretty new to jQuery and I get pretty lost when using the $this
variable. I've seen people use it in so many different ways-- ($this, $
(this), $.this, $.(this), etc-- to where I don't know which way is the
correct way to use it. Anyways, can somebody look at the following
code and tell me what I'm doing wrong? I have a feeling it has to do
with the way I'm using the $this variable...
$("#rightDiv").hover(
function()
{
$(this).css({visibility: 'visible';});
},
function()
{
$(this).css({visibility: 'hidden';});
}
);
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"jQuery (English)" group.
To post to this group, send email to jquery-en@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-en?hl=en
-~--~~~~--~~--~--~---
[jQuery] Re: Simulate Link being clicked...
> No offense meant, but I think you've misunderstood the CSS I posted.
> As I understand it, you want the entire LI to be clickable. The CSS
> rule I posted will do just that by causing the A to fill the LI. If
> the width is also an issue, then set that, as well.
>
> There's no need for the JQuery hammer here.
On second glance, I see what you are trying to do, and it makes
perfect sense. Having the tag fill the height of the tag
would be the easiest and most effecient way. Thanks for the info...
again = )
> Well, now that you posted the real html... :-)
>
> $("#thumbnails li").click(function(){
> $(this).find("a").click();
> return false;
>
> });
>
> If the a element is clickable you may want to attach a handler that
> prevents the bubbling to the parent li element. Otherwise it will
> bubble up and do a second click.
I didn't think about the bubbling issue. Nevertheless, thank you for
your input.
[jQuery] Re: Simulate Link being clicked...
> No need for scripting:
>
> #thumbnails li a { display: block; height: 200px; }
I think you are missing what I'm trying to do...
> $("#MyLink").click(function(){ $("#Link1").click(); return false; });
>
> You'll need to add the id to the first link.
Yeah, thats essentially what I want to do. Now how can I do that to
all the elements without having to manually type that it for each
one?
> Is there a reason why you used an onclick attribute in html rather
> than attaching the handler using jQuery?
No reason at all, once again I just type that in here for simplicity's
sake...
[jQuery] Re: Simulate Link being clicked...
> Just bind doSomething() to the click event for the second link.
Can you expand on this? I apologize, I'm somewhat new to jQuery.
> This looks like a usability nightmare, but whatever ...
Looking at my example, I can see why you say this. Let me try to
explain what I'm trying to do.
I have a list of thumbnails images that open in ShadowBox. Something
like this:
// CSS
#thumbnails
{
list-style-type: none;
}
#thumbnails li
{
float: left;
margin-right: 5 px;
height: 200px;
background: #33;
border: 1px solid #00;
}
#thumbnails li img
{
display: block;
}
Thumbnail 1
Thumbnail 2
Thumbnail 3
Now the parent tags for each thumbnail have a set height (say
200px) but not all the thumbnail images are that large. With that
being said, what ends up happening is that I have "extra" space left
over in the element. What I want to do is make the element
itself clickable and acts as if the nested link was clicked. This way,
clicking on the "extra" space acts the same as clicking the link
itself.
[jQuery] Dynamic Stylesheets
How do you dynamically add or remove stylesheets to a page? I've seen a lot of examples on how to add css styles or classes to an elment, but I haven't found anything on adding/removing entire stylesheets...
[jQuery] Simulate Link being clicked...
First off, I'm not sure this is even possible, but I thought I'd
ask...
Is it possible to use jQuery (or just plain JavaScript) to simulate a
link click?
Can something like this be done?
// Script
function doSomething()
{
// executes some code
}
$(document).ready(function()
{
$("#MyLink") // Some code that causes Link 1 to execute as if
it was clicked when Link 2 is clicked
}
// Markup
Link 1 // Link 1
Link 2 // Link 2
Also, I don't want Link 2 to call the function directly; I want it to
cause Link 1 to be "clicked."
I've been trying to figure this out for a long time, and I'm pretty
stumped.
[jQuery] Re: How beneficial is chaining methods?"
> Even more than that, if you were to return $(this) you wouldn't be chaining > on the original object. > > // Return the same object that this function was > // called as a method of (i.e. the jQuery object). > return this; > > // Return a *new* jQuery object that contains the > // same DOM elements as this (probably not what > // you want). > return $(this); That helped clear up some confusion on my part... > Thomas, you're right that there's nothing new about chaining. Sometimes > people think that jQuery introduced the technique, but it's been common > practice in JavaScript and other languages for a long time. For example: > > var s1 = 'Testing 123'; > var s2 = s1.replace( '123', '456' ).toUpperCase(); You're dead on. I really did think this was a new scripting technique. For whatever reason, I completely forgot that you can do this in the core JS language.
[jQuery] Re: setTimeout function call...
> When I run into this, I put my functions outside the doc.ready.block, > but call them from within it. Then they can share vars. Without any code, it's pretty hard to help troubleshoot issues... But if I had to take a wild guess, I'd say it was a scoping issue. The setTimeOut function excutes from the Window Object so it cannot see local variables in the document.ready block.
[jQuery] Re: How beneficial is chaining methods?"
On Dec 3, 12:59 pm, "Jeffrey Kretz" <[EMAIL PROTECTED]> wrote:
> That is half correct.
>
> Obj.method1().method2().method3()
>
> method1 return the modified original object, not a brand-new object.
>
> You could do this:
>
> var obj = $('#elementid');
> obj.method1();
> obj.method2();
> obj.method3();
>
> And it would be the same (with the same performance) of:
>
> $('#elementid').method1().method2().method3();
Ahh, that clears it things up.
> Personally, I like chaining because it makes for tighter code. You can also
> do something like this:
>
> $('#elementid').addClass('someclass')
> .children('div')
> .addClass('someclass')
> .end()
> .find('ul')
> .show();
>
> That will find the element, add the class, then find the child divs and add
> the class, then revert to the original element (#elementid) and then find
> any ULs and show them.
>
Yeah, I can see how that makes the code a lot more compact. Thanks for
the great response.
[jQuery] Re: How beneficial is chaining methods?"
> > > One advantage to doing this
>
> > > $("#Results").html("Some Text").show();
>
> > > over this
>
> > > $("#Results").html("Some Text");
> > > $("#Results").show();
>
> > > would be that the script doesn't have to retrieve that wrapped set a
> > > second time
That's a good point. In this case, chaining would reduce overhead.
> > A chainable method, in jQuery, is written:
>
> > $.fn.newMethod = function() {
> > // Function body...
> > return $(this);
> > }
>
> > As you can see, all that's happening is "this" is being converted to a
> > jQuery object (defined by jQuery and its alias "$") and returned.
> Just a quick clarification on this. The this keyword within the "newMethod"
> plugin you just made is already the jQuery object. All you need to do is
> return this;
So if I understand this correctly, essentially the line is execute
from left to right and returns the current object after each method
completes?
For Example:
Obj.method1().method2().method3()
This would do the following:
1) Calls method 1 for the orignal Obj
2) Calls method 2 for the obj that is returned from method 1
3) Calls method 3 for the obj returned from method 2
4) etc...
Is this correct?
[jQuery] How beneficial is chaining methods?"
I'm new to jQuery and I'm trying to learn some more about jQuery's chaining feature. Chaining methods seems to be one of jQuery's best features (at least this is how I see it described all over over the web). >From a developer standpoint, I can see it saving time as there is less code to write; but on the flip side, I can see how it can becomes harder to manage especially if there is an excess amount chaining going on. Also, how does this affect performance? Does chaining use more, less, or the same amount of resources?
[jQuery] Re: Links within links, and overriding clicks.
On Nov 30, 5:33 pm, René <[EMAIL PROTECTED]> wrote:
> Just wondering...
>
> When you have a link within a link:
No idea why you would do this...
> This is some long row of test and here is a
> and some more
> text
>
> ...how do you override the parent click event?
$(document).ready(fuction(){
$("a#main").click(function(){ return false;});
});
[jQuery] Re: jQuery loop help
First off, I want to thank everyone for such quick replies.
> That will work, but it's a fairly brittle way to do things. If you add
> another link earlier in your page, it will change the loop indexes and
> you'll have to revise your code to match.
I understand and agree with you. I don't think it's a bulletpoof
technique. I'm honestly just trying this as a way to explore and
understand the language.
> Instead, I would suggest giving each of those A tags its own ID. That way
> you don't have to change your code if you rearrange the tags or add another
> one in the middle. For example:
>
>
> link 1
> link 2
> link 3
>
>
> Now you can simply give each one its own click handler:
>
> $('#one').click( function() {
> // handle click on link 1
> return false; // suppress default action
> });
>
> $('#two').click( function() {
> // handle click on link 2
> return false; // suppress default action
> });
>
> etc.
>
> Or you can still use a switch statement if you want:
>
> $('a').click( function() {
> switch( this.id ) {
> case 'one':
> // handle click on link 1
> break;
> }
> });
I honestly thought of a similar idea using the rel attribute, but this
is not really what I want. I'd like to try doing this without having
to "dirty-up" the markup (no attributes: id, rel, etc. ).
> If there are a large number of A tags in your page, you may want to consider
> event delegation instead. It's pretty easy to do. How many A tags will there
> be?
As of now, there are only four links. Nevertheless, I'm trying to code
this in a way so that the number of links doesn't matter...
[jQuery] Re: jQuery loop help
> No question is too "noobie". Welcome aboard! :-)
I appreciate the warm welcome = )
> That code won't work at all.
> I would suggest reading the doc page on .each():
Definitely on my to-do list...
> If you just want the loop index, it's passed to the .each() callback as the
> first parameter:
>
> $('a').each( function( i ){
> // 'i' is the loop index
> $(this).click(function(){
> // You can use 'i' directly in this code
> });
> });
Thanks for the info here, I'll definitely play around with it and see
what I can do.
> But is the loop index that useful here? I'm trying to picture what you might
> do with it. There may be a better way to do this - if you could say more
> about your application, someone may have a suggestion.
To give you a brief rundown. Imagine having a generic function with a
nested switch statment.
function myFunction(param)
{
switch(param)
{
case 1: // some code
break;
case 2: // some code
break;
case 3: // some code
break;
}
}
Now, imagine you have the following html items
link 1
link 2
link 3
Basically, I want to do is have jQuery make each link call myFunction
when clicked and pass its index so the the correct switch statement is
fired...
[jQuery] Re: [Beginner alert] How do I output the selected part of the DOM in a web page in a JS alert()?
> The ultimate goal would be to filter the selection so that only text
> enclosed in given classes (say loremipsum and third in my example) are
> returned.
First off, I'm also new to jQuery so I apologize if my solution is the
best way to do this. Anyways, here's what I came up with
$(document).ready(function(){
$("a.lorem").click(function(){
alert($("p.lorem").eq(0).html()); // Alerts contents of first
"lorum" p tag
alert($("p.lorem").eq(1).html()); // Alerts contents of second
"lorum" p tag
return false;// Cancels link from being
followed
});
});
shoot
Lorem ipsum dolor sit amet, magna massa aliquet
in
libero, a suscipit suspendisse ac penatibus, lectus donec
consequat, sed
justo
Lorem ipsum dolor sit
amet, magna massa aliquet in
libero, a suscipit suspendisse ac penatibus, lectus donec
consequat, sed
justo
[jQuery] jQuery loop help
First off, I apologize if this is too "noobie" a question or has been
answered somewhere else (I can't find it anywhere). I'm new to jQuery,
and I'm trying to learn some basics. Anyways, I'm stumped on the
following.
How can I convert this to jQuery?
var links = ...// Holds an array/
collection of links
function myfuction(param){...}// Just a generic function that
accepts a parameter
for(i=0; i< links.length; i++)
{
links[i].onclick = myfuction(i); // note that the fuction is being
passed the loop control variable
}
Basically, all I want to do is have the links pass their "reference
number" to a function. So far, I got something like this:
$("a").each($(this), function(){
.click(function(){ ... });
}
At this point, I have no idea where to go. Does the each method have
anything similar to a "loop control" variable? I'm sure I can find a
work around (ie: number assign each link a number via the rel
attribute) but I'd rather learn the correct way that trying to fake
it.
Any help would be appreciated. Thanks in advance.
