We Keep Coding

How do I use JQuery to wrap a specific image (located in the header) in an anchor tag?

I'm trying to use tag manager to inject jquery on a site in order to make an image in the header link to a specific page on the site. The code is working almost completely across the board, but not 100% (seems odd to me).
The image:
<img class="img-responsive margin-auto" src="/assets/misc/12345/image.png" alt="example" aria-label="example">
The JQuery:
<script type="text/javascript" id="img-link">
$(document).ready(function() {
$("img[src*='image.png']").wrap("<a href='example.com/image-related-page.html'></a>");
});
</script>
The image is a direct child of a div for mobile screen sizes and a list item for desktop screens (dealing with website platform here, which is the reason for tag manager.) what am I doing wrong?
Edit: the image is not clickable after the first visit to a certain page of the site (but works as expected on all other pages). unfortunately, due to me having to do this as a workaround the platform that this website is on, a minimal, complete, and verifiable example isn't really feasible.

If I understand what you are trying to do correctly it is to append an image to an anchor tag. You should give the anchor tag an Id: <a id="someId" href='example.com/image-related-page.html'></a> set a variable var img = $("<img>"); img.attr("src", "image.png"); and then with jQuery you could say $("#someId").append(img)

Try this:
$("img[src$='image.png']").wrap("<a href='example.com/image-related-page.html'></a>");
replaced * with $ according to Attribute Ends With Selector [name$=”value”]

Browsers bug on document.write

I have multiple widgets like this
var c2409 = "<div class="products">PRODUCT1 PRODUCT2 PRODUCT4 ...</div>";
document.write(c2409)
And I call this
<script src="website/getjswidget.aspx?cid=xxxx-xxxx-xxx-xxxx"></script>
Now looks like sometime after I clear the cache, this replace everything in my html and I get a blank page only with this div from my widget.
Any other solutions to replace document.write?

This is by design.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
Source
If you want to append data to your webpage, use this:
document.body.innerHTML += 'your HTML code to add'
Edit: If you want to show this in a particular element, you can do something like this:
<!-- HTML element -->
<div id="myData"></div>
<!- Javascript code -->
document.getElementById('myData').innerHTML += 'your HTML'
Edit 2 (After some searching): You can get the current script element by using document.currentScript and then perhaps use Node.insertBefore to create a div right before that script tag, to put your data in.
Edit 3: Apparently document.currentScript doesn't work in IE. But this answer may help.

How do I append the src attributes to a set of images after they have loaded?

Here is my scenario:
I am having a page with pagination and enhanced with infinite-scroll
The page has a list of items, where each item looks like this in smarty
<div id="link-{index}">
<div align="left"><a href={$url}></div><div alight="right"><img src="" id="{$url}"></div>
</div> <script>imager({$url});</script>
I am using a service to dynamically grab image src for a given URL and append it to the image by defining imager(x){ document.getElementById(x).src = service(x).image; }
Now this works, as in shows correct images along side URLs as long as normal pagination is used. Doesn't work for page 2 onwards with infinite scroll as it uses JQuery and that parses out the imager JS script for each item.
I am stuck with trying to create a callback function for infinite scroll that will do what imager does but after a page is loaded but I am unable to get it to work.
Any tips will be appreciated. Thank you

In the callback for when a new page is loaded, you can do something like this:
$('img:not([src])').each(function() {
$(this).attr('src', service($(this).attr('id')).image);
});
This assumes that the only images without a source are those that were just loaded by the infinite scroller. If the widget provides parameters to the callback that tells it which parts of the DOM were just paged in, you may be able to use that to narrow down further; the second argument to a jQuery selector is the context to search.

Static content in website

I've got a website and I'd like to make a part of it static. What happens is that the header, the menu bar and the footer are consistent in every page. I'd like to have them always loaded and when I click the menu button, it will only reload what is the body of the site.
Is there a simple chunck of code that can early achieve this? Something in js or ajax? I'm sorry but I don't have enough experience in these languages to accomplish something on my own. I've already tried to check jQuery library but it's still pretty confusing to me.
Thank you.

I think you don't even need Ajax or css!! Just use iFrames!! They are awesome, what happens is that u only design one page as the holder of your static content (Header-Menu ...) and put one iFrame in there as a place holder for any page you want to load in it, u should use proper css code to place the iFrame where you want, now, for every link in your menu, just set the "target" attribute equal to your iFrame's name and all the links will be loaded in that iFrame and your page won't be reloaded with every link click... I'll be back with some code...

Just add in every page a div container with ID for header, menubar and footer and just load it with this:
$(document).ready(function(){
$('#header').load('header.html');
$('#menubar').load('menubar.html');
$('#footer').load('footer.html');
});
Just make sure that the html files don't have html, head or body tags within, only the HTML-Code you would write inside the div. It's just like the include function in PHP.
EDIT:
For easy and simple implementation store the code above inside a .js file (e.g. include.js) and add this inside every head just below the include of all other scripts of your html files:
<script type="text/javascript" src="include.js"></script>
EDIT2:
Another solution ist to load the content of the page instead of the header, menubar, footer.
Here you take the same specifications (no html, body, etc. tags inside your content html files)
Name your content div e.g. <div id="content"></div>
Your navbar for example:
<div id="navbar">
Content1
Content2
</div>
JavaScript Code:
$(document).ready(function() {
//Click on a link that's child of the navbar
$('#navbar > a').click(function() {
//Get the html file (e.g. content1.html)
var file = $(this).attr('href');
//Load this file into the #content
$('#content').load(file);
return false;
});
});

You should consider the use of Server Side Included : http://httpd.apache.org/docs/current/howto/ssi.html
It's not quite easy to understand (as it refer to apache configuration), but this is a really great solution.
In a nutshell, you include parts of html code in you main page :
<!--#include virtual="/footer.html" -->
You won't have to use or understand all JQuery Framewol, user agent won't have to parse (if they are able to !) Javascript.
This is a pretty good replacement of PHP / ASP / Java for this kind of purpose.

You could use ajax to request the body of each page. But this is only one possibility - there are many. An other approach could be to create you page content using a script language (php, perl) serverside and employ a function there which adds footer, header and anything else to each page.

If you have an idea of Jquery then use click event on menu links to load the page in a div like the following syntax may help you.
$(document).ready(function(){
$("a.menu").click(function(){
$("#bodyContent").load("http://abc.com/your-linked-page.html");
});
});
To load the url dynamically use the following code:
In your menu bar the link looks like:
Home
In your Jquery code:
$(document).ready(function(){
$("a.menu").click(function(){
url = $(this).attr("title"); // here url is just a variable
$("#bodyContent").load(url);
});
});
Step 1: Add Jquery file into your html page.
Step 2: Use the above jquery code and change your menu link to the new what i said here.
Step 3: If you done it correctly, It will work for you.

How about a traditional iframe?
In your menu:
<a target="body" href="URL_to_your_Menu1_page">Menu1</a>
and then further in the document:
<iframe name="body" src="URL_to_homepage"></iframe>

You may use frameset and frames and organize you pages accordingly. So, frames containing menus can always be at display and while displaying contents on click of menu u may set target to frame in which you would like to load the contents.

How can I create a javascript badge or widget?

I want to create a javascript badge that displays a list of links. We host the javascript on our domain. Other sites can put an empty div tag on their page and at the bottom a reference to our javascript that would render the content in the div tag. How do you implement something like this?

I would give the SCRIPT tag an ID and replace the script tag itself with the DIV + contents, making it so they only have to include one line of code. Something along the lines of the following:
<script id="my-script" src="http://example.com/my-script.js"></script>
In your script, you can swap out the SCRIPT tag for your DIV in one fell swoop, like so:
var scriptTag, myDiv;
scriptTag = document.getElementById('my-script');
myDiv = document.createElement('DIV');
myDiv.innerHTML = '<p>Wow, cool!</p>';
scriptTag.parentNode.replaceChild(myDiv, scriptTag);

just as you say, have them put a div at the bottom of their page:
<div id="mywidget"></div>
then have them link to your javascript:
<script type="text/javascript" src="http://yourdomain.com/mywidget.js"></script>
then have them alter their body tag, or onload to call your script
<script type="text/javascript">
document.body.onload = loadYourWidget();
</script>

You do not necessary need an initial div to fill with you link list.
Simply create the div using document.write at the place where the script is placed.
<script type="text/javascript" src="http://domain.com/badge.js"></script>
... and in your script:
var links = [
'One',
'Two',
'Three'
];
document.write("<div>" + links.join(", ") + "</div>");
Another benefit is that you do not have to wait for the page to be fully loaded.

Like #Owen said, except why not craft your javascript so that
<script type="text/javascript" src="http://yourdomain.com/mywidget.js"></script>
does the work of populating <div id="mywidget"></div> on its own, thus negating the need for them to call loadYourWidget() from their DOM load if you include the script tag right after the mywidget div in the html source. This isn't really a best practice, but I think it'll work.
Example for your mywidget.js code:
document.getElementById('mywidget').innerHTML = "<a href=''>LinkOne</a> <a href=''>LinkTwo</a>";

It took me some time to find this answer on Stackexchange because I was using different search terms. I believe that the link suggested there is a more complete answer than the ones already given here:
How to build a web widget (using jQuery)
It covers:
ensure the widget’s code doesn’t accidentally mess up with the rest of the page,
dynamically load external CSS and JavaScript files,
bypass browsers’ single-origin policy using JSONP.