CSS Only favorite buttons

Question

I am trying to replace the add favorite button with CSS-ONLY buttons, so instead of the star image

 

having a FAVORITE  and UNFAVORITE buttons, when the button is clicked his value changes to unfavorite, then changed back to favorite if clicked again ( like twitter follow btn)

    

so instead of the star i added a "favorite" value to the input box and kept the icon on the left, and it looks nice ( the green button)

HTML after adding Value : 

 <input type="submit" class="qa-favorite-button" id="favbtn" value="Favorite" onclick="return qa_favorite_click(this);" name="favorite_Q_61_0" title="Remove this question from my favorites">

now when i click on favorite , the button value don't change. fair enough, i need to add some javascript.  

i noticed that favoriting button class changes to "qa-unfavorite-button" if we favorite the question, so i though this script will make it , 

if ($(favbtn).hasClass("qa-unfavorite-button")){

var e = document.getElementById('favbtn')

e.value="unfollow";

}

i added it to  qa_favorite_click function to page.js file  and nothing Happend :( , i tried various variation but in vain

I am doing it wrong ? i am putting the code in a wrong place ?

Help me please 

 

 

Answer 1

Was fully wrong, I thought it was about voting:

However, it is still an easy task:

Copy this function fromqa-theme-base.php to Your qa-theme.php

 

function favorite_button($tags, $class)

{

if (isset($tags))

$this->output('<input '.$tags.' type="submit" value="MYVALUE" class="'.$class.'-button"/> ');

}

 

Change MyValue in what ever You want and now You can style it through css.

For example grey FAVORITE and green FAVORITE

 

If You want to change between two values You can call this function or a similar one with the

other value by asking if isset favorite or not.

 

Hope this helps.

 

EDIT isset for toggel does not help, one can check the tags, see function in the following comment...

Comments

Great tip monk333, i don't see however the '+' signs on the favorite button function, would you please tell me the function name. Thanks !

---

I modified the function above as follows. Put it into Your qa-theme.php and it shold work. May be You can review it, I am limited in my knowledge, but it works.

function favorite_button($tags, $class)
        {
            if (isset($tags))
            {
                if ($class=="qa-favorite"){
                    $this->output('<input '.$tags.' type="submit" value="N" class="'.$class.'-button"/> ');
                }else{
                    $this->output('<input '.$tags.' type="submit" value="Y" class="'.$class.'-button"/> ');
                }
            }
        }

It toggles now between the values Y and N, these You can fill with what ever You want and do through css something nice wit it.

The + and dash was for voting not for favorites, my error

---

Thanks a lot monk333 !! it's very smart way and works great !! Thank you again :)

---

Thank You very much, the smart part is gidgreens work, the script allows working fully image free and java free. So, if it is about speed and one does not want avatars, the script can load with two single requests. This is perfect for mobile devices.

Answer 2

To replace the image you do not have to do anything with the function or theme code. You can achieve by modifying the css. See below

• Create an image file with three state same as default Star image (Unfavorite, Favorite and Hover)
• Default Snow theme/qa-style.css
• Find around line no #866
• .qa-favorite-button, .qa-unfavorite-button
• You can change your background image here
• You may need to change width, height and background position for hover and selected state

Comments

thanks jatin.soni for you responsiveness, i though with Js it would be easier, i do avoid using image btns unless it's the only available option, should i understand from your response that there is no way to hack q2a  js to change btn caption ?