I am trying to remove a string at the end of my img src for all my img elements on the page.
An example of an img src as it appears now
http://www.example.com/B-UV-image-copy.jpg?resize=320%2C180
How I want it to be
http://www.example.com/B-UV-image-copy.jpg
I am trying to use javascript in the footer to find all img elements then remove ?resize=320%2C180 from all of them. The string "?resize=320%2C180" is always the same on all the images I want to effect.
Currently my code looks like this:
<script>
$('img').attr('src', function(index, attr) {
return attr.replace("?resize=320%2C180", "");
});
</script>
I appreciate I may be going about this all wrong. Currently the above script does nothing but I get an error in firebug:
Uncaught TypeError: undefined is not a function
Any help would be appriciated.
Your code works. You just need the DOM to be loaded and you need to make sure $ is tied to jQuery.
<script>
(function ($) {
$(document).ready(function() {
$('img').attr('src', function(index, attr) {
return attr.replace("?resize=320%2C180", "");
});
});
}(window.jQuery));
</script>
Works for me. You just need to ensure that the DOM is ready before you ask jQuery it to manipulate it:
$(function(){
$('img').attr('src', function(index, attr) {
return attr.replace("?resize=320%2C180", "");
});
});
http://jsfiddle.net/os5rhw23/
Using RegExp to strip off all the query part from a URL:
jQuery(function ($) {
$('img').attr('src', function(index, attr) {
return attr.replace(/\?.*$/i, '');
});
});
The other two answers are correct, but the nicest shorthand for a DOM ready handler and a locally scoped $ for jQuery is jQuery(function ($) { your code here}:
e.g.
<script>
jQuery(function ($) {
$('img').attr('src', function(index, attr) {
return attr.replace("?resize=320%2C180", "");
});
});
</script>
If you want to do this with pure JS, inline in the footer without the need for jQuery you can simply loop through all images - so long as this script in on the page at some point after the images (eg just before the close body)
<body>
<!-- some html, blah blah -->
<script>
var images = document.images,
i = images.length;
while(i--) {
var image = images[i];
image.src = image.src.replace("?resize=320%2C180", "");
}
<script>
</body>
http://jsfiddle.net/os5rhw23/1/
Related
I have some jquery,
$( document ).ready(function() {
body=$(body).html;
$("html").html(body);
});
Which should replace the document with it's body. But it doesn't work!
Despite I don't understand what you are trying to achieve, there are some errors in your code:
$(document).ready(function() {
var body = $('body').html();
$("html").html(body);
});
.html() is a function so the () is needed
body is an html-tag so you need the ' or " around the tag
I'm trying to add class to an iframe (on same domain) element but check some of the same issues here and came up with the solution.
The iframe is next to body tag and the js was place before the body end tag.
<script>
$(document).ready(function() {
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
});
</script>
There is no error showing in console except the OK log but the class was not adding to #mnucompany.
What else could be wrong? Any big hints will be appreciated.
After our comments :
You should wait the iframe to be loaded !
$(document).ready(function() {
$('#my-iframe').on('load',function (){
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
});
});
$(document).ready(function() {
var myVar = setTimeout(function () {
var $mnuCompany = $('#my-iframe').contents().find('#mnucompany');
if($mnuCompany.length>0){
$('#my-iframe').contents().find('#mnucompany').addClass('is-active');
console.log('ok');
clearTimeout(myVar);
}
});
}, 1500);
I'am trying to pass a variable/ value from the fancybox iframe to the parent window without success.
Fancybox is launched from a link with
class="fancybox fancybox.iframe"
My code in the fancybox.iframe is:
$(document).ready(function(){
$('.insert_single').click(function(){
var test = $('.members_body').find('{row.U_USERNAME}');
setTimeout(function(){ parent.$.fancybox.close();},300);return true;
});
});
Where '{row.U_USERNAME}' is the username to find in the iframe.
Then, in the parent there's the following code:
$(document).ready(function(){
$('.fancybox').fancybox(
{
openEffect:'fade',
openSpeed:500,
afterClose: function(){
alert($(".fancybox-iframe").contents().find(test));
$('#form input[name=username]').val()(test);return false;
}
}
);
});
But when the fancybox is closed, there's no alert showing up with the variable "test", nor the variable is showing up as a value or as a text in the input field of the form.
I've read and tried various solutions found here on stackoverflow without success.
Thanks in advance for helping
EDIT
Here's an Example
When the fancybox is closed the iframe is removed from the document. So you must use beforeClose event instead of afterClose
$(document).ready(function() {
$('a.fancybox').fancybox({
openEffect:'fade',
openSpeed:500,
beforeClose: function() {
// working
var $iframe = $('.fancybox-iframe');
alert($('input', $iframe.contents()).val());
},
afterClose: function() {
// not working
var $iframe = $('.fancybox-iframe');
alert($('input', $iframe.contents()).val());
}
});
});
JSFiddle: http://jsfiddle.net/NXY7Y/1/
EDIT:
I edited your jsfiddle (http://jsfiddle.net/NXY7Y/9/). Update is in this link
http://jsfiddle.net/NXY7Y/13/
Main page javscript:
$(document).ready(function() {
$('a.fancybox').fancybox({
openEffect:'fade',
openSpeed:500//,
//beforeClose: function() {
// // working
// var $iframe = $('.fancybox-iframe');
// alert($('input', $iframe.contents()).val());
//},
//afterClose: function() {
// // not working
// var $iframe = $('.fancybox-iframe');
// alert($('input', $iframe.contents()).val());
//}
});
});
function setSelectedUser(userText) {
$('#username').val(userText);
}
No need to use afterClose or beforeClose events. Just access the parent function setSelectedUser from the iframe on link click event like this:
$(document).ready(function() {
$('a.insert_single').click(function() {
parent.setSelectedUser($(this).text());
parent.$.fancybox.close();
});
});
Some clarifications :
You should use .find() to find elements by selector (you are trying to find a variable .find(test), which is not a valid format).
You should use .val() to get the contents of an input field or .val(new_value) to set the contents of an input field
You should use .html() or .text() to get the contents of any element other than input,
example: having this html code
<p class="test">hola</p>
... and this jQuery code
var temp = $(".test").html();
... temp will return hola.
On the other hand, if you have control over the iframed page and it's under the same domain than the parent page, then you may not need to set any jQuery in the child page.
so, having this html in the child (iframed) page for instance
<div class="members_body">
<p>GOOGLE</p>
<p>JSFIDDLE</p>
<p>STACKOVERFLOW</p>
</div>
You could set this jQuery in your parent page to get the contents of any clicked element in your child page :
var _tmpvar; // the var to use through the callbacks
jQuery(document).ready(function ($) {
$(".fancybox").fancybox({
type: "iframe",
afterShow: function () {
var $iframe = $('.fancybox-iframe');
$iframe.contents().find(".members_body p").each(function (i) {
$(this).on("click", function () {
_tmpvar = $('.members_body p:eq(' + i + ')', $iframe.contents()).html();
$.fancybox.close();
}); // on click
}); // each
},
afterClose: function () {
$('#form input[name=username]').val(_tmpvar);
}
});
}); // ready
Notice that we declared the var _tmpvar globally so we can use it within different callbacks.
See JSFIDDLE
I have this script which fades in/out the page
(function($) {
$(window).load(function() {
$('#preloader').fadeOut();
$('#wrap').fadeIn();
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#wrap").fadeOut(redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
})(jQuery);
But I have some external links which I don't want to effect so I don't want to target these.
I have found how to test for internal links using this script
var siteURL = "http://" + top.location.host.toString();
var internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
But I'm really stuck on how to combine the two! Any ideas please?
I think you use the regex,
Try this,
var patt = new RegExp('(\/|..\/|.\/|#|https:\/\/www.google.co.in)');
var $internalLinks = [];
$('a').each(function(index){
if(patt.test($(this).attr('href'))){
$(this).addClass('fadeclass');
};
})
$('input').click(function(){
$('.fadeclass').fadeOut('slow')
});
Demo JsFiddle
From the above code, I used the regular expression for match the href, when I mentioned external links found then I added the fadeclass. You can use fadeclass whatever.
Hello
I wonder how Replace automatically links on my site
that start with:
http://site.com/00000/
to:
http://site.com/11111/
detects> replaces
CSS3 attribute "starts with" selectors help you there (and jQuery supports them on all of the browsers it supports — with native features if possible, for speed). Then just use an each loop and update the href property of the raw a element:
$("a[href^='http://site.com/00000/']").each(function() {
this.href = "http://site.com/11111/" + this.href.substring(21);
});
You can use jQuerys .attr() method. You don't need to explicitly invoke .each(), jQuery will take care of you if your selector hits multiple nodes. Since version 1.4.1, .attr() like many other setters, takes a function as argument. This function gets the index and the actual value passed in. Whatever you return from this callback is going to be the new value.
$(document).ready(function () {
$('a').attr('href', function(_, href) {
return href.replace('246619', '262257');
});
});
Demo: http://www.jsfiddle.net/qR2NU/
Reference: .attr()
<script type="text/javascript">
$(document).ready(function () {
var urlContain = new RegExp('Detect Value Here');
$('a').each(function () {
var href = this.getAttribute('href').replace(urlContain, 'Replacement here');
$(this).attr('href', href);
});
});
</script>
This code loops through every link on the page that has a href attribute once the DOM has loaded and performs the required replace:
$(function() {
$('a').each(function() {
var href = $(this).attr('href');
if (href !== undefined) {
href = href.replace(/246619/g, '262257');
}
$(this).attr('href', href);
});
});
The above relies on jQuery but judging by the tags you used for your question, you are already using it.
Untested:
$("a[href^=http://site.com/00000/]").each(function() {
this.href = "http://site.com/11111/" + this.href.substr("http://site.com/00000/".length");
});