Hy,
i've got verry strange behavior (at least, i think it's strange...)
I've got a page where users can pick a color for background and a color for the text.
I've found a color picker on the internet, and that's working all just fine...
But every time i open the popup, the page reload. To test this i added a alert in script tags, and i got the alert when i acces the page and when i open the popup...
This is verry annoying, because the changes that users made will be lost ever time they open the popup...
Here is the button that fires the popup:
<button onclick="PopUp(\'background\')">gebruik de color picker</button>
note that this is part of a php string, so that's why the single quotes are escaped....
and this is the function PopUp:
function PopUp(keuze){
if(keuze == 'background'){
$('#clicked_one').val('background');
var de_waarde = $('#background_keuze').val();
$('#clicked_value').val(de_waarde);
}
else if(keuze == 'text'){
$('#clicked_one').val('text');
var de_waarde = $('#text_keuze').val();
$('#clicked_value').val(de_waarde);
}
window.open( './popup_color_picker.php', '_blank', 'width=500,height=500');
}
The popup page:
<?php
include '../config.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Color Picker</title>
<script src="<?php echo $root_off_page; ?>javascript/color_picker.js"></script>
</head>
<body>
<input type="text" class="color" id="color" value="">
<button onclick="klaar()">deze kleur wordt het</button>
</body>
</html>
<script>
var wat_is_geklikt = opener.document.getElementById('clicked_one').value;
var de_juiste_waarde = opener.document.getElementById('clicked_value').value;
function klaar(){
var de_gekozen_kleur = document.getElementById('color').value;
if(wat_is_geklikt == 'background'){
opener.document.getElementById('background_keuze').value = de_gekozen_kleur;
}
else if(wat_is_geklikt == 'text'){
opener.document.getElementById('text_keuze').value = de_gekozen_kleur;
}
self.close()
}
</script>
So does anybody see the problem why the main page (the opener) reloads???
Thanks
The default type of a button (if omitted) is submit which causes the reload of your page. Just change the type to button
<button type="button" onclick="PopUp(\'background\')">gebruik de color picker</button>
I was having the same issue with an < a > tag, I added type="button" to that and it fixed my issue, thanks for the help!
Related
function swapstylesheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet)
}
<!--style.css-->
body{
background-color:#ffffff;
}
li{
color:#000000;
}
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<li type="button" onclick="swapstylesheet('stylenight.css')">Night Mode</li>
<li type="button" onclick="swapstylesheet('style.css')">Day Mode</li>
</body>
I am trying to implement a button on my HTML website that toggles the CSS for the current website and all of the other pages on my site using JavaScript. The problem is that when I change to the other CSS file and then switch the page, it goes back to the original CSS file (keep in mind that I am new to JavaScript). If it's any help, this will be toggling day/night mode.
<!--stylenight.css-->
body{
background-color:#000000;
}
li{
color:#ffffff;
}
You will have to set cookies in the browser when the user clicks the Day/Night Mode Button.
and read the cookie value to set the Mode when user comes back to your original page.
You can read more about setting and reading cookies in javascript here:
https://www.w3schools.com/Js/js_cookies.asp
You are looking are something like this on clicking the button:
document.cookie = "mode=Day;";
Also you will need a function to read the cookies when the page loads:
(From How do I call a JavaScript function on page load?)
window.onload = function() {
readCookieAndSetMode();
};
And on readCookieAndSetMode() you should read the cookie using
var x = document.cookie;
and depending on x swap the CSS (I leave that part to you).
All the above answers is not right, i will write here some code for bloggers to apply dark mode on own blogs..and remains until button pressed... check this on my blog Hindi Tutor working well.. 100% working, and dark mode is not going to off when you refresh the page..
<!-- Theme Functions JS -->
<script type='text/javascript'>
//<![CDATA[
function retheme() {
var cc = document.body.className;
if (cc.indexOf("darktheme") > -1) {
document.body.className = cc.replace("darktheme", "");
if (opener) {opener.document.body.className = cc.replace("darktheme", "");}
localStorage.setItem("preferredmode", "light");
} else {
document.body.className += " darktheme";
if (opener) {opener.document.body.className += " darktheme";}
localStorage.setItem("preferredmode", "dark");
}
}
(
function setThemeMode() {
var x = localStorage.getItem("preferredmode");
if (x == "dark") {
document.body.className += " darktheme";
}
})();
//]]>
</script>
<!-- theme switch is a button icon adjust this as your icon stylesheet -->
#theme-switch{font-size:20px;position:absolute;top:0;right:35px;z-index:19}
<!-- Here is your stylesheet for dark mode editd these colors and style name except body darktheme -->
body.darktheme{color:#fff;background-color:#000}
body.darktheme .your-element-name{color:#fff;background-color:#000}
body.darktheme .lin-element-name a{color:#fff;background-color:#000}
body.darktheme #your-element-name{color:#fff;background-color:#000}
body.darktheme your-element-name ul li a{color:#fff;background-color:#000}
<div id='theme-switch'>
<a class='fa fa-adjust' href='javascript:void(0);' onclick='retheme()' title='Change Theme'/>
</div>
The title pretty much says it all: I need help in making a button that will only appear 5 seconds after the page loads.
this is the code i'm working with:
<html>
<body onload="setTimeout(showStuff, 5000)">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class=login align=center>
<font size=13 face=helvetica> You're doing that too much. </font><br> <br> <br>
<font size=5 face=helvetica>
You have entered the wrong username/password too many times <br>
<br><br>
<br><br>
Click "OK" to go back to the log-in page <br> <br>
<p id="Button"><input type=submit onclick="myFunction()" id="Button" value="OK"> </p>
<script>
document.getElementById("Button").style.visibility = "hidden";
function showStuff(Button){
document.getElementById("Button").style.display = "inline";}
function myFunction() {
window.location = "project.html"}
</script>
</div> </font>
</body>
</html>
This is probably what you need
<body>
<button id="some-button">button</button>
<script>
document.getElementById("some-button").style.display = "none";
function showStuff() {
document.getElementById("some-button").style.display = "inline";
}
function myFunction() {
window.location = "project.html"
}
setTimeout(showStuff, 5000);
</script>
</body>
</html>
Things you should know
* The html element <font> is deprecated
* Is bad practice to mix Javascript code inline with html.
* Do not duplicate html elements ids, they should be unique (Thanks Calvin Nunes)
How to fix your code
* Close the second <font> element correctly and delete the unnecesary id of the button.
* If you use display = 'inline', then to hide the element use display = 'none'
The working code
<html>
<body onload="setTimeout(showStuff, 5000)">
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class=login align=center>
<font size=13 face=helvetica> You're doing that too much. </font><br> <br> <br>
<font size=5 face=helvetica>
You have entered the wrong username/password too many times <br>
<br><br>
<br><br>
Click "OK" to go back to the log-in page <br> <br>
</font>
<p id="Button">
<input type=submit onclick="myFunction()" value="OK"> </p>
<script>
document.getElementById("Button").style.display= "none";
function showStuff(){
document.getElementById("Button").style.display = "inline";
}
function myFunction() {
window.location = "project.html"
}
</script>
</body>
</html>
<script>
function showStuff(){ // no argument needed
document.getElementById("Button").style.display = "inline";
}
</script>
<body onload="javascript:setTimeout(function(){ showStuff(); }, 5000)">
function definition should be before function call
in function showstuff no argument is needed. a use function() inside settimeout to execute correctly . if not it will just execute without delay .
Well using jquery you can have the button within the div, something like
<div id="div_id">Button here</div> and set time out to display it
setTimeout(function(){
$('#div_id').show();// or fade, css display however you'd like.
}, 5000);`
or with Javascript:
function showItbutton() {
document.getElementById("div_id").style.visibility = "visible";
}
setTimeout("showItbutton()", 5000); // after 5 secs
First, use DOMContentLoaded event and then write the code within that handler to handle this logic:
<script>
window.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
// Assuming button has id 'myButton'.
document.querySelector('#myButton').style.display = 'none';
}, 5000);
});
</script>
Remember DOMContentLoaded is the key to detect page load. You can use onload depending on your situation. Refer this to understand the difference between the two.
setTimeout() receives milliseconds, not seconds.
So 5000 it will work for you.
JS:
setTimeout(showStuff, 5000);
console.debug('Start page');
function showStuff(Button){
console.debug('Display');
document.getElementById("Button").style.display = "inline";
}
HTML:
<button id="Button" style="display:none">Button</button>
I'm really confused on how to go about this.
What I'm trying to do is, have a form in HTML (not <form>), just a bunch of <input> tags with a <button>.
Basically, in the javascript code, there's an event listener that activates the MakeCard() method, when the <button> is pressed.
The MakeCard() method is supposed to then replace the form (in the HTML body) with a <div> that has it's own random stuff.
How do I make this system work? Please no JQuery and other such libraries. I'm only allowed to use DOM.
This is the code I have so far:
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script>
window.addEventListener("load", function(){
var nameOfRecipient = document.getElementById("nameOfRecipient");
var colorInfo = document.getElementById("colorInformation");
var fontSize = document.getElementById("fontSize");
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient");
var resultColorInfo = document.getElementById("resultColorInformation");
var resultFontSize = document.getElementById("resultFontSize");
function MakeCard(){
// Make the card
// Show the results
ShowResults();
}
function ShowResults(){
// Show the user choices
resultNameOfRecipient.innerHTML = nameOfRecipient.value;
resultColorInfo.innerHTML = colorInfo.value;
resultFontSize.innerHTML = fontSize.value;
}
document.getElementById("submitButton").addEventListener("click", MakeCard);
});
</script>
</head>
<body>
<div id="headerContainer">
Welcome to the Card Maker!
</div>
<div id="formContainer">
<p>Name of recipient<input type="text" id="nameOfRecipient"></p>
<p>Color Information<input type="text" id="colorInformation"></p>
<p>Font Size<input type="number" id="fontSize"></p>
<input type="button" id="submitButton" value="Make Card!">
</div>
<div id="resultContainer">
<p id="resultNameOfRecipient"></p>
<p id="resultColorInformation"></p>
<p id="resultFontSize"></p>
</div>
</body>
PLEASE IGNORE THE LAST DIV WITH ID="resultContainer" and ignore all the variables that have the result in front. That stuff is other extra stuff.
It would be amazing if I could just know how to make an entirely new div that REPLACES the div with ID="formContainer".
First things first: Why use listeners when you can use onclick tags? Set the button like this, and change the listener to a dedicated function:
window.addEventListener("load", function(){
becomes
function myfunction() {
and don't forget to change the end of the script from }); to }..
Also, remove the listener from the button, which is this line.
document.getElementById("submitButton").addEventListener("click", MakeCard);
And add an onclick event to the button, and change it to a button type, to make sure it doesn't submit:
<button type="button" id="submitButton" onclick="myfunction()">Make Card!</button>
Secondly: You've set variables to actual HTML elements, which would show something like: HTML[buttonElement]... I'm assuming what you want is what was typed in the element, which is the "value" tag. You would get that by changing the variables to this:
var nameOfRecipient = document.getElementById("nameOfRecipient").value;
var colorInfo = document.getElementById("colorInformation").value;
var fontSize = document.getElementById("fontSize").value;
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient").value;
var resultColorInfo = document.getElementById("resultColorInformation").value;
var resultFontSize = document.getElementById("resultFontSize").value;
So now that we've tidy'd up your syntax and stuff, I wanna get on to the part where you said you wanted to replace the DIV. Here's my way of doing it:
I would give every element in the DIV an ID (other than the button, we've already discussed that).
<p id="nameofrecipentp">Name of recipient<input type="text" id="nameOfRecipient"></p>
<p id="colorinformationp">Color Information<input type="text" id="colorInformation"></p>
<p id="fontsizep">Font Size<input type="number" id="fontSize"></p>
You could then call a function when the function myfunction() is called.
function myfunction() {
replacediv()
And define replacediv() to replace all the elements in the form to whatever you'd like.
function replacediv() {
document.getElementById("nameofrecipentp").innerHTML =
"Enter your data here"
document.getElementById("colorinformationp").innerHTML =
"Enter your data here, for the color information"
document.getElementById("fontsizep").innerHTML =
"enter your data here for font size"
}
I think I pretty much covered everything. If you still need help, tell me.
I want to configure a hyperlink to close/open its related div in asp.net. Basically, when a user clicks the sign X, the panel should be closed and the sign + should be appeared. When + is clicked, the panel should be showed again. I could not manage this and I believe my main problem is "document.getElementById('<%= lb_closePanel.ClientID %>').value" is coming as undefined. Here is the code until now. I appreciate for your helps!
<!DOCTYPE html>
....
<div class="appheader">
<h1 class="appheaderContent">Search for Client</h1>
<div id="checkBox"></div>
<div id="closePanel"><h2 id="lblClosePanel">Close Panel</h2>
<div id="xButton">
<asp:LinkButton onclientclick="CloseOpenPanel('Search')" runat="server" Text="X" style="text-decoration:none; color:white" ID="lb_closePanel"></asp:LinkButton>
</div>
</div>
</div>
<div class="app" id="Search">
...
<div>
...
</html>
<script type="text/javascript">
function CloseOpenPanel(obj) {
alert(document.getElementById('<%= lb_closePanel.ClientID %>').value); //here it comes undefined!!!!
if (document.getElementById('<%= lb_closePanel.ClientID %>').value == 'X') {
document.getElementById(obj).Visible = false;
lb_closePanel.Text = '+';
}
else {
document.getElementById(obj).Visible = true;
lb_closePanel.Text = 'X';
}
}
</script>
Your code is OK, just instead of the property value use innerHTML
alert(document.getElementById('<%= lb_closePanel.ClientID %>').innerHTML);
Instead of using .value, try using .innerHTML instead to get the text inside of your link button (rendered as an a tag)
Is it possible to add a textbox into an iframe, and append it into the src of the iframe. So i have created an modal box displaying a button for the user to click "ADD BUTTON"
<div id="addFeature" class="openAdd">
<div>
X
<h2>Add...</h2>
<button class="text" type="button">Text</button>
</div>
</div>
As the user clicks on the button, I need the modal box to close and a text box added. The following iframe is within main.html. As you can see the iframe displays the other html page.
<div>
<iframe class="newIframe" id="newIframe" src="webpage.html" onload="iFrameOn();">
Your browser does not support Iframes
</iframe>
</div>
Though I need the textbox to be added in webpage.html which is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="iFrameOn();">
<div id="design">
</div>
</body>
</html>
JS:
addTextBox() {
var text = "'<div><input type='textbox'/></div>'"
var textbox = document.createElement('div');
textbox.innerHTML = text;
var addText = document.getElementById('div').src = "webpage.html";
addText.appendChild(textbox);
}
Is it possible to do what I'm asking?
I'm afraid explaining this in the way you're trying to do this now, would be an endless swamp. Here's some guidelines, how you can achieve this quite easy.
Probably you need to remove the onload from iframe tag first. Then put these lines to your main page:
var textForIframe; // Take care that this variable is declared in the global scope
function addText () {
document.getElementById('newIframe').src = 'webpage.html';
textForIframe = '<div><input type="text" /></div>'; // or whatever text you need
return;
}
When ever your dialog is ready, call addText().
Then in webpage.html, remove the onload from body tag, and add the function below to somewhere after <script src="index.js"></script> tag.
window.onload = function () {
var addTextElement = document.getElementById('design'), // or whatever element you want to use in iframe
textToAdd = parent.textForIframe;
// depending on what iFrameOn() does, place it here...
addTextElement.innerHTML = textToAdd;
iFrameOn(); // ... or it can be placed here as well
return;
};
These snippets add a new input type="text" to #design within iframe.