Refresh content jQuery - javascript

I'm working on a little project, and I'm making a content show with radio buttons, something like a slideshow gallery, but what i'm trying to do is a big container with many divs inside with a opacity:1; all this overlapping 3 containers more with the same characteristics, so when somebody give a clic in a radio button, the container with opacity:1; will get a opacity:0; and the overlapped container by the container with opacity:1; will be visible.
the main problem that I get is when I clic in a radio button to change the content, this (content) doesn't appears until I reload the page, can somebody tell me why this happen? and how to solve it?
Thanks!
$(document).ready(function(){
$("#op1").prop('checked',true);
$("#op2").prop('checked',true);
$("#op3").prop('checked',true);
$("#op4").prop('checked',true);
//$("#x").prop('checked',false);
if ($("#op1").is(':checked')) {
if ($('#cont1').hasClass('contenedor-fotos-opacity'))
{
$('#cont1').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos1');
}
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op2").is(':checked')) {
if ($('#cont2').hasClass('contenedor-fotos-opacity'))
{
$('#cont2').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos2');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op3").is(':checked')) {
if ($('#cont3').hasClass('contenedor-fotos-opacity'))
{
$('#cont3').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos3');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op4").is(':checked')) {
if ($('#cont4').hasClass('contenedor-fotos-opacity'))
{
$('#cont4').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos4');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
}
});
#contenedor-portafolio {
position: relative;
width: 100%;
background: #222;
}
.fotos-portolio {
width: 300px;
height: 300px;
display: inline-block;
margin-left: 15px;
margin-top: 15px;
overflow: hidden;
background: #444;
}
.contenedor-fotos1 {
width: 90%;
position: absolute;
margin-left: 5%;
background: red;
z-index: 10;
}
.contenedor-fotos-opacity {
width: 90%;
position: absolute;
margin-left: 5%;
opacity:0;
z-index: 10;
}
.contenedor-fotos2 {
width: 90%;
position: absolute;
margin-left: 5%;
background: green;
z-index: 11;
}
.contenedor-fotos3 {
width: 90%;
position: absolute;
margin-left: 5%;
background: blue;
z-index: 12;
}
.contenedor-fotos4 {
width: 90%;
position: absolute;
margin-left: 5%;
background: yellow;
z-index: 13;
}
<!DOCTYPE html>
<html>
<head>
<title>prueba cont-slider</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/content-slider.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/content-slider.js"></script>
</head>
<body style="width:100%; position:absolute; top: 0px; left: -8px;">
<div id="contenedor-portafolio">
<form>
<input type="radio" name="opacitylayer" id="op1"/>
<label for="op1">DISEÑO WEB</label>
<input type="radio" name="opacitylayer" id="op2"/>
<label for="op2">DISEÑO GRÁFICO</label>
<input type="radio" name="opacitylayer" id="op3"/>
<label for="op3">DISEÑO 3D</label>
<input type="radio" name="opacitylayer" id="op4"/>
<label for="op4">FOTOGRAFÍA</label>
</form>
<div id="cont1" class="contenedor-fotos1">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont2" class="contenedor-fotos2">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont3" class="contenedor-fotos3">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont4" class="contenedor-fotos4">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
</div>
</body>
</html>

You need to use a change handler since you want to run the script whenever user changes the checked status of the radio elements
$(document).ready(function(){
$("#op2").prop('checked',true);
$("#op1, #op2, #op3, #op4").on('change', function(){
if ($("#op1").is(':checked')) {
if ($('#cont1').hasClass('contenedor-fotos-opacity'))
{
$('#cont1').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos1');
}
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op2").is(':checked')) {
if ($('#cont2').hasClass('contenedor-fotos-opacity'))
{
$('#cont2').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos2');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op3").is(':checked')) {
if ($('#cont3').hasClass('contenedor-fotos-opacity'))
{
$('#cont3').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos3');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op4").is(':checked')) {
if ($('#cont4').hasClass('contenedor-fotos-opacity'))
{
$('#cont4').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos4');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
}
}).change()
});
#contenedor-portafolio {
position: relative;
width: 100%;
background: #222;
}
.fotos-portolio {
width: 300px;
height: 300px;
display: inline-block;
margin-left: 15px;
margin-top: 15px;
overflow: hidden;
background: #444;
}
.contenedor-fotos1 {
width: 90%;
position: absolute;
margin-left: 5%;
background: red;
z-index: 10;
}
.contenedor-fotos-opacity {
width: 90%;
position: absolute;
margin-left: 5%;
opacity:0;
z-index: 10;
}
.contenedor-fotos2 {
width: 90%;
position: absolute;
margin-left: 5%;
background: green;
z-index: 11;
}
.contenedor-fotos3 {
width: 90%;
position: absolute;
margin-left: 5%;
background: blue;
z-index: 12;
}
.contenedor-fotos4 {
width: 90%;
position: absolute;
margin-left: 5%;
background: yellow;
z-index: 13;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>prueba cont-slider</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/content-slider.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/content-slider.js"></script>
</head>
<body style="width:100%; position:absolute; top: 0px; left: -8px;">
<div id="contenedor-portafolio">
<form>
<input type="radio" name="opacitylayer" id="op1"/>
<label for="op1">DISEÑO WEB</label>
<input type="radio" name="opacitylayer" id="op2"/>
<label for="op2">DISEÑO GRÁFICO</label>
<input type="radio" name="opacitylayer" id="op3"/>
<label for="op3">DISEÑO 3D</label>
<input type="radio" name="opacitylayer" id="op4"/>
<label for="op4">FOTOGRAFÍA</label>
</form>
<div id="cont1" class="contenedor-fotos1">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont2" class="contenedor-fotos2">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont3" class="contenedor-fotos3">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont4" class="contenedor-fotos4">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
</div>
</body>
</html>
You can simplify that to
$(document).ready(function () {
$("#op2").prop('checked', true);
var $els = $('#cont1, #cont2, #cont3, #cont4');
$("#op1, #op2, #op3, #op4").on('change', function () {
var id = this.id.substring(2), $el = $('#cont'+id);
if (this.checked) {
if ($el.hasClass('contenedor-fotos-opacity')) {
$el.removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos'+id);
}
$els.not($el).each(function(){
$(this).removeClass('contenedor-fotos'+this.id.substring(5))
}).addClass('contenedor-fotos-opacity')
}
}).change()
});
Demo: Fiddle

Related

I am unable to generate (or print) the data retrieved from the data base in PDF using JSPDF

i am new to Javascript and i am unable to print the data which is retrived from the database.
Here the concept is when i upload a file, i should get the data to be displayed in the browser and i want to print the retrieved data in PDF. i could able to retrieve that data when i am generating with .xlxs format but for PDF format i couldnt.
html,
body {
height: 100%;
width: 100%;
}
#mainWindow {
height: 100%;
width: 100%;
}
.width-100 {
width: 100% !important;
}
#map {
font-family: sans-serif;
height: calc(100% - 90px);
width: 100%;
border-top: 1px solid grey;
}
html,
body {
margin: 0;
padding: 0;
}
.disp-inline {
display: inline-block;
margin: 5px;
}
.dijitBorderContainer-child {
left: 0 !important;
}
.dojoxGrid {
width: 100% !important;
}
/* (A) FULL SCREEN WRAPPER */
#spinner {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
transition: opacity 0.2s;
}
/* (B) CENTER LOADING SPINNER */
#spinner img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
}
/* (C) SHOW & HIDE */
#spinner {
visibility: hidden;
opacity: 0;
}
#spinner.show {
visibility: visible;
opacity: 1;
}
.dojoxGridArrowButtonChar {
display: inline-block !important;
}
.dojoxGridColCaption {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>DATA VALIDATION</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.39/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://js.arcgis.com/3.39/"></script>
<!-- <script src="jspdf.debug.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body class="tundra">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:'false'">
<div class="width-100" id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"
style="height:58px;text-align:left;font-weight:bold;font-size:14px;color:#400D12; height: 95px;">
<div class="row" style="margin: 0;">
<div class="col-sm-1">
<img src="logo.png" style="width: 250px; margin: 4px;" />
</div>
<div class="col-sm-11" style="text-align: center;">
<h3>DMT DATA VALIDATION</h3>
</div>
</div>
</div>
<div class="width-100" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="spinner">
<img src="loader.gif" style="height: 50px;" />
</div>
<div data-dojo-type="dijit/layout/ContentPane" style="height: 80px;">
<div class="row" style="margin: 0; border-bottom: 1px solid grey;">
<div class="col-sm-5">
<div class="disp-inline">
<label style="display: inline-block;margin-left: 5px;" for="selectTemplate">Select
Template</label>
<select id="selectTemplate"
style="width: 325px; padding: 5px; margin: 5px; display: inline-block;">
<option value="AddressingData">Addressing Data</option>
<option value="HardLandscaping">Hard Landscaping</option>
<option value="IrrigationFacilities">Irrigation Facilities</option>
<option value="ParkingFacilities">Parking Facilities</option>
<option value="PedestrianAndCycling">Pedestrian And Cycling</option>
<option value="PublicTransportFacilities">Public Transport Facilities</option>
<option value="RoadAuxiliaryFeatures">Road Auxiliary Features</option>
<option value="RoadNavigation">Road Navigation</option>
<option value="RoadStructuresAndFurniture">Road Structures And Furniture</option>
<option value="SignsAndSignPoles">Signs And Sign Poles</option>
<option value="SoftLandscaping">Soft Landscaping</option>
<option value="StormwaterFacilities">Storm water Facilities</option>
<option value="StreetlightingFacilities">Street lighting Facilities</option>
<option value="StreetlightingPowerAndControlSystem">Street lighting Power And Control
System
</option>
<option value="TrafficControl">Traffic Control</option>
</select>
</div>
</div>
<div class="col-sm-5">
<div class="disp-inline" style="margin-top: 14px;">
<form encType="multipart/form-data" method="post" id="gdbzipUploadForm">
<div className="field">
<label style="display: inline-block;" className="file-upload" title="Upload ZIP"
for='UploadzipFile'>Upload GDB
</label>
<input style="display: inline-block;width: 325px;" type="file" name="file"
id="UploadzipFile" accept='.zip' />
</div>
</form>
<!-- <div>
<label style="display: inline-block;" className="file-upload" title="Upload ZIP"
for='UploadzipFile'> Html to PDF
</label>
<button onclick="javascript:createPdf()" id="cmd">Generate PDF</button>
</div> -->
</div>
</div>
<div class="col-sm-2">
<div style="display: inline-block; margin-top: 14px;">
<a style="cursor: pointer; display: none;" href="#" id="downloadreflink">
<i class="glyphicon glyphicon-download"></i>
Download Report
</a>
</div>
<div style="display: inline-block; margin-top: 14px;">
<a onclick="javascript:createPdf()" style="cursor: pointer; display: none;" href="#" id="generatePdf">
<i class="glyphicon glyphicon-download"></i>
Generate PDF Report
</a>
</div>
</div>
</div>
</div>
<div id="gridDiv" data-dojo-type="dijit/layout/ContentPane">
</div>
</div>
<div class="width-100" id="bottomdiv" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'bottom'" style="height: 50px;">
<label id="errorlabel" style="display: none; color: red;"></label>
</div>
</div>
</body>
</html>

my pop up window is opened the top of page

enter image description hereenter image description hereI created a webpage by using html css and javascript. In home page, I added a pop up contact button and form, it is working but pop up window is opened at the top of page. Home page is like one page you scroll. I added the button to the footer but form is opened close to header. I want to it to open while user see the end of the page. I hope I can clear the problem.
https://github.com/ipeksaygut/website in this link there are HTML- CSS-JS files of only home page.
I am really beginner, I really do not understand the problem. Thanks for helps!
-If something need let me know to sahre to clear problem!
Window is seen as the picture but ı want to see it at the end of page I added photo of window how it is seen and where ı want to see it.
Hi Ipek Saygut!
I put together this code that will give you an idea of what was going on with your css. I have modified the .popUp class in order to fix this issue. Please be aware that you will need to read more on HTML and CSS best practices. Please have a look at this article to get you started in the amazing world of HTML and CSS, don't worry, it takes practice but you will master it soon. HTML & CSS Best Practices.
I certainly hope this code helps, have a good time coding, fellow!
let btn = document.querySelector("button");
let cont = document.querySelector(".popUp");
btn.addEventListener('click', function(){
cont.id = "show";
});
cont.addEventListener('click', function(e){
if(e.target == this){
this.id = "hidden";}
e.preventDefault;
});
body {
font-family: 'Red Hat Display', sans-serif;
}
.footer {
border-top: 5px solid #00acc8;
height: 200px;
background-color: #000;
padding: 50px;
margin: auto;
}
.container {
justify-items: left;
align-items: bottom;
z-index: 2;
padding-top: 55px;
padding-left: 18px;
}
button {
width: 140px;
height: 60px;
font-size: 16px;
font-weight: bold;
color: #2e9ca5;
border: 2px solid #2e9ca5;
border-radius: 5px;
background: white;
transition: all 0.5s ease;
cursor: pointer;
}
button:hover {
background: #2e9ca5;
color: white;
}
#show {
visibility: visible;
animation: pop 0.5s ease-in;
}
#keyframes pop {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
#hidden {
animation: out 0.5s ease-out;
}
#keyframes out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.popUp::before {
content: "x";
font-size: 30px;
color: #8FC1C1;
position: fixed;
right: -35px;
top: 4px;
}
.popUp {
display: block;
margin-top: 5% !important;
background: rgba(0, 0, 0, 0);
width: 50%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%);
justify-items: center;
align-items: center;
visibility: hidden;
}
form {
display: flex;
flex-direction: column;
width:85%;
margin:0 auto;
grid-template-columns: 150px;
grid-template-rows: repeat(10, 30px);
grid-row-gap: 10px;
background: white;
padding: 30px;
border-radius: 5px;
border: 1px solid #2e9ca5;
}
input,
textarea {
border-radius: 3px;
border: 1px solid #f2f2f2;
padding: 0 6px;
}
input[type=text],
input[type=email] {
height: 30px;
}
input[type=textarea] {}
input[type=submit] {
height: 30px;
background: #2e9ca5;
color: white;
font-weight: bold;
transition: background 0.3s ease;
border: 0;
border-radius: 5px;
}
input[type=submit]:hover {
background: white;
color: #2e9ca5;
}
.remove {
justify-content: end;
align-items: end;
}
label {
color: #b3b3b3;
}
<!DOCTYPE html>
<html>
<head>
<title>Discover To Istanbul</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto&display=swap'>
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#400;900;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu-bar">
<div class="menu-banner">istanbul</div>
<div class="menu-button">
<ul>
<li>HOME</li>
<li>DESTINATIONS</li>
<li>GALLERY</li>
</ul>
</div>
</div>
<script src="js/main.js" type="text/javascript" defer></script>
<div class="main-header">
<center>
<div class="header-tab">
<h1>İSTANBUL</h1>
<div class="header-alt">Let's Go On The Adventure with us !</div>
<div class="header-alt2"> EXPLORE ISTANBUL </div>
</div>
<div class="header-tab-video">
<header>
<video autoplay="" style="filter:contrast(1.099) brightness(0.92)" preload="none" muted="" loop="" width="780" height="560">
<source src="image/video.mp4" type="video/mp4">
</video>
<div id="overlay">
<p>Istanbul is <span class="typed-text" ></span></p>
</div>
</header>
</div>
</center>
</div>
<a name="anc2">
<div name="#anc2" class="places" id="sacred">
</a>
<h1>sacred places</h1>
<h5>explore most impressive sacred places with us.</h5>
<h6> discover more</h6>
</div>
<div class="places" id="palaces">
<h1 id="flt-rght"> palaces</h1>
<h5 id="flt-rght">explore most attractive palaces with us.</h5>
<a href="html/palaces/palaces.html">
<h6>discover more</h6>
</a>
</div>
<div class= "places" id="oldbuildings">
<h1>old buildings</h1>
<h5>Explore breathtaking and beautiful buildings with us.</h5>
<a href="html/oldbuildings/oldbuildings.html">
<h6>discover more</h6>
</a>
</div>
<div class="galeri">
<h1><a name="anc3" style="text-decoration:none;">#discoverTurkey</a></h1>
<h2>VIDEO <font color=red>|</font> PHOTO </h2>
<div class="galeri-alt">
<div class="galeri-ic" id="galeri1"></div>
<div class="galeri-ic" id="galeri2"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri3"></div>
<div class="galeri-ic" id="galeri4"></div>
<div class="galeri-ic" id="galeri5"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri6"></div>
</div>
</div>
<div class="kayangörseller"
<center><p style="font-size:60px""font-family:Calluna;">Social Media</p></center>
<div class="images">
<marquee direction="right" scrollamount="7">
<a href="https://www.instagram.com/p/CI3iV5yr416/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/galata.jpg" style="width:400px;height:400px;"> </a>
<a href="https://www.instagram.com/p/CI3huz5LGDw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/c.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3h9xCLXPy/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/ayasofya.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iMZXLZy9/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/fenerrum.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iaZlLn-N/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/kapalicarsi.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iikbrmdw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/sultanahmet.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3isMKLXrS/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/taksimanit.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i9RALySO/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/yerebatan.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3xiRiryIn/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/a.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i1EWrZQr/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/t.jpg" style="width:400px;height:400px;">
</marquee>
</div>
</div>
<div class="map">
<center>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1D66DY_D1-yifqdWfN4_k4mrj_S_JukO6" width="640" height="480" ></iframe>
</center>
</div>
<footer>
<div class="footer">
<div class="social">
<img src="image/instagram.png"><img src="image/youtube.png"><img src="image/twitter.png"><img src="image/facebook.png">
<div class="container">
<button>Contact Us</button>
</div>
<div class="popUp">
<form>
<label for="fn">First Name</label>
<input type="text" name="fn">
<label for="ln">Last Name</label>
<input type="text" name="ln">
<label for="email">Email</label>
<input type="email" name="email">
<label for="notes">Comments</label>
<textarea name="notes" rows="5" cols="5"></textarea>
<input id='submit' type="submit" value="Submit">
<p style="color:#b3b3b3;"> Pop-Up Facts, Recommendations,Interesting Routes... More For Istanbul! </p>
</form>
</div>
</div>
<div class="social" style="width:300px;">
<p>This website prepared for web design course by Kadir Has University students.</p>
<p>Ayça Çiçekdağ</p>
<p>Emre Karağaç</p>
<p>Hilal Pelin Akyüz</p>
<p>İpek Saygut</p>
<p>Sude Arslan</p>
</div>
<div class="social" style="width:180px;" id="logoalt"></div>
</div>
</footer>
<div class="kayanyazi">
<marquee direction=right bgColor="#2e9ca5" text-color="white">FIND ISTANBUL-EXPLORE ISTANBUL WITH US ! | by Ayça Çiçekdağ , Emre Karağaç,Hilal Pelin Akyüz
İpek Saygut,Sude Arslan
</marquee>
</div>
</body>
</html>

