[jQuery] Creating a button like this, using jquery?
Sorry guys, but I cannot get my head around this one. I am trying to
create a vote button that looks like the ones here, jyte.com
I already have ALL of the backend logic programmed. I even already
have everything working, the problem is, I am using CSS to display the
buttons. This does not allow me to resize the button on a MOUSEOVER
state like I was told javascript was able to do. I know there is a
mouseover function in jquery, but I am confused about what I should
do, display an image or what? And how to go about doing that. Here is
what my javascript looks like atm, using css.
$(document).ready(function(){
$("div.mybutton span").html($currentvote);
$("div.disagree span").html($disagree);
$(".mybutton span").click(function(){
$("div.mybutton span").load("/stories/vote/" + $idof);
});
$('.disagree span').click(function(){
$("div.disagree span").load("/stories/disagree/" + $idof)
});
});
Maybe someone knows a way to do what I want, I'm really quite lost
here so any advice would be GREATLY appreciated. Thank you.
[jQuery] Re: Creating a button like this, using jquery?
Ah Erid thank you! I think that was exactly what I was looking for. I
still have to try it out, the only problem I was running into before
was that the button was not resizing, rather it was staying the same
size even when I set the properties to a larger size. hm. thank you
though, and yes I was asking about the thumbs up/thumbs down button
On Jul 6, 7:56 pm, Eric Crull <[EMAIL PROTECTED]> wrote:
> I'm not sure what you're asking...The most obvious button on Jyte is
> the Green/Red thumbs up/thumbs down button, which changes when the
> user hovers his mouse over it. So if you're asking how do you make
> the color change from grey to green or grey to red, you could use
> hover and addclass:
>
> $("div.mybutton span")
> .hover(
> function(){$(this).addClass("activated")}
> ,
> function(){$(this).addClass("greyed")}
> )
>
> If that's sort of what you want, then look over
> this:http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-a...
>
> You may also want to look at hoverIntent, which has a timer function.
> That allows the user to travel over an element without triggering it.
> Hover triggers immediately when the mouse goes over it.
>
> Does this help?
>
> On Jul 6, 5:55 pm, inVINCable <[EMAIL PROTECTED]> wrote:
>
> > Sorry guys, but I cannot get my head around this one. I am trying to
> > create a vote button that looks like the ones here, jyte.com
>
> > I already have ALL of the backend logic programmed. I even already
> > have everything working, the problem is, I am using CSS to display the
> > buttons. This does not allow me to resize the button on a MOUSEOVER
> > state like I was told javascript was able to do. I know there is a
> > mouseover function in jquery, but I am confused about what I should
> > do, display an image or what? And how to go about doing that. Here is
> > what my javascript looks like atm, using css.
>
> > $(document).ready(function(){
> > $("div.mybutton span").html($currentvote);
> > $("div.disagree span").html($disagree);
> > $(".mybutton span").click(function(){
>
> > $("div.mybutton span").load("/stories/vote/" + $idof);
>
> > });
>
> > $('.disagree span').click(function(){
>
> > $("div.disagree span").load("/stories/disagree/" + $idof)
> > });
>
> > });
>
> > Maybe someone knows a way to do what I want, I'm really quite lost
> > here so any advice would be GREATLY appreciated. Thank you.
[jQuery] Best way to use an ajax comment system?
Hey everyone, I am using the form plugin (great btw) and the .load function (I need to because i am using cakephp) I was wondering, what is the best way to go about updating the comments? So far I have just been updating the whole that contains all of the comments. I feel I may be putting too much strain on my server when I do this. Does anyone have any comments on the best way to do this. Any advice is GREATLY appreciated.
[jQuery] Confusion with re-binding a click?
Hey guys,
Sorry I am just really in a rut here. I was told on IRC earlier that
you CANNOT re-load content into a if you have already loaded
content into it outside of the div. For example here:
$("div.storyvotefor").click(function(){
$("div.storyvote").load("/stories/vote/1/" + $storyid);
});
$("div.storyvoteagainst").click(function(){
$("div.storyvote").load("/stories/vote/2/" + $storyid);
});
Here, div.storyvotefor, AND div.storyvoteagainst are both INSIDE of
div.storyvote which is what I was told is the problem. I have been
trying to get my head around the bind function to rebind the click
action after it has been updated, but with no success. I have tried
pretty much every combination and I cannot seem to get it :( even
though it appears simple. All I want to do is also the
div.storyvotefor() and div.storyvoteagainst to be clicked again and
loaded into their respective containers. Any advice/direction is
GREATLY appreciated.
Sincerely,
Vince
[jQuery] Allowing a .click() function to occur as many times as needed in tandem with .load() ?
Hello everyone,
I am just about ready to throw my darn computer out the window
here :P.
What I am doing is quite simple, I am using the .load() function to
call upon a function, like so:
$("div.vote_against_selected").click(function(){
//first load content
$("div.fake").load("/stories/vote/1/" + $storyid);
)};
I should note that div.fake does NOT exist, as I do not want anything
loaded, because I change the div myself, via the .html() function,
like so:
$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);
That works fine and dandy as well! Now, at the very end of my .click()
function, after the load, and the .html() functions have taken place,
I remove and add a class like so:
$(this).removeClass("vote_against_selected");
$(this).addClass("vote_for_selected");
Again, this works perfect! I even look at look at the code with
firebug, and the classes are removed, and added, which is what is
exactly what is supposed to happen. But here is the kicker, I have
another function that does the EXACT same thing, but is for the
vote_for_selected. You will notice right above I used the addClass on
the vote_for_select above, like this:
$(this).addClass("vote_for_selected");
Again, after looking at the source and verifying that the change was
made, I try clicking on the new class (that was changed from
vote_against_selected, to vote_for_selected when a click on
vote_against_selected took place) but NOTHING happens! Ah, and I
cannot understand why because looking at my source, the class is
changed, so why isn't jquery recognizing this change!
Any tips/pointers/advice on where to go from here or any functions to
look at are greatly appreciated! (Btw I have use the bind() function
in every possible combination but nothing seems to work :(
Sincerely,
Vince
[jQuery] Re: Allowing a .click() function to occur as many times as needed in tandem with .load() ?
Hm, I don't quite exactly understand what you are saying. I simply
load into the div.fake because I do not want any data loaded. But
firebug DOES show an ajax action taking place everytime I click that
element, allowing me complete the ajax request. Thank you for your
post though, I will look into it right away.
Vince
On Jul 28, 9:36 am, Klaus Hartl <[EMAIL PROTECTED]> wrote:
> inVINCable wrote:
> > Hello everyone,
>
> > I am just about ready to throw my darn computer out the window
> > here :P.
>
> > What I am doing is quite simple, I am using the .load() function to
> > call upon a function, like so:
>
> > $("div.vote_against_selected").click(function(){
> > //first load content
> > $("div.fake").load("/stories/vote/1/" + $storyid);
>
> > )};
>
> > I should note that div.fake does NOT exist, as I do not want anything
> > loaded, because I change the div myself, via the .html() function,
> > like so:
>
> If div.fake doesn't exist, the line
>
> $("div.fake").load("/stories/vote/1/" + $storyid);
>
> doesn't do anything, so you could as well delete it. I don't understand
> what you're trying to achieve here.
>
>
>
> > $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);
>
> > That works fine and dandy as well! Now, at the very end of my .click()
> > function, after the load, and the .html() functions have taken place,
> > I remove and add a class like so:
>
> > $(this).removeClass("vote_against_selected");
> > $(this).addClass("vote_for_selected");
>
> > Again, this works perfect! I even look at look at the code with
> > firebug, and the classes are removed, and added, which is what is
> > exactly what is supposed to happen. But here is the kicker, I have
> > another function that does the EXACT same thing, but is for the
> > vote_for_selected. You will notice right above I used the addClass on
> > the vote_for_select above, like this:
>
> > $(this).addClass("vote_for_selected");
>
> > Again, after looking at the source and verifying that the change was
> > made, I try clicking on the new class (that was changed from
> > vote_against_selected, to vote_for_selected when a click on
> > vote_against_selected took place) but NOTHING happens! Ah, and I
> > cannot understand why because looking at my source, the class is
> > changed, so why isn't jquery recognizing this change!
>
> > Any tips/pointers/advice on where to go from here or any functions to
> > look at are greatly appreciated! (Btw I have use the bind() function
> > in every possible combination but nothing seems to work :(
>
> The click event wasn't bound to the element with the changed class in
> the first place. jQuery result sets are not live. You bound the event to
> all elements with a certain class at that time, but if another element
> will be changed later on to belong to that class as well, that doesn't
> automagically bind that event handler as well.
>
> The behaviour plugin may be of some interest, see
> FAQ:http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_st...
>
> as well as this tutorial:http://docs.jquery.com/Tutorials:AJAX_and_Events
>
> --Klaus
[jQuery] Is there an autocomplete plugin that allows for a hidden field that does not show?
Hello everyone, I am new from prototype and scriptaculous and have been puzzled all day by trying to figure out this autocomplete business with jQuery. I have searched all over including the plugins page on the jquery website and cannot find what I need, an autocomplete field that will get the ID of the selection without showing it. A good example would be let's say we take the id a company was assigned to, say 3434. When the user clicks on that company, I want 3434 to be submitted with the form, but NOT in the actual text box, or anywhere visible. I was able to do this in prototype by assigned an id to the that is equal to the ID, then the id is taken from the element of the selection then submitted as a hidden form element. So basically I neeed a way to have the predetermined IT of the selection to be able to be submitted along with the data, but is not visible anywhere to the user. I really would like to avoid using prototype/scripaculous but I might have to if there is no solution via jQuery :/ Thanks for any advice.
[jQuery] Re: Is there an autocomplete plugin that allows for a hidden field that does not show?
Now I see that, and I have played around with it, but that requires the species to show in the results, which I don't want. :/ On Aug 23, 8:10 pm, "Dylan Verheul" <[EMAIL PROTECTED]> wrote: > On 8/23/07, inVINCable <[EMAIL PROTECTED]> wrote: > > > I am new from prototype and scriptaculous and have been puzzled all > > day by trying to figure out this autocomplete business with jQuery. I > > have searched all over including the plugins page on the jquery > > website and cannot find what I need, an autocomplete field that will > > get the ID of the selection without showing it. A good example would > > be let's say we take the id a company was assigned to, say 3434. When > > the user clicks on that company, I want 3434 to be submitted with the > > form, but NOT in the actual text box, or anywhere visible. I was able > > to do this in prototype by assigned an id to the that is equal to > > the ID, then the id is taken from the element of the selection > > then submitted as a hidden form element. > > Unless I misunderstand, The example you mention is widely present in > the various autocomplete examples (most of which are improvements of > one and the same script, and a rewrite). > > Onhttp://www.dyve.net/jquery/?autocomplete, start typing some letters > (for example: 'com') in the search box. Some bird species will appear. > Select one, and the page will show you the scientific name. The > parameter used is onSelectItem. Substitute bird name = company name, > scientific name = id, and you should be good to go. > > Jörn's rewrite (http://jquery.bassistance.de/autocomplete/) offers > similar examples. > > > ( ... ) I really would like to avoid using > > prototype/scripaculous but I might have to if there is no solution via > > jQuery :/ > > You aren't blackmailing us are you? ;-) > > Good luck with the autocomplete. > > Dylan
