0

Hover underscored links in ZK

asked 2010-11-02 02:25:41 +0800

zedkey gravatar image zedkey
138 1 1 3

Hi,
I'm still using ZK 3.6, and I'd like to create a normal (!) anchor link on a page. Here's what I have for this:

<toolbarbutton label="Sign in" onClick="auth.onSignIn(self)"></toolbarbutton>

It gets displayed in blue and statically underlined. Underline should be consistent with the browser setting ideally. But as a starting point it would be enough if I could get the "underline only when hover" effect, as this is the most commonly used. Can someone show me the magic to achieve this?

TIA
Zed

delete flag offensive retag edit

8 Replies

Sort by ยป oldest newest

answered 2010-11-02 04:16:49 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2010-11-02 04:21:50 +0800

Have you tried the html comps?

<?xml version="1.0" encoding="UTF-8" ?>

<zk xmlns="http://www.zkoss.org/2005/zul"
	xmlns:h="http://www.w3.org/1999/xhtml"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">

	<window id="windowLinkTest" title="Html - Link test" border="normal"
		height="300px" width="500px" style="padding: 10px">

		<separator />

		<h:a href="http://www.zkoss.org/">ZK framework</h:a> <h:br />
		<h:a href="http://www.forsthaus.de/blog/">Stephan's zk Blog</h:a> <h:br />
		<h:a href="http://www.postgres.org">PostgreSQL</h:a> <h:br />

	</window>
</zk>

best
Stephan

link publish delete flag offensive edit

answered 2010-11-03 02:28:23 +0800

zedkey gravatar image zedkey
138 1 1 3

Hi Stephan,

thanks for the reply! No, not yet. I'll try them now. Hm, I'd like to use them pretty much like the example, to trigger events in my app. So href would not really be used, but the onclick. Ok, I go and try it, and tell about the results :)

Cheers,
Z

link publish delete flag offensive edit

answered 2010-11-03 02:34:55 +0800

zedkey gravatar image zedkey
138 1 1 3

Unfortunately, it does not work.

Test #1

<h:a href="#" onClick="auth.onSignIn(self)">Sign in</h:a> <h:br />

Result: Link with no hover effect (text is underlined), the link does nothing


Test #1

<h:a href="javascript:auth.onSignIn(self)">Sign in</h:a> <h:br />

Same as above.

Cheers,
Z

link publish delete flag offensive edit

answered 2010-11-03 04:32:54 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

Hi zedkey,
mjablonski has one example in this thread

link publish delete flag offensive edit

answered 2010-11-08 23:45:21 +0800

zedkey gravatar image zedkey
138 1 1 3

Hi,

thanks, I had a look and it does not work :) Results:

1. In Firefox I have a green link, statically underscored which does not change color either when hovering
2. In IE the color is chaning
3. I can't believe that displaying an anchor in a webframework should be a problem :) Is it solved in the 5.x versions?

Cheers,
Zed

link publish delete flag offensive edit

answered 2010-11-09 00:25:06 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

I just tried this code with our live demo and it works. please try it and let me know.

<zk xmlns:h="http://www.w3.org/1999/xhtml" xmlns:zk="http://www.zkoss.org/2005/zk">

<style>
 a:link{
  color:blue;
 }

 a:visited {
  color:green;
 }

 a:hover {
  color: green;
 }

 a:active {
  color:red;
 }

 a:selected{
  color:red;
 }	
</style>

<h:a href="http://www.zkoss.org/">ZKOSS</h:a>

</zk>

link publish delete flag offensive edit

answered 2010-11-12 00:32:36 +0800

zedkey gravatar image zedkey
138 1 1 3

Same problem. Actually I do not see why the example code would underscore the link text? I only see that certain colours are defined. Once again, is it really this hard to create a *normal* link (one that looks and behaves the same as on a plain old html in your browser :))?

cheers,
Zedkey

link publish delete flag offensive edit

answered 2010-11-12 01:14:43 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

Hi zedkey,
Default behavior of html anchors are to statically display the underline. You need to disable it by using css text-decoration: none

<zk xmlns:h="http://www.w3.org/1999/xhtml" xmlns:zk="http://www.zkoss.org/2005/zk">
<style>
 a:link{
  color:blue;
  text-decoration: none;
 }

 a:visited {
  color:green;
 }

 a:hover {
  color: green;
  text-decoration: underline;
 }

 a:active {
  color:red;
 }

 a:selected{
  color:red;
 }	
</style>

<h:a href="http://www.zkoss.org/">ZKOSS</h:a>
</zk>

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-11-02 02:25:41 +0800

Seen: 1,012 times

Last updated: Nov 12 '10

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More