jQuery not selecting every image - javascript

I'm currently working on an userscript for a forum, however, it doesn't seem to work.
The forum has two themes, I want to replace the userbars (located in /groupimages/) from the new theme with the ones from the old theme.
I'm currently trying this:
$("img[src*='/groupimages/']").each(function() {
$(this).attr("src", $(this).attr("src").replace("/modern_pl/", "/blackreign/"));
});
/modern_pl/ is the directory of the new theme, /blackreign/ of the old one.
An example URL of an image is /images/modern_pl/groupimages/english/strange.gif
It does select some pictures, but not all. It looks like it suddenly stops, without giving out any error message in Chromes JS-Console.
Lets say the strange.gif is there 3 times on the page, it only replaces it once. Some other pictures (that should be selected because the source contains /groupimages/) are completely ignored, so I doubt that this is happening because one picture is there more than once.
Any ideas?

To me the snippet looks good.
Did you place it inside a Document ready function? If not, the problem could be that the pictures just aren't yet loaded when the script runs.
Try this:
$(function(){
$("img[src*='/groupimages/']").each(function() {
$(this).attr("src", $(this).attr("src").replace("/modern_pl/", "/blackreign/"));
});
});
UPDATE
Its hard to help when the code you present works.. but lets assume there is content loaded by ajax after the page loaded completely.
You could do this.. which is not nice at all.. but assuming you don't have further access to the code on the website, try this:
setTimeout(function(){
$("img[src*='/groupimages/']").each(function() {
$(this).attr("src", $(this).attr("src").replace("/modern_pl/", "/blackreign/"));
});
},1000);
This waits a second for other scripts to be loaded before running your code.

Something like that ?
var img = $( 'img' );
img.attr( 'src', img.attr( 'src' ).replace( "\/groupimages\/", "\/modern_pl\/") );

Related

Clicking particular class name on webpage doesn't work JAVASCRIPT CHROME EXTENSION

