CODEWITHSUNDEEP
javascriptjquery
Alberto Rossi
Alberto Rossi

Reputation: 1800

jQuery parameter for a function

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

Answers (4)

user1636522
user1636522

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

Jeff
Jeff

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

OneOfOne
OneOfOne

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

Travis J
Travis J

Reputation: 82357

jsFiddle Demo

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

Related Questions