I have now one page which has a default.css style
I have one style1.css file and another one is style2.css file.
I have one UI dropdownlist which has two options.
When I select one then apply style1.css and same thing for other.
The page should not be refresh.
How can I do this?
Given you have no specific context I would suggest looking into using jQuery toggleClass().
Say you have HTML like this where the div in this example uses a default style style1 and a button will switch out styles:
<div id="myDiv" class="style1"></div>
<button id="myButton">Switch Styles</button>
In addition to style1 you have also another style defined, say style2 likes this:
.style1{
width: 100px;
height: 100px;
border: 1px solid red;
}
.style2{
width: 200px;
height: 150px;
border: 3px solid blue;
}
To switch them when clicking on the button using the toggleClass() method you can do this:
$(document).ready(function(){
$("#myButton").on("click", function(){
$("#myDiv").toggleClass("style2");
});
});
See DEMO
You can off course trigger the toggle from anywhere, not just the button, this was only an example.
look at http://api.jquery.com/addClass/ and http://api.jquery.com/removeClass/
Related
I have a file mycomponent.module.css
button {
width: 10vw;
min-width: 150px;
}
Unfortunately this css is affecting globally instead of the specific component where I am importing it. Does CSS modules not work on element names and only works on class-names? So .button instead of button?
Write like this.
Make a Class or ID and call them where is needed.
.bu{
width: 10vw;
min-width: 150px;
background-color:red;
}
<button class="bu">button1 </button><br><br>
<button>button2 ! </button>
If you want to style a current button, you should give a className or Id to your button. In this case it was global, for all butons.
I am using it in JavaScript to enable and disable a div element:
$("#divbutton").css("pointer-events","auto");
But I want a property that enables and disables the element. How can I do that?
html
<div class="buttonSender" id="divbutton">Invia</div>
While I strongly recommend using a <button> instead of a <div>, I can think of one case where you might not be able to change the HTML markup to do that.
I start below with the case you should strive for, using a <button> for a button, but follow further below with how you can "disable" a div that is acting as a button.
You can make a div act like a button by adding a click handler to it, then disable it simply by adding a class with the proper CSS, mainly by disabling pointer-events.
Here, the <div> is acting as a button by using a class, and it gets disabled by adding another class, "disabled". The click handler on the div demonstrates it is clickable by using an alert, and you will see that it no longer reacts to clicks when the "disabled" class gets added to the div.
$('#divbutton').click(function(e) {
// This is where you would put your code that
// does something when the div is clicked.
alert('The Fake Button was Clicked');
});
// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
$('#divbutton').addClass('disabled');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
$('#divbutton').removeClass('disabled');
});
div.buttonSender {
margin: 1px;
padding: 4px;
border: 1px solid darkgray;
border-radius: 2px;
max-width: 20em;
pointer-events: auto;
color: black;
background-color: peachpuff;
}
div.buttonSender.disabled {
background-color: lightgray;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div id="divbutton" class="buttonSender" role="button">
This is the div that is acting like a button.<br> Click Me
</div>
</section>
<section class="demo-buttons">
<button id="demo-disable">Disable</button>
<button id="demo-enable">Enable</button>
</section>
I've added the role="button" on the div for the purposes of accessibility, but that is not all you would have to do for proper accessibility — see the "Note:" in the ARIA: button role documentation.
You would be much better off using a <button> instead of a <div> since you are able to put any HTML in the button tag that you could put in the div.
The only reason (that I can think of) that you would "have to" use a div is if the HTML is written by someone else and you have no access to change it and no way to influence the author of the HTML.
In that case you also aren't able to add classes or an ID, or write any new CSS, and would have to work with what is already there.
This demo does that by modifying the CSS using jQuery's .css() method, disabling then restoring the pointer-events — note jQuery uses the camelCased property name, so it is pointerEvents not pointer-events.
/*
* This is NOT your code - this would be the click handler that already exists.
*/
$('#divbutton').click(function(e) {
// Assume there is already a click handler, and you want to disable it.
// This code would be the existing handler, somewhere else, not written by you.
alert("Invia was clicked");
});
/*
* This would be your code, and it wouldn't be packaged with the code above
*/
// This is how you can disable the fake button...
$('#demo-disable').click(function(e) {
$('#divbutton').css('pointerEvents', 'none');
});
// ...and re-enable it
$('#demo-enable').click(function(e) {
$('#divbutton').css('pointerEvents', 'auto');
});
#divbutton {
border: 1px solid darkgray;
border-radius: 2px;
padding: 5px;
max-width: 5em;
}
#demo-controls {
margin-top: 2em;
border-top: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<p>
This area would be part of the page that you don't control.<br>
The div acting like a button is below, and you can't change it.
</p>
<div class="buttonSender" id="divbutton">Invia</div>
</section>
<section id="demo-controls">
<p>
This area would not be part of the HTML, over which you have no control,
but somehow you need a way to fire your code that disables the existing div#divbutton
<br>
There needs to be <em>something</em> that fires your javascript;
these buttons simulate that.
</p>
<button id="demo-disable">Disable</button>
<button id="demo-enable">Enable</button>
</section>
Try creating a CSS class with the value of pointer-events that you want like in the following example:
document.querySelector('button').addEventListener('click', () => {
document.getElementById('divbutton').classList.toggle('disabled');
});
#divbutton.disabled {
pointer-events: none;
user-select: none;
background:yellow;
}
#divbutton {
height: 2rem;
}
<div class="buttonSender" id="divbutton">Invia</div>
<button>click me</button>
I'm looking for a way to easily change one of variable's value. There's a chat in a browser game that I want to make taller. Changing height in dev tools does the work:
<div class="tsbchat" style="position: relative; width: 100%; height: 160px; margin-bottom: 20px;">
But can I make i.e. a script and put it in bookmarks that will allow me to change this value with one click? How would it look like? I know it's a trivial question but I'm a noob, you can remove the question and I will find help somewhere else. Thanks in advance!
The simplest solution is to type
document.getElementsByClassName('tsbchat')[0].style.height='600px'
in your console.
Remember to add [0], because getElementsByClassName returns an array
Another way is using jQuery
function handleClick(){
$(".tsbchat").css("height", "100px"); //choose the amount you want
}
.tsbchat{
position : relative;
width : 100%;
height : 160px;
margin-bottom: 20px;
border: 1px solid black;
}
<body>
<div class="tsbchat" onclick="handleClick()">Hello</div>
</body>
This way you can make bigger your div but only once
Use this script instead if you need to use several times:
function handleClick(){
$(".tsbchat").css("height", function(){
return $(".tsbchat").css() + 100;
});
}
Note: not sure if this way you have to specify the "px" but i'm quite sure this works
For using a javascript function as bookmark you need to use bookmarklet.You can read up more here about it Bookmarklet.
For example.
javascript:( alert(' Hello i am clicked from bookmark '));
Add this to destination of bookmark. so as soon as you click on bookmark you will see a Hello i am clicked from bookmark alert.
You can do it like this
Here handleClick is a function which will be called when you click on div.Than we select the element by class name and change it's style.
function handleClick(){
let element = document.getElementsByClassName('tsbchat');
element[0].style.height = "1000px"; //chnage to amount you want
}
.tsbchat{
position : relative;
width : 100%;
height : 160px;
margin-bottom: 20px;
border: 1px solid black;
}
<body>
<div class="tsbchat" onclick="handleClick()">Hello</div>
</body>
When I use .prop('disabled',true) to disable a button, it works, but the button does not look disabled. I remember in the old days when I used .attr('disabled','disabled') to disable buttons, they would become more visibly disabled, i.e. the text would be greyed out or something so the user wouldn't try to click. Now I think the button border fades a bit but the text is not.
What's the easiest way to get the old behavior back? I am lazy and don't want to write one line of code to disable the button and another to make it look disabled - I want to get both effects in a single command if possible. Should I use a different element other than a button? A different method of disabling?
I made a fiddle here: http://jsfiddle.net/ak2MG/. Here's the code.
HTML:
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
Javascript:
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true); } );
Or change the opacity of the button
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).css('opacity',0.5);
});
Fiddle
I would add a disabled class to the button.
This lets you control the styling from CSS instead of javascript so all of your styling is in one place (where it should be).
Demo: JSFiddle
HTML
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
JS
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).addClass('disabled');
});
CSS
.disabled {
color: #999;
}
it is pretty simple, just change the text style
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
my_button_disable(this);
});
function my_button_disable(btn) {
$(btn).prop('disabled',true);
$(btn).css('color', 'lightgray');
// put whatever else you want here
}
http://jsfiddle.net/ak2MG/6/
Simplest - Add a state in CSS
Target it with CSS to change the style,
importantly the pointer-events: none will make it unresponsive. :
button:disabled {
background: #F5F5F5;
color : #C3C3C3;
cursor:none;
pointer-events: none;
}
The change from attr() to prop() was only to the jQuery API and has nothing to do with any difference you are observing in the style of a disabled button.
A disabled button's style is decided by the browser. The fiddle you provided looks very "disabled" in Google Chrome (Version 33.0.1750.154 m). If you'd like to alter the style of a disabled button to your liking, I recommend adding a class OR styling based on attribute
button[disabled],
button.disabled {
color: #999;
background: #DDD;
border: 1px solid #CCC;
}
How can I show .quick-links-container on button click?
jsFiddle: http://jsfiddle.net/gnjNq/5/
I had display: none; set but I took it off so you can see the container.
So far I have this but its not working:
$('.quicklinks-button').click(function(){$('#quick-links-container').show();});
You forgot to add the jQuery library on the jsfiddel at the left panel.
Also, you were using an id (#) selector instead of a class selector (.) for quick-links-container.
Try this:
$('.quicklinks-button').click(function(){
$('.quick-links-container').toggle();
});
Living example: http://jsfiddle.net/gnjNq/9/
Your element has that as a class, not an id, you want to show and hide so you need toggle, your fiddle didn't have jQuery added.
$('.quicklinks-button').click(
function () {
$('.quick-links-container').toggle(1000);
}
);
DEMO
try this
demo
$('.quicklinks-button').click(function(){$('.quick-links-container').show();});
.quick-links-container{
right: 20px;
background-color: white;
height: 500px;
width: 200px;
position: absolute;
box-shadow:5px 1px 6px rgba(0,0,0,.2);
}
You didn't succeed because of following reasons:
You didn't include the jQuery in your example file.
You have a class called quick-links-container in your HTML but in your JS you are using #quick-links-container which returns an ID. So that needs to be changed to '.quick-links-container'
You are using only show() on click therefore on click the div will always be set to show, instead you can use toggle() to toggle the visibility of the div.
So, your javascript code needs to be modified to following:
$('.quicklinks-button').click(function(){ $('.quick-links-container').toggle();});
jsFiddle: http://jsfiddle.net/GautamChadha/U5Rwg/
// you must use toggle
// this is jquery
$('#hide').click(function(){
var current = $(this).val();
$('p').toggle();
// this will toggle the value of button from show to hide and vice versa
if(current == 'hide'){
$('#hide').val('show');
}else{
$('#hide').val('hide');
}
});