Jump to content

Font Size And Kolom Adjustment Sliders


TheBnl

Recommended Posts

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

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

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

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...