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 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>
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>
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>
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>
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.