Change divs through onclick function

Change divs through onclick function - javascript

Currently I have some code that looks like so;
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="**HERE**">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none'">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
So when I click the sign up button, I want the div to change to the signup div below, but using the same coding type (if possible) that I used for closing the window. I know it's obvious that I'm a beginner, but I've been searching everywhere and playing around with different techniques but I just can't figure it out!

Really as simple as this:
#signup {
display: none;
}
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
And if you want a version that hides the Welcome layer before show the Signup layer:
#signup {
display: none;
}
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';document.getElementById('welcome').style.display='none'">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>

Use Jquery :
$("#intro_signup_button").click(function() {
$("#signup").show();
});
$("#intro_back_button").click(function() {
$("#signup").hide();
});
$("#intro_signup_button").click(function() {
$("#signup").show();
});
$("#intro_back_button").click(function() {
$("#signup").hide();
});
#signup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button">SIGN UP</button>
<button id="intro_back_button">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>show sign up</p>
</div>
</div>

Related

is it possible to refresh the same content in two different html pages?

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.

Show image with onload

Need help to show "default" picture in the imageHolder when pages is loaded in JavaScript and replaced whit picture from the button click.
<script type="text/javascript">
function changeImg(image) {
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}
</script>
<div class="row">
<div class="col-s-4 col-m-12 col-l-12 col-xl-12">
<p>
<onload="changeImg('0.jpg')">
</p>
<p id="imageHolder" "changeImg('/upload_dir/pics/Beo/BeoLab/3/BLa3-Black.jpg')"></p>
<p style="text-align: center; font-size:6px;"><a class="button" onclick="changeImg('1.jpg')" style="background-color: #000;" title="sort">·</a>
</p>
<p style="text-align: center; font-size:6px;"><a class="button" onclick="changeImg('2.jpg')" style="background-color: #d2d2d2;" title="sort">·</a>
</p>
</div>
<div class="col-s-4 col-m-12 col-l-12 col-xl-12">
<div class="panel" id="pic" style=" background-color:#fff;">
<img id="imageHolder" / class="responsive">
</div>
</div>
</div>

Slide down moreinfo div without using IDs

