I'm trying to use lightbox2 (http://lokeshdhakar.com/projects/lightbox2/) on my wordpress theme because all plugins I tried don't work. The links on my testbloge (http://test.raoulwittenberns.com/blog/) are opening the lightbox but it's opening below the page content and causes the user to scroll down.
Anyone know why this is happening and how I can fix it? I'm not using any other plugins and I've tried excluding all other scripts to no succes.
Thanks a bunch!
Raoul
Your link to the lightbox.css is incorrect --> ellaelisabethlightbox.css.
I imagine it is -->ellaelisabeth/lightbox.css ?
<link rel="stylesheet" src="http://test.raoulwittenberns.com/wp-content/themes/ellaelisabethlightbox.css" media="all" />
Should be :
<link rel="stylesheet" src="http://test.raoulwittenberns.com/wp-content/themes/ellaelisabeth/lightbox.css" media="all" />
Related
I have this project where I imported bootstrap like this on my header:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
Everything was working fine until I decided to add a carousel.
The carousel shows up properly, but it doesn't rotate and the buttons on the side doesn't work.
I also noticed that my colapsed menu also don't work.
On my research I saw a lot of people suggesting to use reactstrap and some other third party libraries, but I'm wondering if it's possible keep using the link stylesheet.
From what I read the problem is with the jquery and bootstrap being imported in the wrong order, which might cause those elements to break.
Solved the issue using another website as reference:
https://www.bootstrapcdn.com/
Instead of using
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
I used
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
And it is finally working.
but it doesn't rotate and the buttons on the side doesn't work. I also noticed that my colapsed menu also don't work.
there is no functionality on your pages if dont import the js scripts.
add these scripts also and your buttons and collapse menu should start working
**for css link**
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
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">
So I have a landing page up at http://mytestosteronekit.com. Im using Leadpages to create the page. I have an index.html file that pulls in the leadpage with script in the head. I am also including bootstrap CSS, a custom stylesheet for style overrides, bootstrap JS, and a custom JS file. The css links are loading just fine and work on the page. Mainly have this for the navbar. But the js files are not firing and I can't figure out why.
I have them included right before the closing body tag. They show while inspecting, but they don't load in the sources. I was using relative url paths originally but switched to an absolute path just for security. Still no go.
I need this navbar to be working on mobile, please help me!
Bootstrap requires jQuery to be loaded before firing. All I needed to do to fix this problem was call to jQuery before calling the other scripts. Problem solved. No interference with Leadpages scripts.
Try put <script> tags lines before the closing tag </body>. I did it for you below:
<html>
<head>
<meta charset="UTF-8">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="leadpages-meta-id" content="144ccecf3f72a2:1696aa1f6b46dc" /><meta name="leadpages-serving-domain" content="https://crawfordobrien.leadpages.co" /><meta name="leadpages-served-by" content="html" />
</head>
<body>
<script src="http://mytestosteronekit.com/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://mytestosteronekit.com/js/custom.js" type="text/javascript"></script>
<!-- Leadpage -->
<script type="text/javascript" src="https://my.leadpages.net/template/load-144cc5ec6639c5-1696a36f6639c5-dnoeNG8gtnHtHMXGoqpWmbNBhgtazHED.js"></script>
</body>
</html>
I m having a problem with Bootstrap Dialog library designed to assist in modal windows.
I would like to use the library in WHMCS but it seems as though the files I need to include break the template.
As indicated by the examples I included:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
But as soon as I do this the template breaks. It throws litterally everything out of place, including the menus and images in WHMCS. But the popup I excecute does show.
If I remove the <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> the template does go back to normal, but then the command that I call to show the dialog does nothing. I cannot see a response in the console, nor do I see anything happen in the browser anymore.
What could be the cause & a possible solution to this issue?
Is there a way to use this library and/or another similar library?
I would love any and all advice in this matter.
Bootstrap Dialog: https://nakupanda.github.io/bootstrap3-dialog/
Getting a weird error on a site I am developing. Even looked back at last couple of sites to make sure there was no differences... and nope, can not see any.
Getting an jQuery undefined error only in IE on the following page http://weesleekit.info/lotus/beta/ it's with regard to the easy slider part on the site, but have used easy slider multiple times before and never ever had an issue.
Can anyone shed some light into this, I am racking my brains and seem to be finding nothing.
Your problem is here:
<link rel="Stylesheet" type="text/css" media="screen" href="css/screen.css" /
><script type="text/javascript" src="js/easySlider1.7.js"></script>
There are several lines in between your / and > that shouldn't be there, and IE isn't including the <script> block that follows it.
I have no idea if this is related, but in the source of that site, before jquery.js is included there is an unclosed:
<link REL="SHORTCUT ICON" HREF="favicon.ico">
(make it: ```)
maybe IE is bugging out and not including jQuery since it is technically inside the <link> element. See if fixing that does anything (i kinda doubt it)
and a comment by #burningstar4 says that there is a link which is missing a closing tag as well:
<link rel="Stylesheet" type="text/css" media="screen" href="css/screen.css" /
should be
<link rel="Stylesheet" type="text/css" media="screen" href="css/screen.css" />