Running JQuery or Javascript on Facebook - javascript

I am trying to execute a simple bit of jQuery or JavaScript once logged in to my Facebook account. The end goal at this moment is to click on my custom feed once the element is visible, rather than having it default to the entire Facebook friend feed.
On trying to code this using my Developer's Console in Chrome no JavaScript/jQuery seems to work at all. Even just a simple $('div'); returns null. Is it possible to run code on Facebook's page? What are they doing differently?
I guess the end goal would be to click a div if the .val('give a waffle'); but just understanding why it has not worked until now would also be interesting.
Any hints, tips or suggestions are more than welcome.

Facebook doesn't use jQuery, if you want to play with their page using jQuery commands you'll need to load it. Just copy the contents of http://code.jquery.com/jquery-1.7.1.min.js and paste it into your console first. Then proceed as usual.
Additionally you could let Google host your jQuery :
<script type="text/javascript"
src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// This is more like it!
});
</script>
Many sites do this so the chances of your user already having the library cached is relatively high.

Related

Android webview showing old website content instead of new

I am having an issue with webview not fetching fresh pages of my website. I did some thorough search and tried many different techniques but it didn't work till I found this code;
<link rel='stylesheet' href='style/jquery.mobile-1.3.2.min.css?ver=1.3.2'>
<script src="js/jquery-1.8.3.min.js?ver=1.8.3"></script>
<script src="js/jquery.mobile-1.3.2.min.js?ver=1.3.2"></script>
<script src="js/my_script.js?ver=201603111428"></script>
which simply says to add a new version number to my css etc whenever I make changes and it will load properly on my webview. Shockingly it worked but I have a feeling this shouldn't be the way to go about it, so I wanted to find out if there's a working script I can just add to my webview to make it load the online content each time not cached content?
Thank you for the help.
The part after ? character represents actually a log for the changes you made.
These docs should help you understand better why https://semver.org/
This is a good way and a preferred, it can be a simple hash number or an increment or a timestamp as long. But it must mark that the version the browser has cached changed. For that, we append that additional info in the name.

How to automatically run custom JavaScript code when loading a webpage?

Now I have a block of JavaScript code to change the display of a webpage, say to highlight some data so that when I read the webpage I can easily find them.
The code is super simple, you can just imagine it as
document.getElementById(index).classList.add("highlight")
index is used to find the content needing to be changed. I will append highlight class to the class attribute of found content so that the display would be changed (just for illustration of the purpose)
Now the problem is, whenever I open the webpage, I need to copy and paste this code to console in Chrome and run it, which is troublesome. So I am wondering whether it is possible that the Chrome will run this script automatically when I load the webpage. Say for example, I have a hyperlink directs to the webpage and when I click the hyperlink, the script will be run and the display of the webpage will be changed.
Tampermonkey is not really helpful in my case. I have another method to generate the JavaScript for different webpages so the script I want to run will change when I load different webpages.
There are some tools for this purpose you can use:
TamperMonkey
Tampermonkey is the most popular userscript manager, with over 10 million users.
RunJS
RunJS is a developer tool that allows users to debug pages by running specified JS across all page loads.
I highly recommend User CSS and Javascript chrome extension. I have been using it for years with no issues whatsoever. In fact, I have customized the vast majority of the websites I use on a daily basis using it!
You could actually use a bookmarklet which should simplify the process. https://gist.github.com/caseywatts/c0cec1f89ccdb8b469b1. If you want to fully automate it however you need to create a plugin
yes there is, try following code.
<script>
window.onload = function(){
alert("ready");
// place your code here ...
}
</script>
or just write your code at the bottom of file, like this
<html>
<head></head>
<body>
<!-- any html tags here -->
<script>
// any JS code here
</script>
</body>
</html>

Alter Youtube Video Page using Chrome Console JS & CSS

