As you can see in the example, resizing doesn't work properly when using an iframe. You can move the splitter to the left, but not to the right. Does anybody know why this is and how it could be fixed?
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title>UI.Layout : demo </title>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
<style>
.html-back {
background: #eee;
}
</style>
</head>
<body>
<div ui-layout options="{ flow : 'column', disableToggle: true }">
<div ui-layout-container size="50%" class="html-back">
AA
</div>
<div ui-layout-container size="50%" class="html-back">
<iframe style="width: 100%; height: 100%;" src=""></iframe>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
var app = angular.module("x", ["ui.layout"]);
</script>
</body>
</html>
The problem seems to be that the iframe steals the focus. I managed to prevent this by adding an overlay div while moving the split bar.
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<title>UI.Layout : demo </title>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.css"/>
<style>
.html-back {
background: #eee;
}
</style>
</head>
<body>
<div ng-controller="AppController">
<div ui-layout ui-layout-loaded options="{ flow : 'column', disableToggle: true }" id="splitViewContainer">
<div ui-layout-container size="50%" class="html-back">
AA
</div>
<div ui-layout-container class="html-back">
<iframe style="width: 100%; height: 100%;" src=""></iframe>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-layout/master/src/ui-layout.js"></script>
<script>
class AppController {
constructor($document, $element, $scope) {
this.$document = $document;
this.$element = $element;
this.$scope = $scope;
this.mouseDown = this.mouseDown.bind(this);
this.mouseUp = this.mouseUp.bind(this);
this.$scope.$on("ui.layout.loaded", () => {
this.splitter = this.$element.find(".ui-splitbar");
this.splitter.on("mousedown", this.mouseDown);
});
this.overlay = angular.element("<div></div>");
this.overlay.css({
width: "100%",
height: "100%",
"z-index": 1,
position: "absolute",
top: 0,
left: 0
});
}
mouseDown() {
if (!this.splitViewContainer) {
this.splitViewContainer = this.$element.find("#splitViewContainer");
}
this.splitViewContainer.append(this.overlay);
this.$document.one("mouseup", this.mouseUp);
}
mouseUp() {
this.overlay.remove();
}
}
const app = angular.module("x", ["ui.layout"]);
app.controller("AppController", AppController);
</script>
</body>
</html>
Have simple question. Don't know why it's not working. Its should be red box that can fade in and fade out on click, but nothing happens. I'm trying to solve this problem for more then 2 days and i can't see the answer what I'm doing bad :/
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<link rel="stylesheet" type="text/css" href="/dojo/dojo.css" />
<link rel="stylesheet" type="text/css" href="/dijit/themes/tundra/tundra.css" />
<script src="dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
<script type="text/javascript">
require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
var fadeOutButton = dom.byId("fadeOutButton"),
fadeInButton = dom.byId("fadeInButton"),
fadeTarget = dom.byId("fadeTarget");
on(fadeOutButton, "click", function(evt){
fx.fadeOut({ node: fadeTarget }).play();
});
on(fadeInButton, "click", function(evt){
fx.fadeIn({ node: fadeTarget }).play();
});
});
</script>
</head>
<body>
<button id="fadeOutButton">Fade block out</button>
<button id="fadeInButton">Fade block in</button>
<div id="fadeTarget" class="red-block" style="margin-left: 20px; height: 300px; width: 200px; background-color: red; margin-top: 20px; text-align: center">
A red block
</div>
</body>
</html>
Something with a syntax probably, but i don't know what
On my page I have jQuery creating tabs, and I have Chart.js creating a line chart. They both work fine, except I cannot make Chart.js show the line chart inside a jQuery tab. I don't understand what it is about jQuery tabs that could be preventing the chart to display.
The only error I get from Chrome is "Uncaught TypeError: Cannot call method 'getContext' of null" referring to line 64.
How do I go about making this work?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/style.css" rel="stylesheet">
<!--Chart.js stuff-->
<script src="js/Chart.js"></script>
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<style>
canvas{
}
</style>
<!--jQuery/jQuery UI files-->
<link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<!--To enable jQuery elements-->
<script>
$(function()
{
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<script>
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
}
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
</script>
<div class="wrapper">
<div class="middle">
<div class="container">
<main class="content">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1">
<!--Trying to display the chart here is not working-->
<canvas id="canvas" height="450" width="600"></canvas>
</div>
<div id="tabs-2">
<p></p>
</div>
</div>
</main><!-- .content -->
</div><!-- .container-->
</div><!-- .middle-->
</div><!-- .wrapper -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
<title>Untitled Document</title>
<style>
canvas{
}
/*** tabs ****/
.etabs { margin: 0;
padding-left:20%; }
.etabs li
{display:inline-block;
width:auto;
padding:0 3% 2% 3%;
text-align:center;
}
.tab { display: inline-block;
zoom:1;
display:inline;
background:url(../images/li_border.fw.png) no-repeat right;
height:23px;
}
.tab a { font-size: 20px;
line-height: 2em;
display: block;
outline: none;
color:#D80000;
font-size:20px;
text-decoration:none;
}
.tab a:hover { text-decoration: none; }
.tab.active { color:#D80000;
position: relative;
border-color: #666; }
.tab a.active {
color:#0085B2; }
.tab-container .panel-container { background: #fff;
border: solid #666 1px;
padding: 10px;
-moz-border-radius: 0 4px 4px 4px;
-webkit-border-radius: 0 4px 4px 4px;
}
/*** tabs ****/
</style>
</head>
<body>
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'>Chart</li>
<li class='tab'>Bar chart</li>
</ul>
<div id="history" class="heig">
<h1>bar chart</h1>
<canvas id="canvas" height="450" width="600"></canvas>
</div>
<div id="business" class="heig">
<h1>pie chart</h1>
<canvas id="canvaspie" height="450" width="450"></canvas>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery.easytabs.js"></script>
<script src="Chart.js"></script>
<script>
$(document).ready(function(){ $('#tab-container').easytabs(); });
</script>
<script>
var barChartData = {
labels : ["Pass","Fail"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,0]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [0,47]
}
]
}
var myLine=new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
</script>
<script>
var pieData = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
];
var myPie = new Chart(document.getElementById("canvaspie").getContext("2d")).Pie(pieData);
</script>
</body>
</html>
I just posted an answer in a different related question in ChartJS charts not generating within tabs with example code and jsfiddle. I'm not using jquery.tabs but I was having the same problem with tabs I made myself. I realized the issue is that with display:none chartjs doesn't know the size of the div to render the chart. The ^ fiddle makes use of two fixes actually: using jquery.hide()/show() instead and temporarily hiding the area with a cover while they render (which I found was necessary in large pages).
The trick is to hide each tab as soon as you render the chart. Again, using tabs I made myself but this should fix your issue too if you're willing to adjust how you show/hide tabs.
The business (full code on the jsfiddle)
var ctx = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx).Bar(data1);
$('#tab1').hide();
var ctx = document.getElementById('chart2').getContext('2d');
var chart2 = new Chart(ctx).Line(data2);
$('#tab2').hide();
$('#tab1_btn').on('click',function(){
$('#tab1').show();
$('#tab2').hide()
})
$('#tab2_btn').on('click',function(){
$('#tab1').hide();
$('#tab2').show()
})
This works for me. The trick is generate the chart when the tab activated.
var chartIsShow = false;
$(function() {
$( "#Tabs1" ).tabs({
activate: function(event, ui) {
if(chartIsShow === false) {
var ctx = document.getElementById("chart").getContext("2d");
window.myLine = new Chart(ctx).Line(chart_data,{ animation : false, responsive : true });
chartIsShow = true;
}
}
});
});
download customized jquery-ui.js file and check minimum things (only tabs) and uncheck all other at http://jqueryui.com/download/ and include this js file instead of yours on this page
I have made this site/webapp and you can drag the onion out of the white space it's in and onto anywhere on the page but, when you click the button at the left side it disappears when the rest of the div it was/is in. How can I make it not disappear when the user drags it out of the white box?
I used jQuery to make it slide out and in:
$( "#button" ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
and this html to make it work:
<button id="button"><-></button>
<aside class="ingredients" id="toggle">
<section class="center">
<section class="onion" id="draggable"></section>
<section class="butter"></section>
</section>
</aside>
The sections use background images to make them appear:
.onion {
background-image: url(onion.png);
margin: 20px auto -300px auto;
}
.choppedonion {
background-image: url(choppedonion.png);
}
Try this in-built JQuery option for dragging.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draggable </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
find relevant documentation here
I want to set "div" alignment to center using javascript. The reason using javascript is not working of "margin:auto" in IE.
I have coded :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>
All Time Set Window
</title>
<script language="JavaScript" type="text/javascript">
$(document).ready(
var winSize = $(window).width();
var margin = winSize % 10;
function setMargin(){
$('#main').css({'margin-left':margin,'margin-right':margin});
}
)
</script>
</head>
<body>
<div id="main" align="center" style="width:1000px; height:100%; text-align:center; border: #000 solid 1px; margin:auto;">
<div id="inner1" style="width:100%; height:20%; background-color:#F8E0E0; float:top; border: #000 solid 1px;">
<div id="inner11" align="center">This is Header</div>
</div>
<div id="inner2" style="width:100%; height:60%; background-color:#F5F6CE; border: #000 solid 1px;">
<div id="inner21" align="center" style="width:70%; background-color:#E3F6CE; float:left;">This is Left Frame</div>
<div id="inner22" align="center" style="width:30%; background-color:#E0E0F8; float:right;">This is Right Frame</div>
</div>
<div id="inner3" style="width:100%; height:20%; float:bottom; background-color:#F8E0E0; border: #000 solid 1px;">
<div id="inner23" align="center">This is Footer</div>
</div>
</div>
</body>
</html>
But, still javascript code is not working properly. What can be the solution ?
Use this code
$(document).read( function($){ ... } )
instead of your code:
$(document).ready( ... )
Or even shorter:
$(function(){ ... })