14 Replies - 8579 Views - Last Post: 19 March 2013 - 03:20 PM

#1 Keylogger  Icon User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 340
  • Joined: 14-February 11

a:active doesn't work

Posted 19 March 2013 - 07:38 AM

I have the following html:
<nav>
    <ul id="menu">
	<li class="menu_active nav1"><a href="#page_Home">Home </a></li>
	<li class="nav2"><a href="#page_about">about</a></li>
	<li class="nav3"><a href="#page_advantages">Advantages </a></li>
     </ul>
</nav>

Then in the CSS:
#menu {position:fixed;z-index:2;top:240px;padding-left:4px;}
#menu li {margin-top:-4px;font-size:35px;line-height:1.2em}
#menu li a {text-transform:uppercase;color:#1e1e1e;text-decoration:none;letter-spacing:-1px}
#menu li a:hover, #menu .menu_active a {color:#f77007}
#menu .nav1 a:hover, #menu .nav1.menu_active a {color:#f77007}
#menu .nav2 a:hover, #menu .nav2.menu_active a {color:#0aa868}
#menu .nav3 a:hover, #menu .nav3.menu_active a {color:#0aa868}

Well, the problem is that when I click the link it doesn't become active. So, the color don't change.
I tried, for example:
#menu .nav3 a:active {color: yellow}


Without success. Any ideas?

This post has been edited by Keylogger: 19 March 2013 - 07:46 AM


Is This A Good Question/Topic? 0
  • +

Replies To: a:active doesn't work

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3397
  • View blog
  • Posts: 9,599
  • Joined: 08-June 10

Re: a:active doesn't work

Posted 19 March 2013 - 07:47 AM

it works for me without problems.

maybe you understand something different by active? by definition, :active triggers

http://www.w3.org/wiki/CSS3/Selectors/pseudo-classes/:active said:

For example, between the times the user presses the mouse button and releases it.

Was This Post Helpful? 0
  • +
  • -

#3 Keylogger  Icon User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 340
  • Joined: 14-February 11

Re: a:active doesn't work

Posted 19 March 2013 - 08:18 AM

I created another clean page and only put the css in header and the code above in the body and continues not to work.
I understand by "active" the current page. Am I wrong? Because I don't open pages. When I click the <a href> it scrolls automatically to the point of the menu chosed.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3397
  • View blog
  • Posts: 9,599
  • Joined: 08-June 10

Re: a:active doesn't work

Posted 19 March 2013 - 08:36 AM

View PostKeylogger, on 19 March 2013 - 04:18 PM, said:

I understand by "active" the current page. Am I wrong?

yes. active means "while you are (click) on an element" (e.g. by holding the (left) mouse button down). as soon as you release the mouse, the element is not active any more. see URL from the quotation.
Was This Post Helpful? 0
  • +
  • -

#5 Keylogger  Icon User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 340
  • Joined: 14-February 11

Re: a:active doesn't work

Posted 19 March 2013 - 08:46 AM

Yes..I saw it. But it continues not to work. I really can't understand why.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3397
  • View blog
  • Posts: 9,599
  • Joined: 08-June 10

Re: a:active doesn't work

Posted 19 March 2013 - 09:33 AM

nor do I, for it did work when I tried it.
Was This Post Helpful? 1
  • +
  • -

#7 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,576
  • Joined: 12-December 12

Re: a:active doesn't work

Posted 19 March 2013 - 11:11 AM

View PostDormilich, on 19 March 2013 - 09:33 AM, said:

nor do I, for it did work when I tried it.

Nice phrase :)
Was This Post Helpful? 0
  • +
  • -

#8 Keylogger  Icon User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 340
  • Joined: 14-February 11

Re: a:active doesn't work

Posted 19 March 2013 - 11:19 AM

Really helpful indeed.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,576
  • Joined: 12-December 12

Re: a:active doesn't work

Posted 19 March 2013 - 11:39 AM

View PostKeylogger, on 19 March 2013 - 11:19 AM, said:

Really helpful indeed.

