CSS on button input cancel the prop disabled property in jQuery - javascript

I made some CSS style for input button. After doing it, the prop('disabled',true) is not working for me (it used to work before the CSS changes)
HTML code:
<div id="navigation">
<button id="nextButton" type="button" name="nextButton">Next</button>
</div>
jQuery code:
$('#nextButton').prop('disabled',true);
CSS code:
button{
background: #cfe2f3;
background: -webkit-linear-gradient(#cfe2f3, #d0e0e3);
background: linear-gradient(#cfe2f3, #d0e0e3);
border: 0.5px solid #000;
border-radius: 5px;
color: #000;
display: inline-block;
padding: 8px 20px;
font: normal 700 18px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: none;
}
My propose it to disable the press on the Next button

Try to add some CSS to the disabled state:
button:disabled {
// your css rules
}

Add style to button as well when you make it disable so it will be confirm that button is disabled
$('#nextButton').css('border','1px solid red');
$('#nextButton').prop('disabled',true);
Hope so it will help you.

it is working.try this.I have linked jquery online
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#one{
background: #cfe2f3;
background: -webkit-linear-gradient(#cfe2f3, #d0e0e3);
background: linear-gradient(#cfe2f3, #d0e0e3);
border: 0.5px solid #000;
border-radius: 5px;
color: #000;
display: inline-block;
padding: 8px 20px;
font: normal 700 18px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: none;
}
</style>
<body>
<input type="button" id="one" name="button" value="button">
<script type="text/javascript">
$(document).ready(function(){
$("#one").prop('disabled',true).css({"opacity":"0.6"});
$("#one").on('click',function(){
alert(" I am enable");
})
});
</script>
</body>
</html>
try it with changing 'disabled' to 'enable', if it is enable, you may see an alert.

You can disable a button by using below mentioned steps.
Say your button class name = setAlg
Step 1:
Using Jquery attr Attribute :
$('.setAlg').attr('disabled', 'disabled');
Step 2:
Using Jquery addClass CSS Class :
$('.setAlg').addClass('disabled');
Step 3 :
Then by Declaring CSS Style Class :
<style type="text/css">
.disabled
{
background: none repeat scroll 0 0 burlyWood;
cursor: default !important;
}
</style>

Related

Save Button Colour on local storage

Im quite new to web development. i have seen similar questions, but it did not help me.
I have a button and it turns green when i press it. But when the page refreshes, the colour disappears. I know local storage is a solution to this but i don't know how to implement it. i tried so many times with local storage but couldn't figure out a solution . i have posted my HTML code below. Note that my button is inside a form , because i need to access a link from my button. How can i save the button colour with local storage so that the colour doesn't disappear when the page refreshes. And if i put a second button i want the colour to disappear from the first button, so that only the second button is active. Any help is truly appreciated. Any examples done on my code would also help !!Thanks a lot for your time.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.button {
box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
margin-top: 280px;
margin-left: 420px;
background-color:rgb(128, 128, 128);
border: none;
color: white;
padding: 30px 35px;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
.button:focus{
background-color:rgba(10, 170, 10, 0.952);
}
</style>
</head>
<body>
<div style = "position:fixed; left:-300px; top:-100px;">
<form method="get" action="http://1.1.1.1/myfile.php" >
<button class="button">Lights On</button>
</form>
</div>
</body>
</html>
You can use localStorage.setItem(key, value) and localStorage.getItem(key). Here's an example that adds an event handler to the form to save in localStorage that the button was pressed, and on page load, mark the color green if it finds that localStorage indicator:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.button {
box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
margin-top: 280px;
margin-left: 420px;
background-color:rgb(128, 128, 128);
border: none;
color: white;
padding: 30px 35px;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
.button-green, .button:focus {
background-color:rgba(10, 170, 10, 0.952);
}
</style>
</head>
<body>
<div style = "position:fixed; left:-300px; top:-100px;">
<form id="form" method="get" action="https://1.1.1.1/myfile.php" >
<button class="button">Lights On</button>
</form>
<script>
if (localStorage.getItem('formSubmitted') === 'yes') {
for(const button of document.getElementsByClassName('button')) {
button.classList.add('button-green')
}
}
document.getElementById('form').addEventListener('submit', (event) => {
localStorage.setItem('formSubmitted', 'yes');
})
</script>
</div>
</body>
</html>

iFrame won't become visible when button is clicked

I have an iFrame in HTML code, and I created a script tag that I set on a submit button. I want the iFrame to be visible when I click on the submit button, but that is not working. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
#outerdiv
{
border:none;
width:100%;
height:500px;
overflow:hidden;
}
#innerIframe
{
border: none;
position:relative;
top:-190px;
width:100%;
height:900px;
}
</style>
</head>
<body>
<h2>Web Service</h2>
<script type="text/javascript">
function showIFrame() {
var iframe = document.getElementById("innerIframe");
iframe.style.visibility="visible";
}
</script>
<form class="example" method="post" style="margin:auto;max-width:500px">
<input type="text" placeholder="Search query" name="search2">
<button type="submit" name="submit" onclick="showIFrame()"><i class="fa fa-search"></i></button>
</form>
<br>
<div id="outerdiv" >
<iframe src={{results}} id="innerIframe" style="visibility: hidden;" scrolling="yes"></iframe>
</div>
</body>
</html>
{{results}} is the URL that is passed by the user in python Flask. So in the form the user types in a word, which then joins it to a URL and performs a search. The search works perfectly, but when the page is loaded on startup, it shows Not Found, the requested URL has not been found... and I understand why that happens as the URL hasn't been loaded yet. So I want to make the iFrame invisible, and once the submit button is pressed, the frame can be visible.
I have tried with jQuery as well, but it did not work.
All help and advice will be highly appreciated.
First pass "event" when you call the onClick function in your HTML code like this *onclick="showIFrame(event)
Then in your function, you accept the "event" as a parameter like this *function showIFrame(event) {
A click button most times trigers your page to refresh, so you have to stop that by preventing the default action. Add "event.preventDefault()" to your function like this *event.preventDefault()

JavaScript classList not working while clicking a button

I am currently creating a dropdown menu so I want the menu to be displayed when clicked by adding class via Javascript but classList is not working at all. I tried lots of time but couldn't. Also if i add style.display = "block", then it works! I am unable to figure out! Please Help me!
document.getElementById('dbtn').addEventListener('click', function() {
document.getElementById('d-content').classList.toggle('show');
});
#wrapper {
position: relative;
display: inline-block;
}
#dbtn {
background-color: #F44336;
font-size: 27px;
font-family: 'Droid Sans', sans-serif;
border: none;
padding: 0.3em 0.6em;
color: #FFFFFF;
cursor: pointer;
outline: none;
}
#d-content {
position: absolute;
display: none;
background-color: #F44336;
font-family: 'Droid Sans', sans-serif;
font-size: 22px;
border-top: 2px solid #FFFFFF;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
#d-content a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 0.3em 5em 0.3em 0.3em;
}
#d-content a:hover {
background-color: darkorchid;
}
.show {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown Menu</title>
</head>
<body>
<div id="wrapper">
<input type="button" id="dbtn" value="Select..." />
<div id="d-content" class="drop">
<a>USA</a>
<a>Canada</a>
<a>Europe</a>
</div>
</div>
</body>
</html>
Browser calculates css properties based on selectors order and selectors weight. In your case #id selector overrides your class selector.
.show {
display: block !important;
}
Or it's better not to use important at all:
#d-content.show{
display: block ;
}
You can read more about selectors weight here. Also you can alaways check those kind of things in dev console.
In CSS, the id selector has far more weight over the class selector.
You need to add !important; to your .show display rule.
The problem is you are using the wrong approach (Don't worry it happens, and it's okay). it would be easier if you just toggle the display property it will save lot of your time. you can toggle the display property using following snippest:
document.getElementById('dbtn').addEventListener('click', function () {
var dContent = document.getElementById('d-content');
dContent.style.display = dContent.style.display === 'none' ? 'block' : 'none';
});

