We Keep Coding

Javascript : Access data-link attribute

https://151megapixel.co.nz/concrete5/index.php/gallery
I have a javascript generated slideshow using SmartPhoto (so I can get the zoom facility). However, I wish to make the data-caption a link through to another page. I cannot post the javascript code here as it is over 1000 lines.
I have tried:
data-link="/concrete5/index.php/purchase"
$(".aclick").click(function (e) {
e.preventDefault();
alert($(this).find('data-caption').attr("data-link"));
});

I checked the link you provided. As I understood, you can write like below:
$('a.js-smartPhoto').click(function (e) {
e.preventDefault();
alert($(this).data('link'));
});

How to get the image click on Froala Editor

I want to get the .click of the image on Froala Editor to create a customize function, for that I want to get the image I have selected in the Froala Editor.
I have Tried a couple of methods for this.
1.froalaEditor.click function:
$('#froala_editor').on('froalaEditor.click', function(e, editor, clickEvent) {
console.log(clickEvent.toElement);
});
2.Custome jQuery function
$.extend({
IFRAME: function (s) {
var $t = $('.campaign-create-sec').find('iframe');
if (typeof s !== 'undefined') {
return $t.contents().find(s);
}
return $t;
}
});
$('#froala_editor').on('froalaEditor.initialized', function (e, editor) {
$.IFRAME('body').on('click', function (e) {
console.log(e.target);
});
});
In the above, both cases I am getting all the other elements other than <img> and <video> of what I tested, so Is there any other way for me to get the click even for an image in Froala Editor.
A fiddle for you to check, any help will be appreciated.

You can try this.
var monitor = setInterval(function(){
var iframe_found = $('iframe').length;
console.log('iframe_found '+iframe_found);
if (iframe_found) {
clearInterval(monitor);
$('iframe').contents().find("img").click(function(){
$(this).css('border','2px solid #090');
console.log('got that!');
});
}
}, 100);
Here is the working fiddle.
setInterval() : For checking iframe presence after page load. iframe may only load after the page data is loaded & in your case its from a editor plugin, may take some time surly to load.
$('iframe').length; : Confirms presence of iframe.
clearInterval() : For destroying the setInterval(), so avoids multiple checking again for iframe.
And, at last we are finding required img tag.
Try... Have a nice day.

Jquery/javascript copy to clipboard

I'm using http://www.steamdev.com/zclip/#usage to copy some text to the clipboard and that code is working just fine. It uses flash to create a crossbrowser solution and it is based on ZeroClipboard, which seems to be considered to be the best working solution at the moment.
However I would like to have multiple copy to clipboard buttons or links on my page. Here is an example.
http://jsfiddle.net/stofke/TB23d/
This code works, it copies the text of the coupon code to the clipboard and opens up a new page with the correct link. How can I use that code on other links without having to duplicate it for each and every link / id.
Using just the class
$(function() {
$('.copy').zclip({
path: 'http://shopsheep.com/js/ZeroClipboard.swf',
copy: $(this).text(),
afterCopy: function() {
window.open($(this).attr('href'));
}
});
});
doesn't work: as you can see here: http://jsfiddle.net/stofke/EAZYW/
if you remove the afterCopy function you'll see that $(this).text() will return the whole page instead of just the text between the link tag.
doing something like this
$(function() {
$('a.copy', this).zclip({
path: 'http://shopsheep.com/js/ZeroClipboard.swf',
copy: $('a.copy', this).text(),
});
});
slightly improves upon it but returns all text between the link tag as you can see here.
http://jsfiddle.net/stofke/hAh3j/

UPDATE: This no longer works but I cannot delete the post
This seems to work - someone might be able to make it more elegant
http://jsfiddle.net/5nLw6/7/
$(function() {
$('.copy').each(function() {
var linkId = $(this).attr("id");
$(this).zclip({
path: 'http://shopsheep.com/js/ZeroClipboard.swf',
copy: $("#"+linkId).text(),
afterCopy: function() {
window.open($('#'+linkId).attr('href'));
}
});
});
});

I actually discovered that using ZeroClipboard directly is just as easy, I just added this code in case someone wants a solution without using zclip.
ZeroClipboard.setMoviePath('http://shopsheep.com/js/ZeroClipboard.swf');
$(document).ready(function() {
$(".copy").each(function(i) {
var clip = new ZeroClipboard.Client();
var myTextToCopy = $(this).text();
var myTextUrl = $(this).attr('href');
clip.setText(myTextToCopy);
clip.addEventListener('complete', function(client, text) {
window.open(myTextUrl);
});
clip.glue($(this).attr("id"));
});
});
http://jsfiddle.net/stofke/JxMbd/

