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 14 of 14
  1. #1
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Applying css to hrefs that are now onclicks please

    Just changed a lot of href links to onclick events in javascript, but the links that had certain hover effects before are now lost ! Is there any way of changing the css to cover the effects on the new onclick events please ?

    Any help much appreciated.

    Saz.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Saz,
    It's really amazing how many requests for help we see here that give us no clue of what their code looks like.
    Link us - best
    paste your code - works but some people don't like rebuilding your site locally.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi Excavator,

    I obviously thought that the info I gave would be enough, otherwise I would have given more info ! So there's absolutely no need to rebuild anything here - unless you really feel the need

    ok, <a onclick="javascriptcode">text</a>

    There isn't a website as yet, this is just something that I'm testing a few things on.

    Any help appreciated.

    Saz.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,628
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Quote Originally Posted by Saz View Post
    [...] the links that had certain hover effects before [...] to cover the effects on the new onclick events [...]
    That's what we need. We can't guess what your links were doing when it worked and we still can't guess what the effects are that you wanna recreate since you switched to onclick events.

    Show us your JavaScript and/or tell us in detail what your links were doing or are supposed to do! There's a lot that can be done to links with CSS. We can't read minds, you know?
    Last edited by VIPStephan; 01-23-2007 at 06:13 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    ok, <a onclick="javascriptcode">text</a>
    At least now we have an idea what your working on. What is your js going to do? Might be easier to do a lot of things with CSS instead. (can you tell I'm not a big fan of js?)

    Code:
    #container a:hover {
    	background-color: #FF0000;
    	height: 10px;
    	width: 40px;
    }
    Works in FF but IE doesn't do hover unless it's a link.
    I think if your using js on a like that, you will need to use js for your hover as well.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    We can't read minds, you know?
    Amen!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Allelujah !

    Give me a few minutes and I'll come back to you on the helpful bit you posted just a moment ago.

    Saz.

  • #8
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    At least now we have an idea what your working on. What is your js going to do? Might be easier to do a lot of things with CSS instead. (can you tell I'm not a big fan of js?)

    Code:
    #container a:hover {
    	background-color: #FF0000;
    	height: 10px;
    	width: 40px;
    }
    Works in FF but IE doesn't do hover unless it's a link.
    I think if your using js on a like that, you will need to use js for your hover as well.
    There's a few possibles, but there's a good chance that it may be an add to favorites link. I'm also not a big fan of js and never have been - any way of doing an add to favs without js please ?

    The helps appreciated.

    Saz.
    Last edited by Saz; 01-23-2007 at 06:34 PM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    Saz
    Saz is offline
    Regular Coder
    Join Date
    Jun 2005
    Posts
    277
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Works in FF but IE doesn't do hover unless it's a link.
    I think if your using js on a like that, you will need to use js for your hover as well.
    Interesting - how would you use js for a hover please ?

    Any help appreciated.

    Saz.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Maybe someone in the js forum would know but I don't. I don't work with js if at all posible and when I do, it's a pre-packaged script.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Excavator View Post
    Works in FF but IE doesn't do hover unless it's a link.
    I think if your using js on a like that, you will need to use js for your hover as well.
    This is not entirely true. Excavator meant that Internet Explorer 6 does not support the :hover pseudo‐class except as he described. The latest version, 7, does support that pseudo‐class on the other elements; so, depending upon whether or not versions below 7 concern you, you may be able to do the hover effects exclusively with CSS.

    Quote Originally Posted by Saz View Post
    Just changed a lot of href links to onclick events in javascript, but the links that had certain hover effects before are now lost ! Is there any way of changing the css to cover the effects on the new onclick events please ?
    You can do this in CSS using the :hover pseudo‐class as was already shown. You can also select only anchor elements with an onclick attribute by combining it with an attribute selector. Thus the following CSS selector only selects the hover state of anchor elements with an onclick attribute:

    Code:
    a[onclick]:hover { /* effects */ }
    If you want to do this with JavaScript, you can use a mouse over event. For one, you would use an onmouseover attribute to manipulate the CSS. For another, you could register the events in an embedded or external script so as to keep your script separate from your HTML.

    Inline Event Registration via an HTML Attribute:
    Code:
    <a onmouseover="/* do this */">
    W3C Embedded or External Event Registration:
    Code:
    anchor.addEventListener("mouseover", function() { /* do this */ }, false);
    Traditional Embedded or External Event Registration (IE‐compatible):
    Code:
    anchor.onmouseover = function() { /* do this */ };
    The second method is a newer method that Internet Explorer doesn’t support while the third method is the IE‐compatible substitute for the it. Text in blue is variable and should be changed to the actual element reference.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is a slightly more obvious method I'd like to point out- you could simply leave the href attribute in but setting the value to javascript:void(0); which will nullify any effect clicking on it has, while preserving a style.

    To my knowledge, IE6 doesn't support attribute selectors so I'd probably not bother with them.

    If you're looking to say remove the underline when you're hovering you could do this with JS:

    onmouseover="this.style.textDecoration='none';" onmouseout="this.style.textDecoration='underline';"

    Hope this helps.

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,628
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Quote Originally Posted by sitegod View Post
    There is a slightly more obvious method I'd like to point out- you could simply leave the href attribute in but setting the value to javascript:void(0); which will nullify any effect clicking on it has, while preserving a style.
    You didn't read the link Excavator posted earlier, did you?
    3. href="javascript: ", onclick="javascript:" There is no such thing as a JavaScript protocol on the web. Links use protocols to connect documents. Create real links or dont use any link at all – do or do not, there is no try!

    4. onclick="void(0)" Why would one put effort into creating something that by definition is not doing anything? Glossing over bugs and bad scripting, thats why. A link that only points to a JavaScript function should be added via JavaScript.


  •  

    Posting Permissions

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