Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Script for a talent tree

    Hi guys,

    For a web project we want to have a talent calculator, sth. like this one: http://www.wowhead.com/talent#oh

    - with a left click you can add a point, with a right click you can remove this one
    - you should see somewhere how many points you still have

    I haven´t so much experience with javascript so i want to ask, if you have a script (similar to this) which i can customize and start with.

    I found this thread: Trying to build a talent calculator and this code

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function m_click( what )
    {
        if ( what.style.backgroundColor == "lime" )
        {
            what.style.backgroundColor = "pink";
            what.title = "0%";
        } else {   
            what.style.backgroundColor = "lime";
            what.title = "33%";
        }
    }
    </script>
    </head>
    <body>
    <form>
    <input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
    <input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
    <input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
    <input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
    <input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
    <input type="button" style="background-color: pink;" title="0%" onclick="m_click(this);" />
    </form>
    </body>
    </html>
    It´s a way too simple but it´s a start- maybe.

    Thank you for the help!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    detecting the right click is a little hard. Using two buttons for add and subtract is a little easier to handle. This is a good starting point. I changed the onclick to onmousedown. the alerts are a place to start devolving your code.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function button(){
    	document.getElementById("myDiv").onmousedown = function(e)
    	{
    		if(IsRightButtonClicked(e)){
    			alert("Right Button Down");
    		}else{
    			alert("Left Button Down");
    		}
    
    	}
    }
    function IsRightButtonClicked(e)
    {
    	var rightclick = false;
    	e = e || window.event;
    	if (e.which)
    		rightclick = (e.which == 3);
    	else if (e.button)
    		rightclick = (e.button == 2);
    	return rightclick;
    }
    </script>
    </head>
    <body>
    <div id="myDiv">
    <input type="button" style="background-color: pink;" onmousedown="button();" />
    <input type="button" style="background-color: pink;" onmousedown="button();" />
    <input type="button" style="background-color: pink;" onmousedown="button();" />
    <input type="button" style="background-color: pink;" onmousedown="button();" />
    <input type="button" style="background-color: pink;" onmousedown="button();" />
    <input type="button" style="background-color: pink;" onmousedown="button();" />
    </div>
    </body>
    </html>
    PS. I'm sure there are easy methods than this out there.

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your answer.

    Where in your code should i place the colors of the buttons?

    Code:
    {
        if ( what.style.backgroundColor == "lime" )
        {
            what.style.backgroundColor = "pink";
            what.title = "0%";
        } else {   
            what.style.backgroundColor = "lime";
            what.title = "33%";
        }
    }

  • #4
    Regular Coder
    Join Date
    May 2011
    Posts
    357
    Thanks
    23
    Thanked 1 Time in 1 Post
    if you dont want a alert but dont want the right click stuff put this in the body script <body oncontextmenu="return false;"> it work in most browsers. I know it does not work with opera though...

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,081
    Thanks
    23
    Thanked 592 Times in 591 Posts
    The question I saw was
    - with a left click you can add a point, with a right click you can remove this one
    - you should see somewhere how many points you still have
    Didn't know you also wanted color change. And I only gave you a start, not final code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •