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>
Related
I am trying to create a quiz game that allows the user to simply click on an image as their answer.
I
function checkimage(){
}
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:50px;
background-color:rgba(255, 128, 0, 0.54);
text-align: center
}
h2{
padding: 10px;
background-color: red;
}
#container{
margin : 20px auto;
background-color: white;
height: 60%;
width : 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px 0px;
position: relative;
}
*{
box-sizing: border-box;
}
.column{
float:left;
width:100%;
padding:5px;
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="game.css">
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<div class="column">
<input type="image" id="forest" src="forest.jpg" style="width:50%"> </div>
<input type="image" id="snow" src="snow.jpg" style="width:50%"
onclick="checkimage"> </div>
</div>
</div>
<div>
<script src="game.js"></script>
</div>
</body>
</html>
have tried firstly to make the images into buttons which worked because they are clickable.However, i have very basic javascript knowledge and i am not able to do the "on-click" function that once the user clicks the image, the program will check if the image clicked is the right answer and then return a message.
You can get id value when an image got clicked and then you can compare with your original answer to check whether it's right or not.
function checkimage(element) {
var rightAns = "Apple";
if (element.id == rightAns) {
alert("You selected right ans!")
} else {
alert("You selected wrong ans!")
}
}
<h3>Which image is of an apple?</h3>
<input type="image" id="Apple" src="https://www.organicfacts.net/wp-content/uploads/apple.jpg" style="width:25%;height:25%;" onclick="checkimage(this)"></div>
<input type="image" id="Watermelon" src="https://snaped.fns.usda.gov/sites/default/files/styles/crop_ratio_7_5/public/seasonal-produce/2018-05/watermelon.jpg?itok=6EdNOdUo" style="width:25%;height:25%;" onclick="checkimage(this)"></div>
Note that here i am passing reference of an image element to the
javascript function on click event like
'onclick="checkimage(this)"' where 'this' is a reference.
Hello this is simple if i understood correctly, you need to use hidden values in your html code for example:
//OPTION 1:
<img src="IMAGE_PATH_HERE" onClick='answerIs('id_here_or_answer_here')'/>
//OPTION 2:
using hidden values
<input type='hidden' value='id_here_or_answer' id='answer_{id should be unique}'/>
Finally if you are using a loop you could use any option with uniques ID in order to make it work:
function checkimage(id){
$answer = $('#answer_'+id).val().toString;
}
//or while//
for ($i; $i>=10; $i++){
//input or image as you wish
//<inputs OR <img TAGS
<input type='hidden' value='id_here_or_answer' id='answer_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');return false;'/>
}
//end//
in fact, you are telling to the JS what ID is the real answer even if you have a lot of options
USAGE in your case:
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" href="game.css">
<script>
$( document ).ready(function() {
console.log( "ready!" );
function checkimage(value){
alert('answer is:' + value);
if (value == "apple"){
//do something
}else{
//optionally do something here too
}
}
});
</script>
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<div class="column">
<input type="image" id="forest" src="forest.jpg" style="width:50%" onClick="checkimage('apple');return false;"> </div>
<input type="image" id="snow" src="snow.jpg" style="width:50%"
onClick="checkimage('banana');return false;"> </div>
</div>
</div>
<div>
<script src="game.js"></script>
</div>
function checkimage(id){
$answer = $('#answer_'+id).val().toString;
}
//or while//
for ($i; $i>=10; $i++){
//input or image as you wish
<inputs OR <img TAGS
<input type='hidden' value='snow' id='snow_<?= $i; ?>' onClick='checkimage('<?= $i; ?>');reuturn false;'/>
}
//end//
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:50px;
background-color:rgba(255, 128, 0, 0.54);
text-align: center
}
h2{
padding: 10px;
background-color: red;
}
#container{
margin : 20px auto;
background-color: white;
height: 60%;
width : 100%;
border-radius: 5px;
box-shadow: 0px 5px 15px 0px;
position: relative;
}
*{
box-sizing: border-box;
}
.column{
float:left;
width:100%;
padding:5px;
}
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<title>Quiz</title>
<script>function checkimage(value)</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1> Welcome to the Shopping Quiz Game</h1>
<div id="container">
<div class = "question">
<h2>which of the following is a fruit? click on the image </h2>
<div class = "quiz">
<input type="image" id="snow" src="snow.jpg" style="width:50%" onclick="checkimage('snow');return false;"></div>
<input type="image" id="forest" src="forest.jpg" style="width:50%" onclick="checkimage('forest');return True;"> </div>
</div>
<div>
<script src="test.js"></script>
</div>
</body>
</html>
I want to save captured image in a folder from webcam. My code captures image only but how can I store it in a folder. This is my first time to do this. If anyone mention that it will be helpful for me. Thanks in advance.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS Test Page</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id="results">Captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="webcam.min.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<!-- A button for taking snaps -->
<form>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
</form>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
} );
}
</script>
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);
});
I have looked up a question on the website (How to display javascript variables in a html page without document.write)
But when executing it in my own coding program it does not work. Hope you can help out!
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset ="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
html {
font-family: sans-serif;
font-size: 16px;
}
h1 {
margin: 1em 0 0.25em 0;
}
input[type=text] {
padding: 0.5em;
}
.jsValue, .jqValue {
color: red;
}
</style>
</head>
<body>
<!-- This <input> field is where I'm getting the name from -->
<label>Enter your name: <input class="name" type="text" value="World"/></label>
<!-- Plain Javascript Example -->
<h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
<!-- jQuery Example -->
<h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
<script>
//https://stackoverflow.com/questions/9689109/how-to-display-javascript-variables-in-a-html-page-without-document-write
// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');
$jsName.addEventListener('input', function(event)){
$jsValue.innerHTML = $jsName.value;
}, false);
</script>
</body>
</html>
Because you have syntax error.. check the console.
Correct code should be:
$jsName.addEventListener('input', function(event){
$jsValue.innerHTML = $jsName.value;
}, false);
I am using ngPaste on a contentEditable div instead of input type text. However, I am unable to fetch the pasted content in the way mention in this link. I am always getting undefined in my handler for ngPaste. Here's the code:
HTML:
<div contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))">
</div
>
JS:
scope.stripHtml = function(content) {
console.log(content); //this is always undefined
}
What am I doing wrong? How can I fetch the pasted content?
The Below Code (Modified from Sergey's) Worked in Windows platform, Firefox 43.0.4, Chrome 47.0.2526.111 m but NOT in IE 11.0.9.
<!DOCTYPE html>
<html>
<head>
<style>
.editable {
background: white;
height: 55px;
border: 2px solid blue;
width: 55%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('sampleController', function($scope) {
$scope.stripHtml = function(content) {
alert(content);
console.log(content);
};
});
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>AngularJS ng-paste within ContentEditable Div</title>
</head>
<body ng-app="myApp">
<div ng-controller="sampleController">
<div class="editable" contentEditable="true" ng-paste="stripHtml($event.clipboardData.getData('text/plain'))"></div>
</div>
</body>
</html>