LinkedIn link not always displayed on Angularjs website - html

I am working on a not for profit website in Angularjs and when i add the LinkedIn and Facebook share buttons, the Facebook button is always displayed but the linkedIn button is only displayed on initial load only.
When I go to mcwn.org the buttons are displayed. When i click through the tab buttons at the top and then go back to the home page by clinking on the website logo at the top the LinkedIn button is not displayed.
Anyone with ideas? this is very frustrating.
Thanks

I think #pascal-sanchez in comment is saying, that linkedin js file is loading twice in your website .
In Console log you can find such error.
"duplicate in.js loaded, any parameters will be ignored"
If we will see "pure page code", we will find linkedin file just once. It tells us that second file is written asynchronously to header part. Probably it provokes errors on loading. You can try change this line:
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
to this
<script>
if (typeof (IN) !== 'undefined') {
// IN.parse(); // old but still supports
IN.init(); // reinitiating linkedin button
} else {
$.getScript("http://platform.linkedin.com/in.js");
}
</script>
This script will check if likedin already initiated and loaded, if not it will initiate it.

Related

Load content from URL into content-column

I am facing an issue with my script that uses the jQuery .load() method. The script is designed to load the content from a URL into a specific element on my page when a user clicks on a nav link. However, I am receiving the error message "TypeError: $(...).load is not a function." and I am not sure why this is happening.
Here is my script:
<script>
$(document).ready(function() {
// Add click event listener to all nav links
$(document).on('click', '.nav-link', function(event) {
event.preventDefault();
// Get the URL of the clicked link
var url = $(this).attr('href');
// Load the content from the URL into the content-column
$('#content-column').load(url);
});
});
</script>
I have made sure that I am using the latest version of jQuery and that it is properly included in my HTML file.
If anyone has any experience with this issue or knows how to resolve it, I would greatly appreciate your help.
Thank you!
Currently all scripts I have tried either result in a redirect to the actual url or the script works for one click and then stops working after that.

Share on Facebook, use URL redirection in a pop up?

I've checked out the docs and implemented sharing on my site.
I have implemented a URL redirection like so:
https://www.facebook.com/dialog/share?
app_id=145634995501895
&display=popup
&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fexplorer
When you click on the link on my website it opens as a new Facebook page and takes users away from my site. Is there a way using URL redirection to have it open in a popup? Or would I need to implement a JS solution to do this?
You should use JavaScript to open it as a popup.
JavaScript Code:
<script type="text/javascript">
// Popup window code for Facebook
function newPopup(url)
{
popupWindow = window.open
(
url,'popUpWindow','height=400,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes'
)
}
</script>
HTML code:
Click Here
Change the URL as your requirement.

How to determine what content is active on a page

I am at a bit of loss of knowledge and honestly don't know what to search for. What I need to be able to do is determine what content to show on a webpage that way when I refresh it will not reset everything. For example, if someone clicks on the messages tab I want the browser to know when it refreshes, that is the tab to stay on. I believe this is done through url encoding but I am not sure. Any help would be AWESOME! Thanks fellow coders.
MORE INFO: I have 2 buttons on a page. One is named "home" and when I click it I want the content of the home page to appear in a box named "info-main". I am doing this with ajax requests. When I click on "edit profile", I want the content in div id "info-main" to be replaced with the edit profile information that is retrieved via ajax as well. I need to figure out how if someone refreshes the page... I want it to stay showing the edit profile information rather then going back to the default of "home" content.
MORE INFO(AGAIN)
I just had a great idea. When the page refreshes, I want it to load specific ajax code based on what the url encode is.
For example.... if the url is:
http://www.exampleurl.com/index.php?info=status-load
I want the browser to execute the ajax I have for retrieving status's.
OR
If the url is:
http://www.exampleurl.com/index.php?info=edit-prof
I want it to load the ajax code I have for retrieving profile edit info.
I really hope this helps. :/
The way I do it is I place a # before the link i.e. href="#messages"
Then I link a .js with this code.
$(function () {
var hash = location.hash
, hashPieces = hash.split('?')
, activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
});
I hope this helps
For referring an element on your page, you use a link with a hashtag.
For example, if you have a layout like this:
<div class="top-nav">
Home
Edit Profile
</div>
And you have a password edit form on your editProfile page, you can like to it like this:
Edit Profile
if you have a <form id="passwordChange"> on your editProfile.
Read more: http://css-tricks.com/hash-tag-links-padding/

