Updated:
I'd like to append a self made "tweet this" button after blockquotes with jQuery. I figured out the following three steps are necesarry (some are already resolved thanks to the stackoverflow community):
[resolved] appending anything to the blockquote
[resolved] appending a working twitter share link to the blockquote
making sure it works with multiple blockquotes
The code I'm using at the moment is:
<script type="text/javascript">
var completeurl = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search;
completeurl = encodeURIComponent(completeurl);
var twshare = "https://twitter.com/share?url=" + completeurl;
var bq = $( "blockquote" ).text()
$("blockquote").append("<a href='" + twshare + "&text=" + bq + "'>Click to tweet</a>");
</script>
So the current state is: I'm stuck at #3, making it work with multiple blockquotes per page. Ideally it wouldn't be necesarry to manually assign IDs or something similar. So fully automated one #tweet this" button per blockquote. Is that possible?
Thanks!
Without seeing adequate markup, it is difficult to point where the problem is.
However, it works just fine.
See this fiddle: http://jsfiddle.net/JvT7h/2/
$("blockquote").append("<a href='http://twitter.com'>Click to tweet</a>");
Aside: append doesn't add an element after, but as a child inside.
Update:
As per your comments you need to customize the anchor link to be appended to multiple blockquotes depending upon the text of each blockquote.
See this updated demo fiddle: http://jsfiddle.net/abhitalks/JvT7h/3/
JQuery:
$("blockquote").each(function(){
var $link = $("<a />"),
linkText = "Click to tweet",
url = twshare + "&text=" + $(this).text();
$link.attr("href", url);
$link.text(linkText);
$(this).append($link);
});
You need to iterate over all blockquotes and then use $(this) to append the customized anchor.
Related
I need to put a link out from a corporate site to a surveymonkey survey. Our site uses a proprietary CMS limiting me from adding any proper function or third party plugin.
After evaluating options like those exposed in this other question, I believe I call the correct javascript function but everytime I open my CMS, the link duplicates itself... leading me to think I've done something inapropriate.
Things look acceptable on the JSFiddle demo I put together for this question but I'm hoping you'd have a more elegant solution in mind so I could try options !
<script type="text/javascript">
document.write("<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + " target='_blank'>Test - survey</a>");
</script>
Try this - it will probably not do what you want in one go, but it will hopefully isolate your problem so that you can better pinpoint what's going wrong:
HTML:
<div id="link"></div>
Javascript:
var SURVEYID = 3
var a = document.createElement("a");
a.innerHTML = "Test - survey";
a.href = "www.surveymonkey.com/r/"
+ SURVEYID
+ "?url="
+ window.location.pathname
+ "&target=_blank"
document.getElementById("link").appendChild(a)
I'm afraid there can be multiple things going wrong, but I hope you can now distinguish between the various parts that your URL is built up from.
This is mostly just a theory because I don't know your CMS or how it works, but I'm assuming that the CMS is inlining the javascript, executing it, and retaining that as its content along with the script. This would create that duplication. The original intent of using document.write I would assume was to completely replace the content; but if it's inlined, it only appends. An external script would completely replace. See below:
All of this text is retained.
<script type="text/javascript">
document.write("<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + "' target='_blank'>Test - survey</a>");
</script>
In this demo, we use document.body.innerHTML instead. This will replace the content completely.
None of this text will be retained.
<script type="text/javascript">
document.body.innerHTML = "<a href='https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname + "' target='_blank'>Test - survey</a>";
</script>
If true, complete replacement of the body content is your goal, innerHTML is probably what you need.
Edit + Warning:
This may make the page inaccessible from the CMS depending on how it's built. It may make editing the page impossible.
Edit
Here's a better solution. Just set the href of the anchor by first getting it by the ID. This was based off of Sven ten Haaf's Answer.
<a href="#" id="__smlink" target='_blank'>Test - survey</a>
<script>
document.getElementById('__smlink').href = "https://www.surveymonkey.com/r/[SURVEYID]?url=" + window.location.pathname;
</script>
appendPre(file.name + ' (' + file.viewedByMeTime + ')'+ ' (' + file.webViewLink + ')' +' (' + file.quotaBytesUsed + ' bytes)');
When it displays: Its shows this
How can I make the URL clickable?
Also, how can I bold file.name and change the color of the text?
Edit
#Pig correctly pointed out that you are allowed to put content into a <pre> tag, it's just a real pain for no real benefit. If your goal is to make a list of items with clickable links, I think a <ul> and adding <li>'s with Javascript is better. Maybe even a <table> and adding rows! Delicious.
What's up #Pig! It's your bro #jdbiochem. Here's the appendPre() function I think you're talking about (you should post the functions you're using in a question like this :) ).
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}
This adds to a <pre> tag, which renders preformatted text. You can't shouldn't really put anything in a <pre> tag besides text itself. So, you might think about making a different function to make a link, maybe something like this:
function appendLink(url) {
// create a DOM node, an <a> tag.
var link = document.createElement('a');
// a "text node" is what lives inside the tag <a>text node</a>
var _text = document.createTextNode("click me");
// add that text node to the link, so now we have: <a> click me </a>
link.appendChild(_text);
// set the actual link in the href attribute
link.href = url;
// add a CSS class so we can control the style of text easily
link.classList.add('drive-link');
// add this link somewhere in your document
doucment.getElementById('links').appendChild(link);
}
Keep in mind this function takes only the URL, so using it in all the places you have appendPre() will not work.
If you want the link bold and a different color, your CSS class might look like:
.drive-link {font-weight: bold; color: peachpuff;}
(BTW, you should mark answer to your earlier question correct!)
I'm developping a WordPress plugin which adds a button to the TinyMCE editor. When that button is clicked the desired behaviour should be:
1. If the selected text is not part of a short (or is the short) then the shortcode should be inserted into the DOM.
2 If not, the shortcode should be replaced with the new one.
The first requirement is fufilled, but the second not. When inserted, it show up in the visual editor but it not saved or displayed when saving or switching to text. This leads me to believe that im not directly editting the object underneath the editor, only that which is displayed. What is the correct way to go about it. Please see the following function:
...
insertContent: function(){
var atts = '';
var node = tinyMCE.activeEditor.selection.getNode();
var edit = $(node).is('div.wp-arv-faq');
jQuery('./$p/-sc-input').each(function() {
atts = atts + jQuery(this).attr('name') + '=\"' + $(this).val() + "\" ";
});
var caption = 'F.A.Q. ' + $('./$p/-sc-input[name="tax"] option:selected').text();
var style = $('./$p/-sc-input[name="style"] option:selected').text();
atts += ' caption="' + caption + ' (' + style + ')"';
if (edit){
$(node).empty();
tinyMCE.activeEditor.selection.setContent('[arv-faq ' + atts + '][/arv-faq]');
/$p/faqMCE.closeModal();
},
...
Please note, that the '/$p/' is unique to my build process and should be ignored. Thanks in advance
From your question it is not perfectly clear what you are trying to do, but i guess you are trying to insert html code into the editor.
Be sure to have the selection set right after calling $(node).empty();
Note: All your tags and attributes need to be configured as allowed tags and attributes using valid_elements and valid_children configuration paramters.
I have two clickable elements in HTML like this:
HTML
var node1 = $('' + fileName1 + '');
var node2 = $('' + fileName2 + '');
They belong to the page with url say:
http://foobar/examples.html
They have onclick listeners attached to them that retrieve some data from the server and display it on the webpage
Javascript
node1.click(function () {/*Displays table1*/})
node2.click(function () {/*Displays table2*/})
I want to change the URL for the two clicks just so that if I open the URL in a fresh tab, I get the node element clicked and the data visible. For example, conceptually, the following URL should point to the node1 clicked and data for it visible:
http://foobar/examples.html##fileName1 (does not work, but you get the idea)
I do not want to change the URL in accordance with what has been explained here as I do not want to create an HTML page for every fileName (it is an increasing list). Anchors don't help either as they just open http://foobar/examples.html and none of the nodes clicked . Neither is the answer to this question very clear to me. Can someone please help?
The first link you gave for changing the URL is what you want. However, you don't change the HTML page - you can add URL variables. For example:
http://www.example.com/mypage.html?node1=1&node2=1
Then you need to write a Javascript function at the top of your document to read the URL variables, and display the nodes that are set to 1 (or whatever value you choose) when the document has been loaded. For an example of how to read URL variables, see this answer.
You could give your nodes identifiers, like:
var node1 = $('' + fileName1 + '');
var node2 = $('' + fileName2 + '');
You would need to adjust the file names to be valid IDs.
Add the following JS:
var nodeId= window.location.hash;
$(nodeId).click();
You could then use:
http://foobar/examples.html#fileName1 (where fileName1 is adjusted as for IDs).
Probably a rudimentary for some, but this is driving me crazy! I am not sure what I did wrong - I cannot/not allowed(?) to append a href - it is simply didn't get processed at all.
$('#lastViewed').append('<a href="/Path/To?_q="' + string + '>');
$('#lastViewed').append(.....some other stuffs.....);
$('#lastViewed').append('</a>');
I am trying to wrap the "other stuffs" with a
Thanks!
Edit
The complete line:
$('#lastViewed').append('<div id="id_' + x + '<a href="/PVProduct/ProductDetail?_productID=' + JSON.parse(localStorage.getItem("pid_" + x)).productID);
This is incorrect. You don't append() opening and closing tags like that. Instead, append() the whole tag. Or even better, create the a element and append() it:
$a = $('<a>').attr('href', yourHref).html(yourText);
$('#lastViewed').append($a);
you can use it
var link=document.createElement("a");
link.id="idName";
link.setAttribute("href", "your link");
document.appendChild(link);