I am having some weird problem with using popover in my django app. When using the css and js of a latest version of bootstrap it simply does not work. When I use link to 3.4.1 version I found in some tutorial everything works just fine. I'm attaching code that doesn't work and the one that does.
Did popover function got removed in latest bootstrap?
Works (3.5.1):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Toggle popover
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Does not work (4.5.x):
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
Toggle popover
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
You are missing popper.js.
Note that the bootstrap bundle js include the popper.js library. Try to load this one from CDN instead of bootstrap.js.
Require order :
Jquery
Popper
Bootstrap
Related
I have index.html file in template file and I have js, css, image, files in my static file. I am writing the codes correctly, but the site does not appear properly. Animations, images and text are not in the correct place. (In fact, the logo of the project I used to work with appears in this project. Both are called "logo.png", I think pycharm is confusing the codes. But I opened my project with Visual Studio Code, and the logo of my old project appeared again. Why is this happening? Do I need to delete something?)
settings.py
STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
index.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<!-- Basic -->
<head>
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<!-- Site CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!-- Responsive CSS -->
<link rel="stylesheet" href="{% static 'css/responsive.css' %}">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ALL JS FILES -->
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<!-- ALL PLUGINS -->
<script src="{% static 'js/jquery.superslides.min.js' %}"></script>
<script src="{% static 'js/bootstrap-select.js' %}"></script>
<script src="{% static 'js/inewstickerjs' %}"></script>
<script src="{% static 'js/bootsnav.js.' %}"></script>
<script src="{% static 'js/images-loded.min.js' %}"></script>
<script src="{% static 'js/isotope.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/baguetteBox.min.js' %}"></script>
<script src="{% static 'js/form-validator.min.js' %}"></script>
<script src="{% static 'js/contact-form-script.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
</body>
</html>
I shared important parts of HTML codes
This is what the site looks like
But it should look like this
I hope I was able to explain what my problem was. I will be glad if you help me
The problem seems to be that you might not be reseting the cache. Browsers store caches to make the website run faster, so even though you made changes to the static files(like CSS, js or images), your browser uses the old CSS which is cached. One way to fix this issue during development is to hard refresh, ctrl + shift + r to clear CSS related caches and crtl + F5 for js related files, alternatively you can disable cache in your browser. In development we use versioning to counter this issue. I hope this resolves your issue.
can any one guide me how to create page loader bar for opencart by using a nprogress?
Expecting an answer in detail.
Thank you
first load the js and css file in header.tpl
<script type="text/javascript" src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
Then add this code in footer.tpl
<script type="text/javascript">
NProgress.start();
setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
</script>
I thought it would be easier to download bootstrap and adjust it to my code, instead of messing about a cdn. So I downloaded bootstrap and my directory looks like this.
My static directory is properly (I think) setup since my style.css and maps.js are working fine.
In my base.html I reference the files with:
The old way <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel='stylesheet' type='text/css' href="{% static 'style.css' %}" />
<script src="{% static 'maps.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7' %}"></script>
The static boostrap-3.3.7 is not working. The cdn worked however. My question is how would my static import look to have this setup with the bootstrap directory properly work?
I'm sorry if it's a stupid question.
You are trying to include a complete directory into your HTML, which is impossible. You should adjust the path in {% static 'bootstrap-3.3.7' %} to the location of the actual file you need.
<script src="{% static 'bootstrap-3.3.7/dist/js/boostrap.min.js' %}"></script>
Note, don't forget to add the css file too, you need to include them both individually. Which will probably be:
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7/dist/css/boostrap.min.css' %}"/>
Is it possible to mix and match components for Zurb Foundation 6 for Sites/Apps? For example, can I use the the Card component of Zurb Foundation 6 for Apps in a Foundation 6 for Sites installation?
If so, how is this possible?
Its is very much possible and I've been using them in my works. Simply make sure to include appropriate css and js files.
For example :
<!--Scripts-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation-apps.min.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script type="text/javascript" src="js/iconic.min.js"></script>
<script type="text/javascript" src="js/motion-ui.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<!--Styles-->
<link rel="stylesheet" href="css/foundation-apps.min.css"/>
<link rel="stylesheet" href="css/foundation.min.css"/>
<link rel="stylesheet" href="css/motion-ui.min.css"/>
<link rel="stylesheet" href="css/app.css"/>
You this for local development and if you want, you can compress all files into one minified (.min) file for production.
I am using ember js. How do I load a css style sheet from a handlebars js template
For example this doesn't work
<script type="text/x-handlebars" id="about">
<link rel="stylesheet" href="/static/css/about.css"}}
// HTML CONTENT
.......
</script>
It looks like it works to me.
<script type="text/x-handlebars" data-template-name="color">
<h3>Color</h3>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
The color of the day is: {{color}}
</script>
http://emberjs.jsbin.com/OxIDiVU/162/edit