css floating elements error - javascript

I have a small problem about div and input floating:
This is my problem, with a jQuery script when you wrote in the input box and press enter, a div element will be added, but if we wrote more then 4 element, the input box remain in the first line and the element go down. Can anyone could help me?
div.box {
width: 300px;
height: 200px;
border: 1px solid #ddd;
padding: 5px;
}
div.box>div.element {
background-color: #00B5B5;
display: inline-block;
color: #fff;
font-size: 11px;
text-transform: uppercase;
padding: 2px 8px 2px 8px;
border-radius: 5px;
line-height: normal;
cursor: pointer;
margin-right: 4px;
margin-bottom: 4px;
float: left;
}
div.box>input#group-input {
height: 11px;
/*border: none;*/
font-size: 12px;
outline: none;
vertical-align: top;
width: 8px;
}
<div class="box" id="box-ins-group">
<div class="element" id="1">prova</div>
<input type="text" id="group-input">
</div>
I have tried everything but still not working :( sorry for my bad english
-- Jquery code:
var counter = 0;
$('#group-input').keypress(function(e) {
if(e.which == 13) {
if($('#group-input').val().length > 3) {
$( "div#box-ins-group" ).append('<div class="element" id="'+counter+'">'+$("#group-input").val()+'</div>');
$('#group-input').val('');
counter++;
}
}
});
counter is a variable

You need to set float: left on the input, and then change this in your js:
$( "div#box-ins-group" ).append
to:
$( "input#group-input" ).before
The problem is that you're appending those elements to the element that contains both the .element divs and the input, so even if you'd fixed the float issue on the input, the new .element divs would always appear after the input in the DOM. Here's a fiddle.
It's also worth noting that you can remove display: inline-block, as it's ignored when you use floats.

Seems that the pills are floating but the input is not. Try this (if you haven't already):
div.container div.edit-local div.form table tr td>div.box>input#group-input {
height: 11px;
/*border: none;*/
font-size: 12px;
outline: none;
vertical-align: top;
width:8px;
float: left;
}

Related

Making css numbers to look pretty

I have the code which is in this fiddle
.numberCircle {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
display: table;
padding: 10px;
margin-top: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<div class="numberCircle">368585760</div>
Thanks to the one who had this fiddle, I updated it with my changes:, now without adding additional html elements, is it possible to design every single number inside the box to look like this
http://prntscr.com/gi26iz
I was trying to use the css3 first child, 2nd child etc etc but I am not sure what to do.
If you can't change the markup, you can try this with jquery - replacing the contents of the div with each digit wrapped into a span.
See a demo to get you started:
var html = $('.numberCircle')
.text()
.split('').map(function(e){
return "<span>" + e + "</span>";
}).join('');
$('.numberCircle').html(html);
.numberCircle span {
border-radius: 10%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 36px;
height: 36px;
/*display: table;*/
display: inline-block; /* CHANGED */
padding: 10px;
margin: 15px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 28px Arial, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="numberCircle">368585760</div>
I think the only way to do is use javascript to add styling to each elements. There is no css like :nth-letter

jQuery dragenter or dragover to include children

I am working on an upload script at the moment, and of course it has drag and drop capabilities.
However I am trying to get this to work when I drag a file over my element it adds the class drag-over however because my element has children it is constantly firing because it enters and leaves the element.
What I want to know is how can I expand the *dragenter* / *dragover* to include the main elements children also?
Here is a trimmed down version of my code (please note I have disabled the file input):
$(document).ready(function(){
$(window).on('dragenter', function(){
$(this).preventDefault();
});
$('#drag-and-drop-zone').on('dragenter', function(){
$(this).addClass('drag-over');
});
$('#drag-and-drop-zone').on('dragleave', function(){
$(this).removeClass('drag-over');
});
});
.uploader
{
width: 100%;
background-color: #f9f9f9;
color: #92AAB0;
text-align: center;
vertical-align: middle;
padding: 30px 0px;
margin-bottom: 10px;
border-radius: 5px;
font-size: 200%;
box-shadow: inset 0px 0px 20px #c9afb2;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.uploader div.or {
font-size: 50%;
font-weight: bold;
color: #C0C0C0;
padding: 10px;
}
.uploader div.browser label {
background-color: #ffffff;
border: 2px solid #f44;
padding: 5px 15px;
color: #f44;
padding: 6px 0px;
font-size: 40%;
font-weight: bold;
cursor: pointer;
border-radius: 2px;
position: relative;
overflow: hidden;
display: block;
width: 300px;
margin: 20px auto 0px auto;
transition: all 0.3s linear 0s;
}
.uploader div.browser span {
cursor: pointer;
}
.uploader div.browser input {
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: .0;
filter: alpha(opacity= 0);
direction: ltr;
cursor: pointer;
}
.uploader div.browser label:hover {
background-color: #f44;
color: #fff;
border: 2px solid #fff;
}
.drag-over{
border: 2px solid #00aef0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="uploader" id="drag-and-drop-zone">
<div>Drag & Drop Images Here</div>
<div class="or">-or-</div>
<div class="browser">
<label>
<span>Select Image</span>
<input type="file" title="Click to add Images" accept="image/*" name="files" disabled="true">
</label>
</div>
</div>
Solved it!!
It is a simple case of instead on on('dragenter') I needed to use bind('dragover')
$(document).ready(function(){
$(window).on('dragenter', function(){
$(this).preventDefault();
});
$('#drag-and-drop-zone').bind('dragover', function(){
$(this).addClass('drag-over');
});
$('#drag-and-drop-zone').bind('dragleave', function(){
$(this).removeClass('drag-over');
});
});
.uploader
{
width: 100%;
background-color: #f9f9f9;
color: #92AAB0;
text-align: center;
vertical-align: middle;
padding: 30px 0px;
margin-bottom: 10px;
border-radius: 5px;
font-size: 200%;
box-shadow: inset 0px 0px 20px #c9afb2;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.uploader div.or {
font-size: 50%;
font-weight: bold;
color: #C0C0C0;
padding: 10px;
}
.uploader div.browser label {
background-color: #ffffff;
border: 2px solid #f44;
padding: 5px 15px;
color: #f44;
padding: 6px 0px;
font-size: 40%;
font-weight: bold;
cursor: pointer;
border-radius: 2px;
position: relative;
overflow: hidden;
display: block;
width: 300px;
margin: 20px auto 0px auto;
transition: all 0.3s linear 0s;
}
.uploader div.browser span {
cursor: pointer;
}
.uploader div.browser input {
position: absolute;
top: 0;
right: 0;
margin: 0;
border: solid transparent;
border-width: 0 0 100px 200px;
opacity: .0;
filter: alpha(opacity= 0);
direction: ltr;
cursor: pointer;
}
.uploader div.browser label:hover {
background-color: #f44;
color: #fff;
border: 2px solid #fff;
}
.drag-over{
border: 2px solid #00aef0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="uploader" id="drag-and-drop-zone">
<div>Drag & Drop Images Here</div>
<div class="or">-or-</div>
<div class="browser">
<label>
<span>Select Image</span>
<input type="file" title="Click to add Images" accept="image/*" name="files" disabled="true">
</label>
</div>
</div>
Apparently this problem is more recurrent than I thought since I found at least 5 questions associated with the same topic.
Unlike "mouseover", the events "dragover" and "dragleave" do not consider the child elements as a whole, so each time the mouse passes over any of the children, "dragleave" will be triggered.
Thinking about the upload of files, I created a widget that allows:
Drag and drop desktop files using $ _FILES
Drag and drop to browser images/elements or url using $ _POST and cURL
Attach a device file using button using $ _FILES
Use input to write/paste url images/elements using $ _POST and cURL
The problem: As everything, both form inputs and images, are within DIVs children, "dragleave" was triggered even if it did not leave the dashed line. Using the attribute "pointer-events: none" is not an alternative since methods 3 and 4 need to trigger "onchange" events.
The solution? An overlapping DIV that covers all the drop-container when the mouse enters, and the only one with child elements with "pointer-events: none".
The structure:
div #drop-container: main div, keep all togheter
div #drop-area: "dragenter" listener and inmediate trigger #drop-pupup
div #drop-pupup: at same leval as #drop-area, "dragenter", "dragleave" and "drop" listener
Then, when the mouse enters by dragging an element to #drop-area, inmediatly shows #drop-pupup ahead and successively the events are on this div and not the initial receiver.
Here is the JS/jQuery code. I took the liberty to leave the PoC so do not lose all the time I lost.
jQuery(document).on('dragover', '#drop-area', function(event) {
event.preventDefault();
event.stopPropagation();
jQuery('#drop-popup').css('display','block');
});
jQuery(document).on('dragover dragleave drop', '#drop-popup', function(event) {
event.preventDefault();
event.stopPropagation();
console.log(event.type);
// layout and drop events
if ( event.type == 'dragover') {
jQuery('#drop-popup').css('display','block');
}
else {
jQuery('#drop-popup').css('display','none');
if ( event.type == 'drop' ) {
// do what you want to do
// for files: use event.originalEvent.dataTransfer.files
// for web dragged elements: use event.originalEvent.dataTransfer.getData('Text') and CURL to capture
}
}
});
body {
background: #ffffff;
margin: 0px;
font-family: sans-serif;
}
#drop-container {
margin: 100px 10%; /* for online testing purposes only */
width: 80%; /* for jsfiddle purposes only */
display: block;
float: left;
overflow: hidden;
box-sizing: content-box;
position: relative; /* needed to use absolute on #drop-popup */
border-radius: 5px;
text-align: center;
cursor: default;
border: 2px dashed #000000;
}
#drop-area {
display: block;
float: left;
padding: 10px;
width: 100%;
}
#drop-popup {
display: none;
box-sizing: content-box;
position: absolute;
width: 100%;
top: 0;
left: 0;
background: linear-gradient(to BOTTOM, rgba(245, 245, 245, 1) , rgba(245, 245, 245, 0));
height: 512px;
padding: 20px;
z-index: 20;
}
#drop-popup > p {
pointer-events: none;
}
<html>
<head>
<title>Drag and Drop</title>
</head>
<body>
<div id="drop-container">
<div id="drop-area">
<p>Child paragraph content inside drop area saying "drop a file or an image in the dashed area"</p>
<div>This is a child div No. 1</div>
<div>This is a child div No. 2</div>
</div>
<div id="drop-popup">
<p>This DIV will cover all childs on main DIV dropover event and current P tag is the only one with CSS "pointer-events: none;"</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
</body>
<html>
About jQuery "on", use it with the div id inside on, so you can start event triggers starting "uploading box" hidden.
Finally, I preferred to use "dragover" over "dragenter" because it has a small delay (milliseconds) that favors performance
(https://developer.mozilla.org/en-US/docs/Web/API/Document/dragover_event).
You can simply hide elements from the mouse interaction with styling:
e.g. add this to the child elements:
pointer-events: none;
Unfortunately support is not great in IE for this: http://caniuse.com/#feat=pointer-events
I found 2 other working solutions.
It works only if you do not have other controller elements (edit, delete) inside the area, because this solution blocks them too:
#drop * {pointer-events: none;}
There is a better solution.
The idea is that you increase a counter every time you enter/hover into/on a new child element and decrease the counter when you leave one of them.
$(document).ready(function(){
var dropzoneCounter = 0;
$('#drag-and-drop-zone').on('dragenter', function(){
dropzoneCounter++;
$(this).addClass('drag-over');
});
$('#drag-and-drop-zone').bind('dragleave', function(){
dropzoneCounter--;
if (dropzoneCounter === 0) {
$(this).removeClass('drag-over');
}
});
$('#drag-and-drop-zone').bind('drop', function(){
dropzoneCounter = 0;
$(this).removeClass('drag-over');
});
});

Which CSS should I apply to appear tool tip over a text box?

I want to display tooltip on click of textbox.
What i did is:
CSS:
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
float:right;
text-align:left;
font-size:12px;
position:absolute;
z-index: 1;
}
.input1 {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px #DFDFDF inset;
clear: left;
min-height: 45px;
position: relative;
}
.textfield {
background: none repeat scroll 0 0 transparent;
border: medium none;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
height: 100%;
line-height: 1em;
margin: 0;
padding: 15px;
width: 100%;
}
.label {
float: left;
line-height: 15px;
margin: 0;
padding: 15px 0;
text-align: right;
width: 26%;
}
JS:
$(function () {
$("#help_form :input").tooltip({
position: "center right",
offset: [-2, 10],
effect: "fade",
opacity: 0.7
});
});
HTML:
<div id="help">
<form id="help_form" class="help_form" action="/me/problem" method="post">
<div class="input1">
<label class="label" for="issuetitle">Title</label>
<input class="textfield" type="text" name="issuetitle" title="must be 100 characters long" />
</div>
</form>
</div>
Actually by setting width of textfield = 30%. We can able to see tooltip. But because of some restriction i don't want want to do it. Is there any other way to do it by using it tooltip comes over textbox.
Thanks in advance.
you can also use jquery for tooltip, like this,
$(function() {
$( document ).tooltip();
});
</script>
And if you want to know more about it then refer this link,
http://jqueryui.com/tooltip/
First you need to have a correct html : put a <style>after your head.
Then you need to load the tooltip plugin you want to call with .tooltip().
Then check for your console and javascript errors.
But maybe you have stripped down your code to post here.
If it's the case, try with a display: block on your .tooltip declaration and check if you can see it.

CSS not being applied to all appended list elements

Link to code: http://codepen.io/danessh/debug/uCBds
The desired effect is to have any added item to be appended to the menu with rounded corners. That part seems to work, but the CSS does not seem to work as I expected.
Issue:
The margin for any item added after the first overlaps instead of appearing like the last added item. I can see this because there is opacity set.
Question:
What is the possible cause of the first item being styled by CSS and all other items added in the same manner not displaying all the styling declarations?
Note: Items are being appended to $('#menu ul'); object. When I appended an item using $('li:last');, the first item displayed overlaps other menu items. margin: -2px; is set for the existing menu items so that no gaps appear.
The 2px spaces are actually coming from your markup (there are a bunch of articles on this). If you remove the whitespace between your <li> elements, the spaces will go away. This is a side effect of making your <li> elements inline.
The dynamically-created elements don't have this problem, so you're shifting them over 2px too far. To fix it, remove the negative margin completely and either remove the whitespace or float them to the left.
EDIT: I got your problem now, the problem is , when you are adding new li elements from code, there is no whitespace generated in the markup, as is there in the already added elements.
e.g from your markup:
<li><a id="first" href="#">Who</a></li>
<li>What</li>
<li><a id="last"href="#">When</a></li>
after adding your element on click
<li><a id="first" href="#">Who</a></li>
<li>What</li>
<li>When</li><li>Who</li><li><a id="last" href="#">What</a></li>
notice there are no whitespaces in the generatd markup
what you can try
menu.append('<li><a id="last" href="'+ itemUrl.val() + '">'+ item.val().toUpperCase() + '</a></li> ');
notice the extra two spaces after </li>
whitespace in the markup matters when you are dealing with inline elements.
try this css
#menu li {
display: inline;
float:left;
}
#menu a {
background-color: purple;
padding: 5px 30px;
color: white;
text-decoration: none;
font: 18px sans-serif;
opacity: .9;
text-transform: uppercase;
}
This is a known problem with DOM elements when using display: inline or inline-block.
What you need to be doing is float for the li elements.
Here's the updated codepen.
I've also made some modifications to your code like removing ids first & last and instead using css selectors: first-child and last-child.
JavaScript:
function addMenuItem () {
var menu = $('#menu ul');
var item = $('#itemName');
var itemUrl = $('#itemUrl');
if (item.val() && itemUrl.val()){
menu.append('<li>'+ item.val().toUpperCase() + '</li>');
item.val('');
itemUrl.val('');
}
}
CSS:
#menu ul {
list-style: none;
}
#menu li {
display: inline-block;
float: left;
}
#menu a {
background-color: purple;
padding: 5px 30px;
margin: 0px;
color: white;
text-decoration: none;
font: 18px sans-serif;
opacity: .9;
text-transform: uppercase;
}
li:first-child a {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
li:last-child a {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#menu a:hover {
background-color: orange;
}
button {
background-color: pink;
font-size: 14px;
color: white;
font-weight: bold;
border-radius: 3px;
margin-top: 5px;
padding: 15px 32px;
}
button:hover {
background-color: lightblue;
}
input {
background-color: whitesmoke;
margin-top: 5px;
padding: 10px 10px;
display: block;
font-weight: bold;
}
input, button {
border: none;
}
#workSpace {
width: 95%;
padding: 20px;
background-color: white;
}
body{
background-color: whitesmoke;
}
form {
clear: both;
margin-top: 50px;
}
HTML markup:
<div id="workSpace">
<div id="menu">
<ul>
<li>Who</li>
<li>What</li>
<li>When</li>
</ul>
</div>
<form>
<input id="itemName" type="text" placeholder="Menu Item" />
<input id="itemUrl" type="url" placeholder="Item URL" />
<button type="button" onclick="addMenuItem()">Add Menu Item</button>
</form>
</div>
try the css
#menu ul {
list-style: none;
margin: 0;
width: 100%;
display: block;
float: left;
margin-bottom: 20px;
}
#menu li {
float: left;
}

