The tutorial at:
http://dev.jtsage.com/jQM-DateBox/demos/calendar/blackhigh.html
explains how to disable/highlight days in HTML.
Is there a neat way to do this at runtime - i.e with JavaScript, preferably without manually adding/removing classes?
You can set disable dates through js like this
$('#mydate').data('datebox').options.blackDates = ['2012-01-01','2012-01-06'];
and highlight dates like this
$('#mydate').data('datebox').options.highDates = ['2012-01-10','2012-01-12'];
Demo here - http://jsfiddle.net/jj8th/
Related
I am trying to automate the scrolling of expanded SharePoint calendar so the current date/week is in view on a display with limited resolution.
I have no JS knowledge, but tried to use JS to scroll by referring to the today's date CSS class name. It doesn't seem to do the job.
What I tried is:
function myFunction() {
var elmnt = document.getElementsByClassName("ms-acal-today");
elmnt.scrollIntoView();
}
I reasoned that the script actually works with ID of an element. Unfortunately there is no id of the particular element in the SharePoint calendar, and can't put one there.
So I was hoping the CSS class name will do the trick, but to no avail.
Could you please advise how the scrolling of the today's date or current week into view in a browser window can be done through JS, provided that in Sharepoint calendar, the current date is:
<div class="ms-acal-today">
<nobr>21</nobr>
</div>
(if today is 21 of August 2019)
Nobody answered, but I managed to resolve the case with jQuery and here it is for anyone who might need it:
$(document).ready(function() {
var $container = $("html,#s4-workspace");
var $scrollTo = $('.ms-acal-today');
$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},600);
});
Of corse jQuery must be initiated in SharePoint first.
I did it by uploading jquery-3.4.1.min.js in the site assets and referring to it in web part.
I am using the ProtoPlasm Datepicker in one of my apps, now I want to disable all the dates earlier than today.
I used the following code:
Protoplasm.use('datepicker').transform('input[type="text"].xyz_datepicker', {dateFormat: 'MM/dd/yyyy'});
But I'm still unable to do it. Any help?
I am not familiar with Protoplasm; however, according to their doc, you should be able to do this:
Protoplasm.use('datepicker')
.transform('input.datepicker', { 'minDate' : '1/1/2016' })
Ref. http://jongsma.org/software/protoplasm/control/datepicker
However, I don't recommend this approach. I recommend just using standard jQuery UI as outlined https://jqueryui.com/datepicker/#min-max
I have fixed the issue by adding the following line of code to my js file:
Protoplasm.use('datepicker').transform('input.datepicker', { 'minDate' : '1/1/2016' })
I have created a LESS (http://lesscss.org/) version of a simple css grid solution (http://simplegrid.info/. Now I can happily roll my own grid sizes with the server script from LESS (lessc). That's working for me.
For demo purposes I would like to create a HTML page, where I can put the size of the css grid in a textbox and the grid would change dynamically. Beginning of the demo is here:
http://jsfiddle.net/8QHNc/
So instead of changing #layoutwidth: 720px; in the <style rel="stylesheet" type="text/less" > section I would like to pass these variables to the LESS interpreter.
Can these be done with the client side usage of less? Can I define global variables or pass them as parameters to less.js somehow?
I am aware that I could do this without the usage of LESS (preferably with jQuery o. sth.) - but I figured since it is already there...
I do not know if the parser takes any arguments, but why would you refuse to use the built-in javascript evaluation, e.g. adding something like:
#layoutwidth: `document.getElementById("inputLayoutWidth") + "px"`;
to your Less-Stylesheet. Or, using jQuery, as you proposed:
#layoutwidth: `$("#inputLayoutWidth").val() + "px"`;
while using an input field like
<input type="text" id="inputLayoutWidth" value="720" />
and invoke parsing each time the input field is changed.
If you are using 3.x version of less CSS than u can set them in javascript code as well.
less.modifyVars({
'#buttonFace': '#5B83AD',
'#buttonText': '#D9EEF2'
});
I don't know if this method is also present in older version of less.
I know this will be an easy one for you guys but I couldn't figure out how to do something like this; http://backpack.tf/
On that page, when you take your mouse to any item it opens a new small window displaying some text/image. What are my options for achieving something like that? JavaScript? I tried using "onMouseOut=" with HTML but it is too simple for what I have in mind.
I'd be tempted to say this is almost certainly a duplicate: Is there a JQuery tooltip plugin that supports HTML content and automatically positions tooltips?. To name but one :)
Either way you should look at tooltips, a quick google search found this:
http://jqueryui.com/tooltip/
It should let you use html content inside the tooltop.
you can use Hover event in jQuery or javascript whatever you like and in that even write your code whatever you want to achieve etiher showing block or displaying image:-
$("#idOfElement").on("hover", function()
{
////your code
});
I have an app built using jQuery (and using various jQuery-UI tools).
For some reason, i have to port it to smartphones/tablet computer, and decided to use jQuery Mobile for that (in order to minimize the number of changes).
In my vanilla app, I created some elements of the page on the fly, depending of user interactions.
For example a slider could be created like that (p is an object with a bunch of params):
function createSlider(p){
return $("<div/>",{
"id":p.id,
"class":p.divClass,
}).slider({
"orientation": p.align,
"min":p.constraint.min,
"max":p.constraint.max,
"step":p.step,
"value":p.curVal,
"animate":"normal"
/*and some event handling here, but it doesn't matter*/
});
}
And it will produce a nice looking slider. Now it looks like:
function createSlider(p){
return $("<range/>",{
"id":p.id,
"class":p.divClass,
"min":p.constraint.min,
"max":p.constraint.max,
"step":p.step,
"value":p.curVal,
});
}
But as it's created on the fly, all the stuff done by jQuery Mobile on the page load isn't done on it.
Is there a way to force that initialization without writing the slider in the html?
Thanks.
EDIT: I found in the doc that it could be achieved using container.trigger("create");
However this does not work yet.
EDIT2: Ok create was the solution.
According to the documentation (see edit in the question), using trigger("create") on the containing element works.
And to make that work, you also need to remember that range is an input type and not a tag...
Working solution:
function createSlider(){
return $("<input/>",{
"type":"range",
"id":"sl",
"min":0,
"max":15,
"step":1,
"value":1,
});
}
function appendSlider(){
$("#yourdiv").append(createSlider()).trigger("create");
}
As a sidenote, the documentation for jQuery mobile lacks a search option.
Try calling .page() on the container the content is being added to. Alternatively, adding .page() to the content you're returning may also work.