I get a problem when creating a dropdown list. When I trigger the dropdown by toggle the "show-item" class, it doesn't work. Can you guys help me to see what happen? Thx!!! There's the code below
var duration_dropdown = document.getElementById('duration-dropdown');
var mins_ctn = document.getElementById('mins-ctn');
duration_dropdown.onclick = function(){
mins_ctn.classList.toggle('show-item')
}
<body>
<div class="container">
<div class="title">
<h1>Dropdown Demo</h1>
</div>
<div class="dropdown-ctn">
<div class="dropdown">
<button id="duration-dropdown" class="dropdown-mins">MM</button>
<div class="mins-ctn" id="mins-ctn">
<span class="minute">01</span>
<span class="minute">02</span>
<span class="minute">03</span>
<span class="minute">04</span>
</div>
</div>
</div>
</div>
<script src="dropdown.js"></script>
</body>
Related
i have this code, witch is basically a click counter in javascript.
my question is, is it possible to show the "clicks" in two different pages?
My goal is to make two identical pages, but the second one is just to show the click counting, as the first one is to click and at the same time to show the counting.
i dont have much experience in programing.
all help is much apreciated :)
html page code:
<!DOCTYPE html>
<html>
<head>
<title>FCT</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/jquery-3.3.1.min.js"></script>
<script src="lib/scripts.js"></script>
<script src="chama.js"></script>
</head>
<body>
<button type="button" onclick="hello()">Anterior</button>
<button type="button" onclick="bye()">Próximo</button>
<div class="barraTop"> </div>
<div class="container page">
<div class="row barraSuperior">
<div class="col-xs-1">
<img src="imagens/espamol.png" height="150" width="250">
</div>
<div class="col-xs-11" style="text-align: right;">
<p></p>
<span class="uespiTexto">Escola Secundária Padre António Martins de Oliveira</span><br>
<span class="subtitulo">Matrícula Institucional <strong>SiSU 2019</strong></span>
<!-- <img src="imagens/sisu.png" class="sisuLogo"> -->
</div>
</div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="barraTop"> </div>
<div class="row">
<div class="senhaAtual">
<div class="row">
<div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
<span class="senhaAtualTexto">SENHA </span>
</div>
<div class="col-xs-5" style="text-align: left;">
<span id="senhaAtualNumero"><a id="clicks" style="color:white">0</a></span>
</div>
<!--<input type="hidden" id="senhaNormal" value="0000">
<input type="hidden" id="senhaPrioridade" value="P000">-->
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 ultimaSenha">
<br>
<span id="ultimaSenhaTexto">ÚLTIMA CHAMADA</span><br>
<span>Senha </span>
<span id="ultimaSenhaNumero">0000</span>
</div>
</div>
</div>
<audio id="audioChamada" src="audio/chamada.wav"></audio>
</body>
</html>
and javascript code:
var clicks = 0;
function hello() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
function bye() {
clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
};
Only if one page opens the other one*.
If you use var w=window.open() you can access the other page's document in w.document. And, from the second page, you can access the first one's in window.parent.document.
*That is with js only. If you can use a server language you could make something more complex using ajax or even sockets.
Using Bootstrap...
How to make this so that only one accordion collapsable DIV is open at a time. When one is clicked open, the other should close (if it is open?)
Looking for the most simple and streamlined solution...
<div class="row" id="nav-top">
<div class="col-md-6">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >SIGN-IN</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-6">
<div>
REGISTER
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
</div>
You have to use show.bs.collapse event which is fired immediately when the collapse element starts showing. Then you can hide other collapsible menus, Like this:
// when showing signin accordion
$('#signin').on('show.bs.collapse', function () {
// hide register accordion
$('#register').collapse('hide');
});
$('#register').on('show.bs.collapse', function () {
$('#signin').collapse('hide');
});
But If you have multiple accordion you can't call this event in each one of them, You have to use a class to select them all and call show.bs.collapse only one time, Here is a working example:
$( document ).ready(function() {
$('.collapse').on('show.bs.collapse', function () {
// hide all accordion except the clicked one
$('.collapse').not(this).collapse('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" id="nav-top">
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >ABOUT</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#register" >REGISTER</a>
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#about" >SIGN-IN</a>
</div>
<div id="about" class="collapse">
FORM HERE
</div>
</div>
</div>
</div>
Is there any option/s needed so the icons inside nested grid will be clickable?
I have an icon on the parent grid and it's working fine, but when it comes to the icons inside nested grid, nothing happens.
<div class="grid-stack parent-grid">
<div class="grid-stack-item wid-item" data-gs-x="0" data-gs-y="0" data-gs-no-move="true">
<div class="grid-stack-item-content wid-item-content">
<div class="widget-container">
<div class="widget-title">
<span id="wid-title">WIDGET TITLE</span>
<span class="widget-icon icon-enlarge"></span>
<span class="widget-icon icon-bin"></span>
</div>
<div class="widget-body">
<div class="grid-stack widget-component">
<div class='grid-stack-item wid-component-item'>
<div class='grid-stack-item-content'>
<div class='widget-title'>
<span class='widget-icon icon-bin'></span>
</div>
<div class='widget-body'>
<label>Widget 1</label> <br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".icon-bin").click(function (e) {
alert("ASD");
});
</script>
I have many sets of div and I'm trying to copy the content of a specific span into another one and repeat the same operation for all my divs.
Here is my html code:
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
And my jQuery code is:
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere').clone(true, true).contents().appendTo('span.ContentGoesHere');
});
It almost works, right now what I get in my span.ContentGoesHere is: This is my content 1This is my content 2This is my content 3 - and it's the same content for all but the content needs to be specific to each div.item.
Thank you for your help.
Try The code below
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere')
.clone(true,true).contents()
.appendTo($(this).find('span.ContentGoesHere'));
});
To See The demo in jsFiddle
Click here to see Demo In JsFiddle
Try the code bellow.
$("div.item").each(function(i) {
var content = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(content);
});
If you type your function like this:
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
Then the end result will looks like this:
This is my content 1
This is my content 1
This is my content 2
This is my content 2
This is my content 3
This is my content 3
See snippet for the working code.
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
See it working
Your way
$("div.item").each(function(i) {
var targetElement = $(this).find('span.ContentGoesHere');
var sourceHtml = $(this).find('span.ContentComesFromHere').clone().contents()
sourceHtml.appendTo(targetElement);
});
Simpler way
$("div.item").each(function(i) {
var contents = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(contents);
});
In your case you need find the source and target both by $(this).find()
Just replace to .appendTo($(this).find('span.ContentGoesHere')); into your JS code and I hope it will be work.
By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.
The markup:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
The jQuery:
$(document).ready(function() {
$('#close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.
I'd demo the code on jsFiddle but is seems to be down atm.
You can not have the same id of two element on the page. If you want to do that give it as a class name like -
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the Jquery like -
$(document).ready(function() {
$('.close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
Hope this will help.
Here is how it should be:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the JavaScript:
$(document).ready(function() {
$('.close').click(function(e) {
$(this).parents('.holder').forEach(function(){
$(this).fadeOut(250);
});
e.preventDefault();
});
});