So I'm using Swiper.js in order to swipe orizontally some content in my portfolio.
If i open the page locally, everything works fine (I'm able to swipe, buttons are displayed,..) but if I open it on Netlify (free hosting service) I'm having an issue: buttons are displayed but I cannot swipe.
Refreshing the page, fix the problem.
In the head section i have links to CDN
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
and the scripts are located right before the end of the body
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
In the console.log i have this error: "filed to load resource: the server responded with a status of 404".
Refreshing, again, fix the problem.
Do you guys know how to fix this problem?
That is because the library loads before the page and so it cannot locate elements in the DOM, since they don't exist yet.
Add a defer attribute to the script tag or place it at the end of the page.
<script defer src="..."></script>
Related
In the page's head tag I use 3 external files (CSS, Font, jQuery Library):
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <!-- Poppins font -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
As I use all the 3 - Page loads very slow. If I omit one of them (no matter which one) - page loads immediately. Why is that?
This is because the scripts are being loaded synchronously one after the other.
How to make them load faster?
If there is no dependency between the scripts and links load them asynchronously:
Asynchronously loading JS scripts
For that you can use async attribute.
From the docs:
When present, it specifies that the script will be executed
asynchronously as soon as it is available.
Example:
<script src="demo_async.js" async></script>
Like #IvanS95 mentioned below - you can also use defer.
Asynchronously loading CSS links
You can use preload.
Fro the docs:
Resources loaded via are stored locally in the
browser, and are effectively inert until they’re referenced in the
DOM, JavaScript, or CSS. For example, here’s one potential use case in
which a script file is preloaded, but not executed immediately, as it
would have been if it were included via a tag in the DOM.
An example:
<link href="style.css" rel="preload" as="style">
Try loading the js file at the end.
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> <!-- Poppins font -->
</head>
<body>
...
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
My recommendation would be to run your site against - https://www.webpagetest.org/ excellent resource.
Also, I would cache the data for 365 days that way they do not have to call your external scripts again.
To learn about caching check out this site - https://www.codebyamir.com/blog/a-web-developers-guide-to-browser-caching
And you can always use your F12 Browser tools to see the waterfall effect of loading all the elements of your Web page.
I have a WowSlider that is not working when running the main page of my Wordpress website with https. The images in the slider appear stacked statically one after another. When running the Wordpress website with http, the slider works fine (provides the transition effect expected).
I am trying to figure out how to modify my website such as to launch a javascript with https, not http. I want to launch the javascript as
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script> (*)
but not as
<script type="text/javascript" src="http://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script> (**)
But since I have not been able to manually edit the source code behind the main page, I have not been able to get (*) to work.
Hence the question: How to modify the Wordpress site (php scripts?) such as to implement (*)?
I have come to understand that the problem has to do with contention between http and https.
My problem resembles the one from
jQuery slider not working in https URL
I believe the same solution will apply. I should launch the javascript using
<script type='text/javascript' src='//wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
or
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
The hypothesis above is supported by an observation from
https://www.allbookcovers.com (***)
Here a corresponding WowSlider operates fine with https.
When analyzing the code behind (***), I noticed the following:
<!-- Start wowslider.com Head section -->
<link rel="stylesheet" type="text/css" href="js/engine1/style.css" />
<script type="text/javascript" src="js/engine1/jquery.js"></script>
<!-- End WOWSlider.com section -->
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-magento-fix.js"></script>
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>
In my website, the javascript is launched with http, not https:
<script type="text/javascript" src="http://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
I tried to comb through my Wordpress website to figure out where jquery.js was being launched. I found the following in
\\wp-includes\script-loader.php(963):
scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4' ); (****)
It was not clear to me how to modify this such as to result in
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
getting added to the main page, since (****) made no direct reference to http.
Any suggestions?
I withdraw the question. I appear to have stumbled on a solution. As I was getting ready to hand-edit the PHP files comprising my website, or even go into the PHP database and manually edit the content, I stumbled on a plugin called "Really Simple SSL". I installed the plugin. And vuha! My problems went away.
Currently, have a web app for appointments. I had a question answered around last week at the following link: jQuery and Bootstrap dialog not coming up
I got this working. However, I just noticed that this messes up my NavBar that is stored in my layout file. On any other page, the NavBar works, but on the Calendar page it doesn't respond. The only thing I can think of is the scripts are clashing.
I tried taking them out of my calendar page but this causes my calendar to not pop up with a dialog. I must be doing something wrong here but I honestly don't know.
Here is my layout file's scripts.
#Styles.Render("~/Content/Site.css")
#Styles.Render("~/Content/jquery.datetimepicker.css")
#Styles.Render("~/Content/fullcalendar.css")
#Scripts.Render("~/bundles/modernizr")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
My Calendar File Scripts:
#section Scripts{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
}
If more code is needed, I can supply it.
EDIT Image of my console after I load Calendar:
EDIT 2 Image of my console after I load Calendar after removing one instance of Jquery:
Turns out I had an error on my Layout Page that was causing hassle.
The scripts section weren't being rendered as I had RenderSection("Scripts", false)
Removed the scripts section and that and the error went away!
I hope you all are doing great, I ran into this wild issue, I'm making my front end in react, and I have several pages in my app, css for all the pages is defined in only one file and I'm loading it from the main HTML document(not react components). CSS for all the pages is loaded but not for one particular page, the link of that page is sent via email through sendgrid, when I browse the page I get 404 for stylesheet and bootstrap files.
This is how I'm loading style sheet from HTML document which hosts the root component of reacting.
<html>
<head>
<link rel="stylesheet" href="app/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="app/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="app/assets/css/style.css">
</head>
<body>
<div id="app-root"></div>
<script src="/app/bundle.js"></script>
</body>
</html>
following are the screenshots of the network statistics for the pages which are loaded with css.
page failed to load with CSS with the same link to CSS files as the that of the prior one.
what seems to be the problem here, thank you, everybody, for taking out time and reading out this.
Try doing this
<link rel="stylesheet" href="/app/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="/app/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/app/assets/css/style.css">
I am trying to integrate the colorbox lightbox plugin as instructed on there website
I have successfully integrated on one of my pages but i cannot get it to load correctly for the other 3 (in same directory). Onlick it goes to a new page with the full size image on a white background!
An example of this working on my site is here....
http://www.transformyourshape.co.uk/cost-of-Herbalife.php
I have put the exact same scripts, in the exact same places as in this working one on my other page here...
http://www.transformyourshape.co.uk/Herbalife-Weight-Loss.php
But it just won't load the plugin and i have no idea why.
Can anyone see where or why this has gone wrong?
I would appreciate any help, no matter how minor so i can get this resolved
Thanking you all in advance!
You have included two versions of jquery, which causes $.colorbox to become undefined after second inclusion:
<head>
..
<script type="text/javascript" src="Scripts/js/contactForm/jquery-1.8.3.min.js">
</script>
..
..
<!--Colourbox Scripts & CSS -->
<script src="Scripts/js/colourbox/jquery.colorbox.js"></script>
<link href="css/colourbox/colorbox.css" rel="stylesheet" type="text/css">
..
..
<script type="text/javascript" src="cw4/js/jquery-1.7.1.min.js"></script>
..
</head>