Is it possible to copy an image using zclip? I want to copy the actual image and the hyperlink using zclip instead of copying its HTML code.
Assuming that I have the following html part:
<div id="fooDiv">
<a href="http://www.google.com">
<img src="foo.png"/>
</a>
</div>
I can get its html using the following copy function:
copy: function(){
return $('#fooDiv').html();
}
So how can I replace this function in order to get the actual image instead of HTML. The reason I need this functionality is to be able to paste the result in e-mails immediately. HTML code won't benefit me.
Related
I'm trying to add a "Book Preview" button using the Google Embedded Viewer API. I want to add the button to each book result the user gets. When I add the script to the list using .append, the script erases everything and when the I submit a search query everything disappears and I only see the preview button.
I tried putting the <script> part in the HTML file, but when I did that the function appeared as plain text. I also tried putting the script in a separate file and using $.getScript, but that isn't doing anything. I also tried appending the script to a separate div, but that didn't work either. When I put the script directly in the HTML file, it doesn't erase everything but also doesn't work with the array data.
main JS file:
function displayResults(responseJson, maxResults) {
console.log(`displayResults ran`);
console.log(responseJson);
$('#results-list').empty();
for (let i = 0; i < responseJson.items.length & i < maxResults; i++){
$('#results-list').append(
`
<li>
<p>${responseJson.items[i].volumeInfo.industryIdentifiers[1].identifier}</p>
<img src="${responseJson.items[i].volumeInfo.imageLinks.thumbnail} alt="The book">
<h3>${responseJson.items[i].volumeInfo.title}</h3>
<h2>${responseJson.items[i].volumeInfo.authors}</h2>
<p>${responseJson.items[i].volumeInfo.description}</p>
Buy this Book
<div></div>
<input type="submit" class="preview-button" id="book-preview" value="Preview This Book">
</li>
`);
$.getScript("book-viewer-index.js")
};
$('#search-results').removeClass('hidden');
};
linked file/button code:
<div>
<script type="text/javascript"
src="https://books.google.com/books/previewlib.js"></script>
<script type="text/javascript">
GBS_insertPreviewButtonPopup('ISBN:0738531367');
</script>
})
</div>
The expected result is a button under each book search result that will display the hard-coded book preview. There is currently no actual result. I added in the "preview book" button in case I have to do it that way but that's not actually how I want it.
https://books.google.com/books/previewlib.js only needs to be included once before your loop starts.
You just need to call GBS_insertPreviewButtonPopup for each element you create in the loop, you don't need to inject a script block into the html to call it.
Straight after you call the append to the results-list you can call the GBS_insertPreviewButtonPopup in your loop.
I am using the following js to replace text in a class called .relatedactivities with another text. In the example below the text is Related Activities.
<script>
$(document).ready(function(){
$(".relatedactivities").text('Related Activities');
})
</script>
How can I replace the text "Related Activities" with the HTML code below instead?
<h1 class="GreenLrg" align="center">Related Activities</h1>
<div align="center"> <a href="/activities/kauai/ziplineadventures/koloa-zipline.htm">
<div class="CatBox"><img src="/Portals/0/1koloa-zipline-tour-2.jpg" height="174" width="231"><span>Koloa Zipline Tour</span></div>
</a> <a href="/activities/kauai/ziplineadventures/zip-n-dip-expedition.htm">
<div class="CatBox"><img src="/Portals/0/2zip-n-dip-2.jpg" height="174" width="231"><span>Zip N' Dip Expedition</span></div>
</a> <a href="/activities/kauai/ziplineadventures/kipu-falls-safari.htm">
<div class="CatBox"><img src="/Portals/0/3kipu-zipline-safari-2.jpg" height="174" width="231"><span>Kipu Zipline Safari</span></div>
<p></p>
</a></div><a href="/activities/kauai/ziplineadventures/kipu-falls-safari.htm">
I do not suggest you hard code HTML in your JavaScript, as it will become extremely difficult to maintain in the long run.
In a perfect world, you can call a backend service via AJAX which would return HTML, or you could use a framework or library like AngularJS or React.JS.
Now, to answer you question, simply change .text() for .html('<html here/>').
You'll need to use .html() instead of .text():
$(".relatedactivities").html('<h1 class="GreenLrg" align="center">Related Activities</h1>...');
Use: html() like
$(".relatedactivities").html('your code html');
This method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.
For more about that, check http://api.jquery.com/html/
I have a link (A link), which dynamically creates some html content into the page by a js file placed in the head content. This works well.
<head>
<script src="my.js">
</head>
<body>
<div>
<a href="A link">
</div>
</body>
Than clicked the A link, and this is created:
<div>
<a href="B link">
</div>
The newly created html content also contains a link (B link), which should use the same js file, as used before, but it seems, that the B link cannot see it, however the js file is still in the header content.
Works only if I put the js file in a script tag to the end of the dynamically created html content generated by A link, like this.
<div>
<a href="B link">
<script src="my.js">
</div>
But this means I load this js file twice. What am I missing here?
Thanks.
If you want the newly created element to perform some action then you should use this technique using jquery.
$(document).on('click', '.linkclass', function()
{
// Perform your action here.
alert('I was clicked');
});
live of Jquery is now obselete and is better to use on. In this way your all newly created element or already created elements having class as .linkclass will perform alert(); action. Hope it helps.
I want to show in my html page an image that I've attached in a document on couchdb.
How I can do this using javascript (jquery)?
I solved using
$.couch.db("mydb").view(...)
to obtain the id of document that I'm interesting. And
$.couch.db("mydb").openDoc(id, {...})
to obtain the image coded in base64. After that I put this base64's code in tag
<img src="data:image/jpg; base64, ...">
Actually you can do this by adding img tag:
<img src="http://somehost/somedatabase/document/attachment">
I am having a jsp page. Inside which i import a jspf file. In the jspf file, i have used tab-libs similar to this
<a href="javascript:moveToPage('<c:out value="${requestScope.PREVIOUS_LINK}"/>')">
<img align="absmiddle" src="images/<c:out value='${selectedTheme}'/>/previous.gif" width="23" height="14" alt="Previous" title="<fmt:message key="jsp.imagetitle.Previous"/>" border="0"></a>
The jsp file looks like
<div id="someId">
<%# include file='jspf/myNewPage.jspf'%>
</div>
This jsp page is called to another jsp page using ajax and filled in a div using
$('#divid').html(response.responseText);
When i get the output on the screen, it shows some html tags printed and the image in img tag is not printed.
If you see HTML tags, then someone/something in your code converts the HTML to text (i.e. it escapes all special characters like < to <, etc.) You should see this when looking at the HTML source code in your browser.
This looks odd to me:
<a href="javascript:moveToPage('<c:out value="${requestScope.PREVIOUS_LINK}"/>')">
< isn't allowed inside of an element, so this should either give an error or the code you pasted above isn't a 1:1 copy from your jspf file.
This would be valid:
<a href="javascript:moveToPage('<c:out...
but wouldn't execute the c:out anymore.
Use fn:escapeXml() instead:
<a href="javascript:moveToPage('${fn:escapeXml(requestScope.PREVIOUS_LINK)}'">