What could be done to improve this header? - javascript

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.

Related

Input box as a selection menu

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({...});

CSS: Dynamically resizing font in container that is 100vh

Problem: I have a container that is 100vh, when the screen shrinks, I would like the font to shrink with it and always fit within the container, never spilling over it.
Notes: I know this can be done pretty simply with #media css rules, but I'm wondering whether or not is it possible to accomplish without #media or dynamically
Fiddle: https://jsfiddle.net/wm0n4mys/
.container{
border:1px solid black;
text-align:center;
height:100vh;
}
h2{
font-size:60px;
}
*{
box-sizing:border-box;
padding:0;
margin:0;
}
<div class="container">
<h2 class="main">A TITLE THATS TALKING ABOUT SOMETHING BIG AND THIS IS A PRETTY BIG TITLE MAN I GET IT YO</h2>
<p class="text">Something, Something, Something, Something, Something, Something Something Something Something Something SomethingSomething SomethingSomethingSomethingSomethingSomethingSomething</p>
</div>
Use vw, or vh, as font size unit
.container{
border:1px solid black;
text-align:center;
height:100vh;
}
h2{
font-size:5vw;
}
*{
box-sizing:border-box;
padding:0;
margin:0;
}
<div class="container">
<h2 class="main">A TITLE THATS TALKING ABOUT SOMETHING BIG AND THIS IS A PRETTY BIG TITLE MAN I GET IT YO</h2>
<p class="text">Something, Something, Something, Something, Something, Something Something Something Something Something SomethingSomething SomethingSomethingSomethingSomethingSomethingSomething</p>
</div>

How to put 2 divs next to one huge div

So there are a lot of questions like this on StackOverflow but there doesn't seem to be one that will be helpful in my case.
As you can see, I have 2 divs on the screen. One on the left which is
float:left;
and the one in the middle is
margin-left-auto;
margin-right:auto;
So my question is, when I want to put another div JUST like the one on the right on the left of the middle DIV, how will I go on to doing this?
float:right;
has been tried on the right div but that just puts it in a different line because of the left div being floated.
So how do I do this? Answers are greatly appreciated.
I can provide more code such as how the DIV"s are arranged if needed.
All I did was type
display: flex;
in the container div and it worked perfectly.
To create a main body of content with a left and right sidebar, you can float:left and simply define a width for each div in the CSS.
ie:
.div1 {width:25%}
.div2 {width:50%}
.div3 {width:25%}
If you want to account for padding, just reduce the amount divided by three on each div width.
ie: http://jsfiddle.net/simsketch/9tj4va6r/
It might help you to start out using a framework like Foundation or Bootstrap.
Foundation provides lots of starter templates to help get you started here.
http://foundation.zurb.com/templates.html
When using a grid system, instead of needing to define widths in your custom css, you can simply include the foundation.css library, and reference the classes.
ie: <div class="large-6">content</div>
For the layout you're after, this would do the trick.
http://foundation.zurb.com/templates/feed.html
What they're doing there is simply:
<div class="large-3"></div>
<div class="large-6"></div>
<div class="large-3"></div>
As long as the numbers add up to twelve, they will fit perfectly.
This has been a brief introduction to grid systems. Consult the following for more information:
http://foundation.zurb.com/
http://getbootstrap.com/
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
These are the two most popular front-end frameworks but there are dozens more and they are all wonderful.
Flexbox solution
Wrap the items inside a parent container and set the display: flex
flex: 1 on the left and right items will grow and shrink it 1x.
flex: 2 on the middle items will grow and shrink it 2x.
.container {
display: flex;
}
.left,
.right {
flex: 1;
text-align: center;
background: #E77F24;
}
.middle {
flex: 2;
text-align: center;
background: lightblue;
margin: 0 10px;
}
<div class="container">
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
</div>
.div1{
width:25%;
overflow:auto;
float:left;
background-color:blue;
color:white;
text-align:center;
}
.div2{
width:50%;
overflow:auto;
float:left;
background-color:red;
color:white;
text-align:center;
}
.div3{
width:25%;
overflow:auto;
float:left;
background-color:green;
color:white;
text-align:center;
}
<body>
<div class="div1">First Div</div>
<div class="div2">Second Div</div>
<div class="div3">Third Div</div>
</body>

Is this correct markup - empty element OR use css/js to achieve same effect

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 .

Read from a txt file - html/css website

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.

Categories

Resources