I'm currently working on a website with YouTube embedded videos in Bootstrap modal. The problem is that YouTube embed is slowing down the website, because every embed is resulting in like 6 Chrome extension errors. This will result in like 100 errors and the website is going really slow.
Because it looks like every video is getting loaded, because they are in a while loop. Is there any other way to embed it? Without all these errors..
Can I make it better? I don't want all those errors. I tried object, but the videos are loading really slowly.
There is an image of the error.
I'm looping out images and when I click on them, it will embed out youtube videos.
<div class="mosaic-block bar2">
<div class="mosaic-overlay" >
<div class="details">
<center><h4>'.$dos['namn'].'</h4></center><br/>
</div>
</div>
<div class="mosaic-backdrop"><img src="uploads/'.$dos['bild'].'" data-toggle="modal" data-target="#'.$dos['id'].'"></div>
</div>
<!-- Modal -->
<div class="modal fade" id="'.$dos['id'].'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="margin-top: 159px;/* float: left; */width: 800px;float: 0 auto;margin: 0 auto;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<center><font color="grey">'.$dos['uppare'].'</font></center> <div class="content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/'.$dos['youtube'].'" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Related
enter image description here
this is my laravel blade code, I want to show the popup on the same page, it is showing also. But it is not clickable, and shows fade model can anyone suggest me to do another method, as I have tried other's method also. Thank you in advance.
#foreach($popup as $pop)
<div class="popup col-md-3">
<div class="contain">
<img src="{{ $pop->front_layout }}" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<a class="btn btn-warning" data-toggle="modal" data-target="#myModal">Preview</a>
</div>
</div>
{{--<div class="pops" id="{{ $pop->id }}">
{!! $pop->website !!}
</div>--}}
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endforeach
Your modals don't have a unique id.
<a class="btn btn-warning"
href="#loginbutton"
data-toggle="modal"
data-target="#myModal-{{ $pop->id }}">Preview</a>
<div id="myModal-{{ $pop->id }}"
class="modal fade"
role="dialog">
As for the visualization problem you've got two possible fixes:
Add a high z-index value to your modal.
<div id="myModal-{{ $pop->id }}"
class="modal fade"
role="dialog"
style="z-index: 10000; /* adjust as needed */">
Add enough top margin to your modal to avoid having it overlap with the navbar
<div id="myModal-{{ $pop->id }}"
class="modal fade"
role="dialog"
style="margin-top: 20rem /* adjust as needed */;">
Make sure your modal is actually at the end of the page and has no parent elements besides the </body> tag
<body>
....
<div class="modal fade" ...></div>
<script ...>...</script>
<script ...>...</script>
<script ...>...</script>
</body>
try to change modal css "top" value,
Maybe this can help
.modal {
top: 120px;
}
Or change .modal-dialog css
.modal-dialog {
margin: 100px auto; }
I am trying shows pdf summary to user before download. There is pdf detail page to shows user pdf cover image, name, description, price, summary and buy now button.
Here's user wants to read summary of report then click on summary button and open model to read embed pdf. After read summary he wants to buy then will click on buy now button.
So, i want show only 2 pdf page on summary button. There is summary and buy now pdf report is same.
I tryed show summary of report, but there is show full pdf.
Here's my code below:-
public function raReportDetail($id){
$reportdetail = '';
$result = $this->connect()->query("SELECT * FROM wm_report WHERE id='$id'");
if($result->num_rows>0){
$row=$result->fetch_assoc();
$reportdetail ='
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="large-5 column">
<div class="xzoom-container">
<img class="img-fluid" src="cover_images/'.$row['cover_img'].'">
</div>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="content-report-detail">
<div class="large-12 column">
<h3>'.$row['name'].'</h3>
</div>
<hr>
<div class="price-wrap">
<h3>Price: <i class="fa fa-rupee"></i> '.$row['price'].'/- </h3>
</div>
<div class="large-7 product-detail">
<p style="text-align: justify;">'.$row['description'].'</p>
<div class="ro-options">
<div class="no-row">
<div class="cart-btn-price">
<ul>
<li>
Summary </li>
<li>
Buy Now
</li>
</ul>
</div>
</div>
<div class="sku-code">
<span class="posted_in">Categary: '.$row['category'].'</span>
|
<span class="posted_in">SKU Code : '.$row['sku'].'</span>
</div>
</div>
</div>
</div>
</div>
<div id="Summary" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 style="display: contents;">Summary of '.$row['name'].'</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<embed src="report/'.$row['report'].'" frameborder="0" width="100%" height="400px">
</div>
</div>
</div>
</div>
';
}else{
$reportdetail = 'Something Went Wrong';
}
return $reportdetail;
}
If you have the ImageMagick library installed in your PHP, you can convert a specific page to jpg.
$im = new Imagick();
$im->setResolution(300,300);
// the [0] below indicates the first page only.
$im->readImage('document.pdf[0]');
$im->setImageFormat('jpeg');
$im->writeImage('thumb.jpg');
$im->clear();
$im->destroy();
You'd probably want to do this for the two pages you wanted to use as a preview.
See also the ImageMagick::readImage documents. The documentation itself isn't great, but the user comments are pretty good. You should be able to $im->setImageFormat('pdf'); as well.
I stole this from Convert PDF to JPEG with PHP and ImageMagick
I would go with FPDI from setasign.
It is simple to use and easy to install. I currently use it in one of my application and it works very good.
https://www.setasign.com/products/fpdi/demos/simple-demo/
I am implementing In-line sharethis buttons in a bootstrap modal.
ShareThis button are working fine on a rendered page.
But, they are not appearing on modal.
When I inspect the modal code or change the height of the inspect window, ShareThis buttons appears on modal.
I think this happening because inspect window changes the layout of the page.
JS link included in header
<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#product=custom-share-buttons"></script>
This is the code of modal:
<div class="modal fade" id="inviteFriendsModal" tabindex="-1" role="dialog" aria-labelledby="inviteFriends" style="display: none;">
<div class="modal-dialog " id="primary-header-modal" role="document" style="margin: 8% auto; width: 670px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close alert-close-icon" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Invite Friends, get {{INVITE_EARNED_REWARD}} points</h4>
</div>
<div class="modal-body bg-grayf2f2f2">
<div class="row margin0 text-center">
<img src="{{ asset('images/inviteFriends.png') }}" height="100px" class="margin-bottom20">
<p class="font18">SHARE YOUR CODE</p>
<p><span class="font18 font-wt400" style="color: #1fbad6;">{{Session::get('invitationCode')}}</span></p>
<p class="padd-bottom15">Your friends get {{INVITE_EARNED_REWARD}} points when they join and you get {{INVITE_EARNED_REWARD}} too, after their first interaction.</p>
<div class="text-center">
<div class="sharethis-inline-share-buttons" data-description='{{ $stSummary }}' data-url='{{ $stUrl }}' data-message="{{trans('interviewerMessages.inviteFriendsStSummary')}}" data-short-url="{{ $stUrl }}" data-title="{{ trans('messages.ogTitle') }}"></div>
</div>
</div>
</div>
</div>
</div>
Also, I have created a test url for more clarification:
URL
Please help me on this issue that sharethis buttons should appears on modal on beforehand.
How can I fetch and display Fetch pdf from S3 bucket and display in bootstrap modal,
I have tried like below
//href to open modal
Filename
//bootstrap modal
<div id="InvoiceModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Invoice</h4>
</div>
<div class="modal-body">
//here i am trying to fecth pdf file
<embed src="<?php echo base_url('https://s3-us-west-2.amazonaws.com/j2wmsp/production/invoice_reports/2018-10-05%2011:58:38-Invoice6(%20Venkata%20Sameer%20Kota-Sep%202018).pdf'); ?>"
frameborder="0" width="100%" height="400px">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The above code display empty modal, How can I display PDF file,
Thanks.
The problem is not in the bootstrapmodel. The problem is in amazons3 bucket.
You need to change the Content-Type and Content-Disposition.
Content-Type: application/pdf;
Content-Disposition: inline;
Using the AWS S3 console, find the file and using the context menu (right click) select Properties then it's under Metadata.
I am facing issue while trying to switch between two modal windows. Requesting you guidance on the same
Objective
In my page, i have a link. When i click that link my modal 1 opens. This model 1 has a link which when i click opens 2.
Code
Sample page - Modal window 1 - Contents below are part of Modal 1
<div class="row">
<div class="col-md-12">
<?php
if($_SESSION['role'] == "Business")
{ ?>
<div class="form-group" id="buscomments">
View Business Comments
</div>
</div>
<div class="col-md-12">
<?php }else { ?>
<div class="form-group" id="othcomments">
View Other Comments
</div>
<?php } ?>
</div>
Now in the same HTML File - I have two other models
<div class="modal fade text-center" id="busscomments">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
<div class="modal fade text-center" id="othcomments">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
Modal content of these modals are available in busscomments.php and
othcomments.php respectively
Output :
My Modal 1 opens correctly but when i click busscomments.php link which should ideally open modal 2, does not happen. i could see the fade effect but no modal is displayed
What i referred :
I refered the below links and try to modify my code but no luck
Stackoverflow link 1
Not sure What i am missing. I understand that traditional use of Jquery to do the same should be ideal. But any help in this regard would be helpful.
Please let me know if more information is required from my end.
Thanks
UPDATE :
Othcomments.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Other Comments</h4>
</div>
<div class="modal-body">
<div class ="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-1">Other Comments</th>
</tr>
</thead>
<?php
while(mysqli_stmt_fetch($statement))
{
$response = array("oth"=>$othcomments);
?>
<tbody>
<tr>
<td><?php echo $response['oth']; ?></td>
</tr>
</tbody>
<?php } ?>
</table>
</div>
</div>
MY BAD.. I absolutely messed up calling the modal ID's. I interchanged the Id's and there was no result from the database. I fixed the issue. Thank you