change text of button when i click it. when i click on the button if it show make it hide .
$(function () {
if ($(".clickMe").text() == 'show') {
$(".clickMe").text("hide")
}
else {
$(".clickMe").text("show")
}
});
ShowDetials
Bind an event to it first, i meant a click event
$(".clickMe").click(function(){
$(this).text($(this).text() == "show" ? "hide" : "show");
});
DEMO
Change your code to this
Html
show
Script
$(function () {
$('.clickMe').click(function(){
$(this).text($(this).text() == "show" ? "hide" : "show");
});
});
Demo
It's better to apply some attribute (like class) to indicate state of button. Also, when you click on link, browser will follow it, prevent that (if needed effect). And your function is fired only once when everything is loaded, but not when clicking element. Bind click event to element:
$(document).ready(function() {
$(".btn").click(function(e) {
e.preventDefault(); // prevent from following link.
if ($(this).hasClass('active')) {
$(this)
.removeClass('active')
.text('Show Details');
} else {
$(this)
.addClass('active')
.text('Hide Details');
}
});
});
.btn {
text-decoration: none;
border: 1px solid green;
padding: 5px 10px;
font-weight: bold;
color: #454545;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Show Details
All purpose function
HTML part
<button type="submit" onclick="changeText(this,'Checking.. Please wait...')">Login</button>
JS part
// function to change text
function changeText(ref,text){
ref.innerHTML = text;
}
Related
I want to edit the rendering of an element when hovering. To achieve this, I created a button and I want the first click to set the hover rendering and the second click to reset the hover rendering. Currently, the hover style appears even when I'm not on the div:
$("#editer-script").click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.contenu-editable').mouseover(function(){
$('.contenu-editable').css("background-color", "transparent");
$('.contenu-editable .fa.fa-pencil').css("display", "none");
});
$("#editer-script").text('Rendre éditable');
} else {
$('.contenu-editable').mouseover(function(){
$('.contenu-editable').css("background-color", "#f4f6f9");
$('.contenu-editable .fa.fa-pencil').css("display", "inline-block");
});
$("#editer-script").text('Ne pas rendre éditable');
}
$(this).data("clicks", !clicks);
});
Thank you in advance for your help.
I would use two different css classes. One default and one for the change of the hover effects. And then just toggle the second class on click of the button element.
It's mutch easier than try to do it your way and it could be easily changed and extended just in css. No need to touch the script in the future.
$("#editer-script").click(function() {
var clicks = $(this).data('clicks');
$('.contenu-editable').toggleClass('special', !clicks);
$("#editer-script").text(clicks ? 'Rendre éditable' : 'Ne pas rendre éditable');
$(this).data("clicks", !clicks);
});
.contenu-editable:hover {
background-color: transparent;
}
.contenu-editable:hover .fa.fa-pencil {
display: none;
}
.contenu-editable.special:hover {
background-color: #f4f6f9;
}
.contenu-editable.special:hover .fa.fa-pencil {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="editer-script">Rendre éditable</button>
<div class="contenu-editable">
<i class="fa fa-pencil">pencil</i>
content
</div>
I have an a in a div and want to change the window location on click of div.
<div class="div-class">
</div>
$(document).on("click", ".div-class:not(.a-class, .a-class-2)", function() {
window.location = "/somewhere-else";
}
When clicking on either a, a new tab opens and the current window changes location. I want it to be that if you click on any a it will open a new tab, if you click on the containing div it will change window location.
To achieve this you can hook to the a elements directly and call stopPropagation() on the event passed to the handler. This will stop the event bubbling to the div and will ensure only the new tab is opened.
Similarly, you can hook to the click event of the div element to call window.location.assign() to change the page URL. Try this:
$(document).on("click", ".a-class, .a-class-2", function(e) {
e.stopPropagation();
console.log('a clicked');
}).on('click', '.div-class', function() {
console.log('div clicked');
// location.assign("/somewhere-else"); // commented out to stop breaking the snippet
});
/* this is only to make the hit areas more obvious in the snippet */
a { border: 1px solid #C00; }
div { border: 1px solid #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-class">
a-class
a-class-2
</div>
Rory's answer works, but I don't think it needs two handlers or to call stopPropagation (which can be harmful). You can filter on the event target using jQuery.is
$(document).on("click", ".div-class", function(event) {
if (!$(event.target).is(".a-class, .a-class-2")) {
console.log("going /somewhere-else");
}
// You could also do
if( $(event.target).is(".div-class") ) {
console.log("going /somewhere-else v2");
}
});
a { background-color: #eee; }
div { border: 1px solid #0C0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-class">
link 1
link 2
</div>
I have this code which makes a div to display as none when anywhere outside the div is clicked. But my problem is I also want the link which makes the div to display block to also close the div if the div is displayed as block so I ran this code:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
window.addEventListener('mouseup', function(event){
if(event.target != box && event.target.parentNode != box){
box.style.display='none';
}
});
}
}
But the link does not close the div. if I run it like this:
function show_div(x){
var box = document.getElementById(x);
if(box.style.display=='block'){
box.style.display='none';
} else {
box.style.display='block';
}
}
The link opens and closes the div, But I also want a click anywhere outside the div to close the div also. Please do anyone have a better Idea on how I can achieve this? Here is my HTML:
<a onclick="show_div('divd')" href="javascript:;">click</a>
<div id="divd">this is the div</div>
As Portal_Zii said, you'll probably need a wrapper/container for your div to hide it, but this example should give you a basic idea.
$(document).ready(function() {
var $div = $("#divd");
$("a").on("click", function() {
$div.toggle(); // this is to toggle div visibilty
});
$div.on("click", function(e) {
// prevent div from closing when clicking inside
e.preventDefault();
return false;
});
$div.parent().on("click", function() {
// hide div when user clicks inside div's parent element
$div.hide();
});
});
.container {
background: red;
height: 100px;
padding: 20px;
}
#divd {
background: blue;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
click
<div class="container">
<div id="divd">this is the div</div>
</div>
I found the following code here (Disable submit button unless original form data has changed) and it works but for the life of me, I can't figure out how to change the properties, text and CSS of the same submit button.
I want the text, background and hover background to be different when the button is enabled/disabled and also toggle another DIV visible/hidden.
$('form')
.each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
$(this)
.find('input:submit, button:submit')
.prop('disabled', $(this).serialize() == $(this).data('serialized'))
;
})
.find('input:submit, button:submit')
.prop('disabled', true);
Can someone please provide a sample. I have no hair left to pull out :-)
The answer you've copied isn't that great because a form doesn't have change or input events. Form elements do, instead. Therefore, bind the events on the actual elements within the form. Everything else looks okay except that you need to store the state of whether or not the stored/current data is equal to each other and then act accordingly. Take a look at the demo that hides/shows a div based on the state.
$('form')
.each(function() {
$(this).data('serialized', $(this).serialize())
})
.on('change input', 'input, select, textarea', function(e) {
var $form = $(this).closest("form");
var state = $form.serialize() === $form.data('serialized');
$form.find('input:submit, button:submit').prop('disabled', state);
//Do stuff when button is DISABLED
if (state) {
$("#demo").css({'display': 'none'});
} else {
//Do stuff when button is enabled
$("#demo").css({'display': 'block'});
}
//OR use shorthand as below
//$("#demo").toggle(!state);
})
.find('input:submit, button:submit')
.prop('disabled', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name="tb1" type="text" value="tbox" />
<input name="tb2" type="text" value="tbox22" />
<input type="submit" value="Submit" />
</form>
<div id="demo" style="margin-top: 20px; height: 100px; width: 200px; background: red; display: none;">Data isn't the same as before!</div>
And the rest could be done via CSS using the :disabled selector(CSS3) or whatever is appropriate.
You can change the hover style of the button using css. CSS has hover state to target:
[type='submit']:disabled {
color: #ddd;
}
[type='submit']:disabled:hover {
background-color: grey;
color: black;
cursor: pointer;
border: none;
border-radius: 3px;
}
[type='submit']:disabled {
color: #ccc;
}
For showing and hiding, there are many tricks to do it. I think following would be the simplest trick to do and and easier for you to understand.
Add this in your html
<div id="ru" class="hide">this is russia</div>
<div id="il" class="hide">this is israel</div>
<div id="us" class="hide">this is us</div>
<div id="in" class="hide">this is india</div>
Add this in your css
.hide {
display: none;
background: red;;
}
Update your javascript like following:
$('form').bind('change keyup', function () {
.....
// get id of selected option
var id = $("#country-list").find(":selected").val();
$('.hide').hide(); // first hide all of the divs
$('#' + id).show(); // then only show the selected one
....
});
Here is the working jsfiddle. Let me know if this is not what you are looking for and I will update the answer.
The detection of change occurs on change input event.
You can change your code to the following in order to use this calculated value:
$('form')
.each(function(){
$(this).data('serialized', $(this).serialize())
})
.on('change input', function(){
var changed = $(this).serialize() != $(this).data('serialized');
$(this).find('input:submit, button:submit').prop('disabled', !changed);
// do anything with your changed
})
.find('input:submit, button:submit')
.prop('disabled', true)
It is good if you want to work with other divs. However, for styling, it is better to use CSS :disabled selector:
For example, in your CSS file:
[type='submit']:disabled {
color: #DDDDDD;
}
[type='submit']:disabled {
color: #CCCCCC;
}
I am trying to create many 'show more/less' on my website and the section I am stuck is my resume. It contains a table and I'd like to hide some of the rows on page load. I have manage to do it but the show more link only works on double click not single and I just can't figure out why and how I could fix it!
Below is my code for jQuery:
jQuery(document).ready(function(){
//About Section:
jQuery("#about-showMore").click(function(){
var about= document.getElementById("about-more");
var showAbout= document.getElementById("about-showMore");
if(about.style.display == 'none'){
$("#about-more").show();
showAbout.innerHTML = "(Show Less)";
}
else{
$("#about-more").hide();
showAbout.innerHTML = "(Show More)";
}
});
//Resume Section:
jQuery("#resume-showMore").click(function(){
var resumeTitle= document.getElementsByClassName("table_title");
var showResume= document.getElementById("resume-showMore");
if(resumeTitle[0].style.display == 'none'){
jQuery(".table_title").show();
jQuery(".table_Des").show();
}
else{
jQuery(".table_title").hide();
jQuery(".table_Des").hide();
showResume.innerHTML = "(Show More)";
}
});
});
In my HTML I have added same name classes 'table_title' and 'table_Des' for those rows that I'd like to hide.
In CSS I have put 'display: none;' for these two classes:
tr.table_title{
color: gray;
font-size: 13px;
font-weight: 50%;
display: none;
}
tr.table_Des{
color:gray;
font-size: 13px;
font-weight: lighter;
display: none;
}
Try this instead. You can use the same code for your resume section just change the ids and/or class names.
$("#about-showMore").click(function(e){
e.preventDefault();
$('#about-more').toggle();
if($('#about-more').is(':visible')) {
$(this).html('Show Less');
} else {
$(this).html('Show More');
}
});
#about-more {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Show More
<div id="about-more">More Stuff</div>
You checked hidden status with css and showing it with jquery hide function. The best way I think is to use the only jquery hide/show or css display: block/none etc.
An example is as follows:
//Resume Section:
jQuery("#resume-showMore").click(function(){
var resumeTitle= document.getElementsByClassName("table_title");
var showResume= document.getElementById("resume-showMore");
if(resumeTitle[0].style.display == 'none'){
jQuery(".table_title").css('display','block');
jQuery(".table_Des").css('display','block');
}
else{
jQuery(".table_title").css('display','none');
jQuery(".table_Des").css('display','none');
$("#resume-showMore").html("Show More");
}
});