I have a page which contains at the bottom 3 buttons with the following coding:
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
printButton.style.visibility = 'visible';
}
#options {
align-content:center;
align-items:center;
text-align: center;
}
<div id="options">
<input type="submit" value="post news" >
<input id="printpagebutton" type="button" value="print news" onclick="printpage()"/>
<input type="button" value="re-enter the news">
</div>
I managed to hide the print button while printing but i couldn't with the others.
I've searched the internet for the solution, and most questions were answered by adding the display:none; in css, but i end up with 3 hidden buttons on the screen.
I only want the buttons hidden while printing
Answer might be simple, my knowledge in web developing is acient.
Thank you in advance.
You can use CSS #media queries. For instance:
#media print {
#printPageButton {
display: none;
}
}
<button id="printPageButton" onClick="window.print();">Print</button>
The styles defined within the #media print block will only be applied when printing the page. You can test it by clicking the print button in the snippet; you'll get a blank page.
You can use a css media query to target print:
#media print {
.hide-print {
display: none;
}
}
Assign an id to the other 2 buttons. For the POST NEWS button you can set id to postnews and RE-ENTER THE NEWS to reenterthenews; Then do this
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
var postButton = document.getElementById("postnews");
var reenterButton = document.getElementById("reenterthenews");
//Set the button visibility to 'hidden'
printButton.style.visibility = 'hidden';
postButton.style.visibility = 'hidden';
reenterButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Restore button visibility
printButton.style.visibility = 'visible';
postButton.style.visibility = 'visible';
reenterButton.style.visibility = 'visible';
}
HTML
<div id="options">
<input type="submit" id="postnews" value="post news" >
<input id="printpagebutton" type="button" value="print news" onclick="printpage()"/>
<input type="button" id="reenterthenews" value="re-enter the news">
</div>
Related
So, I wanted to display a loading gif when an input box was on focus.
I've managed to do it but the loading gif it's getting below the input box, and not after
On CSS, if I change the display:none to display:yes the loading gif appears after the input box as I want, but only until the JS function is triggered.
var input = document.getElementById('showloading');
var message = document.getElementsByClassName('loadingGif')[0];
input.addEventListener('focus', function() {
message.style.display = 'block';
});
input.addEventListener('focusout', function() {
message.style.display = 'none';
});
.loadingGif {
display: none;
}
<input id="showloading" type="text" class="auto">
<img class="loadingGif" src="loading.gif">
Screenshoots:
What it looks like:
What I want it to look like:
#T.J. Crowder aswer is the one you should follow if you want to use Javascript although you don't need Javascript to do what you want.
You can use only CSS by using :focus selector and the sibling selector + to write a style rule. When showloading is focused all the adjacent siblings with the class loadingGif will have the display: inline-block
Such as:
.loadingGif {
display: none;
}
#showloading:focus + .loadingGif {
display: inline-block;
}
<input id="showloading" type="text" class="auto">
<img class="loadingGif" src="loading.gif">
The problem is that block is displayed as a block, so it starts a new visual line.
I wouldn't use style at all, I'd use a class to show/hide the image:
var input = document.getElementById('showloading');
var message = document.getElementsByClassName('loadingGif')[0];
input.addEventListener('focus', function() {
message.classList.remove("hide"); // <===
});
input.addEventListener('focusout', function() {
message.classList.add("hide"); // <===
});
.loadingGif.hide {
/* --------^^^^^ */
display: none; /* <=== */
}
<input id="showloading" type="text" class="auto">
<img class="loadingGif hide" src="loading.gif">
<!-- ------------------^^^^ -->
...although as Pepper says (and Diogo also now says), you can do this with just CSS and without JavaScript or a class.
For instance, I'd like a column of buttons on the left:
Option 1
Option 2
Option 3
Option 4
And a column of paragraphs on the right:
OPTION 1 TEXT PARAGRAPH
OPTION 2 TEXT PARAGRAPH
OPTION 3 PHOTO LIBRARY
OPTION 4 REGISTRATION FORM
When the user clicks on Option 1, I'd like to have it do nothing except adjust the CSS style of Option 1 TEXT PARAGRAPH from display: none; to display: block;, and to change the styles of Options 2-4 to display: none;.
This way only one category would be visible at a time.
I'm pretty familiar with HTML and CSS but haven't come across a need for this function before.
Unfortunately, I'm brand new to JavaScript and would prefer not to use it for this, if it's possible to handle with CSS. So my question is, is it?
By the way, I have searched a lot for an answer before creating a new account here to ask, and maybe I just can't figure out how to phrase this, but please forgive me if the answer exists elsewhere.
You can do it using labels and hidden radios.
columnHolder {
display:flex;
}
rightColumnItem {
display:none;
}
[linkedTo="option1"] {
background:green;
}
[linkedTo="option2"] {
background:gold;
}
[linkedTo="option3"] {
background:tan;
}
[linkedTo="option4"] {
background:gray;
}
input[type=radio] {
display:none;
}
#option1:checked ~ columnHolder rightColumn [linkedTo="option1"] {
display:block;
}
#option2:checked ~ columnHolder rightColumn [linkedTo="option2"] {
display:block;
}
#option3:checked ~ columnHolder rightColumn [linkedTo="option3"] {
display:block;
}
#option4:checked ~ columnHolder rightColumn [linkedTo="option4"] {
display:block;
}
<input type="radio" name="radioSelector" id="option1" checked>
<input type="radio" name="radioSelector" id="option2">
<input type="radio" name="radioSelector" id="option3">
<input type="radio" name="radioSelector" id="option4">
<columnHolder>
<leftColumn>
<label for="option1"><div>Option 1</div><label>
<label for="option2"><div>Option 2</div><label>
<label for="option3"><div>Option 3</div><label>
<label for="option4"><div>Option 4</div><label>
</leftColumn>
<rightColumn>
<rightColumnItem linkedTo="option1">OPTION 1 TEXT PARAGRAPH</rightColumnItem>
<rightColumnItem linkedTo="option2">OPTION 2 TEXT PARAGRAPH</rightColumnItem>
<rightColumnItem linkedTo="option3">OPTION 3 PHOTO LIBRARY</rightColumnItem>
<rightColumnItem linkedTo="option4">OPTION 4 REGISTRATION FORM</rightColumnItem>
</rightColumn>
</columnHolder>
Here is how you can do it using javascript. You can add click event in the buttons and use id in the paragraphs. And then set html css property display using javascript. I do not think you can do this using css only.
Added fiddle link of the example
http://jsfiddle.net/cu2xaz86/12/
lets say below is your html. May be not exactly how you want.. but an example
<button onclick="javascript:op('s1')">
Option 1
</button>
<button onclick="javascript:op('s2')">
Option 2
</button>
<button onclick="javascript:op('s3')">
Option 3
</button>
<button onclick="javascript:op('s1')">
Option 4
</button>
<span id="s1" style="display: none;">
OPTION 1 TEXT PARAGRAPH
</span>
<span id="s2" style="display: none;">
OPTION 2 TEXT PARAGRAPH
</span>
<span id="s3" style="display: none;">
OPTION 3 PHOTO LIBRARY
</span>
<span id="s4" style="display: none;">
OPTION 4 REGISTRATION FORM
</span>
and then the javascript function can be something like below , where you make all the element display none first and then set display block for the element you want to show.
function op1(v) {
var x = document.getElementById("s1");
x.style.display = "none";
x = document.getElementById("s2");
x.style.display = "none";
x = document.getElementById("s3");
x.style.display = "none";
x = document.getElementById("s4");
x.style.display = "none";
x = document.getElementById(v);
x.style.display = "block";
}
I want load a disabled button by default but change it to enable on click the button. Here is how I did it.
<button id="Btn" class="navBtn" disabled onclick="enableBtn()">click to enable</button>
function enableBtn() {
document.getElementById("Btn").disabled = false;
}
But it is not working....
I've tried to load an enabled button by default and click to disabled, but the reverse is not working...
I'm using HTML and JavaScript
You are trying to click on a disabled button. The button is disabled, so it can't be clicked.
Why are you trying to make it so that you have to click to activate it in the first place? Maybe there is a better solution to the problem as a whole?
Edit: The actual purpose of the button is to toggle a boolean, this can be done fairly easily like this.
var enableFeature = false;
function toggleFeature(){
enableFeature = !enableFeature;
(put code setting the feature's status to enableFeature here)
}
https://www.w3schools.com/js/js_booleans.asp
You can use this code -
//html
<button id="Btn" class="navBtn" onclick="enableBtn()">click to enable</button>
//js
function enableBtn() {
document.getElementById("Btn").setAttribute("disabled", "false")
}
A disabled button cannot trigger the click method, you should better add a CSS class which makes the button look like disabled.
Here is an example:
<style>
button.inactive {
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
</style>
<button id="Btn" class="navBtn" onclick="toggleBtn()">click to enable</button>
<script>
var buttonEnabled = true;
function toggleBtn() {
if（buttonEnabled){
document.getElementById("Btn").className = "navBtn inactive"
} else {
document.getElementById("Btn").className = "navBtn";
}
buttonEnabled = !buttonEnabled;
}
</script>
You can solve it by adding a wrapper around it that listens to a click event to enable the underlying button.
<div id="btnWrapper" onclick="enableBtn()">
<button id="Btn" class="navBtn" disabled>click to enable</button>
</div>
However, this approach requires a CSS addition: pointer-events which is well supported on desktop browsers. Here is the CSS I added to your button:
#Btn {
pointer-events:none;
}
This allows you to enable your button when clicking on it.
Life example:
function enableBtn() {
console.log('button enabled');
document.getElementById("Btn").disabled = false;
}
#Btn {
pointer-events:none;
}
<div id="btnWrapper" onclick="enableBtn()">
<button id="Btn" class="navBtn" disabled>click to enable</button>
</div>
I am trying to position a checkbox on the right side of a dropdown
<li>
<a class="drop-option" data-toggle="tab" href="#bizq">Business</a>
<input type="checkbox" value="" style="display: inline; float: right">
</li>
What I'm trying to have is the checkbox be a separate entity from the actual option itself. So that when I click on the option it goes to a page, and when I toggle the checkbox it does something else.
Essentially the goal is to have multiple pages with iframes. Each time I go to a page it load the iframe. If the checkbox is checked then the iframe can be persistent instead of getting destroyed each time a page is switched.
Should look something like this:
when I click on the option it goes to a page, and when I toggle the checkbox it does something else.
This can be implemented by following steps:
Add event listener to the option element.
When option element is clicked, check whether user clicks the checkbox inside the option. If it is the checkbox clicked, do nothing. Otherwise, go to step 3.
Check the current option element's checkbox status. Do different things according to different checkbox status.
Here is a code snippet:
var $option = $('a.option');
$option.on('click', function(e) {
var $target = $(e.target);
var $this = $(this);
if ($target.hasClass('toggle')) {
// checkbox clicked.
return;
}
var childToggle = $this.find('input.toggle').prop('checked');
var label = $this.find('.label').text();
if (childToggle) {
alert('Page ' + label + ' clicked, WITH checkbox checked.');
} else {
alert('Page ' + label + ' clicked, WITHOUT checkbox checked.');
}
});
ul>li {
list-style: none;
}
a.option {
background: darkcyan;
color: white;
display: block;
width: 100px;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid white;
}
a.option input.toggle {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="javascript:;" class="option">
<span class="label">Business</span>
<input type="checkbox" class="toggle" value="isSelected">
</a>
</li>
<li>
<a href="javascript:;" class="option">
<span class="label">Tech</span>
<input type="checkbox" class="toggle" value="isSelected">
</a>
</li>
</ul>
Morning, I have an issue with the styling of a popup window I am trying to create, when a button is clicked, the popup is shown and keeps focus when clicking on the popup body, although when clicking a child element of the popup within it, the popup loses focus.
How can I keep focus on the popup when clicking any child element within the popup?
Many Thanks.
<html>
<head>
<style type="text/css">
#modal{display:none;}
#modal:focus {display:block;}
#modal:focus * #modal{display:block;}/*i thought maybe this would apply when any child element of #modal has focus, although if i give a child element of modal a tabindex, it still doesn't work.*/
.num:focus + #modal{display:block;}
</style>
</head>
<body>
<div id="onetwo">
<input type="button" id="btn1" class="num" tabindex="1" value="Click here"/>
<div id="modal" style="background-color:green;width:200px;height:200px;
position:absolute;top:40%;left:40%;" tabindex="2">
<input type="button" id="btn1" onclick="alert("Alerted")" value="Click.."/>
<input type="text" id="txt1" placeholder="some text"/>
</div>
</div>
</body>
</html>
The problem is that as soon as you click on a child element in the popup, your button is no longer in focus and the popup will not be displayed.
This cannot be done easily just in CSS. The best way would be to use javascript and add click handlers to your button to show and hide the popup using CSS:
var btn = document.getElementById('btn1');
btn.onclick = function() {
var popup = document.getElementById('modal');
if(popup.style.display == 'block') {
popup.style.display = 'none';
}
else {
popup.style.display = 'block';
}
}
See this Fiddle