TheBnl Posted September 28, 2011 Share Posted September 28, 2011 I'm trying to get these sliders to work so a user can adjust the readability of the website. i have a slider to adjust the font size, the number of colums and the background color. For the background color i want to have some sort of color picker but i still need to look into that but if you have any suggestions please let me know! here's the code: //fontsizewindow.onload = function() {var value_display = document.getElementById("value_display").className.class="value_display";var lorem = document.getElementsByClassName("lorem");document.getElementById("slider").onchange = function() {value_display.value = this.value;lorem.style.fontSize = this.value + "em";}}//kolom aantalfunction changeColumnNoSlider(event) {var val = event.target.value;document.getElementById('columns-no-value').className='columns-no-value'.textContent = val;var el = document.getElementsByClassName('kolom');el.style.webkitColumnCount = val;el.style.MozColumnCount = val;} The problem is that i use it for blog post so it's not just one article i want to adjust. the code works if i use .getElementById but i need to use classes. Thanks in advance! Link to comment Share on other sites More sharing options...
Ingolme Posted September 28, 2011 Share Posted September 28, 2011 There's getElementsByClassName() (returns a nodelist, not an element) for modern browsers. For older ones, you have to loop through all the elements and check their classname to see if it matches. Link to comment Share on other sites More sharing options...
TheBnl Posted September 28, 2011 Author Share Posted September 28, 2011 I tried but it didn't work, i think my coding is wrong or i'm thinking to simple to just changes the byId's to ClassName.Here's the code i have now: //fontsizewindow.onload = function() {var value_display = document.getElementById("value_display");var tekst = document.getElementsByClassName(tekst);document.getElementById("slider").onchange = function() {value_display.value = this.value;tekst.style.fontSize = this.value + "em";}}//kolom aantalfunction changeColumnNoSlider(event) {var val = event.target.value;document.getElementById('columns-no-value');var el = document.getElementsByClassName('kolom');el.style.webkitColumnCount = val;el.style.MozColumnCount = val;} I'n my markup i have the div element with the classes (class="kolom tekst") but it still isn't communicating Thanks for your help! Link to comment Share on other sites More sharing options...
Ingolme Posted September 28, 2011 Share Posted September 28, 2011 I specified that it was a node list. To deal with node lists you have to loop through each node of the list. var x = document.getElementsByClassName('y'); var i;for(i = 0; i < x.length; i++) { x[i].style.backgroundColor = "blue;} Link to comment Share on other sites More sharing options...
TheBnl Posted September 28, 2011 Author Share Posted September 28, 2011 I didn't got the ClassName to work, but i got it to work with jQuery. The only thing is i don't want to use the jQuery slider but the HTML slider.Here's the code: $(function() { $('#tekstslider').slider({ value:16, min: 14, max: 25, step: 1, slide: function( event, ui ) { $('#font_size').val(ui.value + 'em'); $('.tekst').css('font-size', ui.value); } }); $('#font_size').val($('#tekstslider').slider('value') + 'em');}) Search results only give me more jQuery sliders but i need less ;-) Thanks! Link to comment Share on other sites More sharing options...
ShadowMage Posted September 28, 2011 Share Posted September 28, 2011 Did you try the loop like Ingolme suggested? What does that code look like? Does it produce any errors? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.