dynamically sizing with javascript and jquery

Question

So my end goal is to create an image slide from scratch that displays 3 images stacked on each other. This should not be a problem. My issue lies in the dynamic resizing. I wanted to create a function that takes in parameters for width and height and overrides the defaults set in the css. everything else worked fine until i tried to use the attr() function. now when add the arguments for height and width, nothing changes. any ideas/help? go easy on me, i'm new to front end development. Is there a better way to do this? thanks to all.

demo.html

<!DOCTYPE html>
<html>
<head>
<script src="js/APSlider.js"></script>
<link rel="stylesheet" type="text/css" href="css/APSlider.css"/>
<script src="js/jquery-1.11.1.min.js"></script>
<style type="text/css">
  .myClass{
    color: blue;
  }
</style>
</head>
<body>
  <script type="text/javascript">
      var array = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
      createHTML(3, 3, array, 'myClass', 200, 500);
  </script>
</body>
</html>

APSlider.js

//optional parameters: userClass, height, width
function createHTML(rows, columns, array, userClass, height, width){
  var count = 0;

  //specify if user defined class is passed.
  if(typeof userClass !== undefined){
    document.write('<div id="container" class="' + userClass + '">');
  }
  else{document.write('<div id="container">');}

  document.write('<div class="innercontainer">');

  //generate ul based on arguments
  for(var i = 0; i < columns; i++){
    document.write('<div id="logoBlock' + i + '">');
    document.write('<ul type="none">');
    for(var j = 0; j < rows; j++){
        document.write('<li><p>' + array[count] +'</p></li>');
        count++;
    }
    document.write('</ul>');//end ul
    document.write('</div>');//end logoBlock div
  }
  document.write('</div>');//end innercontainer div
  document.write('</div>');//end container div

  //if height and width are set in parameters, call to change css. THIS IS NOT WORKING 
  if(typeof height !== undefined){
    var individualHeight = height / rows;
    $(document).ready(function() {
        $("div[id*='logoBlock']").attr("height", individualHeight);
        $(".innercontainer").attr("height", individualHeight);
        $("#container").attr("height", individualHeight);
    });
  }
  if(typeof width !== undefined){
    $(document).ready(function() {
        $("#container").attr("width", width);
        $("div[id*='logoBlock']").attr("width", width);
    });
  }
}

APSlider.css

#container {
  position: absolute;
  border: 1px solid black;
  width: 100px;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.innercontainer {
  width: 310px;
  margin: 0;
  padding: 0;
}

div[id*='logoBlock'] {
  position: relative;
  display: inline-block;
  border: 1px solid blue;
  width: 100px;
  height: 102px;
  margin: 0;
}

Answer 1

You cannot change CSS styles once they have been loaded. (Maybe you can change StyleSheet object in some browsers but it's not recommended.)

You should use jQuery css() method to manipulate height and width of the elements directly.

Answer 2

The problem is you have set your height in css file but not as inline attribute in your html file.

.attr() works only on attributes and not on css properties

consider : <div width="80"><!-- blah --></div>

          $("div").attr("width") -> works in this case it returns 80 
          $("div").attr("width",100) -> works 

consider <div style="width:80px"><!-- blah --></div>

          $("div").attr("width") -> does not work

because width is set in css but not as inline attribute. 
instead you should use .css("width","80px") works amazing right.

To eliminate this confusion jQuery introduced .height() and .width() that works even when you specify height as attribute or in style sheet

Use this

 $("div[id*='logoBlock']").height(individualHeight);

Also stop using document.write method its almost deprecated. it results erroneous.

I would recommend to write the entire dom strcuture into a string some thing like this

var x = "<div id='container'>";
x += "<div><ul> your content </ul></div>";

Then insert it using .innerHTML() or jQuery methods such as $("body").html(x) or $("body").append(x);

dynamically sizing with javascript and jquery

Question

2 answers

solution1
0 2014-05-27 03:30:45

solution2
0 ACCPTED 2014-05-27 08:05:32

dynamically sizing with javascript and jquery

Question

2 answers

solution1 0 2014-05-27 03:30:45

solution2 0 ACCPTED 2014-05-27 08:05:32

solution1
0 2014-05-27 03:30:45

solution2
0 ACCPTED 2014-05-27 08:05:32