Displaying text when link is clicked - javascript

This is inside my CSS:
div.hide {
display:none;
}
div.show {
color: #66CCFF;
}
This is in my HTML:
16:10
<script language="JavaScript">
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>
I'm trying to make the first link display the "This is your monitors aspect ratio." text lower on the page.
Any help is much appreciated.

Pure CSS Answer
Ok, if you just want to append text after you have moved to a position in a page using an anchor tag, you could do it with nothing but CSS similar to the following:
a:target:after{
content: " Test";
background-color: #ccffcc;
}
What this does is appends the text "Test" after the active anchor and colors. Here is an example page with implementation:
<!DOCTYPE html>
<html>
<head>
<title>Link Printer 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
a:target:after{
content: " Test";
background-color: #ccffcc;
}
.bigSection{
height: 200px;
}
</style>
</head>
<body>
<div class="bigSection">
<div><a name="first">First</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="second">Second</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="third">Third</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
</body>
</html>
Answer using JavaScript
You need to bind an eventListener and prevent it from moving to the next page. Here is a way to do it with JavaScript or CSS. The JavaScript way will actually set the text to whatever you want. The CSS way will hide actually hide the element.
<!DOCTYPE html>
<html>
<head>
<title>Link Printer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.hide{
display: none;
}
</style>
<script>
function jsShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.innerHTML === "") {
divToManip.innerHTML = "Hello";
}
else {
divToManip.innerHTML = "";
}
event.preventDefault();
}
function cssShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.className === "") {
divToManip.className = "hide";
}
else {
divToManip.className = "";
}
event.preventDefault();
}
function setListeners() {
document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
}
window.onload = setListeners;
</script>
</head>
<body>
<div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
<div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
<div id="text">I'm text</div>
</body>
</html>

"showText" must receive an id parameter to be used with the call to "document.getElementById"
Try this, just 1 link that will display the text below after click:
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>
I'm just using style display to hide/show the element. Hope it helps.

just change your css like this:
div.show {
display:block;
color: #66CCFF;
}

Here I am going to provide an example with something that I was working, thank you Alberto Montellano for the example, that gave me an idea, however what was required at the end was something a little different, with the option not to show the data and display it only when I click and make it disappear when click again. In this example I am going to give you two options; you can have a button or a link to trigger the JS function to display and hide the body text, you can choose if you want the button or link that is way I put a comment (optional), both behave as the same, it is up to you which one you want to use.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>
<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>
<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>
<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>
<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>
<!-- JS -->
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>

Related

Display webpage only on Desktop

I have created a webpage using HTML, CSS, JS (Paper.js)
But I want my webpage to be displayed only when opened in desktop sites
if it is opened in any smartphone the a message must appear like open in desktop nothing else must be loaded
because in touch screen devices all functions does not work properly
link to my webpage is -
https://sachinverma53121.github.io/Keypress-Sounds/key-sounds.html
You could use JS to not display the div/tag if the page is less than a certain width
Something like this might do:
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message" style="display: none;">Please use this on a desktop.</p>
<script>
if (window.innerWidth < 500){
document.getElementById("demo").style.display = "none";
document.getElementById("message").style.display = "block";
}
</script>
You could also use CSS
<style>
#message {
display: none;
}
#media (max-width: 500px){
#demo {
display: none;
}
#message {
display: block;
}
}
</style>
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message">Please use this on a desktop.</p>
you can do this in bootstrap like this. The paragraph hides on mobile size if you want to hide it on tablet size too, change the "sm" to "md" to find out how to use it visit this link https://getbootstrap.com/docs/4.2/utilities/display/:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>title</title>
</head>
<body>
<div class="d-none d-sm-block">
<p>hide me on mobile</p>
</div>
<div class="d-block d-sm-none">
<p><strong>show me on mobile</strong></p>
</div>
</body>
</html>
add a
<script>
var userAgent;
(function() {
userAgent = navigator.userAgent.toLowerCase();
if (typeof orientation !== 'undefined' || userAgent.indexOf('mobile') >= 0); {
alert('open in desktop');
} else {
document.body.innerHTML = 'your HTML as a string here';
}
})();
</script>

alert with following picture

I was was wondering if I could make an alert and a picture appear then disappear here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<center><h1>Are you human???</h1></center>
<button id="button">Yes</button>
<button onclick="no" id="no">No</button>
<script>
function no(){
alert("Really you are interesting")
}
There is no pictures in your code.
But if you mean - show alert popup window, you should add parentheses like so onclick = "no()"
You cannot customize alert window.
But if you want just show some picture after button click, you should add <img> with display: none to the page and onclick change it to display: block.
You can't put a picture in the alert box.You can achieve it by putting up an image in a div keeping the display:none for that and then show hide it like this
function no() {
alert("Really you are interesting")
$("#msg").fadeIn("slow").delay("100").fadeOut("slow");
}
div{
position:fixed;
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
display:none;
}
<div id="msg">
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"/>
</div>
<center>
<h1>Are you human???</h1>
</center>
<button id="button">Yes</button>
<button onclick="no()" id="no">No</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Call a javaScript url when a visitor clicks inside div

