8 Replies - 4996 Views - Last Post: 03 January 2013 - 01:25 AM

#1 hwoarang69  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 171
  • Joined: 23-October 12

button wont stay ative

Posted 20 December 2012 - 09:33 AM

i have a button. i want it so that when user click on it, it should stay ative. but this code below doesnt stay active. i am trying to get a toggle effect but when user click on it it stay active any cant go back,

<button type='submit' id='button1' class='button' name='button_1'>button1</button>


#button1
{
 color:white;
}

#button1:active, #button1:visited 
{
 color:green;
}


Is This A Good Question/Topic? 0
  • +

Replies To: button wont stay ative

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 8947
  • View blog
  • Posts: 33,544
  • Joined: 12-June 08

Re: button wont stay ative

Posted 20 December 2012 - 09:35 AM

Typically you need some javascript for that.
Was This Post Helpful? 0
  • +
  • -

#3 Nublet  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 53
  • Joined: 12-October 12

Re: button wont stay ative

Posted 20 December 2012 - 11:06 AM

Well, active only works when you click on it, so it's normal for it to go back to being white. But I think visited might only work if it's a link.

Try this

<button type='submit' id='button1' class='button' name='button_1'><a href = "#">button1</a></button>

#button1 a
	{
	color:white;
	}
 
	#button1 a:active, #button1 a:visited
	{
	color:green;
	}




I assumed you were talking about making it stay green once you've clicked it but maybe I misunderstood something.
Was This Post Helpful? 0
  • +
  • -

#4 j4v3d  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 52
  • Joined: 24-November 12

Re: button wont stay ative

Posted 24 December 2012 - 04:26 PM

When you say a toggle effect do you mean like a rollover image, so the button is yellow and then when you select it and its active it goes green?
Was This Post Helpful? 0
  • +
  • -

#5 hwoarang69  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 171
  • Joined: 23-October 12

Re: button wont stay ative

Posted 24 December 2012 - 05:30 PM

" the button is yellow and then when you select it and its active it goes green and it stay green"
Was This Post Helpful? 0
  • +
  • -

#6 Sergio Tapia  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1252
  • View blog
  • Posts: 4,168
  • Joined: 27-January 10

Re: button wont stay ative

Posted 27 December 2012 - 06:59 AM

I'm not sure you can accomplish this using only CSS.

You can try adding a CSS class to the button once you click on it though. Here's an example using jQuery:

<button class="btn">Hello World</button>

.btn {
  /* Default btn styles. */
  background: yellow;
}

.btn-highlight {
  background: green;
}

$(function() {
  $('button').click(function(){
    $(this).addClass('btn-highlight');
  });
});

This post has been edited by Sergio Tapia: 27 December 2012 - 07:00 AM

Was This Post Helpful? 0
  • +
  • -

#7 hwoarang69  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 171
  • Joined: 23-October 12

Re: button wont stay ative

Posted 31 December 2012 - 07:23 PM

<ul>
        	<li>Categories</li>
            <a href='?wlink=1'class='current_page'><li>page1</li></a>
            <a href='?wlink=2'><li>page2</li></a>
            <a href='?wlink=3'><li>page3</li></a>
</ul>


so trying to make this a menu only using css. if i hover over it i want background color black. and if i on this page than want blackground color white.


#left_menu ul li:hover
{
	background-color:black;
}
#left_menu ul a.current_page li,  #left_menu ul a.current_page li:hover
{
	background-color:gray;
}


the problem is that if i go to page 2 than active dont work. any idea what iam doing wrong.

i guess the problem is that some how i have to move the current_page class. but not sure how to do this.

This post has been edited by hwoarang69: 31 December 2012 - 08:19 PM

Was This Post Helpful? 0
  • +
  • -

#8 fiddydips  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 20
  • Joined: 02-January 13

Re: button wont stay ative

Posted 02 January 2013 - 09:02 PM

View PostSergio Tapia, on 27 December 2012 - 06:59 AM, said:

I'm not sure you can accomplish this using only CSS.

You can try adding a CSS class to the button once you click on it though. Here's an example using jQuery:

<button class="btn">Hello World</button>

.btn {
  /* Default btn styles. */
  background: yellow;
}

.btn-highlight {
  background: green;
}

$(function() {
  $('button').click(function(){
    $(this).addClass('btn-highlight');
  });
});


I second that. In fact, I favor any jquery based solution. It's just more interesting.


Adding to the above code:




<button class="btn">Hello World</button>

.btn {
  /* Default btn styles. */
  background: yellow;
}

.btn-highlight {
  background: green;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass('btn-highlight');
  });
});
</script>



<button class="btn">Hello World</button>

.btn {
 /* Default btn styles. */
 background: yellow;
}

.btn-highlight {
 background: green;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript">
 $(document).ready(function(){
  $("button").click(function(){
   $("p").toggleClass('btn-highlight');
  });
 });
</script> 




sorry forgot to close the code tag

This post has been edited by macosxnerd101: 02 January 2013 - 08:59 PM
Reason for edit:: Added closing code tag

Was This Post Helpful? 0
  • +
  • -

#9 Anthonidas  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 218
  • Joined: 25-April 11

Re: button wont stay ative

Posted 03 January 2013 - 01:25 AM

View Postfiddydips, on 03 January 2013 - 05:02 AM, said:

In fact, I favor any jquery based solution. It's just more interesting.


In fact it is not (yet?) possible with CSS only. You have to use JS...
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1