We Keep Coding

"Add To Pocket" as text and not image

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.

Load a html page in a div by clicking an image

I have an image and i want, once i click it, that a particular html page is displayed into a specific div. I found several answer yet, but none of them seems to work.
I'm thinking something simple with jquery, like the answer given here: display html file in a div
What's your solution ?
Thanks in advance.
EDIT1
I want to load an internal html page ( not an external page from another webiste ) by clicking an image.
This is the code i used taking example from the answer on the link above.
<script type="text/javascript">$(document).ready(function(){$("mainscreen").load("/home/dontrythisathome/Programmazione/HTML/Progetto-Corso-Inglese/Misc/FILE/HTML/ChiSiamo.html");}</script>
"mainscreen" is the final div when i want to display the html page.
Inside the function .load() there is the path of the html page.
But no html page is displayed into the div.
EDIT2: I found the silly mistake. I use this structure: when the correct position of the elements is . I could remove also the element but i'm using CSS and i'm more comfortable to place elements than using tag options instead. Thanks for all your replies. Tomorrow i'll see if the code with jquery works.

I think your Problem is, that when you load another website using .load().
All the other websites CSS/JavaScript gets loaded and yours gets overwritten.
Could you tell us, what you are trying to accomplish?
Are you loading a html-page from your own website or an external url?
If you dont care for the styles that other website uses, you could do something like this:
.load("example.com/some.html #content");
This loads the url you specifies and just copys the content of the HTML-Element that corresponds to this selector into your target element. (ONLY INLINE-CSS will be applyed that way, you would need to do that styling manually)
EDIT: Thank you for updateing your question.
You are trying to load a file from your filesystem.
Add file:// in front of the path to your .html file.
NOTE: Especially when you are trying to use AJAX you should use a local website and work with relative paths! This makes it much easier to deploy the website afterwards as you do not have to rewrite all your URLs.

Here is jsFiddle
Your html code
<img class="img" src="http://www.lessons4living.com/images/penclchk.gif" width=100 height=100>
<div class="targetDiv"></div>
Your javascript
$(document).ready(function(){
$(".img").click(function(){ //capture the event and ignite your work
loadPage("http://fiddle.jshell.net/"); //call our function
});
});
function loadPage(link){
$.get(link,function(data){ //dont forget cross-browser rules.
$(".targetDiv").append(data) //appended in to your div
})
};
Or you can use .load function with link parametre.

Lets say you have the following HTML code.
<div id="mainscreen">click on the image to load html …</div>
<img id="js-image" src="http://cl.ly/image/0A1P1s3r2M0u/Bildschirmfoto%202014-05-24%20um%2021.59.23.png" />
And some JavaScript code (with jQuery).
var image = document.getElementById('js-image'),
mainscreen = document.getElementById('mainscreen');
$(image).on('click', function() {
$(mainscreen).load("http://fiddle.jshell.net/florianpircher/tmRy9/show/");
});
Demo: http://jsfiddle.net/florianpircher/6wXBu/1/
You can not use $("mainscreen") because that would select <mainscreen> and not #mainscreen. In jQuery, you need a CSS-selector (like $("#mainscreen")).

is there anyway to open href links in message box?

i want to open html href link files in message box or any display box.( sorry i dont know, exact word for box.)
is there any way to open href links in any kind of display boxes.? i need answer only in JavaScript technology. Help me

I don't think an alert() or confirm() or any other built-in browser dialog box can display more than just simple text. But you can have any HTML content you want in a modal div dialog. The jQuery UI Dialog is a popular example. You don't need to use that plugin, though it would make it easy.
Essentially you just render a hidden element to the page (commonly a div) and respond to some page event by styling the element to "float" over the rest of the page. That element, since it's part of the DOM like anything else, can contain any HTML you'd like.

Take a look at jQuery's fancybox -> Fancy Box

well depending on how you building your web app. You could integrate twitter bootstrap, it has tons of great JavaScript plugins. a modal might solve your problem.
http://getbootstrap.com/2.3.2/javascript.html#modals
Alternative you can uses a lightbox, I see someone has already mentioned fancybox. The second version is now out.
its supports images, iframe, and divs as conetent
http://fancyapps.com/

Load content on mouseover

I want to load the content of a div on the mouseover of an icon within the div. Furthermore, the mouseover should only fire once and preferably the icon should disappear after loading the content.
The content that will be loaded in de div will be an external file with social media buttons. In case you are wondering; I don't want them to load with the rest of the page because they slow it down. Also, some visitors might not be comfortable with sites like FB and G+ tracking their internet movement.
So, I have gathered some code and copy pasted a bit and this is what I came up with:
<div id="social_media">
<img src="icon.png" onmouseover="javascript:$('#social_media').load('external_file.php'); this.onmouseover=null;" alt="Show Social Media Buttons!" />
</div>
The thing is, it works perfectly fine :) But since it is code that I got from 3 different sources and pasted together, my question is if it's any good? For example, I never tried to find a way to remove the icon on mouseover, it just did :)
I have almost no experience in coding Javscript/jQuery, so please let me know what you think about it so that I can learn from it!
Thanks and greetings from Amsterdam!

avoid the inline code try
<div id="social_media">
<img src="icon.png" alt="Show Social Media Buttons!" />
</div>
attach a mouseenter event handler to the img
$(function(){// short cut of $(document).ready(); read more on google
$("#social_media>img").bind({
mouseenter:function(e){
$('#social_media').load('external_file.php');
}
});
});
P.S the selectors are not optimized nor the outcome of this code it was just to give you an idea
DEMO

The answer to your real question is "the code is kinda middling." The reason the icon went away is because when you called load you replaced it. Internally your document is a tree of piece of the document called the DOM, for "document object model" -- abusing terminology, since that tree is actually an expression of the model, not the model itself.
There's a node in that tree that is your div, and it contains a node with the icon img. When you do the load(), that node is replaced with what you loaded.
As #john says, it's undesirable to put code like that inline, because when you want to figure out what it's doing later, it can be hard to find.

Several things to note:
You really should avoid inline JavaScript code in HTML, that's not clean at all. Move it to an external JavaScript file of possible, or, at least, in a separate <script> tag. It will be ways easier to maintain.
Using this method to fire the event only once seems odd. You should use the jQuery one method, which is made exactly for that.
The icon just disappears because the load method replaces the content of the div in which the icon is.
For example, IMO, the code should be:
$('#social_media').one('mouseover', function(){
$(this).load('external_file.php');
});

Hide Image Title Tool Tip Popup on Mouse Rollover or Hover

I'm hoping I can get this question answered here...
I have a client who wants to add a PayPal "Add to Cart" button inside a Lightbox window. I was able to achieve this by placing the PayPal code inside the image title tag.
Not sure if this was the best way, but it worked.
However, here is my problem...
Now when you mouse over the image thumbnail the image title tooltip popup displays the PayPal code. Not good...
Is there a way to disable this feature? Can I tell browsers to not display this popup?
Here is the link (I only applied the code to the first two photos):
http://lancemissionart.com/index.php?Page=gallery&title=fof&gallery=msd
Thanks!

I would modify lightbox to use a different attribute instead of title, like paypalForm. Modification on line 398 of lightbox.js.
398: imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('paypalForm')));
The other option would be to only set the title attribute onMouseDown and setting it back to empty string when the lightbox is closed.

You should change from using Lightbox to Thickbox (looks like you might be experimenting with it in your code). Lightbox is for images only (even though you've made it work its pretty ugly putting all that in the title tag and pretty wrong), Thickbox will let you include your form.
http://jquery.com/demo/thickbox/

Thickbox it is not maintained any longer!