This is what we follow in Oodles Technologies.
To use zero copy to clipboard you need two files
1 . ZeroClipboard.js
2 .ZeroClipboard.swf
both file can be download from here
<html>
<head>
<script src =”../ZeroClipboard.js”></script>
<script >
// configure ZeroClipboard first
ZeroClipboard.config( { moviePath : /path/swffile/ZeroClipboard.swf } );
// initialize constructor
var client = new ZeroClipboard($(“#elementid”));
/* elementid is the element on which click , the data will copy to clipboard. you can also pass multiple elements, it use jquery selector */
</script>
<body>
<input type=”text” id =”targetid”></button>
<button id =”elementid” data-clipboard-text ='data for copy’ >copy</button>
</body>
</head>
<html>
ZeroClipboard automatically copy the value of data-clipboard-text attribute when event accur on element pass to ZeroClipboard's constructor

Light weight jQuery solution... re-use class to copy text from any element.
$(document).on('click', '.copytoclipboard', function(e) {
if($("#holdtext").length < 1)
$("body").append('<textarea id="holdtext" style="height:0;width:0;border:0;outline:0;resize:none;"></textarea>');
$("#holdtext").val($(this).text()).select();
document.execCommand("Copy");
});

Tinymce on keypress I am try to display the preview of the content

I am trying below code
$('textarea.tinymce').keypress(function(){
dealDescription = $('textarea.tinymce').tinymce().execCommand('mcePreview');
$("#deal_preview div").text(dealDescription);
});
But I am not using jquery tinymce editor suppose I use jquery tinymce and other jquery UI component not working properly so I am directly using the tinymce component.
Now I need to show content preview in preview box for each key press.

Im using this in tinymce 4.x
tinymce.init({
selector: "#tinymce-textarea",
setup : function(ed) {
ed.on("change", function(e){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
ed.on("keyup", function(){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
}
});
Explanation:
on("change") is for detect changes on mouse event if u click toolbar icon or selection from the menu. It also able to detect the keyboard event but only after lost focus (not real time).
on("keyup") is for detect changes on real time keyboard event

Could be done after initialisasing as well by getting the active editor:
tinyMCE.activeEditor.on('keyup', function () {
// your nicely formatted code here
});
There's also an editors array you can iterate over if you need it.

I try with below code is working fine
tinyMCE.init({
mode : "exact",
elements : "text",
setup : function (theEditor) {
theEditor.onKeyPress.add(
function (theEditor) {
previewContent(theEditor);
}
);
},
});
function previewContent(editorObject){
var content = editorObject.getContent();
document.getElementById("previewContent").innerHTML = content;
}

jHtmlArea event handling of keypress

I'm currently developping a text-to-symbol conversion tool (non-profit), and I'm having this problem:
For the WYSIWYG-editting of the text, I'd like to use a nice small wysiwyg editor (like jHtmlArea). This editor will show floating divs, so I'll have to intercept a lot of keypresses (spaces/arrows/etc)
Currently, my html area is loaded like this:
<script type="text/javascript">
$(function() {
$("#txtCustomHtmlArea").htmlarea({
loaded: function() {
$(this.editor).keydown(function(event) {
if(event.keyCode == 32) {
this.pasteHTML('<b>test</b>');
return false;
}
return true;
});
}
The problem with this code is that this.editor doesn't have the method pasteHTML. How can I use this method from this(=htmlarea).event?
This is most probably a fairly beginner question, but I'm really clueless towards where to look.
Thank you

Here's how I do it:
$("#my-text-area").htmlarea({
loaded: function () {
$.myControl = { jhtmlarea: this };
}
});
Then I can reference:
$($.myControl.jhtmlarea.editor.body).keypress(function (e) { });
This also gives me a handle to my the html area object from outside of the iFrame.

I think you're maybe getting yourself confused with the use of 'this' (I am definitely struggling to keep track of what it refers to!).
As a test, can you replace the
this.pasteHTML(...)
with
$("#txtCustomHtmlArea").pasteHTML(...)
or maybe
$("#txtCustomHtmlArea").editor.pasteHTML(...)
and see if that helps?