I want to zoom the image inside the div but when I am trying to zoom the image the size of the div is also increasing.
<img src="" alt="Image Preview" id="zoom" class="image-preview__image">
<div class="btn-group mt-2" role="group" aria-label="">
<button ng-click="Size=100" class="btn btn-sm btn-group btn-outline-info" onclick="zoomout()" >100%</button>
<button ng-click="Size=200" class="btn btn-sm btn-group btn-outline-info" onclick="zoomin()" >200%</button>
<button ng-click="Size=300" class="btn btn-sm btn-group btn-outline-info">300%</button>
<button ng-click="Size=400" class="btn btn-sm btn-group btn-outline-info">400%</button>
</div>
<script type="text/javascript">
function zoomin() {
var GFG = document.getElementById("zoom");
var currHeight = GFG.clientHeight;
GFG.style.height = (currHeight + 40) + "px";
}
function zoomout() {
var GFG = document.getElementById("zoom");
var currHeight = GFG.clientHeight;
GFG.style.height = (currHeight - 40) + "px";
}
Instead of using the width/height, you can use the transform property to scale the image. If you place that image inside a container with overflow:hidden, you can resize the image to any size you like without it overflowing the container and the image will retain its original size for layout purposes.
With that said, you don't need a container with overflow hidden, but without one, the image will visually grow to whatever size you specify, though it will still maintain the intrinsic layout size.
document.querySelectorAll("button").forEach(e => {
e.addEventListener("click", function(){
let size = this.getAttribute("ng-click").split("=")[1];
let image = document.getElementById("zoom");
image.style.transform = `scale(${size}%)`;
});
});
.image-container
{
width: 200px;
height: 200px;
overflow: hidden;
}
.image-container img
{
transition-duration: 1s;
}
<div class="btn-group mt-2" role="group" aria-label="">
<button ng-click="Size=100" class="btn btn-sm btn-group btn-outline-info">100%</button>
<button ng-click="Size=200" class="btn btn-sm btn-group btn-outline-info">200%</button>
<button ng-click="Size=300" class="btn btn-sm btn-group btn-outline-info">300%</button>
<button ng-click="Size=400" class="btn btn-sm btn-group btn-outline-info">400%</button>
</div>
<div class="image-container">
<img alt="Image Preview" id="zoom" class="image-preview__image" src="https://via.placeholder.com/200x200">
</div>
Related
<div class="btn-toolbar">
<button type="button1" class="btn btn-primary btn mr-3" >Add Recyclable</button>
<button id="edit" type="button2" class="btn btn-secondary btn mr-3" disabled>Edit Recyclable</button>
<button type="button3" class="btn btn-primary custom btn mr-3">Add Type</button>
<button id="delete" type="button4" class="btn btn-danger custom" disabled>Delete</button>
<div id="windowForAssign"></div>
<script>
$('button').click(createAndShowPopup);
var kendoWindowAssign = $("#windowForAssign");
var title = "Test";
var url = ""
function createAndShowPopup(){
kendoWindowAssign.kendoWindow({
width: "650px",
modal: true,
height: '500px',
iframe: true,
resizable: false,
title: title,
content: "test.html",
visible: false,
});
var popup = $("#windowForAssign").data('kendoWindow');
popup.open();
popup.center();
}
</script>
however as mention the button is classified as all button
how can i indicate that each button it do different pop up
like title and content ?
Example of pop up with different clicks
example of how it look like
if i change to $("button2").click ...
it wouldnt work as i wan to seperate them how can i do ?
I am using Bootstrap cards on a page, where I want those cards to be sorted using up and down arrows. Every card has arrows in its header, to move it up or down in the layout. But of course, when it gets moved to the top, the up arrow should be gone, likewise for when it hits the bottom.
I've tried using if statements in this style:
// Result: Is never executed.
if(!$(card).find('.sort-down')) {}
// Result: Is always executed.
if($(card).not(':has(.sort-down)') {}
Where $(card) is the div containing the complete card that is being moved.
For example, my complete "move down" code block.
$(document).on('click', '.sort-down', function(e) {
e.preventDefault();
let card = $(this).closest('.card');
let sort_id = $(card).attr('data-sort');
let next_sort_id = Number(sort_id) + 1;
$('[data-sort]').each(function(index, value) {
if($(value).attr('data-sort') == next_sort_id) {
$(value).after($(card));
$(value).attr('data-sort', sort_id);
$(card).attr('data-sort', next_sort_id);
// Change buttons
if($(card).attr('data-sort') == sortCount - 1) {
$(card).find('.sort-down').remove();
if(!$(card).find('.sort-up')) {
// Insert up arrow
}
} else {
if(!$(card).find('.sort-up')) {
// Insert up arrow
}
if(!$(card).find('.sort-down')) {
// Insert down arrow
}
}
if($(value).attr('data-sort') == 0) {
$(value).find('.sort-up').remove();
if(!$(value).find('.sort-down')) {
// Insert down arrow
}
} else {
if(!$(value).find('.sort-down')) {
// Insert down arrow
}
if(!$(value).find('.sort-up')) {
// Insert up arrow
}
}
return false;
}
});
});
A little bit of the HTML so you can get an idea what classes/attributes my jQuery is selecting.
<div class="card mb-3" data-sort="0">
<div class="card-header">
Tekstveld
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i data-feather="arrow-down" width="16" height="16"></i></button>
</div>
<div class="card-body p-0">
<div id="editor"></div>
</div>
</div>
As I usually overcomplicate things, and get the result of it not even working, I'm hoping you could help me with either a simple or more advanced working solution of getting this done.
Using data-sort attribute as a sorting index could be more useful for "Global" sorting or filtering. Like when we click on one button to sort them all based on that property value.
But here, a less complicated alternative is to use jQuery default methods like : next(),prev(),closest(),insertAfter(),insertBefore()
$( document ).ready(function() {
setButtons();
$(document).on('click', '.sort-down', function(e) {
var cCard = $(this).closest('.card');
var tCard = cCard.next('.card');
cCard.insertAfter(tCard);
setButtons();
resetSort();
});
$(document).on('click', '.sort-up', function(e) {
var cCard = $(this).closest('.card');
var tCard = cCard.prev('.card');
cCard.insertBefore(tCard);
setButtons();
resetSort();
});
function resetSort(){
var i=0;
$('.card').each(function(){
//$(this).data('sort',i);
$(this).attr("data-sort", i);
i++;
});
}
function setButtons(){
$('button').show();
$('.card:first-child button.sort-up').hide();
$('.card:last-child button.sort-down').hide();
}
function resetSort(){
var i=0;
$('.card').each(function(){
//$(this).data('sort',i);
$(this).attr("data-sort", i);
i++;
});
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="card mb-3" data-sort="0">
<div class="card-header">
Tekstveld
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>
</div>
<div class="card-body p-0">
<div class="editor"></div>
</div>
</div>
<div class="card mb-3" data-sort="1">
<div class="card-header">
Voorbeeld
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>
</div>
<div class="card-body p-0">
<div class="editor"></div>
</div>
</div>
<div class="card mb-3" data-sort="2">
<div class="card-header">
Lorem ipsum
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-down"><i class="fas fa-caret-down"></i></button>
<button type="button" class="btn btn-sm btn-primary float-right mr-1 sort-up"><i class="fas fa-caret-up"></i></button>
</div>
<div class="card-body p-0">
<div class="editor"></div>
</div>
</div>
</div>
[UPDATE] : The setButtons() function would hide the non functional buttons when the div reach the limit.
Notice that I added another function resetSort() to reorder those data-sort values. Just in case, you need it for global sorting.
I am trying to replicate the following HTML code by using only Javascript (no jQuery).
I want the buttons to appear as a group,but it looks like they are being appended individually.
I've read up on bootstrap button groups (http://getbootstrap.com/components/#btn-groups) and the btn-group classs is being called on the html. So therefore my javascript DOM manipulation is incorrect.
Can someone help me to understand why my buttons are not appearing correctly? Please note that this is only a snippet of the entire code. the HTML elements are nested in a "row" div and "container" div.
HTML
<div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Javascript
var divTwo = document.createElement('div');
row.appendChild(divTwo);
col.appendChild(divTwo);
var btnGroupFour = document.createElement('div');
btnGroupFour.className = 'btn-group btn-group-lg';
divTwo.appendChild(btnGroupFour);
var btnLeft = document.createElement('button');
var textLeft = document.createTextNode('Left');
btnLeft.appendChild(textLeft);
btnLeft.className = 'btn btn-default';
var btnMiddle = document.createElement('button');
var textMiddle = document.createTextNode('Middle');
btnMiddle.appendChild(textMiddle);
btnMiddle.className = 'btn btn-default';
var btnRight = document.createElement('button');
var textRight = document.createTextNode('Right');
btnRight.appendChild(textRight);
btnRight.className = 'btn btn-default';
btnGroupFour.appendChild(btnLeft);
btnGroupFour.appendChild(btnMiddle);
btnGroupFour.appendChild(btnRight);
jsfiddle link:
https://jsfiddle.net/bchang89/eh7uhs43/2/
You can use cloneNode() on the parent element .btn-group and set it to a deep copy. Deep copy will create a copy of the target node as well as it's descendants. The only limitation is that it will not copy any event listeners added to either the target node or it's descendants.
// Collect all .btn-group into a NodeList (btnGrp)
var btnGrp = document.querySelectorAll('.btn-group');
// Determine the last .btn-grp by using the .length property -1
var lastGrp = btnGrp.length - 1;
// Reference the index in the btnGrp NodeList
var tgt = btnGrp[lastGrp];
// Create a clone of tgt and set the parameter to true for deep copy
var dupe = tgt.cloneNode(true);
// Append the clone to the body or any other element you wish.
document.body.appendChild(dupe);
EDIT
// Appendinding to `.container` since it looks better and makes more sense.
var box = document.querySelector('.container');
box.appendChild(dupe);
Fiddle
Snippet
var box = document.querySelector('.container');
var btnGrp = document.querySelectorAll('.btn-group');
var lastGrp = btnGrp.length - 1;
var tgt = btnGrp[lastGrp];
var dupe = tgt.cloneNode(true);
box.appendChild(dupe);
.btn-default {
color: #007aff;
background-color: #fff;
border-color: #007aff;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
color: #fff;
background-color: #007aff;
border-color: #007aff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12">
<div>
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
<hr>
<div>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
</div>
I have a function that changes the border-color of the arrows to match the hover state colour of the buttons. It is working as 3 separate functions but I want to combine them using .each( ) Please tell me where I am going wrong
Vars
var btnArrowPath = '.btn + .btn-arrow';
var btnName = ['btn-infra ','btn-dev ','btn-anal '];
var btnColor = ['#286090','#449d44','#31b0d5'];
var btnRollColor = ['#337ab7','#5cb85c','#5bc0de'];
Function
$('.btn-wrap').each(function(i, value){
$(btnName[value] + '.btn').hover(function(i, value){
$(btnName[value] + btnArrowPath).css('border-top-color',btnColor[value]);
}, function(){
$(btnName[value] + btnArrowPath).css('border-top-color',btnRollColor[value]);
});
});
HTML
<div class="hero-wrap">
<div class="hero-popup">
<div class="row">
<div class="btn-wrap btn-infra">
<button data-trigger="focus" type="button" class="btn btn-primary" data-toggle="popover" title="Infrastructure" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="bottom">Infrastructure</button>
<div class="btn-arrow pull-right"></div>
</div>
</div>
<div class="row">
<div class="btn-wrap btn-dev">
<button data-trigger="focus" type="button" class="btn btn-info" data-toggle="popover" title="Development" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="top">Development</button>
<div class="btn-arrow pull-right"></div>
</div>
</div>
<div class="row">
<div class="btn-wrap btn-anal">
<button data-trigger="focus" type="button" class="btn btn-success" data-toggle="popover" title="Analysis" data-content="And here's some amazing content. It's very engaging. Right? <a href='#'>Do it!</a>" data-placement="top">Analysis</button>
<div class="btn-arrow pull-right"></div>
</div>
</div>
</div>]
You want to have the hover function for the .btn element inside the .btn-wrap element, which will change the border top color of the next sibling of the hovered element, isn't it?
So
$('.btn-wrap .btn').each(function (i, value) {
$(this).hover(function (e) {
$(this).next('.btn-arrow').css('border-top-color', btnColor[i]);
}, function () {
$(this).next('.btn-arrow').css('border-top-color', btnRollColor[i]);
});
});
Demo: Fiddle
You can do it without the loop like
var $btns = $('.btn-wrap .btn').hover(function (e) {
$(this).next('.btn-arrow').css('border-top-color', btnColor[$btns.index(this)]);
}, function () {
$(this).next('.btn-arrow').css('border-top-color', btnRollColor[$btns.index(this)]);
});
Demo: Fiddle
I am using bootstrap to invoke a simple modal form which contains only a textarea field and couple of buttons. I am setting some custom text (variable length) in the textarea while invoking the modal form. What I want is to focus on the textarea field after the custom text so the user can start typing after that. I have mentioned my implemenation of this below. Can anyone tell how to achieve this?
Here is the Fiddle: http://jsfiddle.net/jLymtdg8/
A bit explanation here as well -
Here is my modal (all bootstrap stuff)-
<div class="modal fade" id="msg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Type a message</h4>
</div>
<div class="modal-body">
<textarea id="Message" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
<button id="PostModalButton" class="btn btn-primary btn-sm">Post</button>
</div>
</div>
</div>
And here is how it gets invoked -
<div class="pull-right">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#msg" data-screenname="Type after this">
Post A Message
</button>
</div>
This is how I am prefilling the textarea and setting focus, but this is only setting cursor on first line rather than after screen_name -
$(this).on('shown.bs.modal', '#msg', setFieldAndFocus)
var setFieldAndFocus = function () {
var screen_name = $("button[data-target='#msg']").data("screenname");
$("#Message").val(screen_name + " ");
$("#Message").focus();
};
Sam you can try the following javascript code:-
var screen_name = '',
old_message = '',
new_message = '';
$("#msg").on('shown', function() {
screen_name = $("button[data-target='#msg']").data("screenname"),
old_message = $.trim($('#Message').val()),
new_message = ( old_message.length == 0 ) ? screen_name : old_message;
$("#Message").focus().val(new_message + " ");
});
Let me explain why i have used this code. From the js fiddle link that you have provided what i understand is you are using the bootstrap 2 version, but the code that you are using
$("#msg").on('shown.bs.modal', function(){
...
}
was introduced only in bootstrap 3. so I have changed it to
$("#msg").on('shown', function(){
...
}
and the line
$("#Message").focus().val(new_message + " ");
is used so that you can set the focus after the custom text.I hope this will resolve your issue.
You can take reference of this link : http://jsfiddle.net/3kgbG/433/
It is working for me.
$('.launchConfirm').on('click', function (e) {
$('#confirm')
.modal({ backdrop: 'static', keyboard: false })
.on('')
.one('click', '[data-value]', function (e) {
if($(this).data('value')) {
//alert('confirmed');
} else {
//alert('canceled');
}
});
});
$('#confirm').on('shown', function () {
$('#txtDemo').val($('#txtDemo').val());
$('#txtDemo').focus();
// do something…
})
body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
overflow-y: scroll;
}
#media (max-width: 979px) {
.modal-open .page-container .navbar-fixed-top{
overflow-y: visible;
}
}
<div class="page-container">
<div class="container">
<br />
<button class="btn launchConfirm">Launch Confirm</button>
</div>
</div>
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Do you want to continue?
<input id="txtDemo" type="text" value="Jayesh" class="form-control"/>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
<button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
</div>
</div>