Develop Reference

Html Model Box not work loop in laravel view

I want to show texts in web-page using loop with html Modal Box.texts saved in database.I am using laravel framework.only show modal box for first item, maybe it can be JavaScript not loading problem.
I used https://www.w3schools.com/howto/howto_css_modals.asp Modal box tutorials.used that css and javascript code.
just used w3schools code.
<div class="row">
#foreach($dw as $ad)
<!-- single product -->
<div class="col-lg-4 col-md-6">
<div class="single-product">
<!--{{$ad->image}}-->
<div>
<img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
</div>
<div class="product-details">
<h3 col-xl-5>{{$ad->jobtype}}</h3>
<div class="price col-xl-11">
<h6 col-xl-12>{{$ad->jobC}}</h6>
<div>
<button id="myBtn">Details</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>{{$ad->details}}</p>
</div>
</div>
</div>
</div>
<div class="prd-bottom">Send Your CV</div>
</div>
</div>
</div>
#endforeach
no errors showing but not working modal box for all sets, only showing first item in loop

Set Id for each modal and open them using the button on click
<div class="row">
#foreach($dw as $ad)
<!-- single product -->
<div class="col-lg-4 col-md-6" {{ $makeId = 1 }}>
<div class="single-product">
<!--{{$ad->image}}-->
<div>
<img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
</div>
<div class="product-details">
<h3 col-xl-5>{{$ad->jobtype}}</h3>
<div class="price col-xl-11">
<h6 col-xl-12>{{$ad->jobC}}</h6>
<div>
<button class="myBtn" modal-id="modal-{{ $ad->id }}">Details</button>
<!-- The Modal -->
<div class="modal" id="modal-{{ $ad->id }}">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>{{$ad->details}}</p>
</div>
</div>
</div>
</div>
<div class="prd-bottom">Send Your CV</div>
</div>
</div>
</div>#endforeach
<script>
$('.myBtn').click(function(){
var GetModalId = $(this).attr('modal-id');
$("#"+GetModalId).css('display', 'block');
});
$('.close').click(function(){
$('.modal').css('display', 'none');
});
</script>
Remember you need to attach jquery to your page to this codes work
you can use this code to attach jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Disable image on click html bootstrap

I have 4 images which allows users to select only 1 image out of 4.
When the user clicks on any image, the clicked image along with other 3 images should be disabled and the same user has to again click on the 'clicked' image to enable the image.
Basically i need to make the images look like its Clickable (with some borders or something..), Then onclick of image say 'A' the user gets a message (as shown from the when_i_click_carrom()), post which all the images (B,C,D) should be disabled (for that user only), and same user has to click on disabled image 'A' to enable it.
NOTE: Only the Image A should be disabled for the current user and other users, but other images B,C,D should be clickable for other users, until the current user enables the image A
...
<script>
var when_i_click_carrom = function(){
alert('You selected Carrom!');
}
</script>
...
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="images/carrom.jpg" alt="carrom" class="img-responsive" onclick="when_i_click_carrom();"/></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/foosball.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/table-tennis.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/chess.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>

Try with querySelectorAll .Img not have a default disable attribute .So try with class
document.querySelectorAll('.img-responsive').forEach(function(a) {
a.addEventListener('click', function() {
this.disabled = this.disabled == true ? false : true;
this.classList.toggle('disable')
//console.log(this.disabled)
})
})
.disable {
opacity: 0.5;
}
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="carrom" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>

You can check it out over here.
jQuery(".sidebar").click(function(){
if(jQuery(".sidebar").hasClass("disabled")){
jQuery(".sidebar").removeClass("disabled");
}else{
jQuery(".sidebar").addClass("disabled");
}
});
https://jsfiddle.net/ott5wanq/4/

Since you are using bootstrap, you can use image buttons and use disabled class for all items when one of them clicked. I created an example :
HTML :
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn1" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/1" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn2" class="btn btn-primary myBtn" onclick="imgClicked()" >
<img src="http://lorempixel.com/400/200/sports/2" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn3" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/3" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn4" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/5" alt="carrom" class="img-responsive">
</button></div>
</div>
</div>
Script ( using Jquery ) :
function imgClicked (){
$('.myBtn').addClass('disabled');
}
https://jsfiddle.net/emilvr/80u0pbyw/2/

Correct information not being displayed in modal by using angularJs