I'm working on chrome extension. In one of my files (content script) I want to remotely click a particular element of a particular webpage. I know class names names showed in img of elements that I would like to be clicked.
Unluckily any options doesn't like clean JS or jQuery work for me (but 2 days ago it worked and I didn't change the method!). I know that content script is on the page I want, because of the console.log. My content script content (yeah desperately I try every option to show that it doesn't work at all, even one single options of those underneath is not working).
let check = location.href;
if (check.includes("categories")){
try {
console.log("works");
$(document).on('click', '.styles__Label-causv5-1 giszo', function() {
alert('hello');
});
document.getElementsByClassName('.articleButton___wrapper___3GdN_ core___flip-container___11Bqu').click();
document.getElementsByClassName('.styles__Label-causv5-1 giszo').click();
document.getElementsByClassName('.sc-AxmLO egaafL auto-tests-add-to-cart-button articleButton___add-to-cart___1Nngf core___flipper___3yDf4').click();
document.getElementsByClassName('articleButton___wrapper___3GdN_ core___flip-container___11Bqu').click();
document.getElementsByClassName('styles__Label-causv5-1 giszo').click();
document.getElementsByClassName('sc-AxmLO egaafL auto-tests-add-to-cart-button articleButton___add-to-cart___1Nngf core___flipper___3yDf4').click();
$('.styles__Wrapper-causv5-0 eBUpQR auto-tests-add-to-cart-button articleButton___add-to-cart___1Nngf core___flipper___3yDf4').click(function() { });
$('.styles__Label-causv5-1 giszo').click();
// yeah there is catch{} and other stuff under it but it doesn't matter here

Listen to mousemove only after document loads

I'm trying to use a script called Socialite in my Wordpress site to make social share buttons appear only after the user has moved his/her mouse AND the document already loaded.
I can't get it to work together. My current script, that does work, is:
jQuery(document).one("mousemove", function() {
var social_container = jQuery('.social_buttons');
Socialite.load(social_container);
});
But how do I connect the document load part?
Thanks
Have you tried to put your code into
jQuery(document).ready(function(){/* your code goes here*/});
?
For starters you have a small typo in the first line
jQuery(document).one("mousemove", function() {
You're calling .one("mous...
It should be .on("mous...
Next considerations is that the document ready statement below will happen before images etc have loaded
$(document).ready(function(){
// your code goes here.....
});
using a window load statement like below waits until everything i.e.images have loaded in full
$(window).load(function(){
// code here.....
});
I'm not sure what would suit your needs best as I have no experience with Socialite but hopefully this will give you the answers you need.

Is it possible to intercept http calls to images and change them with javascript?

I want to add some arguments to all images in a website, but these are dynamic.
Unfortunately the (only) way I have to do this would be by intercepting the image before loading. Javascript would be the only way to go here since I can change the header.
Any third party libraries like jquery are not an option.
Something like:
http://www.example.com/acme.jpg
Would be captured and transformed into
http://www.example.com/acme.jpg?v=120
The way I see it javacript would have to be, inline, in the header of the page, before the images start to load. I don't need to change the html itself, only intercept when the browser calls the image and tweak it a bit as ilustrated.
Is this possible?
You could try this jquery solution :
$(function() {
$( "img" ).load(function() { // select your images here
var src = $( this ).attr("src");
$(this).attr("src", src + "?v=120" ); // set the new url here
});
}

shorthand for .load() ajax links with loader

here's the structure of the code: http://jsfiddle.net/ss1ef7sq/
although it's not really working at js fiddle but the code itself is working as i've tested it locally through firefox.
this is where i've based this on: http://html.net/tutorials/javascript/lesson21.php
jquery/ajax:
$('#ep-101').click(function(){$('.main-container').load('link.html #ep101').hide().fadeIn(800);});
$('#ep-102').click(function(){$('.main-container').load('link.html #ep102').hide().fadeIn(800);});
$('#ep-103').click(function(){$('.main-container').load('link.html #ep103').hide().fadeIn(800);});
$('#ep-104').click(function(){$('.main-container').load('link.html #ep104').hide().fadeIn(800);});
$('#ep-105').click(function(){$('.main-container').load('link.html #ep105').hide().fadeIn(800);});
so my question is, is there a way to make it like a shorter code where it can just get the value of those #10ns or assuming that there will be a different page with it's own nest of unique ids without typing them individually? there's still a lot i don't understand with ajax so i'd appreciate it if anyone can help & explain at least the gist of it as well.
i've looked around online but i'm really stuck. i also at least found out that it's possible to add transitions but the way it's coded there is that it will only have the transition for the incoming page & not the one that will be replaced. i also have a prob with page loaders effects but i'll save it for when i'm stuck there as well.
thanks in advance. =)
Use classes instead of id's. Set href attribute which you want to load on click and access it via $(this).attr('href').
<a class="load-me" href="link1.html">link 1</a>
<a class="load-me" href="link2.html">link 2</a>
...
Script:
$('.load-me').click(function(e){
e.preventDefault();
$('.main-container').hide().load($(this).attr('href'), function() {
// ...
$(this).fadeIn(800);
})
});
JSFiddle
If you need the load to wait container hiding animation, you could make it other way.
$('.load-me').click(function(e){
e.preventDefault();
// get the url from clicked anchor tag
var url = $(this).attr('href');
// fade out the container and wait for animation complete
$('.main-container').fadeOut(200, /* animation complete callback: */ function(){
// container is hidden, load content:
$(this).load(url, /* load complete callback: */ function() {
// content is loaded, show container up
$(this).slideDown(200);
});
});
});
JSFiddle

Problem with two scripts interfering

I'm trying to bring some images from a Tumblr account and to show them using a slider. To bring the images I modified and used a script called tubmlrBadge (http://robertnyman.com/2008/09/19/tumblrbadge-a-tumblr-badge-script/), and to show the images I am using this slider > http://www.meadmiracle.com/SlidingGallery.aspx
If I check using Firebug I can see that the photos are shown okay, but I can't see them in with the slider. I can't figure out what's the problem, I suppose that a problem appears because the slider script must work with content generated by the tubmlr script. I tried placing the slider script after the tumblr one the slider still doesn't works.
You can see a demo of the this at http://www.mctest2.com.ar. If anyone has an idea please help me I tried everything!!
Thanks!
If the script you use to fetch the images was the image-fetcher itself (not a script that calls another script to get a JSON with the image data) you would have used $.getScript with a callback method.
However, your script can't use it, because no matter if the script file is loaded, it will also call another one, that might take longer to be loaded.
I think the only possibility you have is to set an "timer" in your page and wait until the gallery is loaded:
function setSlider() {
var jqelement = $('.gallery img');
if(jqelement.length>0) {
jqelement.slidingGallery();
} else {
setTimeout(setSlider, 200);
}
}
setSlider();
Working example:
http://jsfiddle.net/marcosfromero/5dSgd/

Categories

Resources