chrome-extension:// links open about:blank

I've recently been contributing to the Enhanced Steam extension and I've found that a link fetched with chrome.extension.getURL simply opens about:blank and not the link described.
I do not believe it's actually a problem with the extension, but rather a problem in chrome. The link it supplies is valid (chrome-extension://pimjhgjngccknempdnehdeaihcjbajod/options.html) and navigating directly works correctly.
I tried chrome.tabs.create, but found that I am not allowed to use it due to the script modifying pre-existing content.
Any help or work arounds would be appreciated.
I put all my required files into "web_accessible_resources", it solved my problem. See this in #4 https://bugs.chromium.org/p/chromium/issues/detail?id=310870#c4
It is Chrome's previous problem which is not secure. In build 31.0.1650.57, Chrome fixed this which is to force to put required files in "web_accessible_resources". In Chrome extension, lots of samples don't use "web_accessible_resources", those are the bugs, those samples will have this "chrome-extension:// links open about:blank" problem in build 31.0.1650.57.
Actually my chrome extension MarkView was facing this issue and I had to update its manifest.json to make it work for this Chrome update. By the way, MarkView is tool to read and write Awesome Markdown Files, it provides features including Content Outline, Sortable Tables and code block syntax highlight with line number.
Looks like a bug in Chrome to me. If you don't have too many pages like this to change then could you try using message passing to pass the page you want to open to the background page? Then use either window.open or chrome.tabs.create within the background page. Example code shown below:
//CONTENT SCRIPT
chrome.runtime.sendMessage({greeting: "OpenPage", filename:"somepage.html", querystring:"?aValue="+someVal}, function(response) {});
Then in your Background page
//BACKGROUND PAGE
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "OpenPage"){
open_page(request.filename, request.querystring)
}
});
function open_page(filename, querystring){
var pageUrl = chrome.extension.getURL(filename)+querystring;
chrome.tabs.create({'url': pageUrl }, function(tab) {
// Tab opened.
});
}

Injecting DIV-Tag at top of page AND Automatic start of script when page is loading?

I started to program my own Chrome extension today and I'm stuck since hours with one problem.
Right now, I'm sending the current URL from the open website to my server where it's checked against some criterias and then a return value is sent back to the extension. This is working so far. I'm using only a popup.html, no background page.
The request is only sent when the user clicks on the icon in the browser.
How can I realize that the request is automatically sent, when the page is loaded?
If there is a specific return value from the server the user should be given an unannoying warning. Alert boxes and new windows are...well...annoying. Best way should be the little popup under the icon of the extension but that's not possible without a user's click. So I thought of a little -layer at the top of the page.
<html>
<head>
<script>
window.addEventListener("load", sendRequest, false);
function sendRequest() {
var q = "test";
xmlHttp=new XMLHttpRequest();
xmlHttp.open('GET', 'http://www.testurl.com/check.php?q='+q, true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.getElementById("textf").innerText = xmlHttp.responseText;
chrome.tabs.executeScript(null,{code:"<div style='position: absolute; top: 0; left: 0; background-color=blue;layer-background-color: blue;'><p>test </p><p>test2 </p></div>"});
}
}
xmlHttp.send(null);
}
</script>
</head>
<body>
//Just for the popup...
<font color="blue"><p id="textf">Checking...</p></font>
</body>
</html>
If I do
chrome.tabs.executeScript(null,{code:"alert('testalert')"});
it gives me the alert. However, the isn't working and I can't figure out why :(
Do I need a background page for all this since I only want to check the URL when the page is loaded?
Why is the -thing not working but the alert is?
Thank you in advance!
chrome.tabs.executeScript is for JavaScript only. To add content to a Web page, you must write JavaScript that manipulates the DOM. A good place for you to start learning this may be Mozilla's DOM docs. (DOM is a W3C standard and Chrome has implemented it, so yes, Mozilla pages are relevant here.)
If I may say so, it sounds like the best way forward for you is to scrap this and start over with a content script defined in your manifest so that Chrome will execute it for you; check the Content Scripts documentation to learn more. Since you're trying to accomplish your goal with no background page, and would therefore need to use XMLHttpRequest directly from your content script, you should add "minimum_chrome_version": "13" to your manifest, as Chrome 12 and earlier won't let you do that.
By the way, practically no one will understand what you're talking about when you use "-layer" and "-thing" like that. Please be more careful in making sure you are using proper terminology. Ask your peers if you're unsure of the proper term for something.