Making site with bootstrap carousel that works with jQuery v.2.1.4 and prettyPhoto gallery that works with jQuery v.1.7.1. Cant find solution to my problem, noConflict is not working for me - here is the code and how I tried to launch js files:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv= "X-UA-Compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="/js/jquery.easing.js"></script>
<script src="/js/galleryScript.js"></script>
<script src="/js/jquery.prettyPhoto.js"></script>
<script src="/js/jquery-1.7.1.min.js"></script>
<script src="/js/jquery-2.1.4.js"></script>
</head>
<body>
<% include partials/template/header.ejs %>
<div class="mainMargin">
<% include partials/template/nav.ejs %>
<% include partials/template/slider.ejs %>
<% include partials/content/main.ejs %>
</div>
<% include partials/template/footer.ejs %>
</body>
</html>
Here is code of js that activeate plugin:
var jq162 = jQuery.noConflict(true);
jQuery(document).ready(function($)
{
function lightboxPhoto()
{
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'fast',
slideshow: 1000,
theme: 'facebook',
show_title: false,
overlay_gallery: false
});
}
if(jQuery().prettyPhoto)
{
lightboxPhoto();
}
});
Have found a solution, just changed places of js files loading, now how it looks like:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/galleryScript.js"></script>
<script src="/js/jquery.easing.js"></script>
<script src="/js/jquery.prettyPhoto.js"></script>
<script src="/js/scroll.js"></script>
Related
I have this weird bug. If I add box2dweb to my list of javascripts. My bootstrap tooltip will no longer accept HTML. I have this code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<button class="btn-sm btn-primary col" id="btn-test" data-toggle="tooltip" data-placement="bottom" data-html="true" title="<font size='30'>Tooltip</font> <u>with</u> <b>HTML</b>">Test</button>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/external/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/external/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/external/box2d.min.js"></script>
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
It doesn't render the HTML in the tooltip as HTML. But if I remove the script line which is embeding box2dweb it will work.
Is there a way to fix this?
Box2DWeb: Github
Make sure that you include
<script type="text/javascript" src="js/external/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/external/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/external/box2d.min.js"></script>
in <head> tag
and
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
outside <body> tag.
Am using a html website template to build an angular project, but am having issues with a custom js script. menu button(to toggle navigation) and some other stuffs in custom.js is not working
i tried linking the scripts files link in index.html, and referenced it in angular.json config file
here is github link to the file https://github.com/donprecious/crtx
here is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CREXT | DRD</title>
<!--
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<link href="../build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<app-root></app-root>
</div>
<!-- jQuery -->
<!-- <script src="assets/vendors/"></script> -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="assets/vendors/fastclick/lib/fastclick.js"></script>
<script src="assets/vendors/nprogress/nprogress.js"></script>
<script src="assets/vendors/Chart.js/dist/Chart.min.js"></script>
<script src="assets/vendors/echarts/dist/echarts.min.js"></script>
<script src="assets/vendors/gauge.js/dist/gauge.min.js"></script>
<script src="assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<script src="assets/vendors/iCheck/icheck.min.js"></script>
<script src="assets/vendors/skycons/skycons.js"></script>
<script src="assets/vendors/Flot/jquery.flot.js"></script>
<script src="assets/vendors/Flot/jquery.flot.pie.js"></script>
<script src="assets/vendors/Flot/jquery.flot.time.js"></script>
<script src="assets/vendors/Flot/jquery.flot.stack.js"></script>
<script src="assets/vendors/Flot/jquery.flot.resize.js"></script>
<script src="assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="assets/vendors/flot.curvedlines/curvedLines.js"></script>
<script src="assets/vendors/DateJS/build/date.js"></script>
<script src="assets/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<script src="assets/vendors/moment/min/moment.min.js"></script>
<script src="assets/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/site.js"></script>
</body>
</html>
Angular.json
"scripts": [
"src/assets/vendors/jquery/dist/jquery.min.js",
"src/assets/vendors/bootstrap/dist/js/bootstrap.min.js",
"src/assets/vendors/fastclick/lib/fastclick.js",
"src/assets/vendors/nprogress/nprogress.js",
"src/assets/vendors/Chart.js/dist/Chart.min.js",
"src/assets/vendors/echarts/dist/echarts.min.js",
"src/assets/vendors/gauge.js/dist/gauge.min.js",
"src/assets/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js",
"src/assets/vendors/iCheck/icheck.min.js",
"src/assets/vendors/skycons/skycons.js",
"src/assets/vendors/Flot/jquery.flot.js",
"src/assets/vendors/Flot/jquery.flot.pie.js",
"src/assets/vendors/Flot/jquery.flot.time.js",
"src/assets/vendors/Flot/jquery.flot.stack.js",
"src/assets/vendors/Flot/jquery.flot.resize.js",
"src/assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js",
"src/assets/vendors/flot-spline/js/jquery.flot.spline.min.js",
"src/assets/vendors/flot.curvedlines/curvedLines.js",
"src/assets/vendors/DateJS/build/date.js",
"src/assets/vendors/jqvmap/dist/jquery.vmap.js",
"src/assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js",
"src/assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js",
"src/assets/vendors/moment/min/moment.min.js",
"src/assets/vendors/bootstrap-daterangepicker/daterangepicker.js",
"src/assets/js/custom.js",
"src/assets/js/site.js"
]
},
custom.js file
var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
$BODY = $('body'),
$MENU_TOGGLE = $('#menu_toggle'),
$SIDEBAR_MENU = $('#sidebar-menu'),
$SIDEBAR_FOOTER = $('.sidebar-footer'),
$LEFT_COL = $('.left_col'),
$RIGHT_COL = $('.right_col'),
$NAV_MENU = $('.nav_menu'),
$FOOTER = $('footer');
this code does not work when i integate the website template, but works when i just click run the template browser
$MENU_TOGGLE.on('click', function() {
console.log('clicked - menu toggle');
if ($BODY.hasClass('nav-md')) {
$SIDEBAR_MENU.find('li.active ul').hide();
$SIDEBAR_MENU.find('li.active').addClass('active-sm').removeClass('active');
} else {
$SIDEBAR_MENU.find('li.active-sm ul').show();
$SIDEBAR_MENU.find('li.active-sm').addClass('active').removeClass('active-sm');
}
$BODY.toggleClass('nav-md nav-sm');
setContentHeight();
});
it seems that the javascript are rendered,
but when i click on button to toggle menu or any control that as to work with jquery it doesnt work
This my code.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="~/Style/fullcalendar.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="~/Scripts/Custom/fullcalendar.js"></script>
<script type="text/javascript" src="~/Scripts/Custom/moment.min.js"></script>
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
})
});
</script>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Doing with asp.net MVC project.It nothing show.What happen and what need more in my code?I just follow do with FullCalendar Basic Usage .Thanks.
I'm using ng-inculde to include an html file that aslo includes some javascript codes for that page, but the javascripts are not executed,
here is my Code :
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title ng-cloak>{{Page.Title}}</title>
<link rel="stylesheet" href="/media/css/bootstrap.min.css">
<link rel="stylesheet" href="/media/css/swiper.min.css">
<link rel="stylesheet" href="/media/css/owl.carousel.css">
<link rel="stylesheet" href="/media/css/style.css">
<link href="/media/css/nprogress.css" rel="stylesheet">
<script type="text/javascript" src="/media/js/angular.js"></script>
<script src="/media/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/media/js/app.js"></script>
<script src="/media/js/vendor/modernizr-2.8.3.min.js"></script>
<meta name="description" content="">
<meta name="fragment" content="!">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<script type="text/javascript" src="/media/js/ng-device-detector.js"></script>
<script type="text/javascript" src="/media/js/re-tree.js"></script>
<script type="text/javascript" src="/media/js/angular-route.js"></script>
<script type="text/javascript" src="/media/js/angular-md5.js"></script>
<script type="text/javascript" src="/media/js/angular-cache.js"></script>
<script type="text/javascript" src="/media/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
And my home.html page:
<p>Welcome, this is the home page!!</p>
<div ng-include src="'/template/include/home_s.html'"></div>
And this is my home_s.html:
<script>
console.log("Selam, chooni khasi?");
alert("Sellam, choooni?");
</script>
Either:
<ng-include src="'/template/include/home_s.html'"></ng-include>
Or:
<div ng-include="'/template/include/home_s.html'"></div>
However, Angular on its own doesn't support loading scripts inside templates. For this to work you need to include jQuery (make sure you load it before Angular).
Demo without jQuery: http://plnkr.co/edit/Qh27ArEyIk53VRB7e61C?p=preview
Demo with jQuery: http://plnkr.co/edit/TxOmx5ksEFC2larJiJBA?p=preview
I've changed the layout file in yii and now the problem with identifying the select2 function.
I've checked the source code - seems identical in both cases. In both of them the select2.js is present: <script type="text/javascript" src="/app3/assets/b92019fc/select2.js"></script>
Source code of one where the problem appears:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/ico" href="/app2/img/favicon.ico">
some css files are here...
<script type="text/javascript" src="/app3/assets/df744518/jquery.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.yii.js"></script>
<script type="text/javascript" src="/app3/assets/b92019fc/select2.js"></script>
<title>tarex. Page3</title>
some css files are here...
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="assets/35648952/jquery.yii.js"></script>
<script type="text/javascript">
jQuery(function($) {
jQuery('body').on('change','#_lang',function(){jQuery.yii.submitForm(this,'',{});return false;});
jQuery('body').on('change','#Cityes_Name',function(){jQuery.yii.submitForm(this,'',{});return false;});
});
</script>
<script language='javascript'>
var RoleId=1;
var UserName='admin';
var UserId='36';
var OrganizationId='7';
var Language='ru';
//console.log('Language '+Language);</script>
</head>
The source code where there is no problem:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="language" content="en" />
<link rel="shortcut icon" type="image/ico" href="/app2/img/favicon.ico">
<script language='javascript'>
var RoleId=1;
var UserName='admin';
var UserId='36';
var OrganizationId='7';
var Language='ru';
//console.log('Language '+Language);</script>
<!-- blueprint CSS framework -->
some css files are here...
<script type="text/javascript" src="/app3/assets/df744518/jquery.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.ba-bbq.js"></script>
<script type="text/javascript" src="/app3/assets/df744518/jquery.yii.js"></script>
<script type="text/javascript" src="/app3/assets/b92019fc/select2.js"></script>
<title>Главное меню</title>
</head>
What might be the problem in?
You are applying jQuery few times. Load jQuery only once with Yii::app()->clientScript->registerCoreScript('jQuery')