I would like to expand /collapse a text. I found several codes for that, but the issue they are using separates files for that .html
What I need is to have all of them set in the same doc, .html
Because I'm using a HTML editor, so I'm obliged to have all the code in the same page.
Please advise what to do or if there is a tutorial that would be very helpful.
Thank you in advance.
You can do this with pure HTML. Use <details>
<details>
<summary> click me </summary>
Text you want to expand or collide
</details>
Its that simple
Here you go study this and you will understand the basics:
W3Schools
Edit your code with this(there is allot more than just brackets):
Brackets
This is one page HTML with style tag and script tag:
Your css would go into the <style></style>
Your js would go into the <script></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html/js; charset=utf-8" />
<title>Untitled Document</title>
<style>
.page-header {
color: #000;
}
#click {
border-radius: 2%;
height: 30px;
color: green;
}
</style>
</head>
<body class="test">
<header class="page-header">SIMPLE EXAmPLE</header>
<div class="row">
<div class="element">
<div class="start" id="testdiv"></div>
<button id="click">click to color background</button>
</div>
</div>
</body>
<script type="text/javascript">
var clickAlert = document.getElementById('click');
var rainbow = ["red", "blue", "green", "yellow"];
function change() {
document.body.style.background = rainbow[Math.floor(4*Math.random())];
}
clickAlert.addEventListener("click", change);
</script>
</html>
Related
This question already has answers here:
css javascript style sheet disabled?
(3 answers)
Closed 4 years ago.
I have an question about modify the tag type attribute problem. In my case, I want to dynamicly change the type to make it work or disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style r = "1" type = "text/css">
h1 {
font-size: 20px;
}
</style>
<style r = "2" type = "not work">
h1 {
font-size: 40px;
}
</style>
</head>
<body>
<script>
var style1 = document.querySelector('[r="1"]')
var style2 = document.querySelector('[r="2"]')
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "style1.type='text/css';style2.type='not work'">
<input type="button" value="make text 40px" onclick = "style2.type='text/css';style1.type='not work'">
</body>
</html>
So here's the example : click me
It works on chrome, but nor work in ie11, safari. Anybody can help ? Thanks a lot.
Addition: What i am doing is to change page style depends on some condition, say: language. In some reason I cant use mvvm framework.
That's not how you do it, actually. It's bad practice to change styles this way. It's better to change just one element style and not whole page style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type = "text/css">
h1 {
font-size: 20px;
}
</style>
</head>
<body>
<script>
function changeStyle(fontSize) {
var heading = document.querySelector('h1')
heading.style.fontSize = fontSize;
}
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "changeStyle('20px')">
<input type="button" value="make text 40px" onclick = "changeStyle('40px')">
</body>
</html>
Based on this http://qnimate.com/creating-a-wysiwyg-html-editor/ example created short code
<!doctype html>
<html>
<head>
<title>WYSIWYG Editor</title>
</head>
<body>
<button onclick="displayhtml()">Display HTML</button>
<div class="editor" style="width: 50px; height: 100px; background-color: white; border: 1px solid grey;" contenteditable="true" spellcheck="true">
</div>
<div class="htmloutput">
</div>
<script>
function displayhtml() {
document.getElementsByClassName("htmloutput")[0].textContent = document.getElementsByClassName("editor")[0].innerHTML;
}
</script>
</body>
</html>
On local computer created index file inside wamp/www and pasted the code.
Inside class="editor" typed Enter text Enter. Then clicked on button onclick="displayhtml()"
And i see
<div><br></div><div>text</div><div><br></div>
instead of expected <br>text<br>
Tried here http://jsfiddle.net/24fyrhga/6/
All ok.
Why on local computer i see these divs and how to remove them?
This is my javascript for replacing some text:
document.body.innerHTML = document.body.innerHTML.replace(/Sometext/g, 'difference');
Ho do I change color, font-size, font and such?
I need to link my script like this, can't use { otherwise:
<script>$(document).ready($.getScript("url"));</script>
I though something like this would work:
window.onload = function() {
document.body.innerHTML =
document.body.innerHTML.replace(/Deckling/g, result);
}
var str = "The Liberator";
var result = str.fontcolor("Red").italics().fontsize(6);
result.style.fontFamily = "Harrington";
Any help? (first post and very limited Knowledge)
You can wrap you text in a div or span tag, select it in JS applying a class.
The class will contains the style for your text.
Just a quick example in vanilla javaScript (no jquery):
http://jsbin.com/yufiteseme/1/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a {
color:red;
font-style: italic;
font-size: 6px;
{
</style>
<script>
function changeColor(){
document.getElementById('text').classList.add('a');
}
</script>
</head>
<body onload="changeColor()">
<div id="text">
Test for example
</div>
</body>
</html>
You can change style of an html element using javascript, put your script below the element.
The following example changes the style of a 'p' element using javascript:
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").style.color = "red";
document.getElementById("p1").style.fontFamily = "Arial";
document.getElementById("p1").style.fontSize = "larger";
</script>
</body>
</html>
You can also change style of an html element using jquery.
The following example changes the style of a 'p' element using jquery:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$('#p1').ready(function(){
$('#p1').css({"color": "green"}).css({"fontFamily": "Arial"}).css({"fontSize": "24px"});
});
</script>
</head>
<body>
<p id="p1">Hello World!</p>
</body>
</html>
That will not work:
var result = str.fontcolor("Red").italics().fontsize(6);.
You need to add css to change the surface.Add this to your header:
.textstyle{
font-size:16px;
font-family:Harrington;
}
</style>
And add this to your window.onload:$('body').addClass('textstyle');
Is there a way to link javascript to a certain style in the css? Here is an example of what I want to do:
syntax onclick="[change style to external stylesheet class-for example changes]". Is there a special function to do this.?
changes { /*just an example, i know i can do this is css and html only*/
background-img:url("");
}
Please comment if you need more information.
sample.css
.rednode{
background-color: red;
}
.bluenode{
background-color: blue;
}
In JS,
function changeClass(node) {
node.classList.remove("rednode");
node.classList.add("bluenode");
}
In HTML,
<span class='rednode' onclick='changeClass(this)'/>
Try Add class Remove Class
Here I will show one Example ;
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#RC").click(function(){
$("p").removeClass("intro");
});
$("#AC").click(function(){
$("p").addClass("intro");
});
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<p class="intro">Add Class Remove Class Example</p>
<button id="RC">Remove Class</button>
<button id="AC">Add Class</button>
</body>
</html>
Try this.. It may Help you !
Yes, you could do
onclick="this.style='color: red;';"
if that's what you want.
You would put it in an HTML element:
<p style="" onclick="this.style='color: red;';">Some text</p>
Or, if you want to link to a class or id:
<p class="" onclick="this.class='red';">Some text</p>
With the external css file having:
.red { color: red;
}
Hope this helps!
I'd like to display a div on a webpage when a user clicks on a button.
Does someone know how to do this ?
My code, so far, is :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso 8859-1" />
</head>
<body>
<input id="text" type="text" size="60" value="Type your text here" />
<input type="button" value="When typing whatever text display the div balise on the page" onclick="check();" />
<script type="text/javascript">
function check() {
//Display my div balise named level0;
}
</script>
</body>
</html>
Thanks,
Bruno
EDIT: All my code (I've erased it because it was too long and not very clear)
You can use document.createElement("div") to actually make the div. Then you can populate the div using innerHTML for the text. After that, add it to the body using appendChild. All told, it can look like this:
function check() {
var div = document.createElement("div");
div.innerHTML = document.getElementById("text").value;
document.body.appendChild(div);
}
This will add a div every time the button is pressed. If you want to update the div each time instead, you can declare the div variable outside the function:
var div;
function check() {
if (!div) {
div = document.createElement("div");
document.body.appendChild(div);
}
div.innerHTML = document.getElementById("text").value;
}
If you have the div already in the page with an id of "level0", try:
function check() {
var div = document.getElementById("level0");
div.innerHTML = document.getElementById("text").value;
}
A quick search on google gave me this example:
Demo of hide/show div
The source-code for that example is:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<html>
<head>
<title>Demo of Show hide div layer onclick of buttons</title>
<META NAME="DESCRIPTION" CONTENT="Displaying and hiding div layers through button clicks">
<META NAME="KEYWORDS" CONTENT="Show layer, hide layer, display div, hide div, button on click, button on click event, div property, div style set">
<style type="text/css">
div {
position: absolute;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
</head>
<body>
<input type=button name=type value='Show Layer' onclick="setVisibility('sub3', 'inline');";><input type=button name=type value='Hide Layer' onclick="setVisibility('sub3', 'none');";>
<div id="sub3">Message Box</div>
<br><br>
</body>
</html>
Paste this code somewhere in your body
<div id="myDiv" style="display:none">
Hello, I am a div
</div>
Add this snippet into your check() function to display the otherwise-hidden content.
document.getElementById("myDiv").style.display = "block";
You could also change the div content programmatically thus:
document.getElementById("myDiv").innerHTML = "Breakfast time";
... would change the text to 'Breakfast time'.
You might want to look into jquery, it'll make your life 100 times easier.
Jquery is a javascript library (script) that you include and it allows you to manipulate the DOM very easily.
Start by adding the latest Jquery to your head which will allow you to use something like $(document).ready( )
The function inside .ready( fn ) is a callback function; it get called when the document is ready.
$("#lnkClick") is a selector (http://api.jquery.com/category/selectors/)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#lnkClick").click( function() {
$("#level0").attr("style", "display: block;width: 100px; height: 100px; border: solid 1px blue;");
});
});
</script>
</head>
<body>
<div id="level0" style="display:none;">
</div>
Click me
</body>
</html>
Of course this code can be made cleaner. You want to check: http://api.jquery.com/click/
There are plenty of examples.
Best of luck with Jquery!
you really should be using jquery , there's a little bit of a learning curve but once you get it, developing web apps is much easier.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function() {
$("#show_div_button").click(function() {
$("#div_to_show").show();
return false;
});
});
</script>
</head>
<body>
Click Me to Show the Div
<div style="display:none" id="div_to_show">I will be shown when the link is clicked</div>
</body>
</html>