I want to render "reload" github buttons correctly, when i press on another button. I searched and i got this information, but I can't do it, i faced another error:
Uncaught Error: Module name "github-buttons" has not been loaded yet
for context: _. Use require([]).
when i include http://requirejs.org/docs/release/2.2.0/minified/require.js
Node.JS is a server-side technology, not a browser technology. Thus,
Node-specific calls, like require(), do not work in the browser.
See browserify or webpack if you wish to serve browser-specific
modules from Node.
But you can use their steps in order to make this button...
Usage:
Place this tag where you want the button to render
<a class="github-button" href="https://github.com/microsmsm" data-
size="large" aria-label="Follow #microsmsm on GitHub">Follow
#microsmsm</a>
Place this tag in your head or just before your close body tag
<script async defer src="https://buttons.github.io/buttons.js"></script>
Code Example:
https://codepen.io/Microsmsm/pen/NvJaNm?editors=1100
Reference:
https://buttons.github.io/
Related
I'm writing an extension that scrapes web pages using jquery. After a while I start getting net errors saying resources not available and errors in the console loading images in the pages I'm scraping. I thought it might be $.get() loading it as html somehow, but it still happens when I use a raw XMLHttpRequest and it appears even when I call $(text) with static text.
Looking in the application tab of my background page I can see that there are images, even though they don't exist in the html. For example run this in the console of any extension background page:
$('<div>Hello, world!<img src="https://www.gravatar.com/avatar/fdc806d0a8834e57b2d9309849dea8cd"/></div>')
And you can see the image was loaded on the Application tab in dev tools, though it isn't in the html of the page when inspected and but it's visible on the network tab:
I assume that jquery is creating dom elements to use the browser's capabilities for finding elements, and that chrome is happily pre-fetching that image even though the element isn't on the page and the page will never be visible anyway, but it is causing me errors besides the extra network traffic.
I've tried disabling 'precache' in chrome://flags but that didn't work. For now I'm replacing <img with <noimg which seems to work but is not ideal:
$(text.replace(/<img /g, '<noimg '))
Is there a way to keep this from happening? Is there another library besides jQuery (like cheerio in node) that wouldn't actually create dom objects?
Use the built-in DOMParser to parse the HTML into a detached document, then use jQuery on that document object:
var doc = new DOMParser().parseFromString(yourHTMLstring, 'text/html');
$('.some.selector', doc).attr('foo', 'bar');
In case there may be relative links in the HTML, add a base element explicitly:
$(doc.head).append('<base href="' + realFullURL + '">')
Is it possible to access a (Polymer) web component's dependency (also a component) which the only thing it does is load a js script, and override that with another (newer version in my case) script?
Concrete problem: I'm using various Polymer elements (say paper-dialog for example) which use neon-animation whose different animations all import the web-animations HTML which loads the script I want to override.
In other words I would like to perform something like what the /deep/ combinator does for CSS to penetrate into this specific HTML 'component' and add a newer version of the web-animations-next-lite.min.js script.
As for the why: the idea is to use a Chrome extension to perform this since remote update is not an option (internet connectivity limitations). I need to do this since with Chrome v54 our app "broke" (since we use an older web-animations version) by fixing the WebAnimations API so these errors broke animations and with that functionality (popups not appearing).
I already tried injecting the newer version script in my main HTML body with Chrome extension's content script but didn't have any luck there..
Thanks in advance for any ideas!
I know its a bit of a hack, but can't you just put your own version of the web-animations script in bower_components. The problem with trying to alter the polymer element in place is that it will have already loaded the script before you can get at it.
Listen to the load event on you HTML Imports <link>, then add a <script> element with the right src attribute.
It's this last downloaded (and parsed) script that will be taken in account.
<script>
function loaded() {
//file.html loaded
document.write( '<script src="new-file.js"></script>' )
}
</script>
<link rel=import href="file.html" onload="loaded()">
Issues when using Meteor with default Handlebars template.
When I move the tag below into the html body, it autoplays just fine. But in the context of a handlebars template, I see the controls but it does not autoplay. Any way to overcome this??
<template name="showMedia">
<div class="background_audio">
<audio controls autoplay>
<source src="assets/screenDisplayAlert.wav">
</audio>
</div>
</template>
Use Template.showMedia.rendered to execute some code after Meteor has rendered the template. For instance, you could call audio.play() or re-apply any missing autoplay attributes.
The reason this isn't working may have something to do with when the browser hooks up autoplay. Being re-rendered by Meteor may not invoke those same hooks. Personally, I feel like that should "just work". If you can't get it fixed, you might consider filing a bug on Github to see if the devs can reproduce or figure out what's going on.
You could try adding some javascript inside a Meteor.startup() block on the client. For reference see Starting and Stopping Audio in Javascript and how can I play a sound clip on page load?.
I don't know why it works outside a template and not inside, but I'm pretty sure the JS will work, and discretion is the better part of valor :)
I am writing a chrome extension that is a 'content script'
I want to inject a google map on to a webpage.
Problem:
It appears that i have no way to add functions on to the window object, thus i cannot define a callback function for googlemaps to call when it loads.
How do people usually go about mucking with the window?
--
someone on the interwebs suggested i do this:
You can do this easily with a JavaScript URL: window.location =
"javascript:obj.funcvar = function() {}; void(0);"
but when i did this i got an access denied error. it seems like a lot of search results about this problem are outdated.
Content scripts have a separate JavaScript execution ennvironment from the page they run on, so they cannot alter JS variables in the page itself. However, the content script shares the DOM with the page, so you can inject a <script> tag into the DOM which will be loaded and run in the actual page's execution environment.
I just want to show multitab on each node page. and want to pass node id to each tab. each tab should load content either via ajax if noscript it should load via url
Please help me with this any tutorial or reference
Thanks,
Edvin
Create a View that use the node id as an argument. Then you may use Panels to display your view at the desired nod, using tabs style.
Let me know if that was enough to solve your problem. :)
this module will do exact thing , though its more like an api, you have to create link using the function this modules provides .For example
l_ajax("add page", "node/add/page", "#content-content")
OR
<a class="ajax_link" href="node/add/page" rel="#content-content">Add page</a>