I have an image uploader which previews an image you select, allows you to resize, and then shows the resized version.
The original code allowed you to resize a static image, so I've added the ability to upload an image to replace this static one. (#image-3).
However, when you upload and resize, it still shows the static image on the resized version.
I'm not entirely certain with Javascript, and would appreciate any help! Thank you.
$(document).ready(function() {
$('#image-3').rcrop({
minSize: [500, 500],
preserveAspectRatio: true,
preview: {
display: true,
size: [100, 100],
wrapper: '#custom-preview-wrapper'
}
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#image-3').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
$('#image-3').on('rcrop-changed', function() {
var srcOriginal = $(this).rcrop('getDataURL');
var srcResized = $(this).rcrop('getDataURL', 50, 50);
$('#cropped-original').append('<img src="' + srcOriginal + '">');
$('#cropped-resized').append('<img src="' + srcResized + '">');
});
}
}
$("#imgInp").change(function() {
readURL(this);
});
});
body {
margin: 0;
padding: 0px
}
main {
min-height: 500px;
display: block
}
pre {
overflow: auto;
}
.demo {
padding: 20px;
}
.image-wrapper {
max-width: 600px;
min-width: 200px;
}
img {
max-width: 100%;
}
#image-4-wrapper .rcrop-outer-wrapper {
opacity: .75;
}
#image-4-wrapper .rcrop-outer {
background: #000
}
#image-4-wrapper .rcrop-croparea-inner {
border: 1px dashed #fff;
}
#image-4-wrapper .rcrop-handler-corner {
width: 12px;
height: 12px;
background: none;
border: 0 solid #51aeff;
}
#image-4-wrapper .rcrop-handler-top-left {
border-top-width: 4px;
border-left-width: 4px;
top: -2px;
left: -2px
}
#image-4-wrapper .rcrop-handler-top-right {
border-top-width: 4px;
border-right-width: 4px;
top: -2px;
right: -2px
}
#image-4-wrapper .rcrop-handler-bottom-right {
border-bottom-width: 4px;
border-right-width: 4px;
bottom: -2px;
right: -2px
}
#image-4-wrapper .rcrop-handler-bottom-left {
border-bottom-width: 4px;
border-left-width: 4px;
bottom: -2px;
left: -2px
}
#image-4-wrapper .rcrop-handler-border {
display: none;
}
#image-4-wrapper .clayfy-touch-device.clayfy-handler {
background: none;
border: 0 solid #51aeff;
border-bottom-width: 6px;
border-right-width: 6px;
}
label {
display: inline-block;
width: 60px;
margin-top: 10px;
}
#update {
margin: 10px 0 0 60px;
padding: 10px 20px;
}
#cropped-original,
#cropped-resized {
padding: 20px;
border: 4px solid #ddd;
min-height: 60px;
margin-top: 20px;
}
#cropped-original img,
#cropped-resized img {
margin: 5px;
}
<script src="https://rawgit.com/aewebsolutions/rcrop/master/dist/rcrop.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type="file" id="imgInp" />
</form>
<div class="demo">
<div class="image-wrapper">
<img id="image-3" src="https://raw.githubusercontent.com/aewebsolutions/rcrop/master/demos/images/demo.jpg">
<div id="custom-preview-wrapper"></div>
<div id="cropped-resized">
<h3>Images resized (50x50)</h3>
</div>
<div id="cropped-original">
<h3>Images not resized (original size)</h3>
</div>
</div>
</div>
I think you need this
http://jcrop.org/demos/preview
easy implementation.
Related
Hi guys I've been working on this project that saves the position of the drag and drop and i was wondering if there is away to save is position to a text or excel file giving you the time of the move.
i.e DIV 1 was moved to A at 09:00, DIV 1 was moved from A to B at 09:15 if that makes sense.
Couldn't figure it out.
<html>
<head>
<\head>
<style>
#draggable1 {
position: fixed;
bottom: 0;
margin: 1px 0;
padding: 0 20px;
height: 20px;
width: 50px;
line-height: 20px;
border-radius: 1px;
background: #136a8a;
background: -webkit-linear-gradient(to right, #267871, #136a8a);
background: linear-gradient(to right, #267871, #136a8a);
color: #fff;
list-style: none;
}
.draggable {
width: 90px;
height: 90px;
padding: 0.5em;
float: left;
margin: 0 10px 10px 0;
}
#draggable,
#draggable2 {
margin-bottom: 20px;
}
#draggable {
cursor: n-resize;
}
#draggable3 {
cursor: move;
}
#containment-wrapper {
width: 700px;
height: 500px;
border: 1px solid #000;
padding: 5px;
}
h3 {
clear: left;
}
#box {
position: absolute;
width: 100px;
height: 100px;
background-color: #ccc;
}
<\style>
<body>
<ul class="drag-sort-enable">
<li0 id="draggable1" class="draggable ui-widget-content" input type="text" >659451</li0>
</body>`
<script>
var sPositions = localStorage.positions || "{}",
positions = JSON.parse(sPositions);
$.each(positions, function(id, pos) {
$("#" + id).css(pos)
})
$("#draggable1").draggable({
containment: "#containment-wrapper",
scroll: false,
stop: function(event, ui) {
positions[this.id] = ui.position
localStorage.positions = JSON.stringify(positions)
}
});
<\script>
The div I'm animating in jquery is supposed to slide out to expand the width. I've gotten the width animation to work but after adding the slideDown and up code nothing works, the way it should work is:
Enquiries should be clicked and it expands and after it expands the. For slides down and when its clicked again, first the fork slides up and then the ENQUIRIES- shown goes back to its original width.
I'm not sure where my codes gone wrong as I'm new to jquery and java script. THANK YOU FOR ANY HELP!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
setTimeout(function() {
$('#enquiry-form').slideDown('slow');
}, 1000);
function() {
if ($('#enquiry-form').is("visible") {
$('#enquiry-form').slideUp("slow");
else($('#enquiry-form').is("hidden") {
$('#enquiry-form ').slideDown("slow");
});
});
};
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>
I changed i few things in your js code, i used a class to define the condition when to slideup or down
See the result:
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
var current = $(this)
if ($('#enquiry-shown').hasClass("active")) {
$('#enquiry-form').slideUp('slow', function() {
current.animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
$('#enquiry-shown').removeClass("active");
} else {
current.animate({
width: "100%",
borderRadius: "0px"
}, 1000, function() {
$('#enquiry-form').slideDown('slow');
});
$('#enquiry-shown').addClass("active");
}
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 0px 20px 0 0;
display: inline-block;
transition: all 1s;
transform: rotate(-90deg);
}
#enquiry-form {
width: 100%;
height: 100px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
#enquiry-shown.active img {
transform: rotate(0deg);
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
This is the enquiry form
</div>
</div>
I don't know if u want to achieve this effect, but try this and give me feedback:
$('#enquiry-shown').click(function() {
if($('#enquiry-form').is(':visible')){
$('#enquiry-form').slideUp('slow', function(){
$('#enquiry-shown').animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
}
else if($('#enquiry-form').is(':hidden')){
$('#enquiry-shown').animate({
width: "950px",
borderRadius: "0px"
}, 1000, function(){
$('#enquiry-form').slideDown('slow');
});
}
});
You have a lot of syntax errors such as incorrectly matched brackets, missing parenthesis, missing function name, and using else when you should use else if.
When you fix all of them it looks like your click function already has some of your intended functionality.
Next I'd suggest removing the setTimeout in favor of jQuery's animate end handler, which you use by attaching a function to most animations.
Lastly you should refactor your code a little. I don't think is('visible') does what you think it does, but luckily there's a slideToggle method that does do what you want pretty easily.
Your click handler then needs to consider cases when the menu is already open and when it's not open and then act accordingly. For that you might consider using toggleClass and then checking which class it is with hasClass before deciding what animation to perform.
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
if(!$(this).hasClass('closed')){ // if the form is not closed
$(this).animate({ // animate the form to open state
width: "950px",
borderRadius: "0px",
}, 1000, ()=>{
$("#enquiry-form").slideToggle()
});
}else{ // if the form is closed animate in reverse order
$("#enquiry-form").slideToggle(
()=>{
$(this).animate({
width : "210px",
borderRadius : "50px"
}, 1000);
}
)
}
$(this).toggleClass('closed'); // toggle the class
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
<div> Hello I am a form </div>
</div>
</div>
I am unable to figure out what's the real problem with this as I have tried different versions of JQuery and Bpopup references.
My Script is
<script type="text/javascript">
$('.AddPlace').click(function (e) {
e.preventDefault();
$('#iframeAddNew').attr('src', 'Popups/AddCity.aspx');
$('.PopUpAddNew').bPopup({
content: 'iframe', //'ajax', 'iframe' or 'image'
modalClose: false,
contentContainer: '.content',
speed: 50,
position: [350, 50]
});
});
function resizeIframe(obj) {
if (obj.contentWindow.document.body.scrollHeight == "20") {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
else {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
// alert(obj.style.height);
}
}
</script>
.PopUpAddNew
{
margin-top: 10px;
display: none;
background-color: #fff;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 25px 5px #999;
color: #111;
display: none;
min-width: 850px;
padding: 25px;
}
.button.b-close, .button.bClose {
border-radius: 7px 7px 7px 7px;
box-shadow: none;
font: bold 131% sans-serif;
padding: 0 6px 2px;
position: absolute;
right: -7px;
top: -7px;
}
.button {
background-color: #2b91af;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0,0,0,0.3);
color: #fff;
cursor: pointer;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
<script src="Scripts/bpopup.js"></script>
<div class="PopUpAddNew">
<span class="button b-close"><span>X</span></span>
<iframe id="iframeAddNew" scrolling="no" style="border: none" onload="resizeIframe(this);"
width="100%"></iframe>
</div>
<a runat="server" href="" class="AddPlace">Add Place</a>
Bpopup not working
I also included jquery and BPopup but it is not working. I think my file is not getting the Bpop refrence file. I am not sure how to verify this.
Finally Figured it out my jquery was including two times that's why this error was
So I've been able to create 2 buttons. Here: http://jsfiddle.net/0y940r11/2/
I really can't figure out how I can keep the focus on the clicked button after I have click somewhere outside the buttons.
Can some one point me in the direction?
$(document).ready(function() {
$(".button-off").on("click", function() {
$(".corner-off").show();
$(".corner-on").hide();
});
$(".button-on").on("click", function() {
$(".corner-on").show();
$(".corner-off").hide();
});
});
.button-on,
.button-off {
border: 1px solid #ccc;
height: 120px;
width: 160px;
position: relative;
background: white;
border-radius: 8%;
}
.button-on:active,
.button-on:focus,
.button-off:active,
.button-off:focus {
border: 4px solid #FFCC00;
}
.active {
border: 4px solid #FFCC00;
}
button:active,
button:focus {
outline: 0;
}
.corner-off,
.corner-on {
width: 0px;
height: 0px;
border-bottom: 30px solid transparent;
border-left: 30px solid #FFCC00;
position: absolute;
top: 0;
left: 0;
}
.tick:after {
content: "\2713";
position: absolute;
top: -1px;
left: 5px;
color: white;
}
<button class="button-on">
<div class="corner-on" style="display:none"></div>
<span class="tick"></span>
ON
</button>
<button class="button-off">
<span class="corner-off" style="display:none"></span>
<span class="tick"></span>
OFF
</button>
use $(document).on("click" and focus() to achieve this
var lastClickedButton = $(".button-on")[0];
$(document).ready(function () {
$(".button-off").on("click", function () {
lastClickedButton = this;
$(".corner-off").show();
$(".corner-on").hide();
});
$(".button-on").on("click", function () {
lastClickedButton = this;
$(".corner-on").show();
$(".corner-off").hide();
});
});
$(document).on("click", function (e) {$(lastClickedButton).focus();});
.button-on, .button-off {
border: 1px solid #ccc;
height: 120px;
width: 160px;
position: relative;
background: white;
border-radius: 8%;
}
.button-on:active, .button-on:focus, .button-off:active, .button-off:focus {
border: 4px solid #FFCC00;
}
.active {
border: 4px solid #FFCC00;
}
button:active, button:focus {
outline:0;
}
.corner-off, .corner-on {
width: 0px;
height: 0px;
border-bottom: 30px solid transparent;
border-left: 30px solid #FFCC00;
position: absolute;
top: 0;
left: 0;
}
.tick:after {
content:"\2713";
position: absolute;
top: -1px;
left: 5px;
color: white;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button-on">
<div class="corner-on" style="display:none"></div> <span class="tick"></span>
ON</button>
<button class="button-off"> <span class="corner-off" style="display:none"></span>
<span class="tick"></span>
OFF</button>
Demo : http://jsfiddle.net/kishoresahas/0y940r11/4/
JSFiddle: http://jsfiddle.net/357nf0ht/4/
If you are hovering one of the .item, a menu will appear. Hovering the "X" will show you a button.
I expect, that hovering the button will create a single temporary item, which belongs to the first selected .item. But instead of that, there are multiple temporary items, if you have hovered more then one .item at the beginning. It seems, that this remembers also the events in the past.
I don't understand this behavior.
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$(this).find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
item.after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
});
This is happening because every time you trigger mouseenter on .item you attach a new event to button.
Quick Solution: You have to remove previous events before attaching a new one, you can do this with .unbind(), here is a working example
$('#item_element_new').unbind();
$('#item_element_new').hover(function () {
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$(this).find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').unbind();
$('#item_element_new').hover(function () {
item.after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>
Soulution 2: As #Regent pointed out your code have some problems, you can solve a part of them:
Moving event binding outside mouseenter event handler
Caching jQuery objects
Not using .unbind() anymore
var $itemAdd = $('#item_add');
var $menuBody = $itemAdd.find(".body")
var $item = $('.item');
$itemAdd.hover(function () {
$itemAdd.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$menuBody.stop().slideDown(200);
});
}, function () {
$menuBody.stop().slideUp(200, function () {
$itemAdd.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
$('.item-hovered').after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
$item.mouseenter(function (event) {
var $currentItem = $(this);
$currentItem.addClass('item-hovered');
$currentItem.siblings().removeClass('item-hovered');
$itemAdd.css({
"left": '5.5em',
"top": $currentItem.offset().top - 15
}).show();
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>
The easiest fix, reason is what #erik-philips said:
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_element_new').data('hovering_item', item);
});
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
menue.find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
var item = $('#item_element_new').data('hovering_item');
item.after('<div id="item_new"></div>');
}, function () {
var item = $('#item_element_new').data('hovering_item');
$('#item_new').remove();
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>