i am using toggle buttons in my application, i would like to set the backgound-color when the button is pressed.
how can i know what is the proper attribute?
and in general is there any place that i can know which CSS attribute has which effect on the HTML element?
If you are using GWT ToggleButton, then you may
import com.google.gwt.user.client.ui.ToggleButton;
final ToggleButton tb = new ToggleButton( "my button text" );
if (tb.isDown()) {
tb.addStyleName("pressed"); // or tb.setStyleName("pressed");
}
and in your css file:
.pressed { background-color: blue; } /* any color you want */
Another way - to change just background of this given button:
tb.getElement().getStyle().setProperty("background", "green");
I know GWT is similar to jQuery, but I've never used it... with jQuery I'd do this (I wasn't sure what kind of button tag you were using, so I included both):
CSS
input, button {
background-color: #555;
color: #ddd;
}
.clicked {
background-color: #f80;
}
HTML
<button type="button">Click Me</button>
<input type="button" value="Click Me" />
Script
$(document).ready(function(){
$('button, :button')
.mousedown(function(){ $(this).addClass('clicked') })
.mouseup(function(){ $(this).removeClass('clicked') })
.mouseout(function(){ $(this).removeClass('clicked') });
})
and in general is there any place that i can know which css atribute has which effect on the HTML element?
Yes, http://www.w3schools.com/css/ has most of what you will probably need. Check the left column for the CSS-property you're looking for.
Regarding your first question, I you can just use the btn:active, btn:hover, btn:visited properties. (i.e. your button has the class/id 'btn'.)
Good luck
Related
I am trying to implement accessibility option on my page that would change CSS to different file when accessibility button would be clicked.
For now, all my templates extends base_generic.html, where style.css is loaded. When accessibility button would be clicked, I wish for it to change to use style_access.css for that user. How can I accomplish that?
I think a way could be, to refer in the HTML template to both CSS files, and use an onclick function with javascript, and jquery to change the id or class of the specific elements of the template.
So for example,
let's say I wanted onclick to change the CSS of an element, I could make a counter and toggle between two ids that I will have referenced in my CSS file or files.
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<button>This is a div</button>
<h1 class="potatoe" id="hello">HELLO THIS IS TEXT</h1>
<style>
#hello { color: red; }
#bye { color: blue; }
</style>
<script>
var clickCount = 0;
$("button").on("click", function() {
clickCount++;
$(".potatoe").attr("id", clickCount % 2 === 0 ? "bye" : "hello");
});
</script>
</body>
As you'll see everytime you click the button the CSS of the element will change
This is not exactly changing between CSS files but it ultimately changes the CSS of the elements you want to select.
You can implement by using JavaScript more easily:
const toggleButton = document.getElementById('button');
const workContainer = document.getElementById('work');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('blue');
toggleButton.classList.toggle('active');
workContainer.classList.toggle('blue');
if(document.body.classList.contains('blue')){
localStorage.setItem('blue', 'enabled');
}else{
localStorage.setItem('blue', 'disabled');
}
});
if(localStorage.getItem('blue') == 'enabled'){
document.body.classList.toggle('blue');
toggleButton.classList.toggle('active');
workContainer.classList.toggle('blue');
}
Is there any way that i could add a background color after placing a content inside an input field? Just like what happens when an autocomplete works.
Thanks!
There are a few ways you could achieve this. You could make the input mandatory by adding the required attribute. Doing this means that as soon as the user enters anything into the field, it is now in the valid state and you can target it in your CSS using the :valid pseudo-class:
input:valid{
background:#ff9;
}
<input required>
Or, if you don't want to make the field mandatory and as others have suggested, you could set the new background-color when the field receives focus. To prevent it from reverting to its initial color when it loses focus, you will need to add a transition to the background, setting the transition-delay to some ridiculously high number when the input is in its normal state and resetting it to 0s when it is focused. Obviously, though, this change will occur whether or not the user actually enters anything in the field or not.
input{
transition-delay:9999s;
transition-property:background;
}
input:focus{
background:#ff9;
transition-delay:0s;
}
<input>
If neither of those options suit your needs then you will probably need to resort to using JavaScript to add or remove a class, depending on whether or not the value of the input is empty.
document.querySelector("input").addEventListener("input",function(){
this.value?this.classList.add("filled"):this.classList.remove("filled");
},0);
.filled{
background:#ff9;
}
<input>
Html
First name: <input type="text" name="firstname">
Css
input:focus {
background-color: yellow;
}
Demo in JsFiddle
Here is a solution with pure javascript
var input = document.getElementById("test");
input.addEventListener('input', function() {
if (input.value)
input.style.backgroundColor = '#90EE90';
else
input.style.backgroundColor = '#fff';
});
<input id="test" type="text" value="">
Add a Css class like
.myCSSClass
{
background-color:red;
}
Now using jquery on blur function you add this class
$("#myTextBox").on('blur',function(){
if($("#myTextBox").val()==""){
if($("#myTextBox").hasClass("myCSSClass")){
$("#myTextBox").removeClass("myCSSClass");
}
}
else
{
$("#myTextBox").addClass("myCSSClass")
}
});
Using Jquery,
$( "#target" ).blur(function() {
$( "#target" ).css('background-color','red');
});
DEMO
I have a text + image side by side, and I want a function where the user can click on the image to make it bigger. I'm new to HTML/CSS so I was wondering how I can approach this. Thanks! (demo -> https://jsfiddle.net/DTcHh/6634/)
Is there any way to do this with pure HTML/CSS and no javascript?
The ones I found have been telling me to use javascript such as:
<script type="text/javascript">
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}
</script>
Is there a simpler way to do this in HTML/CSS?
You could use a CSS pseudo-class to change the styling when, for example, the mouse is over the image:
img:hover {
width: 300px;
height: 300px;
}
Generally, though, to add interactivity to your web pages, you will have to become acquainted with JavaScript. I don't know of any way to toggle a state (e.g. "zoomed-in") without the use of JavaScript.
You can think of the HTML as defining the content, the CSS as defining how it looks, and the JavaScript as defining how it behaves.
I'm looking for a way to use the functionality of a html button where I can bind the OnClick events and deal with it accordingly but I'm also looking to see if we can have hyperlink functionality for that button so they can right click on it and click "Open in new tab" which will fire off the button event but push it to a new tab.
Does anyone know if this is doable?
Hoping for it to look something like this. Currently this is a button with an image and a span inside of it which has a hover over effect.
I'm looking for a way to use the functionality of a html button where I can bind the OnClick events and deal with it accordingly...
You can bind click handlers to almost any DOM element.
...but I'm also looking to see if we can have hyperlink functionality for that button so they can right click on it and click "Open in new tab" which will fire off the button event but push it to a new tab.
So use an <a> element. All you need to do is check which mouse button was used, and that the Ctrl, Alt, and Shift keys are not pressed (otherwise the user is trying to open the link in a new tab, or other such shortcut behaviors).
document.querySelector('.btn').addEventListener('click', function (e) {
if (e.button === 0 && !e.ctrlKey && !e.altKey && !e.shiftKey) {
alert('button was clicked!');
e.preventDefault();
}
}, false);
.btn {
background-color: #8CF;
border: 1px solid #00F;
display: inline-block;
padding: 2px 5px;
text-align: center;
text-decoration: none;
}
.btn:focus {
border-color: #000;
}
.btn__icon {
display: block;
margin: 0 auto;
padding: 17px 17px 0;
}
<a href="http://example.com/" class="btn">
<img class="btn__icon" src="http://placehold.it/40x40/FFF/000"/>
<span class="btn__label">Details</span>
</a>
I would use a link styled like a button. You can set it up to look like a button and set up click events, as well as opening it in a new tab.
Perhaps try something like this - style the <a> as a button (as proposed by previous answers) and then prevent default on click:
HTML
<a id = "btn" href = "http://www.google.com">CLICK ME</a>
jquery
$('#btn').click(function(e){
e.preventDefault();
alert('hello');
});
FIDDLE
This gives you a click function on the link, prevents the default action, but retains the right click context menu.
I'm not 100% sure I understood the question but I think this is what you mean..
<input type="button" id="button1" onclick="clickFunction()" value="Click Me!">
<script>
function clickFunction() {
document.getElementById("button1").onmousedown = function(event) {
if (event.which == 3) { <!--3 = right click-->
window.open('target', '_blank'); <!--Opens target in a new tab-->
}
}
}
</script>
I don't think that you can change the context menu that pops up to add "Open in new tab" on right click but you can tell how to handle a right click.
Edit: Actually you can change the default context menu I believe but I don't think you can do it without 3rd party libs? Again not sure about that someone else will have to give you a better answer sorry :/
Edit2: After seeing your initial edit I'd agree with #Surreal Dreams. Use styling and make a normal link with an image and hover effect :)
How do you make a button in Bootstrap 3 undepress automatically after being clicked?
To replicate my problem, make a page with some buttons, give them appropriate bootstrap classes (and include bootstrap):
<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">
Load the page and click on one of the buttons. It becomes depressed and highlighted until you click somewhere else on the page (using FF29 and chrome35beta).
Inspecting the input element while clicked and unclicked doesn't show any additional classes being attached and removed from it.
Here's an example of Bootstrap buttons staying depressed: http://jsfiddle.net/52VtD/5166/
In your example, the buttons do not stay depressed. They stay focused. If you want to see the difference, do the following:
Click and hold on a button.
Release. You will see that when you release the mouse the button's appearance changes slightly, because it is no longer pressed.
If you do not want your buttons to stay focused after being released you can instruct the browser to take the focus out of them whenever you release the mouse.
Example
This example uses jQuery but you can achieve the same effect with vanilla JavaScript.
$(".btn").mouseup(function(){
$(this).blur();
})
Fiddle
Or you can just use an anchor tag which can be styled exactly the same, but since it's not a form element it doesn't retain focus:
one.
See the Anchor element section here: http://getbootstrap.com/css/#buttons
The button remains focused. To remove this efficiently you can add this query code to your project.
$(document).ready(function () {
$(".btn").click(function(event) {
// Removes focus of the button.
$(this).blur();
});
});
This also works for anchor links
$(document).ready(function () {
$(".navbar-nav li a").click(function(event) {
// Removes focus of the anchor link.
$(this).blur();
});
});
My preference:
<button onmousedown="event.preventDefault()" class="btn">Calculate</button>
Or angular way:
function blurElemDirective() {
return {
restrict: 'E',
link: function (scope, element, attrs) {
element.bind('click', function () {
element.blur();
});
}
};
}
app.directive('button', blurElemDirective);
app.directive('_MORE_ELEMENT_', blurElemDirective);
Replace _MORE_ELEMENT_ with your others elements.
Or attribute way:
function blurElemDirective() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function () {
element.blur();
});
}
};
}
app.directive('blurMe', blurElemDirective);
Then add the attribute to your html element: blur-me
<button blur-me></button>
It's the browser's focus since it's a form element (input).
You can easily remove the focusing with a little css
input:focus {
outline: 0;
}
Here's the fiddle with your example: http://jsfiddle.net/52VtD/5167/
EDIT
Ah, I just saw now that the colour of the button itself changes too. Bootstrap changes the button of e.g. your btn-default button with this css:
.btn-default:focus {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
If you don't want this behaviour, just overwrite it with your css.
This has to do with the :active and :focus element states. You need to modify the styles for those states for these buttons. For example, for the default button:
.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
color: #333;
background-color: #ccc;
border-color: #fff;
}