I am trying to load an owl-carousel slider in an angularJs partial template but it does not display the slides. It works fine when loaded in a HTML page but does not work in the template. Any suggestion on how I can solve this:
HTML PAGE:
<!DOCTYPE html>
<html ng-app="main">
<head>
<title>Woodworld</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/animate.css">
<link rel="stylesheet" href="data/images/css/all.css">
<link rel="stylesheet" href="styles/layoutstyle.css">
<link rel="stylesheet" media="screen and (min-width:500px)" href="styles/medium-screens.css">
<link rel="stylesheet" media="screen and (min-width:1050px)" href="styles/large-screens.css">
<link rel="stylesheet" href="styles/owl.theme.default.min.css">
<link rel="stylesheet" href="styles/owl.carousel.min.css">
<link rel="stylesheet" href="styles/owl.theme.green.min.css">
<script src="scripts/angular.min.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-messages.min.js"></script>
<script src="scripts/modules.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/wow.min.js"></script>
<script src="scripts/owl.carousel.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<div ng-view>
</div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/owl.carousel.min.js"></script>
<script src="scripts/stylescript.js"></script>
</body>
</html>
Template code:
<div owl-carousel class="owl-carousel">
<div class="item"><h2>Slide 1</h2></div>
<div class="item"><h2>Slide 2</h2></div>
<div class="item"><h2>Slide 3</h2></div>
<div class="item"><h2>Slide 4</h2>Slide </div>
</div>
OWL Carousel directive code:
app.directive("owlCarousel", owlCarouselDirective);
function owlCarouselDirective() {
return {
restrict : "A",
transclude: false,
link : function ($scope, element, attributes) {
$scope.initCarousel = function () {
$(element).owlCarousel($scope.HomeVM.owlDefaultOpts);
};
}
};
}
function owlCarouselItemDirective() {
return {
restrict : "A",
transclude: false,
link : function ($scope, element, attributes) {
if ( $scope.$last )
$scope.initCarousel();
}
};
}
Related
I'm new to reactjs and I have a problem.
I have a code like this
<body>
<link href="css/rev_css.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<script src="lib/react.js" type="text/javascript"></script>
<script src="lib/react.min.js" type="text/javascript"></script>
<script src="lib/react-dom.js" type="text/javascript"></script>
<script src="lib/react-dom.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<div id="root">
<!-- This div's content will be managed by React. -->
</div>
<script type="text/babel">
var Counter = React.createClass({
getInitialState: function () {
return { count: 0 };
},
handleClick: function () {
this.setState({
count: this.state.count + 1,
});
},
render: function () {
return (
<div class="header">
<label class="web_name">Revegator</label>
<input class="search_bar" type="search" placeholder="Search here"/>
<div class="box">
<div class="container-4">
<input type="search" id="search" placeholder="Search here" />
</div>
</div>
<div class="menu_items_div">
<a class="menu_items">Home</a>
<a class="menu_items">Profile</a>
<img class="menu_items" src="img/bell.png" alt=""/>
<img class="menu_items" src="img/drop.png" alt=""/>
</div>
</div>
);
}
});
ReactDOM.render(
<Counter />,
document.getElementById('root')
);
</script>
</body>
But the css has not been applied here. How can I load my css file properly? I have been using AngularJS upto now. In angular I could just simply load the css like this
<link href="css/rev_css.css" rel="stylesheet" type="text/css"/>
How can I do this in react?
Add the following line at the TOP of your html ( even before <html> tag ):
<!DOCTYPE html>
Then put, <link > tag inside <head> .
< head>
<!-- -->
<link href="css/rev_css.css" rel="stylesheet" type="text/css" />
</head>
If it does not work, it means you are using wrong path , so , check in the console if css/rev_css.css is not found .
I've gone through the other solutions to this question and none seem to work. I still think there is a problem with the scripts. Here is my :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<!-- JQuery -->
<script src="js/jquery-1.11.3.js"></script>
<!-- BS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Fancybox -->
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function() {
if(location.hash) {
$(location.hash).click();
}
$(".iframe").fancybox();
});
</script>
</head>
And body:
<a class="iframe" href="https://player.vimeo.com/video/151002965">
<img src="https://vimeo.com/151002965">
</a>
it have some type mistake
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
please correct it as,
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
try once again it may help you
I am using jquery mobile
I have 3 pages and after some clicks between the pages the css are not rendered
LoadCss.js
$(document).on("pageinit",function(event) {
$("#categoriesPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss.css">');
});
$("#wordPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss">');
});
$("#searchPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="myCss">');
});
});
Html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<meta name="viewport" content="width=device-width"/>
<meta charset="UTF-8">
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/rtl.jquery.mobile-1.4.0.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/angular.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/lodash.js"></script>
<!--player-->
<script type="text/javascript" src="scripts/jquery.jplayer.js"></script>
<script type="text/javascript" src="video.js"></script>
<script type="text/javascript" src="mainController.js"></script>
<script type="text/javascript" src="loadCSS.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl" ng-init="data=init()">
<div data-role="page" id="firstPage">
... some logic
</div>
<div data-role="page" id="secondPage">
.. sonle logic
</div>
<div data-role="page" id="thirdage">
..........
</div>
</div>
</body>
</html>
I tried also to put the CSS in the header and not on on event but it still didn't work
<link rel="stylesheet" href="scripts/rtl.jquery.mobile-1.4.0.css"/>
<link rel="stylesheet" href="styles/jplayer.pink.flag.min.css" rel="stylesheet">
Please try this method below, using the attribute method. note the order they are applied.
This will give better compatibility for all browsers too (IE has issues):
To test, don't put your JQuery code in the external LoadCSS.js file - put it into the HTML file. It should work every time. When loading from an external JS file, some events do not always trigger when you expect due to the browser caching the file.
As #nishi says, remember to remove the old CSS before adding the new ones.
$('<link>')
.appendTo('head')
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', '/styles/myfile.css');
I am currently trying to make codemirror and summernote work, I have followed a online tutorial but there seems to be a problem with the file dependencies. My code is. I have taken the online file urls from summernote's example page, so it should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Code editor</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet"/>
<link href="css/summernote.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<!-- Add custom CSS here -->
</head>
<body>
<div class="row">
<br />
<div class="container">
<div class="col-lg-12">
<form action="">
<div class="form-group">
<label for="">Descriptions</label>
<textarea id="description" rows="10" class="form-control"></textarea>
</div>
</form>
</div>
</div>
</div>
<!-- /.end Footer -->
<!-- /.end container -->
<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/summernote.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#description').summernote({
height: 400,
codemirror: {
theme:'monokai'
}
});
});
</script>
</body>
</html>
Any help would be appreciated.... thanks
Refer the following code snippet, it's working perfectly fine for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>summernote</title>
<!-- include jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- include libraries BS3 -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js)-->
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
<!-- include summernote -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.1/summernote.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 200,
tabsize: 2,
codemirror: {
theme: 'monokai'
}
});
});
</script>
</head>
<body>
<textarea class="summernote"><p>Seasons <b>coming up</b></p></textarea>
</body>
</html>
Then point the cdn urls to the local file system url where the files are being located.
Use prettifyHtml: false to disable summernote formatting your code
$scope.summernoteOptions = {
height: 690,
focus: true,
prettifyHtml: false,
codemirror: {
theme: 'default',
mode: "text/html",
lineNumbers: true,
tabMode: 'indent'
}
};
<!DOCTYPE html>
<!--
-->
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>F.E.G | Admin Dashboard </title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<script src="js/text_class.js" type="text/javascript"></script>
<script src="web/assets/plugins/flot/jquery.flot.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/bmain172.js"></script>
<script src="/js/text_class.js" type="text/javascript"></script>
<script src="/freedomtextim/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="/freedomtextim/jquery-ui.js"></script>
<link href="freedomtextim/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="web/assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="freedomtextim/assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="freedomtextim/assets/css/style.css" rel="stylesheet" />
<link href="web/assets/css/style-responsive.css" rel="stylesheet" />
<link href="web/assets/css/themes/default.css" rel="stylesheet" id="style_color" />
<link href="web/assets/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" />
<link href="#" rel="stylesheet" id="style_metro" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="web/assets/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet" rel="stylesheet" type="text/css" />
<link href="web/assets/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="web/assets/plugins/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="web/assets/plugins/jqvmap/jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL STYLES -->
<link href="/freedomtextim/jquery-ui.css" rel="stylesheet" type="text/css">
<script>$(function () {
$(document).tooltip({
position: { my: "left+15 center", at: "right center"},
content: function () {
return $(this).prop('title');
},
show: null,
close: function (event, ui) {
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function () {
$(this).remove();
})
});
}
});
}); </script>
<script src="web/assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="web/assets/plugins/breakpoints/breakpoints.js" type="text/javascript"></script>
<script src="web/assets/scripts/app.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
App.init(); // initlayout and core plugins
Index.init();
Index.initJQVMAP(); // init index page's custom scripts
Index.initKnowElements(); // init circle stats(knob elements)
Index.initPeityElements(); // init pierty elements
Index.initCalendar(); // init index page's custom scripts
Index.initCharts(); // init index page's custom scripts
Index.initChat();
Index.initDashboardDaterange();
Index.initIntro();
});
</script>
<style type="text/css">
label {
display: inline-block;
width: 5em;
}
.red {
color: red;
}
}</style>
</head>
Inside the app.js file.
var handleSidebarMenu = function () {
jQuery('#sidebar .has-sub > a').click(function (e) {
var last = jQuery('.has-sub.open', $('#sidebar'));
last.removeClass("open");
jQuery('.arrow', last).removeClass("open");
jQuery('.sub', last).slideUp(200);
var sub = jQuery(this).next();
if (sub.is(":visible")) {
jQuery('.arrow', jQuery(this)).removeClass("open");
jQuery(this).parent().removeClass("open");
sub.slideUp(200, function () {
handleSidebarAndContentHeight();
});
} else {
jQuery('.arrow', jQuery(this)).addClass("open");
jQuery(this).parent().addClass("open");
sub.slideDown(200, function () {
handleSidebarAndContentHeight();
});
}
e.preventDefault();
});
}
You need to put your jQuery code after you've included jQuery.
<script src="web/assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script src="web/assets/plugins/breakpoints/breakpoints.js" type="text/javascript"></script>
<script src="web/assets/scripts/app.js" type="text/javascript"></script>
<script>
// Your code here
</script>