Making elements appear/disappear with Prototype - javascript

I need to make a make elements within a div appear and disappear when the div is clicked. When then webpage is loaded, it should just say "Click here". After clicking, new text saying "Click here again" should appear under the original text. After clicking again, new text appears under that saying "Click once more". After clicking again, all that text is deleted and new text saying "Thank you" appears. After clicking again, that text is deleted and new text saying "Goodbye" appears. After clicking once more, everything is deleted including the box that the text appears in. I am new to this and don't really know what I'm doing, and I can't even get an alert message to pop up when the div is clicked, which seems like it should be pretty simple. Here is my html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project4.css">
<script src="prototype.js" type="text/javascript"></script>
<script src="project4.js" type="text/javascript"></script>
</head>
<body>
<div id="main" class="box">
<p id="clickHere">Click here</p>
<p id="clickHereAgain">Click here again</p>
<p id="clickOnceMore">Click once more</p>
<p id="thankYou">Thank you</p>
<p id="goodbye">Goodbye</p>
</div>
</body>
</html>
My javascript code to just try to get an alert to pop up:
$(document).ready(function(){
$("div").click(function(){
alert("The paragraph was clicked.");
});
});
And my css code:
.box {
background-color: green;
color: white;
width: 300px;
height: 200px;
padding: 10px;
text-align: center;
font-size: 30px;
}

Here is a raw solution for your problem in jQuery, you may just transfer the logic to prototype.js:
$(document).ready(function() {
// turn off your paragraphs and buttons
$("#click2").hide();
$("#click3").hide();
$("#click4").hide();
$("#button2").hide();
$("#button3").hide();
$("#button4").hide();
// click the first button and hide and show the next
$("#button1").click(function() {
$("#click1").hide();
$("#button1").hide();
$("#button2").show();
$("#click2").show();
});
// click the second button and hide and show
$("#button2").click(function() {
$("#click2").hide();
$("#button2").hide();
$("#button3").show();
$("#click3").show();
});
// then the third
$("#button3").click(function() {
$("#click3").hide();
$("#button3").hide();
$("#click4").show();
});
});
And your HTML code:
<p id="click1">This is paragraph 1</p>
<button id="button1">Click me</button>
<p id="click2">This is paragraph 2</p>
<button id="button2">Click me again</button>
<p id="click3">This is paragraph 3</p>
<button id="button3">Click me one more time</button>
<p id="click4">You are done clicking</p>
Not an elegant solution, but those are the basics of it, jQuery has a toggle() function, just in case you need to give the user the ability to show the paragraph again. replace .show() and .hide() with .toggle()

