Hello everyone, I recently started using Boostrap Studio along with my own JQuery usage, outside of the animations and such that are pre-included within the studio. I am trying to initiate a JQuery function at the top of my page but it is failing because it seems that although I have Bootstrap Studio set to run with the latest version of JQuery, the studio is automatically including this resource at the bottom of the HTML document, rather than the top.
Is this intended behavior of the studio? Or is this a bug? How can I ensure that the bootstrap, jquery, and bootstrap studio perquisites are all included at the top of the document, rather than the bottom? This is making my JQuery unusable.
Here is what the bottom of my document looks like right now. This is generated automatically by bootstrap studio:
<script id="bs-live-reload" data-sseport="53013" data-lastchange="1487896127285" src="/js/livereload.js"></script>
I would like Bootstrap Studio to instead, include these prerequisites before
Thanks in advance :)
Sorry, I just realized it is best practice to include these things where Bootstrap Studio does. I also realized that it automatically includes the scripts loaded into the studio. This isn't even an issue, my apologies!
JS is loaded at the bottom of pages to improve page load speed and is a default feature of this app.
Okay, we understood it. JS at the bottom. But what about custom code? If I want to write some JS inside it? I cannot use JQuery and my own functions declared in my script.js.
It would be good to have a second 'Custom code JS', which would be automatically the last inserted script together with the other scripts after export, regardless if I placed it to the top. Then I could insert some JS codes where I want (if I want to place it to a logically better place for me) and I could use JQ and other scripts too.
It's not technically a bug, but a feature oversight. I have no idea why you would want to load scripts at the bottom of the page always. You have to make two requests to load jQuery now instead of one. I don't see how that helps with load time.
You may include your custom scripts by adding a code snippet like
- HEAD CONTENT - Section of BS-Project
- in an "Custom Code" Component (Edit HTML) right after the <body> Tag - with removed <div> Tags (you may also set it to display:none or "visibility:hidden" - which does not make visible effekt if <div> is remvoved and only <script> is included.
This is sometimes necessary to declare global variables or to trigger events right from the start of loading the webpage like browser-propertie or os-properties dependend actions
as eventhandler for fully loaded page - which is best placed in the beginning and calling an global "onSiteLoaded()" Function AFTER complete Loading, which is then initialiszing elements and else in the correct way by calling other Functions or setting Styles and Attributes.
You may even load additional css or js files into hidden elements or the Shadow-DOM.
Jquery is added automatically with the export, there is no need to ad another unless you have a specific situation (element that needs a different version than the one BSS includes) which then needs some work arounds. Jquery shows up at the bottom and has no need to be added to the top at all, hence why you’re thinking it’s going to load it 2 times, of course it is if you add it to the top too. It’s default scripts that are automatic with export and automatically added to the bottom as expected.
Hope that helps!
How would you remove it altogether if you don't use any jquery scripts?
The current version of Bootstrap 4.5 requires jquery for certain plugins to work in Bootstrap 4.5.
Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper.js)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Tooltips and popovers for displaying and positioning (also requires Popper.js)
Scrollspy for scroll behavior and navigation updates
If you remove it, you will not be able to use these components.
If you were only using the Bootstrap 4.5 css and none of the plugins then you would have to use an export script with a html parser to rebuild the pages easily such as beautiful soup.