I have problems with Lightbox, what exactly I don't know. I am using Ruby on Rails 3.2.1
What I have done:
Added codes in head section:
<script src="/Livu_pamatskola/app/assets/javascripts/lightbox/js/jquery-1.7.2.min.js"></script>
<script src="/Livu_pamatskola/app/assets/javascripts/lightbox/js/lightbox.js"></script>
<link href="/Livu_pamatskola/app/assets/javascripts/lightbox/css/lightbox.css" rel="stylesheet" />
And added this code in view:
image #1
But Lightbox don't works at all.
Related
I have deployed my .NET Core web app to aws using ubuntu server 18. I am able to hit my dns in browser and the browser loads the html, data and code, but does not load and css files, js or any scripts I have add to layout.cshtml. I have tried rebuilding, changing paths and researching it. People have similar issues online, but their fixes are not related to mine.
I run
dotnet publish --output ".\published" --configuration release
Inside of this folder I have runtimes folder and wwroot. Inside wwwroot I have css folder, js folder, and lib folder with all the files in each folder that I need.
In layout.cshtml I have my links and script paths like this
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/published/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/published/wwwroot/css/site.css" />
<link rel="stylesheet" href="~/published/wwwroot/css/linkView.css" />
</head>
<footer class="border-top footer text-muted">
</footer>
<script src="~/published/wwwroot/lib/jquery/dist/jquery.min.js"></script>
<script src="~/published/wwwroot/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/published/wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="~/published/wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/published/wwwroot/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
I did recently add published/wwwroot/ to each path just trying to see if that would fix it but it did nothing.
And in the browser I get these errors:
Basically all 404 errors, it cannot find my files and I do not understand why. Anyone have this issue or see the problem? Thanks!
Your paths are wrong. Please try to remove /published/wwwroot
E.g.: <link rel="stylesheet" href="~/published/wwwroot/css/site.css" />
should be <link rel="stylesheet" href="~/css/site.css" />
I just downloaded the auth0 quickstart vanilla JS single page application. The menu that you get when you resize the app, does not work.
instead, you get a error that says the collapse.js has a object error.
Okay, this should save some time to other folks who are using auth0.
The problem is here, in the second line.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
For some reason, jquery-3.5.0 has some problems with the dropdown menu working. The following worked for me.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.slim.js"
integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I am using 3.4.1 jQuery (second line again, above). That got the menu working.
I am trying to workout a HelloWorld example of Bootstrap3 and X-editable. I am attaching my page source code in this post. I am facing two issues.
I am getting the following error when i use mode as 'popup' as soon as i click on the editable link.
TypeError: this.getCalculatedOffset is not a function
If i switch from popup to inline at-least the page appears however, the buttons dont appear correctly.
Any feedback would be appreciated. Page Source is below:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>X-Editable Bootstrap Hello World!</title>
<link rel="stylesheet" href="twitter-bootstrap/css/bootstrap.css" type="text/css"/>
<link href="bootstrap-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello World Bootstrap</h1>
<div class="hero-unit">
<p>Hey.. this is my very first XEdit-able Bootstrap site.</p>
<!-- superuser -->
superuser
</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="twitter-bootstrap/js/bootstrap.js"></script>
<script src="bootstrap-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script type="text/javascript">
$.fn.editable.defaults.mode = 'inline';
$(document).ready( function(){
//$('#username').editable();
$('#username').editable( {
type: 'text',
pk: 1,
url: '/post',
title: 'Enter username'
});
} );
</script>
</body>
</html>
Your bootstrap css and js files must be from 2.xx version of bootstrap, that's a problem.
Use x-editable for bootstrap 2 or update your bootstrap to version 3+.
I had the same issue after upgrading from Bootstrap 2 to Bootstrap 3.
I had upgraded Bootstrap's CSS, X-Editable's CSS and JS, but had forgotten to upgrade Bootstrap's JS which was still for v2.
Don't forget to update all files:
Bootstrap 3 .css and .js
X-Editable for Bootstrap 3 .css and .js
Probably a bit late, but hopefully that can still help someone.
I have recently got stuck in the following situation.
I have a script which works perfectly in FF and GC,but not in IE10.
The IE is not loading the jQuery src files,so therefore it triggers the error '$' is undefined.The loading part looks like this:
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/jquery.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<link rel="stylesheet" type="text/css" hrf="/RequestCenter/modules/resources/dist/jquery.jqplot.css" />
<script type="text/javascript" src="/RequestCenter/modules/resources/dist/plugins/jqplot.highlighter.min.js"></script>
my function is simple:
$(document).ready(function() { .... });
so,the IE10 doesn't load the jQuery and triggers the error on this line.
Any ideas how to find a work around would be really appreciated.
Thanks
It might be a browser mode or document mode compatibility issue, press F12 in IE and change your document mode to highest standard
I am using Blue print CSS and it works fine in Firefox...but when I look at it in IE, even with the for IE lt IE8, it still doesn't seem to be working right in terms of spacing and alignment.
Any suggestions on what I can do to make it look proper?
Make sure that you use a doctype. If you do not it will render in quirks mode. I had the same problem and correcting the doctype worked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
That should go at the top of the document
Are you including the ie.css file? Below the regular blueprint css files, include the ie.css file, using the notation that only IE will parse:
<link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
Make sure that all the URLs to the CSS files are correct and are working on your site also.
I know this is a bit late, but hopefully it'll help someone who googles it.
A big gotcha when using blueprint here is to ensure that your container div has a class of container, not id:
<div class="container"> ... </div>
Not
<div id="container"> ... </div>
It's caught me out a few times before.