How to execute a javaScript url when a visitor clicks inside div
Like this example :
<html>
<head>
<meta charset="UTF-8">
<style>
.youtube .play,.youtube img{cursor:pointer;position:absolute}
.youtube{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;max-width:100%;background:#000;margin:5px}
.youtube embed,.youtube iframe,.youtube object{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0}
.youtube img{bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;right:0;top:0;border:none;height:auto;-webkit-transition:.4s all;-moz-transition:.4s all;transition:.4s all}
.youtube img:hover{-webkit-filter:brightness(75%)}
.youtube .play{height:72px;width:72px;left:50%;top:50%;margin-left:-36px;margin-top:-36px;background:url(//i.imgur.com/TxzC70f.png) no-repeat}
</style>
</head>
<body>
<div class="youtube" data-id="YQHsXMglC9A"></div>
</body>
<script>
/* Light YouTube Embeds by #labnol */
/* Web: http://labnol.org/?p=27941 */
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});
function labnolThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function labnolIframe() {
var iframe = document.createElement("script");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
</script>
</html>
Like this picture
image
.
Html code + javascript :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="a" style="background-color:#999; height:90px; width:250px;" >Click here</div>
</body>
</html>
Javascript :
<script type="text/javascript">
document.write("Hello World!");
</script>
Or :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
How do I run javaScript url when a visitor clicks inside div ?
Something liked this would do it...
function clickMe() {
alert("You clicked me!")
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="a" style="background-color:#999; height:90px; width:250px;" onclick="clickMe()" >Click here</a></div>
</body>
</html>
First of all, instead of trying to run a script, you should try to run a function.
For example
function test(){
document.write("Hello World!")
}
function test2(){
document.getElementById("output").innerHTML = "Hello World!"
}
<div onclick="test()">
<p> Click me </p>
</div>
<div onclick="test2()">
<p> Click me (won't remove screen) </p>
</div>
<div id="output">
</div>
Clicking on the first div will call the test() function. This function will however overwrite everything on the screen, that's not what you want.
The second method doesn't do that, instead it sets the content of the third div to "Hello World!"
I believe you want to run a JavaScript function when your div gets clicked. You just need to add an onclick() event to your <div> tag and declare that function. So your div would be something like this:
<div id="a" style="background-color:#999; height:90px; width:250px;" onclick="writeFunction();">Click here</div>
And the function, with the same name as you declared on your onclick:
<script type="text/javascript">
function writeFunction(){
document.write("Hello World!");
}
</script>
As you have used document.write and i have kept that, it does not show the result that you have illustrated in your picture and your div is vanishing. In order to do as you have imagined, you have to add a <p> element which is initally blank:
<p id='text'></p>
and then ask your function to set its text, like this:
document.getElementById('text').innerHTML = "Hello World!";
You can learn more here: https://www.w3schools.com/jsref/event_onclick.asp

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>

Find a class using js and localStorage

I'm trying to convert a value stored by localStorage and then turn it into a class so I can manipulate it in the DOM.
I'm very new to javascript, so please allow me to explain:
I have a html file with multiple divs, and localStorage stores the class of the div that was last clicked.
I want my script to call the stored class from localStorage, find the div with that class (using jquery OR js, doesn't matter) and then change the background colour of that div using .css(), for example. I'll be able to do what I need to do with that logic, but I can't get it to work.
So what I am trying to do is $('the last clicked div').css({..manipulate the css..});
Is this possible?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript">
$(document).ready(function () {
//always show the current div class
$("b").html(localStorage.getItem("currentDiv"));
//get the class of the div that's just been clicked
$("div").click(function(){
var currentClass = $(this).attr("class");
localStorage.setItem("currentDiv", currentClass);
$("b").html(localStorage.getItem("currentDiv"));
});
//show the div that was last clicked
function currentStatus(){
if (localStorage.getItem("currentDiv") === $(currentClass))
{
$(currentClass).show();
$("b").html(localStorage.getItem("currentDiv"));
}
}
//set a color for the recently clicked div dynamically, not by .click
var highlightClass = localStorage.getItem("currentDiv");
highlightClass.css({
'background' : 'black'
})
});
$('#localStorageTest').submit(function() {
localStorage.clear();
});
</script>
<style type="text/css">
[class*="slide"]{
display: inline-block;
padding: 40px;
background: #999;
margin: 20px;
}
/*.slide1{
display: block;
}*/
</style>
</head>
<body onLoad="currentStatus()">
<div class="slide1">
<h1>"A question would go here."</h1>
</div>
<div class="slide2">
<h1>"A question would go here."</h1>
</div>
<div class="slide3">
<h1>"A question would go here."</h1>
</div>
<div class="slide4">
<h1>"A question would go here."</h1>
</div>
<div class="slide5">
<h1>"A question would go here."</h1>
</div>
<div class="slide6">
<h1>"A question would go here."</h1>
</div>
<div class="slide7">
<h1>"A question would go here."</h1>
</div>
<b></b>
</body>
</html>
Here's how to make it work, the core thing being: $("."+currentDivClass) which converts the string to a class!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
[class*="slide"]{
display: inline-block;
padding: 40px;
background: #999;
margin: 20px;
}
/*.slide1{
display: block;
}*/
</style>
</head>
<body>
<div class="slide1">
<h1>"1 A question would go here."</h1>
</div>
<div class="slide2">
<h1>"2 A question would go here."</h1>
</div>
<div class="slide3">
<h1>"3 A question would go here."</h1>
</div>
<div class="slide4">
<h1>"4 A question would go here."</h1>
</div>
<div class="slide5">
<h1>"5 A question would go here."</h1>
</div>
<div class="slide6">
<h1>"6 A question would go here."</h1>
</div>
<div class="slide7">
<h1>"7 A question would go here."</h1>
</div>
<b></b>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//always show the current div class
$("b").html(localStorage.getItem("currentDiv"));
//get the class of the div that's just been clicked
$("div").click(function(){
var currentClass = $(this).attr("class");
localStorage.setItem("currentDiv", currentClass);
$("b").html(localStorage.getItem("currentDiv"));
});
//convert the string of the last clicked div into a class and then work your magic
var currentDivClass = localStorage.getItem("currentDiv");
$("."+currentDivClass).css({
'background' : 'red'
});
});
$('#localStorageTest').submit(function() {
localStorage.clear();
});
</script>
</body>
</html>

Categories

Resources