Reputation: 1800
This is the code I am using now:
$(document).ready(function(){
$('#btn2').click(function(){
$('iframe').contents().find('body').css('background-image', 'url(http://mk7vrlist.altervista.org/backgrounds/1.png)');
$('iframe').contents().find('body').css('opacity', 1.0);
});
});
And here's the HTML:
<select onchange="bg(this[this.selectedIndex].value);">
<option value="0.png" id="btn1">1. Default skin</option>
<option value="1.png" id="btn2">2. MK7 Collage</option>
<option value="1.png" id="btn3">3. Solid Queen</option>
</select>
When I click the 2. MK7 Collage
, as you can see in my jQuery function, the background of my iframe changes.
I have 3 option values and each one has a different background and id. I'd like to change them everytime a 'option value' is clicked. It's like:
$('#the_optionvalue_id').click(function(background_image_url){
$('iframe').contents().find('body').css('background-image', 'url(background_image_url)');
$('iframe').contents().find('body').css('opacity', 1.0);
});
I am pretty new with jQuery and I don't know how to set the id (the_optionvalue_id
) and the background_image_url
every time that a option
is selected. Any help?
Upvotes: 2
Views: 85
Reputation:
It seems that you don't need to add a click event since you already call a function named bg
each time the value changes. You may just declare your function somewhere :
function bg(value) {
var base = 'http://mk7vrlist.altervista.org/backgrounds/';
$('iframe').contents().find('body').css({
'background-image': 'url(' + (base + value) + ')',
'opacity': 1
});
}
Upvotes: 2
Reputation: 12795
So, you can have a function return a function. The outer function can take a parameter, so then you would have:
$(document).ready(function(){
var clickHandlerGenerator = function(url) {
return function(){
$('iframe').contents().find('body').css('background-image', 'url(' + url + ')');
$('iframe').contents().find('body').css('opacity', 1.0);
});
$('#btn2').click(clickHandlerGenerator('http://mk7vrlist.altervista.org/backgrounds/1.png'));
$('#btn1').click(clickHandlerGenerator('http://mk7vrlist.altervista.org/backgrounds/WHATEVER.png'));
}
Upvotes: 2
Reputation: 99431
Try :
<select id="bgselector">
<option value="0.png" id="btn1">1. Default skin</option>
<option value="1.png" id="btn2">2. MK7 Collage</option>
<option value="1.png" id="btn3">3. Solid Queen</option>
</select>
then put all your jQuery code inside the ready function :
<script>
$(function() {
var iframe_body = $('iframe').contents().find('body'); //cache this for performance;
var set_bg = function(url) {
iframe_body.css({
'background-image': 'url(' + url + ')',
'opacity': 1.0);
});
}
$('#bgselector').change(function() {
set_bg($(this).val());
});
$('#btn2').click(function(){
set_bg('http://mk7vrlist.altervista.org/backgrounds/1.png');
});
});
</script>
Upvotes: 2
Reputation: 82357
Basically you should keep a string with the value of the directory where the files sit, and then using the change
method of jquery change the value of the css when the select changes. Here is a simple example using a div to show the output of the value:
html
<div id="body">http://mk7vrlist.altervista.org/backgrounds/0.png</div>
<select id="sel">
<option value="0.png" id="btn1">1. Default skin</option>
<option value="1.png" id="btn2">2. MK7 Collage</option>
<option value="2.png" id="btn3">3. Solid Queen</option>
</select>
js
var base = "http://mk7vrlist.altervista.org/backgrounds/";
$("#sel").change(function(){
$("#body").html(base + this.value);
});
Upvotes: 2