I have a portfolio that works fine but I'm currently building a CMS for it so that I can simply upload the image and it adds it to the site for me. Before I build it, I'm rebuilding some of the scrappy code and converting the what was a JS powered gallery to a CSS powered one.
I'm trying to achieve this click effect in CSS. http://www.tomdwyerdesign.com/graphics/
I thought I could do it via the :focus selector but I've run into a little problem.
This is the HTML:
<a class="tile" href="#">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
and this is the CSS:
.tile:focus img{
background-image: url("images/large/DLPWD.png");
width: 771px;
height: 600px;
}
It doesn't seem to select it properly. Any one know why?
Thanks.
The problem is that a link is not necessarily focused when it's clicked, it's focused when you navigate to it. You can do this with the keyboard, or you could add a click handler to the link. Of course at that point, you're back into javascript, but it shows what's happening.
E.g.
<a class="tile" href="#" onclick="this.focus()">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Luckily, there is a better solution, and one that doesn't require javascript. If you add a tabindex to the link, clicking it will focus it even if the href is going nowhere. So...
<a class="tile" href="#" tabindex="0">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Should do what you want.
(your next problem is going to be that the background-image won't be visible in front of the src image - you're just going to get a stretched version of the thumbnail. But I think that's a different question)
:focus is only available on elements that receive keyboard input (i.e. form elements). You could try :active but it will only apply the CSS while the mouse button is down.
Related
I have build a dropdown menu that works a sweet as it gets.
Right click on an element, brings up he dropdown menu, i hover over the first choise, soo far so good, the font color and the background color changes as it should and the sub-menue opens. The problem is that when i hover over the sub-menu, the i "loose" the gray background color of the "parent"
Any ideas ?
<div id="contextMenu" class="dropdown-menu" role="menu" style="display: block; left: 997px; top: 438px;">
<ul class="dropdown-menu side" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;"><li class="dropdown-submenu"><i class="fa fa-paste" aria-hidden="true"></i> PARENT OPTION <ul class="dropdown-menu"> <li> <a tabindex="-1" data-url="/common/docitem/copymove/?document=247&dest=1&obj_table=companydocument&f=null" id="add_id_copy_p" style="cursor:pointer;" class="js-movecopy-docitem"> Siblin Option</a> </li>
First things first, you must include a code segment to make it easier to understand the issue, as #Paulie-d and #Rokibol Hasan mentioned. To be honest, this sounds like maybe you have conflicting CSS rules or lack of specificity, which results in your parent element being affected on :hover.
These would be the steps I would use to solve this:
Use the find function of your development IDE (CTRL + F) to find :hover elements. Avoid using very broad CSS selectors.
Make sure you have assigned the correct id and class attributes in the desired section of code.
Refresh your memory on CSS specificity. I provide you this website instead of Mozilla only because I do not know if you can handle it. If you are experienced, prefer this website.
Refresh your memory on CSS selectors.
At this point, go in your CSS and start commenting out and testing one by one sections of code that may affect the parent element you speak of.
I am trying to put outline on a font awsome while navigating with keyboard, but it is not working. I tried to add aria-hidden="true" tabindex="1" like suggested in another post but it still doesn´t work.
<div class="faContainer">
<a class="homeAnchor" href="" aria-hidden="true" tabindex="1">
<i class="fas fa-home fa-2x">
</i>
</a>
</div>
CSS
a:focus{
outline: 3px solid white;
}
tried also targeting i element
Few issues to address here:-
Never use positive tab index
A positive tab index disrupts the natural tabbing order, you want tabindex="0" in order to make something that isn't normally focusable able to accept focus. It is also not needed in your example as <a> elements are focusable by default.
aria-hidden has nothing to do with focus
aria-hidden is to do with the accessibility tree. By adding this attribute you are telling assistive technology (i.e. screen readers) to ignore this item. Remove this.
empty hrefs can get ignored
Your href="" attribute can be ignored in certain circumstances as it is not a valid hyperlink.
Add href="#" during testing if you do not know the URL you want to point it at currently.
If it is going to be used to make a change on the current page use a <button> element instead as that is semantically correct (i.e. it is going to work with a JavaScript function rather than function as a link).
how to find out why outline isn't working
The above CSS (on a dark theme) should work fine.
On Google Chrome -> Open developer tools (F12) -> inspect the element.
Top right you will see Filter :hov .cls +
Select :hov and click the :focus checkbox.
There will be a rule set that is over-riding your a:focus rule, either by being more specific (e.g. a.homeanchor:focus) or by using !important.
That rule is likely to be outline:0 or outline:none so you could also try doing a search within your CSS for those terms to identify the issue.
I want to put an online counter on my (tumblr) blog.
I get a script as a result.
I know where and how to add that code, but I'm wondering how to make this link/script unclickable? Otherwise you can click on it and view a map of all the people that are currently online and I find that rather creepy.
How can I make this unclickable?
Easy CSS way: add a css-class to the document.write-span-tag part of the code which is inserted to your document via the code snippet you included:
<span id='o_"+fhs_id+"'></span>
change to
<span class='unclickable' id='o_"+fhs_id+"'></span>
and add a CSS rule to where ever you have your CSS like this:
.unclickable {
pointer-events: none;
}
(works in most browsers, also internet explorer 10 and newer.
for older browsers you'll probably need a javascript solution)
javascript solution:
add onClick='return false' to the same snippet part:
<span id='o_"+fhs_id+"' onClick='return false'></span>
<a class="btn" href="http://freehostedscripts.net/oc.php?id=SUQ5MDAwMDAwMXxmcmVlaG9zdGVkc2NyaXB0cy5uZXR8MA==" title="319 Online [FHS]" target="_blank">319 Online Users</a>
so that's what you have you can do
<a class="btn" onclick="return false"...
On this link, instead of hovering the mouse over the image, I wanted to make the other images appear only when I click in the main image. I tried replacing the pseudo class for target, focus, but none of them worked. Is there a way to do this with css only? Because my CMS doesn't allow me to insert javascript.
Thanks,
Bruno
Stuff you can do with the “Checkbox Hack”
It is possible to do in combination with HTML, not just css. You will have to take use of the checked css event in combination with <label> element, you will also have to have some checkbox hidden somewhere in the document. It is quite hacky and its all described in the article.
It is possible to do this. There is one problem where links do not register :focus events, it will register them if you navigate to the link with TAB. But that would be a problem for the users. Anyway you can use that to overcome the problem. Just place tabindex on your link
<a href="#" tabindex="0">
<img src="1.png">
</a>
On your CSS:
a:focus img{
content:"xxx";
width:XXpx;
height:XXpx;
/*Whatever you need here*/
}
When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump. Additionally, the right button loses the rounded edges. How can I prevent this from happening?
<div class="btn-group">
<a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
<a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash"> </i></a>
</div>
Javascript:
$('[rel=tooltip]').tooltip();
Working version...
http://jsfiddle.net/BA4zM/147/
Here is a website that has it working without the jumping...
http://wrapbootstrap.com/preview/WB005S479
To avoid the jump, you need to set the container attribute. This is documented.
When using tooltips and popovers with the Bootstrap input groups,
you'll have to set the container option to avoid
unwanted side effects.
Try the following:
$('[rel=tooltip]').tooltip({container: 'body'});
As Howie said at https://stackoverflow.com/a/14770263/7598367, it's necesary to add the 'container' to tooltip.
That didn't solve my issue (I had the same problem), it's also necesary to declare at JS file BEFORE the .tooltip() initilization, this way:
$('[data-toggle=tooltip]').tooltip({container: 'body'});
$('[data-toggle="tooltip"]').tooltip();
Hope this helps if somebody has the same problem in the future.