[jQuery] Trouble with Klaus Hartl's Tabs Plugin Customization... even possible?
Hello everyone, I got the tabs plugin by Klaus Hartl working about 1 hour ago, and since have been trying to change some basic things about the way it works, starting with the button image and the size. I took a brief look at the source and i see the background is just a simple image. Now when I open up that image in photoshop, I am confused. I sort of see how the plugin is setting the background image, but I am used to just using the css property background-position to change the state of a button, but it looks as if this background image is a single image, and is aligned vertically for any other images? If someone could please elaborate on how to change the tab to a smaller image or modify it in any way that would be great, because frankly, I just flat out don't understand how this is working. Sincerely, Jim
[jQuery] Trouble with Klaus Hartl's Tabs Plugin Customization... even possible?
Hello everyone, I got the tabs plugin by Klaus Hartl working about 1 hour ago, and since have been trying to change some basic things about the way it works, starting with the button image and the size. I took a brief look at the source and i see the background is just a simple image. Now when I open up that image in photoshop, I am confused. I sort of see how the plugin is setting the background image, but I am used to just using the css property background-position to change the state of a button, but it looks as if this background image is a single image, and is aligned vertically for any other images? If someone could please elaborate on how to change the tab to a smaller image or modify it in any way that would be great, because frankly, I just flat out don't understand how this is working. Sincerely, Jim
[jQuery] Unable to replicate what seems like a simple element via jQuery
Hello everyone,
After spending quite some time trying to figure this out, I have
resorted to asking for help because after trying what seems like
everything, I have yet to find a solution. So maybe someone could help
me out/point me in the right direction or offer some function names. I
have tried everything in regards to the .css() function, .load() and
removeAttr and attr() function to no avail. Something in my javascript
design process is failing me. Well enough of the introduction, what I
am doing is simple enough, and can be found here, jyte.com The main
vote buttons on the page is what I am trying to do. My backend works
great via the $.get() function, except that my user can only vote once
because of classes getting changed and not being recognized. I want
the user to be able to continually swich their votes, 100 times if
they wanted. So far my design has been...
-Show normal buttons, onmousehover("show_vote_box()")
div.Vote box (hidden by default, but shown using .show() in the
show_vote_box() function
<-- these two
classes are hidden as well from the start because they are
contained within the vote box
Now it appears that the visual aspects work fine, UNTIL I vote, then
everything gets all screwy. From not letting me vote again, to not
recognizing changed classes.
Here is my code, hope this helps, any pointers, suggestions,
modifications are greatly appreciated.
Query File:
function showVote(){
$("div.show_votes").hide();
$("div.making_vote").show();
}
function restoreVote(){
$("div.making_vote").hide();
$("div.show_votes").show();
}
function positionFor(){
$(".make_vote_left").css("background-position", "-240px 0pt");
}
function positionAgainst(){
$(".make_vote_right").css("background-position", "-240px 0pt");
}
function positionForOff(){
$("div.make_vote_left").removeAttr("style");
}
function positionAgainstOff(){
$("div.make_vote_right").removeAttr("style");
}
function voteFor(story_id){
$.get("/stories/vote/1/"+story_id, function(data){
$(".making_vote_left").addClass("left_selected");
$
(".making_vote_left").removeClass("making_vote_left");
alert(data);
});
}
function voteAgainst(story_id) {
$.get("/stories/vote/2/"+story_id, function(data){
$(".making_vote_right").addClass("right_selected");
$
(".making_vote_right").removeClass("making_vote_right");
alert(data)
});
}
XHTML:
Write A Related Story
Any advice is GREATLY appreciated.
Sincerely,
Jim
[jQuery] Re: An autocomplete that is able to insert a hidden id based upon the ID of a returned element?
Dylan, Thanks, I think I sort of have it figured out. Right now I have it working which is great, although doing what you did, I am only able to do it if I include the ID visually in the list, is there a way around this to get it to not show, but still retrieve that value? Thanks, Jim On Jul 31, 2:40 am, "Dylan Verheul" <[EMAIL PROTECTED]> wrote: > Look athttp://www.dyve.net/jquery/?autocomplete > > Type 'vul' into the first search box, and pick a vulture :-) > Watch the alert box. > Look at the source code to see how it is done. > Documentation is linked on the page. > > -Dylan > > On 7/31/07, Jim Newfer <[EMAIL PROTECTED]> wrote: > > > > > Hello every, > > > I am new from prototype and am trying to change my methods to jQuery. > > What I want to do is very familiar to me with prototype, but confuses > > me when trying to do it with jQ :P > > > I have spent the past 3 hours playing around with the autocomplete > > plugins on the site, and read their documentation as well, and nothing > > seems to fit my needs. What I need is to somehow retrieve the id of > > the selected item WITHOUT showing it, like I saw in Dan G. Switzer's > > plugin. The interface plugin felt bloated, and did not work anyway. > > For when specify the [value] I wanted that to be the value of the > > field, but not shown. > > > Sorry if I am being unclear, but in prototype, I accomplished this > > task by editing the result set that the autocomplete field sees. I > > created a function that grabs the id of the first . So for > > example, let's say we have a result set of the 50 states, and we > > select California, and California's ID is 23. the and I > > just grab that with a JS function and plug that into a hidden field > > element. VIOLA! It works, but I cannot figure out how to do this in jQ > > because all of the plugins I have tried manually set the output style, > > limit your values, etc. > > > So if anyone has any suggestions that would be GREAT! As I really do > > not know where to go from here :) > > > Thank you. > > Sincerely, > > Jim
[jQuery] An autocomplete that is able to insert a hidden id based upon the ID of a returned element?
Hello every, I am new from prototype and am trying to change my methods to jQuery. What I want to do is very familiar to me with prototype, but confuses me when trying to do it with jQ :P I have spent the past 3 hours playing around with the autocomplete plugins on the site, and read their documentation as well, and nothing seems to fit my needs. What I need is to somehow retrieve the id of the selected item WITHOUT showing it, like I saw in Dan G. Switzer's plugin. The interface plugin felt bloated, and did not work anyway. For when specify the [value] I wanted that to be the value of the field, but not shown. Sorry if I am being unclear, but in prototype, I accomplished this task by editing the result set that the autocomplete field sees. I created a function that grabs the id of the first . So for example, let's say we have a result set of the 50 states, and we select California, and California's ID is 23. the and I just grab that with a JS function and plug that into a hidden field element. VIOLA! It works, but I cannot figure out how to do this in jQ because all of the plugins I have tried manually set the output style, limit your values, etc. So if anyone has any suggestions that would be GREAT! As I really do not know where to go from here :) Thank you. Sincerely, Jim
[jQuery] Re: Newcomer to jQuery, trouble using ajax functions alongside built in jQuery behaviours
Matt,
Thank you, I will try it right away! And I multiply the numbers right
away because before coming to jQuery and using plain old JS, I learned
that when dealing with numbers the best way to do it wasw multiply
everything by one, this forces JS to treat the numbers as numbers. For
example if I had 41 + 1, it set the new variable to 411, but if I use
* 1 it sets the new variable to 42.
On Jul 29, 8:30 pm, "Matt Stith" <[EMAIL PROTECTED]> wrote:
> Hmm, try putting both of those bindings inside of a function, and calling
> that function in the event, liks so:
>
> function bindVoteButtons() {
> $("div.vote_against_selected").click(function(){
> // ... change classes, etc
> bindVoteButtons();
> });
> $("div.vote_against_selected").click(function(){
> // .. change classes, etc
> bindVoteButtons();
> });
>
> }
>
> btw, what is the point of multiplying numbers by 1?
> x * 1 + 1 == x + 1
> On 7/29/07, Jim Newfer <[EMAIL PROTECTED]> wrote:
>
>
>
> > Matt:
>
> > Ah, of course ! Here ya go ;)
>
> > $("div.vote_against_selected").click(function(){
> > //first load content
> > $("div.storyinfo").load("/stories/vote/1/" + $storyid);
>
> > //then set up new value to display
> > $first_new_votes_for = $votes_for * 1 + 1;
> > $first_new_votes_against = $votes_against * 1 - 1;
> > if ($first_new_votes_against == "") {
> > $first_new_votes_against = "0";
> > }
>
> > $("h3.votenumberfor").html($first_new_votes_against);
> > $("h3.votenumberagainst").html($first_new_votes_for);
>
> > //then we change the classes
>
> > $(this).removeClass("vote_against_selected");
> > $(this).addClass("vote_for_selected");
>
> > //$("div.vote_against_selected").addClass("div.vote_for_selected");
> > //$
> > ("div.vote_against_selected").removeClass("div.vote_against_selected");
>
> > });
>
> > $("div.vote_for_selected").click(function(){
> > //first load content
> > $("div.fake").load("/stories/vote/2/" + $storyid);
>
> > //then set up new value to display
> > $new_votes_for = $votes_for * 1 - 1;
> > if ($new_votes_for == "") {
> > $new_votes_for = "0";
> > }
> > $new_votes_against = $votes_against * 1 + 1;
> > $("h3.votenumberfor").html($new_votes_for);
> > $("h3.votenumberagainst").html($new_votes_against);
>
> > //then change the classes
>
> > $(this).removeClass("vote_for_selected");
> > $(this).addClass("vote_against_selected");
> > //$("vote_for_selected
> > vote_against_selected").removeClass("vote_for_selected");
>
> > });
>
> > Ok, here are my two .click functions, as you can see, when a user
> > clicks to vote against the post, the class is changed, and vice versa.
> > The only problem is that I can only click the .div() once, :(
>
> > Any help, and/or advice is GREATLY appreciated!
>
> > Thank you :)
[jQuery] Re: Newcomer to jQuery, trouble using ajax functions alongside built in jQuery behaviours
Matt:
Ah, of course ! Here ya go ;)
$("div.vote_against_selected").click(function(){
//first load content
$("div.storyinfo").load("/stories/vote/1/" + $storyid);
//then set up new value to display
$first_new_votes_for = $votes_for * 1 + 1;
$first_new_votes_against = $votes_against * 1 - 1;
if ($first_new_votes_against == "") {
$first_new_votes_against = "0";
}
$("h3.votenumberfor").html($first_new_votes_against);
$("h3.votenumberagainst").html($first_new_votes_for);
//then we change the classes
$(this).removeClass("vote_against_selected");
$(this).addClass("vote_for_selected");
//$("div.vote_against_selected").addClass("div.vote_for_selected");
//$
("div.vote_against_selected").removeClass("div.vote_against_selected");
});
$("div.vote_for_selected").click(function(){
//first load content
$("div.fake").load("/stories/vote/2/" + $storyid);
//then set up new value to display
$new_votes_for = $votes_for * 1 - 1;
if ($new_votes_for == "") {
$new_votes_for = "0";
}
$new_votes_against = $votes_against * 1 + 1;
$("h3.votenumberfor").html($new_votes_for);
$("h3.votenumberagainst").html($new_votes_against);
//then change the classes
$(this).removeClass("vote_for_selected");
$(this).addClass("vote_against_selected");
//$("vote_for_selected
vote_against_selected").removeClass("vote_for_selected");
});
Ok, here are my two .click functions, as you can see, when a user
clicks to vote against the post, the class is changed, and vice versa.
The only problem is that I can only click the .div() once, :(
Any help, and/or advice is GREATLY appreciated!
Thank you :)
[jQuery] Re: Newcomer to jQuery, trouble using ajax functions alongside built in jQuery behaviours
Ah, of course Matt, I apologize, here ya go :)
$("div.vote_for_selected").click(function(){
//first load content
$("div.divvoteinto").load("/stories/vote/2/" + $storyid);
//then set up new value to display
$new_votes_for = $votes_for * 1 - 1;
if ($new_votes_for == "") {
$new_votes_for = "0";
}
$new_votes_against = $votes_against * 1 + 1;
$("h3.votenumberfor").html($new_votes_for);
$("h3.votenumberagainst").html($new_votes_against);
//then change the classes to reflect the new vote
$(this).removeClass("vote_for_selected");
$(this).addClass("vote_against_selected");
//$("vote_for_selected
vote_against_selected").removeClass("vote_for_selected");
});
$("div.vote_against_selected").click(function(){
//first load content
$("div.divoteinfo").load("/stories/vote/1/" + $storyid);
//then set up new value to display
$first_new_votes_for = $votes_for * 1 + 1;
$first_new_votes_against = $votes_against * 1 - 1;
if ($first_new_votes_against == "") {
$first_new_votes_against = "0";
}
$("h3.votenumberfor").html($first_new_votes_against);
$("h3.votenumberagainst").html($first_new_votes_for);
//then we change the classes to reflect that the user has just
submitted a vote
$(this).removeClass("vote_against_selected");
$(this).addClass("vote_for_selected");
//$("div.vote_against_selected").addClass("div.vote_for_selected");
//$
("div.vote_against_selected").removeClass("div.vote_against_selected");
});
Ok, here when a user clicks on div.vote_against_selected, it is
changed to div.vote_for_selected, and vice versa. I am binding the
click function to each of these classes, yet after I call the ajax
request, I cannot use the .click() on the other element. The ajax
request is working great, yet I can only use it on one of the
On Jul 29, 6:26 pm, "Matt Stith" <[EMAIL PROTECTED]> wrote:
> Some code samples would really be helpful here. You can copy any paste, just
> change any info like URLs that you dont want us to know. Its hard to
> describe a block of code using a paragraph of text :P
>
> On 7/29/07, Jim Newfer <[EMAIL PROTECTED]> wrote:
>
>
>
> > Hello everyone,
>
> > I am quite new to jquery but love its ease of use! I have all the
> > basic functions down pat, although I am struggling with the load()
> > function, what appears to be quite simple is very puzzling to me.
>
> > To provide an example of what I am trying to accomplish via jQuery can
> > be found here, jyte.com the main vote buttons. A user can toggle his/
> > her votes as many times as they want. When the user clicks on the vote
> > button on the right, a css class is added to that button. When the
> > vote button is clicked on the left, a css class is added to that
> > button. This is all done via the .click() function. Also on click() I
> > am calling an ajax request (I should not I am not actually loading
> > anything into the page, but the ajax request is working, but only for
> > that single button. As soon as I change the class of the button, I can
> > no longer click on that, even though I have specified ANOTHER function
> > in jQuery specifically for that class I just added.
>
> > I have searched the group so far and I have found a little bit about
> > adding a new .click() to your added class. Although this means that if
> > I want to let the user change the votes as many times as they want, I
> > would need to right the .click() function 100 times over to allow the
> > user to click on it again!
>
> > Could someone please point me in the correct direction or offer some
> > advice? Thank you, I appreciate your time.
>
> > Sincerely,
> > Jim
[jQuery] Newcomer to jQuery, trouble using ajax functions alongside built in jQuery behaviours
Hello everyone, I am quite new to jquery but love its ease of use! I have all the basic functions down pat, although I am struggling with the load() function, what appears to be quite simple is very puzzling to me. To provide an example of what I am trying to accomplish via jQuery can be found here, jyte.com the main vote buttons. A user can toggle his/ her votes as many times as they want. When the user clicks on the vote button on the right, a css class is added to that button. When the vote button is clicked on the left, a css class is added to that button. This is all done via the .click() function. Also on click() I am calling an ajax request (I should not I am not actually loading anything into the page, but the ajax request is working, but only for that single button. As soon as I change the class of the button, I can no longer click on that, even though I have specified ANOTHER function in jQuery specifically for that class I just added. I have searched the group so far and I have found a little bit about adding a new .click() to your added class. Although this means that if I want to let the user change the votes as many times as they want, I would need to right the .click() function 100 times over to allow the user to click on it again! Could someone please point me in the correct direction or offer some advice? Thank you, I appreciate your time. Sincerely, Jim
[jQuery] Re: Loading Klaus Hartl's Plugin? Tabs...
On Jul 3, 2:26 am, Klaus Hartl <[EMAIL PROTECTED]> wrote:
> Ganeshji Marwaha wrote:
> > The tabs plugin expects the html markup in a certain structure...
> > Recently the plugin has more flexibility towards the markup structure,
> > nevertheless, you need to set that up correctly in order for it to work..
>
> > For starters, a couple of pointers are
> > 1. you will have to include the js file. - which i am sure u have done
> > 2. you will have to include the css file. There is an IE version for the
> > css file as well, which you might want to include with conditional comments.
> > 3. you will have to place the tabs image in the correct folder. Look for
> > the relative path for tab.png in the css file.
>
> > If these didnt help, we will be more than glad to help if you could post
> > a test page somewhere, where we can have a look. That will help to debug
> > ur problem very efficiently.
>
> > -GTG
>
> Ganeshji, thanks for your assistance. Theres's one little thing I
> d like to add:
>
> Maybe the id ("container"), e.g. the selector in use just isn't correct.
> Make sure that it actually matches the element that contains the markup
> required for tabs.
>
> --Klaus
Hi everyone, I am back, I apologize for such a basic Question. Yep, I
have the tabs png, and the loading pngs loading correclty they are
displaying. Here is the markup I am using, I am thinking it is a
problem here. All of my content is displaying for all the tabs at
once. Any comments/suggestions are greatly appreciated. Thanks guys.
One
Two
Tabs are flexible
again
First tab is active by default:
$('#container').tabs();
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
[jQuery] Re: Loading Klaus Hartl's Plugin? Tabs...
On Jul 3, 2:26 am, Klaus Hartl <[EMAIL PROTECTED]> wrote:
> Ganeshji Marwaha wrote:
> > The tabs plugin expects the html markup in a certain structure...
> > Recently the plugin has more flexibility towards the markup structure,
> > nevertheless, you need to set that up correctly in order for it to work..
>
> > For starters, a couple of pointers are
> > 1. you will have to include the js file. - which i am sure u have done
> > 2. you will have to include the css file. There is an IE version for the
> > css file as well, which you might want to include with conditional comments.
> > 3. you will have to place the tabs image in the correct folder. Look for
> > the relative path for tab.png in the css file.
>
> > If these didnt help, we will be more than glad to help if you could post
> > a test page somewhere, where we can have a look. That will help to debug
> > ur problem very efficiently.
>
> > -GTG
>
> Ganeshji, thanks for your assistance. Theres's one little thing I
> d like to add:
>
> Maybe the id ("container"), e.g. the selector in use just isn't correct.
> Make sure that it actually matches the element that contains the markup
> required for tabs.
>
> --Klaus
I should also add that I am loading in the header in this order, the
jquery library js file, the niceHead file I have set up that contains
this block of code
$(document).ready(function() {
$('#container').tabs();
});
And then I finally include the css file in my header.
[jQuery] Loading Klaus Hartl's Plugin? Tabs...
I'm sure this is a very basic question but I cannot seem to get my
head around it. When I configure the tabs plugin, I have everything
installed correctly, I call upon the main js file, and then include
this before my layout,
$(document).ready(function() {
$('#container').tabs();
});
But to no avail, none of my tabs are set up correctly. Could I get
some advice please.
