I have the following pice of code but it is not working for me.
$('#seisUrl').html(""); // reset div.
var urls = url,
filepath , filename;
for(var i=0;i<urls.length;i++){
if(urls[i] != ''){
filename = basename(urls[i]);
filepath = dirname(urls[i]);
$('#seisUrl').append(
'<a rel="zoom-id:zoom; seismic" href="' + filepath + 'thumbnail_' + filename
+ '" rev="' + filepath + 'thumbnail_' + filename
+ '" class="fancyboxseismic"'
+'></a>'
);
}
}
$(".fancyboxseismic").fancybox({
});
The html output is
<div id="seisUrl" style="">
<a class="fancyboxseismic" rev="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic3.jpg" href="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic3.jpg" rel="zoom-id:zoom; seismic"></a>
<a class="fancyboxseismic" rev="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic2.jpg" href="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic2.jpg" rel="zoom-id:zoom; seismic"></a>
</div>
This seems to working fine on my curent site which you can find by browsing to http://www.spectrumasa.com/mcmap/large.php . then go to Meditttereanean-> Adriatic->Croatia. the problematic button is "seismic".
On my dev box i have updated fancybox to 2.1.5 version. I have changed the buttons from list items to normal a tags in a div. using css to style them inline. I have not changed anyother code but it seems like fancybox is not able to pick up the image classes. when i do view source after the images have been appended via jquery it is not there. howver i can see it in firbug console.
seems to work on here but doesn't seem to work on dev bnox
I had a fancybox class where i shouldn't of had. it does work fine.
"<a class='btn' href=\"#\" onclick=\"trackFactsheetView("+surveyId+",\'seismic\');\" >Seismic</a>"
this link was calling another function which was triggering fancyboxseismic.
Related
I'm creating a web page and I need to make a button that prints a selected area. After several searches everything led me to implement html2canvas.
I installed it with
npm install html2canvas in the command prompt. In the official html2canvas website they mention
import html2canvas from 'html2canvas'; that I suppose I need to add in the top of my aspx file(?)
So far I've coded this code portion:
function getScreenshot() {
alert("bob");
html2canvas(document.body, {
onrendered: function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
$('#test').html('<img src="' + canvasImg + '" alt="">');
}
});
var printContent = document.getElementById("row");
var printWindow = window.open("", "");
printWindow.document.write(printContent.innerHTML);
printWindow.document.write("<script src=\'http://code.jquery.com/jquery-1.10.1.min.js\'><\/script>");
printWindow.document.write("<script>$(window).load(function(){ print(); close(); });<\/script>");
printWindow.document.close();
};
<div id="test" class="body-content animated fadeIn">
<a href="javascript:getScreenshot()">
<img src="Images/printer.png" width="40" height="40" align="right">
</a>
</div>
The issue is when I click the button, no window opens for printing. The button works for sure because I get the alert window.
What am I missing for this to work? Can be a installation procedure? Can be bad attributes implementation?
Working fiddle: fiddle.
I would recommend opening a new html page where you include the element you're trying to print, along with a button "Print This Page" as is showed in the example below. And once user clicks on that button, thats when the browser's print page opens up.
This is the working function, all you need to do is call this function on click from your website's page, and change YOUR_ELEMENT to your container's id (#row in you case).
<script type="text/javascript">
function OpenPrintPage() {
var OriginalContent = document.getElementById('YOUR_ELEMENT').innerHTML;
var PrintWindow = window.open("","PrinterFriendlyPage","scrollbars=yes,status=yes,toolbar=yes,menubar=yes,resizable=yes,height=510,width=750");
PrintWindow.document.write( '<html><head><title>' + document.title +'</title></head><body><div id="' + 'content' + '">' + '</div><a class="printbtn" href="javascript:window.print()">Print This Page</a> </body></html>');
PrintWindow.document.close();
PrintWindow.document.getElementById('content').innerHTML += OriginalContent;
}
</script>
First make sure that you're including your script file correctly. There should be a <script> tag that includes a web-compatible version of your library. Most instructions that use npm install ...; import ... assume that you are using a web bundler like webpack or rollup to make a single bundled JavaScript file, or are using the new es6 module importer. That doesn't look like what you're doing here.
Instead, you can include a prebuilt version of html2canvas, like from https://html2canvas.hertzen.com/dist/html2canvas.js or https://unpkg.com/html2canvas#1.0.0-alpha.12/dist/html2canvas.js.
<script src="https://unpkg.com/html2canvas#1.0.0-alpha.12/dist/html2canvas.js"></script>
You can see a working example here: http://jsfiddle.net/u8Lz32k0/7/
Have you loaded the script in your web page? Can you post the beginning of your HTML file where you show all your imports?
I am using the JQuery framework "Dropzone.js" to upload files on server.
I want to do some stuff when the thumbnail is displaying. The other things are working without issue. The DOM is displaying before the javascript call.
I tried to initiate the thumbnail in two ways, according to Dropzone.js documentation :
var dz = new Dropzone(
'div#'+id,
{
init: function() {
this.on("thumbnail", function(file) {console.log("thumbnail") });
},
...
}
and :
var dz = new Dropzone(...);
dz.on("thumbnail", function(file) {
console.log("thumbnail")
});
And nothing is displaying in my browser console when I drop a file in the dropzone. The most weird behaviour is that when I write the same things with the event addedfile (dz.on("addedfile", ... or in the init parameter), I have the correct behaviour : I have something written in the console when a file is added.
Note that I want to modify dynamically the thumbnail when it is created, and this is why I can't use other event.
I use a custom previewTemplate in my Dropzone object; I don't think that cause the issue, but in the doubt I post what I wrote for this parameter too:
previewTemplate : '<div class="dz-preview dz-file-preview ">'
+ '<div class="dz-details">'
+ '<div class="dz-cancel" title="Supprimer">X</div>'
+ '<div class="dz-filename"><span data-dz-name></span></div>'
+ '<div class="dz-size" data-dz-size></div>'
+ '</div>'
+ '<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span><span class="dz-upload-text" data-dz-uploadprogress></span></div>'
+ '<div class="dz-error-message"><span data-dz-errormessage></span></div>'
+ '</div>',
If someone has an idea of what is happening and how can I resolve it, I thank a lot !
Edit after comments
Ok, then, thanks for all for your comments. I think I know where I misunderstood; and reading more carefully the doc, that was the point :
They do stuff like: create a new HTML element, add the element when provided with image data (with the thumbnail event),
This event is only fired when we want to display an image in the thumbnail; but what I am doing is a thumbnail without image (just the name of the file and the size). And that's right that when I add the createImageThumbnails flag and the <img data-dz-thumbnail /> in the template, the event is triggered when I add an image file in the drop zone.
So, my new question is: how to display an event when a free-image thumbnail is created ? I thought in using the uploadprogress event but it is not triggered when the file is not sent (for example, when activating a max file size limit).
I'm not sure that your using it in the right way. I would try the following approach:
var dz = new Dropzone(...);
Dropzone.options.dz = {
init: function() {
this.on("thumbnail", function(file) { console.log("thumbnail") });
}
};
If the event does what you expect it to do is a different matter.
I have a custom plugin. It is an image loader. It worked on CKEditor before I upgraded to the latest version as of yesterday (downloaded fresh and installed with Office2003 skin).
My Plugin calls the editor, i see it in the debugger
open: function(editor) {
this._editor = editor;
this._show();
this._getFileList();
},
It gets its files, i click on a file, it does its thing, and then the function is called to bring it back to the CKEditors Textarea Div.
var imagetag = "<img src=\"" + src + "\" alt=\"" + alt + "\" height=\"" + height + "\" width=\"" + width + "\" style=\"" + style + "\">";
this._editor.insertHtml("SOME TEST TEXT");
this._editor.insertHtml(imagetag);
The imagetag does its thing, and i can see that in the debugger
<img src="http://localhost/3.3/data/system/assets/groups/thumbs/67b1e878ebb463e13bad7f7e31a43ecb-thumb.jpeg" alt="File" height="96" width="145" style="border:0px;margin:0px;">
I test the link in the browser
http://localhost/3.3/data/system/assets/groups/thumbs/67b1e878ebb463e13bad7f7e31a43ecb-thumb.jpeg
And i can see the file. But its not being appended to the CKEditor window. Although I do see the text SOME TEST TEXT which is appended so i know that the innerHTML is working, it is no longer displaying the image in the window relative to the img tag.
If i put some text around the img like
SOME<img>TEXT
it outputs
SOMETEXT
Why is the Editor Textarea no longer displaying my image after an upgrade of CK.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm having a hard time passing my JavaScript data to HTML. I can send my video data to iframe so that a search retrieves a list of embedded videos. OR I could set my html var equal to href and display a written list of videos, whose url link redirects to YouTube itself. I want to combine these ideas.
My goal is to display a written list of video titles with thumbnails. When a link is clicked, the video should embed in the current page.
The exact problem is that I expected the onclick functionality to start the playVid function, pass it the video ID data, and send that to the iframe. It didn't. I get uncaught reference error playVid not defined. How is this so?
Update:
1) Tried to put playVid before showResults. Still undefined though.
2) Changed onclick="playVid(value.id.videoId)"> to onclick="playVid(' + value.id.videoId + ')"> Still undefined though.
3)
This is the code updating according to your suggestions. It's half-way there. Something gets passed to iframe and the video frame is embedded. playVid is now defined with no problems. The problem is not the data source. It works perfectly before we try to embed. I will post an image of my errors now, which are now about chrome extensions which is weird.
4) I solved the chrome errors I was receiving by installing the Google Cast chrome extension. Apparently Chrome will sometime give errors on embedded YouTube videos unless you download the extension, even if the extension really has nothing to do with embedded videos.
5) Last roadblock seems to be YouTube error "errorCode":"api.invalidparam"
SOLUTION
function showResults(results) {
var html = '';
$.each(results, function(index,value) {
html += '<li><img src="' +value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>'; });
$('#results').html(html);
$('#results li a').click(function(e){
playVid($(this).attr('href'));
});
}
function playVid(vidID) {
var embedVid = vidID+'?autoplay=1';
document.getElementById('player').src = embedVid;
}
Try this:
1- remove this onclick="playVid(value.id.videoId)" from showResults function and replace it with assigning an id:
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
2- add this after the each loop:
$('#results').html(html);
$('#results li a').click(function(){
playVid($(this).attr('id'));
});
You probably need to write the entire iframe tag to the document on click instead of just changing the source of an existing iframe. First create an outer div # 800x440 to contain the iframe, and then set
outer.innerHTML = '<iframe SRC="' + embedVid + '"></iframe>'
Your issue may be with this line...
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
Try this instead...
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
also try move the playVid() function outside this... $(function(){
I'm a graphic design student and I'm making a portfolio website. I wanted a lightbox as a way to show my work. I finally got everything working, except for one problem.
Whenever I load my page, the lightbox also loads. I don't want this. I want the lightbox to only show when people click on thumbnails of my work.
I followed this tutorial from Tutsplus because I am not that familiar with jQuery. The only thing I changed in the script was so the lightbox would fade in and fade out when clicking.
This is the code I'm using
</script><script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_href = $(this).attr("href");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
var maxheightvalue = $("#lightbox").height() -60;
$("#lightbox img").css("max-height", maxheightvalue + "px");
$('#lightbox').fadeIn(400);
$('#content').html('<img src="' + image_href + '" />');
//show lightbox window - you could use .show('fast') for a transition
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox" style="display:none">' +
'<p>Click to close<\/p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_href +'" />' +
'<\/div>' +
'<\/div>';
//insert lightbox HTML into page
$('body').append(lightbox);
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
$('#lightbox').fadeOut(300);
});
});
//]]>
</script>
I am pretty sure it's a real mess, but so far it's worked except for that one little thing. But if someone could clean it up (if possible) I would be very grateful.
your can try using this example
$(document).ready(function(){
$("#some").on("click", function(){
$("#gallery").lightbox();
});
});
the above is to load the lightbox for ur gallery or desired ID.
http://api.jquery.com/on/