My site doesn't look correct on different resolutions

I just started learning HTML/CSS/JS 2 days ago and today I made a little tool for personal use.
I made it on computer with a 1980 x 1080 resolution but on other resolutions it doesn't look right.
What I made is a little tool which basically allows me to put a band and the band's genre into an input field and then add it to a list.
Everything looks fine on different resolutions except for when I add a band to the list.
The text that's supposed to go into the border goes all the way to the right side of the screen and the border becomes just a tiny square.
Another question I had, which I might aswell ask in here:
I would like to add a function where I can click one of the bands I added to the list, then highlight the band I clicked, and remove it by clicking a remove button.
But I have no clue where to start.
Html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel='stylesheet' href='stylesheet.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2>Bands I Like</h2>
<form name="checkListForm">
<input type="text" id = "Item" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
<ol class = "Header">
<li>Band // Genre</li>
</ol>
<br/>
<ol class ="Bands">
</ol>
</body>
</html>
Css:
.Header {
list-style-type: none;
position: relative;
}
.Header {
background: black;
border-radius: 5px;
border: 1px solid white;
margin: 4px 20px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
color:white;
text-align:center;
}
.Bands li {
list-style-type: none;
position: relative;
}
.Bands li {
background: #eeeeee;
border-radius: 5px;
border: 1px solid black;
margin: 4px 750px;
padding:0.4em;
font-size: 1em;
height: 16px;
font-family: Verdana, Arial, Sans-Serif;
//text-align:center;
}
h2 {
font-family:arial;
color:white;
}
form {
display: inline-block;
}
#button{
display: inline-block;
height:20px;
width:70px;
background-color:grey;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
.list {
font-family:garamond;
color:#cc0000;
}
body {
background-image: url("http://fc04.deviantart.net/fs71/f/2011/027/d/e/sphere_of_doom_by_crackoala-d386se9.png");
JS/jQuery:
$(document).ready(function(){
$("#button").click(function(){
$('.Bands').append('<li>'+$('#Item').val()+'</li>');
$('#Item').val("");
});
$('.Bands').sortable();
});
You can find all my code here:
http://jsfiddle.net/mLkcr501/
Any help would be appreciated!
This line in your CSS was bumping it to the right.
margin: 4px 750px;
Then just needed to float the links left so the border thingy covered them:
.bands{
float:left;
}
http://jsfiddle.net/mLkcr501/1/
-Cheers,
you must use mediaquery to ajust the size on diferent resolutions.
#media (max-width: 640px){
'here contains the class or ids'{width:100%; float: left;}
.greyBox2{display:none;}
.text{width: 100%; text-align: left; font-size: 17px;}
}

