I using bootstrap-fileinput to load an image to my project. Is it possible to get the image details like the size, resolution, etc?
My code is:
<div class="col-md-4">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" >
<img src="<?php echo $src; ?>" style="width:200px;height:150px" alt=""/>
</div>
<div class="fileinput-preview fileinput-exists thumbnail" id="imagem" style="max-width: 200px; max-height: 150px;">
</div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new">Escolher imagem </span>
<span class="fileinput-exists">Alterar </span>
<input id="imagem" type="file" name="...">
</span>
<a id="btnRemoverImagemCapa" href="#" class="btn red fileinput-exists" data-dismiss="fileinput"> Remover </a>
</div>
</div>
Related
I'm making a feedback popup. I want to make sure that the text in the input can come to my email when users press the submit button. I tried it in the way below, but the text in the input doesn't come to me by e-mail.
<div class="popup" style="z-index: 10">
<div class="contentBox">
<!--close_btn=======-->
<button id="close">X</button>
<div class="feedbackBox" style="padding-top: 3px">
<strong>Give feedback</strong>
<p style="margin: 10.96px">
Таны үлдээсэн сэтгэгдэл бидэнд маш их тус болох болно.
</p>
</div>
<!--emojies========-->
<div class="emojiBox">
<div class="emoji" style="margin-left: 56.81px">
<img src="icons/face emoji/smiling-face-with-heart-eyes.png" alt="" />
<p>Best</p>
</div>
<div class="emoji">
<img src="icons/face emoji/happy-face-with-enlarged-eyes.png" alt="" />
<p>Good</p>
</div>
<div class="emoji">
<img src="icons/face emoji/expressionless-face.png" alt="" />
<p>Bad</p>
</div>
<div class="emoji">
<img src="icons/face emoji/face-with-steam-from-nose.png" alt="" />
<p>Terrible</p>
</div>
</div>
<!--feedback-write==-->
<div class="wrie_feedback">
<p>Үлдэхийг хүссэн санал бодол, сэтгэгдлээ доор үлдээнэ үү.</p>
<input type="text" maxlength="200" required />
</div>
<!--send-btn========-->
<button id="send_feedback">Явуулах</button>
</div>
</div>
So basicaly i need to filter my results based on the checked buttons
This is the design of the page, those 3 on the top are the checkboxes, 1- done 2- in progress 3- soon
this is the html, im using angular ng-repeat to add cards on the page based on my SQL db data
<section id="team" class="team section-bg portfolio">
<div class="container aos-init aos-animate" data-aos="fade-up">
<div class="section-title">
<h1 id="obrometroH1">Galeria de Obras</h1>
<p>Acompanhe as obras da Prefeitura de Cajamar</p>
</div>
<div style="text-align: center;">
<input type="checkbox" class="btn-check" id="btn-check" checked autocomplete="off" />
<label class="btn btn-primary btn-lg" for="btn-check">
<img style="width: 30px;" src="~/Content/img/entregue-rounded.png" class="img-fluid animated icone-mapa" alt="" />
Entregue</label>
<input type="checkbox" class="btn-check" id="btn-check2" checked autocomplete="off" />
<label class="btn btn-primary btn-lg" for="btn-check2">
<img style="width: 30px;" src="~/Content/img/andamento-rounded.png" class="img-fluid animated icone-mapa" alt="" />
Em andamento</label>
<input type="checkbox" class="btn-check" id="btn-check3" checked autocomplete="off" />
<label class="btn btn-primary btn-lg" for="btn-check3">
<img style="width: 30px;" src="~/Content/img/breve-rounded.png" class="img-fluid animated icone-mapa" alt="" />
Em breve</label>
</div>
<ul id="portfolio-flters" class="d-flex justify-content-center aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
<li data-filter="*" class="filter-active">Todos</li>
<li data-filter=".filter-6">Serviços Públicos</li>
<li data-filter=".filter-1">Educação</li>
<li data-filter=".filter-5">Lazer</li>
<li data-filter=".filter-2">Saúde</li>
<li data-filter=".filter-3">Segurança</li>
<li data-filter=".filter-4">Desenvolvimento Urbano</li>
<li data-filter=".filter-7">Cajamar Bem Cuidada</li>
</ul>
<div class="row portfolio-container">
<div ng-repeat="x in listObras | orderBy:orderByField:reverseSort" class="col-lg-12 portfolio-item filter-{{x.IdTipoObra}}">
<div class="member d-flex align-items-start aos-init aos-animate" data-aos="zoom-in" data-aos-delay="100">
<div class="col-lg-3"><a ng-click="obra(x.Id)"><img src="~/Content/img/obras/{{x.FotoPrincipal}}" style="width: 300px; height:200px;" class="img-fluid" alt=""></a></div>
<div class="member-info col-lg-9">
<h4 ng-click="obra(x.Id)" style="color: #3b3b3b;">
<img ng-if="x.IdStatus == 1" style="width: 30px;" src="~/Content/img/entregue-rounded.png" class="img-fluid animated icone-mapa" alt="" />
<img ng-if="x.IdStatus == 2" style="width: 30px;" src="~/Content/img/andamento-rounded.png" class="img-fluid animated icone-mapa" alt="" />
<img ng-if="x.IdStatus == 3" style="width: 30px;" src="~/Content/img/breve-rounded.png" class="img-fluid animated icone-mapa" alt="" />
{{x.Nome}}
</h4>
<span>{{x.Endereco}}</span>
<p>{{x.Descricao}}</p>
<div class="social">
<button ng-click="obra(x.Id)" style="color: white;width: 316px;" type="button" class="btn btn-info">Ver mais</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Apply Change Event on your checkbox,
Like this,
For Angular:
<input type="checkbox" class="btn-check" id="btn-check" (change)="performFilter(filterBy)"checked autocomplete="off" />
Check below link for the function which would be useful, Find " performFilter(filterBy?: string)", She handled in elegant way.
https://github.com/DeborahK/Angular-Communication/blob/master/APM-Final%20v8/src/app/products/product-list.component.ts
For Javascript,
<input type="checkbox" class="btn-check" id="btn-check" onchange="performFilter(filterBy)"checked autocomplete="off" />
Logic will remain the same.
It worked using this Js
$('#btn-check').click(function () {
var checked = $(this).is(':checked');
$.ajax({
type: "POST",
url: '/Home/GetAllEntregue',
data: { checked: checked },
success: function (result) {
$scope.listObras = result;
$scope.$apply();
},
error: function () {
alert('Error 500');
},
});
});
I am new in Vue.js. I have a question about how to render a large amount of HTML in vue.js template.
So i put a HTML in my template thats like a 500 lines of plain HTML. And when i do
npm run dev
the compiling is to slow, or don't finish the compiling.
<template>
<div class="m-grid m-grid--hor m-grid--root m-page">
<mobile-menu-partial></mobile-menu-partial>
<header-partial></header-partial>
<div>HTML goes here</div> <------
<footer-partial></footer-partial>
</div>
</template>
So is there an easy way to make that? I searched everything but could not find any site for that question.
This is my HTML.
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--hor-desktop m-grid--desktop m-body">
<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver m-container m-container--responsive m-container--xxl m-page__container">
<div class="m-grid__item m-grid__item--fluid m-wrapper">
<div class="section-contacts">
<!-- CONTACTS -->
<div class="m-content">
<div class="m-portlet">
<div class="m-portlet__body m-portlet__body--no-padding">
<div class="row m-row--no-padding m-row--col-separator-xl">
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Grups</h3>
<span class="m-widget14__desc">3 groups</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createGroupModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Group name</span></span>
<span class="timeline-subtitle"><span class="clr-grey">3 Contacts</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="standard-widget">
<div class="m-widget14">
<div class="widget_header_menu margin-bottom-10">
<div class="m-widget14__header">
<h3 class="m-widget14__title">Contacts</h3>
<span class="m-widget14__desc">5 contacts</span>
</div>
<div class="m-widget14__header_menu">
<button type="button" class="btn btn-accent btn-md m-btn m-btn--icon m-btn--icon-only m-btn--pill" data-toggle="modal" data-target="#createContactModal"><i class="la la-plus"></i></button>
</div>
</div>
<div class="row align-items-center margin-bottom-15">
<div class="col">
<div class="form-group m-form__group">
<input class="form-control form-control-search m-input" autocomplete="off" type="text" name="" value="" placeholder="Search...">
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col">
<div class="m-scrollable">
<div class="m-list-timeline m-list-timeline--skin-light">
<div class="m-list-timeline__items no-timeline">
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user2.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Benson John</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user1.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Clark Anna</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user4.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Grohl Dave</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user3.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Porter Ella</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
<div class="m-list-timeline__item no-timeline">
<span class="m-list-timeline__badge">
<div class="m-widget4__img m-widget4__img--pic">
<a href="contact.html">
<div class="img-wrapper">
<img src="assets/base/media/img/users/user5.jpg" alt="">
</div>
</a>
</div>
</span>
<span class="m-list-timeline__text">
<span class="timeline-title"><span class="clr-black-light">Wood Kelly</span></span>
<span class="timeline-subtitle"><span class="clr-grey">+385 99 416 9113</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Please help. Thanks.
There are many ways to define a template in Vue. For big templates I suggest to use X-Templates. Define a component referring template by id.
Vue.component('my-checkbox', {
template: '#checkbox-template',
data() {
return {
checked: false,
title: 'Check me'
}
},
methods: {
check() {
this.checked = !this.checked;
}
}
});
And define a template in your html file with appropriate id. Example:
<script type="text/x-template" id="checkbox-template">
<div class="checkbox-wrapper" #click="check">
<div :class="{ checkbox: true, checked: checked }"></div>
<div class="title"></div>
</div>
</script>
More and Source.
I have this chat box and this go_to_top icon. Is that possible to hide the icon when the box is clicked and open, and display it again when its closed?
This is how it looks in my local host (view extern):
This my ChatBox code
<section class="btn-xs bd-section-5 hidden-xs bd-page-width bd-tagstyles" id="section5" data-section-title="Section">
<div class="bd-container-inner bd-margins clearfix">
<div class=" bd-layoutbox-9 bd-page-width bd-no-margins clearfix">
<div type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="chatbutton bd-container-inner btn btn-default">
<h4 class=" bd-textblock-11 bd-content-element">
<span style="font-weight: normal;">Call us on</span> 0800 0125 888
</h4>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div class="panel-body">
<ul class="chat">
<li class="left clearfix"><span class="chat-img pull-left">
<img src="./assets/images/<?php echo ($cruise_avatar[0]); ?>.png" alt="<?php echo ($cruise_avatar[0]); ?>" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font"><?php echo ($cruise_avatar[1]); ?></strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span><?php echo date("h:i:s A"); ?></small>
</div>
<p>
<?php echo ($cruise_avatar[2]); ?>
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span><?php echo date("h:i:s A"); ?></small>
<strong class="pull-right primary-font">Bhaumik Patel</strong>
</div>
<p>
<?php echo ($cruise_avatar[2]); ?>
</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
<span class="input-group-btn">
<button class="btn btn-warning btn-sm" id="btn-chat">
Send</button>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
And that's it looks like this when clicked (view extern):
I tried to hide it with jQuery like this: UPDATE it to
<script>
$(document).ready(function(){
$(".bd-layoutbox-9").click(function(){
if ($("span.bd-icon-67.bd-icon").css("display","inline-block")){
$("span.bd-icon-67.bd-icon").css("display","none");
}
else if ($("span.bd-icon-67.bd-icon").css("display","none")){
$("span.bd-icon-67.bd-icon").css("display","inline-block");
}
});
});
</script>
and my span code
<div data-smooth-scroll data-animation-time="250" class=" bd-smoothscroll-3">
<span class="bd-icon-67 bd-icon "></span>
</div>
I can hide it when Chatbox is open, but when i close it is not displayed again.
I would like to get the parent id of the element that was click, so in this case either #logo200_60_form or #logo400_120_form. I can then use that id in the rest of the code.
I tried $(this).parent() but that gives me the immediate parent and I would need to go up a couple of levels. As the id is in
the click handler is there a way of determining which parent caused the click.
JS :
$('#logo200_60_form a.fileinput-exists, #logo400_120_form a.fileinput- exists').on('click', function() {
$('form').get(0).reset();
$('#logo200_60').trigger('change');
$('#logo200_60_thumb').attr('src', 'http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image');
});
HTML :
<form action="#" role="form" id="logo200_60_form">
<p>Please upload 200x60 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
<img id="logo200_60_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div id="logo200_60_preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"></div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo200_60">
</span>
Remove
</div>
</div>
</div>
</form>
<form action="#" role="form" id="logo400_120_form">
<p>Please upload 400x120 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 400px; height: 120px;">
<img id="logo400_120_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div id="preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 120px;"></div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo400_120">
</span>
Remove
</div>
</div>
</div>
</form>
Use closest() with attribute-value selector.
$(this) // The element that is clicked
.closest('form') // First <form> ancestor
.attr('id') // Get the value of `id` attribute
I tried $(this).parent() but that gives me the immediate parent and I would need to go up a couple of levels.
You could use .parents() instead, Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector :
$(this).parents('form').attr('id');
Hope this helps.
$('#logo200_60_form a.fileinput-exists, #logo400_120_form a.fileinput-exists').on('click', function() {
alert($(this).parents('form').attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" role="form" id="logo200_60_form">
<p> Please upload 200x60 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
<img id="logo200_60_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" /> </div>
<div id="logo200_60_preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"> </div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo200_60"
> </span>
Remove
</div>
</div>
</div>
</form>
<form action="#" role="form" id="logo400_120_form" >
<p> Please upload 400x120 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 400px; height: 120px;">
<img id="logo400_120_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" /> </div>
<div id="preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 120px;"> </div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo400_120"
> </span>
Remove
</div>
</div>
</div>
</form>