is it possible to use the window.location = "http://google.de" with _blank?
I dont want to use the <a href ... > at all, because it makes problems with the CSS (link-color).
You must always insert this code and that nervs :/
.bone a:link { color:#FFFFFF; text-decoration: none }
.bone a:visited { color:#FFFFFF; text-decoration: none }
.bone a:hover { color:#FFFFFF; text-decoration: none }
.bone a:active { color:#FFFFFF; text-decoration: none }
.bone a:hover { color:#FFFFFF; text-decoration: none }
Thanks in advance!
Peter
Certainly, simply use window.open('http://www.example.com/', '_blank');
You probably need one CSS line:
.bone a { color:#FFFFFF; text-decoration: none }
Technically, this will also match non-link anchor tags. But you probably want those styled the same way. I think this is cleaner than a Javascript solution.
I assume you're looking for something like:
var w = window.open("http://google.de", "_blank");
Bear in mind that it will shoot you in the foot as far as accessibility, search engine indexing, etc. go.
You must always insert this code and that nervs :/
You shouldn't have to insert all those. This should be enough:
.bone a {
color: #FFFFFF;
text-decoration: none;
}
If you find that's not enough, you probably have a specificity problem with your CSS; that is, you've specified different link colours elsewhere in CSS with same specificity but with different colours for hover, active etc. You get around that by making the rule you want to have effect here have a higher specificity than the global rule you want it to override.
Using Javascript to get around a styling problem is like buying a bicycle because you've lost your keys to your car.
Your Javascript won't work on browsers with Javascript disabled, search engine spiders won't be able to follow it, and who knows about mobile browsers or browsers for people with disabilities.
Related
I'm practising animations in CSS but somehow one of the buttons refuses to change.
It's the last button, all alone, that needs to have white text when you hover on it (and also white text when you click on it). I've tried some things but didn't work, who can help me? (Also I prefer not to use javascript)
Code can be find here: https://limoon.nl/test-animations/
Edit: It worked, thanks for all the tips!
First off, you shouldn't have an anchor inside of a button. It's better to ditch the outer button and style the anchor with the same styles as a button.
The reason why the anchor isn't changing colour is because you are setting it here
/*link */
a:link, a:visited, a:hover, a:active {
color: black;
text-decoration: none;
}
This will take precedent over the button hover styling
You should not use links within the button.
<button class="LMbuttonBG">Hover over mij</button>
Replace with this:
<button class="LMbuttonBG">Hover over mij</button>
Currently, in your code, the color style of tag is black.
Like this and try it.
.LMbuttonBG:hover, .LMbuttonBG:active, .LMbuttonBG:focus {
background-color: black;
}
.LMbuttonBG:hover a, .LMbuttonBG:active a, .LMbuttonBG:focus a{
color: #fff;
}
You can specify a class for link inside the button like that.
.LMbuttonBG:hover a {
color: white;
}
I have configured my site's visited link to change color with the following CSS:
a:link {text-decoration: none; color: Navy;}
a:visited {text-decoration: none; color: DeepSkyBlue;}
It works well.
However, I am unable to initialize the link decoration even when I reload or clear my browser's cache. This is what I want to do:
By reloading by browser, I want the browser to forget the links that were visited, i.e, I want the visited link's DeepSkyBlue color changes to the default Navy color on page reload.
I am using the latest version of chrome.
I am OK with using any Chrome extension if necessary.
A solution with JavaScript or CSS will be fine too.
It seems to have an easy solution, but my research so far has been fruitless.
Thanks,
This is a CSS and Chrome issue. Yes, you cleared your cache, but the cache in Chrome is like bubble gum on the bottom of your shoe. I think with developer tools open it is Shift + refresh choose hard refresh no cache.
With CSS it used to be that you had to list all 4 for them to work properly. That is probably not your problem though, might be worth ruling out. It is possible it is picking up the active state if the active state has not be set.
a {text-decoration: none;}
a:link { color: Navy; }
a:visited { color: DeepSkyBlue; }
a:hover { color: Navy; }
a:active { color: Navy ;}
I have this line of HTML which basically opens a popup window on the same page. This works fine - however, because the HTML uses a heading, it isnt obvious that you can click on it. Does anyone know how I can make the heading look like a link?
Here is the line:
<h3 class="link" onclick="displayPopup(\'' + id+ '\');">' + CLICK HERE!! + '</h3>
HTML is the presentation of semantical structure.
If you define a <h3> it IS a heading, not a link.
If you define a <a> it IS a link, not a heading.
Do not misuse those!
It could have drastical negativ affect on SEO and usability.
If you want to style an entity, you'd use CSS.
A link has an underlined text on hover etc,..:
.link { cursor: pointer; color: blue; }
.link:hover { text-decoration: underline; }
Just a simple row of CSS
.link { cursor:pointer; }
You could add this to your css to change pointer and underline the text.
.link {
cursor: pointer;
text-decoration: underline;
}
Give the class "link" a hover-effect like so:
h3.link:hover {
color: #339933;
text-decoraction: underline;
cursor: pointer;
}
(you may or may not want to have "link" only work on h3`s, that depends on your case)
I do, however, suggest that instead of using a heading and make it look like a link, you might instead want to use a link and make it look more like a heading.
I cannot quite explain why, but I feel that this is the more proper action to take here, judging from the function you want the element to perform.
I have an webapp, where buttons are created with <a> elements, and all have href set to #. I want to remove blue border around <a> links during mouse click, because Opera Mobile annoyingly highlights all <a> elements, which has same href set.
Example picture:
How can I remove it?
I think Opera may be looking for something a little stricter on the outline element.
Try:
a:focus { outline:0px solid #fff; }
The 'solid' and 'colour' will be ignored.
Try this:
a, a:active, a:focus {outline:none}
Also if you are having trouble on a Flash object/embed, you can:
object, embed {outline: 0}
Not 100% because I can't really test, but did you try adding outline: none; to the css for links? You may need to add it to a:focus and/or a:target
Uh-oh:
Spatial navigation: Spatial Navigation
is an Opera feature whereby each
element available for activation is
put into a collection. When the user
moves a joystick or clicks specific
keys, the focus is moved to the next
element in the collection. This
element is typically highlighted with
a blue or black border. Links, form
controls, and elements with onclick
handlers are added to the collection.
http://dev.opera.com/articles/view/characteristics-of-widgets-on-mobile-pho/
Use div's with onclick() handler, instead staight <a> or buttons:
Example:
In CSS:
#home-send{
background: url(gfx/button.png) no-repeat;}
On page:
<div id="home-send" onclick="next('NEXT ACTION');"></div>
On click on the DIV the action will take place ,but no outline borders effect.
I hope this help
To remove the Blue border use this on TOP of you CSS file
:focus { outline: 0 solid; }
or
:focus { outline: none; }
I have had the same problem and none of the answers here worked. However, I recently found a solution that worked for me (A little late to the party however...).
Try:
:focus{
outline: 2px solid rgba(0,0,0,0.0);
}
If that doesn't work, you can go more specific like:
a, a:active, a:focus {
outline: 2px solid rgba(0,0,0,0.0);
}
You need to actually set an outline first, then make it transparent.
https://dev.opera.com/tv/tweaking-spatial-navigation-for-tv-browsing/
I want to highlight all the links in my website when mouse over events happen on them.
I don't want to write the onmouseover attribute in every link I create and there should be some place where I can declare this highlight effect globally.
How should i do this ?
Use CSS. You should use external file if you wnat to make it same for you whole site.
a:hover
{
background-color: rgb(255, 255, 0);
}
You may use class or something else. Such as JS.
But I think the above example would be OK if you want to make it for all links.
You can do this simply through CSS.
<style="text/css"><!--
a, a:visited { color:#AA0000; text-decoration:none; }
a:hover { color:#00AA00; text-decoration:underlined; }
--></style>
Link1<br />
Link2<br />
Something like this should work fairly well:
a:hover {
color: white;
}
If you're looking to do minimal styling on links on events like 'hover', you don't need JS at all:
a { color:blue; }
a:hover { color:red; }
If you're going beyond that and possibly adding balloon style hovers you'll most likely need to rely on Javascript, it might help clarifying exactly what you mean by highlight.
Your best bet is either to write your own selector, or use a selector function in something like jQuery.
That way you can just do a mouseover function on any a element on the webpage.
For more if you want to do it yourself then you can look at the links at the bottom of this page:
https://developer.mozilla.org/En/DOM/Locating_DOM_elements_using_selectors
If you want to expand this to non-anchor tags, use jQuery.
$('div').click( function(){
$(this).addClass("hovered');
} );