We Keep Coding

How to target each post shown on a View Topic phpBB page to inject HTML using Javascript

Ok so I have a phpBB forum where the image attachments or inline images (using an image link) in posts don't format how I want them to. I want them to be inline with each other, but not with the text that is before or after them. I don't want to rely on the user entering in manual line breaks in the post, as they often don't know to do it.
E.g.
This is some text [I don't want the image here]
[I want the image here] [and another one here] [I don't want more text here]
[I want more text here]
I have this working, partly, but the code places a tag before the very first image on the entire page, and after the last image on the entire page. I'd like it to apply to each individual post on the page, affecting the first and last image within each.
This is my current code:
`
<script>
var firstattachedimg = document.getElementsByClassName("inline-attachment")[0];
firstattachedimg.insertAdjacentHTML('beforebegin', '<br>');
var attachedimgs = document.getElementsByClassName("inline-attachment");
for (var i = 0; i < attachedimgs.length; ++i) {
var lastattachedimage = attachedimgs[i];
}
lastattachedimage.insertAdjacentHTML('afterend', '<br>');
</script>
`
My question is, how do I get that code to run per post on the View Topic page, rather than running for the entire page and not hitting the right images?
The live URL is harleyforums[dot]co[dot]nz if you'd like to have a look at it. The code is placed in the footer template file and runs only on the View Topic pages. And here's a direct link to an example post where you can see what it's hitting and what it's not: harleyforums[dot]co[dot]nz/viewtopic.php?p=651#p651
Thank you!!

Figured it out. For anyone who's curious, this seemed to do the trick:
<script>
var posts = document.getElementsByClassName("post");
for(var x=0; x < posts.length; x++)
{
var firstattachedimg = posts[x].getElementsByClassName("inline-attachment")[0];
firstattachedimg.insertAdjacentHTML('beforebegin', '<br>');
var attachedimgs = posts[x].getElementsByClassName("inline-attachment");
for (var i = 0; i < attachedimgs.length; ++i) {
var lastattachedimage = attachedimgs[i];
}
lastattachedimage.insertAdjacentHTML('afterend', '<br>');
}
</script>

How can I select a generated title tag with jQuery?

I'm working on a SVG map (Raphael) on a Drupal site, and for some reason beyond me I can't get jQuery to affect the SVG map at all. I want to manipulate the <a> and its child (a path) using the title="skane" value as an anchor.
One weird thing is that when looking at the generated Raphael code in the inspector it says title="skane", but if i copy the entire block to jsFiddle I get xlink:title="skane" – what's up with that?
In a Fiddle it seems to be working just fine using $("a[xlink\\:title=skane]").hide(); but when I try to incorporate it into my script it doesn't do anything, even when entered in the console well after page load.
If I target all <a> tags with $('a').hide(); the whole map disappears as expected, so how do I select only the <a> with title="skane"?
Link to jsFiddle example
Any help is greatly appreciated!

Have you tried $("a[title='skane']").hide();?

I found this solution. However I am not sure if that´s what you need.
var parameters = document.getElementsByTagName("a");
for (var i = 0; i < parameters.length; i++) {
var attribs = parameters[i].attributes;
for (var j = 0; j < attribs.length; j++) {
if (attribs[j].localName == "xlink:title" && attribs[j].value == "skane") {
parameters[i].style.display='none';
}
}
}
Hope it Helps

Relative images broken, need javascript fix

new here. I have no access to most of the source files on my website, so I am trying to fix some broken images on page load with javascript.
When I use the inspect element for one of these broken images it shows like this:
<img src="-82.jpg" width="60px">
when they should be
<img src="http://example.com/files/images/-82.jpg" width="60px">
This is for bunch of different images, -82.jpg, -2482.jpg, -3582.jpg
Here's what I have tried so far. This seems to work but for some reason it breaks other javascript on the page.
html
<script type="text/javascript" src="http://example.com/files/js/fiximages.js"></script>
<body onload="fixImages();">
my fiximages.js file
function fixImages() {
var toReplace = '<img src="-';
var replaceWith ='<img src="http://www.example.com/files/images/-';
document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
}
I'm a bit of a noob so I also need to know how to link the html to the javascript to get it to load when the page loads. Thanks guys.

This should solve your problem:
function fixImages() {
// Create a list of all img which src starts with "-".
var imgs = document.querySelectorAll('img[src^="-"]');
// Loop through this list.
for (var i = 0; i < imgs.length; i++) {
// For each img, replace its src with the correct path + the
// src that's already there.
imgs[i].setAttribute('src', 'http://www.example.com/files/images/' + imgs[i].getAttribute('src'));
}
}
Demo

Welcome to SO!
The problem in your approach is that changing the body's pure HTML is never a good idea for a dynamic page. Also, javascript's replace, when used without a regex, is going to replace only the first ocurrence of the string.
Now, when you need to change an element's attribute, Javascript has a manipulation called DOM. There are plenty material and tutorials on the web... You should look into it!
http://www.w3.org/TR/DOM-Level-2-Core/introduction.html
http://www.w3schools.com/jsref/dom_obj_document.asp
With DOM, you can select an element as a variable, and manipulate its properties and attributes, so, in your case it would be:
function fixImages() {
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++) {
if(imgs[i].src.indexOf("-") == 0)
imgs[i].src = "http://www.example.com/files/images/" + imgs[i].src;
}
}

Userscript to remove Html-Lines, class and Attributes

I want to create one short userscript because I hate this annoying yellow smileys!
There are two html lines witch turns the normal smiley ( :) ) into the yellow icon
<span class="emoticon_text" aria-hidden="true"> :) </span>
<span title=":)" class="emoticon emoticon_smile"></span>
So, in the first line I have to remove the class and the aria-hidden
And in the second the whole line, it can be class="emoticon emoticon_smile", but also something like class="emoticon emoticon_cool"
I tried with:
document.getElementsByClassName("emoticon_ text").removeAttribute("aria-hidden"); document.getElementsByClassName("emoticon_ text").className = "";
but it failed, so I hope you guys can help me, because my Javescript/jQuery skills are bad..
Thank you
sorry for my grammar mistakes

