I came across this lightbox plugin and thought of implementing it in my project. I have an option of Exporting data in my application. When I click the export link, I want the light box to appear with some text and buttons like Export to excel,export to text file etc.
But will the light box plugin overlay only images? If not, how can I over text and div elements?
This is the export link:
<a class="button" id="export_entries">Export</a>
This is the div element that I want to appear in the lightbox.
<div id="lightboxContent">
<div class="info">
<h2>Export Options</h2>
<div>How would you like that?</div>
</div>
<div class="stuff">
<p class="center">
<a class="button" title="Excel Document" href="#">Excel(.xls)</a>
<a class="button" title="Tab Delimited" href="#">Text(.txt)</a>
</p>
</div>
EDIT 1
I tried another lightbox plugin called facebox, which had an option of loading a html file in the lightbox. But for me,the html file is loaded as a new page. Can anyone help me?
I've given the code below:
<script type="text/javascript" src="/FormBuilder/app/webroot/js/jquery.js"></script>
<script type="text/javascript" src="/FormBuilder/app/webroot/js/facebox/facebox.js"></script>
<link type="text/css" rel="Stylesheet" href="/FormBuilder/app/webroot/css/facebox/facebox.css" media="screen,projection" />
<a class="button" rel="facebox" id="export_entries" href="/lightbox.html" >Export</a>
You can adapt the lightbox to contain any HTML. All it does is blank out the background and put some HTML into a division in the foreground.
You might save some time by checking out Expose, which is part of the jQuery tools:
http://flowplayer.org/tools/demos/index.html
The LightBox plugin is used to overlay only images. So I went for Thickbox plugin which can be used to overlay images,text,html and Ajax content.
Related
I am using the following library to generate PDFs from my views.
Now I am trying to do a custom footer so I created a footer view with the following
<!DOCTYPE html>
<footer class="footer">
<div class="container">
<hr>
<address>
//Some Address
</address>
</div>
</footer>
As per the docs I set the DOCTYPE. Now my main view is where I load the css files etc. In my Controller I do the following
$footer = \View::make('projects.clients.footer')->render();
$pdf = \PDF::loadView('projects.clients.template', compact('project'))->setOption('footer-html', $footer);
return $pdf->download('test.pdf');
So as far as I can tell I am doing everything correctly. Now my PDF displays the footer, but it has none of my own styling applied to it. If I try to load some CSS files within the footer template, the footer does not display.
How can I make sure the footer has the appropiate styles applied to it?
Thanks
try to load your css like that:
<link rel="stylesheet" href="{{ public_path('bootstrap/css/bootstrap.min.css')}}">
I am using the ckeditor in Kentico tool.
There is an
getting added for empty div.
Example-
is transformed to
<div id="ctl00_fullLayoutDiv">
<div class="main-block" id="ctl00_divMainBlock"> </div>
</div>
Please provide any solution to remove the
getting added automatically to empty div in ckeditor.
I am content with my current theme but the photosets are not laying out properly, they are the same width with my photos but say for instance i reblog a photoset with the photos side by side, it wont show up that way on my blog it will show up underneath each other and that is very frustrating since it makes the images blury.
This is my photoset html code. Is there anyway to correct this?
</div>
{/block:Photo}
{block:Photoset}
<div class="entry">
<div class="photosetbox">
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
{block:IndexPage}
<div class="photosett">
{block:Date}
{block:NoteCount}{NoteCountWithLabel} • {/block:NoteCount}{12Hour}:{Minutes} {CapitalAmPm}
{/block:Date}
</div>
<div class="photoset_a">
</div>
{/block:IndexPage}
</div>
Photoset Photos
Your current code specifies that you want each photo from photoset to rendered in the html as an img tag:
{block:Photos}
<img src="{PhotoURL-HighRes}" class="highres">
{/block:Photos}
To render a photoset, you have two options. Either use the built in feature / theme operator. This will give you an iframe with a photoset prebuilt inside it:
{Photoset-700}
Or use a plugin to take your current code and turn it into a photoset.
References
Tumblr Theme Operators - Photosets
Photoset Grid jQuery Plugin
I apologize if I'm repeating a question. please link to the location that contains the answer I'm looking for, because I couldn't find it.
I looked at the documentation, and it didn't help. http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Minimum_Setup
http://www.elated.com/articles/adding-wysiwyg-editor-to-your-site/
link above is the tutorial I used to get the code below.
I'm struggling to find any good help and I've looked for an hour.
My Goal: to allow my users to click on a link that takes them to another page, where they can write notes and save them for their own personal use in the future. They will have their own login, so their notes are only visible to them and people they give access to.
After researching on StackOverflow, I feel like ckeditor would be the best tool for the job.
Here are my attempts at installing it. (ps. I have downloaded the folder from the site so I doubt "installing" is the correct term.)
My Script tags in the head:
<script type = "text/javascript" src="ckeditor/ckeditor.js"></script>
<script>
window.onload = function () {
CKEDITOR.replaceAll('wysiwyg');
};
</script>
My first webform attempt:
CKEDITOR.replace( 'fieldname');
<textarea id="userNotes" class="wysiwyg"><strong>test</strong></textarea>
My WebForm copy paste from tutorial above:
<form action="form_handler.php" method="post">
<div>
<textarea cols="80" rows="10" id="content" name="content">
<h1>Article Title</h1>
<p>Here's some sample text</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'articleContent' );
</script>
<input type="submit" value="Submit"/>
</div>
Everything I have tried so far gives me a textarea with plain text inside, and that is not how it is supposed to look.
To reiterate my question, how do I properly setup/link my ckeditor files inside my html file and web form to get ckeditor to actually work?
Question Part two: Am I even approaching my goal correctly? is ckeditor a good solution for my goal to allow users to create notes?
Try
CKEDITOR.replace('content');
This is the ID and name of the textbox so you need to target that.
<textarea cols="80" rows="10" id="content" name="content">
<h1>Article Title</h1>
<p>Here's some sample text</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('content');
</script>
Here is the documentation. I am assuming you're using ASP.Net.
If you follow the above tutorial, you can then add CKEditor by:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server">
</CKEditor:CKEditorControl>
I would like to have a page with both an image gallery and a slideshow. The slideshow should be started when I click the link, the normal ColorBox should be used when I click one of the images.
What I do now is group all the images with a rel. For the slideshow link I use the following code:
<a rel="slideshow" href="#">Display slideshow</a>
In the configuration for colorbox I define rel as the rel I use for the images. This works almost, the problem I have with this is that I get an extra empty page at the beginning.
How can I start a slideshow of an image gallery, using a text link?
I searched for how to do this for a long time, and finally found the answer on - where else - the F.A.Q for Colorbox. The example is worded a bit differently though so it wasn't as easy to find as you might think. Especially if you're asking question in these terms, like I was.
<div style="display:none;"> <!-- optionally hide this div -->
<a rel="gallery" href="/slideshow/one.jpg">Caption 1</a>
<a rel="gallery" href="/slideshow/two.jpg">Caption 2</a>
<a rel="gallery" href="/slideshow/three.jpg">Caption 3</a>
</div>
<a id="openGallery" href="#">Display slideshow</a>
<script type="text/javascript">
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
e.preventDefault();
$gallery.eq(0).click();
});
</script>
http://jacklmoore.com/colorbox/faq/#faq-click