I have following HTML snippet for a button:
HTML:
<div class="Clear" title="Clear">
<div class="ClearButton">
<button id="reset" type="reset" title="Clear Photos"></button>
</div>
<div class="ClearText">
Clear
</div>
</div>
CSS:
div.ClearButton
{
vertical-align: top;
display: inline-block;
background: url(../CustomControl/buttons.png?ver=365321878) no-repeat scroll -343px -443px rgba(0, 0, 0, 0);
height: 16px;
overflow: hidden;
width: 16px;
}
div.Clear
{
vertical-align: top;
display: inline-block;
overflow: hidden;
cursor: pointer;
padding-left: 2px;
padding-bottom: 6px;
padding-right: 6px;
padding-top: 4px;
}
On a certain event, I need to disable this button completely. I tried with the following code, but it does not disable/gray out the button and it's still clickable.
var resetBtn = document.getElementById("reset");
resetBtn.disabled = true;
As someone suggested that the CSS I have applied is causing this issue. Please suggest how can I make this button non-clickable.
Use :
resetBtn.disabled = "disabled";
This works in all browsers -> http://jsfiddle.net/fMV4B/
Using Only CSS:
//CSS
.no-click {pointer-events: none;}
<input class="no-click" />
You can do it with the method : setAttribute()
Your js will be like that :
document.getElementById("reset").setAttribute('disabled','disabled');
This JSFiddle shows it working, based on this: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_disabled. It could be that it's not working as expected because your CSS is making it visually appear different. Remove you CSS first to make sure the JavaScript it working as expected.
Here's the code for the JSFiddle:
<button type="button" id="test">Click Me!</button>
<script>
document.getElementById("test").disabled = true;
</script>
Do you have an example of when your JavaScript is running?
Have you read through this answer or tried
https://stackoverflow.com/a/3014678/2992661
resetBtn.setAttribute('disabled', 'disabled');
Your code works fine.
The problem is almost certainly that the JavaScript code is either not being called at all or is being called in the wrong spot.
If you run this code immediately, make sure that the DOM is loaded (window.onload callback, or preferably have your JS code right before </body>).
Otherwise just make sure that any event that runs the JS code is actually firing.
Try this code:
To disable the submit button with jQuery, you just need to add a “disabled” attribute to the submit button.
$('#buttonId').click(function(){
$('#buttonId').attr("disabled", true);
});
To enable back the disabled submit button, set the “disabled” attribute to false, or remove the “disabled” attribute:
$('#buttonId').attr("disabled", false);
or
$('#buttonId').removeAttr("disabled");
Related
I have some jquery that will, when a button is clicked, switch a class from a button to a different class (i.e. on click switch class from #testButton from .first to .second with an image toggle to show it works). The first click works well and it toggles the image, but the second click does not do anything. It seems as if it is not recognizing the new class. Here is a fiddle.
https://jsfiddle.net/myfb44yu/
This is the problematic javascript.
$(document).ready(function(){
$('.first').click(function(){
alert('works');
$('#testButton').toggleClass('first', 'second');
});
$('.second').click(function(){
alert("works");
$('#testButton').toggleClass('second', 'first');
});
});
The interesting thing is that it works when I use an alert() to check but not when I try to change an img src.
Your main issue here is a syntax error in regards to your .toggleClass, but seeing as others have addressed that, I'd like to point out that you should consider re-thinking how you apply your listeners - just as good habit moving forward.
An overview of jQuery Event Bindings
Think of the elements on your page as items in a store. You're an employee, and your manager says "Go put a red tag on anything in the toys department", and so you do. The next day, he puts 10 new toys in the toy department, and says to you "Why don't all the toys have red tags on them?" He then moves one of the toys to the clothing section and asks you, "Why does this item have a red tag on it?" It's simple. You put the red tags on anything in the toys department when he told you to do it - things got moved around afterwards.
The toys in this example would be your .first and .second elements.
This is how jQuery event bindings work - they only apply to elements that satisfied the selector at the time the event was initialized.
So, if you do $('.myClass').click();, then put .myClass on five buttons - none of those buttons will call this function, as they didn't have listeners put on them.
Similarly, if you put a listener on an element using class, but then remove the class from that element, it will maintain the bound event.
The Solution
$(document).on("click", ".first", function() { } );
This is known as event delegation.
In continuing with my analogy from before, this would be the equivalent of skipping tagging the items altogether, and instead just deciding whether or not they're a toy when the customer brings them to the cash register.
Instead of putting the listener on specific elements, we've put it on the entire page. By using ".first" as the second parameter (which takes a selector), the function will only be executed if the element has class first.
Hope this helps.
EDIT: As I was typing, JHecht left a good answer that points out the same issue I outlined above.
N number of elements can have the same class name ,so that's the reason if your trying to search it as $('.classname') returns an array ,so that's the reason your code is not working.class selector
Id is unique,each element should have a single id . In your code button has two id's and for the same button your trying to toggle first and second,you need not have two separate events for first and second
instead you can write as following
check this snippet
$(document).ready(function() {
var firstElements = $('.first')
var first = firstElements[0];
var secondElements = $('.second');
var second = secondElements[0]
$("#testButton").click(function() {
alert('works');
$(this).toggleClass('first').toggleClass('second');
});
});
.first {
color: red;
}
.second {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="img/images.jpeg" alt="" id="testImage">
<div id="testDiv">
<button type="button" id='testButton' class='first'>Hi</button>
</div>
Hope it helps
Ho about this solution. Hope it helps!
$(document).ready(function(){
$("#testButton").click(function(){
if($(this).prop("class") === "first"){
alert('first');
$(this).removeClass("first").addClass("second");
}
else if($(this).prop("class") === "second"){
alert("second");
$(this).removeClass("second").addClass("first");
}
});
});
.first{
color: red;
}
.second{
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img src="img/images.jpeg" alt="" id="testImage">
<div id="testDiv">
<button type="button" id='testButton' class='first'>Hi</button>
</div>
I hope that what I am about to say makes more sense than I feel it does.
Your issue is that when you assign the click events, there is not currently an element that has a class of .second.
Also, your code is wrong. toggleClass accepts a few arguments, the first is a string of classes, the second is an optional parameter to check whether or not to toggle the classes on or off.
A way to accomplish what you want without changing a whole lot of code is event delegation, shown below.
$(function() {
$(document).on('click', '.btn-first,.btn-second', function() {
//here we are adding the click event on the document object, and telling it that we only want to delegate this event to an object that matches the classes of .btn-first or .btn-second.
//Note: to those saying "why not just do it on the .btn class an avoid having to do this", it is so he can see what delegation looks like. But you are correct, with this markup it would be better to simply add the click event on the .btn class.
$(this).toggleClass('btn-first btn-second');
});
});
.btn {
padding: 4px 8px;
border-radius: 3px;
border: 1px solid grey;
}
.btn-first {
background-color: green;
border-color: green;
}
.btn-second {
background-color: orange;
border-color: orange
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="img/images.jpeg" alt="" id="testImage">
<div id="testDiv">
<button type="button" id='testButton' class='btn btn-first'>Hi</button>
</div>
A combination of javascript, CSS and HTML to toggle the class of #testButton when any element of class "first" or "second" is clicked, including the test button itself. The posted code was changed to supply JQuery's .toggleClass method with a space separated list of class names. Click "run snippet" to test the effect.
$(document).ready(function(){
$('.first').click(function(){
$('#testButton').toggleClass('first second');
});
$('.second').click(function(){
$('#testButton').toggleClass('first second');
});
});
.first { border: thick outset green;}
.second { border: thick inset red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="first">This paragraph has first class</p>
<p class="second">This paragraph has second class</p>
<button type="button" id="testButton" class="first">this button starts out first class</div>
The script can then be simplified by combining multiple class names in a single selector, leaving just:
$(document).ready(function(){
$('.first, .second').click(function(){
$('#testButton').toggleClass('first second');
});
});
Make a neutral class that the buttons both share (.btn).
Then add one of the state classes to each button (.first or .second).
Delegate the click event to the neutral class only ($('.btn').on('click',...).
Then toggle both state classes on this ($(this).toggleClass('first second');)
The images change by CSS, each button has 2 images which alternate between display:none/block according to the button's state class.
There is an example with the images outside of buttons and another example that doesn't toggle classes around.
SNIPPET
$('.btn').on('click', function() {
$(this).toggleClass('first second');
});
/* OR */
$('.alt').on('click', function() {
$('.img').toggle();
});
.first > .one {
display: block;
}
.first > .two {
display: none;
}
.second > .one {
display: none;
}
.second > .two {
display: block;
}
.first + .one {
display: block;
}
.first + .one + .two {
display: none;
}
.second + .one {
display: none;
}
.second + .one + .two {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Use jQuery with CSS</p>
<button class='btn first'>
<img src='http://placehold.it/50x50/000/fff?text=1' class='one'>
<img src='http://placehold.it/50x50/fff/000?text=2' class='two'>
</button>
<button class='btn second'>
<img src='http://placehold.it/50x50/0e0/960?text=1' class='one'>
<img src='http://placehold.it/50x50/fff/000?text=2' class='two'>
</button>
<br/>
<br/>
<button class='btn first'>Toggle</button>
<img src='http://placehold.it/50x50/fc0/00f?text=1' class='one'>
<img src='http://placehold.it/50x50/00f/fc0?text=2' class='two'>
<button class='btn second'>Toggle</button>
<img src='http://placehold.it/50x50/fc0/00f?text=1' class='one'>
<img src='http://placehold.it/50x50/00f/fc0?text=2' class='two'>
<p>Or use only jQuery no CSS</p>
<img src='http://placehold.it/50x50/0e0/930?text=1' class='img'>
<img src='http://placehold.it/50x50/930/0e0?text=2' class='img' style='display:none'>
<button class='alt' style='display:block;'>Toggle</button>
So I don't get why this isn't working. I want to show a Div when another div has a value. I got this code from stackoverflow and it's pretty simple. But it doesn't work for me. No console errors..
$(document).ready(function(){
if ($(".txt").html().length > 0) {
$('.btn-01').show();
}
});
If the html value of .txt is larger then 0 then show btn-01.
But it doesn't. In my web inspector it just says:
<div style="display: block;" class="btn-01"><p>Things</p></div>
If I remove the script it says:
<div class="btn-01"><p>Things</p></div>
So it does do something. I tried changing the show to hide. But no go.
<div style="display: none;" class="btn-01"><p>Things</p></div>
I tried:
$(document).ready(function(){
if ($(".txt").html().length > 0) {
$('.btn-01').addClass('showme);
}
});
btn-01 css:
.btn-01 {
background: #f60;
color: #fff;
border-radius: 2px;
padding: 5px;
text-align: center;
margin: 40px auto 0px auto;
width: 90%;
}
But that didn't work either. Does anyone know whats going on here?
Maybe I should work with an else statement? Help would be much appreciated.
JsFiddle
You need to either set the button to display none prior to the window loading or add an "else" statement to hide the element:
.btn-01{
display:none;
}
OR
$(document).ready(function(){
if ($(".txt").html().length > 0) {
$('.btn-01').show();
}
else
{
$('.btn-01').hide();
}
});
See the fiddle: https://jsfiddle.net/r89gg7tp/
IMPORTANT TO CONSIDER
If you have entered a line break between the starting and closing tags of the element, this will add to the length. You need to set the txt div to be in the following format:
<div class='txt'></div>
It may be better to change your function to this:
$(document).ready(function(){
if ($(".txt").html().trim(' ').length > 0) {
$('.btn-01').show();
} else {
$('.btn-01').hide();
}
});
This way you trim the whitespace before checking.
See the second fiddle: https://jsfiddle.net/r89gg7tp/3/
You need to hide the btn-01 with a "display:none" in the stylesheet and then execute your script.
I think you are having a "display:none !important" which is overriding the jquery show() function inline style.
This might help you.
$(document).ready(function(){
if (!$.trim($(".txt").html())){
$('.btn-01').addClass('showme');
}
});
Please let me know if you've any queries.
You can use .contents() with .toggle():
$(document).ready(function() {
$('.btn-01').toggle($(".txt").contents().length > 0);
});
.btn-01{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="txt">
<h3>Things Title</h3>
</div>
<div class="btn-01">
<p>Things</p>
</div>
You guys where all right. I needed to place the code in some Session file (Ajax). Now its working with the original code and even some that you provide.
Thanks!
Does anyone knows a javascript only way to open the browser-standard colorpicker, without using a html field? so i want a javascript what does exactly the same a a click on the html input color field.
Bart
You are going to have to use the input field, you can just hide it off the page. Issue here is the fact that the color dialog requires a click in browsers in order to open up the color dialog. It will not work if you just call click()
document.getElementById("xxx").addEventListener("click", function() {
document.getElementById("c").focus();
document.getElementById("c").value = "#FFCC00";
document.getElementById("c").click();
});
.hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
<input type="color" id="c" tabindex=-1 class="hidden">
<input type="button" id="xxx" value="Click Me!">
Here's a good old "hover-hack" solution that works even in MS Edge:
<input type="color" style='opacity:0;width:100px;position:absolute;'/>
<button>clickme</button>
then bind onchange to the colro element
https://jsfiddle.net/Lnzm0sry/2/
I'm trying to change the text and color of a button when the user clicks it.
I am trying to change the text from "Search" to "Close".
I have attempted to code it, and have posted what I tried in jsfiddle.
now another problem is I can't figure out why jsfiddle isn't running the code, haha, but maybe someone can figure it out regardless of the jsfiddle glitches.
Without further ado, my code...
HTML:
<form>
<p>
<button class="btn submit" type="submit" onClick="changeHeight();">Search</button>
<button class="btn cancel" onClick="changeHeight2();">Reset</button>
<div id="SearchDiv">Here I am</div>
</p>
</form>
CSS
p{
text-align:center;
background-color: rgb(222,222,222);
}
.btn{
margin-top:10px;
margin-bottom:10px;
font-size: 22px;
color:rgb(255,255,255);
width: 150px;
height: 60px;
outline: none;
border-radius:5px;
border:0;
}
.submit{
background-color: rgb(44,228,191);
}
.submit:hover{
background-color: rgb(24, 188, 156)!important;
}
.submit:active{
background-color: rgb(15,121,100)!important;
}
.cancel{
background-color: rgb(244,123,130);
}
.cancel:hover{
background-color: rgb(237,28,36)!important;
}
.cancel:active{
background-color: rgb(154,12,19)!important;
}
#SearchDiv {
background-color:purple;
height:50px;
display:none;
}
JS
function changeHeight() {
$('#SearchDiv').fadeIn(500);
}
function changeHeight2() {
$('#SearchDiv').fadeOut(200);
}
http://jsfiddle.net/fdkzp9dm/8/
You have a couple of things you need to change:
You need to change the fiddle from onload to No wrap in <body> as #Shaunak correctly commented.
You need to pass the element if you're not selecting it in the function. So you either do onClick="changeHeight($(this))" or inside the JS function you do $(el).
You need to check for el.text() == "Search" and to set using el.text("Close"), since you're checking the text inside and not a value attribute if you're doing el.value (that returns undefined for your example).
The last glitch is because the button is of type submit, and whenever clicking it the request failed and it overwritten the HTML.
So, basically:
function changeHeight(el) {
$('#SearchDiv').fadeToggle(500);
if (el.text()=="Search") {
el.text("Close");
}
else {
el.text("Search");
}
}
Fiddle
Using thecss and the text jquery's attributes will do the work:
$(document).ready(function() {
$('#button_id').click(function(){
$(this).text('another text')
$(this).css('height', '100px')
})
})
Here's a demo
Change your button like:
<button class="btn submit" type="submit" onClick="changeHeight($(this), $('#SearchDiv'));">Search</button>
Change your javascript function like so:
function changeHeight(btn, div)
{
if (div.is(":visible") )
{
btn.val("Search").css("color", "#ffffff"); // Color: White
div.fadeOut(500);
}
else
{
btn.val("Close").css("color", "#000000"); // Color: Black
div.fadeIn(500);
}
}
When I have a file upload field,
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
</form>
http://jsfiddle.net/jakeaustin5574/6DzgU/
It automatically creates a text "No file chosen" and a "Browse" button.
I want to change or remove this "No file chosen" text.
Is there anyway to achieve this in css or Javascript?
Thanks
You can apply css rules like...
input[type=file]{
color:transparent;
}
First of all. You have to hide your input:
input#image{position:fixed;top:-100px;}
Secondly, you have to create alternative button with your skin:
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
<button id="image_alt">Select image</button>
</form>
and the last step is to create a javascript script which link alternative button with original one:
document.getElementById('image_alt').addEventListener('click',function(){
document.getElementById('image').click();
});
Example Fiddle
You can set the value of the image input to "" using jQuery to remove the selected file:
$("#image").val("")
See this fiddle:
http://jsfiddle.net/nfvR9/1/
NOTE: This is dependent on browser used. It's works in FF 22 and Chrome 29.
I am sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). check this styling article
HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
take a look of this fiddle:
its working for your needs.
FIDDLE - DEMO
this demo its a reference of this:
stackoverflow question LINK
From the autor:ampersandre
<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;height: 24px;overflow:hidden;">
<img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" alt="" title="Add Attachment" style="height:24px;width:24px; position: relative;top: 1px; left: -3px;"/>
<input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0); position: relative; top: -25px; left: -1px" />
</div>
JQuery:
function getFileName() {
var varfile = $('#fileupload').val().replace(/.*(\/|\\)/, '');
$("#filename").text(varfile);
}
$("#fileupload").on('change', function() {
getFileName();
});
Demo:
http://jsfiddle.net/m44fp2yd/
$(function () {
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css('color', '#333');
}else{
$(this).css('color', 'transparent');
}
});
})
input[type="file"]{
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">
The No file chosen text is entirely dependent on the browsers rendering engine - I assume you use Chrome. If Firefox you'll see No file selected and in IE you'll get a greyed out textbox with no value at all. This cannot be changed.
The alternative is to use a plugin (such as this) which gives you complete control over the styling of the file control.
It's up to the browser to render the file upload box. Each one does this in your own way. For example, in my chrome I can see the No file chosen text. Someone using Firefox might see something else entirely. There is no direct way to control this rendering process.
However, there are some hacks which can be used. For details, check out this link.
this text show by browser different browser show different message
chrome show=no file choosen
mozilla show=no file selected
and same as ie