Page 1 of 1

Remove 'Dotted' lines around links when clicked

Posted: Sun Mar 20, 2011 5:37 am
by me.prosenjeet
Remove 'Dotted' lines around links when clicked Thanks to Bacon Fries
Image

This is to get rid of dotted lines that comeup around a link on a webpage when the link is clicked. As you see in the image what I am referring to.
Simply drag this extension on your page/master page. No configuration

Details and Download
http://lucknowwebs.com/get-rid-of-dotte ... n-clicked/

Re: Remove 'Dotted' lines around links when clicked

Posted: Sun Mar 20, 2011 9:56 am
by pedro-pecker
Works a treat pop it on the masterpage & job done!
thanks me.prosenjeet

Re: Remove 'Dotted' lines around links when clicked

Posted: Sun Mar 20, 2011 9:59 am
by zinc
I can its usefulness, however for tab-index you may need the focus if you are going through a form for example.

Re: Remove 'Dotted' lines around links when clicked

Posted: Sun Mar 20, 2011 11:46 am
by BaconFries
@ me if that is the case as bendigo has mentioned then we can do this

Code: Select all

<style type="text/css">
a:focus
{
  -moz-outline: none 0;
  outline: none 0;
}
</style>
Also if usinfg a form and the push button gives the same we need to add onfocus="this.blur(); to the button as shown below

<input type="submit" onfocus="this.blur();" />

Re: Remove 'Dotted' lines around links when clicked

Posted: Sun Mar 20, 2011 4:17 pm
by me.prosenjeet
Hi Bacon,
Little confused....
Should I use this:
<style type="text/css">
a
{
-moz-outline: none 0;
outline: none 0;
}
</style>
Or
This:
<style type="text/css">
a:focus
{
-moz-outline: none 0;
outline: none 0;
}
</style>
in the general extension (without form)

Further, looking into your code
Also if usinfg a form and the push button gives the same we need to add onfocus="this.blur(); to the button as shown below

<input type="submit" onfocus="this.blur();" />
Do you suggest I add this in the extension as--
Using form: Yes/ No (Yes will remove // and apply the below code. This way works in php but I am not sure here-though a page with a form will always be in php! :? )
//<input type="submit" onfocus="this.blur();" />
Or this should be added manually if someone is using a form?

Re: Remove 'Dotted' lines around links when clicked

Posted: Sun Mar 20, 2011 4:39 pm
by BaconFries
<input type="submit" onfocus="this.blur();" />
No this doesnt need to be added I only gave this as a example for use with form buttons :)

The amended code with focus was as bedigo mentioned regarding the same issue that may appear if using tabs, I have tested both and they work the same...there is another method for using form buttons but this only works for gecko browsers such as firefox as it doesnt work in IE it not worth adding to the code.

Re: Remove 'Dotted' lines around links when clicked

Posted: Sun Mar 20, 2011 4:43 pm
by me.prosenjeet
Ok, so the current extension requires no change and I will leave it the way it is it?

Re: Remove 'Dotted' lines around links when clicked

Posted: Sun Mar 20, 2011 4:58 pm
by BaconFries
Yer it works as it is

Re: Remove 'Dotted' lines around links when clicked

Posted: Sun Mar 20, 2011 11:05 pm
by jordan
TNX for the update mail, index al up to date now, very nice me.prosenjeet . 8) .

Re: Remove 'Dotted' lines around links when clicked

Posted: Tue Mar 22, 2011 12:24 pm
by WWBman
This doesn't work for me! What am I doing wrong?
http://wwb.atwebpages.com

Re: Remove 'Dotted' lines around links when clicked

Posted: Tue Mar 22, 2011 1:33 pm
by me.prosenjeet
WWBman wrote:This doesn't work for me! What am I doing wrong?
http://wwb.atwebpages.com
your link worked for me on IE8

Re: Remove 'Dotted' lines around links when clicked

Posted: Tue Mar 22, 2011 2:02 pm
by WWBman
This is weird.
I normally use Maxthon Classic browser and the extension doesn't work.
I tried IE8, Chrome, Firefox, Slimbrowser and Avant and they all worked!!
I'll have a look at my Maxthon settings to see if there is anything there although it uses the Trident engine (same as IE) so I doubt if I'll find anything.

Re: Remove 'Dotted' lines around links when clicked

Posted: Tue Mar 22, 2011 2:25 pm
by BaconFries
I could be wrong here but it is because Maxthon doesnt support CSS2 styling fully only partially and requires a seperate plugin to do so...you could take a look at the Maxthon forum and find out more regarding this....
You can try this, it is untested for Maxthon as I dont use it and as I have mentioned it does not fully support CSS2 styling so it simply may not work due to this...Note this has nothing to do with WB but with how Maxthon works sorry....

Code: Select all

<style type="text/css">
a:focus 
{
outline: 0;
}
</style>
Or try this:

Code: Select all

<script type="text/javascript">
for(i=0;i<=document.links.length-1;i++) {document.links.[i]hideFocus='true'}
</script>

Re: Remove 'Dotted' lines around links when clicked

Posted: Tue Mar 22, 2011 3:46 pm
by WWBman
Thanks BaconFries, I tried both without success.
BUT I repeated the original code on my other PC which runs IE7 and only Firefox and Chrome work.
So it looks like it's a Trident engine issue that IE7 uses and Maxthon Classic issue with IE8's Trident engine.
It's no big deal, thanks anyway.

Re: Remove 'Dotted' lines around links when clicked

Posted: Tue Apr 05, 2011 5:57 pm
by Patrik iden
Hi, and Thank's. This works for me. But not on Submit or Reset buttons in Contact form, can that be done?

Re: Remove 'Dotted' lines around links when clicked

Posted: Tue Apr 05, 2011 6:16 pm
by BaconFries
The code is only for images...I did give a solution to me for buttons in forms but you need to add this manually by adding to the Button HTML inside tag*

Code: Select all

onfocus="this.blur();" 
focus.gif

Re: Remove 'Dotted' lines around links when clicked

Posted: Tue Apr 05, 2011 9:23 pm
by Patrik iden
OK, Do i ptu this code in the Contact page or in masterpage. I dont know but i tryed bouth and it dont work for me, in IE8

Re: Remove 'Dotted' lines around links when clicked

Posted: Tue Apr 05, 2011 9:29 pm
by Patrik iden
aah, i'v got iy in the the button code of course :oops:

Re: Remove 'Dotted' lines around links when clicked

Posted: Tue Apr 05, 2011 9:31 pm
by BaconFries
You do not place it on the page it needs to be inserted into the button itself like below in image
butfocus.gif

Re: Remove 'Dotted' lines around links when clicked

Posted: Tue Apr 05, 2011 9:40 pm
by Patrik iden
Got it Thank you.