CODEWITHSUNDEEP
javascriptcssvariableswidthresponsive-design
el lucarnator
el lucarnator

Reputation: 15

Changing the width value of a javascript variable with css

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

Upvotes: 0

Views: 978

Answers (2)

Pebbl
Pebbl

Reputation: 35995

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).

Upvotes: 0

feeela
feeela

Reputation: 29932

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.

Upvotes: 1

Related Questions