For starters, set a click observer for the div and all of its children:
$("div").observe('click', myHandler);
Then perform the show/hide operation in myHandler.
A working example:
// array of paragraph ids to show/hide
const ids = ["clickHere", "clickHereAgain", "clickOnceMore",
"thankYou", "goodbye"];
const idCount = ids.length;
let index = 0;
// add click listener to div
$("main").observe('click', myHandler);
// handle the click
function myHandler () {
if (index >= idCount - 1) return;
// hide the currently visible paragraph
$(ids[index]).addClassName('hide');
// show the next paragraph
index++;
$(ids[index]).removeClassName('hide');
}
.hide {
display: none;
}
.box {
background-color: green;
color: white;
width: 300px;
height: 100px;
padding: 10px;
text-align: center;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js" type="text/javascript"></script>
<div id="main" class="box">
<p id="clickHere">Click here</p>
<p id="clickHereAgain" class="hide">Click here again</p>
<p id="clickOnceMore" class="hide">Click once more</p>
<p id="thankYou" class="hide">Thank you</p>
<p id="goodbye" class="hide">Goodbye</p>
</div>

Related

Make content of header disappear when menu opens

I basically want to make that when I press on a button the first time it adds display: none; to an element and when I press it again it makes the element appear again (so add display: none;). How would I do this with jQuery?
This is the jQuery I tried to implement but as I'm new to Javascript I don't know why it isn't working.
$('#menuBtn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.header-text').css({
'display': 'none'
});
} else {
$('.header-text').css({
'display': 'block'
});
}
$(this).data("clicks", !clicks);
});
Use toggle or slideToggle (With animation)
$('#menuBtn').on('click', function() {
$('.header-text').toggle();
});
$('#menuBtnSlide').on('click', function() {
$('.header-text').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn">Toggle</button>
<button id="menuBtnSlide">SlideToggle</button>
<div class="header-text">
This content must me show and hide
</div>
You could supply a modifier class in some external stylesheet for hiding the text and toggle it via toggleClass.
Word of advice: It's best not to use something like toggle because it will inject inline css into your elements, making it difficult to override in the long-run for something so simplistic.
const $headerText = $('.header-text');
$('#menuBtn').click(function() {
$headerText.toggleClass('header-text--hidden');
});
.header-text--hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn" type="button">Toggle</button>
<header>
<p class="header-text">Text 1</p>
<p class="header-text">Text 2</p>
<p class="header-text">Text 3</p>
<p class="header-text">Text 4</p>
</header>
You actually don't need jQuery for this.
You can add CSS rule to set .hidden to display: none and then toggle that class when the button is clicked.
To catch the click event on the button, you need a click event listener
const header = document.querySelector('.header');
const toggle = document.querySelector('.menu-toggle');
toggle.addEventListener('click', () => {
header.classList.toggle('hidden')
});
.header {
background: red;
height: 3em;
}
.hidden {
display: none;
}
<header class="header"></header>
<button class="menu-toggle">Click me!</button>
.hidden{display:none !important;}
$('#menuBtn').click(function() {
$('.header-text').toggleClass("hidden");
});

hide body tag but still show a div

<script>
$(document).ready(function(){
$("#print").click(function(){
$("body").hide();
$("p").show();
window.print();
$("body").show();
});
});
</script>
</head>
<body>
<p>THIS SHOULD BE PRINTED </p>
<button >Hide</button>
<button >Show</button>
<button id="print">print</button>
</body>
given is a sample code. Clicking on print button should hide body of page except the values inside "p" tags. need help as to how to achieve this ?
is there some way of making "p" tag or "div" tag act as body temporarily ?
Use below given function to first hide all child of body tag and then show the required child
$("body").find("*").hide();
I would structure your application differently as you can't show something contained within the element you have hidden.
<body>
<div id="hide-me"></div>
<p id="show-me">THIS SHOULD BE PRINTED</p>
</body>
and change your logic to something like this...
$(document).ready(function(){
$("#print").click(function(){
$("#hide-me").hide();
$("#show-me").show();
window.print();
$("#hide-me").show();
});
});
It can be risky to hide everything in the page. Also, the approach makes you ahve to add the content after hiding the body.
A better approach is to make the content you want come to the front, fill up the whole screen, and hide everything else behind it without deleting.
And it's very simply to do so.
$(function() {
$('.show-print').on('click', function() {
$('.print-container').addClass('active-print');
});
});
.print-container {
position: fixed;
background: white;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.print-container:not(.active-print) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Normal body content
</p>
<button class="show-print">Print</button>
<div class="print-container">
<div class="print-content">
I'm Print. I'm stronger than BODY!
</div>
</div>

JS DOM - Highlight texts with button unobtrusively

Basically, I have to create a button that when clicked, I need to retrieve all the paragraphs within the div and make their background highlighted.
Then I have to write the corresponding JS code (in an unobtrusive manner) to link the button to a function that highlights the paragraphs when clicked.
The button should act as a “toggle”, that is, if the paragraphs are already highlighted, then clicking the button unhighlight them. If the paragraphs aren’t highlighted, then clicking the button highlights them. The button’s text should change to reflect this so it should either say click to highlight or click to unhighlight. So far, I'm trying to create a function that iterates over these paragraphs but the highlight isn't working
** I know that the mark tag in html would highlight a text is there any way i can add that to my js code? **
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="task2.js"></script>
<style>
#poem {
padding: 10px;
margin-bottom: 10px;
color: blue;
font-size: 1.25em;
font-family: sans-serif;
background-color: silver;
border: 1px dashed black;
width: 30%;
}
</style>
</head>
<!- Modify code to add a button ->
<body>
<div id="poem">
<h2> How Many, How Much </h2>
<h4> by Shel Silverstein </h4>
<p> How many slams in an old screen door? </p>
<p> Depends how loud you shut it.</p>
<p> How many slices in a bread?</p>
<p> Depends how thin you cut it.</p>
<p> How much good inside a day? </p>
<p> Depends how good you live 'em. </p>
<p> How much love inside a friend? </p>
<p> Depends how much you give 'em. </p>
</div>
<button id="button"> Click to highlight </button>
</body>
</html>
js code:
function pageLoad() {
var button = document.getElementById("button");
button.onclick = okClick;
}
function okClick() {
var allParas = document.getElementsByTagName("p");
for (var i=0; i < allParas.length; i++) {
if(allParas[i].classList.contains('highlightClass')) {
allParas[i].classList.remove('highlightClass');
} else {
allParas[i].classList.add('highlightClass');
}
}
}
window.onload = pageLoad;
create a new class highlightClass.
if ( allParas[i].classList.contains('highlightClass') ) {
allParas[i].classList.remove('highlightClass');
}else{
allParas[i].classList.add('highlightClass');
}

I want to fadeIn only the image i click on when the square is blank

console.log('Test Sourced');
var onReady2 = function() {
console.log('memory game doc ready');
//TODO Add your code below to attach your event listeners to functions
//hides the images when button is clicked
$("#revealHide").click(function() {
$('.cardImg').fadeToggle('fast');
});
$(".cardDiv").click(function() {
$(".cardImg").fadeIn('slow')
});
};
//shows the img when clicked on the black box
// on document ready run the onReady2 function
$(document).ready(onReady2);
// revealHide function hides and shows all cards
function revealHide() {
//TODO add your code here to get the desired functionality
}
// singleClickFunc function hides and shows an indivdual card
function singleClickFunc() {
//TODO add your code here to get the desired functionality
}
body {
background-color: LightCyan;
}
.cardDiv {
background-color: blue;
width: 150px;
height: 150px;
padding: 6px;
margin: 6px;
border-style: dashed;
float: left;
}
img {
width: 150px;
height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-3</title>
<script src="vendors/jquery.min.js" charset="utf-8"></script>
<script src="script.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button id="revealHide" type="button">Show/Hide</button>
</div>
<div class="cardDiv">
<img class="cardImg" id='cardOne' src="imgs/banana.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardTwo' src="imgs/pear.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardThree' src="imgs/orange.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardFour' src="imgs/apple.png">
</div>
</body>
</html>
On line 15-17 I want to click on a blue box and only reveal that picture when I click on it
To show the .cardImg in a .cardDiv when you click on it, use $(this).find('.cardImg') to target the .cardImg in that element instead of targeting all of them with $('.cardImg')
$(".cardDiv").on('click', function() {
$(this).find(".cardImg").fadeIn('slow')
});
replace $(".cardImg").fadeIn('slow') with $(this).find('img').fadeIn('slow')
console.log('Test Sourced');
var onReady2 = function() {
console.log('memory game doc ready');
//TODO Add your code below to attach your event listeners to functions
//hides the images when button is clicked
$("#revealHide").click(function() {
$('.cardImg').fadeToggle('fast');
});
$(".cardDiv").click(function() {
//$(".cardImg").fadeIn('slow')
$(this).find('img').fadeIn('slow')
});
};
//shows the img when clicked on the black box
// on document ready run the onReady2 function
$(document).ready(onReady2);
// revealHide function hides and shows all cards
function revealHide() {
//TODO add your code here to get the desired functionality
}
// singleClickFunc function hides and shows an indivdual card
function singleClickFunc() {
//TODO add your code here to get the desired functionality
}
body {
background-color: LightCyan;
}
.cardDiv {
background-color: blue;
width: 150px;
height: 150px;
padding: 6px;
margin: 6px;
border-style: dashed;
float: left;
}
img {
width: 150px;
height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-3</title>
<script src="vendors/jquery.min.js" charset="utf-8"></script>
<script src="script.js" charset="utf-8"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<button id="revealHide" type="button">Show/Hide</button>
</div>
<div class="cardDiv">
<img class="cardImg" id='cardOne' src="imgs/banana.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardTwo' src="imgs/pear.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardThree' src="imgs/orange.png">
</div>
<div class="cardDiv">
<img class="cardImg" id='cardFour' src="imgs/apple.png">
</div>
</body>
</html>
Remember that $(".cardImg") is still a 'set' of matched elements, just like $(".cardDiv") is. If you do $(".cardImg").anythingAtAll() then you will perform the function on the entire set of matched elements, which is exactly the behavior you're describing. You want to add an event listener to each of your .cardDiv elements, so this part of your code is correct.
$(".cardDiv").click(function() {
});
Once inside of the function, you want to take an action on the 'specific element' that was clicked. You DO NOT want to take an action on the entire set of matched elements inside $('.cardImg'). So, instead of calling the fadeIn() function on that matched set, call it instead on the the specific element that was clicked. When inside the function, the keyword that gives you the specific element is this. Once you wrap the this keyword inside a jquery wrapper, $( ), like so $(this), you can then perform jquery functions on it, like fadeIn() and find() for example. find() will drilldown the DOM tree from the clicked element and find any elements that match whatever was passed in, in this case we pass in ".cardImg".
Your code should be:
$(".cardDiv").on('click', function() {
$(this).find(".cardImg").fadeIn('slow')
});

How to remove a tag when the contenteditable div contains text?

How would you completely remove the tags when the user enters something into the contenteditable <p>?
HTML: Before
<p contenteditable="true"></p>
Now if the user types *Some text* into the contenteditable <p>, the page will now display:
HTML: After
Some text
Rather than
<p contenteditable="true">Some text</p>
If you want to remove the p tag on pressing Enter key, you can use the following:
$('p').keyup(function(e) {
if ($(this).attr('contentEditable') == "true") {
if (e.which == '13') {
$(this).contents().unwrap('p');
}
}
});
p {
border: 2px solid gray;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p contenteditable="true">Edit me and press Enter</p>
Use replaceWith()
var text = $('[contenteditable="true"]').text();
$('[contenteditable="true"]').replaceWith(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p contenteditable="true">Some text</p>

Categories