Changing the width value of a javascript variable with css

Question

I have the following code in my javascript :

var demoSlider_3 = Sliderman.slider({container: 'SliderName_3', 
                                     width: 167, 
                                     height: 250, 
                                     effects: effectsDemo3, 
                                     display: { autoplay: 4000 }
                                    });

What I'm trying to do is to set the width and the height in the CSS file (I'm trying to make it responsive).

For now i haven't find the solution...
so if anybody has a clue I'll appreciate your help !

Thank you

I may be misunderstanding what you're trying to do, but wouldn't it be better to have the style defined in CSS and just make the Javascript switch style instead of setting hard coded values? — Joachim Isaksson
– Joachim Isaksson, Commented Sep 26, 2012 at 9:48
"Changing the width value of a javascript varaible with css" You can't set a script variable using CSS, because the latter isn't a scripting language. — feeela
– feeela, Commented Sep 26, 2012 at 10:03

feeela · Accepted Answer · 2012-09-26 10:05:38Z

1

You could set the initial width height via CSS and read it from the element, which should become the slider, via JavaScript. It doesn't matter if you use inline styles, a CSS-class or whatever to style the element. You just need to read the computed values and use them in the slider initialization.

answered Sep 26, 2012 at 10:05

feeela

30k7 gold badges61 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pebbl · Accepted Answer · 2012-09-26 10:13:49Z

0

If I wanted to make something I was adding in to a page using JavaScript respond to a particular element's dimensions I would usually use width = '100%' height = '100%' and then tailor my wrapping element with css so that it has a defined width and height.

Example (using jQuery for simplicity):

css:

.wrapper { width: 300px; height: 300px; }

js:

$(function(){
  var myElementToEmbed = $('<div />').css({width:'100%',height:'100%'});
  var targetWrapper = $('.wrapper');
  targetWrapper.append( myElementToEmbed );
});

dom:

<div class="wrapper"></div>

That way the JavaScript deals with the functional workings (as it should) and the CSS deals with the styling of display (as it should).

answered Sep 26, 2012 at 10:13

Pebbl

36.1k6 gold badges66 silver badges65 bronze badges

3 Comments

feeela Over a year ago

…and you have one useless element more. Why to use wrapper, if you could style the slider element directly via its ID (SliderName_3)?

Pebbl Over a year ago

... because you have no way of knowing exactly how the internal embed/plugin will handle defining it's dimensions... if you have - as the OP states - a constructor like Sliderman.slider if you don't pass dimensioning information it may use defaults, overriding the ones you've defined in CSS (please don't advocating the use of !important). There is barely any overhead by defining a wrapping element and it gives you extra leverage from what you can do easily in CSS. Obviously my example above is for illustrative purposes only, you would not use this to embed a plain old div element.

el lucarnator Over a year ago

Thanks all for your return. I'll test what you recommanded to me ! :-)

Collectives™ on Stack Overflow

Changing the width value of a javascript variable with css

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related