harunB10 harunB10 - 4 years ago 124
CSS Question

Change div width in Laravel blade using expression or jQuery

I want to dynamically change width value of div element. Div contains blocks and the size of them depends on variable. For example if

$t->spotdiff = 2
I'd have two blocks separated equally 50/50% in column, if
$t->spotdiff = 10
, then I'd have 10 smaller blocks and so on...

This is my blade:

@foreach($test as $t)
...
<table>
...
<tr>
<td>
@for($i = 0; $ i < $t->spotdiff; $i++)
<div id="modal" data-toggle="modal" data-target="#myModal" style="cursor:pointer;float:left;background:#c0c0c0;height:18px;margin-right:1px;"></div>@endfor<span style="color:#fd8809">{{$t->spotdiff}}
@endfor
</td>
</tr>
...
</table>
...
@endforeach


I was trying to set it using Blade (I'm not actually sure if expressions could be written like this):

<div id="modal" style="witdh: {{(100 / $t->spotdiff)}}"></div>


Or with jQuery:

<script type="text/javascript">
$("#modal").css("width", "{{(100 / $t->spotdiff)}}");
</script>


But without success. Any ideas?

Answer Source

You have spelling mistake,

1) Direct way

<div id="modal" style="width: {{(100 / $t->spotdiff)}}px"></div>

2) JQUERY WAY

<script type="text/javascript">
    $("#modal").css("width", "{{(100 / $t->spotdiff)}}px");
</script>

Give it a try, it will work.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download