Related
I want to know how to make a video from youtube disappear while i am scrolling down through the page.
Image 1
Image 2
<!-----------------------------VIDEO E TEXTO------------------------------------->
<br>
<br>
<br>
<div class="vid-container">
<div style="max-width:1280px;margin:0 auto; padding:5px; " >
<div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe width="1280" height="720" frameborder="0" allowfullscreen="" autoplay src="https://www.youtube.com/embed/WSYWLB3QKik?autoplay=1&mute=1" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 1280px; max-height: 720px;" tabindex="-1"></iframe>
</div>
</div>
</div>
<section>
<div class="content">
<p>Hardwell (nascido como Robbert van de Corput em Breda, Holanda) é um produtor progressivo de electro house DJ. Em 2009 , após o sucesso de “Show Me Love vs.Be”, ele começou a produzir várias outras track “singles” de sucesso na EDM como “Encoded” e “Cobra” e também começou a forma grandes parcerias como o seu ídolo de infância DJ Tiesto e entre outros nomes da musica eletrônica.
</body>
</html>
(Academic work)
You can look at wheel event.
window.addEventListener("wheel", function(e)
{
let Video = document.querySelector("iframe");
//If deltaY bigger than zero that means we are scrolling down.
if(e.deltaY > 0)
{
Video.style.display = "none";
}
else
{
Video.style.display = "initial";
}
});
I am following a tutorial to make a quiz in js. I am not very good especially with css. Can someone help me to figure it out why at question 3 my answers(from 1-5) are behind the buttons? I want the button to always be under the answers
This is how it should look like:
enter image description here
And this is how it looks:
enter image description here
(function () {
const quizContainer = document.getElementById("quiz");
const resultsContainer = document.getElementById("results");
const submitButton = document.getElementById("submit");
const myQuestions = [
{
question: `Apa pe care o consum este plata, oligoelementala, in recipient de sticla, structurata sau filtrata de la robinet`,
factor: 2,
},
{
question: `Sunt iubitor/consumator de lactate proaspete/ lactate maturate`,
factor:2,
},
{
question: `Am o toleranta buna (pot consuma fara sa dezvolt reactie cutanata/ digestiva/ respiratorie) la
ton, peste spada, rechin, somon, scoici, fructe de mare, alti pesti oceanici
produse care contin gluten: paine, cereale, biscuiti, prajituri, paste, fainoase
alune, migdale, seminte de floarea soarelui, capsuni, alte fructe de padure
mazare, fasole, linte, naut, varza, brocoli, conopida`,
factor:2,
},
{
question: `Consum de 3x/saptamana oua de pasare/icre de peste`,
factor:2,
},
{
question: `Mananc saptamanal stridii, fructe de mare, nuci si seminte, ciocolata neagra`,
factor:2,
},
{
question: `Mananc zilnic fructe de culoare mov/ negre sau rosii`,
factor:2,
},
{
question: `Mananc zilnic ulei de masline/ cocos/ unt/ulei de germeni de grau/ ulei de canepa`,
factor:2,
},
{
question: `Mananc zilnic legume cu frunze verzi : Salata verde/ spanac / rucola / leurda / nasturel /creson de apa / cicoare / andive / patrunjel`,
factor:1,
},
{
question: `Mananc zilnic dulciuri procesate, prajituri, crème`,
factor:2,
},
{
question: `Mananc zilnic proteina animala de tip carne de porc/ vita/pasare`,
factor:2,
},
{
question: `Mananc saptamanal mezeluri/patiserie/conserve sau alte alimente care contin conservanti sintetici`,
factor:1,
},
{
question: `Consum zilnic bauturi alcoolice: spirtoase/ vin/ bere/ alte bauturi alcoolice`,
factor:2,
},
{
question: `Consum zilnic minerale/ vitamine/ pulberi alcaline/ pulberi de super alimente/ ceai verde`,
factor:2,
},
{
question: `Sunt alergic la praf/ polen/ fan/ plante de sezon/ ambrozie/ artemisia/ par animale/ intepaturi insecte/ mucegaiuri/ medicamente`,
factor:1,
},
{
question: `Locuiesc intr-un oras aglomerat cu aer poluat`,
factor:1,
},
{
question: `Locuiesc intr-o zona cu linii de inalta tensiune/ antene de telecomunicatii/dorm cu telefonul mobil deschis langa pat`,
factor:1,
},
{
question: `Am afectiuni cronice diagnosticate pentru care primesc medicatie`,
factor:1,
},
{
question: ` Sunt frecvent in situatia de a apela la antibiotice pentru rezolvarea unor probleme de sanatate`,
factor:1,
},
{
question: `Am tulburari de tranzit intestinal (de exemplu mai putin de 2 scaune zilnice)`,
factor:1,
},
{
question: `Am afectiuni inflamatorii de piele sau la nivelul sitemului osteoarticular (oaselor si incheieturilor)`,
factor:2,
},
{
question: `Fac miscare zilnic sau practic sporturi de tip jogging, cardio, aerobic, sarituri`,
factor:2,
},
{
question: `Viata familiala/ profesionala/ sociala e caracterizata de stress intens`,
factor:2,
},
{
question: `Am stare de oboseala accentuata la trezire si manifest scaderea capacitatii de concentrare/ deconectare /detensionare`,
factor:1,
},
{
question: `Merg la culcare pana in ora 23:00 si am un somn odihnitor`,
factor:2,
},
{
question: `Am trecut printr-o trauma emotionala in ultimii 5 ani de tip: deces al unui membru al familiei/ divort/ accident /imbolnavire`,
factor:1,
},
];
const answersToQuiz =
[
"Niciodata",
"Rar",
"Ocazional",
"Frecvent",
"Intodeauna"
]
function buildQuiz() {
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for (const number in answersToQuiz) {
// ...add an HTML radio button
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${number}">
${parseInt(number) + 1} :
${answersToQuiz[number]}
</label>`
);
}
// add this question and its answers to the output
output.push(
`<div class="slide">
<div class="question">${parseInt(questionNumber) + 1}. ${currentQuestion.question} </div>
<div class="answers"> ${answers.join("")} </div>
</div>`
);
});
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join("");
}
function showResults() {
// gather answer containers from our quiz
const answerContainers = quizContainer.querySelectorAll('.answers');
// keep track of user's answers
let currentScore = 0;
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
if(userAnswer === undefined)
{
alert("Va rugam sa raspundeti la toate intrebarile");
}
currentScore += (parseInt(userAnswer) + 1) * myQuestions[questionNumber].factor;
});
//display a slider
// show number of correct answers out of total
resultsContainer.innerHTML = `Curent score ${currentScore}`;
}
function showSlide(n) {
slides[currentSlide].classList.remove('active-slide');
slides[n].classList.add('active-slide');
currentSlide = n;
if(currentSlide === 0){
previousButton.style.display = 'none';
}
else{
previousButton.style.display = 'inline-block';
}
if(currentSlide === slides.length-1){
nextButton.style.display = 'none';
submitButton.style.display = 'inline-block';
}
else{
nextButton.style.display = 'inline-block';
submitButton.style.display = 'none';
}
}
function showNextSlide() {
showSlide(currentSlide + 1);
}
function showPreviousSlide() {
showSlide(currentSlide - 1);
}
// display quiz right away
buildQuiz();
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
showSlide(0);
// on submit, show results
submitButton.addEventListener("click", showResults);
previousButton.addEventListener("click", showPreviousSlide);
nextButton.addEventListener("click", showNextSlide);
})();
#import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
body{
font-size: 20px;
font-family: 'Work Sans', sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1{
font-weight: 300;
margin: 0px;
padding: 10px;
font-size: 20px;
background-color: #444;
color: #fff;
}
.question{
font-size: 30px;
margin-bottom: 10px;
}
.answers {
margin-bottom: 20px;
text-align: left;
display: inline-block;
}
.answers label{
display: block;
margin-bottom: 10px;
}
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
margin-top: 20px;
z-index: 3;
position: relative;
}
button:hover{
background-color: #38a;
}
.slide{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
}
.active-slide{
opacity: 1;
z-index: 2;
}
.quiz-container{
position: relative;
height: 200px;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
<button id="submit">Afla rezultatul</button>
<div id="results"></div>
<script src="QuizLogic.js"></script>
<link rel="stylesheet" href="QuizTransition.css">
</body>
</html>
You have a strict height of your main div 200px. You can do
1) Increase height depend on your content
2) Put your buttons in div after your main div
Main problem is that you don`t have a content grid. So you have to create it before put something into page
enter image description hereenter image description here----------
//Escriba el código JQuery, señalando el número de caso
$(document).ready(function(){
//caso 01
$("#banner").css({"width":"100%","height":"400px"});
//caso 02
$("#marco section").css("width","100%");
//caso 03
$("section article").css({"width":"100%","text-align":"center","float":"left","margin-bot":"10px"});
//caso 04
$("section article img").css({"width":"80px","height":"50px","cursor":"pointer","border":"3px outset red"});
//caso 05
$("section article").find("label").css({"color":"blue","font-size":"10pt","font-weight":"bold"});
//caso 06
$("section article").find("input").css({"border":"3px double skyblue","font-size":"10pt","font-weight":"bold"});
//caso 07
var imagen = $("section article img");
imagen.mouseover(function(){
$(this).fadeTo(1000,0.6).css({"border-radius":"10px","border":"3px solid gold"});
});
//caso 08
imagen.mouseout(function(){
$(this).fadeTo(1000,1).css({"border-radius":"0px","border":"3px outset red"});
});
//caso 09
var arrlugares = ["Macchu-Picchu(Cuzco-Perú)","Coliseo(Roma-Italia)",
"Chichen-Itza(Yucatán-México)","Cristo Redentor(Río de Janeiro-Brasil)","Taj-Mahal(Uttar Pradesh-India)","Muralla-China(Huairo-China)","Petra(Jordania)"];
var n = Math.floor(Math.random()*7);
//calling array and make change the img when its click
imagen.each(function(x,imagenes){
$(imagenes).click(function(){
$("header h2").text(arrlugares[x]);
$("header h2").css("color",colores[n]);
$("#banner").attr("src", $(this).attr("src"));
});
});
$(function(){
var colors = ['#ff6','#6ff','#f6f','#f66','#66f','#6f6'];
$('input').click(function(){
var randomcolor=Math.floor(Math.random()*colors.length);
//alert(randomcolor);
$('section').css('color',colors[randomcolor]);
});
});
body { background:#76A5CC; font-family: arial; }
#marco { width:80%; height:auto; float:left;
margin-left:10%; background-color:white; border: 2px solid white;
}
#banner { width:80px; height:20px; float:left; }
header, nav { width:100%; height:auto; float:left; margin-bottom:5px; }
aside { width:30%; height:auto; float:left; }
section { width:70%; height:auto; float:left; }
nav { text-align:center; background-color:#76A5CC; }
footer { width:100%; height:auto; float:left; background-color:#76A5CC; text-align:center; font-size:10pt; font-weight:bold; color:#FFFFFF; }
header>h2 { text-align:center; color:#FFF; }
section>article h2 { color:#76A5CC; }
a:link {
color: blue;
}
.redsocial { width:10px; height:10px; cursor:pointer; }
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Características JQuery</title>
<link rel="stylesheet" type="text/css" href="../css/estilo.css" />
<script language="javascript" src="../js/jquery-2.1.4.js"></script>
<script language="javascript" src="../js/principe.js"></script>
</head>
<body>
<div id="marco">
<header>
<img src="../img/banner.jpg" id="banner" />
<h2>Las maravillas del mundo</h2>
</header>
<section>
//those are imgs
<article>
<a href="#portfolio"><img src="../img/maravillas/macchu-picchu.jpg" />
<img src="../img/maravillas/coliseo.jpg" />
<img src="../img/maravillas/chichen-itza.jpg" />
<img src="../img/maravillas/cristo-redentor.jpg" />
<img src="../img/maravillas/taj-mahal.jpg" />
<img src="../img/maravillas/muralla-china.jpg" />
<img src="../img/maravillas/petra.jpg" />
</article>
<article>
<h2>Datos del contacto</h2>
<form>
<label>Nombre:</label><input type="text" /><br/>
<label>Apellido:</label><input type="text" /><br/>
<label>Dirección:</label><input type="text" />
</form>
</article>
</section>
<footer>
<p>Redes sociales</p>
<img src="../img/social/fb1.png" class="redsocial" />
<img src="../img/social/gp1.png" class="redsocial" />
<img src="../img/social/tw1.png" class="redsocial" />
<img src="../img/social/yt1.png" class="redsocial" />
</footer>
</div>
</body>
</html>
`enter image description here
By clicking on each image (img) within the section article block, perform:
to. Show the description of the image in h2 of the header block.
second. Apply a font color randomly.
do. Get the path of the image and assign it to the banner.
var arrlugares = ["Macchu-Picchu(Cuzco-Perú)","Coliseo(Roma-Italia)",
"Chichen-Itza(Yucatán-México)","Cristo Redentor(Río de Janeiro-Brasil)","Taj-Mahal(Uttar Pradesh-India)","Muralla-China(Huairo-China)","Petra(Jordania)"];
Line 29 in your code produces a floating point number. Arrays do not accept floating point numbers. Cast it to an integer. Use something like Math.floor or Math.ceil.
Actually I see you doing it in a few places in your code.
Try using your debugger to trace your code. What what it is doing.
I'm still not sure what you're asking but here's a Plunker of clicking an image and changing color, from your code.
$(document).ready(function() {
var colors = ['#ff6', '#6ff', '#f6f', '#f66', '#66f', '#6f6'];
var arrlugares = ["Macchu-Picchu(Cuzco-Perú)", "Coliseo(Roma-Italia)", "Chichen-Itza(Yucatán-México)", "Cristo Redentor(Río de Janeiro-Brasil)", "Taj-Mahal(Uttar Pradesh-India)", "Muralla-China(Huairo-China)", "Petra(Jordania)"];
$('img').click(function(evnt) {
var randomcolor = Math.floor(Math.random() * colors.length),
randomText = Math.floor(Math.random() * arrlugares.length);
$('#marco header h2')
.css('color', colors[randomcolor])
.text(arrlugares[randomText]);
$('#banner').attr('src', $(evnt.currentTarget).attr('src'));
});
})
I'm trying to open up a div on the right side, and change the animation div on the same time, that works when I use the same div ID, but that gives me problems with css positions. So when I press 1 the intro animation disappears and the animation div that loads data_1.json appears.
http://bolink.eu/demo/
Current js code :
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('a').click(function () {
var divtitle= this.title;
$("#"+divtitle).show("slow").siblings().hide(1000);
});
});
</script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
Here the rest of the source code:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>KVL</title>
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#font-face {
font-family: Bree;
src: url(Bree.otf) format("opentype");
}
body {
margin: 0 0 600px;
font-family: 'Open Sans', sans-serif;
color:black;
}
*{
margin:0;
padding:0;
}
a {
color:#f6f0e3;
text-decoration:none;
}
.rhombus{
width:90px;
height:90px;
background:#d5c2f4;
margin:36px;
transform:rotate(-45deg);
float:left;
font-family: Bree;
}
.rhombus p{
transform:rotate(45deg) translate(10px,5px);
text-align:center;
font-size: 62px;
font-family: Bree;
}
#footer {
position: absolute;
left: 0;
bottom: 0;
height: 400px;
width: 100%;
text-align:center;
}
div.rechts {
color:black;
position: absolute;
right: 200px;
top: 150px;
margin-right: 30px;
width: 500px;
text-align: justify;
font-size: 24px;
}
h1 {
font-family: Bree;
font-size: 64px;
}
.bodymovin {
background-color:white;
width: 800px;
height:500px;
display:block;
overflow: hidden;
transform: translate3d(0,0,0);
margin: 20px;
position: absolute;
top: 10px;
left: 10px;
}
p.titel {
font-style: italic;
margin-bottom: 30px;
margin-top: 30px;
}
a.meer {
font-family: Bree;
font-size: 40px;
}
p.onder {
text-align: center;
margin: 50px;
}
</style>
<script src="bodymovin.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('a').click(function () {
var divtitle= this.title;
$("#"+divtitle).show("slow").siblings().hide(1000);
});
});
</script>
<script>
$(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
</head><body>
<div id="footer">
<div class="rhombus" style="background-color: #DCCD00;"><p>1</p></div>
<div class="rhombus" style="background-color: #EDA400;"><p>2</p></div>
<div class="rhombus" style="background-color: #39AA36;"><p>3</p></div>
<div class="rhombus" style="background-color: #3AA8DD;"><p>4</p></div>
<div class="rhombus" style="background-color: #00A79F;"><p>5</p></div>
<div class="rhombus" style="background-color: #808080;"><p>6</p></div>
</div>
<div>
<div id="content1" class="rechts" style="display: none">
<h1 style="color: #DCCD00;">Data Strategy</h1>
<p class="titel">Identificeren van kansen door beter datagebruik.</p>
<p class="verhaal">Met een quick scan identificeren we de mogelijkheden om met analytics de omzet en winst te laten groeien en prestaties verder te verbeteren. Vervolgens bepalen we samen met stakeholders een roadmap. Daarin leggen we vast hoe we relevante data in de organisatie optimaal identificeren, verzamelen, opslaan, beheren, delen en gebruiken.</p>
<p class="onder"><a class="meer" style="color: #DCCD00;" href="#">Lees meer</a></p>
</div>
<div id="content2" class="rechts" style="display: none">
<h1 style="color: #EDA400;">Data Economy</h1>
<p class="titel">Versterken van data-ecosystemen</p>
<p class="verhaal">Met pragmatische en schaalbare data-engineering helpen wij om bestaande en nieuwe data slim te structureren en op te slaan. Zodat alle betrokkenen in een organisatie de data eenvoudig kunnen vinden en gebruiken.</p>
<p class="onder"><a class="meer" style="color: #EDA400;" href="#">Lees meer</a></p>
</div>
<div id="content3" class="rechts" style="display: none">
<h1 style="color: #39AA36;">Business Intelligence</h1>
<p class="titel">Ontsluiten van relevante business-informatie</p>
<p class="verhaal">We gaan op zoek naar de toegevoegde waarde van gecombineerde bedrijfsdata. Hierbij gebruiken we geavanceerde data-analytics en data-visualisatie oplossingen, die bruikbaar zijn voor zowel data-experts en gewone gebruikers in uw organisatie.</p>
<p class="onder"><a class="meer" style="color: #39AA36;" href="#">Lees meer</a></p>
</div>
<div id="content4" class="rechts" style="display: none">
<h1 style="color: #3AA8DD;">Business Impact</h1>
<p class="titel">Creëren van nieuwe inzichten</p>
<p class="verhaal">Van data naar inzicht. Met state-of-the-artmodellen en -benaderingen ondersteunen wij gebruikers op alle niveaus in uw organisatie om op een intuïtieve manier nieuwe inzichten voor uw business te genereren. Waar nodig combineren we uw data met de business-kennis binnen uw bedrijf.</p>
<p class="onder"><a class="meer" style="color: #3AA8DD;" href="#">Lees meer</a></p>
</div>
<div id="content5" class="rechts" style="display: none">
<h1 style="color: #00A79F;">Business Analytics</h1>
<p class="titel">Implementeren van slimme actie voor business value</p>
<p class="verhaal">Wij helpen uw medewerkers om nieuwe verkregen inzichten door te vertalen in concrete groei- en verbeteracties. Ook monitoren we de impact hiervan op uw business. Zo laten wij uw medewerkers ervaren hoe een juist gebruik van data een groot verschil kan maken voor uw business.</p>
<p class="onder"><a class="meer" style="color: #00A79F;" href="#">Lees meer</a></p>
</div>
<div id="content6" class="rechts" style="display: none">
<h1 style="color: #808080;">KVL Academy</h1>
<p class="titel">Kennis vergroten is kennis delen.</p>
<p class="verhaal">Daarom investeren we in de ontwikkeling van onze eigen collega's. En trainen we de medewerkers van onze opdrachtgevers. Op alle domeinen binnen ons vakgebied. Ook bouwen we aan een nieuwe generatie data-experts met ons programma Scherp Talent.</p>
<p class="onder"><a class="meer" style="color: #808080;" href="#">Lees meer</a></p>
</div>
<div id="ani0" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('ani0')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_intro.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div class="bodymovin" id="content1" style="display:none"></div>
<script>
var anim;
var elem = document.getElementById('content1')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_1.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div id="content2" style="display:none" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('content2')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_2.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div id="content3" style="display:none" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('content3')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_3.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div id="content4" style="display:none" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('content4')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_4.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div id="content5" style="display:none" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('content5')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_5.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
<div id="content6" style="display:none" class="bodymovin"></div>
<script>
var anim;
var elem = document.getElementById('content6')
var animData = {
container: elem,
renderer: 'svg',
loop: false,
autoplay: true,
rendererSettings: {
progressiveLoad:false
},
path: 'data_6.json'
};
anim = bodymovin.loadAnimation(animData);
</script>
</div>
</body>
</html>
Hope someone can help!
You cannot use an ID more than once! That's why it's called an ID.
This also invalidates the HTML:
https://validator.w3.org/nu/?doc=http%3A%2F%2Fbolink.eu%2Fdemo%2F
Use class selectors. They can used in jQuery too:
$("."+divtitle)
I've put the animations in a different div container (animations) then the right side divs (right), and then renamed the animations code to ani1-ani6.
I've changed the following js code:
<script>
$(document).ready(function(){
$('a').click(function () {
var divtitle= "content"+this.title;
var anititle= "ani"+this.title;
$("#"+divtitle).show("slow").siblings().hide(1000);
$("#"+anititle).show("slow").siblings().hide(1000);
});
});
</script>
Hope it helps someone!
I am new to web development and I am creating a login interface for a Wi-Fi HotSpot at my university. I used bootstrap for the majority of the design and just implemented a simple form for username and password submission. However, before a user can login to the wireless hotspot they must agree to the terms & conditions checkbox each time. This is what I need validated on the login interface.
What they requested is that if the user tries to login without checking the box, that an error message popups telling the user to agree to the terms & conditions. You can see a live demo of my code here:
http://ece.uprm.edu/~s103924/Login%20Interface/test.html
I have no idea on where to begin with but have read that using javascript should be fairly simple to validate the form. Here is a copy of the source code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sign in · ECENET Wireless Internet</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Oranienbaum' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 350px;
padding: 19px 29px 45px;
margin: 0 auto 20px;
background-color: #fff;
border: 2px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
</style>
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form method="post" action="https://lanaccess.ece.uprm.edu:8001/" class="form-signin">
<h2 class="form-signin-heading">ECENET Login</h2>
<input type="text" class="input-block-level" placeholder="Username" maxlength="15">
<input type="password" class="input-block-level" placeholder="Password">
<input name="redirurl" type="hidden" value="http://ece.uprm.edu">
<label class="checkbox">
<input name="termsagree" type="checkbox" value="yes"> I Agree to the <a data-toggle="modal" href="#example">Terms & Conditions</a>
</label>
<button name="accept" class="btn pull-right btn-primary" type="submit">Sign in</button>
<!--<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Terms & Conditions</a></p>-->
</form>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Términos & Condiciones:</h3>
</div>
<div class="modal-body">
<h4>A Todos Los Usuarios:</h4>
<p><ol>
<li>
La Junta de Sindicos de la Universidad de Puerto Rico, mediante Certificacion Numero 072, Serie 1999-2000 aprobo la Politica Institucional y Procedimiento Para el Uso Etico Legal de las Tecnologias de Informacion de la Universidad de Puerto Rico.</li>
<p>
<li>
Las disposiciones contenidas en esta politica son de aplicacion a toda la comunidad universitaria, clientes externos, las personas que presten servicios, asi como a todos los usuarios de los recursos de tecnologias de informacion y servicios de telecomunicaciones.</li>
<p>
<li>
Toda vez que el acceso a las redes y al ambiente de las tecnologias de informacion es un privilegio institucional que otorga la Universidad de Puerto Rico, todos los usuarios tienen la responsabilidad de usar estos recursos de una manera eficiente y efectiva, observando estrictamente todas las normas eticas y legales contenidas en los estatutos estatales, federales, asi como en los reglamentos, politicas y procedimientos de la Universidad.</li>
<p>
<li>
Cualquier violacion a las disposiciones contenidas en esta politica por parte de algun usuario, sera causa suficiente para iniciar un proceso de accion disciplinaria en su contra; incluyendo la no asignacion de los recursos y/o accesos, expulsion, despido o cualquier otra accion legal disponible.</li>
<p>
<li>
Las politicas referentes a los recursos de tecnologia de informacion estan disponibles en http://www.uprm.edu/politicas</li>
</ol></p>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
</body>
</html>
Any input would be greatly appreciated. At least on ideas of where to look or tutorials online that address my issue.
Here is what you do.. Change you tag to run validation function onSubmit..
<form method="post" action="https://lanaccess.ece.uprm.edu:8001/" onsubmit="return validateForm()" class="form-signin">
function validateForm()
{
var x=document.forms[0]["termsagree"].value;
if (x==null || x=="")
{
alert("You must first agree to terms and conditions");
return false;
}
}
You many need to play with the validateForm function... Remember if you return false then form will not submit.
You have to check whether the checkbox is checked or not when the user submit the form
I forgot adding the message...
$('.form-signin').on('submit', function(e) {
if (!$(this).find('input[type=checkbox]').is(':checked')){
alert('You must agree with Terms and Conditions to Sign In');
e.preventDefault();
}
});
For a single checkbox you could get that value and check on it:
change <input name="termsagree" type="checkbox" value="yes"> into:
<input id="termsagree" name="termsagree" type="checkbox" value="yes">
and then check it in script:
if (! document.getElementById('termsagree').checked) {
alert("You have to agree to the Terms&Conditions");
}
For more complex validation look here.
Thanks again for your input. After a few tries with the above answers I just couldn't understand well what I needed to do. I took the online course from w3Schools and finally understood your answers. I decided to post what I did in case someone needs this.
I created a function to validate the form like this:
function validateForm()
{
var x=document.forms["signin"]["termsagree"].checked;
if (x==null || x=="")
{
alert("You must agree to the Terms & Conditions!");
return false;
}
}
Then I changed the form to this:
<form form name="signin" method="post" action="https://lanaccess.ece.uprm.edu:8001/" onsubmit="return validateForm()" class="form-signin">
Thats pretty much it.
Reference: http://www.w3schools.com/js/js_form_validation.asp
Thanks!