0

I want to set the width of an element after the page got loaded. For that I use this script:

<script type='text/javascript' src='https://radlvoo.de/wp-includes/js/jquery/jquery.js'>
        jQuery(document).ready(function() {
            var y = document.getElementsByClassName("col-sm-6");

            for (var i = 0; i < y.length; i += 1){
                y[i].style.width = "100%";
            }
        });
</script>

But it isn't working. If I replace the jQuery(document).ready(function() { with a real function, lets say changeWidth() it is working..

Try it yourself here. You can see, that this one will expand if you call changeWidth() in the console: enter image description here

Further, if I leave that out type='text/javascript' src='https://radlvoo.de/wp-includes/js/jquery/jquery.js', it says:

jQuery is not defined

What is the reason for this and how can I fix that?

Kind regards

Erik
  • 45
  • 7

2 Answers2

2

Your code should be

<script type='text/javascript' src='https://radlvoo.de/wp-includes/js/jquery/jquery.js'></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        var y = document.getElementsByClassName("col-sm-6");

        for (var i = 0; i < y.length; i += 1){
            y[i].style.width = "100%";
        }
    });
</script>
Shiladitya
  • 12,003
  • 15
  • 25
  • 38
0

You should use this code:

<script type='text/javascript' src='https://radlvoo.de/wp-includes/js/jquery/jquery.js'></s‌​cript>
<script type='text/javascript'>
    jQuery(document).ready(function() {
        var y = jQuery(".col-sm-6");
        y.each(function() {
            $(this).css('width', '100%');
        });
    });
</script>
Chandra Kumar
  • 4,127
  • 1
  • 17
  • 25
  • But then I get: `Uncaught ReferenceError: jQuery is not defined at (index):65 (index):78 Uncaught ReferenceError: jQuery is not defined at (index):78` – Erik Aug 01 '17 at 03:28
  • You need to include jquery before of this code.. like: `` – Chandra Kumar Aug 01 '17 at 03:37