SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Applying the :focus class to an element?

    Hi,

    I have a form and would like to re-create the :focus attribute to the fields, so when the field has focus/is active it changes the background image.

    Is there any simple way of doing this using Javascript?

    Thanks

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.xs4all.nl/~peterned/csshover.html

    Not only will it let you do :hover, but it'll also handle :active and :focus as well.

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Many thanks, just tried using that with no luck, I've put:

    body {
    behavior:url("../../js/csshover2.htc");
    }


    At the top of my CSS, and it's definitely the correct path but it still isn't working. Is there anything else I need to do? The instructions on that page seem massively confusing.

    Thanks

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tend to put all my .htc files in the root of my Web server's public directory (where the Web site is stored) and then reference it from there. You will have to either create or modify an existing .htaccess file to add the proper MIME type so it'll work in IE 5 and 6.

    So here's what I would do.

    Move the .htc file to the very top of your public_html folder (or www or whatever it's called). Basically whereever your home page is, that's the folder you want to put the .htc file in.

    Look for a file called .htaccess

    If you don't have one, open up a text editor (do not use Notepad for this unless you click "Save As" and select "All Files") and write the following to the new file:

    Code:
    AddType text/x-component .htc
    Then save the file as .htaccess (do NOT let your text editor choose a file type), and upload to the same folder as the csshover.htc file.

    If you do have one, just open up the file, add the above code to the end of your file, and then save it (don't choose "Save as" just "Save").

    And don't forget to point the .htc file to its new location in your stylesheet.

  5. #5
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Bugger, many thanks but it's on a web server at work and I don't have access to anything like that unfortunately. Just tried creating a file called .htaccess @ wwwroot too, and it said 'You must type a file name' ;o

    Edit: Sorry nevermind, done all of that, and now have:

    .htaccess file in wwwroot
    and the css file linking to the csshover2.htc file, also in the root.

    Still no luck though, anything else worth trying?

    Cheers

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you behind a firewall that's stripping scripts by any chance?

  7. #7
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hmm, not sure... I wouldn't of thought so - never had any problems before, although the network is stupidly secure, they've given us a bit of leniency and it's just hosted on my boss' server with no restrictions for me, I think... Anyway to check to be sure? I coded the page with my friend, it looks pretty sweet in Firefox so it'd be a shame to have it not in IE too since 99%+ of people there use that as their main browser. I'd also like to implement it onto all of the other general forms too, seems great from a usability point of view too.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not really sure as I don't mess with firewalls much. Perhaps AutisticCuckoo might know...

    Did you make sure the MIME type was set properly, and that the .htaccess file is in the same directory as the .htc file?

  9. #9
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe this
    Code:
    <style>
    input:focus { background:red}
    input { background:expression(this==document.activeElement ? 'red' : '') }
    </style>
    
    <input>
    <input>
    First rule is for firefox, second for explorer.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No stereofrog, the first rule is to code to the standards, check against the four rendering engines (equally) as you go along.

  11. #11
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip, Dan.

  12. #12
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for the replies - no luck at all getting the htc thing to work, but in wwwroot/ I've got two files, csshover2.htc and .htaccess

    Within .htaccess it just has the one line of code:
    AddType text/x-component .htc

    At the top of my CSS file, it has:
    body{ behavior:url("../../csshover2.htc"); }

    My css file is at \Inetpub\wwwroot\hr\css - so I assume putting the two ../../ before linking to the csshover file is okay?

    I've tried that Javascript without much luck - it gets rid of the current image background, and doesn't seem to work with images unfortunately, but thanks for the suggestion.

  13. #13
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    !!!!!!!!!!!!!!

    Hover works - focus doesn't.

    I assume something's been set-up right then, but any reason why focus wouldn't work too!?

  14. #14
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried the code I posted?

  15. #15
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah I did thanks, like I said in the posts a few above I didn't have much luck unfortunately But thanks for the suggestion.

    I feel I must be pretty close to getting this .htc stuff working now, like I said - :hover is fine, but :focus isn't working.

  16. #16
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I really don't get this, some bits are working fine, others not.

    For example, I've got some list that require a hover attribute, as follows:
    .sidenav li:hover {background-color: #F3F2F0;}

    This works just fine, the listed items on the sidenav hover in IE6 and FF2. However, this code:
    #livesearch li:hover {background-color: #f0f0fb;}

    Only works in FF2, in IE6 it doesn't hover at all.

    Any suggestions or help would be great, also is this worth moving to the CSS category or similar?

    Thanks again

  17. #17
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Bump, please - this is something I'd really like to fix if at all possible. Cheers

  18. #18
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried using it from another computer outside of work? If you have and it's still not working, then I'd have to see your code.

  19. #19
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Can't access it outside of work unfortunately, but it's been tested on different computers (some WinXP, some Win2k) and all have the same problem. Some :hovers are working, some aren't, but none of the :focuses are working either - fine in Firefox though.

    If there's any code you'd like me to post please just let me know and I'll copy it onto here, or pastebin.

    Thanks once again for your help

  20. #20
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, go ahead and post it here then.

  21. #21
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Just found a bit of a development; on this particular page I want to have the :hover attribute to a list generated by a live search, in IE the hover attribute doesn't work at all, yet if I hard code the list it works fine, so I guess the htc file only applies when the page is initially loaded, any not any additional content? Still doesn't explain why the :focus thing doesn't work at all though

    What code would you like to see Dan? All of the CSS/HTML for the effected areas?

  22. #22
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about the whole page, sans any sensitive content? (www.lipsum.com is good for replacing that)

  23. #23
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Many thanks - here's the login page with an example of non-working focus for now, the other page I'm experiencing problems with is a lot more code heavy!

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    	<title>Workforce Online</title>
    	<link rel="stylesheet" type="text/css" href="css/workforce.css" />
    </head>
     
    <body id="login">
    	<div id="login_form">
    		<form name="employee_login" action="/hr/workforceonline/index.php" method="post">
    			<div class="error">&nbsp;</div><br/>
    			<input id="staffNo" name="staffNo" value="200870" disabled="true" class="username"><br/>
    			<br/>
    			<input type="password" id="staffPass" name="staffPass" class="password" maxlength="38"><br/>
    			<br/>
    			<input name="Submit" type="submit" class="button" value="Login" type="image">
    		</form>
    	</div>
    </body>
    </html>

    Code CSS:
    body {
    behavior:url("../../../csshover2.htc");
    }
    #login {
    	background: url('../../img/login/login_background.jpg') fixed center no-repeat; 
    }
    #login_form {
    	text-align: center;
    	position: absolute;
    	left: 50&#37;;
    	top: 50%;
    	margin-top: -50px;
    	margin-left: -210px;
    }
    #login_form .button {
    	background: url('../../img/login/login_btn.png');
    	width: 108px; height: 41px;
    	border: none;
    	cursor: pointer;
    	overflow: hidden;
    	padding: 41px 0 0 0;
    }
    #login_form input {
    	border: none;
    	width: 128px;
    	text-align: center;
    	vertical-align: bottom;
    }
    #login_form .error {
    	width: 400px;
    	font-size: 1.15em;
    	color: white;
    }
    #login_form .username {
    	background: url('../../img/login/login_box_dis.png');
    	font-family: "Century Gothic";
    	font-size: 120%;
    	height: 28px; padding: 4px 0 0 0;
    }
    #login_form .password {
    	background: url('../../img/login/login_box.png');
    	font-family: "Trebuchet MS";
    	font-size: 70%;
    	height: 24px; padding: 8px 0 0 0;
    }
    #login_form .password:focus { background: url('../../img/login/login_box_focus.png') }

  24. #24
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like your link paths are the culprit. Try using either an absolute path (the full link to the location) or make it relative to the home page like so:

    /images/logo.png (obviously this is just an example)

  25. #25
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for the reply Dan, just tried changing them all to relative paths from the start ( /hr/img/etc.. ) and still no luck unfortunately, Firefox is just fine, IE6 not so much.

    I've noticed weird things with the :hover and :focus attributes though, on some pages it works fine, and on others (coded in exactly the same way!) it does nothing, it's really odd.


Bookmarks

Posting Permissions

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