"Add To Pocket" as text and not image - javascript

Unlike Instapaper, Pocket does not offer publishers a way to add an "Add to Pocket" text anchor.
This is the code I gather I should put in my index:
<a href="https://getpocket.com/save" class="pocket-btn" data-lang="en"
data-save-url="http://yourDomain.com/the/page/to/save.html"
data-pocket-count="vertical"
data-pocket-align="left"
>Pocket</a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
I'm using WordPress, so I'll have to replace the data-save-url with PHP, that's not a problem. The problem is that I can't figure out how to make this element appear as Text and work properly. I've tried hiding its img class and using span and content:before/after, but it doesn't work as the Javascript code is executing after the CSS has already loaded (?).

had the same problem. After a little search I used:
Save to Pocket
You will be loosing the counter though. And of course a user must be logged in to Pocket to save immediately, if not he will be redirected to login page.
This worked fine for me. Hope it does for you too.

Related

Print another page, but stay on the current one

I have an invoice system made in PHP. There is a view with all customer's invoices. I'd like to make an option to print an invoice.
I know about window.print() and media="print" for CSS. But I was thinking, is it possible to just print an invoice by clicking a button next to it, but staying on the list page? It would just open a printing prompt with different content and do nothing to the current experience.
I thought of a workaround. On click, I could just replace contents of some element with invoice's data and make the styles hide everything else besides that container. That looks like a trick to me though. Is there any other solution to that problem? Perhaps something like download attribute for links:
Download Me
That could be something like:
<a href="invoice.php?id=3" print>Print Me</a>
Or perhaps an HTTP header? Please share some advices.
I would suggest to use JQuery PrintJS plugin below:
http://printjs.crabbly.com/
This will ultimately solve your problem.

javascript load in wordpress template issue

I created a wordpress template for a customer and I used a plugin to allow registered users to customize his profile. The issue appears when I'm trying to change the profile photo, the modal windows that allow that don't charge!
Please see this picture: http://tattoobiter.com/custom.png
I tried to insert manually (in chrome console)
<div id="um_umpload_single"></div>
in </div class="um-modal no-photo"> and it works correctly till refresh the page.
I think something of my template don't let javascript to charge correctly, but I can't understand what...
Please help!
I tried to insert the first div in the second with append jquery but don't work...
Problem solved, It seems wordpress have problems to charge javascript external scripts if don't have the "".

How can I get my smiley button to open the popup I've created?

I can't seem to find the problem, I've tested out the button with an alert tag. The button is possible and works fine, it was styled and transparent with CSS, so that's out of the way. But it seems I just can't get it to open the popup I've created through JavaScript and HTML. What do you guys think?
To skip straight to the code environment.
Click this
<div class="popScroll"><div class="popup">
<!-- Smiley button -->
<button onclick="alert('hi');" class="smiley"><!--<div class = "smiley"></i></div>--></button>
<!--Ribbon-->
I'm fairly new so indentation of my code is restricting me from posting the javascript, but it's on the link. I apologize for the inconvenience.
You Need To Link Jquery Script ...
Attach files jquery-2.1.x.js with containing folder
or get it from
https://jquery.com/download/
When you are calling a JavaScript alert function directly into the HTML, you do not need to put quotation marks around the alert, just the text that you are trying to get it to put into an alert. It should look something like
If you have quotation marks around the word alert it will treat it as a pre-existing function that it will call from the script.

Properties to allow shadowbox to work

My question is a little unconventional. I want to use shadowbox to display a HTML page. I have created a test hyperlink and it works perfectly on it. Now, I am using a css template, and I am abke to geerate a similar code required for shadowbox to work. However, it does not work. Can someone please tell me what properties of the tag or any other of the parent DOM should I look into to make it work.
Adding some code
If I use this
<a href="playVideo?vid=oysur61F3uY&service=youtube" rel="shadowbox">
<img class="media" src="http://s1.dmcdn.net/D0-dx/x120-jai.jpg">
<a>
as a simple link, it opens the page in shadowbox
However when the same code is generated through javascipt, the link doesnt open in shadowbox. I have checked the outer divs, nothing seems to influence this. What things do I need to check?

Facebook likes Not Working when javascript add

So i am trying to add a like to my individual posts. So i added this to each of the posts. The posts are generated from database output then assembled with the properly styling in a javascript file.So i added this to the creation mix.
<fb:like href="my_not_so_sweet_website" layout="button_count" show_faces="true" width="200"></fb:like>
Weird part is... None of them show up. THEN i try taking that code that i generated for each post and just copy and paste it to the top of my website, and low and behold A like Button!!!. Any clues? Need more info? Help?
You are using what's called FBML. The like button is rendered on the fly (well, on page load) by a facebook javascript libabry you include on the page- it needs the FBML tags to know what to render.
The problem is that the FB library isn't smart enough to know that you've dynamically added these FBML tags to the DOM.
There is another type of like button that's an iframe, that one should work if you put it in the DOM dynamically. Docs for that are here: http://developers.facebook.com/docs/reference/plugins/like/
-when you enter your info into the widget there will be an option for iframe.
There is also a FBML render function in the FB javascript SDK. Docs are here: http://developers.facebook.com/docs/reference/javascript/fb.xfbml.parse/

Categories