I was wondering if I could adjust the style of some html elmements on a web page using the google chrome console.
I watch podcasts on youtube. And I hate the fact that youtube suggests related videos that are miles ahead in the podcast timeline (i'm trying to catch up). I want to adjust a couple of element styles on the site.
What I want to achieve is to run the following code every time a youtube video page loads:
function youtubeVideoPageLoad()
{
youtubeFunction();
$('body').on('transitionend', function(event)
{
if (event.target.id != 'progress') return false;
$('#watch7-sidebar-contents').remove();
$('.html5-main-video').css("width","auto");
$('.html5-main-video').css("height","auto");
$('.player-height').css("height","720px");
$('.ytp-chrome-bottom').css("width","100%");
youtubeFunction();
});
}
$(youtubeVideoPageLoad);
This removes the suggested videos and makes the video and sub content bigger. Just nicer for me.
How can I make this possible because I get .css is undefined. Is this a problem because I cannot use jQuery in the console.
And how could I run this every time a youtube page is loaded?
Thanks
As rism mentioned, If you must do this via the console and using jQuery, you'll need to actually inject jQuery into the page yourself as Google does not use jQuery on the YouTube page.
Here's how:
var script=document.createElement('script');
script.src='https://code.jquery.com/jquery-latest.min.js';
var head=document.getElementsByTagName('head')[0]
head.appendChild(script);
Then you can use jQuery functions like jQuery.find('div').
You still wont be able to use the $ as YouTube has a different value assigned to $ already.
That said, I use Stylebot for this type of stuff. It's a Google chrome extension that allows you to add your own CSS to any website. It saves your custom CSS and applies it anytime you open that webpage.
I personally use it to remove unwanted google ad divs and to fix issues with page layouts when I dont own the page (jumpy menus and what not). I also use it to customize our work websites like Atlassian Jira and Confluence. It has worked well for me.
After you install it, there are a few ways to use it. The simplest is to...
Click the CSS browser action button
Click the "Edit CSS" button at the bottom of the flyout menu
Write your custom CSS in the provided box and click "Save"
I've no idea what your youTubeFunction is supposed to represent so I hope you do. As per comments $ probably doesn't mean jQuery on YouTube and this is conclusion is supported by console.log($) output. So best bet is too just use plain javascript as below or condense it into a single line:
function youtubeVideoPageLoad()
{
youtubeFunction();
var uBody = document.getElementsByTagName('body')[0];
uBody.addEventListener('transitionend', ytCustomizer);
}
function ytCustomizer(event)
{
if (event.target.id != 'progress') return false;
document.getElementById('watch7-sidebar-contents').style.display='none';
var vid = document.getElementsByClassName('html5-main-video')[0];
vid.style.width='auto';
vid.style.height='auto';
document.getElementsByClassName('player-height')[0].style.height= "720px";
document.getElementsByClassName('ytp-chrome-bottom')[0].style.width= "100%";
youtubeFunction();
});
youtubeVideoPageLoad();

Override fancybox from remote-file?

Well, I am using an popup frame and I would like to change some functions of it. But the file is remote file and I am not quite sure how to override javascript functions?
Basically I wanna override this part:
<div id="fancybox-overlay"></div>
Because I want to disable
hideOnOverlayClick
so instead of true, I want that function on false.
Also, is there any chance when that popup comes up, to run custom javascript timer that will force script close after 30 seconds or so?
Thanks in advance. I hope its possible in both cases.
Update:
<script type="text/javascript" src="http://fileice.net/gateway/mygate.php?id=4465766c4278366467523838"></script>
That is the gateway that includes fancybox and jquery. It runs on click of a button, so I hope by including that script you can get informations you need?
Update #2:
http://jsfiddle.net/pVp5h/
You could just download the javascript file you are using, make the changes you want, and host and reference it again yourself.
edit:
just noticed your link, and the file is copyrighted and minified. This means my previous answer is not a good idea... Are you even supposed to use this file?

AddThis share button wont work in DotNetNuke

For some reason when I add a HTML module (well the default module added to DNN 5.4) and then add the "AddThis" javascript. While the button shows up clicking on it opens up a new page rather than showing an iframe modal message or on hover a list of popular social media networks to share the page with. Wonder what would be the easiest way to resolve this and why this happens?
This is not a complete answer, but to me it sounds like the AddThis javascript code is never loaded by the browser. When viewing the web page that doesn't workg, open the HTML source and look for the AddThis script tag. It probably should look something like this:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=..."></script>
If you can not find it, then there is something to work on. If you find it, try to open the URL in your browser and see if you get the javascript.
Otherwise: as always, FireBug (or the tools in IE8) is your friend.
Try copying the addthis script reference and pasting it to the page header tags:
http://s7.addthis.com/js/250/addthis_widget.js#pub=AddThis

Categories

Resources