I have a less file which requests 7 external stylesheet and script for single page. I have attached screenshot for more details.
Screenshot
Code as below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="JS/jquery-1.10.2.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="JS/bootstrap.js" type="text/javascript"></script>
<script src="JS/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="JS/jquery-1.7.2.min.js"></script>
<link rel="shortcut icon" href="Images/favicon.ico" />
<link rel="icon" href="Images/favicon.ico" />
<link rel="stylesheet/less" type="text/css" href="css/CubeCss/CubeMetropolis.less" />
<script src="JS/less.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
if (document.getElementById("SelectedTheme").value == 'Office2010Black') {
less.modifyVars
({
'#baseColor': "#828282",
'#baseActiveColor': "#f2f5f8",
'#baseBg': "#f2f5f8"
});
}
if (document.getElementById("SelectedTheme").value == 'Youthful') {
less.modifyVars
({
'#baseColor': "#009688",
'#baseActiveColor': "#68d2c8",
'#baseBg': "#ecfffd"
});
}
else if (document.getElementById("SelectedTheme").value == 'Metropolis') {
less.modifyVars({
'#baseColor': "#EA9B41",
'#baseActiveColor': "#ffa400",
'#baseBg': "#fff1d9"
});
}
else if (document.getElementById("SelectedTheme").value == 'PlasticBlue') {
less.modifyVars({
'#baseColor': "#168ED7",
'#baseActiveColor': "#52beff",
'#baseBg': "#daf1ff"
});
}
else if (document.getElementById("SelectedTheme").value == 'RedWine') {
less.modifyVars({
'#baseColor': "#ec4b4b",
'#baseActiveColor': "#d26469",
'#baseBg': "#f9e7e7"
});
}
else if (document.getElementById("SelectedTheme").value == 'Office2003Olive') {
less.modifyVars({
'#baseColor': "#8da02a",
'#baseActiveColor': "#cfe465",
'#baseBg': "#f3f7e1"
});
}
});
</script>
</head>
I need help to assign variable value before loading the page, now it fluctuates at first and shows default color (i.e. black) then changes to theme selected color.
My CSS Code:
#baseColor:~'';
.dxpnl-btnSelected.dxpnl-btnPressed .dxWeb_pnlExpandArrowTop_Metropolis
{
background-color: #baseColor;
}
Where should use.modifyVars so it won't fluctuate?
Related
I have a main-app element in which I have a questions-list element. Firebase query in main-app fetches an array and passes it to questions-list. I want all of the individual paper-cards to have cascaded slide-up-animation and fade-in-animation
main-app.html
<firebase-query
id="query"
path="/Questions"
order-by-child="QTimestamp"
data="{{questions}}">
</firebase-query>
<neon-animated-pages role="main" selected="[[data.page]]" attr-for-selected="name">
<questions-list name="Questions" questions="{{questions}}"></questions-list>
</neon-animated-pages>
questions-list.html
<iron-list hidden$="[[!questions]]" items="[[questions]]" as="question" scroll-target="Questions-container" id="questionslist">
<template>
<div>
<paper-card animated elevation=1 id="qcard">
<div id="cuicontainer_qcard" class="cuicontainer">
<paper-avatar id="cui" label="[[question.Username]]" src="[[question.photoURL]]"></paper-avatar>
<template is="dom-if" if="{{!mobileview}}" restamp="true">
<paper-tooltip id="vcardforqcard" for="cui" position="right" marginTop="14">
<profile-vcard name="[[question.Username]]" image="[[question.photoURL]]" description="[[ud.description]]" stars="[[ud.Stars]]"></profile-vcard>
</paper-tooltip>
</template>
</div>
<p id="q" class="q">
<iron-selector selected="{{data.page}}"
attr-for-selected="name">
<template is="dom-if" if="{{mobileview}}" restamp="true">
<a name="Question" id="qlink" style="text-decoration: none;color: black ;" href="#/Question/[[question.qis]]/[[question.$key]]">[[question.qis]]</a>
</template>
<template is="dom-if" if="{{!mobileview}}" restamp="true">
<a name="Question" id="qlink" style="text-decoration: none;color: rgb(111, 111, 111);" href="#/Question/[[question.qis]]/[[question.$key]]">[[question.qis]]</a>
</template>
</iron-selector>
</p>
</paper-card>
</div>
</template>
</iron-list>
<script>
(function() {
'use strict';
Polymer({
is: 'questions-list',
behaviors: [
Polymer.IronResizableBehavior,
Polymer.NeonSharedElementAnimatableBehavior,
Polymer.NeonAnimationRunnerBehavior
],
properties: {
animationConfig: {
value: function() {
return {
'entry': [{
name: 'fade-in-animation',
node: this,
// timing: {delay: 200}
}, {
name: 'cascaded-animation',
animation: 'fade-in-animation',
timing: {delay: 5000},
}],
'exit': [{
name: 'slide-left-animation',
node: this
}, {
name: 'fade-out-animation',
node: this
}]
}
}
},
questions: {
type: Object,
notify: true,
reflectToAttribute: true,
},
},
ready: function() {
this.async(function() {
var nodeList = document.querySelectorAll('#qcard');
// console.log(nodeList);
this.animationConfig['entry'][0].nodes = Array.prototype.slice.call(nodeList);
});
},
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
show: function() {
this.opened = true;
this.style.display = 'block';
this.playAnimation('entry');
},
hide: function() {
this.opened = false;
this.playAnimation('exit');
},
_onNeonAnimationFinish: function() {
if (!this.opened) {
this.style.display = 'none';
}
},
});
})();
imports in questions-list
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/q-card/q-card.html">
<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/animations/slide-from-left-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/slide-from-bottom-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/slide-left-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/slide-up-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/slide-down-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/cascaded-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/transform-animation.html">
<link rel="import" href="../../bower_components/neon-animation/animations/hero-animation.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../../bower_components/neon-animation/web-animations.html">
<link rel="import" href="../../bower_components/neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="../../bower_components/iron-list/iron-list.html">
<link rel="import" href="../../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="stylesheet" href="../../styles/main.css">
<link rel="import" href="../../styles/shared-styles.html">
Right now it gives this error:
error
What should i do to make the paper-cards run cascaded-animation when data loads
You need to import web-animations polyfill as well. It will be in the same folder as of neon-animation.
<link rel="import" href="../../neon-animation/web-animations.html">
Can you please help me to implement Skobbler map in ionic based app ?
thanks
by using following code i can draw map.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="js/skobbler-2.0.js"></script>
<style>
#map {
height: 500px;
}
</style>
<div id="map"></div>
<script>
function initMap() {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
console.log(pos.lat + "/" +pos.lng);
// alert(pos.lat + "/" +pos.lng);
mytest(pos.lat,pos.lng);
});
}
window.setInterval(function(){
initMap()
}, 1000);
var mymap = '';
var marker = '';
function mytest(lat,long)
{
if(mymap == '' || marker == '')
{
mymap = L.skobbler.map('map', {
apiKey: 'API_KEY',
mapStyle: 'day',
bicycleLanes: true,
onewayArrows: true,
pois: 'all',
primaryLanguage: 'en',
fallbackLanguage: 'en',
mapLabels: 'localNaming',
retinaDisplay: 'auto',
zoomControl: true,
zoomControlPosition: 'top-left',
center: [lat,long],
zoom: 18,
});
marker = L.marker([lat,long]).addTo(mymap);
}
else
{
mymap.center = [lat,long];
marker.remove(marker);
marker = L.marker([lat,long]).addTo(mymap);
}
}
</script>
</head>
<body>
</body>
</html>
This code produces two elements where in slow motion I write the values of the variable of a for loop. The problem is that I thought the two writing operations would happen concurrently and not one after the other, as it currently happens. How can I get the two elements to update concurrently?
my index.html
<html>
<head>
<script type="text/javascript" src="shared/jquery.js"></script>
<script type="text/javascript" src="shared/shiny.js"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
<style>
.shiny-text-output { border: 1px solid green; }
</style>
</head>
<body>
<pre id="results2" class="shiny-text-output"></pre>
<pre id="results4" class="shiny-text-output"></pre>
</body>
<script type="text/javascript">
Shiny.addCustomMessageHandler ("myCallbackHandler",
function (value) {
document.getElementById ("results2").innerHTML = value;
}
);
Shiny.addCustomMessageHandler ("myOtherCallbackHandler",
function (value) {
document.getElementById ("results4").innerHTML = value;
}
);
</script>
</html>
my server.R
shinyServer (function (input, output, session)
{
observe ({
for (i in 1:3)
{
session$sendCustomMessage (type="myCallbackHandler", i);
Sys.sleep (2);
}
});
observe ({
for (i in 1:4)
{
session$sendCustomMessage (type="myOtherCallbackHandler", i);
Sys.sleep (1);
}
});
})
I'm new to this as you can see. I have a simple code but for some reason the dialog box never goes to the center of the screen and does not work on Safari. This is the complete code. It only start a message when any key is pressed. Can anybody help me please.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="B:/wamp/www/jquery/js/jquery-1.8.2.js"></script>
<link rel="stylesheet" href="B:/wamp/www/jquery/development-bundle/themes/base/jquery.ui.all.css">
<script src="B:/wamp/www/jquery/development-bundle/external/jquery.bgiframe-2.1.2.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.core.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="B:B:/wamp/www/jquery/development-bundle/ui/jquery.ui.draggable.js"></script>
<script src="B:B:/wamp/www/jquery/development-bundle/ui/jquery.ui.position.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.resizable.js"></script>
<script src="B:/wamp/www/jquery/development-bundle/ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="B:/wamp/www/jquery/development-bundle/demos/demos.css">
<script >
$(document).ready(function()
{
$("#text1").keyup(function()
{
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
});
});
</script>
<body>
<div id="dialog-message"></div>
<input type="text" id="text1"/>
</body>
</html>
You have jquery.ui.position.js, so...
$( "#dialog-message" ).dialog({
modal: true,
position: 'center',
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
...should work
I have following codes. It works perfectly in IE (GML and GeoJSON vector layer was loaded), but not in Firefox and Chrome without any errors noticed. Please help me to fix this problem.
Here is the code with GML vector layer (I just used built-in layer in Geoserver, so you can download and test it without any modification):
<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- The magic comes here -->
<script type="text/javascript">
var map;
function init() {
var bounds = new OpenLayers.Bounds(
-124.73142200000001, 24.955967,
-66.969849, 49.371735
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.22563114453125,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map("ch3_wfs",options);
var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
{
layers: "topp:states",
});
map.addLayer(baseLayer);
var statesLayer = new OpenLayers.Layer.Vector("States", {
protocol: new OpenLayers.Protocol.HTTP({
url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50",
format: new OpenLayers.Format.GML()
}),
strategies: [new OpenLayers.Strategy.Fixed()],
});
map.addLayer(statesLayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0,0), 2);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
</body>
</html>
Here is the code with GeoJSON vector layer (I just used built-in layer in Geoserver, so you can download and test it without any modification):
<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- The magic comes here -->
<script type="text/javascript">
var map;
function init() {
var bounds = new OpenLayers.Bounds(
-124.73142200000001, 24.955967,
-66.969849, 49.371735
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.22563114453125,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map("ch3_wfs",options);
var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
{
layers: "topp:states",
});
map.addLayer(baseLayer);
var statesLayer = new OpenLayers.Layer.Vector("States", {
protocol: new OpenLayers.Protocol.HTTP({
url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=json",
format: new OpenLayers.Format.GeoJSON()
}),
strategies: [new OpenLayers.Strategy.Fixed()],
});
map.addLayer(statesLayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0,0), 2);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
</body>
</html>