Jump to content
TheBnl

Font Size And Kolom Adjustment Sliders

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!

Share this post


Link to post
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.

Share this post


Link to post
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!

Share this post


Link to post
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;}

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Did you try the loop like Ingolme suggested? What does that code look like? Does it produce any errors?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...