Is it possible to use the usual Input box + Select box and style them to make something like selectize's textbox and box?
just like the email's box? I tried to understand their jQuery code but totally didn't understand any thing, So i was wondering if there is an easy and quick way to program this specific part by myself, i searched at Google to see any tutorial about that but couldn't find any.
the idea itself is simple. it's an input element of type text, when the focused it has shows a list of elements (li/div/span whatever you want) and position it exactly under the input and style it so it looks like it's connected to the input (the input bottom border is short)
I did a very small example for you, try to ignore the bad styling.. just understand the idea.
.formContainer{
background-color:lightblue;
height:600px;
width: 600px;
}
#nameSelector{
width:400px;
border: 4px solid green;
}
#nameSelector:focus{
border-bottom:1px solid green;
}
#nameList{
list-style:none;
display:none;
margin:0;
margin-left:4px;
padding:0;
width:400px;
}
#nameList li{
background-color:lightgrey;
}
#nameList li:nth-child(even){
background-color:white;
}
#nameSelector:focus+#nameList{
display:block;
}
<div class="formContainer">
<input id="nameSelector" type="text"/>
<ul id="nameList">
<li>John</li>
<li>Jane</li>
<li>Celine</li>
</ul>
</div>
Maybe you can use this to make your textbox filter a select box and, using css, make the correct adjustment.
You could even create your jquery plugin to apply like
$('myInputText').createOptionList({...});
Related
I would like to know:
is this header of professional quality?
if not, what could I add or change?
I've tried not absolutely positioning the elements in the header and floating the button to the right, but it always results in the button being too low. Should I just keep the elements absolutely positioned, or is there another method I don't know about?
I am also having trouble setting proper ids and classes for my elements, do you know of a way to make this code more DRY?
I am aware that this is far from professional quality and that I'm an idiot, but I'm having trouble writing clean code and I don't know which way is best to make a header like this. I've tried googling help, and looking at code from other websites, but I'm always perplexed by their examples.
I would greatly appreciate it if you could give me some pointers, thanks!
HTML:
<header id="master-head">
<div id="master-head-content">
<span id="master-head-title">Brodie Been</span>
<span id="master-head-primary">
My Work
About Me
</span>
<span id="master-head-secondary" class="menu-right">
<button id="master-head-contact">CONTACT ME</button>
</span>
</div>
</header>
SCSS:
$shadowColor:rgba(0,0,0,0.16);
$softBlack:#404040;
$primaryColor:#348DC8;
#mixin vertCenter{
position:absolute;
top:50%;
transform:translate(0, -50%);
}
body{
background:#404040;
font-family:Open Sans;
button{
display:inline-block;
position:relative;
border:none;
color:white;
text-decoration:none;
font-size:14px;
background:$primaryColor;
&:hover{
cursor:pointer;
color:white;
background:$softBlack;
}
}
}
#master-head{
position:relative;
height:100px;
font-size:14px;
background:white;
#master-head-content{
width:100%;
height:100%;
#master-head-title{
#include vertCenter;
padding-left:50px;
font-size:24px;
}
#master-head-primary{
#include vertCenter;
padding-left:300px;
a{
text-decoration:none;
color:inherit;
margin-right:30px;
&:hover{
margin-bottom:-1px;
border-bottom:1px solid black;
}
}
}
#master-head-secondary{
#include vertCenter;
right:50px;
#master-head-contact{
width:130px;
height:50px;
}
}
}
}
Stack overflow probably isn't the place for this for future reference but don't sweat it! Here's my take:
Never use ids with css. (Here is an explanation why)
You should avoid nesting element selectors in css. Instead I recommend following BEM.
When naming my variables I like to format them based on type. So call your colors $color-black instead of just $black etc.
I would not use named css colors. Either use variables or write them out. Even with "safe" colors like black and white it just looks sloppy.
This goes back to #2 but avoid using element types as selectors. Give your button etc classes and use them instead. Unless of course that button style is going to be universal within your site.
Hopefully this feedback helps you! Good luck with your header.
I have a situation where I need to have a separator between 2 items as shown in the plunk. I could think of 2 methods for this to do as
1) Put an empty span between items and style it like separator
HTML:
<body>
<nav>
<section class="icon1">Icon1</section>
<span class="separator"></span>
<section class="icon2">Icon2</section>
</nav>
</body>
CSS:
nav {height:40px; background:yellow; width:300px; padding:0 10px;}
.icon1{ background:green; width:40px; height:100%; float:left;}
.icon2 {background:red; width:40px; height:100%; float:left;}
.separator{width:2px; height:100%; background:blue; float:left;}
2) Use :before psuedo selector for 2nd item and style it accordingly
HTML:
<body>
<nav>
<section class="icon1">Icon1</section>
<section class="icon2">Icon2</section>
</nav>
</body>
CSS:
nav {height:40px; background:yellow; width:300px; padding:0 10px;}
.icon1{ background:green; width:40px; height:100%; float:left;}
.icon2 {background:red; width:40px; height:100%; float:left;}
.icon2:before{content:""; border-left:2px solid blue; position:absolute; height:40px;}
Plunk - http://plnkr.co/edit/a26btGkR8p5xcQeSxJiV?p=preview
The plunk is for both options 1 and 2 combined, please un comment, if you would like to check.
Now, I have an action which is taken when user clicks on the 2nd item, which is a modal popover will open up and that 2nd item is highlighted i.e. it is over & above the backdrop.
If I use 2) above i.e. :before, and then I click on 2nd item, the modal popover shows, the 2nd item highlights but that separator also gets highlighted since technically it is inside that element. I do not want that separator to be highlighted, so, to make it appear like its faded, I am writing few lines of js to toggle its opacity ( on click of 2nd item) so it looks like its faded.
If I use 1) i.e. empty span there is no problem at all, no need to write js, it simply works fine.
So, my problem here is whether I
should use an empty span
OR
use :before and do some js
Which one would be semantically correct and also which one would be less burden on page.
I would use the 2nd solution, since the separator is probably not necessary for a (probably handicapped) user to understand the context.
Both ways are semantically correct .
i would recommend using the
<span class="separator"></span> method so that you can move your second icon with out worrying about the separator positioning .
for sure the ::before is more performance consuming ( definitely not noticeable )
remember that you also can use borders to make easy simple separators .
I'm currently learning about HTML,PHP,JavaScript and other fun web stuff. At this point, I managed to create a nice web form all with HTML,CSS and PHP.
Some days ago I wanted to add some dynamic options with JavaScript but now I'm hitting a wall. Instead of having my form written into a html file, I decided to put it into a .js file and have it built by javascript. Here's how I'm doing it :
<!-- Insert the form into <div id=field> -->
...
document.getElementById(field).innerHTML +=
'<label>Name'
+'<span class="small">ex: stg_testdb1</span>'
+'</label>'
+'<input type="text" name="name" id="name" />';
document.getElementById(field).innerHTML +=
'<label>Layer</layer>'
+'<span class="small">ex: stg_testdb1</span>'
+'<select name="layer" id="layer"/>'
+'<option value="Development">D</option>'
+'<option value="QA">A</option>'
+'<option value="Staging">S</option>'
+'<option value="Production">P</option>';
+'</select>';
....
And here is my CSS code for the "select", "input" and "label" tags
#stylized select{
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:145px;
float:left;
}
When I write my form in pure HTML, everything works perfectly. Here is a picture of a part of the form :
But when I write it in javascript using innetHTML += everything seems to work fine except for drop box (the select field) :
I'm a bit confused since the css stay exactly the same. Also, if I try to add another text field under the first one, everything will be fine and well formated.
Since I'm new into web development, I guess I'm missing something big? Also, I'm pretty sure that inserting code as I am doing is not the right thing to do, but for now it's almost working well ;)
I don't know if it's the solution, but in your JS, there is:
<label>Layer</layer>
I think you meant
<label>Layer</label>
There is not enough information in your question to re-create the problem (missing a lot of CSS and possibly HTML). However, since you know your CSS is not changing, there must be some HTML out of place.
The way your JavaScript creates the HTML elements must differ from the static HTML. Open up both pages in separate windows and use Firebug (for Firefox) or Developer Tools (in Chrome) to inspect the generated HTML for each page (HTML/Elements tab). Find the difference and correct it in your JavaScript.
Most likely you just mis-typed or mis-placed an element or two.
Hope this helps.
I'm looking to display html in a text area. Is it possible to display a <div> containing form elements inside a <textarea> using javascript or jquery?
You cannot put div in textarea but sometimes you need to do so. Good news is that you can do it in other way by using contenteditable property of elements. Like
<div contenteditable="true" style="min-height:50px; width:300px;" id="txtDiv">
</div>
This Div will behave exactly like a Textarea but you can append anything you want. And remember when you want to grab data from inside it in jquery
var ContentofDiv = $('#txtDiv').html();
Now you can append childs just like others.
You cannot place HTML elements inside a text area, only text content.
You can achieve this by using div with contenteditable attribute, instead of a textarea, like this:
<div contenteditable="true">
<div>inner div</div>
</div>
But if you try to change the innerhtml of this div dynamically then remember, you'll have to manage caret location by yourself.
No, it is not possible(it will not render the UI). If you want to show form fields why are you using textarea? You can just use normal html.
As such, it's not possible to use html tags in a <textarea>. You have to find a workaround.
I found your question when I was looking for a solution for something entirely else but however... With a wrapper you can easily place your input over your textarea. I'm not sure how much sense that makes but I believe it answers your question anyway.
.wrapper {
position:relative;
width:200px;
height:50px;
}
.wrapper textarea {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
display:inline-block;
resize: none;
z-index:1;
}
.wrapper input[name="test2"] {
position:absolute;
top:0;
left:50px;
z-index:2;
}
<div class="wrapper">
<textarea name="test1">This is</textarea>
<input type="text" name="test2" placeholder="(Sparta?)">
</div>
I'm doing a personal page in which I have to include some kind of tooltip in css like this
<a class="info" href="#">link<span>Your tooltip text here</span></a>
The css part:
a.info{
position:relative;
z-index:24;
color:#000;
text-decoration:none
}
a.info:hover{
z-index:25;
background-color: #FFF;
}
a.info span{
display: none
}
a.info:hover span{
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
border:1px solid #000;
background-color:#FFF;
color:#000;
text-align: justify;
font-weight:none;
padding:5px;
}
(I found the code on the net by the way)
I just wondered if in was possible to have the "your tooltip text here" in a text file, either by using html, or javascript and get it to display the text which is inside the text file.
I must not use php for this.
Thanks.
JavaScript can't read or write files ... But you can load the data from a text file with Ajax
You don't really need jQuery for this. You can create a js file with your content that looks like this
var tips = new Array(
"My first tip",
"My second tip"
);
Then just use whatever version of this function you want to load the file. BTW why not use the title attribute to simulate the tooltips:
<a class="info" href="#" title="Your tooltip text here">link</a>
Even if you want a fancy tooltip it seems better remove and then readd a title, rather than creating a whole separate element.
You can do this with ajax. Use jQuery because there are many examples available there.