I'm try to load the page content via the JQuery load() method.
Here is the code
$(window).ready(function() {
$('#content').load('views/login.html');
});
.mdl-layout {
align-items: center;
justify-content: center;
}
.mdl-layout__content {
padding: 24px;
flex: none;
}
<link href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<main class="mdl-layout__content" id="content">
</main>
</div>
(Sorry but i can't add the login.html to the snippet editor. It's a login form powerd by the mdl framework:/)
Now the Javascript functions for the form element from mdl does not work correctly. There are no errors in the developer console. I've also tried to reload all my javascript files after the load request by jquery?
Does anyone have any idea what's going wrong with my script?
I've solved this problem by myself. Here the solution:
I simply call the mdl javascript after the load method again.
$.getScript('https://code.getmdl.io/1.3.0/material.indigo-blue.min.css');
Now it works perfectly. Thanks to all!
if code you provided is copied from your .html file then structure is not good.
Here is working version:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<style>
.mdl-layout {
align-items: center;
justify-content: center;
}
.mdl-layout__content {
padding: 24px;
flex: none;
}
</style>
<link href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<main class="mdl-layout__content" id="content">
</main>
</div>
<script type="text/javascript">
$(window).ready(function() {
$('#content').load('views/login.html');
});
</script>
</body>
</html>
CSS styles needs to be enclosed with tags, and Javascript code must be closed within tags
Hope this helps you.
Related
so here is the thing i have a block of html code that needs to be replaced when a button is clicked. Its no big deal using
$('div.myCustomReplacer').replaceWith(newHTML);
but i also need to render a django-form {{ form }} in the new HTML
when i simply use
<div class="NewDiv"> {{ form }} </div? the html is rendered as "{{ form }}" because of those quotes the form is not rendered.
So how i do remove those ?
sorry just new to JavaScript.
I don't think you can achieve it like that. Remember that the form is added when html is rendered in the server, so basically {{form}} doesn't exist in client.
No worries, there are several simple ways to reach you goal just using simple JavaScript. One way is to simple let server inject the form, and just make it visible when user click button. Take a look at the example I made for you.
document.getElementById('showBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'block';
});
document.getElementById('hideBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'none';
});
html, body {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
button {
margin: 1rem;
}
section {
margin: 1rem;
}
section span {
background-color: lightcoral;
font-size: small;
padding: .5rem;
}
<!doctype html>
<html lang="en">
<head>
<title>Hide Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<button id="showBtn">Show Form</button>
<button id="hideBtn">Hide Form</button>
<section>
<div id="targetDiv" style="display: none;">
<h2>Form <span> (a moment ago I was just hidden)</span></h2>
<form>
<label for="someInput">Bla bla</label>
<input id="someInput" type="text"/>
</form>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>
I want to use office-ui-fabric with angularjs, so I am trying to use ng-office-ui-fabric.
In the following example, when the wide of the screen is limited, we can observe that the span (eg, 3rd, 14) are hidden. This is not what I want; I want them to be always displayed no matter the width of the screen.
Does anyone know how to make the command bar unresponsive?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
<uif-command-bar>
<uif-command-bar-main>
<uif-command-bar-item>
<uif-icon uif-type="save"></uif-icon>
<span>3rd</span>
</uif-command-bar-item>
<uif-command-bar-item>
<span>14</span>
<uif-icon uif-type="chevronDown"></uif-icon>
</uif-command-bar-item>
</uif-command-bar-main>
</uif-command-bar>
</div>
<script type="text/javascript">
angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
.controller('YourController', function () {})
</script>
</body>
</html>
By default the text is set to not display in the css. Ie:
CommandBarItem .ms-CommandBarItem-commandText {
display: none;
}
Then they using media queries to only show those elements when the width is over 640px
ie:
#media only screen and (min-width: 640px)
fabric.components.min.css:6
.ms-CommandBarItem .ms-CommandBarItem-chevronDown, .ms-CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
You could override their styles by supplying your own that don't use media queries and just be sure that your css loads after their css (so it takes precedence). ie:
CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
Here is a sample app demonstrating this. Note that I had to add the styles in the head tag inline in a style tag b/c of how the inline editor loads its assets. Normally you would just load your own custom css in a link tag (make sure its loaded last).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
<style>
.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
.ms-CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
</style>
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
<uif-command-bar>
<uif-command-bar-main>
<uif-command-bar-item>
<uif-icon uif-type="save"></uif-icon>
<span>3rd</span>
</uif-command-bar-item>
<uif-command-bar-item>
<span>14</span>
<uif-icon uif-type="chevronDown"></uif-icon>
</uif-command-bar-item>
</uif-command-bar-main>
</uif-command-bar>
</div>
<script type="text/javascript">
angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
.controller('YourController', function() {})
</script>
</body>
</html>
This is how I figured this out. Using chrome dev tools, I right mouse clicked on the text and choose inspect. This shows the element and the styles associated with it. The default style was to have display: none; applied. When you resize the browser more than 640px wide, you'll see the media query being applied that now says to display: inline; the element.
I m having following code to convert image using html2canvas. It is working fine but the select tag icon (down arrow) is not coming when capture the image
<!DOCTYPE html>
<html>
<head>
<title>html2canvas</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<style>
button{
display:block;
height:20px;
margin-top:10px;
margin-bottom:10px;
}
.icon-diamond:before {
content: "\e943";
}
</style>
</head>
<body>
<div id="target">
<div style="position:relative;" class="noteclasscontainer" >
<span style="font-size: 60px;" class="glyphicon">
<span style="color:white;font-size: 21px; position: absolute; top: 16px;left:10px;">dd</span>
</span>
</div>
<div style="position:relative;" class="noteclasscontainer">
<select>
<option>1</option>
<option>1</option>
</select>
</div>
</div>
<button onclick="takeScreenShot()">to image</button>
<script>
window.takeScreenShot = function() {
html2canvas(document.getElementById("target"), {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width:320,
height:220
});
}
</script>
</body>
</html>
Image is capturing correctly but only the select icon is not coming properly.how to fix this issue ?
This is part of browsers default CSS, everything is not accessible to html2canvas, and it should not be (possible leak of privacy info on some OS).
Maybe this exact one could be tweaked for chrome, since chrome does expose some of its shadow selectors, but I don't even know if it is in the list, and anyway, since non-standards these selectors could change at any time in the future, and here is how it looks like on my FF :
So the best for you, is to create the dropdown entirely from scratch. This way all UAs will show the same, and html2canvas will be able to "snapshot" it.
Dynamically update less variables from javascript using less.modifyVars method. It works fine on chrome but not supported by Firefox and IE-11(i.e. color attribute value does not be applied on firefox and IE-11).
Using less.js for compilation, please refer the code and screenshot, I don't know where I did mistake.
// HTML Code
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="css/color.less" />
<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/less.js"></script>
<script type="text/javascript">
less.modifyVars({
'#color': 'blue'
});
</script>
</head>
<body>
<div class="row1" style="width: 250px; height: 250px;">box1</div>
<div class="row2" style="width: 250px; height: 250px;">box2</div>
</body>
</html>
//LESS Code(color.less)
#color:"red";
.row1
{
background-color:#color;
}
.row2
{
background-color:#color;
}
Error screenshot: "http://s8.postimg.org/ia9ki4nnp/Browser.png"
There seems to be padding around the sides of my website, and I cannot get rid of it. Any types of hints will be appreciated.
#introContainer{
background-color: #bdc3c7;
}
#navHeader{
background-color:#95a5a6;
}
#skillsHeader{
background-color:#3498db;
}
<!DOCTYPE html>
<html>
<head>
<title>Local</title>
</head>
<body>
<div id="introContainer">
</div>
<div id="navHeader">
</div>
<div id="skillsHeader">
</div>
</body>
</html>
To remove it add the following:
body { margin: 0; }
You could also search normalize.css or reset.css and add the style before your own style.