I have a subscription box and im trying to make a X close button that remembers to not display next time with web storage or cookies. when i click the close button my whole side bar is set to display none. In stead of just id="gfxhsub" .
JavaScript
<script type="text/javascript">
window.onload = function(){
document.getElementById('mailclose').onclick = function(){
this.parentNode.parentNode.parentNode
.removeChild(this.parentNode.parentNode);
return false;
};
};
</script>
html
<div id="gfxhsub" style="margin: 2em 0.5em; height: auto;">
<span id='mailclose'><i class="fa fa-times"></i></span>
[newsletter_signup_form id=6]
</div>
You can achieve this by using the following code in your click event handler.
// 1st line: Select the div you want to hide.
// 2nd line: Set the style of the element to display: none;
var elem = document.querySelector('#gfxhsub');
elem.style.display = 'none';
Here's a working example.
#mailclose {
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script type="text/javascript">
window.onload = function() {
document.getElementById('mailclose').onclick = function() {
var elem = document.querySelector('#gfxhsub');
elem.style.display = 'none';
return false;
};
};
</script>
html
<div id="gfxhsub" style="margin: 2em 0.5em; height: auto;">
<span id='mailclose'><i class="fa fa-times"></i></span> [newsletter_signup_form id=6]
</div>
Related
This is a simple drop-down menu with input in HTML and pure javascript (no JQuery). I don't want to use the pre-defined HTML list with option tags because i need scroll bars, styling etc.
I hide the list onblur but this event gets triggered before the click on the items list. So the result is that I cant click on the items of the drop-down menu because the list gets hidden before hand.
This is the code:
function showList(){
elem = document.getElementById("list");
elem.className = "unhidden";
}
function hideList(){
elem = document.getElementById("list");
elem.className = "hidden";
}
function showSuccess(){
elem = document.getElementById("successDiv");
elem.innerHTML = "code successful!";
}
.hidden { display: none; }
.unhidden { display: block; }
<html>
<head>
</head>
<body>
<input onfocus="showList();" onblur="hideList();"/>
<div id="list" class="hidden">
click for success
</div>
<div id="successDiv">
</div>
</body>
</html>
The easiest solution is to add a small delay with setTimeout before hiding the element. In the example below i wait a 250 milliseconds before removing the class.
function showList(){
elem = document.getElementById("list");
elem.className = "unhidden";
}
function hideList(){
setTimeout(function() {
elem = document.getElementById("list");
elem.className = "hidden";
}, 250); // Wait 250 milliseconds
}
function showSuccess(){
elem = document.getElementById("successDiv");
elem.innerHTML = "code successful!";
}
.hidden { display: none; }
.unhidden { display: block; }
<html>
<head>
</head>
<body>
<input onfocus="showList();" onblur="hideList();"/>
<div id="list" class="hidden">
click for success
</div>
<div id="successDiv">
</div>
</body>
</html>
EDIT: More robust solution
You can look at the events relatedTarget and if it is inside the list dont close it before clicking on it.
const input = document.querySelector("#input");
const list = document.querySelector("#list");
const listItems = document.querySelectorAll("#list a");
const success = document.querySelector("#successDiv");
input.addEventListener("focus", showList);
input.addEventListener("blur", hideList);
for(const listItem of listItems) {
listItem.addEventListener("click", showSuccess);
}
function showList() {
list.classList.remove("hidden");
}
function hideList(event) {
if(event.relatedTarget?.parentNode !== list) {
list.classList.add("hidden");
}
}
function showSuccess(event) {
success.innerHTML = "code successful!";
// Remove line to keep list open
hideList(event);
}
#list {
display: flex;
flex-direction: column;
}
#list.hidden { display: none; }
<input id="input" />
<div id="list" class="hidden">
click for success
click for more success
click for even more success
</div>
<div id="successDiv">
</div>
I have one text box and one button in my code. I want to let the user to enter a text and click the button. If so a card will be created with the user entered text, and the background color of the card will be set using a json file.
But in my code if the user clicks the button for the second time, previously created card disappears and a new card is being created leaving the space of previously created card. But I want all the cards to be aligned one below one.
I think this can be done using a loop function by setting different ids to each card. Unfortunately I am not able to do it properly.
I am attaching my code here, please someone help me with this.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Task</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel = "stylesheet" href = "css/style.css" type = "text/css">
</head>
<body>
<h2>Creative Handle Task Assignment</h2>
<input type="text" name="text" id="text" placeholder="Enter your text here...">
<button id="btn">Click</button>
<div class="flex-container" id="container">
</div>
<script src="js/custom_script.js" type="text/javascript"></script>
</body>
</html>
style.css
.flex-container {
display: flex;
flex-direction: column-reverse;
justify-content: center;
align-items: center;
}
.flex-container > div {
/*background-color: DodgerBlue;*/
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
custom_script.js
const subBtn = document.getElementById("btn");
const inptTxt = document.getElementById("text");
const contDiv = document.getElementById("container");
subBtn.disabled = true
inptTxt.addEventListener('input', evt => {
const value = inptTxt.value.trim()
if (value) {
inptTxt.dataset.state = 'valid'
subBtn.disabled = false
} else {
inptTxt.dataset.state = 'invalid'
subBtn.disabled = true
}
})
var xhttp = new XMLHttpRequest();
subBtn.addEventListener("click",function(){
var crd = document.createElement("div");
crd.setAttribute("id", "card");
crd.innerHTML = inptTxt.value;
contDiv .appendChild(crd);
xhttp.onreadystatechange=function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("card").style.background = JSON.parse(this.responseText).color;
}
};
xhttp.open("GET","http://api.creativehandles.com/getRandomColor","" ,true);
xhttp.send();
})
Each time you create a new element you give it the id of card. You can't have multiple html elements with the same id. You should use crd.setAttribute("class", "card");' instead. The external stylesheet you load has styling for the class .card but not for id #card.
You can not give id to more one html tag.
Instead of id use class attribute i.e.
crd.setAttribute("class", "card");
I am trying to create a testimonial section on a wordpress site where there is an "expand" button to show the full testimonial quote. I want the text in the button to change to "collapse" after it is clicked. I also need to add a class to the div wraper so I can implement custom css styling when the button is active. I need this pasted three times. The problem is it fails after the first testimonial.
I have this working with the code below, with it duplicated three times (for three different testimonials) and it works on a basic html document. But when I implement it in a wordpress site by pasting the code, only the first testimonial totally works. The other two do show/hide my inner div element, but they won't insert the .active class or change the text of the button to "collapse"
Both of the second testimonials give a
"Uncaught TypeError: Cannot set property 'innerHTML' of null" in the console.
So for example, here are two out of three of my testimonials I want to show. I have to change the ID's on them to avoid the javascript conflict.
function showhide() {
var content = document.getElementById('hidden-content');
var wrap = document.getElementById('testimonial-wrap');
var btn = document.getElementById('button1');
if (content.style.display === 'none') {
content.style.display = 'block';
wrap.style.background = 'grey';
btn.innerHTML = 'COLLAPSE';
wrap.classList.add('active');
} else {
content.style.display = 'none';
wrap.style.background = 'white';
btn.innerHTML = 'EXPAND';
wrap.classList.remove('active');
}
}
function showhide2() {
var content2 = document.getElementById('hidden-content2');
var wrap2 = document.getElementById('testimonial-wrap2');
var btn2 = document.getElementById('button2');
if (content2.style.display === 'none') {
content2.style.display = 'block';
wrap2.style.background = 'grey';
btn2.innerHTML = 'COLLAPSE';
wrap2.classList.add('active');
} else {
content2.style.display = 'none';
wrap2.style.background = 'white';
btn2.innerHTML = 'EXPAND';
wrap2.classList.remove('active');
}
}
<div id="testimonial-wrap" style="background-color: white;">
<div id="testimonial">
above testimonial content
<div id="hidden-content" style="display: none;">
<p>"hidden content”</p>
</div>
<button id="button1" onclick="showhide()">EXPAND</button>
</div>
</div>
<div id="testimonial-wrap2" style="background-color: white;">
<div id="testimonial">
above testimonial content
<div id="hidden-content2" style="display: none;">
<p>"hidden content.”</p>
</div>
<button id="button2" onclick="showhide2()">EXPAND</button>
</div>
</div>
I think this is what you're looking for. You can do it much easier with jQuery & a small amout of code.
I didn't use display: none as I want to add the transition to the action. (transition won't work with display: none)
$(document).ready(function() {
$(".toggle-button").on("click", function() {
$(this).closest(".testimonial-wrap").toggleClass("active");
});
});
.testimonial-wrap {
background-color: #C1C1C1;
padding: 5px;
margin-bottom: 10px;
}
.testimonial-wrap.active {
background-color: #0095FF
}
.hidden-content {
height: 0px;
visibility: hidden;
transition: all 0.5s ease-out;
}
.active .hidden-content {
height: 100px;
visibility: visible;
transition: all 0.5s ease-in;
background-color: rgba(0, 0, 0, 0.5);
}
button {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testimonial-wrap">
<div id="testimonial">
<p>above testimonial content</p>
<div class="hidden-content">
<p>"hidden content”</p>
</div>
<button id="button1" class="toggle-button">EXPAND</button>
</div>
</div>
<div class="testimonial-wrap">
<div id="testimonial">
<p>above testimonial content</p>
<div class="hidden-content">
<p>"hidden content.”</p>
</div>
<button id="button2" class="toggle-button">EXPAND</button>
</div>
</div>
I have a sample html page where i want to print only three copies of this page and also change original(mentioned in right top corner) to duplicate only if we take a 2nd copy of this page. Is there anyway by which can we achieve this using Javascript or Jquery?
function myFunction() {
window.print();
}
.original {
float : right;
margin-right : -0.1cm;
}
<p>Click the button to print the current page.</p>
<button onclick="myFunction()">Print this page</button>
<div class="col-xs-4"></div>
<div class="col-xs-1 original"><font color="red"><strong>Original</strong></font></div>
I have tried to give simple solution which holds flag of print count temporarily. Please check below.
var v1=0;
function myFunction() {
if (v1==0) {
window.print();
}
else {
window.print();
$('#s1').text('Duplicate');
}
v1++;
}
.original {
float : right;
margin-right : -0.1cm;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click the button to print the current page.</p>
<button onclick="myFunction()">Print this page</button>
<div class="col-xs-4"></div>
<div class="col-xs-1 original"><font color="red"><strong id="s1" >Original</strong></font></div>
Hope this will help you!
Here, The sample Code. Pls Check now.
#printable { display: none; }
#media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version <div id="count"></div>
</div>
<a href="#" id="autoclick" onclick="window.print();">Print<a>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function() {
var beforePrint = function() {
console.log('Functionality to run before printing.');
};
var afterPrint = function() {
console.log('Functionality to run after printing');
var vals = $('#inc').val();
var incval = parseInt(vals)+parseInt(1);
$('#inc').val(incval);
if(incval < 3)
{
window.setTimeout('window.print()',5000);
}
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());
</script>
<input type="text" id="inc" value="0">
I am trying to create a button from Chimp.net that when you click on it opens an iframe with a pop up window, but I have an error in the code and I can not recognize it.
Can anybody see the problem?
This is the page where I am getting the code:
http://blog.chimp.net/chimp-custom-widget/
Code:
<script type="text/javascript" src="https://chimp.net/widget/js/loader.js?NzYyNSxtaW5pLHRlYWwsUGluayBTaGlydCBEYXkgMjAxNixHcm91cA%3D%3D" id="chimp-button-script" data-hide-button="true" data-script-id="oriol"> </script>
<h1>Button</h1>
<div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"><strong>Button</strong><br> You can click on this div! It'll open the form.</div>
<script type="text/javascript">
$(document).ready(function() {
$("#custom-chimp-button").on("click", function() {
var frame = document.getElementById("chimp-form-oriol");
var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*");
frame.style.opacity = 1;
frame.style.display = "block";
});
});
</script>
You are missing the jquery.min.js reference on your page I guess. Please add it and see what you get.
Here on SO; iframe are not allowed so it won't show up in this code snippet.
$(document).ready(function() { $("#custom-chimp-button").on("click", function() { var frame = document.getElementById("chimp-form-oriol"); var content = frame.contentWindow; content.postMessage("open-chimp-frame", "*"); frame.style.opacity = 1; frame.style.display = "block"; }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://chimp.net/widget/js/loader.js?NzYyNSxtaW5pLHRlYWwsUGluayBTaGlydCBEYXkgMjAxNixHcm91cA%3D%3D" id="chimp-button-script" data-hide-button="true" data-script-id="oriol"> </script>
<h1>Button</h1>
<div id="custom-chimp-button" width="200px" height="200px" style="background: red; cursor: pointer; padding: 10px; margin: 10px;"> <strong>Button</strong><br> You can click on this div! It'll open the form.</div>