I followed the details in the link for creating a image gallery.
And that approach works fine for me.
I want to change the mouse hover event to a click event so that when a thumbnail is clicked (instead of hover), its open image in large area.
Something like this:
http://jsfiddle.net/VfNdE/61/
The old hover classes become focus:
.thumbnail:focus{
background-color: transparent;
outline:none;
}
.thumbnail:focus img{
border: 1px solid blue;
}
and the old html simply has tabindex added like follows for each anchor:
<a class="thumbnail" href="#thumb" tabindex="1">
Related
I have 3 command buttons that filters a datatable and I want to keep the bottom border active to indicate which button was clicked.
So far, what I've done in a CSS is:
.ui-button.ui-state-hover, .ui-button.ui-state-active {
border-bottom-color: #ccff00;
border-bottom-style: solid;
border-bottom-width: thick;
}
Using the above CSS, when I hover over a button, the color of the bottom border changes, as expected; but when I click the button, the color of the bottom border doesn't keep activated and the button go back in its original normal state.
Does anyone knows how can I do to keep the color of the bottom border in a button last clicked ?
Thanks in advance.
To achieve the goal of leaving the border the same color after clicking it, we need to use Javascript to append or attach a new class
This is also using jQuery for quickness.
$(".btn").click(function(){
$(this).addClass("active");
});
body {
margin:50px;
}
button {
padding:20px;
border:4px solid #333;
background-color: #fff;
color:#333;
transition.5s;
}
button:hover {
border-bottom-color:red;
transition:.5s;
}
.active {
border-bottom-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Click Me!</button>
<button class="btn">Click Me!</button>
<button class="btn">Click Me!</button>
Now the active class will be attached onto the button as long as the page is not refreshed/reloaded. If you want to remove the class simply check on click again and see if the class is attached, if so remove it and repeat.
We are writing a site for a user cannot use a mouse. He wants to press Tab on the keyboard to move between images and press return to go to the href link associated with that image. We got that much worked out OK.
But how can we highlight the image in some way so he can easily see which image he has tabbed to?
We don't have an jQuery skills so we are trying to keep our coding to html and css
We have the code:
I thought I could introduce a class to change something about the image.
For example, we introduced a class
.classA {border:double;}
and using it
But that didn't work. We tried lots of effects but none of them worked.
Any suggestions as to how we can highlight the image he has tabbed to?
how we can highlight the image he has tabbed to
When tabbing between anchors on a page, that element gains "focus" - using the :focus pseudo selector, we can therefore restyle images that are inside an anchor that has been tabbed to with a:focus img - for example:
a:focus img {
border: 1px solid #F00;
}
Though adding a border could break layouts - you could instead do something like:
box-shadow: 0 0 10px #F00;
To give it a red glow - making it obvious, without affecting the layout of the elements.
Remember that by default, the browser puts on an outline.
Try:
img:focus {
outline:none;
border:2px solid #ABCDEF;
}
I have a custom button implemented as an anchor. The button has an image and text.
When the button has focus, I would like to style it differently. Specifically, I would like to draw a dotted rectangle around the image and text. I would also would like to additionally style it based on another class.
Here's the button code:
<a id="searchButton" class="button" href="#">
<span class="icon-search"></span>
Search
</a>
Here's the CSS code with my questions:
button:focus {
/*How do I make a rectangular dotted line around the button text and icon? /*
/* How do I refer to another class that has additional stylings? */
}
You have "button" but it should be ".button" instead since your tag is not a button, but rather your class.
.button:focus {
outline: #00FF00 dotted thick;
}
In regards to the question, "How do I refer to another class that has additional stylings?", I believe you would need a library like SASS, LESS or some other dynamic stylesheet language because that type of functionality is not currently supported by CSS natively.
You refer to a class by prefixing it with a dot (.), like so:
.button { /* styles go here */ }
You can achieve the desired effect with outline: 1px dotted gray;
.button:focus {
outline: 1px dotted gray;
}
I have a standard input textbox that I've styled using css and psuedo-class elements Hover and Focus. The css I am using is pretty simplistic:
.riTextBox:hover,
.riTextBox:focus
{
border: solid 1px #F1C15F;
}
.riTextBox
{
border: solid 1px #7394BE;
border-radius: 3.5px;
}
All is working great except when the textbox has text in it and is selected with the mouse, and as you are selecting the text you leave the bounds of the textbox (with the mouse button still down), and then mouse up somewhere outside the textbox. You will notice that the textbox border is still highlighted as if it never lost focus.
It seems that the onselect event of the textbox is conflicting with onblur, but I'm not sure. See here to reproduce this frustrating issue:
http://jsfiddle.net/pBkhT/7/
Thanks for any help you can provide!
This answer is a little late, but it works for your problem. Simply remove the focus event that is coupled with the hover event. Your original hover border will still remain on focus (when user clicks the box), but when the user moves the mouse away, the hover styling will disappear, even when the mouse button is still down.
.riTextBox
{
border: solid 1px #7394BE;
border-radius: 3.5px;
}
.riTextBox:hover
{
border: solid 1px #F1C15F;
}
I have a button like so:
<button>Click Me</button>
I want to make that button linked with an href. Is it compliant HTML to wrap the button in a tag or to put the tag inside of the button to make it linkable?
Thanks
You may just want to use a link itself and style it like a button. You can still add an onclick, but it makes linking to a new page really easy.
a.button{
color: #000000;
text-decoration: none;
display: block;
background: #FFFFFF;
border: solid 1px black;
}
A less appealing (though commonly used) method is to wrap a link around an image.
<img src="/images/button.png"/>
I think the correct way would be to put the button in a form, and set the form's action attribute to the page you want to link to and the button's type attribute to submit.
e.g.
<form action="nextpage.html" method="get">
<button type="submit"> Next </button>
</form>