I need to display an image and some info about the item when a checkbox is clicked. For some reason nothing is happening and I have been tweaking this for a while with no response whatsoever.
Here is my javascript:
<script type = "text/javascript">
function displayOnChecked(var checkboxID, var id) {
if(document.getElementById(checkboxID)) {
document.getElementById(id).style.display = "block";
} else {
document.getElementById(id).style.display = "none";
}
}
</script>
In the stylesheet I have it on display: none;
Here is one of my invocations:
<input type="checkbox" name="purchasedItem" id = "item" onclick="displayOnChecked('item', 'itemInfo');">
No need for the var keyword in the arguments list of displayOnChecked, just have the variable names alone.
If you look in your console, you should be getting an error: Uncaught SyntaxError: Unexpected token var
You don't intialize variables as function arguments:
function displayOnChecked(var checkboxID, var id)
should be
unction displayOnChecked(checkboxID, id)
You can achieve this, just using the CSS pseudo-element :checked:
.checkmeout {
display: none;
position: absolute;
top: 12px;
left: 150px;
width: 400px;
height: 100px;
padding: 12px;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
}
.checkmeout img {
display: block;
width: 200px;
height: 50px;
background-color: rgb(0,0,255);
}
.checkme:checked ~ .checkmeout {
display:block;
}
<form>
<input type="checkbox" name="checkme" class="checkme" /> Check Me
<div class="checkmeout">
<img src="" alt="Check Me Out Image" />
<p>Check Me Out Text Description</p>
</div>
</form>
Related
Mouse on one element and another do the action, and only the other one has action.
I want to make a mouse on and change background colour effect, but it works on only one.
Whatever the mouse is pointing on, only one will change the colour.
Here is the code (HTML with JS)
<div class = science style = "position:absolute; left:20px">
<script language="javascript">
function hightback() {
document.getElementById("part1").style.backgroundColor = "#744e4e";
}
function removehightback() {
document.getElementById("part1").style.backgroundColor = "#524c44";
}
</script>
<button id = "part1" onclick="window.location.href='science.html';" value="science" onmouseover="hightback()" onmouseout="removehightback()">
<div class = science1 style = "position:absolute; left:40px; top:45px;">
<h1>Science</h1>
</div>
</button>
</div>
<div class=art style="position:absolute; left:280px">
<script language="javascript">
function hightback() {
document.getElementById("part2").style.backgroundColor = "#744e4e";
}
function removehightback() {
document.getElementById("part2").style.backgroundColor = "#524c44";
}
</script>
<button id="part2" onclick="window.location.href='art.html';" value="art" onmouseover="hightback()" onmouseout="removehightback()">
<div class=art1 style="position:absolute; left:40px; top:45px;">
<h1>Art</h1>
</div>
</button>
</div>
Here is the CSS:
.science1 h1 {
color: #b6ab8f;
size: 55;
font-family: "Josefin Sans", sans-serif;
text-align: left;
}
.science button {
border-radius: 50px;
background: #524c44;
padding: 20px;
width: 230px;
height: 300px;
}
.art1 h1 {
color: #b6ab8f;
size: 55;
font-family: "Josefin Sans", sans-serif;
text-align: left;
}
.art button {
border-radius: 50px;
background: #524c44;
padding: 20px;
width: 230px;
height: 300px;
}
You overwrite your functions for part2. Why not make one unique function for all elements?
Please check below example:
function changeBgColor(id, color) {
document.getElementById(id).style.backgroundColor = color;
}
And now you can use them in such way
<button id="part1"
onclick="window.location.href='art.html';"
value="art"
onmouseover="changeBgColor('part1', '#744e4e')"
onmouseout="changeBgColor('part1', '#524c44')" >
<div class=art1 style="position:absolute; left:40px; top:45px;">
<h1>Art</h1>
</div>
</button>
<button id="part2"
onclick="window.location.href='art.html';"
value="art"
onmouseover="changeBgColor('part2', '#744e4e')"
onmouseout="changeBgColor('part2', '#524c44')" >
<div class=art1 style="position:absolute; left:40px; top:45px;">
<h1>Art</h1>
</div>
</button>
Also you can simplify your code and instead of js use css styles
#part1, #part2 {
backgound-color: #524c44;
}
#part1:hover, #part2:hover {
backgound-color: #744e4e;
}
Your problem here is overlapping JS code as it is calling the second version of the function in the next script tag. I suggest using css hover instead.
Example:
#part_1:hover {
background-color: black;
}
I'm actually quite lost and don't know where to start. So basically what I'm trying to achieve is when the button is clicked, the text and video will reveal. Otherwise hide it when clicked away.
picture of how I want it
preview on the html page
HTML
<div id="abl1"> <!-- Ability ONE VIDEO HEAL SHOT !-->
<video preload="auto" autoplay="autoplay" type="video/mp4" src="sleepdart.mp4" loop></video>
</div>
<div class="shape1"></div>
<p class="ability1txt">Text.</p>
<div class="button.abl">
<button id="abl1.btn" class="ability1"></button>
</div>
CSS
abl1 video{
height: 500px;
width: 600px;
z-index: 1;
position: absolute;
margin-top: 50px;
margin-left: 200px;
}
.ability1txt{
position: absolute;
text-align: center;
width: 600px;
font-size: 27px;
z-index: 10px;
margin-left: 55%;
margin-top:8%;
font-family: "BigNoodleTitling";
color: white;
}
You can do it by javascript as following:
function ab1_Click() {
var vid1 = document.getElementById("ab1Video");
var t1 = document.getElementById("ab1Text");
var v = "visible";
if (vid1.style.visibility != "hidden") { v = "hidden"; }
vid1.style.visibility = v;
t1.style.visibility = v;
}
<div id="abl1"> <!-- Ability ONE VIDEO HEAL SHOT !-->
<video id="ab1Video" preload="auto" autoplay="autoplay" type="video/mp4" src="sleepdart.mp4" loop></video>
</div>
<div class="shape1"></div>
<p id="ab1Text" class="ability1txt">Text.</p>
<div class="button.abl">
<button id="abl1.btn" class="ability1" onclick="ab1_Click()">Show/Hide</button>
</div>
Use jQuery.
You could always use raw Javascript but using jQuery makes things a whole lot easier. Generally, Javascript is used for interactivity.
Your Javascript code would look something like this:
$(document).ready(function() {
$('div.button\.abl button#abl1\.btn').click(function() {
if ($('div#abli video').is(':visible') && $('p.ability1txt').is(':visible')) {
$('div#abli video').hide(); // or fadeOut()
$('p.ability1txt').hide(); // or fadeOut()
} else {
$('div#abli video').show(); // or fadeIn()
$('p.ability1txt').show(); // or fadeIn()
}
});
});
You really don't need JavaScript to make video and text show/hide. By using only CSS and HTML we could hide anything with a strategically placed checkbox and label. Added some JavaScript so the video pauses when it's hidden, but the show/hide feature requested doesn't need any JavaScript.
Details commented in Demo
Demo
// Reference the <video> and <input type='checkbox'>
var v = document.getElementById('vid0');
var c = document.getElementById('chx0');
/* Whenever label.btn is clicked, the checkbox triggers
|| the change event. When a change happens, the <video>
|| will play if the checkbox is checked and pause if
|| it isn't
*/
c.onchange = function(e) {
if (this.checked) {
v.play();
} else {
v.pause();
}
}
html,
body {
width: 100%;
height: 100%;
}
/* Although .chx is "gone", it is still able to
|| influence and be influenced by other elements
*/
.chx {
display: none
}
.case {
display: none;
height: 270px;
width: 480px;
}
/* When checkbox is checked the figure.case
|| that follows the label.btn which in turn
|| follows the checkbox is revealed
*/
.chx:checked+.btn+.case {
display: block;
}
#vid0 {
width: 100%;
height: 100%;
display: block;
}
.cap {
text-align: center;
width: 100%;
font-size: 27px;
color: white;
display: table;
background: rgba(0, 0, 0, 0.6);
}
.btn {
font-size: 48px;
display: inline-block;
width: 8ch;
height: 2ex;
cursor: pointer;
color: #00f;
text-shadow: 3px 1px 2px #555;
}
.btn::before {
content: '▶'
}
/* When the checkbox is checked, the pseudo-element
|| of label.btn that follows the checkbox changes its
|| icon to pause.
*/
.chx:checked+.btn::before {
content: '⏸';
font-size: 54px;
}
<input id='chx0' class='chx' type='checkbox'>
<!--
[for] attribute value is the #id of the form-control it is accosiated with. This association allows the <label> to act as the form-control's proxy. Simply put, if label#btn0 is clicked, then input#chx0 is checked or unchecked.
-->
<label id="btn0" class='btn' for='chx0'></label>
<figure class="case">
<video id='vid0' preload="auto" autoplay loop src="https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005611.mp4" width='480' height='270'></video>
<figcaption class='cap'>1 min/11 sec Leader</figcaption>
</figure>
I want to set up a functionality for a button that causes text to appear underneath it on click.
For example, when you click a button that says "Sign up now", text would appear underneath the button that says "Are you a member, yes or no?".
"Yes" and "No" would be links that bring you to a different page depending on how you answer.
My button code so far (just html and styling done):
<a href="/ticket-link" target="_blank" class="ticket-button">Sign Up
Now</a>
I'm new with this kind of functionality so any help would be greatly appreciated!
Thanks!
Adjust the href attribute as you want.
$('#btn').click(function() {
$('#modal').fadeIn();
});
a {
display: block;
text-decoration: none;
color: white;
background-color: #333;
width: 100px;
padding: 20px;
border-radius: 5px;
margin: 0 auto;
}
#modal {
width: 300px;
height: 120px;
background-color: #ccc;
border-radius: 5px;
margin: 0 auto;
display: none;
}
#modal h3 {
text-align: center;
padding: 10px;
}
#modal a {
width: 50px;
display: inline-block;
text-align: center;
margin: 0 auto;
height: 10px;
vertical-align: middle;
line-height: 10px;
}
.btns {
width: 200px;
margin: auto;
}
a:hover {
background-color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/ticket-link" target="_blank" class="ticket-button" id='btn'>Sign Up Now</a>
<div id='modal'>
<h3>Are you a member?</h3>
<div class='btns'>
Yes
No
</div>
</div>
You could use the onClick function to unhide text, or elements, below it.
Sign Up Now
<span style="display:none;" id="text">This is some text :D</span>
simple way:
Sign Up Now
<script>
function confirmSignup(){
if(confirm("Are you sure?"))
{
window.location.href="http://somelocation.com/sign-up";
}
}
</script>
Like #Pety Howell said, you can use the onClick function to unhide the text. Here's a pretty straightforward way to do it with jQuery.
$(function() {
$('.link').on('click', function() {
$('.span').addClass('open');
});
});
.span {
display: none;
}
.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click me
<span class="span">I'm hidden!</span>
Working fiddle: https://jsfiddle.net/3gr03yzn/4/
You could use jQuery toggle() function.
HTML :
<button id="member">
Are you Member ?
</button>
<div class="answer">
Yes<br />
No
</div>
JS :
$("#member").click(function() {
$(".answer").toggle();
});
CSS :
.answer {
display:none;
}
The working example on jsFiddle.
Hope this helps
Try this code.
please vote if this code helpful to you
function execute(){
var x = document.getElementById('link_list');
var y =document.getElementById('btn');
if(x.style.visibility==="hidden"){
y.style.visibility="hidden";
x.style.visibility="visible";
}
}
<button onclick="execute()" id="btn">sign up</button>
<div id="link_list" style="visibility:hidden">
Are you a member, <button onclick="window.open('http://sparrolite.blogspot.in')">Yes</button> or <button onclick="window.open('google.com')">no</button>
</div>
Most answers mentioned here either uses
jQuery or,
onclick attribute which is obtrusive javascript.
Here's how to achieve the desired behavior using vanilla, unobtrusive JavaScript.
window.onload = function() {
var button = document.querySelector('.ticket-button');
var info = document.querySelector('.info');
info.style.display = 'none';
var dispalyInfo = false;
button.onclick = function(e) {
e.preventDefault(); /* prevent page from navigating to a new page onclick */
if (dispalyInfo) {
info.style.display = 'none';
dispalyInfo = false;
} else {
info.style.display = 'initial';
dispalyInfo = true;
}
}
}
.ticket-button {
display: block;
}
Sign Up Now
<span class="info">Are you a member, yes or no?</span>
References:
Document.querySelector()
HTMLElement.style
I am trying to get a specific value on CSS class through querySelector but still can't find a solution:
What I'm trying to get is the "40px" value:
function onS(obj) {
var logo = document.querySelector('.logo');
var value = logo.style.marginLeft;
alert(value);
}
.logo { display: block; position: relative; margin-left: 40px; }
<div class="logo" onmouseover="onS(this)">Test!</div>
Is there any way?
logo.style just looks at the inline style attribute, it doesn't get the computed style.
To get CSS values from a <style> tag or external stylesheet, use window.getComputedStyle()
function onS(obj) {
var logo = document.querySelector('.logo');
var value = window.getComputedStyle(logo).marginLeft;
alert(value);
}
.logo { display: block; position: relative; margin-left: 40px; }
<div class="logo" onmouseover="onS(this)">Test!</div>
I used jQuery to get the value...
function onS(obj) {
var logo = $('.logo');
var value = logo.css('marginLeft');
alert(value);
}
.logo { display: block; position: relative; margin-left: 40px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo" onmouseover="onS(this)">Test!</div>
I'm trying to make a terminal shell like page.
See my code at jsfiddle:
http://jsfiddle.net/paopaomj/qGw4Q/9/
The input line seems have more line-height then the outputs.
Try it and type something press some enters you'll know what I mean.
Thanks.
html:
<body>
<div id="output"></div>
<div id="input">
root#host
<input type="text" id="command" />
</div>
javascript:
$("#command").keyup(function (e) {
if (e.keyCode == 13) {
submit();
}
});
var submit = function () {
var commandEl = document.getElementById("command");
var command = commandEl.value;
var outputel = document.getElementById("output");
var new_row = document.createElement("div");
new_row.innerHTML = "root#host " + command;
outputel.appendChild(new_row);
commandEl.value="";
};
The input got some padding. Add
padding:0px;
margin-left:-1px;
to the input css
OK.
I got it sovled finally by setting margin=0 for input field, margin-top=0 for iutput div, and margin-bottom=0 for output div:
#output { margin-bottom: 0px; background-color: #000000; }
#input { margin-top: 0px; background-color: #000000; }
input {
border: 0;
background: #000000;
color: #00FF00;
outline: none;
font-family:'Rosario', sans-serif;
font-size: 16px;
padding: 0px;
margin-left: -0.1px;
margin: 0px;
}
Thanks for Johan's help!