I am working on aligning two span elements should be present in same line but have separated as shown in below. The code i am using is below.
If I do not use float:right the both texts are coming in single line with attaching one each other.
If I use float:right; they are not aligning in same line, having some misalignment between them.
with float:right; the result will be this
without float:right; the result will be this
Please give me suggestions for this
.clearSpan {
color: $alt-dark-blue;
float: right;
cursor: pointer;
clear: both;
font-size: 10px;
}
.saveSpan {
color: $alt-dark-blue;
clear : both;
cursor: pointer;
font-size: 10px;
}
<div>
<span class="saveSpan" >Save as Default Filters</span>
<span class="clearSpan" >Clear All Filters</span>
</div>
you can use flexbox for that
div {
display: flex;
justify-content: space-between;
border-bottom: 1px solid grey
}
span {
color: blue;
cursor: pointer;
font-size: 10px;
}
<div>
<span class="saveSpan">Save as Default Filters</span>
<span class="clearSpan">Clear All Filters</span>
</div>
Maybe you can do:
.clearSpan {
margin-left: 15px;
}
or
.saveSpan {
margin-right: 15px;
}
That should separate it.
You need to define a style for your span tags as,
span {
display: inline-block;
}
Related
I've an idea. For this I need a list like this draw:
So the main idea is to have a plus and a minus button. When a users presses the plus button, another input get's added. When pressing the minus button beside each input, the related input should be removed.
So I've startet with this here but I'm not very with it and the functionality is not given yet. How can I deal with this a smart way? Is there a problem with the id's? I mean I could copy a row or insert it (with JS) but how can I get the values later of all inputs in one map (with JS) for example? A lot of questions..
.out-task {
display: flex;
margin-bottom: 8px;
}
.delete-task-button {
margin-left: 6px;
background: red;
}
.button {
width: 30px;
height: 30px;
display: block;
border-radius: 50%;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.add-task-button {
background: green;
}
<div class="wrapper">
<label>Tasks</label>
<div id="tasks-wrapper">
<div class="out-task">
<input type="text" id="task" name="task" value="">
<span class="delete-task-button button">-</span>
</div>
</div>
<span class="add-task-button button">+</span>
</div>
Thanks for helping me out!!!
As I have criticized everyone, I let you do the same on my code:
const ListTasks = document.querySelector('#wrapper > div')
, PosInsertTask = document.querySelector('#wrapper > div > span.add-task-button')
, taskWrapper = document.querySelector('#template > div')
;
ListTasks.onclick=e=>
{
if (e.target.classList.contains('add-task-button'))
{
let newTask = taskWrapper.cloneNode(true)
ListTasks.insertBefore(newTask, PosInsertTask)
}
else if (e.target.classList.contains('delete-task-button'))
{
ListTasks.removeChild(e.target.closest('.out-task'))
}
}
.out-task {
display : flex;
margin-bottom: 8px;
}
.delete-task-button {
margin-left: 6px;
background : red;
}
.button {
width : 30px;
height : 30px;
display : block;
border-radius : 50%;
color : white;
display : flex;
justify-content: center;
align-items : center;
cursor : pointer;
font-weight : bold;
}
#wrapper { display: inline-block; border: 1px solid grey; padding:.8em;}
#wrapper h4 { text-align: center; }
.add-task-button {
background: green;
margin: auto;
}
#template { display: none;}
<div id="wrapper">
<h4>Tasks</h4>
<div>
<div class="out-task">
<input type="text" value="">
<span class="delete-task-button button">-</span>
</div>
<span class="add-task-button button">+</span>
</div>
</div>
<div id="template">
<div class="out-task">
<input type="text" value="">
<span class="delete-task-button button">-</span>
</div>
</div>
I'm working on an event onclick. I would like to have numerous onclick event in each cells and I want that the div to be equal size (no matter the number) that means the text showing AND that it doesn't the full screen but stay within the width of the border, and most of all I want to know how can I make just one click event open at a time. Fore example if a user click on the first one I don't want the second to open.
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
#opener{ background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;}
#benefits{ background-color: #07183d;
border: none;
color: white;
padding: 15px 32px; text-decoration: none;
display: inline-block;
font-size: 16px;}}
a{text-decoration:none;}
a:visited{text-decoration:none;color: white;}
#upbutton {border:1px dotted white;
}
<div id="opener">SOCIETES: 400</div>
<div id="benefits" style="display:none;">Part CAC 40 : 15 700<br/>Part Filiales +100M€: 9 700<br/>% contacts IT: 21%
<div id="upbutton"><a onclick=" hide();">fermer</a></div>
</div>
<div id="opener">CONTACTS: 400</div>
<div id="benefits" style="display:none;">Part CAC 40 : 15 700<br/>Part Filiales +100M€: 9 700<br/>% contacts IT: 21%
<div id="upbutton"><a onclick=" hide();">fermer</a></div>
</div>
Do you want it displayed like this? Or do you want to hide the other one once one of them is displayed?
How the following code works:
We changed the id to classes to apply the same CSS style as demonstrated below.
Each of the div tags can have a seperate id say b1,b2 and so on. For this, we can call the hide and show functions by passing the parameter '1' for b1, '2' for b2 and so on.
When we obtain the id in the javascript function, we just append the passed parameter with 'b'. Example : For b1 when onclick is invoked, the javascript gets the id by ('b'+1) which is b1 and applies the css for it individually. The same criteria is applied for both show() and hide() and it works as you can see from the code snippet below.
Hope, it helps.
function show(id) {
if(document.getElementById('b'+id).style.display=='none') {
document.getElementById('b'+id).style.display='block';
}
return false;
}
function hide(id) {
if(document.getElementById('b'+id).style.display=='block') {
document.getElementById('b'+id).style.display='none';
}
return false;
}
.opener {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.benefits {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
width:300px;
}
}
a {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: white;
}
#upbutton {
border: 1px dotted white;
}
<div class="opener">SOCIETES: 400</div>
<div class="benefits" id="b1" style="display:none;">Part CAC 40 : 15 700<br/>Part Filiales +100M€: 9 700<br/>% contacts IT: 21%
<div id="upbutton"><a onclick=" hide('1');">fermer</a></div>
</div>
<div class="opener">CONTACTS: 400</div>
<div class="benefits" id="b2" style="display:none;">Part CAC 80 : 30 923<br/>Part Filiales +300M€: 3 600<br/>% contacts cs: 51%
<div id="upbutton"><a onclick=" hide('2');">fermer</a></div>
</div>
I've got trouble spacing words in a div with spans. Here is the html :
<div class="footer-links">
<span>Suggestions</span>
<span>Help</span>
<span>Contact us</span>
</div>
and the css :
.footer-links{
float: right;
margin-top: 11px;
margin-bottom: 11px;
}
JS fiddle her ==> https://jsfiddle.net/kxdnwL4k/3/
How to space words so its gets easier for users to read ?
Many thanks
I'm assuming you mean the words are too close to read.
.footer-links{
float: right;
margin-top: 11px;
margin-bottom: 11px;
word-spacing: 5px;
letter-spacing: 2px;
}
<div class="footer-links">
<span>Suggestions</span>
<span>Help</span>
<span>Contact us</span>
</div>
I used letter-spacing to space out the letters a bit, and word-spacing to put some space between words a bit more.
Just add a horizontal margin to the spans. You can exclude the first one using :not(:first-child) or span + span
.footer-links {
margin: 11px 0;
float: right;
}
.footer-links span:not(:first-child) {
margin-left: 1em;
}
<div class="footer-links">
<span>Suggestions</span>
<span>Help</span>
<span>Contact us</span>
</div>
Why not just to use margin css property to make them look more clearer?
.footer-links a {
margin: 0 5px 0 5px;
}
.footer-links {
float: right;
margin-top: 11px;
margin-bottom: 11px;
}
.footer-links a {
margin: 0 5px 0 5px;
}
<div class="footer-links">
Suggestions
Help
Contact us
</div>
I would suggest a ul for the list of links - its always best to use the right tool for the job.
Note that I have put this ul into a <footer> element - use a div if you are not using the HTML5 doctype. then its just a case of applying a margin to the ul lis and you have a horizontal list with spaced out li's.
You could also get fancy and apply an "active" class to the li that reflects the current page. Then you would have a list of footer links that are spaced and in context with your page.
.footer-links {
list-style:none
}
.footer-links li {
display:inline;
margin-right:30px
}
<footer>
<ul class="footer-links">
<li>Suggestions</li>
<li>Help</li>
<li>Contact us</li>
</ul>
</footer>
I can't seem to find the answer to this; when I google it, all I get are "replace button text".
I want to hover over some text, and have that text replaced with a button. I've tried the fadeIn/fadeOut technique and the Show/Hide technique. However, the button becomes visible, it is in a different space.
Here's my Jquery:
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(e){
e.preventDefault();
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});
My HTML:
<div class="DSL6">
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button>
</div>
My CSS:
.DSLLocation {
margin-top: 110px;
}
.DSL6 {
background-color: #dbdbdb;
width: 300px;
height: 250px;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
float: left;
display: inline;
}
So if anyone can help me. I don't care if it's with Jquery, or just simple HTML/CSS
Are you simply trying to make some text appear as a button on hover? if so this should work nicely for you:
div {
padding: 10px;
display: inline-block;
transition: all 200ms ease
}
div:hover {
background: red
}
<div>Psuedo button</div>
Or if you want to hide the text and show the button on hover:
.container {
padding: 10px;
display: inline-block;
background: red;
}
button {
display: none;
}
.container:hover button {
display: block;
}
.container:hover .text {
display: none;
}
<div class="container">
<div class="text">Text</div>
<button>Psuedo Button</button>
</div>
You should understand that since you are replacing one element with another they might move due to the different content. Or you can style both elements the same way so that the change is not abrupt.
You could use just CSS for this
.DSL6 {
background-color: #dbdbdb;
width: 300px;
height: 250px;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
float: left;
display: inline-block;
}
.DSL6 h3, .DSL6 button{margin:110px 0 0;padding:0;}
.DSL6 h3{display:block;}
.DSL6 button{display:none;}
.DSL6:hover h3{display:none;}
.DSL6:hover button{display:block;}
<div class="DSL6">
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button>
</div>
I'm styling a menu that has a toggleClass in there, so far no problem, but when i have the hover function and i do hover then mouse on the menu elements the function executes on all the menu's elements, how do i manage to only affect one at the time?
The menu:
<div id="menu_segundo">
<ul>
<li class="curso av">AV</li>
<li class="curso dc">DC</li>
<li class="curso dp">DP</li>
<li class="curso pa">PA</li>
</ul>
</div>
The Css
#menu_segundo {
margin-top: 20px;
float: right;
background: #58ACFA;
}
.curso {
color: white;
font-family: DIN;
width: 25px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}
.expand_menu{
color: white;
font-family: DIN;
width: 150px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}
The JS
var segundo = $('#menu_segundo').find('ul').children();
segundo.hover(function(){
$(this).toggleClass('expand_menu');
})
Here is a DEMO of the menu
This does not need JS to function.
Simply change .expand_menu to .curso:hover in your CSS.
Alternatively, to fix your JS use:
$("#menu_segundo").on("hover", ".curso", function(){
$(this).toggleClass('expand_menu');
});
The problem with your JS is that you are toggling the class on all li elements. segundo is set to equal all li elements, not the one being hovered.
UPDATE
There is a problem beyond the initial applying of classes, the CSS/HTML structure is not rendering correctly. The problem is that extending one of the li elements increases the size of the entire ul moving all li elements in the process.
Updating the HTML to this:
<div id="menu_segundo">
<div class="curso av">AV</div>
<div class="curso dc">DC</div>
<div class="curso dp">DP</div>
<div class="curso pa">PA</div>
</div>
And updating the CSS to:
#menu_segundo {
margin-top: 20px;
float: right;
}
.curso {
color: white;
font-family: DIN;
width: 25px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
background: #58ACFA;
float: right;
clear:both;
}
.curso:hover{
width: 150px;
}
Gets the desired behavior. See this Fiddle for an example.
Note
The CSS can also be set to
.expand_menu{
width: 150px;
}
To continue with the JS solution.
Try like
var segundo = $('#menu_segundo li')
segundo.hover(function(){
$(this).toggleClass('expand_menu');
})