I am attempting to follow the instructions on adding a header/footer to a kendo-ui grid here: https://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#template-headers-and-footers
However, I only want the header and footer to be displayed on the last page of the PDF export and I'm not exactly sure how to toggle the visible property when it is the last page.
I was able to resolve my issue by using the following in my kendo-template:
<script type="x/kendo-template" id="pdf-page-template">
<div class="page-template">
# if(pageNum === totalPages) {#
<!-- custom header/footer -->
#}#
</div>
</script>
Related
I'm new to Laravel and I faced this issue, when I'm using #yield('content') to view some HTML, the out put will be the exact contact with decoding it into HTML.
Here is my code :
#yield('content',"<p>This is a great starting point for new custom pages</p>")
And the out put is : <p>This is a great starting point for new custom pages</p>
And here is a screenshot :
Can someone help me know what's going on please?
In Laravel, the #yield directive is looking to pull the #section that you note up from whichever file is producing the html. When you pull in the #section, it is formatted as proper html on the page.
So, if you had a section like this:
#section('paragraph')
<p>here is some text</p>
#stop
And pulled this in a #yield statement:
#yield('paragraph')
This would simply output the html:
here is some text
What you have done with this:
#yield('content',"<p>This is a great starting point for new custom pages</p>")
is to supply default text to display on the screen if the 'content' section is unavailable. This text is escaped, thus you are seeing the html tags.
#Mousa Alfhaily, You do not have to pass the return value with the html tags
If you want to paragraph the return value... Then you do that at where the content is been rendered
#yield('content',"<p>This is a great starting point for new custom pages</p>")
it should be
#yield('content')
then your
#section('content')
$var = "This is a great starting point for new custom pages";
<p>
{{$var}}
</p>
#endsection
The #section directive, defines a section of content, while the #yield directive is used to display the contents of a given section.
So, if you had #section like- #section('paragraph')...#endsection.
then, #yield must be like - #yield('paragraph')
Example
In #yielddirectives -
#yield('content')
In #section directives-
#section('content')
...
your html content
...
#endsection
I cant get the plugin to resume normal scroll after the set it is applied to.
I have the plugin applied to main tag:
$("main").fullpage({ sectionSelector: "> *");
after getting to the last section from main i want to be able to scroll the footer sections (normal no full screen ), but I cant get it working.
<body>
<main>
<div class="title fp-auto-height"></div>
<section>1</section>
<section>2</section>
...
</main>
<footer>
<section>1</section>
</footer>
Thanks.
You can not.
The most you can do is simulate that by using the fullpage.js option scrollOverflow and adding all your page content on the last section .
It will create an scrollbar as the one you can see in this example.
I downloaded the latest CKEditor and tried the following:
<html>
<head>
<script src="ckeditor/ckeditor.js">
</script>
</head>
<body>
<div id="editor">
Some test text
</div>
<script>
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'editor' );
</script>
</body>
It worked in the sense that I can click the div to make the editor toolbar appear, but aside from that I can't seem to edit the content! Most of the toolbar buttons are disabled, and typing into the field does nothing. (See screenshot below)
According to http://nightly.ckeditor.com/13-04-14-07-42/standard/samples/inlinebycode.html this should be all the JS I need. Is there some other config setting I need to be doing?
Rawr, sorry. I found the answer mere minutes after posting this. I was so focused on looking for a config option I didn't realize to check the div in the example.
The div still has to have contenteditable="true" even if I don't use CKEDITOR.disableAutoInline.
I've been trying to add some AJAX/jQuery script to my site so that only the main content loads when you navigate through the site, and hence the navigation at the top will not reload.
This is my site structure:
<div id=container>
<div id="header">
<!-- Header + Navigation Buttons, same throughout the site. -->
</div>
<div id="main">
<!-- content of each page, different on each page. -->
</div>
</div>
Also note that each navigation button leads to an index.php file on a different sub-directory, e.g www.mysite.com/contact, www.mysite.com/comments etc.
How can I make the #header stay throughout the site, so when I click a link in the navigation bar that nav bar doesn't reload, however the #main content does?
I eventually would like to add transitions to the #main content aswell, so when you navigate through the site you'll never see a blank white page while the page is loading - instead you'll always see the nav bar etc. and the #main content would fade in and out.
Previously, I used this:
<script type="text/javascript">
$('#main').load('/subdirectory/ #main');
</script>
But it didn't work (note I did write the correct subdirectory) and the whole page would reload as normal.
If you could help me out I'd greatly appreciate it!
Thanks in advance!
mlazim14
<script type="text/javascript">
$(document).ready(function() {
$('#main').load('/subdirectory/ #main');
});
</script>
That should work. Are you sure the address is correct? Maybe the whole page wasn't loaded yet either. Try this, then 'echo' the contents in the index.php file:
$(function() {
$('#main').load('/comments/index.php');
});
Code inside the above function is executed when the page is ready. See jQuery .ready().
I've got a gallery of images, and I'd like users to be able to share those images to their social network.
When a thumbnail is clicked, an lightbox opens using colorbox, and ajax's in the images main view /images/view/<id> rendered as HTML, with an AddThis widget beneath it.
However I'm finding that because I'm loading the widget in using an ajax query there is obviously no event handler for it to catch and load it's bits. It's also, quite rightly, sharing the main url, seeing as it's been loaded in a lightbox.
Is there any way to overwrite this functionality or another sharing widget which will allow this kind of functionality? Or do I need to create my own sharing widget?
I have found a solution to this problem now, although it is more of a hack then anything else.
The basic principle is that you need to reinitialise the widget every time you load it back in.
The simple premise is that you include a ?domready=1 when loading the javascript.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>
Then when you complete loading your ajax, you need to run,
window.addthis.ost = 0;
window.addthis.ready();
Which will reinitialise the widget. My code is thus. I cheated, and attached it to the global ajax handler, because of my php framework </aside>
$('.content').ajaxComplete(function(event, request, settings){
// We need to reinitialise the addthis box every time we ajax a lightbox in
// Apologies for using regex to read html when javascript can parse html!
// http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags
if(request.responseText.match(/gallery-lightbox/i)){
window.addthis.ost = 0;
window.addthis.ready();
}
});
Once you've done this, the addThis widget will now load properly. Onto the second problem, of specifying the lightbox content as the sharing item.
This was much simpler, in that you can add the url into the button element. So you end up with widget markup like the following.
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_2" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_3" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_preferred_4" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
<a class="addthis_button_compact" addthis:url="http://example.com/<?php echo $image['Image']['id'];?>" addthis:title="My example title"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?domready=1#pubid=/*Your pubid*/"></script>
<!-- AddThis Button END -->