looked around for this for a while and can't find anything that seems to suit what I need. I want to be able to change the image of a t-shirt to one of a different colour, depending which colour is selected in the drop down menu.
Here's the DDL:
<select name="Colours" onchange = "changeImage()">
<option value="White">White</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Purple">Purple</option>
</select>
Here's the JS function I've written (switch statement is repeated for each of the options):
<script type="text/javascript">
function changeImage(){
var x = document.getElementById("Colours").value;
switch(x){
case "White":
document.Mainimg.src = images/white.jpg;
location.reload();
break;
case "Red":
document.Mainimg.src = images/red.jpg;
location.reload();
break;
And finally, if it's needed, the code for the image:
<div id="main_img">
<img id="Mainimg" name="Mainpic" src=images/white.jpg>
</div>
This doesn't work, nothing happens when I select a new option in the list. Do I have the complete wrong idea of how to do this or is it just a simple tweak?
Thanks for any help.
Remove the location.reload() : When you reload the page you lose your changes. The fact you change the src of the image is enough to have it loaded.
Use getElementById to fetch your image and put the URL between quotes :
document.getElementById('Mainimg').src = "images/white.jpg";
The missing quotes could have been discovered simply by using the console which shows compilation errors. Use the console.
Perhaps what you want to do is this: http://jsfiddle.net/jWbUv/
HTML:
<select name="Colours" onchange = "changeImage(this)">
<option value="">please select</option>
<option value="White">White</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Yellow">Yellow</option>
<option value="Purple">Purple</option>
</select>
<div id="main_img">
</div>
JS:
function changeImage(src) {
var mainImg = document.getElementById('main_img');
mainImg.style.setProperty('background-image', 'url(\''+ src.value +'.png\')');
}
CSS:
#main_img {
width: 100px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
}
Related
This is my select in html:
<select id="bgPosition">
<option value="left top" selected="selected">Left Top</option>
<option value="center top">Center Top</option>
..
</select>
On page load I need to update the selected value with another one, so I tried with .each .prop and this:
function setActiveOption(el,val){
$(el).find('option:selected').removeAttr('selected');
$(el).find('option[value="'+val+'"]').attr('selected','selected');
console.log('selected: '+$('#bgPosition').val())
}
All ok for other select boxes, but not for #bgPosition I think because values contains spaces.
selected attribute is in right place, but is displaying first option as selected
Any idea how can this be fixed?
I also tried with different jQuery libraries
UPDATE: This is my fiddle and how I am running functions.
Given your example fiddle, the only select element that doesn't respect the value you set is the middle one, #bgRepeat, and that's because by default you've got two option set with the selected attribute.
To fix the problem, only provide one option with the selected attribute.
That being said, a better solution would be to just use .val() as a setter on the select itself, which is a one-liner and therefore renders the setActiveOption() function redundant. Try this:
var template = [{
"mainBgImgPosition": "right bottom",
"mainBgImgRepeat": "no-repeat",
"mainBgImgSize": "cover"
}]
jQuery(function($) {
var Builder = {
initialized: false,
initialize: function() {
if (this.initialized)
return;
this.initialized = true;
$('#bgPosition').val(template[0].mainBgImgPosition);
$('#bgRepeat').val(template[0].mainBgImgRepeat);
$('#bgSize').val(template[0].mainBgImgSize);
}
}
Builder.initialize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="bgPosition" id="bgPosition">
<option value="left top" selected="selected">Left Top</option>
<option value="left center">Left Center</option>
<option value="left bottom">Left Bottom</option>
<option value="center top">Center Top</option>
<option value="center center">Center Center</option>
<option value="center bottom">Center Bottom</option>
<option value="right top">Right Top</option>
<option value="right center">Right Center</option>
<option value="right bottom">Right Bottom</option>
</select>
<select name="bgRepeat" id="bgRepeat">
<option value="repeat" selected="selected">Repeat All</option>
<option value="repeat-x">Repeat X</option>
<option value="repeat-y">Repeat Y</option>
<option value="no-repeat">No Repeat</option>
</select>
<select name="bgSize" id="bgSize">
<option value="auto" selected="selected">Auto</option>
<option value="cover">Cover</option>
</select>
i tried your code in a fiddle and it worked for me.
https://jsfiddle.net/b8t1yavu/
What are you passing into the function setActiveOption for el. It might now be working because of that. You could call the function in two ways.
setActiveOption('#bgPosition','center top')
OR
setActiveOption(bgPosition,'center top')
If you want it call it with the second method, you have to modify your code a bit. here is a fiddle for that https://jsfiddle.net/b8t1yavu/1/
I don't know how you call your function but it seemed to work fine when I run it in JSFiddle. You need to call your function with the id of the element as the first parameter and the FULL value of the option as the second parameter as HTML does not concider words as seperate values.
setActiveOption('#bgPosition', 'center'); // Does not work
setActiveOption('#bgPosition', 'center top'); // Works fine
https://jsfiddle.net/Youmy001/uyun2soo
I currently have a select box that has options of different colors, as well as a contenteditable inside a div to be used as a text editor. What I want is when I select a color from the box e.g. red, the selected text inside the contenteditable changes to red.
<select id="colorChange">
<option onchange="value="Black">Black</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Pink">Pink</option>
</select>
Onchange of options call a function and use jquery .css method to the change the text color.
function changeColor(){
var _color = $("#colorChange option:selected" ).val().toLowerCase();
$("#abc").css('color',_color)
}
Note: There is a typo in <option onchange="value="Black">Black</option>
JSFIDDLE
Here is the jQuery solution.
onchange needs to be on select.
Apply the selected color to the div.
$(function() {
var color = 'black';
$('select').change(function() {
color = $(this).val();
$('div').css('color', color);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorChange">
<option value="Black">Black</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Pink">Pink</option>
</select>
<br/>
<br/>
<div contenteditable="true">This text color will change based on selection</div>
Listen for the change event on the select input, grab its value then change the color of your container using CSS.
$('#colorChange').change(function(){
var selectedColor = this.value;
$('#container').css('color', selectedColor);
});
This method will work when using color names Supported by all browsers (http://www.w3schools.com/cssref/css_colors.asp) if you want custom colors you will need to either set the value of the options in the select input to the HEX(#) value for the color required or pass selectedColour through a switch statement to determine the color code.
Javascript version. I really hope I am not doing your homework.
document.getElementById('colorChange').addEventListener('change',function(event){
var val = event.target.value;
var div = document.getElementById('editableDiv');
div.style.color = val;
});
Try this:)
$('#colorChange').on('change', function() {
$color = this.value
$("select option:selected").css("color", $color);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorChange">
<option onchange="value="Black">Black</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Pink">Pink</option>
</select>
I want to got a body with a defined background-image and be able to choose from a ul to the background i want to change(ex:car,dog,house...).
body {
width:1200px;
height:907px;
background-image: url("fotos/cc.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
<body>
<select id="borde" onchange="encender();" name="select1">
<option value="0" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>
If I'm understanding you correctly, then you want to change the background-image of the body according to what is selected in the tag right?
If so, then that can be accomplished through javascript with either a switch statement(shown below) or through setting the value on the option in the select tag to be a string and using the value as the background image. The first way would look something like this:
function changeBackground(selectedOption) {
var imgSRC = "";
switch (selectedOption.value) {
case "0":
imgSRC = "dog.png";
break;
case "1":
imgSRC = "cat.png";
break;
case "2":
imgSRC = "house.png";
break;
default:
imgSRC = "default.png";
break;
}
document.body.style.backgroundImage = "url('" + imgSRC + "')";
}
<select id="borde" onchange="changeBackground(this);" name="select1">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
You didn't clearly specify what you want to do with select tag. However as I understood you want to change background image on option change. Your eventHandler is calling a function which is not created. I have called onchange event via JQuery to store background Image from selected option value in the code below.
var body = document.getElementById('body');
var select= document.getElementById('borde');
$('select[name=select1]').on('change', function(){
body.style.backgroundImage = String('url('+ select.children[select.selectedIndex].getAttribute('value')+')')
})
body {
width:1200px;
height:907px;
background-image: url("http://cdn3.megarush.net/wp-content/uploads/2013/01/search-engine-friendly-urls.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id ='body'>
<select id="borde" name="select1">
<option value="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg">default</option>
<option value="https://res.cloudinary.com/ahrefs/image/upload/v1407314140/production-application-pending-logo-152.jpg">1</option>
<option value="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">2</option>
<option value="http://topwalls.net/wallpapers/2012/01/Nature-sea-scenery-travel-photography-image-768x1366.jpg">3</option>
<option value="http://img.gettyimageslatam.com/public/userfiles/redesign/images/landing/home/img_entry_002.jpg">4</option>
</select>
</body>
I have a javascript that seems to only run once. I am using this to select the colour of a letter inside a div. When I select the colour initially it works but then will not select a different colour.
This is the select:
<div style = "position: absolute; left: 360px; top: 590px;" >
<select id="selectcolor1" name="selectcolor1" style="width: 150px;">
<option value="null">Select a Motif Color...</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="darkblue">Dark Blue</option>
<option value="pink">Pink</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="seagreen">Sea Green</option>
<option value="red">Red</option>
<option value="darkgreen">Dark Green</option>
<option value="bergundy">Bergundy</option>
<option value="cyan">Cyan</option>
<option value="magenta">Magenta</option>
<option value="mustard">mustard</option>
<option value="purple">Purple</option>
This is the javascript:
$('#selectcolor1').change(function() {
var color = this.value || '';
$('.selectcolor1').attr('class', function(i, classes) {
var cls = classes.split(/[\s]/);
cls[2] = color;
return cls.join(' ');
});
e.preventDefault();
});
I probably should have mentioned I am using the script to change to different Div's colours apologies my fault:
<div style = "position: absolute; left: 750px; top: 313px;"
class="selected-value selectcolor1" id ="motif" ></div>
<div style = "position: absolute; left: 750px; top: 313px;"
class="selected-value1 selectcolor1" id ="motif1" ></div>
Any help would be great thank you!
Couple of problems here.
As #cport noted, you are not declaring the e variable you are referring to in e.preventDefault(). This needs to come in the change function handler.
As #dsuess noted, your code is changing the class on a tag with class="selectcolor1", which isn't in your pasted code - please make sure this is correct.
Also, this code will work with the jsfiddle provided below since it sets the target's third class and the target has two classes initially. However, if you change the target HTML to have three or more classes from the start, the Javascript code will overwrite the third class.
But having said that, this works with the current code:
$('#selectcolor1').change(function(e) {
var color = this.value || '';
$('.selectcolor1').attr('class', function(i, classes) {
var cls = classes.split(/[\s]/);
cls[2] = color; // third class becomes the color value
return cls.join(' ');
});
e.preventDefault();
});
As #cport1 stated, the anonymous function is missing the e parameter:
$('#selectcolor1').change(function(e) { ...
This will cause the JS to be fired only once and then error because there is no reference to e in that function's scope.
You are missing the e parameter in your event binding:
$('#selectcolor1').change(function()
replace with
$('#selectcolor1').change(function(e)
I tried to change the colors of the select lists header, title and text. I added the functions changehead(), changetitle() and changebody() to do this. And bind elements through unique id.
But I'm getting the following error
Uncaught TypeError: Cannot read property 'undefined' of undefined
in the function changehead(), after
header = document.form1.heading.options[i].value;
and in the function changetitle() after
header = document.form1.heading.options[i].value;
I'm not sure whether I should be using two different functions or if it can be done with one.
Code:
<script>
function changehead() {
i = document.form1.heading.selectedIndex;
header = document.form1.heading.options[i].value;
document.getElementById("head1").style.color = header;
}
function changetitle() {
i = document.form1.heading.selectedIndex;
header = document.form1.heading.options[i].value;
document.getElementById("head2").style.color = header;
}
function changebody() {
i = document.form1.body.selectedIndex;
doccolor = document.form1.body.options[i].value;
document.getElementById("p1").style.color = doccolor;
}
</script>
</head>
<body>
<h1 id="head1">Controlling Styles with JavaScript</h1>
<hr>
<h2 id="head2">Subtitles at this screen. And cery important subtitles!</h2>
<hr>
<p id="p1">Select the color for paragraphs and headings using the form below. The colors you specified will be dynamically changed in this document. The change occurs as soon as you change the value of either of the drop-down lists in the form.</p>
<form name="form1"> <b>Heading color:</b>
<select name="heading" onChange="changehead();">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
<br>
<B>Body text color:</B>
<select name="body" onChange="changebody();">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
<br> <b>Heading second color:</b>
<select name="heading" onChange="changetitle();">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
</form>
</body>
Questions:
How to circumvent situation with errors?
Do need two different functions for changing head & title, or is one enough (if yes - how)?
You have two selects named "heading". Give them different names and your javascript will stop throwing errors.
Here is a working example: http://jsbin.com/uritid/1/edit