I have a javascript function named "background_url" that outputs
a random background image.
I'm trying to call the function in this way:
<td style="<script type="text/javascript">background_url();</script>"></td>
but the only thing outputted in my browser is:
a string "background_url();"
The javascript function is as follows
function background_url(){
var myimages=new Array()
myimages[1]="images/img1.jpg"
myimages[2]="images/img2.jpg"
myimages[3]="images/img3.jpg"
//call a random function that returns id of image etc
document.write('background-image: url('+myimages[id]+')');
}
</script>
The background image is not shown,what can i do in order to fix that?
Thanks, in advance
Don't.
Do it the right way.
Give the td element a class (if there are more than one that share the background) or an id (if this element is unique) and use JavaScript to set the style using the appropriate selector.
var tds = document.querySelectorAll('td.some-class-name');
for(var i = 0; i < tds.length; i++){
var td = tds[i];
td.style.backgroundImage = 'url(' + randomImageUrl + ')';
}
Or, if you're using a library like jQuery, it's a little easier:
$('td.some-class-name').css('background-image','url(' + randomImageUrl + ')');
The thing you're running into is that script execution can happen in 2 places: inside a <script> tag (which can't be in an attribute or, as part of an attribute only if it's an event handler. So your choices are:
<script>
background_url()
</script>
Or
<script src="path/to/your/script.js"></script>
Or
<td onmouseover="background_url()">
Given those are your choices, typically people try to use the second option, meaning you'll need to have some mechanism to link your element to the code in question. So you might add an id in your td:
<td id="randomBgElement">
Then onload do this:
document.getElementById('randomBgElement').style = background_url()
Where "background_url()" is a function that returns a valid style, like background-image: url(images/img3.jpg) generated randomly.
Related
I've gone through many SO threads, I can't seem to find a working solution.
All I'm trying to do is when the page loads, the site pushes all elements with the ".home" class into the array arr. Then, the script parses through each element in the array and tries to match it with a string. For example, right now all I have is a check to see if the element has the words "Boston" in it, in which case I want to make the image source for ".homeimage" the linked imgur link. I'm aware it's not wise to host images on imgur for these reasons, I'm just trying to check if it works. Below this test I have some redundant code I was practicing with that I found in a SO thread, changing the color of text to gray. I figured changing attributes is the same.
my html code:
<td colspan = "3"width=400px class = "home"><b><%= game.home %></b></td>
<td colspan = "3"><img style="width:150px;height:128px;" class = "homeimage"></td>
my javascript/jquery code:
<script>
var arr=[];
$(document).ready( function(){
$(".home").each(function(){ arr.push($(this));});
for(i = 0; i < arr.length; i++){
if(arr[i].indexOf "Boston" != -1){
$('.homeimage img').attr("src","http://i.imgur.com/s5WKBjy.png");
}
}
$.each(arr,function(key,val){
val.css('color','gray')}); //something redundant i was testing out
});
</script>
additional questions:
When I have multiple image with the .homeimage class, and multiple checks to determine the image source, will it make all of the images in the .homeimage class that src at the end? So whatever the last image that gets checked is the image src for all of the images with the ".homeimage" class? I don't want that. How can I uniquely make each image? Make a custom id instead of a class for each div? Also, does this script have to be below the html in question? Or does that not matter
Thanks for the future advice you all.
// I don't quite understand what you want to do.
// Since you type too much, and make no highlights.
// but here are somethings I found:
var arr = []; // this array is going to contain all tags (like td) with class '.home'
if(arr[i].innerHTML.indexOf("Boston") != -1) { } // indexOf() won't work on DOM element
// then arr[0] must be a DOM element, so why you call .indexOf("Boston") on it?
// next, $('.homeimage img') all return DOM element with class 'homeimage' or with tagName 'img'
$('img.homeimage'); // this may what you want to do.
// Alright, I try to give you an answer.
// this oImgUrl works as a map from some ((String))-->((img url))
var oImgUrl = {
'Boston': 'http://another.imageurl.com/boston.png',
'NewYork': 'http://another.imageurl.com/newyork.png'
};
// I take your "arr" unchanged
// this will test every element in arr
// if carry String like 'Boston' or 'NewYork'
// then find the img tag (img.homeimage) in it.
// then apply URL string to img tag
for (var i=0, length=arr.length; i < length; i++) {
if(arr[i].innerHTML.indexOf("Boston") != -1) {
arr[i].find('img.homeimage').attr('src', oImgUrl['Boston']);
continue;
}
if(arr[i].innerHTML.indexOf("New York") != -1) {
arr[i].find('img.homeimage').attr('src', oImgUrl['NewYork']);
continue;
}
}
example html:
<td class='home'>Welcome to Boston!<img class='homeimage'></td>
<td class='home'>Welcome to New York!<img class='homeimage'></td>
answers:
Question 1: Custom ID?
JavaScript will find these two td.home and add them into arr.
then, apply different image url to img tag
according to innerHTML of the td tag.
when doing this, you don't need to set each img tag an unique ID.
Question 2: Script place below html?
No, you don't have to.
You hold all thses script in docuement ready function
so, they will only work when HTML DOM is ready.
in another words, no matter where you place this script,
they will be invoked after Every Tag is ready.
I have c# code which generates Anchor tags on fly. I wanted to change some of anchor tag target based on its text.
For example dynamic code generated HTML like below
<a target='_blank' class=txt href="http://www.stackoverflow.com">THE BEST SITE</a>
I wanted to change its target if text equals THE BEST SITE
Note: I have no jQuery files included in asp.net project.
So far I have tried including this script just to get the text, but it is not even displaying the alert
$(document).ready(function() {
$(".txt").click(function() {
alert($(this).text());
});
});
Here is a function that checks if an element's innerText is equal to a specific phrase. If it is, it sets the target attribute specific to that phrase.
function changeTarget(elem, phrase){
if(elem.innerText === phrase){
elem.target = phrase;
}
}
Depending on your DOM, you could just iterate through all your anchor elements and run this function with the desired phrase.
If you have a bunch of these with the .txt class you can just do something like:
var elems = document.querySelectorAll('.txt');
for(var i = 0; i < elems.length; i++){
changeTarget(elems[i], "THE BEST SITE");
}
I think you want something like
var els = document.getElementsByClassName('txt');
for(var i=0; i<els.length; ++i)
if(els[i].textContent == "THE BEST SITE")
els[i].target = 'something';
I am sure is a common problem in JS, i have created resizing function using JS, initially this function was only going to be used on one item of my site, however now i have chosen to use it on multiple items. My JS function currently uses document.getElementById(id); however i want to change this so it looks out for the class name .resize. How can this be done?
Below is a snippet of my JS
function ebi(id){
return document.getElementById(id);
}
if(ebi('resize')
.complete==true){
iscale(ebi(''));
}
ebi('resize')
.onload=function(){iscale(this);
}
function iscale(o){
//alert(o.width);
var sar=o.width/o.height;
var tar=1,tiw,tih,xoff,yoff;
if(o.width<=425&&o.height<=467){
tiw=o.width;
tih=o.height;
}else if(tar>sar){
tiw=425*sar;
tih=467;
}
else{
tiw=425;
tih=467/sar;
}
xoff=(680-tiw)>>1;
yoff=(209-tih)>>1;
//alert(xoff);
o.width=tiw;o.height=tih;
o.style.top=yoff+"px";
o.style.left=xoff+"px";
}
function $(id){return document.getElementById(id);}
html
<section id="homeSlide" class="shadow">
<img id="resize"class='opaque' src="http://www.colette.fr/media/push/pony_01239.jpg" />
<img id="resize" src="http://www.colette.fr/media/push/EGIFT_01234.jpg" />
<img id="resize" src="http://www.colette.fr/media/push/swa_mmm_001255.jpg" />
</section>
At the moment the resize function only works for the first image, however the other images do not resize. Before anyone attacks me about web standards the id's in the img tags were just to test the function.
id have to be unique, that's why this didn't works.
You can use document.getElementsByClassName() (as you thought) : simply add class="resize" (instead of id="resize") and use that kind of loop:
function callResize()
{
var elements = document.getElementsByClassName("resize");
for (var i=0;i<elements.length;i++)
{
var element = elements[i];
// do things with element
iscale(element);
}
}
document.getElementById('homeSlide').onload = function(){callResize();}
the point is id should be unique and to do what you want why don't you use jQuery. using jQuery you can easily do what you want, using this
jQuery("#homeSlide>img")
and you can also add this:
jQuery("#homeSlide>img").each(function(imgNode){
resize(imgNode);
});
but if you want to do it without jQuery, as far as some functions like getElementsByClassName and getElementsByTagName are not cross browser, you'd better try this:
var homeSlide = document.getElementById('homeSlide');
var myImgNodes = [];
for(var i=0;i<homeSlide.childNodes.length;i++){
var childNode = homeSlide.childNodes[i];
if(childNode.nodeType==1 && childNode.tagName.toLowerCase()=="img"){
myImgNodes.push(childNode);
}
}
afterwards myImgNodes would be exactly what you want.
I just changed your fiddle example and tried not to change your functionality, you can check this out, it perfectly works. This is your updated jsfiddle DEMO
First, an ID has to be unique in your HTML document. But in your example code you assign the ID "resize" three times. Just replace the ID from all three elements and add class="resize".
Second, I suggest to use the jQuery.each() method to iterate over the returned collection instead of a loop.
Example:
var elements = document.getElementsByClassName("resize")
jQuery.each(elements, function(element) {
iscale(element)
})
I am trying to write a function for an extension that can find a link inside a specific div and click it. The link has no id or class name, so I was looking for something similar to a CSS selector but with JS without using '$' or 'jQuery' since that will require me to embed a jquery library with the extension.
The div has a class name and then a link inside, so this is the code I have so far --
function COut() {
var a = document.getElementsByClassName('bottom_row').getElementsByTagName('a');
for (var i = 0; i < a.length; i++) {
var elem = a[i],
elem.click();
}
}
This the markup for the div and link -
<div class="bottom_row">
<a onclick="miniAddToCart.closeMiniAddToCart({cmConversionEvent: 'Checkout'})" href="http://www.domain.com/shoppingcart/default.cfm?checkout=1&"><img src="http://www.domain.com/images/eb/minicart/checkout.gif" alt="Checkout"></a>
</div>
Any ideas what Im doing wrong?
getElementsByClassName('bottom_row').getElementsByTagName('a');
getElementsByClassName returns a set, not a single item
getElementsByClassName('bottom_row')[0].getElementsByTagName('a');
^^^
If there can be more than one item with the className, than you will need to loop. And if you support modern day browsers, you can look into querySelectorAll
And finally clicking on a link is not as easy as calling click()
How can I simulate a click to an anchor tag?
If you want it to do to the url, you might be better off just setting window.location.href
If there is a single A tag, I won't prefer to make loop for that. Instead you can just do it like:
function COut() {
var a = document.getElementsByClassName('bottom_row')[0].getElementsByTagName('a')[0];
if(a){
a.click();
}
}
I want to change the background image of every element on a page by adding a string to it's address in this manner:
Get the back ground image address of an element from the styles:
background-image: url("img/sprites.png");
Add the string ?ver=3 to it, so it will become like this
background-image: url("img/sprites.png?ver=3");
I guess I may do that on a single known element by somthing like this:
document.getElementById('elementId').style.backgroundImage += "?ver=3"
Am I right?
However, I want to do this to all the elements. How can I have the loop access all the elements?
You could try using jquery.
$("*").css('backgroundImage', $(this).css('backgroundImage')+'?ver=3');
I just typed this from memory so it might not be 100% but it seems like it would work.
Possibly this:
$("*").each(function(){$(this).css('backgroundImage', $(this).css('backgroundImage')+'?ver=3');});
Hope this help a little.
You could use document.getElementsByTagName:
var elms = document.getElementsByTagName('*');
for (var i = 0, len = elms.length; i != len; ++i) {
elms[i].style.backgroundImage += '?ver=3';
}
Or, you could use the DOM to modify the stylesheet object directly. You'd have to write separate codepaths for different browsers, but it would probably run much faster.
maybe something like this with jquery:
$('*').each(function(){
$(this).css( 'background-image', $(this).css('background-image') + "?ver=3");
});
I would prefer to use $('body *') in the selector to not include elements like head and html.
suppose the elements that you want to assign a background to are wrapped in a div with class 'mysprites':
<div id="mysprites">
<div></div>
<div></div>
<div></div>
</div>
To let each sprites.png version number correspond to the i-th element, just call
$('#mysprites').each(function(index) {
$(this).css("background-image", "url(img/sprites.png?ver=" + index + ")");
})
like in this fiddle
(if you don't know jquery, just download it and add it to the header of your html file like:
<script language="javascript" type="text/javascript" src="jquery.js"></script>