I want to display div on page load e.g."campaign-alert", but I am not able to do this .
This is sample code :
<div id="popup">
<div id="campaign-alert" style="display:none;">
.
.
.
</div>
</div>
I have tried this way as well :
document.getElementById('campaign-alert').style.display="";
document.getElementById('campaign-alert').style.display="block";
Can anybody help me in this ?
Try this. It will help you.
Using Jquery
$(document).ready(function () {
$("#campaign-alert").show();
});
Using JavaScript
window.onload = function () {
document.getElementById("campaign-alert").style.display = "block";
};
try the following
$(function () {
$("#campaign-alert").show();
});
You shaould try it using onload()
HTML:
<body onload="load()">
<div id="popup">
<div id="campaign-alert" style="display:none;">
.
.
.
</div>
</div>
</body>
Javascript:
function load(){
document.getElementById('campaign-alert').style.display="block";
}
$(document).ready(function () {
$("#campaign-alert").show();
});
Where #campaign-alert selects the element with id campaign-alert
You can do it using below function its working and tested.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function remove_style(all)
{
var i = all.length;
var j, is_hidden;
var attr =
[
'style'
];
var attr_len = attr.length;
console.log(attr_len);
j = attr_len;
all.removeAttribute(attr[0]);
}
function showdiv()
{
var all = document.getElementById('campaign-alert');
remove_style(all);
}
</script>
</head>
<body onload="showdiv();">
<div id="popup">
<div id="campaign-alert" style="display:none;">
<h1>show me </h1>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body onload="myFunction()">
<div id="popup">
<div id="campaign-alert" style="display:none;">
.1
.2
.3
</div>
</div>
<script>
function myFunction() {
document.getElementById("campaign-alert").style.display = "block";
}
</script>
</body>
</html>
Related
Inside my entry header I have entry title (h1 tag) and inside of it I have <sup> tag. This title is coming from WordPress and superscript tag is working but I want to find every "tm" inside every title and capitalize it using js/jquery.
This is my html:
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>TM</sup></h1>
</div>
and my js:
$(document).ready(function(){
$('sup:contains("tm")')
$(this).css({
'cssText': 'text-transform: uppercase !important'
});
});
But this doesn't work. Does anybody know why?
I was working on a "pure JS" solution when #gabriel-lupu answered! :-D
Well, I'm posting here just in case:
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
<style type="text/css">
.myStyle {
text-transform: uppercase;
color: red;
}
</style>
</head>
<body>
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>TM1</sup></h1>
</div>
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>Middle</sup></h1>
</div>
<div class="entry-header">
<h1 class="entry-title">Just Testing Something<sup>TM2</sup></h1>
</div>
<script type="text/javascript">
function setClassOfElemWithText(elem, text, myClass) {
var nodes = document.querySelectorAll(elem);
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.textContent.indexOf(text) !== -1) {
node.setAttribute('class', myClass);
}
}
}
setClassOfElemWithText('sup', 'TM', 'myStyle');
</script>
</body>
</html>
Just looked at your question and this works for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Change tm</title>
</head>
<body>
<div class="entry-header">
<h1 class="entry-title">
<sup>copy</sup>Just Testing Something<sup>tm</sup>
</h1>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script>
$(document).ready(function () {
$("sup:contains('tm')").css("text-transform", "uppercase");
});
</script>
</body>
</html>
i have this problem, I would like to load a text inside a div with .innerHTML but after the event click the text inside the div diseappers:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Anagrafica</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>My Document</h1>
<input type="submit" value="submit" id="submit">
<div id="myDiv"></div>
<script src="js/app.js"></script>
</body>
</html>
app.js
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click',function({
document.getElementById('myDiv').innerHTML= 'hello';
});
You have syntax error , )} missing .
addEventListener('click', function({
Looks like callback but you need just function(){} to attach.
window.addEventListener('load',function(){
document.getElementById('submit').addEventListener('click', function(){
document.getElementById('myDiv').innerHTML= 'hello';
}, false);
}, false);
<input type="submit" value="submit" id="submit">
<br/>
<br/>
<div id="myDiv" style="background-color:black;color:lime;width:300px" > ... </div>
On html
<button type='submit'></button>
On js
var Button = document.querySelector("button");
Button.addEventListener("click", onClickButton, false);
function onClickButton(){
// to do something here
}
So I'm being asked to create a side by side "frame" in html. When content from the iframe on the left is selected, it populates the link in an iframe next to it on the same page.
Additional background: The left hand side is the menu bar generated from Tableau and the right hand side would be the visualization attached. Using target like in the code below hasn't worked:
<div id="left">
<iframe src="http://www.weather.gov/" target="myDemoFrame"></iframe>
</div>
<div id="right">
<iframe name="myDemoFrame" src=""></iframe>
</div>
Any advice is much appreciated.
Assuming you control both pages, you can message between the iframes with postMessage, with the left window messaging the parent and the parent messaging the right child, an example is below:
outer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.frame {
width: 45vw;
height:95vh;
}
</style>
</head>
<body>
<iframe src="left.html" class="frame" id="left"></iframe>
<iframe src="right.html" class="frame" id="right"></iframe>
</body>
<script>
var l = document.getElementById("left");
var r = document.getElementById("right");
window.onmessage = function(e){
if (l.contentWindow == e.source) {
r.contentWindow.postMessage(e.data, '*')
}
};
</script>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="clickEvent()">SEND</button>
</body>
<script>
function clickEvent() {
window.top.postMessage({"payload": "Hello from the other side"}, '*')
}
</script>
</html>
right.html
<!DOCTYPE html>
<html lang="en">
<body>
</body>
<script>
window.onmessage = function(e){
if (e.source == window.top) {
if (e.data["payload"]) {
alert(e.data["payload"]);
}
}
}
</script>
</html>
Edit - Pure navigation answer
outer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.frame {
width: 45vw;
height:95vh;
}
</style>
</head>
<body>
<iframe src="left.html" class="frame" id="left"></iframe>
<iframe class="frame" id="right"></iframe>
</body>
<script>
var l = document.getElementById("left");
var r = document.getElementById("right");
window.onmessage = function(e){
if (l.contentWindow == e.source && e.data["payload"]) {
r.src = e.data["payload"]
}
};
</script>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="navigate('http://www.bing.com')">BING</button>
<button onclick="navigate('http://www.example.com')">EXAMPLE</button>
</body>
<script>
function navigate(url) {
window.top.postMessage({"payload": url}, '*')
}
</script>
</html>
How can I pass argument to function redirect in JavaScript
Here is my code:
<script type="text/javascript">
<!--
function redirectlink(text){
window.location = "index.php?keyName="+ text;
}
//-->
</script>
<form>
<button type="button" id="butt_1" onclick="redirectlink(KEY_POWER)"> 1 </button>
Thank you in advance.
This can be done either by using getElementById and addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo">Click</button>
<script type="text/javascript">
document.getElementById("foo").addEventListener("click", function(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
})
</script>
</body>
</html>
either onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo" onclick="action()">Click</button>
<script type="text/javascript">
function action(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
}
</script>
</body>
</html>
Using onclick is deprecated.
With just only JavaScript (without jQuery / Angular etc.) you can use addEventListener on click event.
for example:
var btn = document.getElementById('butt_1');
btn.addEventListener('click', function(e) {
// your code
});
In this function you can for example get value/txt from this button element and something else which you want.
All I'm getting in my output is changeColor is not defined and changeAgain is not defined. I have tried to fix it but it doesn't seem to work. Any help would be appreciated, I have looked everywhere!!!
Here's my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body onLoad="alert('Website Loaded');">
<script language="javascript" type="text/javascript">
function changeColor() {
document.GetElementById("h3style").style.color = "red";
document.GetElementById("h3style").firstChild.nodeValue = "RED!";
return true;
}
function changeAgain() {
document.GetElementById("h3style").style.color = "gray";
document.GetElementById("h3style").firstChild.nodeValue = "Gray...";
return true;
}
</script>
<noscript>
<h1>THIS CONTENT REQUIRES JAVASCRIPT | PLEASE ENABLE JAVASCRIPT</h1>
</noscript>
<h3 id="h3style" onMouseOver="changeColor()" onMouseOut="changeAgain()">Scroll on me</h3>
</body>
</html>
It should be getElementById.
Check docs here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body onLoad="alert('Website Loaded');">
<script language="javascript" type="text/javascript">
function changeColor() {
document.getElementById("h3style").style.color = "red";
document.getElementById("h3style").firstChild.nodeValue = "RED!";
return true;
}
function changeAgain() {
document.getElementById("h3style").style.color = "gray";
document.getElementById("h3style").firstChild.nodeValue = "Gray...";
return true;
}
</script>
<noscript>
<h1>THIS CONTENT REQUIRES JAVASCRIPT | PLEASE ENABLE JAVASCRIPT</h1>
</noscript>
<h3 id="h3style" onMouseOver="changeColor()" onMouseOut="changeAgain()">Scroll on me</h3>
</body>
</html>