I'm trying to create a box that is created without IDs.
I mean a box that slide out when I press on a button (also without IDs) and every other "moreinfo" text should not slide down.
Here is a example where I use IDs.
$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){ //Only a smooth scroll funtion
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});
//Here I must define every content box. And my goal is, that i need only one function.
$('#box1_more_btn').click(function() {
if($('#box1_more').css('display') == 'none') {
$('#box1_more_btn').text("less");
$('#box1_more').slideDown(400);
} else {
$('#box1_more_btn').text("more");
$('#box1_more').slideUp(400);
}
});
$('#box2_more_btn').click(function() {
if($('#box2_more').css('display') == 'none') {
$('#box2_more_btn').text("less");
$('#box2_more').slideDown(400);
} else {
$('#box2_more_btn').text("more");
$('#box2_more').slideUp(400);
}
});
.moreinfo {
display:none;
}
#box_1 {
color: black;
background-color: #F2F2F2;
}
#box1_more {
background-color: rgba(0,0,0,0.008)
}
#box_2 {
color: black;
background-color: #F2F2F2;
}
#box2_more {
background-color: rgba(0,0,0,0.008)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<br /><br />
<div id="box_1" class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span id="box1_more_btn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo" id="box1_more">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-1 end-->
<br /><br /><br /><br />
<div id="box_2" class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
Second box ... more<!-- This Button should also rename--> !
</p>
</div>
</div>
</div>
<div id="box2_more" class="container moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the second more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-2 end-->
</div>
</body>
So I imagine it without IDs.
I tried that, but do not know how to go
This is my attemp without using IDs:
$(document).ready(function(){
$('a[href*=#]').bind("click", function(e){
var anchor = $(this);
$('html, body').stop().animate({
scrollTop: $(anchor.attr('href')).offset().top
}, 1000);
e.preventDefault();
});
return false;
});
//Here I must define every content box. And my goal is, that i need only one function.
$('.morebtn').click(function() {
if($('.moreinfo').css('display') == 'none') {
$('.morebtn').html(' less '); // Is it possible too, that the window scroll down to "this" div?
$('.box_moreinfo').slideDown(400);
} else {
$('.morebtn').html(' more ');
$('.box_moreinfo').slideUp(400);
}
});
.moreinfo {
display:none;
}
.box {
color: black;
background-color: #F2F2F2;
}
.box_moreinfo {
background-color: rgba(0,0,0,0.008)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="wrapper">
<br /><br />
<div class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span class="morebtn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo box_moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div> <!-- BOX-1 end-->
<br /><br />Now, both boxes slideOut on click...<br /><br /><br />
<div class="box">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">This is a<span class="text-muted"> header</span></h2>
<p class="lead">
First box ... <span class="morebtn">more</span> !
</p>
</div>
</div>
</div>
<div class="container moreinfo box_moreinfo">
<div class="row">
<div class="col-md-12">
<h3>More Info</h3>
This is the first more Info box<br /><br />
</div>
</div>
</div>
</div><!-- BOX-2 end-->
</div>
</body>

Just looking at your markup you've made life quite difficult for yourself!
If this were something I was doing I'd make the relationship more explicit in the HTML:
<section class="has-more-info">
<h1>Header</h1>
<p>
Text here...
</p>
<button class="show-more-info">Show more</button>
<div class="more-info hidden">
<h3>More Info</h3>
<p>This is the first more Info box</p>
</div>
</section>
Then you could use:
$('.has-more-info').each( function() {
$(this).find('.show-more-info').click( function(e) {
e.preventDefault();
$(this).siblings('.more-info').slideToggle();
});
});
You need to style the .hidden class as display:none; initially, or onload so as to not impede non-JS users.
I haven't tested this but the concept should get you going.

See if text input is there

So I'm trying to check if a user has inputed text through the textbox userInput. However, when I try writing an if else statement to validate input, nothing seems to work. Any help?
<div class="container">
<div class="row">
<div class="page-header">
<h1 align="center">Sub To Me <small>Easily create YouTube subscription links!</small></h1>
</div>
</div>
<script type="text/javascript">
function showLink() {
$("#linkBox").css("visibility", "visible");
$("#linkText").html("http://subto.me/"+$("#usernameInput").val())
$("#linkHref").attr("href", "http://subto.me/"+$("#usernameInput").val())
}
</script>
<div class="row">
<div class="span6 offset3">
<div class="form-inline">
<div class="input-append">
<input class="span4" type="text" id="usernameInput" placeholder="Youtube Username">
<button class="btn" onClick="showLink();">Get Link</button>
</div>
</div>
</div>
</div>
<div class="row" id="linkBox" style="visibility: hidden; margin-top: 25px;">
<div class="span12">
<div class="alert alert-success" style="width: 50%; margin: 0 auto; text-align: center; padding: 24px;">
<a id="linkHref" href="" target="_blank"><span id="linkText" style="font-size: 24pt; font-weight: bold;"></span></a>
</div>
</div>
</div>

Here Thous should stop your users from submitting blank forms, and dont forget to include the jquery library.
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript">
function showLink() {
var usernameInput = $('#usernameInput').val();
if(usernameInput != ''){
$("#linkBox").css("visibility", "visible");
$("#linkText").html("http://subto.me/"+$("#usernameInput").val())
$("#linkHref").attr("href", "http://subto.me/"+$("#usernameInput").val())
}
else{
alert('Please Enter Something');
}
}
</script>
<div class="container">
<div class="row">
<div class="page-header">
<h1 align="center">Sub To Me <small>Easily create YouTube subscription links!</small></h1>
</div>
</div>
<div class="row">
<div class="span6 offset3">
<div class="form-inline">
<div class="input-append">
<input class="span4" type="text" id="usernameInput" placeholder="Youtube Username">
<button class="btn" onClick="showLink();">Get Link</button>
</div>
</div>
</div>
</div>
<div class="row" id="linkBox" style="visibility: hidden; margin-top: 25px;">
<div class="span12">
<div class="alert alert-success" style="width: 50%; margin: 0 auto; text-align: center; padding: 24px;">
<a id="linkHref" href="" target="_blank"><span id="linkText" style="font-size: 24pt; font-weight: bold;"></span></a>
</div>
</div>
</div>

<script type="text/javascript">
function showLink()
{
if($('#usernameInput').val()!= "")
{
$("#linkBox").css("visibility", "visible");
$("#linkText").html("http://subto.me/"+$("#usernameInput").val());
$("#linkHref").attr("href", "http://subto.me/"+$("#usernameInput").val());
}
else
{
alert("enter value")
}
}
</script>

Show/start video in blogger on image click

blogspot.co.il is one of my blogger page.
I put in every page a video.
now before the user sees the video, I'd like them to see this image.
and only after the only when the user click on that image ,only then the video start playing.
This is the code for one of the pages:
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="ltr" style="text-align: center;">
<br /><br />
<div dir="rtl">
<span style="color: #8e5353; font-size: x-large;"><b>-9- Part</b></span>
</div>
<div dir="rtl">
<span style="color: #0000ee; font-size: x-large;"><b><u>Broken Family. Blessing in disguise</u></b></span>
</div>
<br /><br /><br />
<div>
<div dir="rtl">
</div>
<div dir="ltr">
<div class="video-container">
<iframe height="375" src="https://docs.google.com/file/d/0B0hozXLPGwkIa1dDTUpyUkpuQk0/preview" width="640"></iframe>
</div>
<b style="color: #0000ee; font-size: xx-large;"><u><br /></u></b>
</div>
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both; direction: ltr;">
</div>
<div class="separator" style="clear: both; text-align: right;">
</div>
<div style="text-align: right;">
<div style="direction: ltr; text-align: left;">
</div>
<div>
<br />
</div>
</div>
<div style="text-align: right;">
</div>
</div>
</div>
</div>
I appreciate your help.

Look trick in this blog
http://beben-koben.blogspot.com/2013/05/trick-for-embed-video-youtube-to-be.html
i hope that useful

Develop Reference

JavaScript is the programming language of the Web.

Change divs through onclick function - javascript

Related

is it possible to refresh the same content in two different html pages?

Show image with onload

Slide down moreinfo div without using IDs

See if text input is there

Show/start video in blogger on image click

Categories

Resources