When I click on the thumbnail image in the media object, for the race "Australian GP", the modal with its information is opened. But when I click on the thumbnail object for the race "Chinese GP", the modal still shows the information about the Australian GP rather than showing that of the Chinese GP. Where am I going wrong or what more do I have to add? And more importantly, can someone explain to me why my code is not working?
<div class="container" ng-controller="seasonCtrl">
<div class="row" ng-repeat="race in races">
<div class="col-md-12">
<div class="media first-media">
<div class="media-left media-middle">
<img src="{{race.image}}" class="img-thumbnail media-object">
</div>
<div class="media-body">
<h2 class="media-heading"><a data-toggle="modal" data-target="#ausmod">{{race.name}}</a> <label class="label label-pill label-success">{{race.p1}}</label> <label class="label label-pill label-primary">{{race.p2}}</label> <label class="label label-info label-pill">{{race.p3}}</label></h2>
<p>{{race.smallinfo}}</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ausmod" ng-repeat="race in races">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button>
<h4>{{race.modalName}}</h4>
</div>
<div class="modal-body">
<p>{{race.modalDesc}}</p>
</div>
</div>
</div>
</div>
</div>
<script>
var app=angular.module("seasonApp", []);
app.controller("seasonCtrl", ["$scope", function($scope){
$scope.races=[
{
image:"Aliens.jpg",
name:"Australian GP",
p1:"Nico Rosberg",
p2:"Lewis Hamilton",
p3:"Sebastian Vettel",
smallinfo:"wgliu uyrgf pw77t 2ieugt9weud w87e7t d",
modalName:"Australian GP 2016",
modalDesc:"test info for australia"
},
{
image:"daily_tasks.jpg",
name:"Chinese GP",
p1:"Nico Rosberg",
p2:"Sebastian Vettel",
p3:"Daniil Kvyat",
smallinfo:"wgliu uyrgf pw77t 2ieugt9weud w87e7t d",
modalName:"Chinese GP 2016",
modalDesc:"test info"
}
];
}]);
</script>

The idea is to create a scope variable that is set to the currently selected 'race' on the ng-click of your anchor tags and use that in your modal.
Add to Controller
$scope.selectedRace = {};
$scope.setSelectedRace = function(idx) {
$scope.selectedRace = $scope.races[idx];
};
HTML Changes
Add 'track by $index' to assure unique rows
<div class="row" ng-repeat="race in races" track by $index>
Add ng-click to each anchor
ng-click="setSelectedRace($index)"
Remove ng-repeat from modal div
<div class="modal fade" id="ausmod">
Change modal content to reference selectedRace object rather than race
<h4>{{selectedRace.modalName}}</h4>
<p>{{selectedRace.modalDesc}}</p>
Here's a working plunk

I have improved your code.It does not work because in the loop attribute id has to be unique.
Controllr
var app=angular.module("seasonApp", []);
app.controller("seasonCtrl", ["$scope", function($scope){
$scope.races=[
{
image:"Aliens.jpg",
name:"Australian GP",
p1:"Nico Rosberg",
p2:"Lewis Hamilton",
p3:"Sebastian Vettel",
smallinfo:"wgliu uyrgf pw77t 2ieugt9weud w87e7t d",
modalName:"Australian GP 2016",
modalDesc:"test info for australia"
},
{
image:"daily_tasks.jpg",
name:"Chinese GP",
p1:"Nico Rosberg",
p2:"Sebastian Vettel",
p3:"Daniil Kvyat",
smallinfo:"wgliu uyrgf pw77t 2ieugt9weud w87e7t d",
modalName:"Chinese GP 2016",
modalDesc:"test info"
}
];
}]);
HTML
<div class="container" ng-controller="seasonCtrl">
<div class="row" ng-repeat="race in races">
<div class="col-md-12">
<div class="media first-media" track by $index>
<div class="media-left media-middle">
AAA
</div>
<div class="media-body">
<h2 class="media-heading"><a data-toggle="modal" data-target="#ausmod">{{race.name}}</a> <label class="label label-pill label-success">{{race.p1}}</label> <label class="label label-pill label-primary">{{race.p2}}</label> <label class="label label-info label-pill">{{race.p3}}</label></h2>
<p>{{race.smallinfo}}</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ausmod{{$index}}" ng-repeat="race in races" track by $index>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button>
<h4>{{race.modalName}}</h4>
</div>
<div class="modal-body">
<p>{{race.modalDesc}}</p>
</div>
</div>
</div>
</div>
</div>

Boostrap modal element offset giving zero

To scroll to an element in my Bootstrap modal, I can check the offset of the element. There are for instance 8 div's, each with their own id (#row-1, #row-2, etc.). If I open the modal and then input the following into the console, I get the correct offset value.
$('#row-6').offset()['top'];
But when I console.log this into the code itself, after opening the modal with .modal('show'), I get 0 back.
How can this difference occur? I tried all the solutions I could find on here, but all solutions gave me the same 0.
My problem would also be solved if I could scroll to the element in any other way with JavaScript.

You must wait for the modal to be shown:
// The modal is shown
$('#yourModal').on('shown.bs.modal', function() {
// Get the right offset
var offset = $("#yourelement").offset();
var offsetTop = offset.top;
var offsetLeft = offset.left;
});

My guess would be that the elements are not done being shown yet in order to give you the correct value? Try using a setTimeout to verify this:
setTimeout(function(){ $('#row-6').offset()['top']; }, 3000);

