I am making a chrome extension which adds icons to certain URLs, so I would like to make a slider to adjust the size of the icon in the popup.html.
The HTML of the slider looks like this:
<div class="slidecontainer">
<input type="range" min="1" max="3" value="2" class="slider" id="myRange">
</div>
But for the slider to work, it needs some javascript code.
In the javascript file, I made a variable called size. I need the javascript to change the size variable according to the position of the slider.
var size = "/images/icon16.png";
var imageURL = "chrome-extension://" + chrome.i18n.getMessage("##extension_id") + size;
So I am thinking of a script that checks for myRange, and if it is 1, 2, or 3, it sets size to corresponding string:
"/images/icon16.png"
"/images/icon48.png"
"/images/icon128.png"
The catch is that I don't know how to implement this in my code, so any help or explanation would mean the world to me ...
You could save your strings in an array:
var myPaths = [
"/images/icon16.png",
"/images/icon48.png",
"/images/icon128.png"
]
And access your slider input like this:
var slider = document.getElementById("myRange");
so that slider.value will be the value of the input.
You could listen out for the change event on the slider, and then set your size variable accordingly.
Full code:
var myPaths = [
"/images/icon16.png",
"/images/icon48.png",
"/images/icon128.png"
];
var size = "/images/icon16.png";
var slider = document.getElementById("myRange");
slider.addEventListener("change", updateSize);
function updateSize() {
size = myPaths[slider.value - 1];
}
In short: document.getElementById("myRange").value;.
You can read more about sliders and getting the value of the slider here. If you want to get the value every time the slider is utilised:
document.getElementById("myRange").addEventListener("input", (evt) => {
console.log(evt.target.value);
})
Attach an onchange event listener to the input tag.
Declare enum as follows:
let enum = {
1: "/images/icon16.png",
2: "/images/icon48.png",
3: "/images/icon128.png"
}
Write something like this in the callback:
var size,
imageURL;
let enum = {
1: "/images/icon16.png",
2: "/images/icon48.png",
3: "/images/icon128.png"
}
let inputrange = document.querySelector('input[type=range]');
inputrange.addEventListner("change", function() {
size = enum[inputrange.value];
imageURL = `chrome-extension://${chrome.i18n.getMessage("##extension_id") + size}` ;
}) ;
Related
I am trying to create a slideshow but the addEventListener is not working !!
i am beginner in js world and want to get better by projects but this simple project has stumped me.
const nextBtn = document.querySelector(".next-btn");
const prevBtn = document.querySelector(".prev-btn");
const slides = document.querySelectorAll(".slide");
const slider = document.querySelector(".slider");
const slideIcons = document.querySelectorAll(".slide-icon");
// selecting total number of slides
const numberOfSlides = slides.length;
// whatever
const slideNumber = 0;
// manual functionality
// next-btn
nextBtn.addEventListener("click" ,() => {
slides.forEach(slide =>{
slide.classList.remove("actve");
});
slideIcons.forEach((slideIcon) => {
slideIcon.classList.remove("active");
});
})
I don't got the whole situation but as I see your need to add event Listener to your slider so am gonna give you ex about range slider event handler
// this stores the value at startup (which is why you're always getting 1)
var rangeInput = document.getElementById("rangeinput").value;
You should be reading the value in the handler instead:
function testtest(e) {
// read the value from the slider:
var value = document.getElementById("rangeinput").value;
// now compare:
if (value > 0 && value < 5) {
alert("First");
} else {
alert("Second");
}
}
now Updating rangevalue
It also looks like you want to update the output element with the value of the range. What you're currently doing is referring to the element by id:
onchange="rangevalue.value=value"
However, as far as I know, this isn't standard behavior; you can't refer to elements by their id alone; you have to retrieve the element and then set the value via the DOM.
Might I suggest that you add a change listener via javascript:
rangeInput.addEventListener("change", function() {
document.getElementById("rangevalue").textContent = rangeInput.value;
}, false);
Of course, you'll have to update the code to use addEventListener or attachEvent depending on the browsers that you want to support; this is where JQuery really becomes helpful.
Use the mouseup event for that.
var rangeInput = document.getElementById("rangeinput");
rangeInput.addEventListener('mouseup', function() {
if (this.value > 0 && this.value < 5) {
alert("First");
} else{
alert("Second");
}
});
You can also use the FORMs oninput method:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" />100 +
<input type="number" name="a" value="10" /> =
<output name="result"></output>
</form>
This has an advantage over onclick/onmouseup because it handles the case where the slider is moved using the keyboard (tab to the input and use the arrow keys)
Try giving your html elements an id and then use getElementById instead of querySelector
I have a file with 170 images. These images are displayed on my website and the user can slide to see different pictures. This code works but I'm looking for a more efficient way to do what I did below.
var imgCo2 = new Array(); //create new array containing all elements below
imgCo2[0] = 'co2_model/0.jpg'; //string is this element of the array. string goes to local image located in file co2_model
imgCo2[1] = 'co2_model/1.jpg';
imgCo2[2] = 'co2_model/2.jpg';
imgCo2[3] = 'co2_model/3.jpg';
imgCo2[4] = 'co2_model/4.jpg';
imgCo2[5] = 'co2_model/5.jpg';
imgCo2[6] = 'co2_model/6.jpg';
imgCo2[7] = 'co2_model/7.jpg';
imgCo2[8] = 'co2_model/8.jpg';
imgCo2[9] = 'co2_model/9.jpg';
This repeats up to 171 and then I have a similar array with different images that goes to 150. This code is used for a an img slider. The slider code is below.
$(document).on('input change', '#slider', function() {//listen to slider changes
var v=$(this).val();//getting slider val
$('#sliderStatus').html( $(this).val() );
$("#imgTemp").prop("src", imageTemp[v]);
});
if you image name is not changing did you consider doing something like this
$(document).on('input change', '#slider', function() {//listen to slider changes
var v=$(this).val();//getting slider val
$('#sliderStatus').html( $(this).val() );
$("#imgTemp").prop("src", `co2_model/${v}.jpg`);
});
in this case you will not need an array at all
Question not closed yet so I'll put the code below. Wasn't as hard as I thought
var imgCo2 = new Array();
var i;
for (i= 0; i!=172; i++){ //the 172 is manually put(amount of images in the file starting from 0)
imgCo2[i]= 'co2_model/'+i+'.jpg'
}
I have a title within a div tag.
I need to translate the title whenever a translate button is clicked.
I have so far gotten to the point where i find the title div and want to change the contents of it by using a languageMap. But its not functioning! Any ideas?
var languageMap = {
'English1': 'French1',
'English2': 'French2'
}
function translateTitle() {
var qmTitle = document.getElementById('toolTitle')
var qmTitleText = qmTitle.innerHTML
var translatedTitle = languageMap[qmTitleText]
qmTitle.innerHTML = translatedTitle
}
Ok If you click the title it will change according to your map
What you needed to do is add an event listener for the click event
This sample shows you how to do that
I also exended your map so it translates backwards as well ..
var languageMap = {
'English1': 'French1',
'English2': 'French2',
'French1': 'English1',
'French2': 'English2'
}
var qmTitle = document.getElementById('toolTitle')
function translateTitle() {
// var qmTitle = document.getElementById('toolTitle')
var qmTitleText = qmTitle.innerHTML
var translatedTitle = languageMap[qmTitleText]
qmTitle.innerHTML = translatedTitle
}
qmTitle.addEventListener("click", translateTitle);
<h2 id="toolTitle">English1</h2>
I'm trying to programmatically update the position of my input slider (type="range").
I'm setting the value, however, that won't update the position of the slider.
I've also tried using:
element.dispatchEvent(new Event('input'))
to force an input change. This event does fire, however, the slider won't visually update.
function changeSliderPosition(position) {
let e = document.getElementById('mySlider');
e.value = position;
//Also set the position of the slider to position
}
I've seen some solutions that work in JQuery, but I don't want to include an entire library or even use it at all for such a seemingly small issue.
I'd appreciate any help with this problem!
Assuming that your slider (input type="range") has its min and max attributes set, all you need to do is set the value:
let input = document.getElementById("in");
let btn = document.querySelector("button");
let slider = document.querySelector("input[type='range']");
btn.addEventListener("click", function(){
slider.value = input.value;
});
Enter the value you want: <input id="in"><button>Go!</button><br>
<input type="range" min="1" max="100">
I have a html slider and I want to dynamically change the position of the cursor on the slider.
Look at here my jsfiddle demo : http://jsfiddle.net/8DCS6/
<input type="range" id="slider" min="0" max="14" value="14" />
<input type="button" id="b" value="Update slider"/>
var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.onclick = function() {
slider.setAttribute("value","10");
};
I put the max value to the 14 and I have a button. When I click on the button, I want to change the position of the cursor and for that, I change the attribute value to to 10 but the cursor doesn't move. But if I click on the cursor, the cursor moves but it's not really what I want because I just want to change the attribute value and see the move for the cursor.
Somebody have an idea to do this ?
I'm searching only a pure javascript solution because I'm using js_of_ocaml (http://ocsigen.org/js_of_ocaml/). I want to have a javascript to translante in js_of_ocaml.
Try this:
var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.addEventListener("click", function() {
slider.value = 10;
})
Not sure if there is a better way, but here is a workaround in the mean time:
var b = document.getElementById("b");
var slider = document.getElementById("slider");
b.onclick = function() {
var container = slider.parentNode;
slider.remove();
container.innerHTML = '<input type="range" id="slider" min="0" max="14" value="12" />' + container.innerHTML
};