How Can I Change The Style Of A Div On Mousedown?, or any other event for that matter…

But it doesn't work. You can see I'm trying to change the class of the div containing season.png onmousedown and revert it onmouseup.
What am I missing?
Thanks.
Mike
It's working just fine. There is nothing wrong with the code that you posted, so if you can't see it there has to be something wrong with your css.
I used this to test the code:
<html>
<head>
<title>Test</title>
<style>
.winter { border: 1px solid blue; }
.spring { background: yellow; }
.summer { background: green; }
</style>
</head>
<body>
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
<img src="Resources/season.png" />
</div>
</body>
</html>
It works for me so I guess you need to run some checks on your code. Make sure your css is included.
Post the complete code you are using so we can look for errors.
This is the code I used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onmouseevents on div</title>
<style type="text/css">
body
{
background-color: #FFF;
color: #000;
}
.page
{
margin: 10px auto;
width: 640px;
}
.winter
{
background-color: cyan;
}
.spring
{
color: magenta;
}
.summer
{
color: yellow;
}
</style>
</head>
<body>
<div class="page">
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
Cats!
</div>
</div>
</body>
</html>
As an alternative - I have used the hover pseudoselector for this.
Here's a personal example:
.sidebar ul.sidebuttons li a
{
font: bold italic x-large/1.1 trebuchet ms,verdana,sans-serif;
display: block; /* effect should be in a new box not inline */
text-decoration: none; /* turn off link underlining */
color: yellow;
background: black url(sidebar_off.png) no-repeat center;
padding: 10px 10px 10px 5px;
margin: 0px 0px 20px 0px;
border: white outset;
border-width: 2px 2px 2px 0px;
text-align: right;
text-transform: lowercase;
}
.sidebar ul.sidebuttons li a:hover
{
background: yellow url(sidebar_on.png) no-repeat center;
color: black;
border: black inset;
text-decoration: none;
border-width: 2px 2px 2px 0px;
}
The HTML looks like:
<div class="sidebar">
<ul class="sidebuttons">
<li>Go Somewhere</li>
If you're having trouble, try Firefox Web Developer add-on or something similar to check the style information on that part of the page. It might not be triggering what you think it should be triggering.
<style>
.summer{ background-color:red;}
.spring{ background-color:blue;}
.aa{ font-size:18px;}
.bb{ font-size:36px;}
</style>
<div class="aa spring" onmousedown="this.className='summer aa'" onmouseup="this.className='spring bb'">
aaaaaaaaa
</div>
I test this code, it works well.
I think, not javascript problem. Try to check css, or other things.
Maybe put js code and css code on the img is what you need.
It's very easy with jQuery:
$(".winter").mouseup(function() {
$(this).addClass("spring");
$(this).removeClass("summer");
},function(){
$(this).addClass("summer");
$(this).removeClass("spring");
});
The Javascript file I was using was a very inflexible library. I solved the problem a different way.

Categories