Sliding vertical menu : prevent the title from moving left on hover

I'm trying to fix an issue with a sliding vertical menu where the menu header moves right when I'm over it.
You can see it yourself here when going over portfolio.
This is the CSS I'm currently using :
#menu {
position: absolute;
top: 60px;
right: 20px;
height: 80%;
color: #ffffff;
cursor: default;
letter-spacing:8px;
}
#menu li {
list-style: none;
cursor: pointer;
letter-spacing:1px;
}
#menu-portfolio {
float: left;
border-right: 2px solid;
padding-right: 0.3em;
font-size: 95%;
}
.menu-gallery-selector {
font-size: 85%;
text-align:left;
margin:5%;
}
.menu-gallery-selector:nth-of-type(1) {
margin-top:15%;
}
#menu-contact {
float: left;
letter-spacing:1px;
padding-left: 0.4em;
font-size: 95%;
}
And this is the javascript :
$("#menu-portfolio").bind("mouseover", expand);
$("#menu-portfolio").bind("mouseout",collapse);
$(".menu-gallery-selector").hide();
function collapse() {
$(".menu-gallery-selector").hide();
}
function expand() {
$(".menu-gallery-selector").show();
}
simple fix
#menu-portfolio {
text-align:right;
}
When I test this the "Portfolio" text moves left not right. The reason the "Portfolio" text moves is because the text of the widest list item "Automotive" expands the width of the <ul> tag which contains the "Portfolio" text. You need to put text-align: right; on the Portfolio text.
You can fix it by adding text-align: right; to the
#menu-portfolio {
float: left;
border-right: 2px solid #000;
padding-right: 0.3em;
font-size: 95%;
text-align: right;
}
Should do the work

Categories