Your previous description of active referring to the current page is incorrect. Dormilich already provided a quote defining what active refers to:

Quote

For example, between the times the user presses the mouse button and releases it.

That is, the active state will only happen very briefly, as you click on the link; but, as it follows the link straight-away, you may not even notice the brief change that occurs to the element.
Was This Post Helpful? 0
  • +
  • -

#10 Keylogger  Icon User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 340
  • Joined: 14-February 11

Re: a:active doesn't work

Posted 19 March 2013 - 12:20 PM

Ok, sorry didn't read it with 100% attention.
But now, I don't know for what looking for? If is not :active, :link isn't; :hover isn't. :visited maybe?

Or none of the options?
Was This Post Helpful? 0
  • +
  • -

#11 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,576
  • Joined: 12-December 12

Re: a:active doesn't work

Posted 19 March 2013 - 12:36 PM

Are you looking to highlight the a-link that refers to the current page? If so, then it really requires a bit of Javascript or server-side code. Search for "highlight link to current page" or similar.

Alternatively, you can take the manual approach. Previously I have just added a class, or id, "current" to the link that points to the current page and use css to format this differently. Of course, this requires that you amend every page.

Another approach is to give the body an id which is the name of the current page.

Coincidently, this page discusses all of the points I have mentioned including (spookily..) using the class-name "current", and the common misunderstanding about the :active pseudo-selector.
Was This Post Helpful? 0
  • +
  • -

#12 Keylogger  Icon User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 340
  • Joined: 14-February 11

Re: a:active doesn't work

Posted 19 March 2013 - 02:36 PM

Well, you're totally correct. It requires JS.
This worked fine (as I wanted), but I needed to add some jQuery scrips to my page..and then, this little thing (switching color and fixing it when click ahref) stopped working.

I read alot and tried alot of examples with:
jQuery.noConflict();

But without success.

I had to decide: continue with that jQuery plugin that I want in my website or getting the layout color as I want.

Well, for now I decided to take plugin.

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>


This code makes kendo plugin run without problems. But to take the layout to my page with that ahref I want, i would need this line:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>


The problem is that if I add this line, it blocks me the jQuery plugin :\
Was This Post Helpful? 0
  • +
  • -

#13 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,576
  • Joined: 12-December 12

Re: a:active doesn't work

Posted 19 March 2013 - 02:50 PM

Those are two different versions of the jQuery library: you only need one, and the current version is 1.9.1, so version 1.4.2 is quite old.

noConflict would apply if you were trying to use two different JS frameworks at the same time, which is not the case. KendoUI requires jQuery - it is a jQuery plug-in:

Quote

The current official version of Kendo UI requires jQuery 1.9.1

I would update both the Kendo UI and jQuery versions.
Was This Post Helpful? 0
  • +
  • -

#14 Keylogger  Icon User is offline

  • D.I.C Regular

Reputation: 6
  • View blog
  • Posts: 340
  • Joined: 14-February 11

Re: a:active doesn't work

Posted 19 March 2013 - 03:06 PM

Yes, I know that the version 1.4.2 is up-to-date. however, it seems that the template was build in the jquery 1.4.2 and with other versions it doesn't work nice.

Then, if I change from 1.4.2 to 1.9.1 the scroll of the page stop working and become static.
When I click one <a href> link, it scrolls me down automatically, without the input of the version 1.4.2 that doesn't work, even with a better version.

I know it's weird, but it's true.

So, I actually have:
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

This jquery.min is on version 1.8.2 and does the work of scroll automatically..but not the work of coloring <a href>. However I'm able to use other plugins.
Was This Post Helpful? 0
  • +
  • -

#15 andrewsw  Icon User is offline

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,576
  • Joined: 12-December 12

Re: a:active doesn't work

Posted 19 March 2013 - 03:20 PM

If your objective is to just style/colour the a-link to the current page, and you are struggling to do this with jQuery, then I would just add a "current" class to the relevant link in each page, referring to the page I linked in post #11. If there are too many pages involved then I would use a server-side script to achieve this.

Good luck.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1