I looked and tried using scripts I found online to set a scheduled colorbox, so far it only worked in Chrome. Below is the script I'm currently using now. I know this must be very basic, but I hope somebody might help or point me the right direction.
UPDATE
What I wanted is to have a colorbox displayed every time when people visits, the colorbox will disable it's function when it pass the "ScheduleDate", now only chrome will display the colorbox as planned, ie, firefox and safari seems to not recognize the script. There's no error in the browser console.
<script>
today = new Date();
today_year = today.getFullYear();
today_month = today.getMonth()+1;
today_date = today.getDate();
today_hours = today.getHours();
today_minutes = today.getMinutes();
today_seconds = today.getSeconds();
var CurrentDate = today_year+"-"+today_month+"-"+today_date+" "+today_hours+":"+today_minutes+":"+today_seconds;
var ScheduleDate = "2014-10-12 00:00:00";
if ( (Date.parse(CurrentDate)).valueOf() <= (Date.parse(ScheduleDate)).valueOf())
{
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"300px", height:"250px", open:true});
});
}
</script>
There are two things that I need to do to get your codes to work in FireFox:
Wrap all your javascript codes within the $(document).ready().
Change the way your CurrentDate is constructed and compared.
Run the stack snippet below or refer to this jsfiddle. Also, I took the CSS from one of their examples.
// javascript
$(document).ready(function() {
var currentDate = new Date();
var scheduleDate = new Date(2014, 9, 12, 0, 0, 0);
if (currentDate <= scheduleDate) {
$.colorbox({
iframe: true,
innerWidth: "300px",
innerHeight: "300px",
open: true
});
}
});
<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox-min.js"></script>
Related
I'm trying to do a redirect after set a $storage var, using ngStorage module. This is not working, and I can't find out why.
My code is below:
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script>
angular.module('app', [
'ngStorage'
]).
controller('Ctrl', function (
$scope,
$localStorage
) {
$scope.$storage = $localStorage.$default({
array: []
});
$scope.Redirect1 = function () {
$scope.$storage.array = ['pineapple', 'pear', 'peach'];
window.location.href = 'http://localhost:61267/Page1.aspx?q=fruitsp';
};
$scope.Redirect2 = function () {
$scope.$storage.array = ['blackberry', 'banana', 'blueberry'];
window.location.href = 'http://localhost:61267/Page1.aspx?q=fruitsb';
};
});
</script>
</head>
<body ng-controller="Ctrl">
{{$storage|json}}
<br/>
<button ng-click="Redirect1();">Change Array</button><br/>
<button ng-click="Redirect2();">Change Array2</button>
</body>
</html>
If I remove the window.location rows, it work normally.
Am I doing something in the wrong order?
This problem has been answered here by #claireablani.
It seems that page reloading occurs before modification on localStorage has been applied.
You can use a fork of ngStorage library by #raynode (Github here, not available on bower) which add a $save() method to ensure modification had been applied.
$localStorage.$apply();
did the trick for me
thanks to this github issue comment
var setLocalStorage = function (token, uname)
{
$localStorage.token = token;
$localStorage.name = uname;
}
$timeout(setLocalStorage(token, userForm.uname), 500);
Module Used : ngStorage
OR
$localStorage.apply();
//Just after adding values in localstorage use this. No timeout required.
I also ran into this issue. I was trying to update localStorage in a service and it didn't seem to work. At least not inside a promise. Tried $localStorage.$apply() and $timeout there, but it didn't work. I had to move the code inside my controller to make this work.
$scope.$localStorage.myVar = 'test';
$scope.$localStorage.$apply();
$state.go('app.home');
I wanted to be able to change the type of charts made with dimple.js using variables.
I am able to do it using local variables, set up manually, thanks to this post: change chart type in dimple.js to automate chart production
However, when I am trying to go a step further and place all my variables in a configuration file, it does no longer work anymore. I'm pretty sure I'm missing something with the "objects", but can't figure what.
Sorry, it might be an obvious thing I'm missing, but I'm a data analyst, not a developer and quite a rookie concerning d3.js and dimple.js.
My code: (see below) http://plnkr.co/McEDMkovXaQpsn5z9mmV
I have put 2 html pages : "Manual" is where it works with local variables declared manually.
"Dynamic" is the same code except I've put the variables in a configuration file and I read the configuration file using D3.csv function (a line par chart). It does not work.
Thank you for your help!
Code : http://plnkr.co/McEDMkovXaQpsn5z9mmV
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>
<script type="text/javascript" src="script.js"</script>
</head>
<body>
<div id="chartContainer">
<script type="text/javascript">
var chartType1 = "bar";
var chartDimple1 = dimple.plot[chartType1];
var chartSerie1 = "Channel";
var chartGroup1 = ["Month", "Channel"];
var chartMeasure1 = "Unit Sales";
var filterField1 = "Owner";
var filterValues1 = ["Aperture", "LexCorp"];
var svg1 = dimple.newSvg("#chartContainer", 590, 400);
d3.csv("data.csv", function (data1) { //d3.tsv("data/example_data.tsv", function (data) {
var data1 = dimple.filterData(data1, filterField1, filterValues1) // dataFiltered = dimple.filterData(data, "Owner", ["Aperture", "LexCorp"])
var myChart1 = new dimple.chart(svg1, data1);
myChart1.setBounds(60, 30, 510, 305)
var x1 = myChart1.addCategoryAxis("x", chartGroup1); // var x = myChart.addCategoryAxis("x", ["Channel" , "Month"]);
x1.addOrderRule("Date");
var y1 = myChart1.addMeasureAxis("y", chartMeasure1);
myChart1.addSeries(chartSerie1, chartDimple1); // myChart.addSeries("Channel", dimple.plot.bar);
myChart1.addLegend(60, 10, 510, 20, "right");
myChart1.draw();
});
</script>
</div>
<div id="chart2"></div>
<div id="chart3"></div>
<script type="text/javascript">
pageLayout(configFile);
</script>
</body>
</html>
I'm having a tough time getting the example working, lots of files doing lots of things. I think the basic problem is that when you import the dsv config file, your group still comes back as a string like "["Month", "Channel"]". When you pass this to chart.addCategoryAxis it's going to look at it like a string rather than an array. You should be able to do
chart.addCategoryAxis(JSON.parse(d.chartGroup));
and have it correctly set it as an array. This only works if you know it's going to be an array, if it may only be one string you would need to check beforehand to know if you need to parse it or not.
Also some of the code I don't think works on that site because it's still looking for the static dsv/csv files in a data/ directory that isn't there, but I think the string/array issue is probably the one holding you up.
I got a lot of help regarding this issue earlier but the issue hasnt been completely resolved for me. I am stuck at another thing now. I am returning a response from my controller and receiving it in the Index.cshtml like this:
var rData = #Html.Raw(Json.Encode(Model.WarehouseResults));
Now I need to assign this data to slickgrid somewhat like this:
<script type="text/javascript">
var from = 0, to = from + rData.length;
//data.length = parseInt(resp.total);
for (var i = 0; i < rData.length; i++) {
data[from + i] = rData[i];
data[from + i].index = from + i;
}
onDataLoaded.notify({ from: from, to: to });
grid = new Slick.Grid("#myGrid", rData, columns, options);
etc etc...
</script>
Now, the problem is, I dont know where exactly to receive the data. As in, where do I put this line:
var rData = #Html.Raw(Json.Encode(Model.WarehouseResults));
If I put it above the tag (but inside the #Scripts section), I get an error saying rData is not defined. Then when I put it inside the tag, I get a syntax error saying: "IHtmlString HtmlHelper.Raw(String value) (+1 overloads) returns markup that is not HTML encoded".
Where exactly should this line go? Is there a standard format for a cshtml page, like which sections go where? If so, can someone provide a link or something for it?
Using your code in MVC 5:-
var rData = #Html.Raw(Json.Encode(Model.WarehouseResults));
I find that the semi-colon at the end of the line causes a syntax error.
A solution which I am currently using (my example is for JQuery autocomplete) which should also work for your example is as follows.
Create the javascript variable code completely within the HtmlHelper. This is placed within the view's #section Scripts.
#section Scripts {
<script type="text/javascript">
#Html.Raw("var existingPersons = " + Json.Encode(this.Model.ExistingPersons) + ";" )
#Html.Raw("var settlementInformation=" + Json.Encode(this.Model.SettlementInformation) + ";")
$(function () {
$("#personName").autocomplete({
source: existingPersons
});
$("#settlementInformation").autocomplete({
source: settlementInformation
});
});
</script>
}
At the client side this appears in the <head> element as expected
<script type="text/javascript">
var existingPersons = ["Person 1","Person 2"];
var settlementInformation=["Settlement Type 1"];
$(function () {
$("#personName").autocomplete({
source: existingPersons
});
$("#settlementInformation").autocomplete({
source: settlementInformation
});
});
</script>
I've not tried this in other versions of MVC
What is the best way to show the resulting css from files compiled with less.js in the client.
In other words, how can i fill a div with the resulting css?
I need to display the result on the page, any way to do this?
THanks!
update
As already pointed out in the comments by #ertrzyiks you should replace less.parse with less.render for Less v 2.x:
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
var options = {}
lessCode = xmlhttp.responseText;
less.render(lessCode, options, function (error, output) {
if(!error) {
document.getElementById('lesscode').innerHTML = output.css;
}
else document.getElementById('lesscode').innerHTML = '<span style="color:red">' + error + '</span>';
});
}
};
xmlhttp.open("GET","important.less",true);
xmlhttp.send();
see also: How to detect and print changing variables LESS
But since Less v2:
In the browser, less.pageLoadFinished will be a promise, resolved when
less has finished its initial processing. less.refresh and
less.modifyVars also return promises.
When you compile filename.less the compiled CSS code has been inject in a style tag with id less:filename, so to get the compilled CSS code you can also use:
less.pageLoadFinished.then(
function() {
console.log(document.getElementById('less:filename').innerHTML);
}
);
Notice that the last example also applies the compiled CSS code on the page.
--end update
I expected that running something such as the following was possible:
<link rel="stylesheet/less" type="text/css" href="important.less">
<script src="less-1.7.3.js" type="text/javascript"></script>
<script>
css = less.tree.toCSS();
console.log(css);
</script>
unfortunately this does not work, but you can use the following code to get what you want:
<script src="less-1.7.3.js" type="text/javascript"></script>
<script>
var lessCode = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
lessCode = xmlhttp.responseText;
new(less.Parser)().parse(lessCode, function (e, tree) {
document.getElementById('lesscode').innerHTML = tree.toCSS().replace(/\n/g,"<br>");
});
}
};
xmlhttp.open("GET","important.less",true);
xmlhttp.send();
</script>
With in the body section of your HTML:
<div id="lesscode"></div>
See also: Combining two .less files in one and How to open a local disk file with Javascript?
I just use Chrome's Inspect Element.
Right click on the element CSS you are looking for, Right click and choose Inspect element. On the right you will find the compiled CSS in Styles. Hope it helps
You have two options to do this, Internet Explorer or Firefox.
Let's start with Firefox. If you install the web developer toolbar, you get a menu option that's labelled CSS. Clicking on this gives you a few options and if you choose View CSS, you are taken to a new tab that shows you all of the styles for the page, grouped by their location and you should see a section with the CSS that has been generated by LESS and dynamically applied to the elements.
IE also has a Web Developer option and if you use the toolbar to inspect an element, you can then use the short cut 'Ctrl + T' which will bring up the page source with the computed styles.
The Firefox solution is better, as you can see exactly which styles have been provided by LESS whereas IE just lumps it all together.
There is a third option, and that is to compile the CSS server side!
The Google Custom Search integration only includes numbered page links and I cannot find a way to include Next/Previous links like on a normal Google search. CSE used to include these links with their previous iframe integration method.
I stepped through the javascript and found the undocumented properties I was looking for.
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('GOOGLEIDGOESHERE');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.setSearchCompleteCallback(null,
function() { searchCompleteCallback(customSearchControl) });
customSearchControl.draw('cse');
}, true);
function searchCompleteCallback(customSearchControl) {
var currentPageIndex = customSearchControl.e[0].g.cursor.currentPageIndex;
if (currentPageIndex < customSearchControl.e[0].g.cursor.pages.length - 1) {
$('#cse .gsc-cursor').append('<div class="gsc-cursor-page">Next</div>').click(function() {
customSearchControl.e[0].g.gotoPage(currentPageIndex + 1);
});
}
if (currentPageIndex > 0) {
$($('#cse .gsc-cursor').prepend('<div class="gsc-cursor-page">Previous</div>').children()[0]).click(function() {
customSearchControl.e[0].g.gotoPage(currentPageIndex - 1);
});
}
window.scrollTo(0, 0);
}
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
I've been using this to find the current page:
ctrl.setSearchCompleteCallback(null, function(gControl, gResults)
{
currentpage = 1+gResults.cursor.currentPageIndex;
// or, here is an alternate way
currentpage = $('.gsc-cursor-current-page').text();
});
And now it's customSearchControl.k[0].g.cursor ... (as of this weekend, it seems)
Next time it stops working just go to script debugging in IE, add customSearchControl as a watch, open the properties (+), under the Type column look for Object, (Array) and make sure there is a (+) there as well (i.e. contains elements), open[0], and look for Type Object, again with child elements. Open that and once you see "cursor" in the list, you've got it.