Dynamic less variable values using javascript - Browser compatability issue - javascript

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"

Related

Javascript don't work for loaded content

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.

Make the command bar unresponsive

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.

Image is not capturing correctly in dropdown icon using html2canvas

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.

Turn.js (flipbook effect) is not working

Sorry, but I am not getting where actually I did the mistake (as I am a newbie to javascript). I wrote this code for the flipbook effect using turn.js with the help of a tutorial. But the output in a browser is just showing the blank screen. I guess, there must be an awkward mistake but m still not getting it . plz help.
<html>
<head>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="turn.js"></script>
<style type="text/css">
body{
background: #9988aa;
}
#book{
width: 1152px;
height: 400px;
}
#book .turn-page{
background-color: #ddd;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id="book">
<div style="background-image:url('images/1.jpg');"></div>
<div style="background-image:url('images/2.jpg');"></div>
<div style="background-image:url('images/3.jpg');"></div>
<div style="background-image:url('images/4.jpg');"></div>
<div style="background-image:url('images/5.jpg');"></div>
<div style="background-image:url('images/6.jpg');"></div>
<div style="background-image:url('images/7.jpg');"></div>
<div style="background-image:url('images/8.jpg');"></div>
</div>
<script type="text/javascript">
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50;
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});
</script>
</body>
</html>
Hi there is small error in your code, kindly just remove semi colon from following line.
elevation:50;
It should be like following, just remove semi colon. Hope it will resolve your issue.
$(window).ready(function(){
$('#book').turn({
display:'double',
acceleration: true,
elevation:50
});
});
$(window).bind('keydown',function(e){
if (e.keyCode==37)
$('#book').turn('previous');
else if (e.keyCode==39)
$('#book').turn('next');
});

Html not connecting to js

So I'm trying to make a slideshow using js, I have asked for help on that and it's working in JSFiddle, but it won't work in my local environment, so I'm wondering if I have some wording or something wrong somewhere that someone could help me see.
HTML5
<!DOCTYPE html>
<html>
<head>
<title>slider</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="slider.js"></script>
</head>
<body onload="slider()">
<div class="slider">
<img id="1" src="slide_image1.jpg" alt="TV Deals"/>
<img id="2" src="slide_image2.jpg" alt="Furniture Deals"/>
<img id="3" src="slide_image3.jpg" alt="Electronic Deals"/>
</div>
</body>
</html>
CSS3
.slider {
width: 990px;
height: 270px;
overflow: hidden;
margin: 30px auto;
background-image: url('ajax-loader.gif');
background-repeat: no-repeat;
background-position: center;
}
.slider img{
border: 0;
display: none;
}
JavaScript
$(document).ready(function () {
slider();
});
function slider(){
var count = 1;
$('#1').show();
(function slide(){
$('.slider img').hide();
if (count > 3) {count = 1;} // makes this a loop
$('#'+count).fadeIn('slow');
count += 1;
setTimeout(function () {
slide();
}, 5000);
})();
}
Is my "onload" command correct? I'm using Web Expression as a designer and I actually went in through the url path for each and ever image and selected the image, so I know the paths are correct (did the same thing for the js). The JavaScript itself is called "slider.js" could this affect my code in anyway? This is my first attempt at doing one of these so I have no idea what's causing it to go wrong.
When you say local environment, is it running on your computer under the file:// protocol? (i.e., when you look at it is it something like file://C:\My\Files\index.html) or with a server running over the http:// protocol?
If it is the former, you need to change the script srcs from // to http:// explicitly. // means "use whatever protocol the page is using", so that would mean it tries file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, which obviously doesn't exist.
That's the only thing that jumps out at me as being off and is a common mistake when working locally.

Categories

Resources