You said:
My problem would also be solved if I could scroll to the element in
any other way with javascript.
So, here is my suggestion to your problem:
html:
<button id="modal_show" class="btn btn-warning">Show modal</button>
<div id="myModal" class="modal modal-flex fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:60px;">
<div class="modal-dialog">
<div class="modal-content" style="padding:5px;">
<div class="modal-body">
<div class="row" id="row1">
<div class="col-xs-12">
<p>
This is row 1
</p>
</div>
</div>
<div class="row" id="row2">
<div class="col-xs-12">
<p>
This is row 2
</p>
</div>
</div>
<div class="row" id="row3">
<div class="col-xs-12">
<p>
This is row 3
</p>
</div>
</div>
<div class="row" id="row4">
<div class="col-xs-12">
<p>
This is row 4
</p>
</div>
</div>
<div class="row" id="row5">
<div class="col-xs-12">
<p>
This is row 5
</p>
</div>
</div>
<div class="row" id="row6">
<div class="col-xs-12">
<p>
This is row 6
</p>
</div>
</div>
<div class="row" id="row7">
<div class="col-xs-6">
<p>
This is row 7
</p>
</div>
<div class="col-xs-6">
<p class="pull-right">
<span class="scroller" data-to="3">Go To 3</span>
</p>
</div>
</div>
<div class="row" id="row8">
<div class="col-xs-6">
<p>
This is row 8
</p>
</div>
<div class="col-xs-6">
<p class="pull-right">
<span class="scroller" data-to="2">Go To 2</span>
</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-xs-12 pull-right">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Jquery:
$('#modal_show').on('click', function(){
$('#myModal').modal({show: true});
});
$('.scroller').click(function(){
var targetId = $(this).attr("data-to");
$('#myModal').animate({
scrollTop: $("#row"+targetId).position().top
}, 1000);
});
and some css:
.row {
min-height:100px;
}
.scroller {
cursor:pointer;
text-decoration:underline;
}
When you scroll down to div's 7 and 8, you will notice links that scroll you up to div #3 and #2 respectively.
working fiddle: http://jsfiddle.net/xL9at8sc/
Hope that helps you and others...

Some CSS Alignment issues with bootstrap

I'm trying to align my product box to look like this:
What I have thus far:
jsFiddle
I'm just trying to obtain the results of the "boxed" area, but I cannot for the life of me figure out this alignment.
I've included external resources to my JS & CSS as well.
HTML is below:
<section id="product">
<div class="container White_BG">
<aside class="col-md-4">
<!--Category-->
<div class="sidewidt2">
<div class="productprice" id="StandardProductBox">
<div id="ItemNumber">
<span itemprop="identifier" content="sku:EB06">
<p># EB06</p>
</span>
</div>
<div itemprop="availability" id="StockStatus" content="in_stock">
<strong>Out of Stock,</strong>
Please call for availability
</div>
<p class="prod-det-price">Call for Pricing</p>
<label for="qtyproduct" id="qtylabel">Qty</label>
<input id="qtyproduct" type="text" value="1" name="dmilist_Qty_100000060715">
<ul class="productpagecart">
<li>
<span style="position:relative;">
<input type="submit" id="DisabledAddToCart" name="Add to Cart" value="ADD TO CART" alt="Add to Cart" style="cursor:not-allowed;" disabled="disabled">
<div class="DisabledCart" style="position:absolute; left:0; right:0; top:0; bottom:0; cursor:not-allowed;"></div>
</span>
<div class="modal fade" id="NotAvailable" tabindex="-1" role="dialog" aria-labelledby="NotAvailableLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<img class="closeModal" data-dismiss="modal" aria-hidden="true" src="http://cdnll.amleo.com/images/art/x_white.png" height="20" width="20" alt="X">
<h4 class="modal-title" id="myModalLabel">Not Available Online</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><strong>Not available for online orders. Please call 1-800-543-8995 to order; thank you.</strong></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="ShipWeight" id="ShipWeight">
Weight: 29.80 lbs
</div>
</aside>
</div>
</section>

I'm not sure what you have the ability to adjust and what you don't, but you can do this a couple ways by changing the markup and the classes. I'll show you the finished product and you'll have to work to convert your markup to something like this.
If you want half the content to hug the left, and the other half to hug the right, you should keep each separate. You can float one section left and the other right (.pull-left and .pull-right in Bootstrap), but since you're already using Bootstrap, why not use their grid system for layout. That's what it's there for!
So set up your shopping cart item, and add a .row inside of it, and then split the content in half with two divs with .col-xs-6. Put the content inside each div. The content for the one on the right can align to the right by using .text-right.
Like this:
<div class="ItemBox ">
<div class="row">
<div class="col-xs-6">
<b>#EBRO1</b><br/>
Call for pricing.<br/><br/>
<label for="qtyInput" >Qty</label>
<input type="text" id="qtyInput" />
</div>
<div class="col-xs-6 text-right">
<b>Out of Stock,</b><br/>
Please call for availability <br/><br/>
<button class="btn btn-default">Add to Cart</button>
</div>
</div>
</div>
Demo in fiddle
Which will look like this: