Develop Reference

Google Tag Manager - CSS selector challenge

I am trying to get the URL of a link in the source code. The challenge is that the URL is hidden behind a image, and thus only letting me fetch the image-url.
I've been trying to figure a way to solve this issue by using the new CSS selector in the trigger system and also made a DOM variable that should get the URL when the image is clicked. There can also be multiple downloads.
Here is an example of what I am trying to achieve:
<div>
<div class="download">
<a href="example.com/The-URL-I-Want-to-get-if-top-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Another-URL-I-Want-to-get-if-middle-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Last-URL-I-Want-to-get-if-bottom-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
</div>
</div>
There are much code above and below this snippet, but with the selector it should be fairly easy to get the information I want. Only that I don't.
If anyone have met this wall and solved it, I really would like to know how. :)

This is one possible solution. So as I understand it, you would like to grab the anchor element's href attribute when you click the "download" image.
A Custom Javascript variable would need to be created so that you can manipulate the click element object:
function(){
var ec = {{Click Element}};
var href = $(ec).closest('a').attr('href');
return href;
}
So you will need to do your due diligence and add in your error checking and stuff, but basically this should return to you the href, and then you will need to parse the string to extract the portion that you need.

HTML Javascript Combine SRC, Link, ALT tags

I am wondering if anyone knows a way to combine the "a href", "img src", and "alt" tags. We deal with a large amount of images and it is pretty tedious copying and pasting the same thing for all three fields for each picture in dreamweaver. Doing it once would be ideal. From what I have seen there is probably not much of a chance in doing this. I am using either HTML or Javascript.
<a href="../../0_Images/CRG_UnitType.jpg" target="_blank">
<img src="../../0_Images/CRG_UnitType.jpg" alt="CRG_UnitType.jpg" width="775" height="617" border="2" class="picture">
</a>

AngularJS can also solve this problem. Source it in your HTML and set up a controller that includes your image data, and then you can use ng-repeat. The result is something like this.
<div ng-repeat="image in images">
<a href ="{{image.href}}" target="_blank">
<img SRC="{{image.src}}" width="{{image.width}}" height="{{image.height}}" border="2" class="picture">
</a>
</div>

First of all, your alt attributes should not contain your image file name, they should be used to describe the content of images in case they don't load, or in case someone visually impaired navigate through your website.
To answer the question, you definitivly need to use some server-side language to save time.
You could for instance display all your images quite easily with PHP by looping through an array of files and titles.
You need some basic understanding of this language (or any other server-side language) before doing so but the time you'll spend doing so won't be lost.

It's possible,
you can use jquery to do what you want, and if the src is the same of the href as in your example the way is:
In HTML use only image, and place an additional class:
<img src="../../0_Images/CRG_UnitType.jpg" alt="CRG_UnitType.jpg" width="775" height="617" border="2" class="picture auto_add_link">
Now add jquery function:
$( ".auto_add_link" ).wrap(function() {
return '';
});
Not so pretty, but it works
Demo on jsfiddle

Way to trigger FancyBox by clicking on <div> rather then <a>?

I am having issues with my CMS - its seems it doesn't like having an <a> tag within an <a> tag as my Fancy Box 2 set up has.
To test I replaced:
<a class="fancybox" href="#popup">
with
<div class="fancybox" href="#popup">
This solved my original issue, but because its not legitimate mark up and breaks a lot of the other code.
Would anyone know a correct way to modified Fancy Box 2 to do this?

You can always bind fancybox to any element other than the <a> tag with a valid (HTML5) structure and functionality, using the special fancybox's data-* attributes like :
<div class="fancybox" data-fancybox-href="#popup">open fancybox</div>
See JSFIDDLE

How to edit text for a link that does not have an ID using Javascript

I want to change the text of a link using javascript. The problem is this particular link does not have an id. I am unable to change the html, as this is a SharePoint page, and this particular link is created by a page layout, which I do not have access to. Using IE Developer Tools, I see that the HTML surrounding the link is this:
<span id="DeltaPlaceHolderPageTitleInTitleArea">
<span>
<a href="#ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink">
<img width="0" height="0" style="border-width: 0px;" alt="Skip Navigation Links" src="" /></a>
<span>
<a title="State-Compliance" href="/sites/tax/Compliance/SitePages/State-Compliance.aspx">State-Compliance</a>
</span>
<a id="ctl00_PlaceHolderPageTitleInTitleArea_ctl00_SkipLink"></a>
</span>
The link I wish to change is the second one, the one with "State-Compliance" for the tooltip.
I looked at jQuery, and found I could use $('#DeltaPlaceHolderPageTitleInTitleArea').find("a").text("Test"); to change the text, but it changes the text of all three links. How can I change just the one? Do I need to iterate through the three, or is there an easier way of getting the link I wish to change?
Sorry if this is a stupid question, I'm a c# developer, and this is my first experience using javascript.
Let me know if you need more information.
Warren

Use .eq():
$('#DeltaPlaceHolderPageTitleInTitleArea').find("a").eq(1).text("Test");
jsFiddle example

How about this, using the attribute equals selector:
$('#DeltaPlaceHolderPageTitleInTitleArea a[title="State-Compliance"]')

problem with using javascript to load Quicktime into div from link

I have a left <div> (id = 'videopane') and a right <div> containing a clickable list of items.
I am trying program this: You click on one of the items in the right <div>, it loads the Quicktime movie into the left <div>.
I am using the JQuery media plugin to generate all of the embed code. and it works if I simply input the code <a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a> into the left <div>.
It does not work when I try to apply this code to one of the items in the list in the right <div>, although the code seems fine to me:
<a href="#" onclick="document.getElementById('videopane').innerHTML='<a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a>'">
Any insight into what I am doing wrong?

The jQuery plugin you are using is taking the movie source from the href of the link. So you would do it link this.
<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />
This will generate when clicked.
<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov">
<embed src="sample.mov"
pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>
<div>My Quicktime Movie</div>
</div>
Make sure to add this after you include jQuery and the plugin.
$('.media').media();

html that is generated on the fly will not work, right away,
make sure that when you add the anchor tag to run the plug in function:
<a href="#" id='rihana' >Rihana</a>
Javascript
var movie = document.getElementById('rihana');
movie.onclick = function () {
document.getElementById('videopane').innerHTML= '<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />'
// then run the plugin function.
$('.media').media();