I got problem with modals in my portfolio website. They dont show up. Trying to search for similar issues but non of answer help me in this case. I'm using bootstrap and jquery 3.3.1 and on that config modal dont show up. However when I change jquery to older for example 2.2.4 modals working fine but in my portfolio gallery with images sorting by class using script i written animation slideUp/slideDown stop working even when they was working on jquery 3.3.1.
Here is the head:
<head >
<!-- HTML -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- SKRYPTY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/filtr.js"></script>
<script src="js/scroll.js"></script>
<!-- CZCIONKI -->
<link href="https://fonts.googleapis.com/css?family=Nova+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mina" rel="stylesheet">
Portfolio part of body:
<div class="container" id="portfolioSection">
<h1>PORTFOLIO<br>-----</h1>
<div class="kategorie">
<p class="kategoria" id="all">All</p>
<p class="kategoria" id="www">Web Design</p>
<p class="kategoria" id="logos">Logo</p>
<p class="kategoria" id="opak">Opakowania</p>
<p class="kategoria" id="druk">Materiały do druku</p>
<p class="kategoria" id="3d">3D</p>
</div>
<div class="portfolio-container">
<div class="portfolio-item-container portfolio-item druk">
<img class="img-responsive" src="img/lordis.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item www">
<img class="img-responsive" src="img/strona.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item logos">
<img class="img-responsive" src="img/sr.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item 3d ">
<img class="img-responsive" src="img/butelka.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
<div class="portfolio-item-container portfolio-item opak">
<img class="img-responsive" src="img/Opakowania.jpg">
<div class="overlay">
<div class="caption-text">
Hello there!
</div>
</div>
</div>
</div>
</div>
And script for gallery fillter:
$(document).ready(function () {
$('.kategoria').click(function () {
var kategorie = $(this).attr('id');
if (kategorie == 'all') {
$('.portfolio-item').slideUp(390);
setTimeout(function () {
$('.portfolio-item').slideDown(390);
}, 400);
} else {
$('.portfolio-item').slideUp(390);
setTimeout(function () {
$('.' + kategorie).slideDown(390);
}, 400);
}
});
Right now I was trying just to add a regular modal example from bootstrap site.
Maybe anyone had a similar issue and is able to help.
--EDIT--
And here is modal button:
<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>
But i cant past modal as it is because showing me some error in code but i dont see it. I just copy the example modal from bootstrap page -> components -> modal.
The edistor showing only that:
Modal title × ... Close Save changes
Related
I have a figure and a figcaption and I would like to have one picture and when I click on it, have more thumbnails/pictures.
My figure :
<!-- Bootstrap CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="col-6 col-lg-3">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<img src="https://picsum.photos/300/100" alt="loupe.svg">
</figcaption>
<br>
<img src="https://picsum.photos/300/101" alt="imagexs.jpg">
</figure>
</div>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Thank you.
One way you could do it would be to set the intital display of images to none and on click display them
$(document).ready(function() {
var MoreImages = document.getElementById("moreImages");
var ShowImages = document.getElementById("showImages");
MoreImages.style.display = "none";
ShowImages.addEventListener("click", function() {
document.getElementById("moreImages").style.display = "";
});
});
img {
height: 150px;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<span id="showImages"
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</figcaption>
<div class="row" id="moreImages">
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
</div>
</figure>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
I have a website where i have added AOS animation.
<div class="row-div">
<div class="inner-row-div" data-aos="fade-up" data-aos-duration="1200" data-aos-easing="ease-in-out">
<div class="teams" style="background-image: url('assets/images/sample.jpg');">
</div>
<div class="img-div">
Sample Text<br>Sample Text
</div>
</div>
<div class="inner-row-div" data-aos="fade-up" data-aos-duration="1000" data-aos-easing="ease-in-out">
<div class="teams" style="background-image:url('assets/images/sample.jpg');">
</div>
<div class="img-div">
sample<br>sample
</div>
</div>
and in the script tag :
<script>
AOS.init();
</script>
whenever i minimize the browser window it started working, but if i refresh my site it never work, i also have used latest CDN and js
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
I'm really new to Modals and Javascript for that matter and I would like to implement this Modal but it only shows for a quarter of a second then disappears without it being touched or anything.
I have read others' questions about it before and yes, I only have bootstrap.min.js loaded onto my index file. I don't have the bootstrap-modal.js.
Here's my code:
<!-- First Item -->
<div class="item col-md-4 col-sm-6 col-xs-12 mix apps">
<a href="#" data-toggle="modal" data-target="#portfolio-item1">
<img src="http://unsplash.it/680/380?random=4" alt="item" class="img-responsive">
<div class="overlay">
<div class="content">
<h3>Project Name</h3>
<p>Description? Category maybe?</p>
</div>
</div>
</a>
</div>
<!-- Modal-->
<div id="portfolio-item1" tabindex="-1" role="dialog" class="modal fade">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div data-dismiss="modal" aria-label="Close" class="close-btn"><i class="icon-close"></i></div>
<div class="container-fluid">
<div class="row">
<div class="mockup col-md-8">
<div class="device-mockup macbook_2015 portrait gold">
<div class="device">
<div class="screen"><img src="http://unsplash.it/680/380?random=4" alt="..." class="img-responsive"></div>
</div>
</div>
</div>
<div class="text col-md-4">
<h2>Item Name</h2>
<p class="lead">Desription.</p>View on Behance
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Modal-->
Any suggestions is greatly appreciated!
EDIT: Here's a jsfiddle for it.
EDIT: Here's how my external resources are structured:
HEAD:
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/lightbox.min.css">
<link href="css/theme.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
</head>
FOOTER:
</footer>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/plugin.js"></script>
<script src="js/theme.js"></script>
It seems like the problem has to do with your inclusion of external resources. In your application, it's important that you include:
jQuery
Bootstrap JS
Bootstrap CSS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
...
<script src="https://cdnjs.cloudflare.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>
You can use CDNs or simply add the files to your project and reference them there, but here's an updated jsfiddle in which the only thing that I changed was including the external resources.
Note: jQuery should be included before Bootstrap's JS.
I figured out what was wrong. Bootstrap JS was being called twice. I had it in the plugin.js and I also had the bootstrap.min.js
Thank you all for your help!
First post. I've been web designing as a minor part of my role for quite some time and rely on using CSS templates extra. Just to give you an idea of where I am. I've recently utilised a template that contains a "mini menu" (a dropdown navigiation menu that only shows when the width of the page is narrow). For some reason the navigation is not working. If I select a page in the list, it does not navigate to the page. This is probably a real newbie question, but I've tried playing with the code, and I can't for the life of me get it too work.
Below is the HTML I have. Any suggestions would be very much appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.mi
</body>
</html>
The JS folder contains,
bootstrap.js
html5shiv.js
jquery-1.9.1.js
modernizr-2.6.2-respond-1.1.0.min.js
respond.min.js
I get the following errors when using Inspect in Google Chrome;
Failed to load resource: the server responded with a status of 404
(Not Found)
index.html:28 Uncaught ReferenceError: $ is not defined
at index.html:28 /favicon.ico
Failed to load resource: the server responded with a status of 404 (Not Found)
Not sure since your code is not complete here, but I think you are using document.ready, before jQuery is loaded. Your
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
must be at the end of the document, after you imported all your libraries. And jQuery has to be the very first one of the list (even before jquery.mobilemenu), since the others will use it.
You can open the console to check if there is an error like $ is unknown, that means either your code or the libraries are loaded before jQuery.
Here an updated version of your code with the librairies in the right order.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Capita - BIM Level 2 Training</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
</head>
<body>
<div class="header-wrapper">
<div class="site-name">
<p><img src="img/CapitaBanner.jpg" alt="" class="img-responsive">
<h1>BIM Level 2 Training</h1>
<h2>This training is for internal use only</h2>
</div>
</div>
<div class="menu">
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fw-icon-th-list"></i>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Modules</li>
<li>BIM4Capita</li>
<li>Contact</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">About</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">Services</option>
<option value="#">Work</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container">
<div class="featured-block">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img1.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>What is BIM?</h1>
<p>In this module we will explore what BIM is, what BIM level 2 is and what it is not.<br><br></p>
<a class="btn" href="whatisbim.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img2.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Benefits of BIM</h1>
<p>In this module we will explore the benefits of BIM when it is deployed fully on a project for both Capita and our client.</p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img3.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Technology</h1>
<p>In this module we explore some of the technologies available to achieve the BIM Benefits.<br><br></p>
<a class="btn" href="BIMTech.html">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img4.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>BIM Workflow</h1>
<p>In this modules we explore the changes to project workflow that arise from implementing BIM.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="block">
<div class="thumbnail">
<img src="img/img9.jpg" alt="" class="img-responsive">
<div class="caption">
<h1>Capita Examples</h1>
<p>In this module we review examples of projects within Capita that have already used the BIM process.<br><br></p>
<a class="btn" href="#">more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<script>
$(document).ready(function(){
$('.menu').mobileMenu();
});
</script>
</body>
</html>
I'm new.when I'm using bootstrap slide show and owl-carousel then bootstrap slide show take owl-carousel CSS how to use that.
carousel item.
<div class="carousel">
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
<div class="item1">
<img src="images/item.png" >
</div>
</div>
bootstrap slide show
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/baner.png" alt="Chania">
</div>
<div class="item">
<img src="images/baner.png" alt="Chania" >
</div>
<div class="item">
<img src="images/baner.png" alt="Flower" >
</div>
<div class="item">
<img src="images/baner.png" alt="Flower" >
</div>
</div>
</div>
Well, maybe it depends in what order you are calling your steelsheets. Whithout any code it will be hard to help you.
In my projects I proceed this way
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="web/lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="web/lib/owlcarousel/css/owl.theme.css">
</head>
<body>
<div>
<!-- your bootstrap slider -->
</div>
<div>
<!-- your owl slider -->
</div>
<script type="text/javascript" src="web/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="web/lib/owlcarousel/js/owl.carousel.js"></script>
<!-- init owl -->
<script type="text/javascript">
$('.myOwlCarousel').owlCarousel({
// some configs
});
</script>
</body>
</html>