document.getElementsByClassName returns a HTMLCollection, which is basically a array of elements matched. You have to iterate trough that collection and run your code for each of the elements matched.
Secondly, you'll need to find the emoticon itself and remove it, for that you need to get each emoticon's parent and tell it to remove the element. In the end, your code will look similar to this:
//Finds all emoticon texts
var emoticonTexts = document.getElementsByClassName("emoticon_text");
//Iterate over the results and remove the desired attributes
for (var i = emoticonTexts.length-1; i >= 0; i -= 1) {
var element = emoticonTexts[i];
element.removeAttribute("aria-hidden");
element.className = "";
}
//Find all emoticon images
var emoticons = document.getElementsByClassName("emoticon");
//Iterate over the results and remove them from the page
for (var i = emoticons.length-1; i >= 0; i -= 1) {
var element = emoticons[i];
element.parentNode.removeChild(element);
}
Also available as an example on JSFiddle

I would look into using jQuery. Once you have the jQuery library referenced in your project your solution should be as simple as:
$(".emoticon_text").removeAttr("aria-hidden").removeClass("emoticon_text");

How can I apply a function to several images in jQuery?

I need a little help with (probably) something really simple.
I want to use a script which converts images from color to grayscale.
I got it working partially — the first image turns gray, but the second won’t.
I know this is because an id cannot be used multiple times:
var imgObj = document.getElementById('grayimage');
I tried this:
var imgObj = $(’.grayimage’)[0];
But it didn’t work. Changing it to getElementByClass also does not work. (Before people ask, I did change the id to class in the <img> tag.)
I really could use some help here. Thanks in advance!

$('.grayimage').each(function(idx,imgObj){
<do your code here>
});

$('.grayimage') gives you a list of all elements with grayimage as a class. If you add '[0]' you're accessing the first element, so any changes you make will apply to only the first image that it finds with this class.
You should loop through all elements:
var images = $('.grayimage');
for(i = 0; i < images.length; i++) {
var image = images[i];
// Do stuff
}