I did an exact copy of the Carousel at the Bootstrap page example but it does not work at all. The slide does not work, it keeps in the first image always. Should I add some Javascript? I put the jquery cdn on top of the bootstrap cdn as I saw in many posts about a possible solution, but it still no working. Below it is the html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cotizador de Seguros</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="Style.css">
<script defer src="variables.js"></script>
<script defer src="cotizadordeauto.js"></script>
</head>
<body>
<nav>
<div class="topnav">
<img src="imagenes/ooo.jpg" alt="sol">
<span class="navbar-brand">Seguros Sunshine</span>
</div>
</nav>
<div>
<h2>En Seguros Sunshine tenemos muchas opciones para vos</h2>
</div>
<p id="todaInfo"></p>
<div class="container" id="preguntas">
<br>
<br>
<h3>Ingresa tus datos para iniciar una cotizacion</h3>
<table class="table table-striped">
<thead>
<input type="text" id="nombre" class="no-outline" placeholder="Nombre">
<input type="number" id="edad" class="no-outline" placeholder="Edad">
<input type="email" id="email" class="no-outline" placeholder="Email">
<input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
<div>
<button onclick="Guardar()" id="guardado">Guardar</button>
</div>
</thead>
<tbody id="info" class="shadow">
</tbody>
</table>
</div>
<br>
<div class="container shadow col-lg-6">
<div id="contenido" class="pb-auto" style="display: none">
<header class="p-3 bg-info text-white text-uppercase rounded">
<h1 class="text-center">Cotiza tu auto aqui</h1>
</header>
<form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
<div class="d-flex align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
<select class="d-flex mt-2 p-3 rounded" id="marca">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
<select class="d-flex mt-2 p-3 rounded" id="modelo">
<option value="" disabled selected> Seleccionar </option>
</select>
</div>
<div class="d-flex justify-content-around align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
<select class="d-flex p-3 rounded" id="year">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
<input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
</div>
<fieldset>
<legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>
<div class="d-flex justify-content-around mt-5">
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros</label>
<input type="radio" name="tipo" value="terceros" checked>
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros Ampliada</label>
<input type="radio" name="tipo" value="terceros-ampliada">
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Todo Riesgo</label>
<input type="radio" name="tipo" value="todo-riesgo">
</label>
</div>
</div>
</fieldset>
<div id="cargando" style="display: none">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div id="resultado"></div>
<div class="d-flex justify-content-center py-4">
<button type="submit" class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
</button>
</div>
</form>
</div>
</div>
<!--Cierre del form y container-->
<br>
<div>
<br>
<div id="carouselSeguro" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="imagenes/grua.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="imagenes/mapa.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="imagenes/online.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Just change image file to yours!
This code works well for me:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cotizador de Seguros</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav>
<div class="topnav">
<img src="imagenes/ooo.jpg" alt="sol">
<span class="navbar-brand">Seguros Sunshine</span>
</div>
</nav>
<div>
<h2>En Seguros Sunshine tenemos muchas opciones para vos</h2>
</div>
<p id="todaInfo"></p>
<div class="container" id="preguntas">
<br>
<br>
<h3>Ingresa tus datos para iniciar una cotizacion</h3>
<table class="table table-striped">
<thead>
<input type="text" id="nombre" class="no-outline" placeholder="Nombre">
<input type="number" id="edad" class="no-outline" placeholder="Edad">
<input type="email" id="email" class="no-outline" placeholder="Email">
<input type="tel" id="telefono" class="no-outline" placeholder="Telefono">
<div>
<button onclick="Guardar()" id="guardado">Guardar</button>
</div>
</thead>
<tbody id="info" class="shadow">
</tbody>
</table>
</div>
<br>
<div class="container shadow col-lg-6">
<div id="contenido" class="pb-auto" style="display: none">
<header class="p-3 bg-info text-white text-uppercase rounded">
<h1 class="text-center">Cotiza tu auto aqui</h1>
</header>
<form class="mt-10 max-width mx-auto" action="#" id="cotizar-seguro">
<div class="d-flex align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="marca">Marca:</label>
<select class="d-flex mt-2 p-3 rounded" id="marca">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3 w-20" for="marca">Modelo:</label>
<select class="d-flex mt-2 p-3 rounded" id="modelo">
<option value="" disabled selected> Seleccionar </option>
</select>
</div>
<div class="d-flex justify-content-around align-items-center mb-5">
<label class="font-weight-bold text-uppercase mr-3 w-20" for="year">Año:</label>
<select class="d-flex p-3 rounded" id="year">
<option value="" disabled selected> Seleccionar </option>
</select>
<label class="font-weight-bold text-uppercase ml-auto mr-3" for="color">Color:</label>
<input type="text" class="d-flex p-3 rounded" id="color" placeholder="El color es opcional">
</div>
<fieldset>
<legend class="font-weight-bold text-uppercase text-center w-full">Tipo Seguro</legend>
<div class="d-flex justify-content-around mt-5">
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros</label>
<input type="radio" name="tipo" value="terceros" checked>
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Terceros Ampliada</label>
<input type="radio" name="tipo" value="terceros-ampliada">
</label>
</div>
<div>
<label class="font-weight-bold text-uppercase mr-2">Todo Riesgo</label>
<input type="radio" name="tipo" value="todo-riesgo">
</label>
</div>
</div>
</fieldset>
<div id="cargando" style="display: none">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<div id="resultado"></div>
<div class="d-flex justify-content-center py-4">
<button type="submit"
class="mx-auto bg-info hover text-white font-weight-bold py-2 px-20 rounded">Cotizar Seguro
</button>
</div>
</form>
</div>
</div>
<!--Cierre del form y container-->
<br>
<div class="container">
<div id="carouselSeguro" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="pikachu.jpg" alt="First slide" style="width: 50%; height: 50%">
</div>
<div class="item">
<img src="pikachu.jpg" alt="Second slide" style="width: 50% ; height: 50%">
</div>
<div class="item">
<img src="pikachu.jpg" alt="Third slide" style="width: 50%; height: 50%">
</div>
</div>
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>```
Try copying 'CSS' link from bootstrap getting started page and copy in head tag and while JS scripts should be after body tag. follow this link to have more understanding.
Add css files to the tag like
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
and always put js files at the bottom of your html code after tag
.
.
.
</body>
<script defer src="variables.js"></script>
<script defer src="cotizadordeauto.js"></script>
</html>
Copy and paste the following:
Before the body closing tag (/body).
Related
I'm learning Vue with VUEX and I'm making and small app.
That small app call a json data and print it in a template.
I created a mutation called year(), that mutation get a world of a string and return the result but when I use that mutation inside template {{ year(item.fechaInicio) }} return a empty value.
That's my html code:
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<!-- bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<!-- fontawesome css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Tipografía -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i|Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
<!-- Jquery -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- cookies jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<!-- Vuex -->
<script src="https://unpkg.com/vuex#3.6.0/dist/vuex.js"></script>
<!-- CSS estilos -->
<link href="calendario-2020.css" rel="stylesheet" />
</head>
<body>
<div class="Calendario" id="caja-vue">
<p class="calendario-titulo">Calendario Académico</p>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a aria-controls="home" aria-selected="true" class="nav-link active" data-toggle="tab" href="#home" id="home-tab" role="tab">Estudiantes</a></li>
</ul>
<!--TAB 1 ESTUDIANTES-->
<div class="tab-content" id="myTabContent">
<div aria-labelledby="home-tab" class="tab-pane fade show active" id="home" role="tabpanel">
<!--Semestres-->
<div class="flex-container">
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck1" type="checkbox" /> <label class="custom-control-label" for="customCheck1">Semestre <span class="num">1</span></label></div>
<p>Enero 17-2020<br />
Mayo 15-2020
</p>
</div>
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck2" type="checkbox" /> <label class="custom-control-label" for="customCheck2">Semestre <span class="num">2</span></label></div>
<p>Agosto 15-2020<br />
Diciembre 20-2020
</p>
</div>
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck3" type="checkbox" /> <label class="custom-control-label" for="customCheck3">Intersemestral</label></div>
<p>Enero 17-2020<br />
Mayo 15-2020
</p>
</div>
<div class="col-lg-12 fechas">
<div class="row">
<div class="col-lg-9"> </div>
<div class="col-lg-3">
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Organizar por:</option>
<option>Fecha Inicio</option>
<option>Fecha Final</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!--Formulario de Busqueda-->
<div class="Formulario_calndario">
<div class="row">
<div class="col-lg-4">
<div class="form Formulario_busqueda">
<div class="input-group espacio">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fas fa-search">
<!--icono-->
</i>
</button>
</div>
<input class="form-control" name="search" placeholder="¿Qué estás buscando?" type="text" />
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Tipo de programa</option>
<option>Pregrado</option>
<option>Posgrado</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Categoria</option>
<option>Cierre académico</option>
<option>Comité de idiomas</option>
<option>Exámenes finales</option>
<option>Homologaciones, reconocimientos y validaciones</option>
<option>Inicio y finalización de clases</option>
<option>Otras actividades de la vida universitaria</option>
<option>Pago de matrículas</option>
<option>Proceso de inducción</option>
<option>Publicación de grupos cancelados</option>
<option>Recesos y vacaciones</option>
<option>Registro de asignaturas</option>
<option>Reporte de notas</option>
<option>Reserva de cupo, re activaciones de cupo y reintegros</option>
<option>Retiro de asignaturas</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Tipo de programa</option>
<option>Escuela de Administración</option>
<option>Escuela de Medicina y Ciencias de la Salud</option>
<option>Escuela de Ciencias Humanas</option>
<option>Facultad de Economía</option>
<option>Facultad de Jurisprudencia</option>
<option>Facultad de Estudios Internacionales, Políticos y Urbanos</option>
<option>Facultad de Ciencias Naturales</option>
<option>Facultad de Creación</option>
<option>Escuela de Ingeniería, Ciencia y Tecnologí</option>
</select>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fas fa-search">
<!--icono-->
</i>
</button>
</div>
<input class="form-control" name="search" placeholder="Programa" type="text" />
</div>
</div>
<div class="form-group">
<p><a aria-controls="multiCollapseExample1" aria-expanded="false" class="Fecha" data-toggle="collapse" href="#multiCollapseExample1" role="button">Seleccione un mes</a></p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body"><input class="form-control" id="example-date-input" type="date" value="2011-08-19" /></div>
</div>
</div>
</div>
<div class="form-group">
<p><a aria-controls="multiCollapseExample2" aria-expanded="false" class="Fecha" data-toggle="collapse" href="#multiCollapseExample2" role="button">Seleccione un mes</a></p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
<p>Fecha inicial</p>
<input class="form-control" id="example-date-input" type="date" value="2011-08-19" />
<p>Fecha final</p>
<input class="form-control" id="example-date-input" type="date" value="2011-08-19" />
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<input class="btn btn-primary" type="submit">Buscar</input>
</div>
<div class="col-md-6">
<input class="btn btn-primary Limpiar" type="submit">Limpiar</input>
</div>
</div>
</div>
</div>
</div>
<actividades></actividades>
</div>
</div>
</div>
</div>
</div>
<script src="codigo.js"></script>
</body>
</html>
That's my javascript code:
//componentes
Vue.component('actividades', {
template: /*html*/
`
<div class="col-lg-8">
<template v-for="item of actividades">
<div class="row Programa-especifico">
<div class="col-md-4 col-lg-4 Fecha">
<div class="row">
<div class="col-md-2 col-lg-2">
<i class="far fa-calendar">
<!--icono-->
</i>
</div>
<div class="col-md-10 col-lg-10 px-5"><strong class="titulo">Marzo 08</strong> <span>Abril 17 2020</span></div>
</div>
<div class="mt-3 txt">
<strong>Tipo de programa</strong> <span>{{ item.tipoPrograma }}</span><br />
<strong>Facultad</strong> <span>{{ item.facultad }}</span><br />
<strong>Programa</strong> <span>{{ item.programa }}</span><br />
<strong>Categoria</strong> <span>{{ item.categoria }}</span>
</div>
</div>
<div class="col-md-8 col-lg-8 Descripcion">
<p class="titulo">{{ item.contenido }}</p>
<!--
<p class="txt">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
-->
<!--
<i class="fas fa-map-marker-alt">
</i>
-->
<!--
<strong>Lugar:</strong> <span class="txt">Universidad del Rosario, Sede, Claustro, Aula Mutis</span><br />
<i class="far fa-calendar">
</i>
-->
<strong>Fecha de inicio:</strong> <span class="txt">
Marzo, de {{ year(item.fechaInicio) }}
</span><br />
<strong>Fecha de cierre:</strong> <span class="txt">12 Marzo, de 2020</span><br />
<!--
<i class="far fa-clock">
</i>
<strong>Hora:</strong> <span class="txt">De 8:00 a.m. a 12:30 p.m</span>
-->
<div class="row">
<div class="col-lg-3 Semestre_uno">{{ item.periodo }}</div>
<div class="col-lg-3 Cerrado">Cerrado</div>
</div>
</div>
</div>
</template>
</div>
`,
computed: {
...Vuex.mapState(['actividades','programas']),
},
methods: {
...Vuex.mapActions(['llamarJson']),
...Vuex.mapMutations(['year'])
}
});
//VueEx
const store = new Vuex.Store({
state: {
actividades: [],
programas: []
},
mutations: {
llamarJsonMutation(state, llamarJsonAction){
state.actividades = llamarJsonAction.Nueva_estructura_proveedor;
state.programas = llamarJsonAction.BD_programas;
},
year(date){
return String(date).substr(8, 2);
}
},
actions: {
llamarJson: async function({ commit }){
const data = await fetch('calendario-2021-prueba.json');
const dataJson = await data.json();
commit('llamarJsonMutation', dataJson);
}
}
});
//Vue
new Vue({
el: '#caja-vue',
store: store,
created() {
this.$store.dispatch('llamarJson');
}
});
Do not return the value in mutation. Mutations are for mutating states in vuex. Instead, add a property to state as year then in the mutaitioner just add :
state.year = String(date).substr(8, 2);
Then in your component and in computed add:
year(){
return this.store.state.year;
}
And now, you can access {{year}} in your template.
<!doctype html>
</html>
<head>
<title> </title>
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="sigin-style.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="card card0 border-0">
<div class="row d-flex">
<div class="col-lg-6">
<div class="card1 pb-5">
<div class="row"> </div>
<div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img
src="https://i.imgur.com/uNGdWHi.png" class="image"> </div>
</div>
</div>
<div class="col-lg-6">
<div class="card2 card border-0 px-4 py-5" name = "login">
<div class="row mb-4 px-3"> <!-- fb twitter linked login-->
<h6 class="mb-0 mr-4 mt-2">Sign in with</h6>
<div class="facebook text-center mr-3">
<div class="fa fa-facebook"></div>
</div>
<div class="twitter text-center mr-3">
<div class="fa fa-twitter"></div>
</div>
<div class="linkedin text-center mr-3">
<div class="fa fa-linkedin"></div>
</div>
</div>
<div class="row px-3 mb-4"> <!-- OR login separator line-->
<div class="line"></div> <small class="or text-center">Or</small>
<div class="line"></div>
</div>
<div class="row px-3" > <!-- email address-->
<label class="mb-1">
<h6 class="mb-0 text-sm">Email Address</h6>
</label>
<input class="mb-4" type="text" name="email" placeholder="Enter a valid email address">
</div>
<div class="row px-3"> <label class="mb-1"> <!-- passowrd-->
<h6 class="mb-0 text-sm">Password</h6>
</label>
<input type="password" name="password" placeholder="Enter password">
</div>
<div class="row px-3 mb-4"> <!-- remember me checkbox and forgot password link-->
<div class="custom-control custom-checkbox custom-control-inline"> <!--remember me-->
<input id="chk1"
type="checkbox" name="chk" class="custom-control-input">
<label for="chk1" class="custom-control-label text-sm">Remember me</label>
</div>
Forgot Password? <!--fogot password-->
</div>
<div class="row mb-3 px-3"> <!--login button-->
<button type="submit" class="btn btn-blue text-center" onclick="validate()" >Login</button>
</div>
<div class="row mb-4 px-3"><!-- register link-->
<small class="font-weight-bold">Don't have an account?
<a href="E:/WebDevStudy/html-css/bootstrap%20webpage%20example/register.html"
class="text-danger "> Register
</a>
</small>
</div>
</div>
</div>
</div>
<div class="bg-blue py-4">
<div class="row px-3"> <small class="ml-4 ml-sm-5 mb-2">Copyright © 2019. All rights
reserved.</small>
<div class="social-contact ml-4 ml-sm-auto"> <span class="fa fa-facebook mr-4 text-sm"></span> <span
class="fa fa-google-plus mr-4 text-sm"></span> <span
class="fa fa-linkedin mr-4 text-sm"></span> <span
class="fa fa-twitter mr-4 mr-sm-5 text-sm"></span> </div>
</div>
</div>
</div>
</div>
</body>
<script>
function validate()
{
var em = document.login.email.value;
var pw = document.login.password.value;
console.log(em);
var valid = false;
var usernameArray = ["ashish", "rahul"];
var passwordArray = ["12345", "54321"];
for (var i = 0; i < usernameArray.length; i++)
{
if ((un == usernameArray[i]) && (pw == passwordArray[i]))
{
valid = true;
break;
}
}
if (valid)
{
alert("Login was successful");
window.location = "www.google.ie";
return false;
}
else
{
alert("Incorrect password or username you are now blocked");
return false;
}
}
</script>
</html>
The above code is intended to be for a simple html login page where user will enter their email and password to login by clicking login button. the script for doing so is added at the end of the document following body tag. for some reason it is unable to fetch the email and password fields' values and match it with the array i have implemented. kindly point out my fault.
Can you work with this? I tested it and it works.
I changed your
var em = document.login.email.value;
var pw = document.login.password.value;
to
var em = document.getElementById('email').value;
var pw = document.getElementById('password').value;
and gave your email and password inputs an id
function validate() {
var em = document.getElementById('email').value;
var pw = document.getElementById('password').value;
console.log(em);
var valid = false;
var usernameArray = ["ashish", "rahul"];
var passwordArray = ["12345", "54321"];
for (var i = 0; i < usernameArray.length; i++) {
if ((em == usernameArray[i]) && (pw == passwordArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert("Login was successful");
window.location = "www.google.ie";
return false;
} else {
alert("Incorrect password or username you are now blocked");
return false;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="card card0 border-0">
<div class="row d-flex">
<div class="col-lg-6">
<div class="card1 pb-5">
<div class="row"> </div>
<div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img src="https://i.imgur.com/uNGdWHi.png" class="image"> </div>
</div>
</div>
<div class="col-lg-6">
<div class="card2 card border-0 px-4 py-5" name="login">
<div class="row mb-4 px-3">
<!-- fb twitter linked login-->
<h6 class="mb-0 mr-4 mt-2">Sign in with</h6>
<div class="facebook text-center mr-3">
<div class="fa fa-facebook"></div>
</div>
<div class="twitter text-center mr-3">
<div class="fa fa-twitter"></div>
</div>
<div class="linkedin text-center mr-3">
<div class="fa fa-linkedin"></div>
</div>
</div>
<div class="row px-3 mb-4">
<!-- OR login separator line-->
<div class="line"></div> <small class="or text-center">Or</small>
<div class="line"></div>
</div>
<form>
<div class="row px-3">
<!-- email address-->
<label class="mb-1">
<h6 class="mb-0 text-sm">Email Address</h6>
</label>
<input class="mb-4" id="email" type="text" name="email" placeholder="Enter a valid email address">
</div>
<div class="row px-3"> <label class="mb-1"> <!-- passowrd-->
<h6 class="mb-0 text-sm">Password</h6>
</label>
<input type="password" id="password" name="password" placeholder="Enter password">
</div>
<div class="row px-3 mb-4">
<!-- remember me checkbox and forgot password link-->
<div class="custom-control custom-checkbox custom-control-inline">
<!--remember me-->
<input id="chk1" type="checkbox" name="chk" class="custom-control-input">
<label for="chk1" class="custom-control-label text-sm">Remember me</label>
</div>
Forgot Password?
<!--fogot password-->
</div>
<div class="row mb-3 px-3">
<!--login button-->
<button type="submit" class="btn btn-blue text-center" onclick="validate()">Login</button>
</div>
</form>
<div class="row mb-4 px-3">
<!-- register link-->
<small class="font-weight-bold">Don't have an account?
<a href="E:/WebDevStudy/html-css/bootstrap%20webpage%20example/register.html"
class="text-danger "> Register
</a>
</small>
</div>
</div>
</div>
</div>
<div class="bg-blue py-4">
<div class="row px-3"> <small class="ml-4 ml-sm-5 mb-2">Copyright © 2019. All rights
reserved.</small>
<div class="social-contact ml-4 ml-sm-auto"> <span class="fa fa-facebook mr-4 text-sm"></span> <span class="fa fa-google-plus mr-4 text-sm"></span> <span class="fa fa-linkedin mr-4 text-sm"></span> <span class="fa fa-twitter mr-4 mr-sm-5 text-sm"></span> </div>
</div>
</div>
</div>
</div>
form tags are missing in your code; submit button and input fields should be within form tags
You need to place your inputs within a form to get values the way you want.
Look:
<!doctype html>
<html>
<head>
<title> </title>
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="sigin-style.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid px-1 px-md-5 px-lg-1 px-xl-5 py-5 mx-auto">
<div class="card card0 border-0">
<div class="row d-flex">
<div class="col-lg-6">
<div class="card1 pb-5">
<div class="row"> </div>
<div class="row px-3 justify-content-center mt-4 mb-5 border-line"> <img
src="https://i.imgur.com/uNGdWHi.png" class="image"> </div>
</div>
</div>
<div class="col-lg-6">
<div class="card2 card border-0 px-4 py-5" name = "login">
<div class="row mb-4 px-3"> <!-- fb twitter linked login-->
<h6 class="mb-0 mr-4 mt-2">Sign in with</h6>
<div class="facebook text-center mr-3">
<div class="fa fa-facebook"></div>
</div>
<div class="twitter text-center mr-3">
<div class="fa fa-twitter"></div>
</div>
<div class="linkedin text-center mr-3">
<div class="fa fa-linkedin"></div>
</div>
</div>
<div class="row px-3 mb-4"> <!-- OR login separator line-->
<div class="line"></div> <small class="or text-center">Or</small>
<div class="line"></div>
</div>
<form name="login">
<div class="row px-3" > <!-- email address-->
<label class="mb-1">
<h6 class="mb-0 text-sm">Email Address</h6>
</label>
<input class="mb-4" type="text" name="email" placeholder="Enter a valid email address">
</div>
<div class="row px-3"> <label class="mb-1"> <!-- passowrd-->
<h6 class="mb-0 text-sm">Password</h6>
</label>
<input type="password" name="password" placeholder="Enter password">
</div>
<div class="row px-3 mb-4"> <!-- remember me checkbox and forgot password link-->
<div class="custom-control custom-checkbox custom-control-inline"> <!--remember me-->
<input id="chk1"
type="checkbox" name="chk" class="custom-control-input">
<label for="chk1" class="custom-control-label text-sm">Remember me</label>
</div>
Forgot Password? <!--fogot password-->
</div>
<div class="row mb-3 px-3"> <!--login button-->
<button type="submit" class="btn btn-blue text-center" onclick="validate()" >Login</button>
</div>
</form>
<div class="row mb-4 px-3"><!-- register link-->
<small class="font-weight-bold">Don't have an account?
<a href="E:/WebDevStudy/html-css/bootstrap%20webpage%20example/register.html"
class="text-danger "> Register
</a>
</small>
</div>
</div>
</div>
</div>
<div class="bg-blue py-4">
<div class="row px-3"> <small class="ml-4 ml-sm-5 mb-2">Copyright © 2019. All rights
reserved.</small>
<div class="social-contact ml-4 ml-sm-auto"> <span class="fa fa-facebook mr-4 text-sm"></span> <span
class="fa fa-google-plus mr-4 text-sm"></span> <span
class="fa fa-linkedin mr-4 text-sm"></span> <span
class="fa fa-twitter mr-4 mr-sm-5 text-sm"></span> </div>
</div>
</div>
</div>
</div>
</body>
<script>
function validate()
{
var em = document.login.email.value;
var pw = document.login.password.value;
console.log(em);
var valid = false;
var usernameArray = ["ashish", "rahul"];
var passwordArray = ["12345", "54321"];
for (var i = 0; i < usernameArray.length; i++)
{
if ((un == usernameArray[i]) && (pw == passwordArray[i]))
{
valid = true;
break;
}
}
if (valid)
{
alert("Login was successful");
window.location = "www.google.ie";
return false;
}
else
{
alert("Incorrect password or username you are now blocked");
return false;
}
}
</script>
</html>
I would appreciate if you could help me, since I am a novice in programming, I am wanting to obtain different values depending on what I select, and that these numerical values change in each box.
For example, if I select "Loans" in the "new orders" box, the value will be: 312, in the "In process" box 180, in the "Approved" box 56, and in the "Rejected" box 25, as an example .
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="row">
<div class="ml-auto">
<select class="custom-select">
<option value="0" selected>Loans</option>
<option value="1">Home appliances</option>
<option value="2">Cable tv</option>
<option value="3">Internet</option>
</select>
</div>
</div>
<div class="row">
<!-- column -->
<div class="col-xs-4">
<div class="card bg-info text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">New orders</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">368</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-secondary text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">In process</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">257</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-success text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Approved</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">86</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card bg-danger text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Rejected</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">25</span>
</div>
</div>
</div>
</div>
</div>
</div>
From what I understand from your question: You want to dynamically change the vales in the boxes based on the selection in the dropdown.
This can be done in 3 steps:
Read value from dropdown
Based on the value above, get the data to be put
Update the HTML with the correct id to show correct data
I am using a hardcoded dictionary, you should structure your data in a similar way to easily update the values as needed.
const sampleData = {
"0": [30, 2, 18, 6],
"1": [435, 234, 38, 84],
"2": [464, 34, 49, 33],
"3": [342, 96, 60, 74]
};
const setValues = () => {
const val = document.getElementById("selection").value;
document.getElementById("new-orders").textContent = sampleData[val][0];
document.getElementById("in-process").textContent = sampleData[val][1];
document.getElementById("approved").textContent = sampleData[val][2];
document.getElementById("rejected").textContent = sampleData[val][3];
};
// setting values initially
setValues();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="row">
<div class="ml-auto">
<select class="custom-select" id="selection" onchange="setValues()">
<option value="0" selected>Loans</option>
<option value="1">Home appliances</option>
<option value="2">Cable tv</option>
<option value="3">Internet</option>
</select>
</div>
</div>
<div class="row">
<!-- column -->
<div class="col-xs-4">
<div class="card bg-info text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">New orders</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="new-orders">368</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-secondary text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">In process</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="in-process">257</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-success text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Approved</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="approved">86</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card bg-danger text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Rejected</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="rejected">25</span>
</div>
</div>
</div>
</div>
</div>
</div>
I added classes to the spans but you could do the same with tag names
works fine for me ;)
let numbers = document.getElementsByClassName("number");
for(let i = 0;i<numbers.length;i++){
numbers[i].addEventListener("click",()=>{
//YOU WILL GET THE NUMBER YOU CLICKED
console.log(numbers[i].innerText);
})
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="row">
<div class="ml-auto">
<select class="custom-select">
<option value="0" selected>Loans</option>
<option value="1">Home appliances</option>
<option value="2">Cable tv</option>
<option value="3">Internet</option>
</select>
</div>
</div>
<div class="row">
<!-- column -->
<div class="col-xs-4">
<div class="card bg-info text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">New orders</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">368</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-secondary text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">In process</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">257</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-success text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Approved</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">86</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card bg-danger text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Rejected</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">25</span>
</div>
</div>
</div>
</div>
</div>
</div>
Run the code to check
I got an issue with my website when I am trying to scroll website on mobile devices sometimes its locking and even when you slide finger on device website is not moving properly. On desktop scrolling working fine. I tried to find the solution but cant figure out what is wrong.
You can test it with developers tools on 375 px resolution or in mobile devices here
Bootstrap 4 template: NOW UI Kit by Creative Tim
I thought problem is with cookie script but when I disable it by commenting in HTML problem is not solving. I tried to comment parts of my JS file but still not working.
There is my JS Script:
var selectedClass = "";
$(".filter").click(function () {
selectedClass = $(this).attr("data-rel");
$("#gallery").fadeTo(100, 0.1);
$("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation');
setTimeout(function () {
$("." + selectedClass).fadeIn().addClass('animation');
$("#gallery").fadeTo(300, 1);
}, 300);
});
$( "#scrollDown" ).click(function() {
$( "html, body" ).animate({
scrollTop: 600
}, 600, function() {
// Animation complete.
});
});
//Gallery Animations
baguetteBox.run('.grid-gallery', { animation: 'slideIn' });
//Anchor Function
function scrollToAnchor(aid){
let aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top}, 900);
}
//Menu Anchors Animations
$("#lexuslink").click(function() {
scrollToAnchor('lexus');
});
$("#fiatlink").click(function() {
scrollToAnchor('fiat');
});
$("#merclink").click(function() {
scrollToAnchor('merc');
});
$("#homelink").click(function(){
$('html, body').animate({scrollTop: 0}, 900)
});
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
let hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
//E-mail Validation Function
$(".test").hide();
function validateForm() {
const name = document.getElementById('name').value;
if (name == "") {
document.querySelector('.status').innerHTML = "Wypełnij wszystkie pola.";
return false;
}
const email = document.getElementById('email').value;
if (email == "") {
document.querySelector('.status').innerHTML = "Wpisz swój adres email";
return false;
} else {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(email)) {
document.querySelector('.status').innerHTML = "Wpisz poprawny e-mail.";
return false;
}
}
const subject = document.getElementById('subject').value;
if (subject == "") {
document.querySelector('.status').innerHTML = "Wpisz temat wiadomości.";
return false;
}
const message = document.getElementById('message').value;
if (message == "") {
document.querySelector('.status').innerHTML = "Message cannot be empty";
return false;
}
document.querySelector('.status').innerHTML = "Wysyłanie...";
document.getElementById('contact-form').submit();
}
There is my HTML File:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="samochody,do,ślubu,wynajem,lexus,fiat,zabytkowe,klasyczne,mercedes,fiat">
<meta name="author" content="Daniel Mydlarz">
<title>Samochody do ślubu - Oświęcim i okolice</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/now-ui-kit.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="sass/baguetteBox.min.css">
<link rel="stylesheet" type="text/css" href="sass/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link href="https://fonts.googleapis.com/css?family=Mansalva|Princess+Sofia&display=swap&subset=latin-ext"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="code.js"></script>
</head>
<body class="landing-page sidebar-collapse">
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent" color-on-scroll="300">
<div class="container">
<div class="dropdown button-dropdown d-lg-none">
<a href="#pablo" class="dropdown-toggle" id="navbarDropdown" data-toggle="dropdown">
<span class="button-bar"></span>
<span class="button-bar"></span>
<span class="button-bar"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-header">MENU</a>
<a class="dropdown-item" href="#lexus">Samochody</a>
<a class="dropdown-item" href="#galeria">Galeria</a>
<a class="dropdown-item" href="#oferta">Oferta</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#kontakt">Kontakt</a>
</div>
</div>
<div class="navbar-translate">
<a class="align-baseline nav-link d-lg-none d-xl-none d-md-none float-left" rel="tooltip"
title="Zadzwon teraz aby dowiedziec sie wiecej" data-placement="bottom" href="tel:792-877-785"
target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse"
data-target="#navigation" aria-controls="navigation-index" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-bar top-bar"></span>
<span class="navbar-toggler-bar middle-bar"></span>
<span class="navbar-toggler-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse fx-start" id="navigation"
data-nav-image="./assets/img/blurred-image-1.jpg">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdownbtn" href="" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Samochody
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuMenu">
<a href="#lexus" class="dropdown-item" id="lexuslink" name="itmlexus"
type="button">Lexus</a>
Fiat
<a href="#merc" class="dropdown-item" id="merclink" name="itmmerc"
type="button">Mercedes</a>
</div>
</li>
<li class="nav-item">
Galeria
</li>
<li class="nav-item">
Oferta
</li>
<li class="nav-item">
Kontakt
</li>
<li class="nav-item position-right10">
<a class="nav-link" rel="tooltip" title="Zadzwon teraz aby dowiedziec sie wiecej"
data-placement="bottom" href="tel:792-877-785" target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
</li>
<li class="nav-item position-right">
<a class="nav-link" rel="tooltip" title="Sprawdź nas na Facebook'u" data-placement="bottom"
href="https://www.facebook.com/Samochody-do-Ślubu-Oświęcim-i-okolice-586389625167858"
target="_blank">
<i class="fa fa-facebook-official" style="font-size:34px;color:white"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="wrapper">
<div class="container-fluid p-0" style="overflow:hidden">
<div class="wrapper">
<div class="page-header page-header-small">
<div class="page-header-image" data-parallax="true"
style="background-image: url('img/slub-bg2.jpg')">
</div>
<div class="content-center welcome-text">
<div class="container-fluid landing-text">
<h1 class="h1-respononsive h1-title weird-font">Nowoczesne i klasyczne samochody do ślubu
</h1>
<h3 class="h3-responsive h3-title">Pozwól sobie na odrobinę luksusu...
</h3>
<i class="fa fa-angle-double-down fa-4x arrow-down pb-2" id="scrollDown"
aria-hidden="true"></i>
</div>
</div>
</div>
<main>
<section>
<a name="lexus"></a>
<div class="section pt-2 section-about-us">
<div class="container">
<div class="row" id="lexus">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Nowoczesny Lexus</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/bg-2.jpg" alt="Lexus" class="img-fluid">
</div>
</div>
</div>
<a name="fiat" />
<div class="row" id="fiat">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Zabytkowy Fiat 126p</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/fiat1.jpg" alt="Fiat 126p" class="img-fluid">
</div>
</div>
</div>
<a name="merc" />
<div class="row" id="merc">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Klasyczny Mercedes</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/merc1.jpg" alt="Mercedes" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- GALERIA -->
<h2 class="h2-responsive font-weight-bold text-center border-top border-bottom py-2" id="galeria">
Galeria
</h2>
<section class="gallery-block grid-gallery">
<div class="container">
<div class="btn-group-ctn">
<button type="button" class="btn btn-info filter" data-rel="all">Wszystkie</button>
<button type="button" class="btn btn-info filter" data-rel="1">Lexus</button>
<button type="button" class="btn btn-info filter" data-rel="3">Mercedes</button>
<button type="button" class="btn btn-info filter" data-rel="2">Fiat 126p</button>
</div>
<div class="row gallery" id="gallery">
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/1.jpg">
<img class="img-fluid image scale-on-hover" src="./img/1.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/7.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/8.jpg">
<img class="img-fluid image scale-on-hover" src="./img/8.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat01.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat01.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat02.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat02.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat03.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat03.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat04.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat04.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat05.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat05.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat06.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat06.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc7.jpg">
</a>
</div>
</div>
</div>
</section>
</main>
</div>
<h2 id="oferta" class="h2-responsive font-weight-bold text-center border-top border-bottom py-2 my-5">
Oferta</h2>
<section class="pricing py-5">
<div class="container">
<div class="row center-offer">
<!-- Free Tier -->
<div class="col-lg-8">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h6 class="card-price text-center"><span class="period">od</span> 399 <span
class="period">zł</span>
</h6>
<ul class="fa-ul">
<h4 class="text-muted mt-1">Cena zawiera:</h4>
<li>
Wybrany samochód</li>
<li>
Dojazd do domu
Pani młodej oraz Pana młodego</li>
<li>
Dojazd do kościoła
pary młodej
</li>
<li>
Przejazd na
weselną sale
</li>
</ul>
<a href="#kontakt" class="btn btn-block btn-primary text-uppercase">Zapytaj o
wolne terminy</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-4 pt-5 px-1" id="kontakt">
<div class="container">
<!--Section heading-->
<h2 class="h2-responsive font-weight-bold text-center my-4 border-top border-bottom py-2">
Skontaktuj się z nami</h2>
<!--Section description-->
<p class="text-center w-responsive mx-auto mb-5">Masz jakieś pytania? Chcesz dobrać indywidualną
ofertę?
</p>
<div class="row">
<!--Grid column-->
<div class="col-md-9 mb-md-0 mb-5 contact-form">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Twoje imię</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Twój e-mail</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Temat</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message"
placeholder="Witam, interesuję mnie wynajem samochodu w terminie ..."
name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message">Twoja wiadomość</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left">
<a class="btn btn-submit" onclick="validateForm()">Wyślij</a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 text-center kontakt-info">
<ul class="list-unstyled mb-0">
<li>
<i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>
<p>32-600 Oświęcim, <br>
ul. Zagrodowa 31B</p>
</li>
<li><i class="fa fa-phone mt-4 fa-2x" style="color: black"></i>
<p>+48 792-877-785</p>
</li>
<li>
<i class="fa fa-envelope mt-4 fa-2x" aria-hidden="true" style="color: black"></i>
<p>kodiaqrentacar#gmail.com</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</div>
</section>
</div>
<!-- Plugins -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?theme=white&always=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.0/baguetteBox.js" async></script>
<!-- Core JS Files -->
<script src="assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.6/js/mdb.min.js"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="assets\js\plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script src="assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
</body>
</html>
Maybe someone had similar problem, hope to see some tips from you guys. If you need another script just tell me hope we solve this together.
Best Regards Daniel.
you need to remove below css code form your css file.
.wrapper {
overflow-x: hidden;
}
and also need to update your font size for the element #kontakt p in media query of 576px right now it is 1.1rem you need to reduce it 0.9rem.
I hope after done this two minor changes your scrolling problem will be solved.
I'm still new in coding. I hope I can get a kind response from you.
Please bear with me :) thanks
Anws,
I tried to display the value of these radio buttons but still it won't display.
May I know on how can I get the value of .custom-control-input when I choose a radio button using javascript?
May I know where I did it wrong?
PS: I didn't add the css here yet, what just I need is to display the value of these radio buttons.
function otcContinue_onClick() {
var tac = document.getElementsByClassName('custom-control-input');
if (tac.checked) {
if ($("input[name=exampleRadios]:checked").val()) {
document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block";
document.getElementById('pmethods').style.display = "none";
} else {
$('#errorMsg').text("Please select preferred payment option.");
$('#modalError').modal('show');
}
}
}
<div id="pmethods">
<!-- otc tab -->
<div class="card">
<div class="card-header bg-blueberry" id="headingOne">
<h6 class="mb-0">
<a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments
</a>
</h6>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span class="small">Pay in cash at the nearest payment nearest center.</span>
<div class="row">
<div class="col-md-6 col-xs-12 mt-2">
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" />
<label class="custom-control-label text-md-left" for="exampleRadios1">
<span class="pm-icon-holder">
<img src="images/otc-icons/sm.png" alt="SM" />
</span>
<span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span>
</label>
<br />
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 offset-md-8">
<button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- end otc tab -->
</div>
<div class="mt-3">
<!-- sm form -->
<div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none">
<div class="card-body text-prussian-blue">
<div class="selected-logo mb-2">
<img src="images/logos/logo_sm.png" alt="Payment Logo" />
</div>
<span class="card-text small">Pay in cash at the following stores. See complete list here.</span>
<br />
<br />
<span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span>
<br />
<div class="row mt-4">
<div class="col-md-4 offset-md-8 mb-1">
<button type="submit" class="btn btn-apricot btn-block">Continue</button>
</div>
<div class="col-md-4 offset-md-8 mb-1 text-center">
<u>Go Back</u>
</div>
</div>
</div>
</div>
<!-- end sm form -->
<br />
</div>
I have change your JS so when you click on an input you get the returned value it has. In this case - otc_sm.
$("input[name=exampleRadios]").on('click', function() {
console.log($(this).val());
document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block";
document.getElementById('pmethods').style.display = "none";
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pmethods">
<!-- otc tab -->
<div class="card">
<div class="card-header bg-blueberry" id="headingOne">
<h6 class="mb-0">
<a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments
</a>
</h6>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span class="small">Pay in cash at the nearest payment nearest center.</span>
<div class="row">
<div class="col-md-6 col-xs-12 mt-2">
<div class="custom-control custom-radio">
<input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" />
<label class="custom-control-label text-md-left" for="exampleRadios1">
<span class="pm-icon-holder">
<img src="images/otc-icons/sm.png" alt="SM" />
</span>
<span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span>
</label>
<br />
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 offset-md-8">
<button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- end otc tab -->
</div>
<div class="mt-3">
<!-- sm form -->
<div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none">
<div class="card-body text-prussian-blue">
<div class="selected-logo mb-2">
<img src="images/logos/logo_sm.png" alt="Payment Logo" />
</div>
<span class="card-text small">Pay in cash at the following stores. See complete list here.</span>
<br />
<br />
<span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span>
<br />
<div class="row mt-4">
<div class="col-md-4 offset-md-8 mb-1">
<button type="submit" class="btn btn-apricot btn-block">Continue</button>
</div>
<div class="col-md-4 offset-md-8 mb-1 text-center">
<u>Go Back</u>
</div>
</div>
</div>
</div>
<!-- end sm form -->
<br />
</div>