www.webdeveloper.com
Results 1 to 4 of 4

Thread: Problem with onHover and onClick

  1. #1
    Join Date
    Feb 2011
    Location
    Waterloo, Ontario, Canada
    Posts
    80

    Problem with onHover and onClick

    Hey all. I am writing a web page that lists a bunch of items that the user can suggest to his friends. If he is already suggesting the item, it will display a button that says "Suggesting", otherwise, it just says "Suggest". You can then hover the suggesting button it will change colour and say "Unsuggest". When the user clicks either button, it'll turn into the other. Here is the html and css:

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="suggestions.js"></script>
    <style>
    .suggesting {
    	width:100px;
    	background-color:#090;
    	border-width:0px;
    	color:#FFF;
    	height:30px;
    	border-width: 1px;
    	border-color: #060;
    	border-style:solid;
    	text-align:center;
    }
    .unsuggest {
    	width:100px;
    	background-color:#F00;
    	border-width:0px;
    	color:#FFF;
    	height:30px;
    	border-width: 1px;
    	border-color:#C00;
    	border-style:solid;
    	text-align:center;
    }
    .suggest {
    	width:100px;
    	background-color:#663366;
    	border-width:0px;
    	color:#FFF;
    	height:30px;
    	border-width: 1px;
    	border-color:#5E005E;
    	border-style:solid;
    	text-align:center;
    }
    </style>
    </head>
    
    <body>
    <input name='' type='button' class='suggesting' id="1" value='Suggesting' style='cursor:pointer' />
    <input name='' type='button' class='suggest' id="2" value='Suggest' style='cursor:pointer' />
    </body>
    </html>
    And the javascript looks like this:

    Code:
    $(document).ready(function(){
      $('input[class="suggesting"]').hover(function(){
    	var parent = this.parentNode;
        $(this).attr("class","unsuggest");
    	$(this).attr("value","Unsuggest");
        },function(){
        $(this).attr("class","suggesting");
    	$(this).attr("value","Suggesting");
      });
      $('input[class="suggesting"]').click(function(){
        var SuggestId = this.id;
    	//$.post("handleSuggestion.php",{SuggestId:SuggestId},function(result){});
    	$(this).attr("class","suggest");
    	$(this).attr("value","Suggest");
      });
      $('input[class="suggest"]').click(function(){
        var SuggestId = this.id;
    	//$.post("handleSuggestion.php",{SuggestId:SuggestId},function(result){});
    	$(this).attr("class","suggesting");
    	$(this).attr("value","Suggesting");
      });
    });
    Everything works, except for when I click the suggesting button, it only changes for one second, then changes back. Any thoughts?

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    why do you use constructions like

    Code:
    ...this.parentNode;
    ...$(this).attr("class","suggesting");
    ...$(this).attr("value","Suggesting");
    instead of

    Code:
    ...$(this).parent();
    ...$(this).addClass("suggesting");
    ...$(this).val("Suggesting");
    ?

  3. #3
    Join Date
    Feb 2011
    Location
    Waterloo, Ontario, Canada
    Posts
    80
    Quote Originally Posted by Padonak View Post
    why do you use constructions like

    Code:
    ...this.parentNode;
    ...$(this).attr("class","suggesting");
    ...$(this).attr("value","Suggesting");
    instead of

    Code:
    ...$(this).parent();
    ...$(this).addClass("suggesting");
    ...$(this).val("Suggesting");
    ?
    Just another way to do it I guess. Either way, changing it doesn't help.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <!--script type="text/javascript" src="suggestions.js"></script-->
    <style>
    .suggesting {
    	width:100px;
    	background-color:#090;
    	border-width:0px;
    	color:#FFF;
    	height:30px;
    	border-width: 1px;
    	border-color: #060;
    	border-style:solid;
    	text-align:center;
    }
    .unsuggest {
    	width:100px;
    	background-color:#F00;
    	border-width:0px;
    	color:#FFF;
    	height:30px;
    	border-width: 1px;
    	border-color:#C00;
    	border-style:solid;
    	text-align:center;
    }
    .suggest {
    	width:100px;
    	background-color:#663366;
    	border-width:0px;
    	color:#FFF;
    	height:30px;
    	border-width: 1px;
    	border-color:#5E005E;
    	border-style:solid;
    	text-align:center;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
    
    $('input[type="button"]').mouseover(function(){
    if($(this).hasClass('suggesting')){
    $(this).removeClass('suggesting');
    $(this).addClass('unsuggest');
    $(this).val('Unsuggest');
    }
    });
    
    $('input[type="button"]').mouseout(function(){
    if($(this).hasClass('unsuggest')){
    $(this).removeClass('unsuggest');
    $(this).addClass('suggesting');
    $(this).val('Suggesting');
    }
    });
    
    
    $('input[type="button"]').click(function(){
    switch($(this).val()){
    case 'Unsuggest':
         $(this).removeClass('unsuggest');
         $(this).addClass('suggest');
         $(this).val('Suggest');
    break;
    case 'Suggest':
         $(this).removeClass('suggest');
         $(this).addClass('suggesting');
         $(this).val('Suggesting');
    break;
    }
    });
    });
    </script>
    </head>
    <body>
    <input name='' type='button' class='suggesting' id="1" value='Suggesting' style='cursor:pointer' />
    <input name='' type='button' class='suggest' id="2" value='Suggest' style='cursor:pointer' />
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles