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);
}
});
})
Related
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?
I've got a super simple site I'm experimenting with jquery. I've a CSS stylesheet but some of the properties are just getting ignored. For example, I'm setting the padding and border-radius properties. I checked the browser (firefox, though chrome is the same):
Error in parsing value for 'padding'. Declaration dropped. stylesheet.css:26:12
Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:28:15
Error in parsing value for 'border-radius'. Declaration dropped. stylesheet.css:33:15
Error in parsing value for 'width'. Declaration dropped. stylesheet.css:40:7
Error in parsing value for 'height'. Declaration dropped.
Even width and height, which I've actually managed to set for some other divs! It seems totally random, some properties just don't get parsed, such as the border-radius.
So the result (snippet below) looks like this:
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBasic);
$(document).ready(function() {
$('.square').mouseenter(function() {
$(this).animate({
width: '+=30px'
});
});
$('.square').mouseleave(function() {
$(this).animate({
width: '-=30px'
});
});
$('.square').click(function() {
$(this).toggle(1000);
});
var size = 10;
var graphData = [new Array(size),new Array(size)];
var column1 = graphData[0];
var column2 = graphData[1];
column1[0] = "Data1";
column2[0] = "Data2";
for (i = 1; i < column1.length; i++) {
column1[i] = i;
column2[i] = 2*i;
}
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['Data set 1'].concat(column1),
['Data set 2'].concat(column2)
],
types: {
'Data set 1': "step",
'Data set 2': "step"
}
}
});
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
var size = 40;
var column1 = new Array(size);
var last = 0;
for (i = 0; i < column1.length; i++) {
var newn = last + (0.5 - Math.random());
column1[i] = [i,newn];
last = newn;
}
data.addRows(column1);
var options = {
hAxis: {
title: 'Time2'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
#CHARSET "ISO-8859-1";
#red {
background-color:#FF0000;
}
#blue {
background-color:#0000FF;
}
#yellow {
background-color:#E2BE22;
}
#green {
background-color:#008800;
}
.blockspace {
height:70px;
width:400px;
margin-left:auto;
margin-right:auto;
padding:10;
border-radius:10;
background-color:#c8d8e8;
}
.square {
border-radius:10;
height:50px;
width:50px;
display: inline-block;
}
.chart {
width:350;
height:300;
display:inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Hello World!</title>
<!-- Load c3.css -->
<!-- <link rel="stylesheet" type="text/css" href="libraries/bootstrap-3.3.5-dist/css/bootstrap.css">-->
<link rel="stylesheet" type="text/css" href="libraries/c3-0.4.10/c3.css">
<link rel="stylesheet" type="text/css" href="libraries/nvd3-master/build/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="style/stylesheet.css"/>
<!-- Load d3.js and c3.js -->
<!-- <script src="libraries/c3-0.4.10/d3.v3.min.js" charset="utf-8"></script> -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="libraries/c3-0.4.10/c3.min.js"></script>
<script src="libraries/nvd3-master/build/nv.d3.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Load jquery and script -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="script/script.js"></script>
</head>
<body>
<h1>A big hello</h1>
<p>Why don't you enjoy these coloured squares:</p>
<div class="blockspace">
<div class="square" id="red"></div>
<div class="square" id="blue"></div>
<div class="square" id="yellow"></div>
<div class="square" id="green"></div>
</div>
<div class="chartExperiments">
<div class="chart" id="chart"></div>
<div class="chart" id="chart_div"></div>
</div>
</body>
</html>
You forget to define the unit of measure, so just add the unit of measure and the issue will be resolved.
.chart {
width:350px; <--px unit of measure
height:300px; <--px unit of measure
display:inline-block;
}
.square {
border-radius:10px; <--px unit of measure
height:50px;
width:50px;
display: inline-block;
}
I am expecting that by pressing the square div/button (3rd element on the page) a random number will appear under the element and the color of the element will also change. Unfortunately it seems that I have to press the button on the top of the page in order for this to happen and I can't figure out why?
my index.html
<html>
<head>
<script type="text/javascript" src="shared/jquery.js"></script>
<script type="text/javascript" src="shared/shiny.js"></script>
</head>
<body>
<input id="button" type="submit" name="submit" value="Press me!" class="action-button">
<p><div id="text" class="shiny-text-output" style="width: 150px; height: 25px; border: 1px solid black;"></div>
<p><div id="mydiv" style="width: 50px; height: 50px;"></div>
<pre id="results" class="shiny-text-output"></pre>
</body>
<script type="text/javascript">
// send data to shiny server
document.getElementById ("mydiv").onclick = function() {
var number = Math.random();
Shiny.onInputChange ("mydata", number);
};
// handlers to receive data from server
Shiny.addCustomMessageHandler ("myColorHandler",
function (color) {
document.getElementById ("mydiv").style.backgroundColor = color;
}
);
</script>
</html>
my server.R
shinyServer (function (input, output, session)
{
observe ({
x = input$button;
output$text = renderText ({
if (! is.null (x))
{
if (x %% 2 == 0) { paste (x, ": you are even", sep=""); }
else { paste (x, ": you are odd", sep=""); }
}
})
});
output$results = renderPrint ({
input$mydata;
})
observe ({
input$mydata;
color = rgb (runif (1), runif (1), runif (1));
session$sendCustomMessage (type="myColorHandler", color);
});
})
Change type="submit" to type="button" on your button. Currently your button is acting as a submitButton rather then an actionButton
<html>
<head>
<script type="text/javascript" src="shared/jquery.js"></script>
<script type="text/javascript" src="shared/shiny.js"></script>
</head>
<body>
<input id="button" type="button" name="submit" value="Press me!" class="action-button">
<p><div id="text" class="shiny-text-output" style="width: 150px; height: 25px; border: 1px solid black;"></div>
<p><div id="mydiv" style="width: 50px; height: 50px;"></div>
<pre id="results" class="shiny-text-output"></pre>
</body>
<script type="text/javascript">
// send data to shiny server
document.getElementById ("mydiv").onclick = function() {
var number = Math.random();
Shiny.onInputChange ("mydata", number);
};
// handlers to receive data from server
Shiny.addCustomMessageHandler ("myColorHandler",
function (color) {
document.getElementById ("mydiv").style.backgroundColor = color;
}
);
</script>
</html>
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 a JQuery select component and a javascript function to handle the stop event:
<script type="text/javascript">
$("#selectable").selectable({
stop: function() {
$(".ui-selected", this).each(function(i, selected) {
if ($(selected).text() == "Google") {
$("#openid_identifier").val("https://www.google.com/accounts/o8/id");
}
else if ($(selected).text() == "Yahoo") {
$("#openid_identifier").val("http://yahoo.com/");
}
});
}
});
</script>
The script works fine in firefox and chrome but not in IE7/8. It is normally supposed to send a string to the openid_identifier textbox once the google or yahoo select box is clicked.
Any ideas how to get this to work in IE?
right I took another look at the code, and I realised I made a bit of a mistake oops!
This is some cleaner code for you, it just removes all white space:
<script type="text/javascript">
$(function() {
$("#selectable").selectable({
stop: function(event, ui) { $(".ui-selected", this).each(function(i, selected) {
if($(selected).html().replace(/\s/g, "") == "Google") {
alert("https://www.google.com/accounts/o8/id");
}
else if ($(selected).html().replace(/\s/g, "") == "Yahoo") {
alert("http://yahoo.com/");
}
});
}
});
});
</script>
Looks like Text isnt liked by IE
try this instead:
<script type="text/javascript">
$("#selectable").selectable({
stop: function() {
$(".ui-selected", this).each(function(i, selected) {
if ($(selected).html() == "Google") {
$("#openid_identifier").val("https://www.google.com/accounts/o8/id");
}
else if ($(selected).html() == "Yahoo") {
$("#openid_identifier").val("http://yahoo.com/");
}
});
}
});
</script>
That worked for me when I tried your code
EDIT:
here is the code I used to test with
<html>
<head>
<html>
<head>
<meta charset="UTF-8" />
<title>make layout</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<style type="text/css">
.testdiv { background: silver; float:left;margin:0;padding:0;}
</style>
</head>
<body>
<style type="text/css">
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script type="text/javascript">
$(function() {
$("#selectable").selectable({
stop: function(event, ui) { $(".ui-selected", this).each(function(i, selected) {
alert($(selected).html());
if($(selected).text() == "Google") {
alert("https://www.google.com/accounts/o8/id");
}
else if ($(selected).text() == "Yahoo") {
alert("http://yahoo.com/");
}
});
}
});
});
</script>
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">Google</li>
<li class="ui-widget-content">Yahoo</li>
</ol>
</div>
</body>
</html>
It looks like the issue was $(selected).html() returned "Google " (with a space) in ie7 but returned "Google" in ie8, firefox and chrome.
Background: I tried the exact html as James Studdart's answer which worked under ie8 but under IE7 the if($(selected).html() == "Google") statement returned false every time and even after trying .text, .val, .html etc... and different machines/configs. I then tried creating a variable with the .html value as such: var chosen = $(selected).html(). This returned "Google " in IE7. To fix this mysterious IE7 space character I modified the script to ensure the space didn't affect the result:
<script type="text/javascript">
$("#selectable").selectable({
stop: function() {
$(".ui-selected", this).each(function(i, selected) {
var chosen = $(selected).html();
var subSection = chosen.substring(4, 0);
if (subSection == "Goog") {
$("#openid_identifier").val("https://www.google.com/accounts/o8/id");
}
else if (subSection == "Yaho") {
$("#openid_identifier").val("http://yahoo.com/");
}
});
}
});