How To Add Prefix in Class's Name Using JavaScript - javascript

Hi All I am new in JavaScript. I have one HTML file. And I need to add some word in the class's name. Is there any way to do it using JavaScript?
For Example
<!Doctype HTML>
<html>
<head>
<style>
.heading{color:red;}
.text{color:red;}
</style>
</head>
<body>
<h1 class="heading">This is heading.</h1>
<p class="text">This is my text.</p>
</body>
</html>
In need to add "test-" in the class name in head and body both using JavaScript.
After using JavaScript function it should look like this.
<!Doctype HTML>
<html>
<head>
<style>
.test-heading{color:red;}
.test-text{color:red;}
</style>
</head>
<body>
<h1 class="test-heading">This is heading.</h1>
<p class="test-text">This is my text.</p>
</body>
</html>
It would be great help! Thanks in advance.

//$(".heading").addClass('test-heading').removeClass('heading');
//$(".text").addClass('test-text').removeClass('text')
$('.text').attr('class', function() {
return $(this).attr('class').replace('text', 'test-text');
});
$('.heading').attr('class', function() {
return $(this).attr('class').replace('heading', 'test-heading');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<style>
.heading{color:red;}
.text{color:red;}
</style>
</head>
<body>
<h1 class="heading">This is heading.</h1>
<p class="text">This is my text.</p>
</body>
</html>

You can loop Inside the body and add new class.
$("body").children().each(function(index, element) {
var oldclass = $(this).attr('class');
var newClass = "test_" + oldclass
$(this).removeClass(oldclass).addClass(newClass);
});
.test_heading {
color: blue;
}
.test_text {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style>
.heading {
color: red;
}
.text {
color: red;
}
</style>
</head>
<body>
<h1 class="heading">This is heading.</h1>
<p class="text">This is my text.</p>
</body>
</html>

Find all classes of any element, loop through it, add new class and remove existing classes
var element = "body";
var className= "test-";
var classes = $(element).attr('class').split(" ");
classes.forEach(function(i,obj){
$(element).addClass(className + i);
$(element).removeClass(i);
});

Related

On change input in parent send val to iframe with update

I need update iframe's content on input[text] changed(or on some another event).
For example: I'm typing in parent's input "Hello World!!!", and iframe's <h1>Hi</h1> is changing to
<h1>Hello World!!!</h1> symbol by symbol.
Better if solution will be on jQuery, but vanilla js is ok, too))
Thank you very much.
P.S. Sorry for my bad English(
better way is using Window.postMessage => https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
parent Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a Page..</title>
<style>
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
iframe { width: 300px; height: 200px; border: 1px solid #4593c6; }
</style>
</head>
<body>
<p>parent input :
<input id="in-Txt" type="text" placeholder="type something">
<button id="Bt-Send2iFrame">Send2iFrame</button>
</p>
<iframe id="in-Frame" src="xyz_frame.html" ></iframe>
<script>
const inText = document.querySelector('#in-Txt')
, btSend = document.querySelector('#Bt-Send2iFrame')
, inFramW = document.querySelector('#in-Frame').contentWindow
btSend.onclick=_=>{
let info = { inTxt: inText.value }
inFramW.postMessage( JSON.stringify(info), "*")
}
</script>
</body>
</html>
iframe page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p> the iframe </p>
<p id="info-Parent">...</p>
<script>
const infoParent = document.querySelector('#info-Parent')
window.onmessage=e=>
{
let message = JSON.parse ( e.data )
infoParent.textContent = message.inTxt
}
</script>
</body>
</html>
You can pass the value on the parent page as a parameter to the iframe.
Say for example the following
Parent HTML,
<input type="text" id="parenteElem">
<iframe id="frameOnParent">
Parent Script:
<script type="text/javascript">
$("#parentElem").on("change", function(event) {
$('#frameOnParent').attr('src', "test.html?param1=" + $(this).val());
})
</script>
Iframe HTML:
<h1>Hi</h1>
Iframe Script:
<script type="text/javascript">
function getHeader() {
var headerText = window.location.search.substring("param1");
return headerText;
}
var heading = getHeader();
$("h1").html(heading);
</script>

Trouble with Show/Hide code, second level

I cannot for the life of me figure out why the text under Sub1 and Sub2, do not show the text under them, when clicking them. Only the first link "Main Category" functions. It is making me enter more description, though the issue is already explained the best I know how.
<!DOCTYPE html>
<?php
session_start();
print "
<html>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#body {
font-family: 'Helvetica', Arial, sans-serif;
display:none;
width: 100%;
padding: 5px 0;
text-align: left;
background-color: lightblue;
margin-top: 5px;}
</style>
</head>
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
</script>
</body>
</html>
You have a typo in your JS $('.commentsTitle').click(...
In the html you assigned the class commentsTitle, in the JS, you referred to commentTitle.
$(document).ready(function(){
$('.showArticle').hide();
$('.articleTitle').show();
$('.showComments').hide();
$('.commentsTitle').show();
$('.articleTitle').click(function(e){
$(this).next('.showArticle').slideToggle();
e.preventDefault();
});
$('.commentsTitle').click(function(e){
$(this).next('.showComments').slideToggle();
e.preventDefault();
});
});
<body>
<div id="body12">
Main Category</font>
<div class='showArticle'>
Sub1</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text1</b></font>
</div><br>
Sub2</font>
<div class='showComments'>
<font size="+1" color="red"><b>Text2</b></font>
</div></div><br>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
</body>
</html>

Hide body until it finishes loading

I created this code so my page would be hidden until it finishes loading. But my code doesn't work as I expected. I expected this to hide the BODY until the OnLoad event was triggered.
However, instead, it just stays hidden.
Any help would be appreciated, if there is maybe another, better method of hiding the BODY until it finishes loading, or what's wrong with this one.
Here's what I've tried so far:
function unveil() {
var thebod = document.getElementById("testbody");
thebod.STYLE = "display: block;"
}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>
The DOMContentLoaded event of the window object can do this. But, don't hide the body, hide a wrapper instead. And, when you set the style, make sure to set the style of a CSS property, not the style object itself.
window.addEventListener("DOMContentLoaded", function(){
document.getElementById("wrapper").style.display = "block";
});
#wrapper { text-align:center; background:#e0e0e0; display:none;}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY>
<div id="wrapper">
HELLO WORLD!
<!-- The following is only added to create a delay in the
parsing of the document -->
<script>
for(var i = 0; i < 100000000; ++i){ var x = i / 3.14; }
</script>
</div>
</BODY>
</HTML>
You're not setting the elements 'style' correctly:
You can either do:
element.style.display = "block";
Or
element.setAttribute('style', "display: block");
Here is a working example:
function unveil() {
var thebod = document.getElementById("testbody");
thebod.style.display = "block";
}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>
Your issue is here:
thebod.STYLE = "display: block;"
which should read:
thebod.style.display = 'block';
Here is the complete approach (using unobtrusive javascript):
var body = document.getElementsByTagName('body')[0];
function unveil() {
body.style.display = 'block';
}
window.addEventListener('load', unveil, false);
body {
display: none;
}
div {
text-align: center;
}
<div>HELLO WORLD!</div>
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" onload="testbody.style.display = '';" style="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>

How to get div content in javascript variable?

I am trying to get the content of a div in a JavaScript variable.
I did try some code:
<html>
<head>
<script>
function data(){
alert();
var MyDiv1 = document.getElementById('newdata')
alert(MyDiv1);
}
</script>
</head>
<body>
<div id="newdata" style="background-color: red; width: 100px;height: 50px;">
1 <!-- The content I'm trying to get -->
</div>
Logout
</body>
</html>
But it does not work correctly.
Instead of
var MyDiv1 = document.getElementById('newdata')
alert(MyDiv1)
it should be
var MyDiv1 = document.getElementById('newdata').innerHTML
alert(MyDiv1)
OR
var MyDiv1 = document.getElementById('newdata')
alert(MyDiv1.innerHTML)
With .innerHTML you will get the html of specified element in the DOM.
EDIT:-
SEE DEMO HERE
You must use innerHTML.
<html>
<head>
</head>
<body>
<div id="newdata" style="background-color: red; width: 100px;height: 50px;">
1
</div>
Logout
</body>
<script>
function data() {
var MyDiv1 = document.getElementById('newdata').innerHTML;
alert(MyDiv1);
}
</script>
</html>

Access child window elements from parent window using Javascript

I need to access child window elements from parent window. I have written the sample snippets below.
Parent HTML:
<html>
<head>
<title>Parent</title>
<style>
div{
float:left;
cursor:pointer;
}
</style>
<script type="text/javascript">
var SubpopUpWin="";
function Opennew(passedURL){
SubpopUpWin = window.open("popups.html", '_blank','toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes'); SubpopUpWin.document.getElementById("ifrm").src=passedURL;
SubpopUpWin.document.getElementById("ifrm_title").innerHTML=passedURL;
}
</script>
</head>
<body>
<div onclick="Opennew('http://www.google.com')">Google</div>
<div onclick="Opennew('http://www.yahoo.com')">Yahoo</div>
<div onclick="Opennew('http://www.bing.com')">Bing</div>
</body>
</html>
popups.html
<html>
<head>
<title>Child</title>
<style>
div{
float:left;
}
</style>
</head>
<body>
<div>
<div id="ifrm_title"></div>
<div style="margin-top:20px">
<iframe id="ifrm" src="" width="470" height="270" frameborder="0" style="margin-top: 34px" scrolling="no"></iframe>
</div>
</div>
</body>
</html>
In the above code is not working. Even I have used the below script also.
<script type="text/javascript">
var SubpopUpWin="";
function Opennew(passedURL){
SubpopUpWin = window.open("popups.html", '_blank','toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes');
SubpopUpWin.onload=function(){
SubpopUpWin.document.getElementById("ifrm").src=passedURL;
SubpopUpWin.document.getElementById("ifrm_title").innerHTML=passedURL;
}
}
</script>
The above code also not working.
Please share your sugestions/solutions...
Thanks
I feel this is because of some security. You can try this way instead:
<html>
<head>
<title>Parent</title>
<style>
div {
float: left;
cursor: pointer;
}
</style>
<script type="text/javascript">
var SubpopUpWin = "";
var testUrl = "";
function Opennew(passedURL){
testUrl = passedURL;
SubpopUpWin = window.open("popups.htm", '_blank', 'toolbar=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes');
}
</script>
</head>
<body>
<div onclick="Opennew('http://www.google.com')">
Google
</div>
<div onclick="Opennew('http://www.yahoo.com')">
Yahoo
</div>
<div onclick="Opennew('http://www.bing.com')">
Bing
</div>
</body>
<html>
<head>
<title>Child</title>
<style>
div {
float: left;
}
</style>
</head>
<body>
<div>
<div id="ifrm_title">
</div>
<div style="margin-top:20px">
<iframe id="ifrm" src="" width="470" height="270" frameborder="0" style="margin-top: 34px" scrolling="no">
</iframe>
<script type="text/javascript">
document.getElementById("ifrm").src = window.opener.testUrl;
</script>
</div>
</div>
</body>

Categories

Resources