Using the following code I can change the name of the button when user hovers over it. Is there a way to change the button's name with its id when user hovers over it (using JavaScript)?
.button:hover span {
display: none
}
.button:hover:before {
content: "New name";
}
.button:hover {
background-color: #aaaaaa;
}
<button class="button" id="some_id">
<span>old name</span>
</button>
You can use attr(id). See the documentation for further information.
.button:hover span {
display: none
}
.button:hover:before {
content: attr(id);
}
.button:hover {
background-color: #aaaaaa;
}
<button class="button" id="some_id">
<span>old name</span>
</button>
Here's one that changes things back...
onmouseover="this.innerHTML=this.id;"
onmouseout="this.id=this.innerHTML; this.innerHTML='old name';"
Just add these events to the button.
Quite easy actually...
onmouseover="this.innerHTML=this.id;"
Just add this event to the button.
Related
I have textarea with a static content. So I disabled the textarea to prevent any modification in the content. But I want to modify some part of this content. How can I do this ?
I have created a select box as follows :
<div class="scroll-inside">
<?php if($transactionalTemplates->num_rows() > 0) {
foreach($transactionalTemplates->result_array() as $template) { ?>
<a href="#" class="transactionalTemplate" data-text="<?php echo $template['TemplateText']?>">
<?php echo $template['TemplateText'];?>
</a>
<?php }
}
?>
</div>
When I select an item, the selected item will pasted to the following textarea
<textarea placeholder="Enter your message here.." maxlength="160" class="messageTransactional" name="messageTransactional" id="messageTransactionalEnglish"></textarea>
here is my script code:
$('.transactionalTemplate').click(function() {
$('.messageTransactional').val($(this).data('text'));
flag = true;
$('.messageTransactional').keypress(function(e) {
e.preventDefault();
});
});
After adding the content to textarea, I prevent typing new content using the above function.
here is an example:
Suppose Dear (123), thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call (123) is my content.
I need to edit this content as Dear John, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call 91xxxxxxxx
Which means, I need to change the content in paranthesis, keeping the format static.
I would highly suggest not using a textarea. There is no real way to stop that. You would need to do it yourself and try to catch every possibility to change that.
Instead, a simple text-input usually looks the best.
Alternatively, if it has to be seamless, you can use a contenteditable span, like this:
Dear <span contenteditable="true">(please enter your name here)</span>, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call <span contenteditable="true">(please enter your tel. number here)</span>
I was bored so did a pretty cool solution, it's not perfect though and still needs work for production.
const $editable = $('.editable')
const $inputs = $('.input')
const $save = $('#save')
const popup = function(e) {
const $this = $(this)
$this
.find('input')
.addClass('active')
.focus()
}
const onBlur = function(e) {
const $this = $(this)
const $parent = $this.parent()
const value = $this.val()
$parent.find('input')
.removeClass('active')
if (value) {
$parent
.find('.value')
.text($this.val())
}
}
const onSave = function(e) {
const $pre = $('pre')
console.log('save', $pre.text())
}
$editable.on('click', popup)
$inputs.on('blur', onBlur)
$save.on('click', onSave)
body {
padding: 1em;
}
pre {
white-space: normal;
font-family: sans-serif;
}
.editable {
border-bottom: 1px dotted #3cf;
color: #3cf;
min-width: 1em;
min-height: 1em;
position: relative;
}
.editable input {
position: absolute;
width: 80px;
transform: translate(-70px, 0%);
border: 1px solid #aaa;
padding: .5em;
border-radius: 5px;
text-align: center;
opacity: 0;
visibility: hidden;
transition: .4s opacity ease, .4s transform;
}
.editable input:focus,
.editable input.active {
transform: translate(-70px, -100%);
opacity: 1;
visibility: visible;
outline: none;
}
.editable:focus {
outline: none;
}
.button {
float: right;
padding: .5em 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name="messageTransactional" />
<pre id=="messageTransactional">
Dear <span class="editable" id="name"><span class="value">name</span><input type="text" class="input" /></span>, thanks for registering with us. Please subscribe our new offer to send unlimited SMS. For details please call <span class="editable" id="phone"><span class="value">phone</span><input type="text" class="input" /></span> is my content.
</pre>
<button id="save" class="button">save</button>
I have many different buttons that fires different functions. In this example, I created total of 3 buttons, each firing a different function. The reason I want to stay away from using a radio buttons itself is because at some point in time, two buttons must be active.
For this example, what I want to do is, when a button is active: for example, Apple button is active and it fires a function, Banana and pear button should be not active and not fire its functions and vice versa (Also, active button should be shaded in a different color)
How can I accomplish this? Here is my code so far:
$(document).ready(function() {
$('#AppleBTN').click(function() {
apple();
if ($(this).hasClass('active')) {}
$(this).toggleClass('active');
});
$('#BananaBTN').click(function() {
banana();
if ($(this).hasClass('active')) {}
$(this).toggleClass('active');
});
$('#PearBTN').click(function() {
pear();
if ($(this).hasClass('active')) {}
$(this).toggleClass('active');
});
});
function apple() {
alert('apple');
}
function banana() {
alert('banana');
}
function pear() {
alert('pear');
}
.btn {
background: #3498db;
border-radius: 0px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 2px 2px 2px 2px;
text-decoration: none;
height: 30px;
width: 70px;
}
.btn.active,
.btn:active {
background: #124364;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="AppleBTN">Apple</button>
<button type="button" class="btn" id="BananaBTN">Banana</button>
<button type="button" class="btn" id="PearBTN">Pear</button>
I feel that, for each different button function, I need to create a class of 'inactive'. Also, I've been trying to look up to see if there is a .toggleClass('inactive') or .inactive but failed to find the right answer.
jsFiddle
Description
Basically this will iterate over all buttons in the div with class of btns it will then remove the class active from all buttons. From here it will add the active css class to the button clicked.
HTML
<div class="btns">
<button type="button" class="btn" id="AppleBTN">Apple</button>
<button type="button" class="btn" id="BananaBTN">Banana</button>
<button type="button" class="btn" id="PearBTN">Pear</button>
</div>
JS
$(document).ready(function() {
$('.btn').click(function() {
$('.btns > button').removeClass('active');
$(this).addClass('active');
// if you need to call a function you can pull any attribute of the button input
});
});
Make use of your .btn selector to target all three buttons, e.g. $('.btn'). Which is more maintainable than having to declare click event for each id.
$(document).ready(function() {
$('.btn').click(function() {
// remove active class except for the selected button
$('.btn').not(this).removeClass('active');
$(this).toggleClass('active');
// get the id of the button element
var id = $(this).attr("id");
if (id == "AppleBTN")
appleFunction();
else if (id == "BananaBTN")
bananaFunction();
else if (id == "PearBTN")
pearFunction();
});
});
Your different functions :
function appleFunction() {
alert("apple!");
}
function bananaFunction() {
alert("banana!");
}
function pearFunction() {
alert("pear!");
}
Fiddle
You can accomplish this with few lines of code. Attach a click event handler using .on(). Inside the event, remove the class active from any button it may currently be on using .removeClass(). Then add the active class to the current selection using .addClass().
$(function () {
$('.btn').on('click', function () {
$('.btn').removeClass('active');
$(this).addClass('active');
});
});
.btn {
background: #3498db;
border-radius: 0;
font-family: Arial;
color: #fff;
font-size: 12px;
padding: 2px;
text-decoration: none;
height: 30px;
width: 70px;
}
.btn.active, .btn:active {
background: #124364;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="AppleBTN">Apple</button>
<button type="button" class="btn" id="BananaBTN">Banana</button>
<button type="button" class="btn" id="PearBTN">Pear</button>
Note: I've simplified some of your CSS as well in the above example. When specifying a color where the three sets of hex digits are the same, you can specify one character for each of the three parts (i.e. #ffffff became #fff). In addition, when specifying a value of 0 there is no need to specify a unit so border-radius: 0px became border-radius: 0. Finally, when all of your padding values are the same such as padding: 2px 2px 2px 2px; you can simplify this to padding: 2px;.
I'd personally drop the jQ fanciness and class assignment and just go native.
HTML Sample:
<input type="radio" id="_set1_allclear" disabled hidden name="_set1" />
<input type="radio" disabled hidden name="_set1" />
<button type="button" onclick="if(document.getElementById('_set1_allclear').checked){ this.previousElementSibling.checked=true; callApple();}">Apple</button>
<input type="radio" disabled hidden name="_set1" />
<button type="button" onclick="if(document.getElementById('_set1_allclear').checked){ this.previousElementSibling.checked=true; callOrange();}">Orange</button>
From there, you can style the buttons via this CSS:
button { /*default button style*/ }
#_set1_allclear ~ button { /*inactive button style*/ }
:checked + button { /*active button style*/ }
All you have to do to full get this setup to work is add at the end of each of your callFruit() functions a document.getElementById('_set1_allclear').checked=true;
You could also throw that into the onclicks if you wanted to.
EDIT: Forgot to actually lock, rather than just providing the lock-trading mechanism. Woops.
My idea is to show an image on a map as soon as I press a button. I would like to change the colour of the button after it has been clicked and it should stay that colour until I deselect the button. The colour of the button should then change back to its original colour.
Here is the code for the button:
<button type="button" class="Button" id="tram7" class="deselected"> Tramlinie 7 </button>
And here is the function that inserts an image to the map:
$('#tram7')[0].onclick = function() {
if (overlayTram7.getMap() == map) {
$('#tram7').addClass('deselected');
overlayTram7.setMap(null);
} else {
$('#tram7').removeClass('deselected');
overlayTram7.setMap(map);
}
};
The style change worked with a hover, but I don't know how to change the style of a clicked button.
.Button {
font-family: Calibri, sans-serif;
font-size:13px;
font-weight: bold;
width: 160px;
height: 25px;
background:grey;
color: white
}
.Button:hover {
color: white;
background:green
}
Thanks in advance.
Your question isn't too clear for me. Are you wanting to change the color ONLY while the user is clicking on the button? If so, that's pretty easy, just with CSS:
You'll want the psuedo-selector, :active
.Button:active {
color: white;
background:green
}
Here is an example
Update: You clarified that you want the button's color to be changed after being clicked. Essentially acting like a toggle. Luckily JQuery has a simple solution for you: toggleClass()
Updated example using toggleClass()
The :active pseudo-selector should be what you're looking for
.Button:active {
color: white;
background:red;
}
Use toggleClass in your click callback to add/remove a class which will style your button:
$('#tram7').toggleClass('clicked');
And the class:
.Button.clicked {
color: white;
background:blue
}
http://jsfiddle.net/5m9h6/1/
When clicking the "see more" the text does not expand. How come? Thanks
HTML:
<div id="wrap">
<h1>Show/Hide Content</h1>
<p>
This example shows you how to create a show/hide container using a
couple of links, a div, a few lines of CSS, and some JavaScript to
manipulate our CSS. Just click on the "see more" link at the end of
this paragraph to see the technique in action, and be sure to view the
source to see how it all works together.
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">
See more.
</a>
</p>
<div id="example" class="more">
<p>
Congratulations! You've found the magic hidden text! Clicking the
link below will hide this content again.
</p>
<p>
<a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">
Hide this content.
</a>
</p>
</div>
</div>
Javascript:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID).style.display != 'none') {
document.getElementById(shID).style.display = 'none';
}
else {
document.getElementById(shID).style.display = 'block';
}
}
}
CSS:
body {
font-size: 62.5%;
background-color: #777;
}
#wrap {
font: 1.3em/1.3 Arial, Helvetica, sans-serif;
width: 30em;
margin: 0 auto;
padding: 1em;
background-color: #fff;
}
h1 {
font-size: 200%;
}
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
Live DEMO
You're calling showHide from the HTML window, but showHide hasn't been defined yet. Just include the showHide function in a <script> block in the HTML window, and it will work. See my jsfiddle: http://jsfiddle.net/HGbSX/1/
The additional problem with having to click twice to show the additional content has to do with your logic. The first time you come through, the display for that element is not set to none as you expect, but to an empty string, so it's re-hiding it. You can correct this by reversing your logic, and looking for display='block'. See my jsfiddle: http://jsfiddle.net/HGbSX/2/
I have corrected a small bug that it needs 2 clicks to start the functioning. Just replaced != 'none' has been replaced with == 'block'. Also, in JSFiddle, you had chosen wrong setting under the 'choose framework'. It should have been 'head no wrap'.
http://jsfiddle.net/EMEL6/12/
Also a very simple way to achieve the same:
function showHide() {
$('#example').toggle();
}
The code is correct; the reason it is not working is because the way you have the jsfiddle set up. On the right side where it asks for a framework/where you want your JS to show up, you have jQuery and onLoad (the defaults, I believe) - this makes it so that the resulting code of your fiddle looks like this:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID).style.display != 'none') {
document.getElementById(shID).style.display = 'none';
}
else {
document.getElementById(shID).style.display = 'block';
}
}
}
});//]]>
Which means you are defining showHide within the anonymous function of jQuery's load event. If you change the first dropdown to 'no wrap (head)' it will leave your JavaScript alone and your onclick will be able to see the function as defined.
Is there any way to get a checkbox inside a button?
At the moment I have this solution:
<html>
<body>
<div id="menu">
<button><input type="checkbox" /></button>
</div>
</body>
</html>
It's ok, it works fine with Chrome and Firefox...but really awful with IE, so I need another way to achieve this goal.
Any ideas?
Thanks
I think its not a valid mark up to place a checkbox within a button. It would be better to replace the button with span or div and apply some CSS to span or div to make look like button and apply click event to that and change the checkbox state.
Just an example for you
I'm not entirely sure what you're trying to achieve here, so please forgive me if my answer isn't what you were looking for. If you want a button which changes the state of a checkbox, then #thecodeparadox's answer should work great, however if you're looking for a button which performs a function but also has a checkbox inside of it which can be toggled, you might want something like the following:
HTML:
<div id="button" href="#">
<input type="checkbox" class="check">Submit
</div>
CSS:
body {
margin: 10px;
}
#button {
display: inline-block;
background: #ddd;
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: underline;
color: blue;
cursor: pointer;
}
.check {
display: inline-block;
margin-right: 10px;
}
jQuery:
$('#button').on('click', function() {
window.location = '#';
})
http://jsfiddle.net/QStkd/278/
It's not valid markup but you can cheat IE with jquery -
<button>hi</button>
$('button').prepend('<input type="checkbox" />');
Demo: http://jsfiddle.net/Gg9fG/