I want to change checkbox to toggle button? There are no label tags in my input tags and I cant add them manually either, because I dont have access to core files. I can add jquery / script and or css to my files via CMS.
Here is the code i have for checkbox
<input type="Checkbox" name="savetheocean">
Is there any solution?
basically this is how you can turn it to a toggle button:
$('input[name="savetheocean"]').click(function(){
if($(this).is(':checked')){
//do something
}
else{
//undo something
}
});
UPDATE:
you can see a working Demo here: http://jsfiddle.net/b4C7G/
JSFiddle:
link
CSS:
a.toggler.on {
background: green;
cursor: pointer;
border: 2px solid black;
border-right-width: 15px;
padding: 0 5px;
border-radius: 5px;
}
a.toggler.off {
background: red;
border-right-width: 2px;
border-left-width: 15px;
}
HTML
jQuery
$(function () {
$('input[name="toggle"]').change(function () {
$("a.toggler").toggleClass("off", this.checked)
}).change();
})
Related
Hi I have created a textarea from a div using -webkit-appearnce. Now I want to add an event to this div on key press. I try my best to do this but I am not sure where I am going wrong.
Please take a look at code and let me know what wrong in this
CSS:
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 398px;
}
HTML:
<div id="input" contenteditable>I look like an input</div>
Jquery:
$('#input').unbind().on('keypress', function(e) {
if (e.which == 13) {
alert('hello');
}
});
Thanks
Have a look following snippet.
$('#input').on('keypress', function(e) {
alert('hello');
});
#input {
-moz-appearance: textfield;
-webkit-appearance: textfield;
background-color: white;
background-color: -moz-field;
border: 1px solid darkgray;
box-shadow: 1px 1px 1px 0 lightgray inset;
font: -moz-field;
font: -webkit-small-control;
margin-top: 5px;
padding: 2px 3px;
width: 398px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input" contenteditable>
I look like an input
</div>
Your code is working fine. Try to press enter so that it will alert . You are checking whether enter key is pressed if (e.which == 13) . You can remove that conditional statement for any key press.
Refer : JsFiddle
Your code works as intended when I try it in a JSFiddle. Your code will only run when you press Enter and it will create a new line below the existing text, as well as show the alert(). However, if what you intended was not to create a new line but only show a message when your user hits Enter, use this. If what you intended was to only greet the user once, use this. Finally if you wanted to never allow the user to write text but just show him the alert, use this.
So I'm making a web app using HTML, CSS, JavaScript, and AngularJS.
So far, I have a box with some content in the box. When that box is clicked, I call a javascript function to display more boxes and I did that using ng-click.
<div ng-click="!(clickEnabled)||myFunction(app)" class ="box">
*** things displyaed inside the box ***
</div>
clickEnabled's value (true or false) determines if myFunction() gets called or not and this part works perfectly. ng-click is disabled when clickEnabled is false.
Now the problem is that in my css file, I have my .box class such that the cursor is pointer when I hover over the box and background of the box also changes on hover. Is there a way to make cursor:default and make it so that it doesn't change background color of box when ng-click is disabled or when clickEnabled is false?
Here's a sample of my css code
.box {
border: 1px solid lightgray;
padding: 10px;
border-radius: 5px;
border-color: white;
box-shadow: 0 0 5px gray;
cursor: pointer;
background: #353131;
border-width: 2px;
display: inline-block;
width: 300px;
height: 150px;
}
.box:hover {
background-color: dimgrey;
border-color: grey;
}
Again, I don't want the cursor to be pointer when clickEnabled is false/ng-click is disabled.
Thanks in advance :)
You can try to use ng-class
<div ng-click="!(clickEnabled)||myFunction(app)" ng-class="{no-cursor: !clickEnabled}" class="box" >
*** things displyaed inside the box ***
</div>
.box.no-cursor {
cursor: default;
}
I'm creating a large set of HTML components that works in every browser (where did the idea started anyway :-) )
Now, I want to have a button, and according to this post on StackOverflow, I should not use a button because that one has a 3D push effect on click. In order to remove that one, the advice was to use a a href and style that to the button I like.
So here's the HTML:
<a href="#" class="button">
<span>Yes</span>
</a>
And off course, here's the HTML:
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a:active.button {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
Nothing really commplicated
Now, this does all work in Google Chrome and Firefox as this JsFiddle demonstrates.
The button has 3 different states:
A normal 'default' button.
A style when you hover on it.
A style when you click on it.
Now, Internet Explorer does not apply a new style when you click on the button, it's the same style as the one on hovering. Unless you click the border (If you manage to click the border, than the correct style does apply).
Now, why do I have this behaviour and can it be solved as it is crucial to the development of my Control Suite.
I know it's possible to solve with jQuery by adding a removing a class when you click on it, but this seems a very ugly solution and if there's a 'CSS-Friendly' solution, I would like to use that one.
This may be because the CSS selector is backwards:
Change:
a:active.button {
to
a.button:active {
Chrome et al don't appear to give a care about what order these are in, but IE is, well, IE.
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<a href="#" class="button">
<span>Yes</span>
</a>
Edit
The issue appears to be that when you click on the link, you are actually clicking the span and, in IE, the click event is not bubbling. As far as IE is concerned, the anchor is not being :activeated.
You need to take the span out of the anchor:
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<a href="#" class="button">
Yes
</a>
Edit
If you need the span, then the only solution left is a javascript one.
This block of code adds a mousedown/mouseup event listener to all .button elements which toggles the active class on/off.
// vanilla JS
var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
anchors[i].addEventListener("mousedown", function (event) {
this.classList.add('active');
}, false);
anchors[i].addEventListener("mouseup", function (event) {
this.classList.remove('active');
}, false);
}
// jQuery
jQuery(document).ready(function($) {
$('a.button').mousedown(
function(){
$(this).addClass('active');
}
)
.mouseup(
function(){
$(this).removeClass('active');
}
);
});
And we change the :active line of the css to:
a.button:active,
a.button.active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
Which listens to both the :active pseudo-class, as well as the .active class.
//pure JS solution
var anchors = document.getElementsByClassName('button');
for (var i = 0; i < anchors.length ; i++) {
anchors[i].addEventListener("mousedown", function (event) {
this.classList.add('active');
}, false);
anchors[i].addEventListener("mouseup", function (event) {
this.classList.remove('active');
}, false);
}
//jQuery solution
/*
jQuery(document).ready(function($) {
$('a.button').mousedown(
function(){
$(this).addClass('active');
}
)
.mouseup(
function(){
$(this).removeClass('active');
}
);
});
*/
a.button {
color: #444;
border: 1px solid #ababab;
cursor: default;
padding: 0 5px 0 5px;
text-decoration: none;
}
a.button:hover {
background-color: #cde6f7;
border: 1px solid #92c0e0;
}
a.button:active,
a.button.active {
background-color: #92c0e0;
border: 1px solid #2a8dd4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="button">
<span>Yes</span>
</a>
This seems to be a simple problem of priority... a.button:hover is more accurate than a:active.button so it has precedence. The reason why the browsers don't all behave exactly the same is simply because they handle ties differently.
Making sure that the different pseudo classes are always set at the same level of the selector rule will help counter this problem.
So, this means a:active.button should be switched to a.button:active or the others be switched...
You can remove push effect on button by adding a
button {
padding:0;
}
I've been trying to create expandable buttons exactly like the ones near the bottom of this site (http://mastermechanic.ca/services.php), but I've been having trouble figuring it out. I'm a beginner in JavaScript, so any help would be greatly appreciated.
HTML:
<button id="lol">Some long text</button>
CSS: #lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px}
try defining width for button...
see example JS Fiddle
#lol {color: white; font-size: 2em; background: yellow; border: 5px solid orange; border-radius: 3px; padding: 10px 20px; width: 50%;}
I have made the CSS you may need to have the exact button in the link below. I hope it helps. Cheer.
CSS:
.big {
background: #fb7303;
height: 100px;
width: 250px;
border: 5px solid #ffa500;
border-radius:10px;
color: white;
font-size: 20px;
}
HTML:
<button class="big">Schedule <br>Maintenance</button>
Fiddle link: http://jsfiddle.net/dHq74/3/
I didn't create a very detailed example, but this should set you on the right track. You can play around with it from here.
They use a combination of Jquery & Css, when the user clicks on the "Button" it adds the class "fullheight", and when the click it again, it adds a class "smallheight"
$( "#reveal-container" ).toggleClass("smallheight");
$( "#reveal-container" ).toggleClass("fullheight");
I DIDNT do this. Buy maybe you can still benefit from my example:
I just created a container DIV like they did, then use Jquery to slide it open and closed:
jQuery
$(".button").click(function () {
$button = $(this);
$content = $button.next();
$content.slideToggle(500, function () {
});
});
See FIDDLE for full example .
Hope this helps you. :)
I am having trouble working with the css and javascript for this... I have several <div> with class="item". What I want to do is change the outline of thie that triggered the action on hover.
I have this CSS:
.item {
width: 118px;
height: 98px;
float: left;
margin: 2px;
background-color: #FFF;
outline: 3px solid transparent;
}
and this javascript which i found from google
$('.item').hover( function() {
$(this).css('outline', '3px solid blue');
},
function() {
$(this).css('outline', '3px solid transparent');
});
Please help me with this...
.item:HOVER {
width: 118px;
height: 98px;
float: left;
margin: 2px;
background-color: #FFF;
outline: 3px solid blue;
}
try this...
As mentioned above, that should work fine. Additionally, you could do this without any jQuery or Javascript, with simple css:
.item:hover
{
outline: 3px solid blue;
}
http://jsfiddle.net/W4eYQ/
I don't see why you are using jquery when this can be achieved using just CSS:
Using :hover css selector :-
.item:hover{
outline-color: blue;
}
If you want the solution using jQuery only then you might be missing the following things to do: (as mentioned by johny in above comments)
wrap the code in $(function(){/*code here*/})
use .on() to attach a event. (if the element is added dynamically)
$(function(){
$('.item').on('hover', function() {
$(this).css('outline', '3px solid blue');
},
function() {
$(this).css('outline', '3px solid transparent');
});
});
I would suggest you use jquery's selectable $(".item-list'").selectable(); instead of re-inventing the wheel.
Like this
script
$(function(){
$('.item').hover(
function(){
$(this).addClass('hovered');
},
function(){
$(this).removeClass('hovered');
}
);
});
Try this css this will work fine
.item:hover {
outline: 3px solid blue;
}