Bootstrap Dialog CSS Causing Issues - javascript

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/

Related

Is it possible to use bootstrap 4 in a nextjs project by just adding a link stylesheet?

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>

HTML CSS/JS Path Error

I have two directory in a server: Project A and Project B. In my local development server, both projects work normally. In actual live server, everything is normal in Project A, but this happens to Project B.
My HTML:
<link href="mydir/lib/css/css1.css" rel="stylesheet" type="text/css"/>
<link href="mydir/lib/css/css2.css" rel="stylesheet" type="text/css"/>
<link href="mydir/lib/css/css3.css" rel="stylesheet" type="text/css"/>
But instead it echoed:
<link href="mydir/lib,_css,_css1.css+lib,_css,_css2.css,lib,_css,_css3.css" rel="stylesheet" type="text/css"/>
or
<link href="mydir/A.lib,,_css,,_css1.css+lib,,_css,,_css2.css+lib,,_css,,_css3.css" rel="stylesheet" type="text/css"/>
This happened not only for including CSS, but for JS too. My page CSS display seems normal, but my JS sometimes is not working (undefined functions or variables, but they are already in the included JS files). I don't know if the JS error happened because of this.
Directory name doesn't matter, I tried to change them, sometimes it works, sometimes not. Whether the files actually exist or not doesn't matter too, and again in this case, sometimes it works, sometimes not. Tried not to include or run any JS too, not working. Absolute/relative path doesn't matter too.
This is the first time this happens to me, I couldn't pinpoint why. Does anyone know why this happen and how to fix it?

How can I delete the awful debugging 'Loading'?

Good evening!
I'm writing an application on the mobile platform 'Steroids'. I don't know why, but on each screen of my app the awful debugging 'Loading'. I can't understand, where is it added, it is absent in html DOM (if to check it in google chrome). I also tried to turn off some scripts which are included by he default, but anyway, I could find the reason. Please, share your ideas. The list of scripts, which are added:
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" href="/vendor/ionic/css/ionic.css" />
<link rel="stylesheet" href="vendor/stylesheets/application.css" />
<script src="/javascripts/onerror.js"></script>
<script src="/javascripts/console.log.js"></script>
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/javascripts/application.js"></script>

Lightbox opens below the page

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" />

jQuery undefined

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" />

Categories

Resources