how can i writing in java script, that when i click on just Read less button jump to the first element, i solved that with this code >> toggle_switch[0].scrollIntoView(false)
it jumps up to where the button in read less position is, but i wanna set the position totally top of button where the first element (div) is
$(document).ready(function () {
$('.nav-toggle').click(function () {
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function () {
if ($(this).css('display') == 'none') {
toggle_switch.html('Read More');
} else {
toggle_switch.html('Read Less');
}
});
});
});
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row" id="collapse" style="display:none">
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
solution without any library or framework:
button.addEventListener("click", function () {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
});
you can calculate the exact position of the div you want to scroll-to
const bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
an than use the variable "offset" in the scroll() function.
top: offset
Edit:
javascript:
const btn = document.querySelector(".btn");
const elementToShow = document.querySelector(".element-to-show");
btn.addEventListener("click", function () {
if (btn.textContent === "Read More") {
btn.textContent = "Read Less";
elementToShow.style.display="flex";
}
else if (btn.textContent === "Read Less") {
btn.textContent = "Read More";
elementToShow.style.display="none";
const bodyRect = document.body.getBoundingClientRect(),
elemRect = document.querySelector(".target-container").getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
window.scroll({
top: offset,
left: 0,
behavior: 'smooth'
});
}
});
just add this class to your element, wich you want to be seen/not seen
.element-to-show {
display: none;
flex-direction: column;
}
<div class="container">
<div class="row element-to-show" id="collapse" >
<div class="col-md-4 mb-4 aktion-text">
also add the class ".target-container" to the div to wich you want to scroll to.
and remove the styling in the HTML file. styling in html has the highest priority so it overwrites the external styles.
const btn = document.querySelector(".btn");
const elementToShow = document.querySelector(".element-to-show");
btn.addEventListener("click", function () {
if (btn.textContent === "Read More") {
btn.textContent = "Read Less";
elementToShow.style.display="flex";
}
else if (btn.textContent === "Read Less") {
btn.textContent = "Read More";
elementToShow.style.display="none";
const bodyRect = document.body.getBoundingClientRect(),
elemRect = document.querySelector(".target-container").getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
window.scroll({
top: offset,
left: 0,
behavior: 'smooth'
});
}
})
.element-to-show {
display: none;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container target-container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row element-to-show" id="collapse" >
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="modal-body clscard" >
<div th:if="${session.listSize}!=0">
<div class="card removeit mb-2 asp1 bdrtwenty" th:each="task,itrIndex : ${session.taskList}">
<div class="card-header text-center">
<span class="fntsizes"> Activity Reminder : </span><span class="fntsizes" th:text="${task.taskName}"></span>
</div>
<div class="card-body" id="datas">
<div class="row">
<div class="col-md-12">
<p class="text-center"><b>Description</b></p>
<p class="dsctask text-center" th:text ="${task.taskDescription}"> </p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 text-center">
<span class="text-center" for="data"><b>Target Date :</b></span>
<span class="text-center" th:text= "${task.taskTresholdCutOff}"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 mx-auto mt-2">
<div class="form-group">
<textarea class="form-control" id="userdata" rows="6"></textarea>
</div>
</div>
</div>
</div>
<div class="card-footer" style="padding:5px;">
<div class="row">
<div class="col-md-6"> </div>
<div class="col-md-3"> <button th:attr="onclick=|saveIt('${task.taskId}')|" class="btn btn-primary float-right clscurrent">Done</button></div>
<div class="col-md-3"><button th:id="'btnSubmit'+${itrIndex.index}" class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#userdata").keyup(function () {
var btnSubmit = $("#btnSubmit");
//var btnSubmit = $('btnSubmit').each((btn, index) => {btn.attr('id', `btnSubmit${index}`});
if ($(this).val().trim() != "") {
btnSubmit.removeAttr("disabled");
} else {
btnSubmit.attr("disabled", "disabled");
}
});
});
</script>
</body>
</html>
<div class="modal-body clscard" >
<div th:if="${session.listSize}!=0">
<div class="card removeit mb-2 asp1 bdrtwenty" th:each="task,itrIndex : ${session.taskList}">
<div class="card-header text-center">
<span class="fntsizes"> Activity Reminder : </span><span class="fntsizes" th:text="${task.taskName}"></span>
</div>
<div class="card-body" id="datas">
<div class="row">
<div class="col-md-12">
<p class="text-center"><b>Description</b></p>
<p class="dsctask text-center" th:text ="${task.taskDescription}"> </p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 text-center">
<span class="text-center" for="data"><b>Target Date :</b></span>
<span class="text-center" th:text= "${task.taskTresholdCutOff}"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 mx-auto mt-2">
<div class="form-group">
<textarea class="form-control" id="userdata" rows="6"></textarea>
</div>
</div>
</div>
</div>
<div class="card-footer" style="padding:5px;">
<div class="row">
<div class="col-md-6"> </div>
<div class="col-md-3"> <button th:attr="onclick=|saveIt('${task.taskId}')|" class="btn btn-primary float-right clscurrent">Done</button></div>
<div class="col-md-3"><button th:id="'btnSubmit'+${itrIndex.index}" class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button></div>
</div>
</div>
actually I'm facing issue with buttons id's basically i am getting dynamic id's (like btnSubmit0, btnSubmit1)for buttons here I just to to when i enter a text in textarea button should enable otherwise it should be in disabled. but in my script i have a static id like butSubmit how to resolve this issue , Is there any possible pls help me on it.
note:actually i am using bootstrap card in that card I have button and other hand this card have a loop also , I' mean every button inside the loop due to i have append a unique id to buttons.
You have to update ID in html like,
id="btnSubmit"+ i
<button id="btnSubmit"+ i class="btn btn-danger float-right clscurrent" disabled="disabled">Skip</button>
script on load/ready
var i=0;
$('.btn').each(function(){
i++;
var newID='btnSubmit'+i;
$(this).attr('id',newID);
});
i am making a website with bootstrap css html and js and i do not know how to make it so that the cards of products move sideways without having to use the scrollbar and just by clicking and dragging
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<h1 class="mt-5">Bootstrap 4 Horizontal Scrolling</h1>
<p class="subtitle">Horizontal scrolling without CSS. Just copy scrolling wrapper classes</p>
<div class="scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2">
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/200/150" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
</div>
</div>
i do not mind if it is js bootstrap or anything btw im new to coding
It is made of bootstrap 4 and some custom style to look more attractive and a JavaScript which contains a mouse events
Click and Drag Carousel with cards
const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if (!isDown) return; // stop the fn from running
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 3;
slider.scrollLeft = scrollLeft - walk;
});
.items{
overflow: hidden;
user-select: none;
cursor: pointer;
transition: all 0.2s;
transform: scale(0.98);
will-change: transform;
position: relative;
}
.items.active {
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(1);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<h1 class="mt-5">Bootstrap 4 Horizontal Scrolling</h1>
<p class="subtitle">Horizontal scrolling without CSS. Just copy scrolling wrapper classes</p>
<div class="items scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2">
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
<div class="item col-sm-5 col-md-4 col-large-3">
<div class="card card-block card-1">
<div class="card">
<img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I hope I got your point and answered correctly. If not please mention in comment
I started doing website now and I've known the bootstrap a little while ago. I'm here because I have a problem with navbar link's.
On the homepage the links work perfectly but on the following pages does not work. the same menu.
If anyone can help, I really appreciate it.
<!DOCTYPE html> <!--Index-->
<html lang="pt">
<head>
<title>Urbisouto - A tua imobiliaria</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,900|Oswald:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-xl-2">
<h1 class="mb-0 site-logo m-0 p-0">logo</h1>
</div>
<div class="col-12 col-md-10 d-none d-xl-block">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li>Inicio</li>
<li>Imoveis</li>
<li>Agentes</li>
<li>Sobre nós</li>
<!-- <li>News</li> -->
<li>Contactos</li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-xl-none ml-md-0 py-3"><span class="icon-menu h3"></span></div>
</div>
</div>
</header>
<div class="site-block-wrap">
<div class="owl-carousel with-dots">
<div class="site-blocks-cover overlay overlay-2" style="background-image: url(images/intro_1.jpg);" data-aos="fade" id="home-section">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 mt-lg-5 text-center">
<h1 class="text-shadow">123</h1>
<p class="mb-5 text-shadow">321</p>
<p> <a href="#properties-section" class="btn btn-primary px-5 py-3" class="smoothscroll arrow-down" class="nav-link" >go</a></p>
</div>
</div>
</div>
</div>
<div class="site-blocks-cover overlay overlay-2" style="background-image: url(images/intro_2.jpg);" data-aos="fade" id="home-section">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 mt-lg-5 text-center">
<h1 class="text-shadow">123</h1>
<p class="mb-5 text-shadow">321</p>
<p>go</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section" id="properties-section">
<div class="container">
<div class="row large-gutters">
<div class="col-md-6 col-lg-4 mb-5 mb-lg-5 ">
<div class="ftco-media-1">
<div class="ftco-media-1-inner">
<img src="images/vieira/homepage.jpg" alt="#" class="img-fluid">
<div class="ftco-media-details">
<h3>Vieira do Minho</h3>
<p>Braga</p>
<strong>€1.150.000,00</strong>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-5">
<h2 class="footer-heading mb-4">Sobre nós</h2>
<p>Fundada em 1998, a Urbisouto caracteriza-se por ser uma agência imobiliária, com uma grande experiência no mercado, empenhada em satisfazer a necessidade de quem nos procura.
Fazemos pesquisas de mercado para garantir o melhor preço.</p>
</div>
<div class="col-md-3 mx-auto">
<h2 class="footer-heading mb-4">Quick Links</h2>
<ul class="list-unstyled">
<li>Sobre nós</li>
<li>Serviços</li>
<li>Testemunhos de clientes</li>
<li>Contactos</li>
</ul>
</div>
</div>
</div>
<!-- <div class="col-md-4">
<div class="mb-4">
<h2 class="footer-heading mb-4">Subscribe Newsletter</h2>
<form action="#" method="post" class="footer-subscribe">
<div class="input-group mb-3">
<input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Enter Email" aria-label="Enter Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary text-black" type="button" id="button-addon2">Send</button>
</div>
</div>
</form>
</div> -->
<div class="col-md-3 mx-auto">
<h2 class="footer-heading mb-4">Segue-nos</h2>
</span>
<!-- <span class="icon-twitter"></span>
<span class="icon-linkedin"></span>
<span class="icon-instagram"></span> -->
</div>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p class="copyright"><small>© <script>document.write(new Date().getFullYear());</script> Urbisouto - Empreendimentos Copyrigth. Design by Albino Teixeira</small></p>
</div>
</div>
</div>
</div>
</footer>
</div>
<span class="icon-angle-double-up"></span>
<script tpye="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I remember than on desktop it works well, just in mobile dont work on second page
<title>TheSaaS - Responsive Bootstrap SaaS, Software & WebApp Template</title>
<script>if (top !== self) top.location.replace(self.location.href +'?utm_source=themeforest&utm_medium=preview&utm_campaign=thesaas');</script>
<!-- Styles -->
<link type="text/css" href="{{url_for('static',filename='assets/css/core.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/thesaas.min.css')}}" rel="stylesheet">
<link type="text/css" href="{{url_for('static',filename='assets/css/style.css')}}" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" href="{{url_for('static',filename='assets/img/apple-touch-icon.png')}}">
<link rel="icon" href="{{url_for('static',filename='assets/img/favicon.png')}}">
<!-- Open Graph Tags -->
<meta property="og:title" content="TheSaaS">
<meta property="og:description" content="A responsive, professional, and multipurpose SaaS, Software, Startup and WebApp landing template powered by Bootstrap 4.">
<meta property="og:image" content="http://thetheme.io/thesaas/assets/img/og-img.jpg">
<meta property="og:url" content="http://thetheme.io/thesaas/">
<meta name="twitter:card" content="summary_large_image">
<!-- Topbar -->
<nav class="topbar topbar-inverse topbar-expand-md topbar-sticky">
<div class="container">
<div class="topbar-left">
<button class="topbar-toggler">☰</button>
<a class="topbar-brand" href="index.html">
<img class="logo-default" src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo">
<img class="logo-inverse" src="{{url_for('static',filename='assets/img/logo-light.png')}}" alt="logo">
</a>
</div>
</div>
</nav>
<!-- END Topbar -->
<!-- Header -->
<header class="header fadeout header-inverse pb-0 h-fullscreen" style="background-image: linear-gradient(to bottom, #243949 0%, #517fa4 100%);">
<canvas class="constellation"></canvas>
<div class="container">
<div class="row h-full">
<div class="col-12 text-center align-self-center">
<h1 class="fs-50 fw-600 lh-15 hidden-sm-down">Built for <span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
<h1 class="fs-35 fw-600 lh-15 hidden-md-up">Built for<br><span class="text-primary" data-type="Authors, Startups, Entrepreneurs, SaaS, WebApps"></span></h1>
<br>
<p class="fs-20 hidden-sm-down"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
<p class="fs-16 hidden-md-up"><strong>TheSaaS</strong> is an elegant, modern and fully customizable SaaS and WebApp template</p>
<br>
<hr class="w-60 hidden-sm-down">
<br>
<a class="btn btn-xl btn-round btn-primary fs-20 fw-500 w-350 shadow-3 hidden-sm-down" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Purchase Now - $19</a>
<a class="btn btn-lg btn-round btn-primary w-250 shadow-3 hidden-md-up" href="https://themeforest.net/item/thesaas-responsive-bootstrap-saas-software-webapp-template/19778599?license=regular&open_purchase_for_item_id=19778599&purchasable=source&ref=thethemeio">Purchase Now - $19</a>
<br>
<p class="mt-2 mt-md-4"><small>or purchase an Extended License</small></p>
</div>
<div class="col-12 align-self-end text-center pb-70">
<a class="scroll-down-2 scroll-down-inverse" href="#" data-scrollto="section-demo"><span></span></a>
</div>
</div>
</div>
</header>
<!-- END Header -->
<!-- Main container -->
<main class="main-content">
<!--
|‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
| Sample Landing Pages
|‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
!-->
<section class="section overflow-hidden" id="section-demo">
<div class="container">
<header class="section-header">
<small>Demo</small>
<h2>Sample Landing Pages</h2>
<hr>
<p class="lead">Apart from internal pages, we have designed several single sample pages to get start with.</p>
</header>
<div class="row gap-y text-center">
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-helpato-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Helpato</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-trello-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Trello</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-gmail-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Gmail</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-skype-sm.jpg')}}" alt="demo helpato landing"></p>
<p><strong>Skype</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-github-sm.jpg')}}" alt="demo github landing"></p>
<p><strong>GitHub</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-app-sm.jpg')}}" alt="demo app landing"></p>
<p><strong>Mobile App</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="0">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-bootstrap-sm.jpg')}}" alt="demo bootstrap landing"></p>
<p><strong>Bootstrap</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="150">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-slack-sm.jpg')}}" alt="demo slack landing"></p>
<p><strong>Slack</strong></p>
</div>
<div class="col-12 col-md-6 col-lg-4 hidden-sm-down" data-aos="fade-up" data-aos-delay="300">
<p><img class="shadow-2 hover-shadow-5" src="{{url_for('static',filename='assets/img/demo-zendesk-sm.jpg')}}" alt="demo zendesk landing"></p>
<p><strong>Zendesk</strong></p>
</div>
</div>
</div>
</section>
</main>
<!-- END Main container -->
<!-- Footer -->
<footer class="site-footer">
<div class="container">
<div class="row gap-y align-items-center">
<div class="col-12 col-lg-3">
<p class="text-center text-lg-left">
<img src="{{url_for('static',filename='assets/img/logo.png')}}" alt="logo">
</p>
</div>
<div class="col-12 col-lg-6">
<ul class="nav nav-inline nav-primary nav-hero">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page-feature.html">Features</a>
</li>
<li class="nav-item hidden-sm-down">
<a class="nav-link" href="page-pricing.html">Pricing</a>
</li>
<li class="nav-item hidden-sm-down">
<a class="nav-link" href="page-contact.html">Contact</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-3">
<div class="social text-center text-lg-right">
<a class="social-facebook" href="https://www.facebook.com/thethemeio"><i class="fa fa-facebook"></i></a>
<a class="social-twitter" href="https://twitter.com/thethemeio"><i class="fa fa-twitter"></i></a>
<a class="social-instagram" href="https://www.instagram.com/thethemeio/"><i class="fa fa-instagram"></i></a>
<a class="social-dribbble" href="https://dribbble.com/thethemeio"><i class="fa fa-dribbble"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- END Footer -->
<!-- Scripts -->
<script src="{{url_for('static',filename='assets/js/core.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/thesaas.min.js')}}"></script>
<script src="{{url_for('static',filename='assets/js/script.js')}}"></script>
Hello,
This is a template which I have modified .. outside flask when I am running this, this works fine ( without url_for ). But when I am trying to use within flask, the javascript files are not working .. please help me
Make sure your directory structure is modified for the root of you flask application, otherwise you're requesting js files that aren't there
You don't have to use url_for. Instead try:
<link type="text/css" src="{static/assets/css/core.min.css}" rel="stylesheet">
screenshot
i try to fix it but still like this please help me to fix it
i'm try change gid but still get the problem
please give me any idea about this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
<p style="background-color:#fff;">Example headline.</p>
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
</div>
</body>
</html>
you need to use display:flex;flex-wrap:wrap on row so all the columns have equal height, regardless if they have a headline or not
see snippet below or jsFiddle
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap:wrap;
}
.col-sm-4 {
width:33.33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
<p style="background-color:#fff;">Example headline.</p>
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
</div>
</div>