None of the carousel plugins I use are working properly. Usually I need to resize my browser before everything is displayed properly. This is not practical because mine is a mobile app.
I have nailed down the problem to positioning. The transition between pages requires the positioning to be Absolute (see #page > div). However, the carousel requires the Relative positioning.
I tried adding an extra <div></div> around the carousel and positioning that to be relative, but it isn't doing the trick. Anyone know how to fix this...
Transition.css:
#page {
position: relative;
}
#page > div {
display:none;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#page > div.current {
display: block;
}
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="cleartype" content="on">
<link rel="stylesheet" href="css/transition.css?v=1">
<link rel="stylesheet" href="css/elastislide.css?v=1">
</head>
<body>
<div id="page">
<div id="pageLogin" class="pageLogin current">
<span>Sign in</span>
</div>
<div id="pageSearch" class="pageSearch">
<!-- Elastislide Carousel -->
<div id="carousel" class="es-carousel-wrapper">
<div class="es-carousel">
<ul>
<li><img src="images/small/1.jpg" alt="image01" /></li>
<li><img src="images/small/2.jpg" alt="image02" /></li>
<li><img src="images/small/3.jpg" alt="image03" /></li>
<li><img src="images/small/4.jpg" alt="image04" /></li>
<li><img src="images/small/5.jpg" alt="image05" /></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel -->
</div> <!--! end #pageSearch-->
</div><!--end #Page-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
</body>
</html>
I found the answer to the problem. Its actually the display:none and display:block, that was applied to the pages.
The display block caused the carousel's images to display block style instead of side by side.
Instead of display:none, I use visibility:hidden, height: 0, overflow: hidden. Then I just reverse it when the page displays.
I also had and solved this problem.
I used some jQuery to apply the css once the document was loaded.
For example:
jQuery(document).ready(function($){
$('.more-wrapper').css({"display": "block", "position": "absolute", "left": "50%", "z-index": "100", "bottom": "40px", "-webkit-transform": "translate(-50%,0)", "-ms-transform": "translate(-50%,0)", "-o-transform": "translate(-50%,0)", "transform": "translate(-50%,0)"});
});
Related
This is derived from my question here: Changing style on <body> element where the suggestion was to style a top level DIV. Having tried that I find that I get a different output using React compared to direct HTML. I am at a loss to understand why.
Consider a very simple react app consisting of a basic index.html file:
<!DOCTYPE HTML>
<html>
<head>
<style>
html { min-height: 100%; }
body { height: 100%; background-color: blue; margin: 0; }
</style>
</head>
<body>
<div id='root'></div>
<script src="https://fb . me / react-15.0.1.js"></script>
<script src="https://fb . me / react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="main.js" type="text/babel"></script>
</body>
</html>
and a corresponding main.js file
var TestDiv = React.createClass({
render: function () {
const style = {
divStyle: {
height: "100%",
background: "red"
}
}
return (
<div style={style.divStyle}>
<h1>Hello World</h1>
</div>
)
}
});
ReactDOM.render(<TestDiv/>, document.getElementById('root'));
Rendering this produces a blue screen with a red bar at the top with the text on. With the DIV set to a height of 100% I had expected the red background to fill the viewport.
Now, take the output from that React app (as given by Chrome Inspector) and create a simple html file from it.
<html>
<head>
<style>
html { min-height: 100%; }
body { height: 100%; background-color: blue; margin: 0; }
</style>
</head>
<body>
<div id="root">
<div data-reactroot="" style="height: 100%; background: red;">
<h1>Hello World</h1>
</div>
</div>
<script src="https://fb . me/react-15.0.1.js"></script>
<script src="https://fb . me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="main.js" type="text/babel"></script>
</body>
</html>
The code is essentially the same but this renders with the whole viewport in red and no blue at all.
Why?
i'm developing an Angularjs application and i'd like to make it multiplatform so to do that i'm trying to use Bootsrap, i found a template i'd like to follow (https://blackrockdigital.github.io/startbootstrap-business-frontpage/#) the problem is that i want to transform the navbar when the screen size is smaller.
but i don't know what i'm missing, because it does correctly the transformation to a button but then, the button is not clickable so the options 'inicio', 'servicios' and 'contacto' are unreachable.
Any help would be awesome, here you have the css and html files:
HTML
<!DOCTYPE html>
<html ng-app="home">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HOME</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.js"></script>
<link href="/web/resources/css/business-frontpage.css" rel="stylesheet" />
<script src="/web/resources/js/home/home-service.js"></script>
<script src="/web/resources/js/home/home-controller.js"></script>
<script src="/web/resources/js/home/home-app.js"></script>
<script src="/web/resources/lib/translate/angular-translate.js"></script>
<script src="/web/resources/js/generic/urlLanguageStorage.js"></script>
<script src="/web/resources/lib/translate/angular-translate-loader-url.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a ui-sref="home" translate>navegacion.inicio</a>
</li>
<li>
<a ui-sref="servicios" translate>navegacion.servicios</a>
</li>
<li>
<a ui-sref="contacto" translate>navegacion.contacto</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Image Background Page Header -->
<!-- Note: The background image is set within the business-casual.css file. -->
<header class="business-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1><a class="tagline" ui-sref="home" translate>titulo.alergenos</a></h1>
</div>
</div>
</div>
</header>
<div class="container">
<div ui-view></div>
</div>
<div class="container">
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
</body>
</html>
CSS
/*
* Start Bootstrap - Business Frontpage (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/
body {
padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
.business-header {
height: 400px;
background: url('http://placehold.it/1920x400') center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
/* Customize the text color and shadow color and to optimize text legibility. */
.tagline {
text-shadow: 0 0 10px #000;
color: #fff;
}
.img-center {
margin: 0 auto;
}
footer {
margin: 50px 0;
}
EDIT
I created a Jsfidlle https://jsfiddle.net/txominsirera/v8ups1hc/
Both jQuery and Bootstrap.js should be included with jQuery placed before Bootstrap.js.
Note: The version of jQuery that can be used will vary depending on the version of Bootstrap being used (or vice versa).
Bootstrap Version 4
JS Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins. Place the following <script>s near the end of your pages,
right before the closing </body> tag, to enable them. jQuery must come
first, then Popper.js, and then our JavaScript plugins.
We use jQuery’s slim build, but the full version is also supported.
For Release v4.0.0-beta.2 package.json
"peerDependencies": {
"jquery": "1.9.1 - 3",
"popper.js": "^1.12.7"
},
Bootstrap Version 3
jQuery required
Please note that all JavaScript plugins require jQuery
to be included, as shown in the starter template. Consult our
bower.json to see which versions of jQuery are supported.
For Release v3.3.7 Changelog & bower.json
"dependencies": {
"jquery": "1.9.1 - 3"
}
For v3.3.6 bower.json
"dependencies": {
"jquery": ">= 1.9.1 - 2"
}
For v3.3.0 - v3.3.5 bower.json
"dependencies": {
"jquery": ">= 1.9.1"
}
This does not account for the release of jQuery v3.0
For v3.0.0rc1 - v3.2.0 bower.json
"dependencies": {
"jquery": ">= 1.9.0"
}
This does not account for the release of jQuery v3.0
I would very much like to integrate in my angular app the Basic Usage template
from Angular Materials.
I really like the transition effect when the <> is clicked.
I already did a search for that directive on their website but did not find it. The closest thing I managed to find is the Toolbar, but it's slightly different in the way that the upper corners are not rounded. Also, using a simple ng-show, will not provided that transition.
Any suggestions on how to achieve this?
You can do that with angular animations which is just some simple CSS with transitions. And you are on the right track with md-toolbar. The demos use it, you just need to set some CSS to round the top corners.
md-card md-toolbar {
border-radius: 3px 3px 0 0;
}
Now add some content below the md-toolbar that you want to toggle and use ng-show on it.
<div class="toggle-content" ng-show="open">
The toggled content!
</div>
Then just check the ngShow documentation on how to animate it with CSS. What you want to animate here is the height of the toogle-content element. When it is hidden, height: 0 is applied, otherwise height: 200px.
.toggle-content {
height: 200px;
background: red;
}
.toggle-content.ng-hide-add, .toggle-content.ng-hide-remove {
transition: height linear 0.5s;
}
.toggle-content.ng-hide {
height: 0;
}
And of course you need a md-button in the toolbar that toggles the content.
<md-button ng-click="open = !open">
Toggle
</md-button>
Complete example: http://codepen.io/kuhnroyal/pen/XXZPrE
You need to implement something akin to the slideToggle() method in jquery. The Angular Slideables directive provides this functionality.
The straight corners are a custom style implemented in addition to the md-toolbar directive.
It turns out this is the closest thing that I managed to find that suits my needs.
'use strict';
angular.module('ui', ['ui.bootstrap']);
(function() {
angular.module('ui', [
"ui.bootstrap",
"ngAnimate"
]);
var module = angular.module("ui");
module.controller("controller", function($scope) {
var model = this;
model.oneAtATime = true;
model.Operators = [{
ReportItemName: "asd"
}, {
ReportItemName: "fds"
}];
});
}());
<!DOCTYPE html>
<html ng-app="ui">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-animate#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<script data-require="ui-bootstrap-tpls-0.11.2.min.js#0.14.3" data-semver="0.14.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="controller as model">
<uib-accordion close-others="model.oneAtATime">
<uib-accordion-group heading="Custom template">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
<h1>Some Content</h1>
</uib-accordion-group>
</uib-accordion>
</div>
</body>
</html>
Other solutions that provide out-of-the-box functionality are very much welcomed.
I have created a layout using JQuery layout. It is working fine if I use it in normal index file. But when I try to load through ui-view directory, it's not loading. Please help.
my index.html`
<html ng-app="sample">
<head>
<title>sample</title>
<link type="text/css" rel="stylesheet" href=""/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="jquery.js"></script>
<script src="jquery.ui.all.js"></script>
<script src="jquery.layout.js"></script>
<script src="angular-animate.js"></script>
<script src="angular-ui-router.min.js"></script>
<script type="text/javascript">
var mylayout;
$(document).ready(function(){
myLayout = $('#container').layout({west_size:400,
west_minSize:100
});
})
</script>
</head>
<body>
<div ui-view></div>
</body>
<script type="text/javascript" src="app.js">
<script type="text/javascript" src="home.js">
</html>
`
my app.js as bellow;
var SP ={};
SP.CONTROLLERS = angular.module('spControllers',[]);
sp.Dependencies =['spControllers',ui.router,'ngAnimate'
];
spModule = angular.module('spModule',SP.dependencies)
.config(['$stateProvider','$urlRouterProvider','$httpProvider',
function($stateProvider,$urlRouterProvider,$httpProvider){
$stateProider.
state('home',{
url:'',
templateurl:'home.html'
})
}]);
my home.html is as below;
<div id="container" ng-controller="smpCTRL">
<div class="pane ui-layout-west">WEST</div>
<div class="pane ui-layout-center">CENTER</div>
</div>
my home.js is as below;
SP>CONTROLLERS.controller("smpCTRL", ['$scope',function($scope){
console.log("sucess");
}]);
css as below;
#container {
background: #999;
height: 100%;
margin: 0 auto;
width: 100%;
max-width: 900px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
/*
* Default Layout Theme
*
* Created for jquery.layout
*
* Copyright (c) 2010
* Fabrizio Balliano (http://www.fabrizioballiano.net)
* Kevin Dalman (http://allpro.net)
*
* Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
* and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
*
* Last Updated: 2010-02-10
* NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
*/
/*
* DEFAULT FONT
* Just to make demo-pages look better - not actually relevant to Layout!
*/
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
*font-size: 80%;
}
/*
* PANES & CONTENT-DIVs
*/
.ui-layout-pane { /* all 'panes' */
background: #FFF;
border: 1px solid #BBB;
padding: 10px;
overflow: auto;
/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
otherwise you may get double-scrollbars - on the pane AND on the content-div
- use ui-layout-wrapper class if pane has a content-div
- use ui-layout-container if pane has an inner-layout
*/
}
/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
.ui-layout-content {
padding: 10px;
position: relative; /* contain floated or positioned elements */
overflow: auto; /* add scrolling to content-div */
}
/*
* UTILITY CLASSES
* Must come AFTER pane-class above so will override
* These classes are NOT auto-generated and are NOT used by Layout
*/
.layout-child-container,
.layout-content-container {
padding: 0;
overflow: hidden;
}
.layout-child-container {
border: 0; /* remove border because inner-layout-panes probably have borders */
}
.layout-scroll {
overflow: auto;
}
.layout-hide {
display: none;
}
/*
* RESIZER-BARS
*/
.ui-layout-resizer { /* all 'resizer-bars' */
background: #DDD;
border: 1px solid #BBB;
border-width: 0;
}
.ui-layout-resizer-drag { /* REAL resizer while resize in progress */
}
.ui-layout-resizer-hover { /* affects both open and closed states */
}
/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
otherwise color shifts while dragging when bar can't keep up with mouse */
.ui-layout-resizer-open-hover , /* hover-color to 'resize' */
.ui-layout-resizer-dragging { /* resizer beging 'dragging' */
background: #C4E1A4;
}
.ui-layout-resizer-dragging { /* CLONED resizer being dragged */
border: 1px solid #BBB;
}
.ui-layout-resizer-north-dragging,
.ui-layout-resizer-south-dragging {
border-width: 1px 0;
}
.ui-layout-resizer-west-dragging,
.ui-layout-resizer-east-dragging {
border-width: 0 1px;
}
/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
background: #E1A4A4; /* red */
}
.ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
background: #EBD5AA;
}
.ui-layout-resizer-sliding { /* resizer when pane is 'slid open' */
opacity: .10; /* show only a slight shadow */
filter: alpha(opacity=10);
}
.ui-layout-resizer-sliding-hover { /* sliding resizer - hover */
opacity: 1.00; /* on-hover, show the resizer-bar normally */
filter: alpha(opacity=100);
}
/* sliding resizer - add 'outside-border' to resizer on-hover
* this sample illustrates how to target specific panes and states */
.ui-layout-resizer-north-sliding-hover { border-bottom-width: 1px; }
.ui-layout-resizer-south-sliding-hover { border-top-width: 1px; }
.ui-layout-resizer-west-sliding-hover { border-right-width: 1px; }
.ui-layout-resizer-east-sliding-hover { border-left-width: 1px; }
/*
* TOGGLER-BUTTONS
*/
.ui-layout-toggler {
border: 1px solid #BBB; /* match pane-border */
background-color: #BBB;
}
.ui-layout-resizer-hover .ui-layout-toggler {
opacity: .60;
filter: alpha(opacity=60);
}
.ui-layout-toggler-hover , /* need when NOT resizable */
.ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity when IS resizable */
background-color: #FC6;
opacity: 1.00;
filter: alpha(opacity=100);
}
.ui-layout-toggler-north ,
.ui-layout-toggler-south {
border-width: 0 1px; /* left/right borders */
}
.ui-layout-toggler-west ,
.ui-layout-toggler-east {
border-width: 1px 0; /* top/bottom borders */
}
/* hide the toggler-button when the pane is 'slid open' */
.ui-layout-resizer-sliding .ui-layout-toggler {
display: none;
}
/*
* style the text we put INSIDE the togglers
*/
.ui-layout-toggler .content {
color: #666;
font-size: 12px;
font-weight: bold;
width: 100%;
padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
}
/*
* PANE-MASKS
* these styles are hard-coded on mask elems, but are also
* included here as !important to ensure will overrides any generic styles
*/
.ui-layout-mask {
border: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
position: absolute !important;
opacity: 0 !important;
filter: Alpha(Opacity="0") !important;
}
.ui-layout-mask-inside-pane { /* masks always inside pane EXCEPT when pane is an iframe */
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
div.ui-layout-mask {} /* standard mask for iframes */
iframe.ui-layout-mask {} /* extra mask for objects/applets */
/*
* Default printing styles
*/
#media print {
/*
* Unless you want to print the layout as it appears onscreen,
* these html/body styles are needed to allow the content to 'flow'
*/
html {
height: auto !important;
overflow: visible !important;
}
body.ui-layout-container {
position: static !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
/* only IE6 has container width & height set by Layout */
_width: auto !important;
_height: auto !important;
}
.ui-layout-resizer, .ui-layout-toggler {
display: none !important;
}
/*
* Default pane print styles disables positioning, borders and backgrounds.
* You can modify these styles however it suit your needs.
*/
.ui-layout-pane {
border: none !important;
background: transparent !important;
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
}
}
This is how I get it solved:
In your app.js, create is on controller,
add the controller name to your index body.
the convert the template js to a method.
then create a scope method in your app.js controller.
In the scope method, call the template js method.
Inside the ui-view html template or your dashboard. Use ng-init to call the scope method of your app.js controller using <div ng-init='$parent.appTemplate()'></div>.
Here is the working example (index.html):
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="zeusWeb" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Screening Manager</title>
<meta name="keywords" content="education, institution, management, portal,screening,application">
<meta name="description" content="education, institution, management, portal,screening,application">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="author" content="K-Devs System Solutions">
<meta name="owner" content="Kazeem Olanipekun">
<meta name="verified by" content="K-Devs System Solutions">
<meta name="googlebot" content="noodp">
<meta name="google" content="translate">
<meta name="revisit-after" content="1 month">
<!-- build:css css/main.css-->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/iCheck/skins/flat/blue.css" />
<link rel="stylesheet" href="bower_components/nprogress/nprogress.css" />
<link rel="stylesheet" href="bower_components/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.css" />
<link rel="stylesheet" href="bower_components/switchery/dist/switchery.css" />
<!--endbower-->
<!--custom:css-->
<link href="template.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<!-- endcustom css-->
<!-- endbuild -->
<link rel="shortcut icon" href="images/screening.ico" type='image/x-icon'/>
<link rel="icon" href="images/screening.ico" type="image/x-icon"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-ng-controller="zeusWebCtrl" class="nav-md footer_fixed">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<data ui-view ng-cloak></data>
<!-- build:js js/vendors.js-->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script>
<script src="bower_components/iCheck/icheck.js"></script>
<script src="bower_components/nprogress/nprogress.js"></script>
<script src="bower_components/bootstrap-progressbar/bootstrap-progressbar.js"></script>
<script src="bower_components/transitionize/dist/transitionize.js"></script>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<script src="bower_components/switchery/dist/switchery.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js js/main.js-->
<!-- code inclusion-->
<script src="template.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/dashboard/dashboard.js"></script>
<script src="app.js"></script>
<!--end inclusion -->
<!-- endbuild -->
</body>
</html>
Here is the app.js:
'use strict';
// Declare app level module which depends on views, and components
var zeusWeb=angular.module('zeusWeb', ['ui.router', 'angular-loading-bar','dashboard']);
zeusWeb.config(['$stateProvider', '$urlRouterProvider','cfpLoadingBarProvider',function ($stateProvider, $urlRouterProvider,cfpLoadingBarProvider) {
$urlRouterProvider.otherwise("/");
/**
* State for the very first page of the app. This is the home page .
*/
$stateProvider.state('home', {
url: "/",
templateUrl: 'views/dashboard/dashboard.html',
controller: 'dashboardCtrl'
});
/*
$stateProvider.state('dashboard', {
url:'/dashboard',
templateUrl: 'views/dashboard/dashboard.html',
controller: 'dashboardCtrl',
controllerAs:'vm'
});*/
/*
$stateProvider.state('dashboard', {
views:{
'body':{
url:'/embed',
templateUrl: 'view1/embed.html',
controller: 'embed',
controllerAs:'vm'
}
}
});*/
}]);
zeusWeb.controller('zeusWebCtrl',['$scope',function ($scope) {
$scope.test = "Testing";
$scope.appTemplate=function () {
template();
};
}]);
Here is the embed ui-view dashboard.html:
<div class="container body">
<div class="main_container">
<!--sidebar-->
<section data-ng-include="'views/dashboard/sidebar-nav.html'" data-ng-controller="sideBarCtrl as vm"></section>
<!--sidebar-->
<!-- top navigation -->
<section data-ng-include="'views/dashboard/header.html'"></section>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main" ui-view="body">
hey
<!-- <script>template();</script>-->
</div>
<!-- /page content -->
<!--footer-->
<section data-ng-include="'views/dashboard/footer.html'"></section>
<!--footer-->
</div>
</div>
<div data-ng-init="$parent.appTemplate()"></div>
Please note that if you are having an asynchronous inject sidebars html based on roles. make sure you have a default sidebar html that will put this <div data-ng-init="$parent.appTemplate()"></div> instead of the dashboard and also make sure that the default sidebar will be loaded last after all other sidebars has loaded successfully.
In my case, here is a sample example of the sidebars (school admin html sidebar):
<div class="menu_section">
<h3>Live On</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>E-commerce</li>
<li>Projects</li>
<li>Project Detail</li>
<li>Contacts</li>
<li>Profile</li>
</ul>
</li>
<li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>403 Error</li>
<li>404 Error</li>
<li>500 Error</li>
<li>Plain Page</li>
<li>Login Page</li>
<li>Pricing Tables</li>
</ul>
</li>
<li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Level One
<li><a>Level One<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu">Level Two
</li>
<li>Level Two
</li>
<li>Level Two
</li>
</ul>
</li>
<li>Level One
</li>
</ul>
</li>
<li><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></li>
</ul>
</div>
Then, let assume that is the last sidebar of the user, then you then call the default sidebar to call the function (default sidebar html):
<div data-ng-init="$parent.appTemplate()"></div>
You should try your code after angular DOM is ready
angular.element(document).ready(function () {
myLayout = $('#container').layout({west_size:400,
west_minSize:100
});
});
The issue is that .layout is called before the element #container exists.
The correct solution for this would be to create a directive for the 'layout' function and apply that directive to the element you want to set the layout to.
Include your script inside your home.html partial template, that should work, had a similar issue, my guess is that that particular dom element does not exist when your function is initially executed.
home.html
<script type="text/javascript">
var mylayout;
$(document).ready(function(){
myLayout = $('#container').layout({west_size:400,
west_minSize:100
});
})
</script>
<div id="container" ng-controller="smpCTRL">
<div class="pane ui-layout-west">WEST</div>
<div class="pane ui-layout-center">CENTER</div>
</div>
I have the following HTML code, what I want to do is to split the page into two divs, and place the object to the left side. However, the swf file covers all of the page, not just the left side. What could be the problem?
Thanks,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "#FFFFFF"
};
var attributes = {
id:"player"
};
swfobject.embedSWF("player.swf", "left", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<style>
html, body { height:100%; width:100%; }
body { margin:0; padding:0; }
#left {
float: left;
width: 50%;
}
#right {
float: right;
width: 50%;
}
</style>
</head>
<body>
<div id="container" >
<div id="left">
<p><a href="http://www.adobe.com/go/getflashplayer"><img
src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
alt="Get Adobe Flash player" /></a></p>
</div>
<div id="right">Test</div>
</div>
</body>
</html>
When you specify an ID in SWFObject's attributes variable, the <object> generated by SWFObject will replace the target div (in this case #left) with an object using the ID you specified (in this case #player). So your CSS for #left won't work, because there is no element with that ID anymore.
<div class="box">
<div id="left">
<p> ... </p>
</div>
</div>
becomes
<div class="box">
<object id="player" ... >
<param ... />
</object>
</div>
The solution is to either not specify an ID in the attributes, in which case the object will inherit the ID used by the target div, or change your CSS to recognize that the object uses the ID #player and not #left
Change your styles to this:
<style type="text/css">
html, body { height:100%; width:100%; }
body { margin:0; padding:0; }
.box {
float:left;
width:50%;
}
</style>
then change your body html to this (so that you are replacing a Div inside your left 'box':
<div id="container" >
<div class="box">
<div id="left">
<p>
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</p>
</div>
</div>
<div class="box">
Test
</div>
</div>
This worked how I imagined you were thinking in firefox for me anyway
What are the native dimensions of the SWF? I think the percentages refer to the % of the inherant dimensions of the file, not the available space of the container element.
Another, thing might be that since a swf is an "object" and object rendring is done by the system it uses the dimentions of the view port, not the container element.
In short if you need it to have dynamic dimensions i would calulate the dimensions needed. You could do so with jQuery pretty easily:
<script src="js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var left = $('#left');
var flashvars = {
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "#FFFFFF"
};
var attributes = {
id:"player"
};
swfobject.embedSWF("player.swf", "left", ceil(left.width())+'px', ceil(left.height())+'px', "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>