I'm new to this website so I'm sorry if I do something wrong, please tell me if I do so.
Problem: I'm trying to get a href from the current page I'm on with a button like "Get Href" and when it manages to get a href it will display text Href gotten or if it fails it says Href not found. If it does find it a new button appears which says Goto Href and that takes the user to the href. I've been searching the whole week for a solution but so far I have no luck. Also this is a chrome extension.
Useful Links Found So Far:
Need to link directly to a Chrome internal page, from within a page of a Chrome Extension
Select which href ends with some string - Can be used to find href starts with ^=
Content Scripts
I am new to HTML & jQuery & CSS & Javascript so I apologize for my lack of knowledge in advance. If you are able please explain your answers in detail. If answer is found please comment the functions out so I could manually research them further.
I don't know where to start, what I have so far is what the Getting Started: Building a Chrome Extension has.
----UPDATE .1----
I thank you for your replies and what I've gathered so far from them is this code
<script>
$(document).ready(function(){
$("button").click(function(){
alert($('a').attr('href'));
});
});
</script>
</head>
<body>
<button>Find Href</button>
</body>
but nothing seems to happen. Also instead of alert($('a').attr('href')); I'm trying to put $('a[href^="magnet"]') This code is gathered from different websites so I don't know if it is legit (still working) or not.
try this javascript:
document.location.href
I type it in the console and it returns:
http://stackoverflow.com/questions/24225281/html-jquery-get-href
, which is current link.
Before you start, you should read some javascript tutorials. Go search the internet for "javascript tutorial" (...please... do it). If you fail on this task, you will fail on others. This is not helpfull for you or others.
What do you want to do with "href" and why do you search only for chrome answers rather than search for a javascript answer.
Anyway, if you open the console you can test this by yourself.
alert(location) <-- shows you the current location of the browser
or every href of every a tag (in jquery).
alert($('a').attr('href')); <-- a lot of links ;)
Related
I just re-did a site, when I check it for broken links (using brokenlinkcheck), it comes up with 73 broken links that are all like this: www.example.com/site/numbers are here/${href}. Support over there tells me that (this quote is from one rep who got 'news' from another):
QUOTE: "did not find an issue. They had mentioned that the examples I showed were referring to tags with an attribute data-href that have the broken url. There type of links are not clickable and can not be visited and are mistakenly recognized by the tool as broken links. The link checker mistakenly alerts for 'data-href=...' (its not an href attribute)." END QUOTE
BUT, seeing the link in my email to them, I CAN click on it (why are they saying it's not clickable???). My main question is: will Google see this as broken links? Support is telling me there's no issue. But it looks like an issue to me. I cannot go in and fix myself, I would need specific wording to try and convince support to fix it. So, if you DO believe it is a problem, could you suggest how I word that in an email to support, who seems to think it is fine? Thanks so much for your help.
Without a URL to check it, or a sample of the html code, it is hard to say for sure. What the rep said does make sense, it is possible for the broken addresses to only be present in a data- attribute and therefor not to be clickable, Google would also not take these URLs into account while crawling the site.
Yes if you take the URL out of the data- attribute and paste it into an email it will be clickable but not clickable on your site. Again without a link to the site hard to say for sure.
Can you by clicking around your site get to and click the broken link? If not then it may just be a problem of the tool you are using.
I'm writing a Google Chrome extension.
In it I'm trying to run the following simple Javascript code:
document.querySelector("link[rel~=next]").click();
But doesn't seem to work for some sites.
For example, running it on here to open the next page doesn't work.
I've reviewed the existing SO questions on the subject but couldn't find an answer that I understand.
Some claim this has to do with security, is it true? if so, why does it work on some sites?
I am not sure how you can click on a <link> element in the document's head tag.
Shouldn't you be clicking on the actual next link?
document.querySelector(".next a").click()
I was looking into making Firefox addons, and I need some help.
Is it possible to edit an HTML page that is open in the browser with javascript?
For example:
User types in "google.com"
Addon is activated
Javascript changes contents of "google.com" to maybe say "Hello!" at the bottom.
Of course this isn't specifically what I want to do, but a push in the right direction on how to accomplish such a task would be great.
~Carpetfizz
From within a Firefox addon this is obviously possible as many extensions do this.
If you, however, simply want to modify the DOM and nothing else than I would recommend taking a look at greasemonkey. Loads of example scripts around to do this: http://userscripts.org/
And the added benefit, if written correctly they also work in Chrome and other browsers.
Yes, it is. You must find a tutorial about javascript DOM manipulation
I'm a complete beginner in the development side of things and would greatly appreciate any help.
I have the following code that refreshes an entire page when the browser is resized:
$(window).bind('resize',function(){
window.location.href = window.location.href;
});
However, I want the refresh to be targeted at particular iframes with unique id's instead of the whole page.
Again, thank you in advance for any help.
Use:
$(window).resize(function(){
document.getElementById('FrameID').contentDocument.location.reload(true);
});
And consider using classes instead of IDs if you have multiple iFrames.
I am having issues with the Facebook social widget and I was hoping this would fix it. Your code was helpful (a good start).
That said, it did not work.
I will post a solution if I find one. Facebook really needs to update their widget. It really is problematic with responsive sites (mobile devices). Considering they created React code, it really is not very well written.
jQuery seems a better solution since I did not have an id to target) but the problem is deeper within the iframe.
// refresh facebook iframe on page resize (did not work)
$(window).resize(function(){
$('.fb iframe')[0].contentDocument.location.reload(true);
});
//--- other ways to reload iframes---
//reload 1 iframe
$('#iframe')[0].contentWindow.location.reload(true);
//reload all iFrames
$('iframe').each(function() {
this.contentWindow.location.reload(true);
});
//Another way to reload all iFrames
$('iframe').attr('src', $('iframe').attr('src'));
Update...
I found these two well-written pages on the subject. Hopefully, it works.
How to make the Facebook Page Plugin fully responsive
Making The Facebook Page Plugin Responsive
UPDATE
The code above is nice, but they did not have it ready to rock and roll. The showed examples for their site and I almost got it working, but there is still a bug in my code.
so...
This is totally cheating, but I was looking at the source code and opened the iframe location from Facebook and it actually worked (it seems allowed). So far it seems to work with other profiles too (so long as you grant permission first).
I just hardcoded the iframe vs using their JavaScript code. It also works 1000x times better/faster this way and it is already responsive. It is nuts I had spent so much time with trying to fix Facebook's code. Using a straight URL link in the iframe loads way faster (geezzz).
Here is an example of what I used for the final URL (I cleaned up the unneeded parameters.
https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FYOURFACEBOOKUSERNAME&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500
Again, keep in mind for this to work, you need to create a social box at Facebook first, so that you can grant permission. I tried to do it with my personal username and since I have never created one before, it did not work. Again, this is theory, but that makes sense.My actual site is using another client and I also tested other clients. It seems to work fine.
No promises it will work on a live site. It is possible Facbook blocks users that do not use it via the script, but we will see. I am guessing Facebook may use scripts in the code to check for location source, so this way may fail over time (don't know yet). Also, it is possible I am missing a needed key that Facebook genarates from the script thatI failed to notice (or removed). I was careful when I cleaned it up, and I did not want to include more than needed. We will see.
Anyways, try your own tests via the source code please. I need to work on other more important stuff, and this works and seems to be a simple very effective solution. I will have more time later if it fails. The client wont know and again, it is faster and seem to work better.
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>
ONE MORE UPDATE.
It seems to be working, but I still need to send a refresh to the URL in the paramaters for the width. Also, note the maxium width for the social widget is 500px (so if you have a need for one bigger, it wont go more unless you use some kind of transform in CSS).
Here is the final code.
Funny about all this, I am back full circle. I am using some of the code we talked about above and some new code I figured out and wrote.
:)
Also noteworthy, I noticed the StackOverflow console is giving me an error.
Please ignore it. The error has something to do with the iframe reference calling Facebook which StackOverflow does not like. As far as I can tell, there is no error.
If I am wrong, let me know.
// Fixes Facebook iFrame on page resize (Responsive)
$(window).resize(function() {
$('#fb-iframe').attr('src', "https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=" + $('#fb-iframe').width())
});
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<iframe id="fb-iframe" src="https://www.facebook.com/v2.12/plugins/page.php?adapt_container_width=false&height=&hide_cover=true&href=https%3A%2F%2Fwww.facebook.com%2FInternetBuilderConsulting&locale=en_US&show_facepile=false&small_header=true&tabs=timeline&width=500" width="100%" height="100%" allowtransparency="1" scrolling="no" frameborder="0"></iframe>
I used tumblr's javascript embed code to embed my posts into an external website. Now I want to style the posts. Where can I find the full list of tags, classes, and all of that in order to do this? I see people posting some of the tags, for exampe ol.tumblr_posts, but no one has said how or where they actually found out that's the tag tumblr is using for that particular element.
Someone mentioned using the web developer extension in Firefox to pull out the HTML associated with the javascript file but I can't use Firefox so I need another suggestion? I did go to tumblr's docs but the tags and everything used for customizing themes WITHIN tumblr seem to be different from the ones used to display posts outside of tumblr.
I also looked around in the api section and didn't see anything that lists all of the tags. Thanks!
UPDATE: Here's a post that discusses what I'm talking about but none of the people giving answers that show what tags to use to format the script's output say how or where they got the tags.
tumblr javascript embed with css skin
This website is the one that said to use the FF add on but again, the person who figures out how to find the tags using it doesn't say HOW, they just say it worked. I'm finally in a place where I can use Firefox so I installed this web developer thing and I still don't see where I would go to see the info that shows the actual html with all the styles instead of just showing the link to the js code.
http://forums.macrumors.com/showthread.php?t=745299
Chrome and Opera's developer console is CTRL + SHIFT + I... try looking in the source there
IE's dev tools is f12 if you can't use Chrome
Also: I'm not sure if this is what you're talking about but I'll throw in this link for good measure:
http://www.tumblr.com/docs/en/custom_themes
I figured it out! Unfortunately, the only way I could do this was to use the Firefox Web Developer Toolbar Add-On. Once you have that installed, you go to the webpage where you've embedded your blog's javascript code.
Then, in the Firefox toolbar, there should be a tab that says "Miscellaneous". Click on that, then click on "Edit HTML". A new pane opens up towards the bottom of the browser. Inside, it will show the source of the webpage INCLUDING the information that the javascript code generates, which shows the classes, html, and all of that.
It's still not a ton that you can customize compared to using the api (which I don't know how to do) but it's a start. Thanks everyone!