I'm using javascript to insert paragraphs inside a div. What it does is get the value of an input form when you click a button and append it into a specific div as a paragraph. The problem is that their margin is too big and I have no idea how to decrease them (make them closer). What do I do in this case?
jsfiddle
- Anyway, my code looks like this:
HTML
<div id="red">
<button id="bt_1" onclick="addParagraph()">Add</button>
<form>
<input id="box_top" type="text" placeholder="Spacing is too big -->">
</form>
</div>
<div id="blue">
<!--Paragraphs that are being added here have their top and bottom margin too big, but I don't know how to fix it.-->
<!--Type something in thet input form and keep clicking the add button to see what I mean.-->
</div>
CSS
#blue {
height:100px;
width:250px;
margin-top: 10px;
float:left;
position:relative;
background-color:blue;
overflow:auto;
}
#red {
height:100px;
width:250px;
margin-top: 10px;
float:left;
position:relative;
background-color:red
}
form {
font-size: 12px;
font-family: Verdana, Arial, Sans-Serif;
display: inline-block;
}
#bt_1 {
margin-left:5px;
height:35px;
width:70px;
margin-top: 25px;
border-radius:5px;
}
JavaScript
function addParagraph() {
var word = document.getElementById("box_top").value;
var pMaker = document.createElement("p");
var nodeMaker = document.createTextNode(word);
pMaker.appendChild(nodeMaker);
var blueDiv = document.getElementById("blue");
blueDiv.appendChild(pMaker);
}
You can modify the margin with css.
#blue p{
margin:0;
}
Just add the following class in your css.
#blue p{margin:0;}
DEMO
simply aply the css
#blue p {
margin: 5px;
}
or any other number instead of 5 you want to add
You can simply add something like this to css:
#blue p {
margin: 2px auto;
}
Regards
Add this in your css: Demo
p {
line-height: normal;
margin: 0;
}
Related
In my case I have a popup "window" with a title and a close button which is controlled with some script. What I want to do is to put gallery of divs with left-float so when the screen resizes they will stacked accordingly (eg. in very small screens they will go just 1 under another) so that's why I think that float is the best option here.
I am not sure how to do it and I would like your help as I want it to be to the center covering a specific percentage of area (so it can be more responsive). I would like you to just tell me what steps I should follow.
I was thinking on making a custom class .gallery set float to left but I don't know how to set everything else in order to work nice.
HTML
<script> document.write('<div class="js">'); </script>
<nav><ul><li id="buttonc">click</li></ul></nav>
<div class="vidar-bg">
<div id="vidar">
<span>my divs×</span>
</div>
</div>
<script> document.write('</div>'); </script>
CSS
.js .vidar-bg{
position:fixed;
left:0;right:0;
top:0;bottom:0;
z-index:100;
background-color:rgba(50,50,50,0.5);
display:none;}
#vidar{
position:absolute;
top:50%;
left:50%;
z-index:101;
width:80%px;
height:80%px;
left:10%;right:10%;
top:10%;bottom:10%;}
#vidar span{
display: block;
background:#5DC3A7;
padding: 10px;
color: #fff !important;
background: #f00;
z-index:100;}
#closevid{
float: right;
color: #fff;
font-family: serif;
font-size: 18px;}
#closevid:hover{color: #000;}
Live code here: http://codepen.io/mariomez/pen/OPBVxY
thank you all in advance for your help :)
This CSS should do it:
.gallery-item {
width: 150px;
height: 150px;
background-color: #F00;
color: #FFF;
text-align: center;
font-size: 2em;
line-height: 150px;
margin: 5px;
float: left;
}
Then you just have to add the following HTML to your page:
<div id="gallery">
<div class="gallery-item">DIV</div>
</div>
Actually, most of the CSS properties are there just to create the red square with centered white text in the image you provided. To do what you want you just need the float: left property like you said yourself.
I customized my input type="file" just like Facebook upload instead of textbox and a button(default input type="file") I make my input file a button only without the textbox where you can see the path of the file. I'am planning to add a span or a p tag next to my customized input file to show the path of the file.
How can I print the file path to my span tag when I choose a file?
html code
<!doctype>
<html>
<head>
</head>
<body>
<div class="browse-wrap">
<div class="title">Choose a file to upload</div>
<input type="file" name="upload" class="upload" title="Choose a file to upload">
</div>
<span class="upload-path"></span>
</body>
</html>
css code
div.browse-wrap {
top:0;
left:0;
margin:20px;
cursor:pointer;
overflow:hidden;
padding:20px 60px;
text-align:center;
position:relative;
background-color:#f6f7f8;
border:solid 1px #d2d2d7;}
div.title {
color:#3b5998;
font-size:14px;
font-weight:bold;
font-family:tahoma, arial, sans-serif;}
input.upload {
right:0;
margin:0;
bottom:0;
padding:0;
opacity:0;
height:300px;
outline:none;
cursor:inherit;
position:absolute;
font-size:1000px !important;}
span.upload-path {
margin:20px;
display:block;}
Thanks!
DEMO
$('input[type="file"]').change(function(){
$(this).closest('.browse-wrap').next('.upload-path').text(this.value);
});
Demo: get rid of C:\fakepath\ in Chrome
Or using the HTML5 file API
DEMO
$('input[type="file"]').change(function(){
var f = this.files[0];
var name = f.name;
$(this).closest('.browse-wrap').next('.upload-path').text(name);
});
It is currently impossible to get the full path name in an user's computer in updated browsers. Quoting this answer:
[...] That the full file path is being sent in MSIE and other ancient webbrowsers is due to a security bug. The W3 and RFC2388 specifications have never mentioned to include the full file path. Only the file name. Firefox is doing its job correctly.
Think about privacy for a moment: would you like sites collecting (part of) your file system structure as a side-effect for every file you upload?
The filename is, most often, enough to indicate to the user which files s/he has selected, henceforth it should suffice for your use case.
Accessing a file input's value property in the current stable Chrome release gives C:\fakepath\realfilename.ext while Firefox gives realfilename.ext. You can normalize it to only the file name this way:
$('input[type="file"]').change(function(){
var filename = this.value.match(/[^\\\/]+$/, '')[0];
alert(filename);
});
Demo
I think OP is referring to the filename which is normally found next to the default file button. As per stated by #fabricio-matte it is not possible to access file path from browsers due to security restrictions. Nonetheless, back to my first assumption, I think the solution is simply combining a little bit of JavaScript just to detect changes in the input and set the corresponding span with the default text used by the default browser's button, so let's put all pieces together:
OP HTML
<div class="browse-wrap">
<div class="title">Choose a file to upload</div>
<input type="file" name="upload" class="upload" title="Choose a file to upload">
</div>
<span class="upload-path"></span>
OP CSS with some improvements
div.browse-wrap {
top:0;
left:0;
margin:20px;
cursor:pointer;
overflow:hidden;
padding:20px 60px;
text-align:center;
position:relative;
background-color:#f6f7f8;
border:solid 1px #d2d2d7;}
div.title {
color:#3b5998;
font-size:14px;
font-weight:bold;
font-family:tahoma, arial, sans-serif;}
input.upload {
right:0;
margin:0;
bottom:0;
padding:0;
opacity:0;
height:300px;
outline:none;
cursor:inherit;
position:absolute;
font-size:1000px !important;}
span.upload-path {
text-align: center;
margin:20px;
display:block;
font-size: 80%;
color:#3b5998;
font-weight:bold;
font-family:tahoma, arial, sans-serif;
}
JavaScript to Detect Input Changes
// Span
var span = document.getElementsByClassName('upload-path');
// Button
var uploader = document.getElementsByName('upload');
// On change
for( item in uploader ) {
// Detect changes
uploader[item].onchange = function() {
// Echo filename in span
span[0].innerHTML = this.files[0].name;
}
}
CodePen Demo: http://codepen.io/anon/pen/isJqx
That way, you make sure the span gets updated every time the user has changed the file, no security restrictions broken, no need for paths, because anyway there were never paths shown in the first place.
.custom{
position: relative;
z-index: 1;
border: 1px solid #ccc;
cursor:pointer;
width: 30%;
height: 30px;
}
.custom::after{
content: "Upload";
position: absolute;
right: 0px;
background-color: rgba(51, 122, 183, 1);
height: 65%;
padding: 5px 10px;
color: #fff;
display: block;
font-size: 18px;
width: 50px;
text-align: center;
top: 0;
}
.custom .file-text{
display: block;
position: absolute;
padding: 2px 20px;
color: #f00;
font-weight: bold;
font-size: 20px;
}
.custom .file{
display: inline;
width: 100%;
height: 100%;
z-index: 9999;
opacity: 0;
cursor: pointer;
padding: 0;
position: relative;
}
You must call a library jquery before code
$(function () {
$('.custom input[type="file"]').on("change", function() {
$('.custom .file-text').text($(this).val());
});
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="custom">
<span class="file-text">chosse file</span>
<input type="file" class="file"></input>
</div>
</body>
</html>
My question is what would be the preferred code to accomplish the reblog and like button, only showing when I hover over a post? as should here: http://giraffes-cant-dance.tumblr.com/
I'm working on a personal website, at www.onwardandbeyond.tumblr.com and the posts are going horzontally across the page, instead of up and down.
I also wanted to create a website where when you hover over a post the following show: reblog button, like button, permalink and the information about who the source who originally created the post is.
Is there an easier way for this to be achieved that actually works because nothing I seem to come up with does.
HTML:
<div id="date">
{block:Date} {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, >{TimeAgo}{/block:Date}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</div>
<div id="info">
{block:RebloggedFrom}
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">
{ReblogRootName}>
<a/>
{/block:RebloggedFrom}
</div>
CSS:
#info {
color:#000;
position: absolute;
border-bottom: 2px #000 solid text-transform: uppercase;
letter-spacing: 2px;
font: 10px Consolas;
}
#info {
margin-top: 0px;
margin-bottom:0px;
margin-right:;
margin-left:;
}
#info {
padding-top: 620px;
padding-bottom:0px;
padding-right:0px;
padding-left:280px;
}
#info a {
color: #000;
}
#date a, {
width: 280px;
color: #000;
position:absolute;
margin-top: 120px;
margin-left: 100px;
visibility: visible:
}
#date {
display: none;
}
#date:hover #date {
display : block;
}
Place the things you want to show up within the div you want to hover. If the wrapper div is .wrapper and the hover items are in a div .controls:
.controls {
display:none;
}
.wrapper:hover .controls {
display:block;
}
Here is a fiddle showing how this would work: http://jsfiddle.net/6Fq5E/
If the two are siblings (and the controls can't be within the wrapper), then you can use the following:
.div:hover ~ .controls {
display:block;
}
Here is a fiddle for this version. http://jsfiddle.net/UxxKr/1/
You could try something like this
css
div {
display: none;
}
a:hover + div {
display: block;
}
html
<a>Hover</a>
<div>This to show on hover</div>
#date:hover+#info,#info:hover{display:block}
I have a series of square divs with text in them, and I need to draw a line across those divs, over the text. Z-Index is not an option. Neither is <strike>, because it needs to extend across the entire div, not just the text.
What I need is for it to extend across the entire div, but to be ON TOP of the text, as if on a different layer, and I am trying to determine if it is possible without Z-Index.
With the help of :after - DEMO
div {
position: relative;
}
div:after {
position: absolute;
left: 0;
top: 50%;
height: 1px;
background: #c00;
content: "";
width: 100%;
display: block;
}
Link To Fiddle
.wrapper {
position:relative;
width:110px;
}
.square {
width:20px;
height:20px;
border:2px solid #000;
display:inline-block;
text-align:center;
}
.strike {
position:absolute;
width:100%;
height:2px;
background:black;
top:11px;
left:0px;
}
what about a background image as a solution?
I mean someCSS Code like:
.DIV.squarestroke {
background: url(img_with-line.gif) repeat;
}
If you can't use text-decoration:line-through it's likely you have padding or margin on your div which is why the line doesn't go all the way across. This snippet will draw a line the width of the div and through the text preserving your padding or margins.
<div style="border:solid 2px black; padding : 100px">
<div class="strike-through" style="border-bottom : solid 1px red; margin-bottom : -12px;"></div>
<div style="text-align : center; padding-left:50px; padding-right:50px; border : solid 1px green;">Lorem Ipsum Voluptatem</div>
</div>
A good old fashion hr might do it:
<hr style="position:absolute; width:50px; top:5px; left:5px;" />
I've got an element with overflow: hidden, which I'd like to expand when clicked.
This is what I have so far.
http://jsfiddle.net/up6bW/2/
It does expand the element, but not as it's supposed to. It should not push the element below it, but overlap and hide it. I can make this work partially by using position: absolute, but this makes the next element collapse to the top.
Can this be done by only using CSS on the clicked element? Other elements should not be adjusted.
Or if they are, this should be calculated automatically using JavaScript.
Another solution could also involve wrapping the div in a container like so:
HTML:
<div class="container">
<div class="a" onclick="z(this)">
click here click here click here click here click here
</div>
</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
CSS:
body { margin: 10px; }
div { font-family: sans-serif; font-size: 16px; line-height: 20px; margin-bottom: 10px; width: 150px; word-break: break-all; }
div.a { color: tomato; cursor: pointer; height: 20px; overflow: hidden; }
.container { height: 20px; overflow: visible; }
JS:
function z (a) {
a.style.cssText = a.style.border ? "" : "\
background: #fff;\
border: 1px solid #ccc;\
height: auto;\
margin-left: -5px;\
margin-top: -5px;\
padding: 4px;\
position: absolute;\
";
};
DEMO HERE
Obviously adding HTML elements for presentational reasons is less than ideal, but I think it's better than a JavaScript alternative.
Tested in IE7+, Chrome, and Firefox
Here's an example of what you might need:
http://jsfiddle.net/up6bW/39/
All I did was make the position:absolute on your dropdown Div and then gave the first of the other divs a padding on top to compensate for the loss of space from the absolute positioning:
First you can change your second div a bit to add a class:
<div class="a" onclick="z(this)">click here click here click here click here click here</div>
<div class="second">1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
Then change the CSS to something like this:
body {
margin: 10px;
}
div {
width: 150px;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 10px;
word-break: break-all;
}
div.a {
cursor: pointer;
color: tomato;
height: 20px;
overflow: hidden;
position:absolute;
}
.second{
padding:25px 0px 0px 0px;
}
The div you want to expand will have absolute positioning then the second div will have enough padding to make up for that first div.
Placing elements on top of each other requires absolute positioning. You can put some padding-top on the first element to compensate for the positioning of the overlap.
I'm using this solution, which automatically adds padding to the next element.
http://jsfiddle.net/up6bW/47/
HTML
<div class="a" onclick="z(this)">click here click here click here</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div class="a" onclick="z(this)">click here click here click here</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div class="a" onclick="z(this)">click here click here click here</div>
CSS
div {
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
width: 150px;
word-break: break-all;
}
div.a {
color: tomato;
cursor: pointer;
height: 20px;
overflow: hidden;
}
JavaScript
function z (a) {
// nextElementSibling equivalent
var b = a.nextSibling;
while (b && b.nodeType != 1)
b = b.nextSibling;
if (b)
b.style.cssText = b.style.paddingTop ? "" : "padding-top: " + a.clientHeight + "px";
a.style.cssText = a.style.border ? "" : "\
background: #fff;\
border: 1px solid #ccc;\
height: auto;\
margin-left: -5px;\
margin-top: -5px;\
padding: 4px;\
position: absolute;\
";
};