I need to list view when am taking the print
it is possible to archive media print css?
now i am getting like the below img
enter image description here
but i want the print form like below img
enter image description here
You can make use of https://fullcalendar.io/
Since you have not posted any code, I have taken a random calendar with a print button. So on click of print I'm changing the calendar view and calling window.print() method.
Change view : https://fullcalendar.io/docs/views/changeView/
https://jsfiddle.net/7xcqaLpq/7/
here is your html code
<div class="" id="component1">
<full-calendar></full-calendar>
</div>
add print button and pass the id into method
<button (click)="printComponent('component1')">Print</button>
--
printComponent(cmpName) {
var docHead = document.head.outerHTML;
var printContents = document.getElementById('component1').outerHTML;
var winAttr = "location=yes, statusbar=no, menubar=no, titlebar=no, toolbar=no,dependent=no, width=865, height=600, resizable=yes, screenX=200, screenY=200, personalbar=no, scrollbars=yes";
var newWin = window.open("", "_blank", winAttr);
var writeDoc = newWin.document;
writeDoc.open();
writeDoc.write('<!doctype html><html> <style>.fc-header-toolbar{display :none !important;} .fc-scroller.fc-scroller-liquid{overflow:visible !important;} .fc-view-harness.fc-view-harness-active{height:auto !important;}</style>' + docHead + '<body onLoad="window.print()">' + printContents + '</body></html>');
writeDoc.close();
newWin.focus();
}
using this you can take a print of calendar
Related
I have a popup that is shown when a user clicks on the item of a list. Once the pop up shows, there is an HTML widget within it, in which I'd like to give it an 'id' like:
<div id="builder-<idOfItemSelectedHere>"></div>
How can I do this in Google app maker?
The following would be a possible solution. For you listrow onclick event enter the following:
var htmlwidget = widget.root.descendants.YourHTMLWidget;
var item = widget.datasource.item;
htmlwidget.html = "<div id='builder-" + item.id + "'>" + item.id + "</div>";
You would want to remove your predefined html from your HTML widget however.
I would like to use html5smartimage widget without letting the users upload images from their desktop and also avoid using the contentfinder. I created a dialog with a pathfield and a html5smartimage inputs. I have set the "allowUpload" to false. I want the user to input/pick the image using the pathfield component and then use it as source image reference to render the image in the html5smartimage widget. I have not been successful so far and any help/hint would be appreciated :). Here is what I have tried so far :
set the same "name" value to the pathfield and the fileReferenceParamter , hoping to pick up the users pathfield input into the smartimage, but the POST results two "./srcImageReference" parameters to be sent resulting in a pathfield change to a String [] on jcr node, thus concatenation of same paths each time.
I have gone through widgets.js to find a usable event function that gets called when a drap-drop is done , so I can simulate a similar one with the value from the pathfield, but I could not find any ..
Is extending the smartimage component and overriding the default drap-drop handlers the only option ? if so how do I go about it .
thanks
Viper
The html5smartimage has a handleDrop( Object dragData ) method that is called when an image is dragged and dropped over it. We can call this from the dialogselect event of the pathfield.
In essence it's like faking a drag-drop. The dragData has a lot of fields but all that matters in this case is the image path and name (source : console.log()s in the handleDrop method ). So on when an image path is selected in the pathfield, use it's path and create hoax dragData object and call the image's handleDrop method.
function(pathfield,path,anchor){
var dialog = pathfield.findParentByType('dialog');
var image = dialog.findByType('html5smartimage')[0];
var pathArray = path.split('/');
var imageName = pathArray[(pathArray.length-1)];
var fakeDragData = {};
var fakeRecord = {};
fakeRecord.path = path;
fakeRecord.name = imageName;
fakeRecord.get = function(name){ return this[name]; };
fakeDragData.records = new Array(fakeRecord);
fakeDragData.single = true;
image.handleDrop(fakeDragData);
}
This way all of the images data is stored on node by the html5smart image widget itself, you will not need to read the value of pathfield in your jsp at all.
If you just want to use the html5smartimage to preview the image selected in the pathfield you can try something like this :
Instead of html5smartimage use a regular panel and use its html property to display the image in the panel. The panel's body.update() method can be called from listeners in the pathfield with markup up to create a preview image.
<tab1 jcr:primaryType="cq:Panel" title="Tab 1">
<items jcr:primaryType="cq:WidgetCollection">
<ImagePathField jcr:primaryType="cq:Widget" fieldLabel="Select Image"
name="./imagePath" rootPath="/content/dam" xtype="pathfield">
<listeners jcr:primaryType="nt:unstructured"
dialogselect="function(pathfield,currentpath,anchor) {
//dialogselect event - fired when a selection
//is made using pathfield's browse dialog
//get the sibling panel through the pathfield
var previewPanel = pathfield.nextSibling();
//update the html property of panel to contain the
//image selected in the pathfield using panel body's update method
previewPanel.body.update('<img style="max-width: 100%;display: block;
margin-left:auto;margin-right:auto;"
src="'+currentpath+'"/>');
}"
loadcontent="function(pathfield,record,path){
//preview the image when dialog is opened for the first time
var previewPanel = pathfield.nextSibling();
if(pathfield.getValue() != '')
previewPanel.body.update('<img style="max-width: 100%;display: block;
margin-left:auto;margin-right:auto;"
src="'+pathfield.getValue()+'"/>');
}"/>
</ImagePathField>
<previewPanel jcr:primaryType="cq:Widget" fieldLabel="Preview Pane"
height="250" html="No image to preview" xtype="panel"/>
</items>
</tab1>
I have defined an select on top of my page which shows pageSize(item list pr page)
<select name="ddlPageSize" style="text-align:left;width:80px;">
#for (var i = 5; i <= 100; i=i+5){
<option>#i</option>
}
</select>
now when i wants to set page size in pagging link like.
<div style="width:inherit; padding:15px 0; clear:both;">
<ul style="text-align:center">
#for (int i = 0; i < (int)Math.Ceiling((decimal)totalCount / (decimal)pageSize); i++)
{
int page = i + 1;
string background = "transparent";//transparent
if (pageNo == page)
{
background = "grey";
}
<li style="display:inline; font-size:14px; color:#000; font-weight:bold; font-family:'VAGRound';padding:0 0px; background-color:#background; ">
#page
</li>
}
</ul>
</div>
in html anchor i wants to pass selected page size too with page Number
#page
You will need to change the url on ddlPageSize selected index change in jQuery.
Here is a link for the same
How to change the href for a hyperlink using jQuery
First of all add some class over your anchor so that you can easily get your Item in jQuery as.
<a class='apager' href="~/Admin/Userspagging?page=#page">#page</a>
and use jquery as below
$("#ddlPageSize" ).on("change", function() {
var selectedValue=$(this).val();
$(".apager").each(function(item,index){
item.attr("href",item.attr("href")+"&pageSize="+selectedValue);
});
});
Note that this is just an idea not implemented so far.
If you want to update the anchor link based on user selection, it will have to be done client side.
Also use the data attributes for the URL. You know you will update the URL with just the current page.
<a id="LINKID" data-url="~/Admin/Userspagging?page=#page" href="">#page</a>
Attach a function to the change event of the dropdown.
$("#ddlPageSize" ).on( "change", function() {
$("#LINKID").attr("href", $("#LINKID").data("id") + "&size=" + $("#ddlPageSize").val())
});
something like that...
Label1 (asp.net control) is located inside Panel1 of my webpage and I have a button called bt. What is the Javascript to copy the Text from Label1 to the clipboard?
#artlung, I placed the below code just outside of my form but inside the body. The last line of code I placed inside Panel1 of my form. Anything wrong with this code because nothing happens when I click the Copy to Clipboard button.
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.addEventListener( 'mouseDown', function(client) {
// set text to copy here
clip.setText( document.getElementById('form1.Label1').value );
// alert("mouse down");
} );
clip.glue( 'd_clip_button' );
</script>
The next line of code is above the script tags but inside Panel1 in my form
<div id="d_clip_button">Copy To Clipboard</div>
I achieved this with javascript. I picked up on the fact that javascript was renaming the label from Label1 to MainContent_Label1. Then I also through debugging saw that what I wanted to grab from the variable was the innerText property. Problem Solved!
I also had the function test for an empty string and then return a confirmation alert to the user when they either copied successfully to the clipboard or when the label was empty with nothing to copy. This is all client-side.
<asp:Label ID="Label1" runat="server" Text="Copy This!!!"></asp:Label>
<script type="text/javascript">
function ClipBoardTest() {
var txt = document.getElementById('MainContent_Label1');
window.clipboardData.setData("Text", txt.innerText);
if(!txt){
alert("Nothing to Copy");
}
else {
alert("Copy to ClipBoard Successful!");
}
}
</script>
<input type="button" id='bt' onclick="ClipBoardTest();" value="Copy" />
Use the zeroclipboard library.
There is also a way to copy text from label without using any external libraries.
copyStrFunction = (copyStr) => {
const el = document.createElement('textarea'); // Create a <textarea> element
el.value = copyStr; // Set its value to the string that you want copied
el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof
el.style.position = 'absolute';
el.style.left = '-9999px'; // Move outside the screen to make it invisible
document.body.appendChild(el); // Append the <textarea> element to the HTML document
el.select(); // Select the <textarea> content
document.execCommand('copy'); // Copy - only works as a result of a user action (e.g. click events)
document.body.removeChild(el); // Remove the <textarea> element
}
Call the copyStrFunction() onclick of any button and the string.
You can also modify the above function to find the label by Id and then copying the text from it.
I wan't to register the OnMouseOver and OnMouseOut-Event for an Image from the Code behind, because I must different if the user is logged in or not.
Any ideas?
You can add an attribute to the object.
e.g.
Image img = new Image();
img.Attributes.Add("onmouseover", "myjavascriptfunction();");
To set the paramater based on the id of the object, using this:
Image img = new Image();
img.Attributes.Add("onmouseover", "myjavascriptfunction(" + img.ClientID + ");");
Using ck's example, you can achieve what you're trying to do using the ClientID property on your server control. Like this:
yourImage.Attributes.Add("onmouseover", "jsfunction(" + yourImage.ClientID + ");");
On solution would be to use a css class and jQuery:
<img id="generatedId" class="myHoverImage" />
javascript:
$("img.myHoverImage").mouseover ( function() {
// you can access the generated id:
alert ( this.id );
// --> your code goes here <-- \\
});