When I click a number close to the empty box, it should move (Beginner)

Hi I'm pretty new too this and were wondering if somebody could help me with this "easy" tricky code, the thing is I want the numbers too move like a picture puzzle, soo when you click a number away from the empty box nothing happens but when you click a number beside it, the number will move to the location of the empty box and the box wil move to the number's last location. This is what I have so far :P
<!DOCTYPE html>
<html>
<head>
<Style>
div.container {
display: flex;
height: 28vh;
}
div.BundTekst {
display: flex;
height: 28vh;
}
div.number {
color: White;
background-color: black;
margin: 10px;
border: 10px solid red;
display: flex;
flex: 1;
font-size: 500%;
text-align: center;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<h1>Introduksjon til HTML, CSS og Javascript</h1>
<div class="container">
<div id="A1" class="number" onclick="show(this)" >7</div>
<div id="A2" class="number" onclick="show(this)" >2</div>
<div id="A3" class="number" onclick="show(this)" >5</div>
</div>
<div class="container">
<div id="B1" class="number" onclick="show(this)" >1</div>
<div id="B2" class="number" onclick="show(this)" ></div>
<div id="B3" class="number" onclick="show(this)" >3</div>
</div>
<div class="container">
<div id="C1" class="number" onclick="show(this)" >6</div>
<div id="C2" class="number" onclick="show(this)" >9</div>
<div id="C3" class="number" onclick="show(this)" >8</div>
</div>
<script>
var counter = 0;
var lastClickedDiv;
function show(tag, alt1, alt2, alt3, alt4){
if(alt1 && document.getElementById(alt2).innerHTML == 'Alt1')
{
tag.innerHTML = 'alt1';
}
if(alt2 && document.getElementById(alt2).innerHTML == 'alt2')
{
tag.innerHTML = 'alt2';
}
if(alt3 && document.getElementById(alt3).innerHTML == 'alt3')
{
tag.innerHTML = 'Alt3';
}
if(alt4 && document.getElementById(alt4).innerHTML == 'alt4')
{
tag.innerHTML = 'Alt3';
}
}
</script>
</body>
</html>
Check the below code. Hope this is what you are looking for:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
div.container {
display: flex;
height: 28vh;
}
div.BundTekst {
display: flex;
height: 28vh;
}
div.number {
color: White;
background-color: black;
margin: 10px;
border: 10px solid red;
display: flex;
flex: 1;
font-size: 500%;
text-align: center;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<h1>Introduksjon til HTML, CSS og Javascript</h1>
<div class="container">
<div id="A1" class="number">7</div>
<div id="A2" class="number">2</div>
<div id="A3" class="number">5</div>
</div>
<div class="container">
<div id="B1" class="number">1</div>
<div id="B2" class="number empty"></div>
<div id="B3" class="number">3</div>
</div>
<div class="container">
<div id="C1" class="number">6</div>
<div id="C2" class="number">9</div>
<div id="C3" class="number">8</div>
</div>
<script>
$(".number").click(function(){
$(".empty").text($(this).text()).removeClass('empty');
$(this).addClass('active').text('').addClass('empty');
});
</script>
</body>
</html>

Hide container div on click

I click Click Me! to display the #formcontainer div.
I click it again to hide it, but it doesn't hide :-(
Can someone explain why?
Demo: https://jsfiddle.net/v809wxp9/
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You are not adding the class back to it when class is missing.
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have to add Following Line in Else Condition :
$("#formcontainer").addClass('hassent');
You are only remove the class at time of click.Then else statement add with class$('#formcontainer').addClass('hassent');.Its get back with original position.
jQuery( document ).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function(){
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
}else{
$('#formcontainer').addClass('hassent');
$('#topimage').slideUp();
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner{
padding:15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size:30px;
text-transform:uppercase;
letter-spacing:3px;
}
#sub-page-banner .tog{
margin-top:0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer{
overflow:hidden;
height:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Add the class you remove
Use toggle() function
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
//if ($("#formcontainer").hasClass("hassent")) {
// $('#formcontainer').removeClass('hassent');
// $('#topimage').slideDown();
// $('#formcontainer').css('height', '0');
//} else {
// $('#formcontainer').css('height', 'auto');
// }
$('#formcontainer').toggle();
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
See below code just need to addd $('#formcontainer').addClass('hassent');
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

in jscrollpane, scrolling is not working

Objective:: want to make a registration pop page with vertical scroll bar by using jScrollPane.
Issue:: vertical scrollbar is not moving
HTML code::
<div id="register" class="wpml-content jspScrollable" >
<div class="jspContainer" style="width: 100%; height: 370px;">
<div class="jspPane">
<form action="register" method="post" id="form" class="group" name="loginform" >
<!-- code for registration-->
</form>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<div class="jspTrack" style="height: 200px;">
<div class="jspDrag" style="height: 77px; top: 0px;">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
JS code::
<script type="text/javascript" src="/plugins/jScrollPane-master/script/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="/plugins/jScrollPane-master/script/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="/plugins/jScrollPane-master/script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/plugins/jScrollPane-master/script/mwheelIntent.js"></script>
jQuery(document).ready(function(){
$('#register').jScrollPane();
});
CSS code::
.jspVerticalBar {
width: 8px;
background-color: #ededed;
}
.jspTrack {
width: 8px;
background-color: #ededed;
}
.jspDrag {
width: 8px;
background-color: #ccc;
}
I checked http://jscrollpane.kelvinluck.com/basic.html as I am new to jScrollPane but not getting where am I missing code.

Categories