I have a show hide table rows feature but would now like to change my text.
<script language="javascript" type="text/javascript">
function HideStuff(thisname) {
tr = document.getElementsByTagName('tr');
for (i = 0; i < tr.length; i++) {
if (tr[i].getAttribute('classname') == 'display:none;') {
if (tr[i].style.display == 'none' || tr[i].style.display=='block' ) {
tr[i].style.display = '';
}
else {
tr[i].style.display = 'block';
}
}
}
}
The html is as follows...
<button id="ShowHide" onclick="HideStuff('hide');>Show/Hide</button>
I want to toggle the "Show/Hide" text. Any ideas?
$('#HideShow').click(function()
{
if ($(this).text() == "Show")
{
$(this).text("Hide");
}
else
{
$(this).text("Show");
};
});
Alternative, the .toggle() has an .toggle(even,odd); functionality, use which ever makes most sense to you, one is slightly shorter code but perhaps less definitive.
$('#HideShow').toggle(function()
{
$(this).text("Hide");
HideClick('hide');
},
function()
{
$(this).text("Show");
HideClick('hide');
}
);
NOTE: you can include any other actions you want in the function() as needed, and you can eliminate the onclick in the markup/html by calling your HideClick() function call in there. as I demonstrate in the second example.
As a follow-up, and to present an alternative, you could add CSS class to your CSS
.hideStuff
{
display:none;
}
THEN add this in:
.toggle('.hideStuff');
or, more directly:in the appropriate place.
.addClass('.hideStuff');
.removeClass('.hideStuff');
Use jQuery something like this might work:
$('ShowHide').click(function(){
if ( $('hide').css('display') == 'block' )
$('ShowHide').val("Hide");
else
$('ShowHide').val("Show");
});
I just wrote that from the top of my head though, so you might need to do some changes, you can read more about the css jquery api here. And all I did was using anonymous functions
I would recommend using jquery but you can just use javascript's document.getElementById method
in your function:
function HideStuff(thisname) {
tr = document.getElementsByTagName('tr');
for (i = 0; i < tr.length; i++) {
if (tr[i].getAttribute('classname') == 'display:none;') {
if (tr[i].style.display == 'none' || tr[i].style.display == 'block') {
tr[i].style.display = 'none';
}
else {
tr[i].style.display = 'block';
}
}
}
if (document.getElementById("ShowHide").value == "show") {
document.getElementById("ShowHide").value = "hide";
}
else {
document.getElementById("ShowHide").value = "show";
}
}
Although, I would probably pass in this instead of the text 'hide' in the function call. then yon can do it like zaph0d stated. Its a bit cleaner then.
Not sure why you are passing thisname into the JS as this is not currently getting used.
If you change the call to:
<button id="ShowHide" onclick="HideStuff(this)">Show</button>
and then in the js you can change the text fairly easily:
if (this.value == 'Show') {
this.value = 'Hide'
}
else {
this.value = 'Show';
}
Related
I am using this function to show and hide objects. I think the reason why this isn't working is because I am not selecting the object correctly.
function generalHideOrShow(element)
{
if (element instanceof Element)
{
//single element passed
element = [element]; //mimic node list
}
if(element.length && element.length > 0 && element[0] instanceof Element)
{
//node list
for (var i = 0; i < element.length; ++i)
{
if (element[i].getAttribute("data-hidden") == "true" )
{
$(element[i]).removeClass("hidden");
element[i].setAttribute("data-hidden", false);
}
else
{
element[i].setAttribute("data-hidden", true);
$(element[i]).addClass("hidden");
}
}
}
else
{
return false;
}
}
d3.selectAll("#button1").on("click", function(){
generalHideOrShow($("#buttonsRight")); //selection
});
var buttons = d3.select("#svg").append("g").attr("id", "buttons");
var buttonsRightTop = buttons.append("g").attr("id", "buttonsRightTop");
var buttonsRight = buttonsRightTop.append("g").attr("id", "buttonsRight");
I wish to select 'buttonsRight' as above.
When I change it to select all 'div' tags to test it, it works.
generalHideOrShow($("div")); //selection
I have tried different ways of selecting it such as :
generalHideOrShow($(buttonsRight)); //selection
generalHideOrShow($(".buttonsRight")); //selection
generalHideOrShow($("g#buttonsRight")); //selection
None are working. How do I select this right side buttons ?
Since you are using jQuery, I think you can write it as
function generalHideOrShow(element) {
var $elem = $(element);
if ($elem.length) {
var $hid = $elem.filter('[data-hidden="true"]').removeClass('hidden').attr("data-hidden", false);
$elem.not($hid).addClass('hidden').attr("data-hidden", true);
} else {
return false;
}
}
This is how I managed to do it:
Call the generalHideOrShow Function with the onClick:
d3.select("thisButton").on("click", function(){
generalHideOrShow("#buttonsRight");
}
set the class to visible first so you can check the class later:
buttonsRight.classed("visible", true);
Then do if statements to check if the class is hidden or visible
function generalHideOrShow(element) {
console.log(element[0].getAttribute('class'));
if(element[0].getAttribute('class') === "visible"){
element[0].setAttribute('class', "hidden");
} else{
element[0].setAttribute('class', "visible");
}
I have the following code -
$(window).resize(function () {
if ($(window).width() >= 1023) {
for (var i = 0; i < seatInfo.length; i++) {
if (seatInfo[i].data == 'true') {
document.getElementById('Btn1').style.visibility = "visible";
break;
} else {
document.getElementById('Btn1').style.visibility = "hidden";
}
}
if (nameInfo[0].data == "true") {
document.getElementById('Btn2').style.visibility = "visible";
}
}
if ($(window).width() <= 1022) {
document.getElementById('Btn2').style.visibility = "hidden";
}
});
Is this is the correct way to write it? I notice that it contains a JavaScript and jQuery mix.
If you are specifically asking about the jQuery syntax then the answer is no. You are using the native JavaScript methods instead of the much shorter jQuery methods.
Take a look at some jQuery selectors. For instance:
An element with an id attribute of foo can be found using jQuery's id attribute selector #:
var element = $( "#foo" ); // match the element
Changing an elements visibility attribute is the same as changing any other css attribute:
element.css( "visibility", "visible" ); // change css properties
A great feature of jQuery is it's many shortcut methods. There are a few shortcut method to display and hide elements (and toggle them):
element.show()
element.hide()
element.toggle()
Why stop using jQuery half-way?
For document.getElementById('Btn1') use $('#Btn1').
For .style.visibility = "visible" use .show() (or, if you want to be very precise, .css('visibility', 'visible'))
There is lots of good documentation on the official jQuery site.
You can use $('#some-id').hide() and $('#some-id').show(). Instead of document.getElementById('some-id') with style.visibility = "visible" or style.visibility = "hidden".
you can use .css from jquery and set it as json structure to define one or multiple CSS attributes, this is more easier for me to remember.
$('#Btn1').css({
'property': 'value',
'property': 'value'
});
or just use it like this for a single attribute
var btn1 = $('#Btn1'),
btn2 = $('#Btn2'),
window = $(window);
window.resize(function () {
if (window.width() >= 1023) {
for (var i = 0; i < seatInfo.length; i++) {
if (seatInfo[i].data == 'true') {
btn1.css('visibility','visible');
break;
} else {
btn1.css('visibility','hidden');
}
}
if (nameInfo[0].data == "true") {
btn2.css('visibility','visible');
}
}
if (window.width() <= 1022) {
btn2.css('visibility','hidden');
}
});
By using this method I can show/hide an element by using 2 buttons:
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
<input type="button" onClick="hideStuff('themes')" value="Hide">
<input type="button" onClick="showStuff('themes')" value="Show">
<div id="themes" style="display:block">
<h3>Stuff</h3>
</div>
Is there a method to use a single button?? Maybe if & else?
You've already answered your question...the use of if/else:
function toggle(id) {
var element = document.getElementById(id);
if (element) {
var display = element.style.display;
if (display == "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
}
This won't be completely foolproof, in case you are hiding/showing inline or inline-block elements, or if you are using non-default values for display on elements...such as setting a div's display to "inline" (for whatever reason) and then trying to use this function
Yes if/else will work
function toggle(id){
var elem = document.getElementById(id);
if(elem.style.display == 'block'){
elem.style.display == 'none'
} else if(elem.style.display == 'none'){
elem.style.display == 'block'
}
}
I think you mean something like this:
function toggle(id){
var elem = document.getElementById(id);
if(elem.style.display == "block"){
elem.style.display="none";
} else {
elem.style.display="block";
}
}
Here is an alternate solution. Instead of using document.getElementById, you can also use document.querySelector which returns the first Element within the document that matches the specified selector, or group of selectors.
Solution Code:
function toggleShow() {
var elem = document.querySelector(id);
if(elem.style.display == 'inline-block'){
elem.style.display="none";
}
else {
elem.style.display = "inline-block";
}
}
I'm using Javascript to make my checkboxes larger. Doing this I use image one for black checkbox and another one with the checked checkbox. It works like the real checkbox. However, when the page loads, the black checkboxes are not successfully loaded unless I click somewhere in the page to invoke them. Please check here to the page.
Belowing is my js code which I think it will impact this:
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
} else {
span[a].style.background = unchecked;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
}
Below is my image on form load:
And this is my page when clicking on anywhere:
Which other functions and variables are already defined. Thus could anyone help me to enable them to display whenever the form loads?
I don't known why you use that
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
} else {
span[a].style.background = unchecked;
}
}
But when I open your script in http://checkintonight.freeiz.com/js/custom-form-elements.js
Try to call function clear() in end of Custom.init(), it works
init: function() {
//
...
//
this.clear();
}
Sorry for my bad English
Eventually, I found a bug in my Javascript code. I add the else statement in the init() function to test if the checkbox is also not checked. So the code becomes like below:
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
}
} else {
span[a].style.background = unchecked;
}
Then it works! Thanks everyone that reviewed and answered to my question.
I have 11 checkboxes with individual ids inside a modal popup.I want to have a hyperlink called SelectAll,by clicking on which every checkbox got checked.I want this to be done by javascript/jquery.
Please show me how to call the function
You could attach to the click event of the anchor with an id selectall and then set the checked attribute of all checkboxes inside the modal:
$(function() {
$('a#selectall').click(function() {
$('#somecontainerdiv input:checkbox').attr('checked', 'checked');
return false;
});
});
You can do like this in jquery:
$(function(){
$('#link_id').click(function(){
$('input[type="checkbox"]').attr('checked', 'checked');
return false;
});
});
If you have more than one form, you can specify form id like this:
$(function(){
$('#link_id').click(function(){
$('#form_id input[type="checkbox"]').attr('checked', 'checked');
return false;
});
});
This should work, clicking on the element (typically an input, but if you want to use a link remember to also add 'return false;' to prevent the page reloading/moving) with the id of 'selectAllInputsButton' should apply the 'selected="selected"' attribute to all inputs (refine as necessary) with a class name of 'modalCheckboxes'.
This is un-tested, writing on my phone away from my desk, but I think it's functional, if not pretty.
$(document).ready(
function(){
$('#selectAllInputsButton').click(
function(){
$('input.modalCheckboxes').attr('selected','selected');
}
);
}
);
$(function(){
$('#link_id').click(function(e){
e.preventDefault(); // unbind default click event
$('#modalPopup').find(':checkbox').click(); // trigger click event on each checkbox
});
});
function CheckUncheck(obj) {
var pnlPrivacySettings = document.getElementById('pnlPrivacySettings');
var items = pnlPrivacySettings.getElementsByTagName('input');
var btnObj = document.getElementById('hdnCheckUncheck');
if (btnObj.value == '0') {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox") {
if (!items[i].checked) {
items[i].checked = true;
}
}
}
btnObj.value = "1";
}
else {
for (i = 0; i < items.length; i++) {
if (items[i].type == "checkbox") {
if (items[i].checked) {
items[i].checked = false;
}
}
}
btnObj.value = "0";
}
}