I'm trying to customise the xlviewer.aspx page of SharePoint to remove the 'Open in Excel' button and potentially replace it with the 'Download a Snapshot', has anyone else tried to do this and made any progress?
Adding the following Javascript to xlviewer.aspx allowed me to remove the open in excel buttons
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
setTimeout(HideOpenInExcelRibbonButton, 10);
});
function HideOpenInExcelRibbonButton()
{
$('a[id*="openInExcel"]').hide();
var doc = document.getElementsByTagName('ie:menuitem');
for (var i = 0; i < doc.length; i++)
{
itm = doc[i];
if (itm.id.match("OpenInExcel")!=null)
{ itm.hidden=true; }
}
setTimeout(HideOpenInExcelRibbonButton, 10);
}
</script>
Related
Using the new jsPDF .html() pretty much pulled straight from their docs, but it still results in a blank page:
Results in blank page:
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementById('doc')
if (doc) {
var pdf = new jsPDF('p', 'pt', 'a4')
pdf.html(doc.innerHTML, {
callback: function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
Results in no PDF generated:
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementById('doc')
if (doc) {
var pdf = new jsPDF('p', 'pt', 'a4')
pdf.html(doc.innerHTML, {
function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
Also results in blank page:
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementById('doc')
if (doc) {
var pdf = new jsPDF('p', 'pt', 'a4')
pdf.html(doc, {
callback: function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
Will use another tool if there are any other suggestions. Need it to be secure and generate selectable text PDF to keep overall size down. It's a long document it's generating and when doing it via addImage() the resulting file is huge. Thoughts?
After trying whole day came with following solution. I think we are getting blank page because of versions of html2canvas. I was using updated jspdf(1.5.3) with html2canvas(1.0.0-rc.3). Due to this I was getting blank pdf. When I use html2canvas(1.0.0-alpha.12) with jspdf(1.5.3) I am getting pdf with contents(not blank). So better to change version of html2canvas in order to work with newly .html() method.
// scripts included
<script type="text/javascript" src="html2canvas.js"></script> // 1.0.0-alpha.12 downloaded
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
//html
<div id='doc'>
<p>Hello world</p>
<div class="first-page">
<h1>bond</h1>
<img src="1.png"/>
</div>
<div class="second-page">
<img src="2.png"/>
</div>
</div>
<button onclick="saveDoc()">click</button>
// javascript
<script type="text/javascript">
var pdf = new jsPDF('p', 'pt', 'a4');
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementsByTagName('div')[0];
if (doc) {
console.log("div is ");
console.log(doc);
console.log("hellowww");
pdf.html(document.getElementById('doc'), {
callback: function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
</script>
html2canvas 1.0.0 alpha.12
.html() not working github
For me the working solution was to add the callback/promise behavior --- pdf.html(doc).then(() => pdf.save('fileName.pdf')); Seems that html() method works async and the file to be downloaded was not ready when downloading based on the other example --- that's why it was empty.
I found a codepen.io example (https://codepen.io/srees/pen/pgVLbm) I want to play around with in the context of a .vue app I'm working on, and I need some help transferring the <script> section over.
I copied the HTML chunk into a <template> and the CSS into a <style>. I've confirmed the .vue file works within the broader context (content loads when the <script> is commented out. I also placed <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" /> immediately before my <script> to resolve the $ not defined error I was getting. Is there something I need to import into App.vue or into this particular .vue file? When I leave <script> uncommented, I simply get a blank page loaded.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script>
var hidWidth;
var scrollBarWidths = 40;
...
you could define a method like this:
methods: {
renderStuff: function () {
var hidWidth;
var scrollBarWidths = 40;
var widthOfList = function(){
var itemsWidth = 0;
$('.list li').each(function(){
var itemWidth = $(this).outerWidth();
itemsWidth+=itemWidth;
});
return itemsWidth;
};
var widthOfHidden = function(){
return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-
scrollBarWidths;
};
var getLeftPosi = function(){
return $('.list').position().left;
};
var reAdjust = function(){
if (($('.wrapper').outerWidth()) < widthOfList()) {
$('.scroller-right').show();
}
else {
$('.scroller-right').hide();
}
if (getLeftPosi()<0) {
$('.scroller-left').show();
}
else {
$('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');
$('.scroller-left').hide();
}
}
reAdjust();
$(window).on('resize',function(e){
reAdjust();
});
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
});
});
}
}
and run the method on mount like this:
mounted() {
this.renderStuff();
}
Side note, var is not ideal in this day and age. Recommend converting these to let.
I have a table like the picture below.
I would like the value in the Date column to be highlight with a circle in the
DateTimePicker (or in specific color).
Is it possible ? The best way ? Any examples ?
Thank you
P.s. I use MVC and Bootstrap 3
Copy this in Controller
public ActionResult GetArrayofDates()
{
DateTime[] d = new DateTime[]
{
new DateTime(2019,9,27),
new DateTime(2019,9,25),
new DateTime(2015,7,27),
new DateTime(2019,5,5)
};
return View(d);
}
And This is The View
#{
ViewBag.Title = "GetArrayofDates";
}
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<style>
.highlight {
background-color: #ff0000 !important;
color: #ffffff !important;
}
.nothighlight{
background-color:#fff7f7;
color:#000000;
}
</style>
<h2>GetArrayofDates</h2>
#{
for (int i = 0; i < Model.Length; i++)
{
<h3>#Model[i]</h3>
}
}
<div id="calandar">
</div>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script>
var dates = []
#foreach (var item in Model)
{
//#: allow you to write javascritp/hhtml code inside c# code which you specific using # which allow write c# inside javascrpit/html
#:dates.push('#item.ToString("yyyy-M-dd")');
}
console.log(dates);
console.log(dates["0"])
$("#calandar").datepicker({
todayHighlight: true,
changeYear: true,
changeMonth: true,
minDate: new Date(2010,1,1),
beforeShowDay: function (date) {
var calender_date = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + ('0' + date.getDate()).slice(-2);
console.log(calender_date)
var search_index = $.inArray(calender_date, dates);
if (search_index > -1) {
return [true,'highlight','Employee Worked on this day.' ];
} else {
return [true, 'nothighlight', 'Employee did not Work on this day.'];
}
}
});
</script>
This full working example makes sure to match the format of the Date sent from the server and put into array as I did and everything will be okay.
and Download Jquery UI, and use UI CSS, I suppose you know that
i have been working for hours on the live search concept, and i am having problems with just one part of the Code.
html
<input id="searchs" autocomplete="off" />
<div class="livesearch" ></div>
javascript
$(function () {
$("#searchs").keyup(function () {
var searchs = $(this).val();
$.get("livesearch.php?searchs=" + searchs, function (data) {
if (searchs) {
$(".livesearch").html(data);
} else {
$(".livesearch").html("");
}
});
});
$(".page").live("click", function () {
var searchs = $("#searchs").val();
var page = $(this).attr("id");
$(".livesearch").load("livesearch.php?searchs=" + searchs + "&page=" +page);
});
});
the part var page = $(this).attr("id"); is not working. The page shows the error below
Notice: Undefined index: page in C:\xamp\...
and this error comes from the livesearch.php file which intends to use the index.
I am new to this way of scripting.
what could be the problem?
the part where the error is coming from on livesearch.php
if($_GET["page"]){
$pagenum = $_GET["page"];
} else {
$pagenum = 1;
}
Try this:
$(".livesearch").load("livesearch.php", {
searchs: searchs,
page: page
});
You weren't properly encoding the search string, and it could cause problems parsing the URL. jQuery will do that for you if you put the parameters in an object.
I have asp.net's .aspx page.
that have GridView let say GridViewParent and Each row have the another GridView as GridViewChild. Now GridViewChild have button AddRow and another controls like DropDownControl,RadioButtons..etc... I want after click the button AddRow there must add row on client side. How can i do same. Please guide me .... Send me code
<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#<%=cmdAdd.ClientID %>').bind('click', function(event) {
//debugger;
event.preventDefault();
var $grid = $('#<%=ctlGrid.ClientID %> ');
var $row = $grid.find('tr:last').clone().appendTo($grid);
$row.find('select')[0].selectedIndex = 0;
$row.find('input').each(function() {
$(this).val("");
});
return true;
});
});