We Keep Coding

Search bar is not being placed correctly, and footer is not responding to the CSS

I tried to make the search bar the same height as the navbar tags in the navbar but its just being blocked and placed weirdly. Second, my footer is not responding to the CSS as I want the <p> to be under the icons and I want the footer thinner not huge and not wide enough from the sides.
footer {
overflow: hidden;
font-family: 'Times New Roman', Times, serif;
min-width: 100%;
/* Add this property */
display: flex;
justify-content: center;
letter-spacing: 1px;
font-size: 13px;
padding: 10px 0;
}
.icon-container {
display: flex;
}
.icon-container a {
margin: 0 10px;
}
.icon-container i {
font-size: 20px;
/* Decrease from 30px */
color: #333;
border-radius: 50%;
background: #fff;
padding: 10px;
transition: all 0.3s ease-out;
}
.icon-container i:hover {
transform: scale(1.1);
background: #333;
color: #fff;
}
<footer>
<div class="icon-container">
<i class="fab fa-instagram"></i>
<i class="fab fa-github"></i>
<i class="fa fa-envelope"></i>
</div>
<br><br>
<p>Developed with ❤ by Shahed &copy2022</p>
</footer>
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(51, 51, 51, 0.467);
z-index: 1;
/* Add this to make sure the navbar stays on top of other elements */
}
.navbar {
overflow: hidden;
background-color: rgba(43, 43, 45, 0.693);
font-family: 'Times New Roman', Times, serif;
width: 100%;
}
.navbar a {
float: left;
font-size: 18px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 18px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: rgba(189, 127, 137, 0.445);
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(189, 127, 137, 0.445);
min-width: 142px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: rgba(189, 127, 137, 0.618);
}
.show {
display: block;
margin: 0 auto;
/* add this line to center the chart horizontally */
}
If you could please enlighten me and help me fix those errors I would appreciate it. Thanks in advance.

Div contents don't appear on button press in anything other than jsfiddle

I have a script that opens a div where you can change the time of a timer, and it opens on a button press. This works fine in fiddle, the div opens up and the div contents appear, but other IDEs don't work (Coding Rooms, Programiz, pretty much any other online IDE)--the div never appears. The code is below. Any solutions or explanations?
Is it maybe because JSFiddle uses a different version of JS? I honestly have no idea.
Here is the JSFiddle so you can see the full code.
var setTimeMenu = document.getElementById("setTimeMenu");
var openTimeSetMenu = document.getElementById("setTimeMenuOpenButton");
var closeTimeSetMenuSpan = document.getElementsByClassName("close")[0];
openTimeSetMenu.onclick = function() {
setTimeMenu.style.display = "block";
}
closeTimeSetMenuSpan.onclick = function() {
setTimeMenu.style.display = "none";
}
window.onclick = function(event) {
if (event.target == setTimeMenu) {
setTimeMenu.style.display = "none";
}
}
.timeTypeText {
font-size: 16pt;
font-weight: bold;
font-family: "Helvetica", sans-serif;
display: inline;
}
.timeAmountText {
display: inline;
font-family: "Helvetica", sans-serif;
font-size: 14pt;
}
.centerVertical {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.Modal {
display: none;
position: fixed;
z-index: +1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modalContents {
font-family: "Helvetica", sans-serif;
font-size: 14pt;
background-color: #fefefe;
margin: 15% auto;
padding: 15px;
border: 1px solid #888;
width: 70%;
}
.close {
color: #ffffff;
float: right;
font-size: 48px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #cccccc;
text-decoration: none;
cursor: pointer;
}
input {
background-color: white;
border: thin solid blue;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
transform: scale(80%);
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
input::placeholder {
overflow: visible;
}
select,
input {
background-color: #ededed;
border: thin solid blue;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
transform: scale(80%);
margin: 0;
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
select.minimal {
background-image:
linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%),
linear-gradient(to right, #ccc, #ccc);
background-position:
calc(100% - 20px) calc(1em + 2px),
calc(100% - 15px) calc(1em + 2px),
calc(100% - 2.5em) 0.5em;
background-size:
5px 5px,
5px 5px,
1px 1.5em;
background-repeat: no-repeat;
}
select.minimal:focus {
background-image:
linear-gradient(45deg, green 50%, transparent 50%),
linear-gradient(135deg, transparent 50%, green 50%),
linear-gradient(to right, #ccc, #ccc);
background-position:
calc(100% - 15px) 1em,
calc(100% - 20px) 1em,
calc(100% - 2.5em) 0.5em;
background-size:
5px 5px,
5px 5px,
1px 1.5em;
background-repeat: no-repeat;
border-color: green;
outline: 0;
}
select.minimal:hover {
cursor: pointer;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
.ButtonStyle {
text-align: center;
font-family: "Helvetica", sans-serif;
font-weight: bold;
cursor: pointer;
font-size: 12px;
position: relative;
background-color: #e3e3e3;
border: thin solid blue;
border-radius: 4px;
padding: 10px;
width: max;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
}
.ButtonStyle:hover {
background: #fff;
box-shadow: 0px 2px 10px 5px #97B1BF;
color: #000;
}
.ButtonStyle:after {
content: "";
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
}
.ButtonStyle:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.disabled {
pointer-events: none;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
cursor: not-allowed;
}
.not-allowedCursor {
cursor: not-allowed;
}
input {
display: block;
margin: 0 auto;
}
<body>
<button id="setTimeMenuOpenButton" class="ButtonStyle">Set School Closing Time</button>
<div id="setTimeMenu" class="Modal">
<span class="close">×</span>
<div class="modalContents">
<p align="center" style="font-weight: bold;">Change the time and date to when your Summer vacation starts!</p><br>
<input id="timeInputBox" pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}" size="10" maxlength="8" placeholder="Time:">
<p align="center" style="font-size: 9pt; font-weight: bold;">You must use the format "hr:min:sec" to change the time! Time must also be in military time!</p>
<p align="center" style="font-size: 9pt; font-weight: bold; color: grey;">e.g.: 14:06:00</p>
<input type="submit" class="ButtonStyle" style="transform: scale(120%); font-size: 16pt; margin-left: 23px; padding-left: 45px; padding-right: 45px" required>
</div>
</div>
<div id="timerDiv" align="center">
<div class="timeTypeText">Days: </div>
<div class="timeAmountText"><span class="days"></span></div><br>
<div class="timeTypeText">Hours: </div>
<div class="timeAmountText"><span class="hours"></span></div><br>
<div class="timeTypeText">Minutes: </div>
<div class="timeAmountText"><span class="minutes"></span></div><br>
<div class="timeTypeText">Seconds: </div>
<div class="timeAmountText"><span class="seconds"></span></div>
</div>
</body>

If you download the JSEditor.io code you will notice the script tag is added in head so the script is not able to find the elements in body so the code is not working

Input boxes don't have a "hitbox" and appear in front of the text

I'm having issues creating my auto-completing/auto-suggesting input box.
This is how it's currently working: https://i.imgur.com/2RzI3il.gifv
And here's a code snippet, bare in mind, the react code isn't included. The functionality isn't important, just the CSS layout.
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
#main{
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: transparent;
}
#autocomplete{
position: absolute;
top: 0;
left: 0;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div>
from:
<input type="text" id="main"
class="LocationInput-Input-Valid"
value="Thórshavn">
</div>
<div>
<input type="text" id="autocomplete"
class="LocationInput-Input"
value="Thórshavn" disabled="">
</div>
</div>
I want it to be displayed like this: https://i.imgur.com/qFFn5Gu.png
However, it is being displayed like this: https://i.imgur.com/irU05Yh.png
When I use Chrome's inspect tool, I find that the elements have these weird "hitboxes": https://i.imgur.com/b923Dzp.gifv
though that might not be relevant? I've tried to fix this and I just suck at CSS too much :p

There are multiple ways to work this out, here is one of them:
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
.input-contianer {
position: relative;
text-align: left;
}
label {
display: inline-block;
margin-top: 5px;
}
#main{
position: absolute;
top: 0;
left: 60px;
z-index: 1;
background: transparent;
}
#autocomplete{
position: absolute;
top: 0;
left: 60px;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div class="input-contianer">
<label>
from:
</label>
<input type="text" id="main"
class="LocationInput-Input-Valid"
value="Thórshavn">
<input type="text" id="autocomplete"
class="LocationInput-Input"
value="Thórshavn" disabled="">
</div>
</div>
I kept the two inputs absolute positioned, but wrapped them in a .input-container div that has a relative position (so the absolute will be absolute to the relative container).
I added a <label> element that will wrap the from:, this way you can position that label.

You should set a wrapping div with a relative position and play with the left position of the inputs
.App {
text-align: center;
font-family: "Ubuntu", sans-serif;
}
.container{
position:relative;
}
.label{
position: absolute;
padding: 5px;
}
#main {
position: absolute;
top: 0;
left: 50px;
z-index: 1;
background: transparent;
}
#autocomplete {
position: absolute;
top: 0;
left: 50px;
background: transparent;
z-index: 0;
}
.LocationInput {
position: relative;
margin: 30px;
font-size: 1.1em;
font-family: "proxima-nova", Arial;
}
.LocationInput-Input {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid #002857;
-webkit-transition: 0.5s;
}
.LocationInput-Input:focus {
outline: none;
}
.LocationInput-Input-Valid {
padding: 5px 5px;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgb(107, 175, 19);
-webkit-transition: 0.5s;
}
.LocationInput-Input-Valid:focus {
outline: none;
}
<div class="App" class="LocationInput LocationInput-from">
<div class="container">
<div class="label">from:</div>
<input type="text" id="main" class="LocationInput-Input-Valid" value="Thórshavn">
<input type="text" id="autocomplete" class="LocationInput-Input" value="Thórshavn" disabled="">
</div>
</div>

set focus in text field when doubleclicking

I create a directive to set focus in the text field when executing the event doubleclick but it does not work. Please see my CSS, HTML, and JavaScript below.
I have also tried to use the DOM to get the text field element and set the focus with element.focus() but it does not work.
var app=angular.module('todoApp',[])
app.controller('todoListController',function($scope){
$scope.todoList=[
{id:1,name:"apprendre angular",completed:false},
{id:2,name:"apprendre spring",completed:true}
];
$scope.destroy=function(index){
$scope.todoList.splice(index,1);
}
$scope.addTodo=function(){
$scope.todoList.push({name:$scope.newtodo,completed:false});
$scope.newtodo="";
}
$scope.editTodo=function(todo){
todo.edit=false;
}
});
app.directive('todoFocus', function todoFocus($timeout) {
'use strict';
return function (scope, elem, attrs) {
scope.$watch(attrs.todoFocus, function (newVal) {
if (newVal) {
$timeout(function () {
elem[0].focus();
}, 0, false);
}
});
};
});
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 300;
}
button,
input[type="checkbox"] {
outline: none;
}
.hidden {
display: none;
}
#todoapp {
background: #fff;
margin: 130px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
#todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
#todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
#todoapp h1 {
position: absolute;
top: -155px;
width: 100%;
font-size: 100px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
#new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
outline: none;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#new-todo {
padding: 16px 16px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}
#main {
position: relative;
z-index: 2;
border-top: 1px solid #e6e6e6;
}
label[for='toggle-all'] {
display: none;
}
#toggle-all {
position: absolute;
top: -55px;
left: -12px;
width: 60px;
height: 34px;
text-align: center;
border: none; /* Mobile Safari */
}
#toggle-all:before {
content: '❯';
font-size: 22px;
color: #e6e6e6;
padding: 10px 27px 10px 27px;
}
#toggle-all:checked:before {
color: #737373;
}
#todo-list {
margin: 0;
padding: 0;
list-style: none;
}
#todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px solid #ededed;
}
#todo-list li:last-child {
border-bottom: none;
}
#todo-list li.editing {
border-bottom: none;
padding: 0;
}
#todo-list li.editing .edit {
display: block;
width: 506px;
padding: 13px 17px 12px 17px;
margin: 0 0 0 43px;
}
#todo-list li.editing .view {
display: none;
}
#todo-list li .toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
border: none; /* Mobile Safari */
-webkit-appearance: none;
appearance: none;
}
#todo-list li .toggle:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}
#todo-list li .toggle:checked:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}
#todo-list li label {
white-space: pre-line;
word-break: break-all;
padding: 15px 60px 15px 15px;
margin-left: 45px;
display: block;
line-height: 1.2;
transition: color 0.4s;
}
#todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
#todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 30px;
color: #cc9a9a;
margin-bottom: 11px;
transition: color 0.2s ease-out;
}
#todo-list li .destroy:hover {
color: #af5b5e;
}
#todo-list li .destroy:after {
content: '×';
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list li .edit {
display: none;
}
#todo-list li.editing:last-child {
margin-bottom: -1px;
}
#footer {
color: #777;
padding: 10px 15px;
height: 20px;
text-align: center;
border-top: 1px solid #e6e6e6;
}
#footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
#todo-count {
float: left;
text-align: left;
}
#todo-count strong {
font-weight: 300;
}
#filters {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
right: 0;
left: 0;
}
#filters li {
display: inline;
}
#filters li a {
color: inherit;
margin: 3px;
padding: 3px 7px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
}
#filters li a.selected,
#filters li a:hover {
border-color: rgba(175, 47, 47, 0.1);
}
#filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}
#clear-completed,
html #clear-completed:active {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
cursor: pointer;
position: relative;
}
#clear-completed:hover {
text-decoration: underline;
}
#info {
margin: 65px auto 0;
color: #bfbfbf;
font-size: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-align: center;
}
#info p {
line-height: 1;
}
#info a {
color: inherit;
text-decoration: none;
font-weight: 400;
}
#info a:hover {
text-decoration: underline;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
#media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all,
#todo-list li .toggle {
background: none;
}
#todo-list li .toggle {
height: 40px;
}
#toggle-all {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-appearance: none;
appearance: none;
}
}
#media (max-width: 430px) {
#footer {
height: 50px;
}
#filters {
bottom: 10px;
}
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="todo.js"></script>
<link href="style.css" rel="stylesheet"/>
<meta charset="utf-8"/>
</head>
<body ng-app="todoApp">
<section id="todoapp" ng-controller="todoListController">
<header id="header">
<h1>TodoList</h1>
<form action="#" id="todo-form" ng-submit="addTodo()">
<input type="text" id="new-todo" placeholder="Ajouter une tâche" ng-model="newtodo" autocomplete="off" >
</form>
</header>
<section id="main">
<ul id="todo-list">
<li ng-repeat="todo in todoList" ng-class="{completed:todo.completed,editing:todo.edit}" ng-dblclick="todo.edit=true">
<div class="view">
<input type="checkbox" class="toggle" ng-model="todo.completed" />
<label> {{todo.name}}</label>
<button class="destroy" ng-click="destroy($index)"> </button>
</div>
<form action="#" >
<input class="edit" ng-model="todo.name" ng-blur="editTodo(todo)" todo-focus="todo == true" >
</form>
</li>
</ul>
</section>
</section>
</body>
</html>

Ok, running your code, see this:
<input class="edit" ng-model="todo.name" ng-blur="editTodo(todo)" todo-focus="todo == true" >
This is your element, and you have this watcher in todo-focus directive:
scope.$watch(attrs.todoFocus, function (newVal) {
You are watching an angular expression: "todo == true", it solves one time as "false", and will never changes this value, so your watcher will not be executed as you want (only 1 time, when the directive is loaded to initialize the watcher)
So, you need to watch a scope variable, if todo is your scope variable try to watch scope.todo.xxx instead of the attribute

Clicking on page refreshes ; reappears two input elements?

I'm usig plugin for drop-down (sub-menu) in my HTML. My HTML looks like following:-
HTML
<div class="taxonomy" id="taxonomy_id" style="height: 54px">
<input type="text" class="category" name="category" id="category" value="" />
<input type="text" class="category" name="category_1" id="category_1" value="" /></div>
</body>
JS
$(document).ready(function (){
$("#category").mcDropdown("#categorymenu",{targetColumnSize: 1});
$("#category_1").mcDropdown("#categorymenu_1",{targetColumnSize: 1});
DEMO
Now, when I hit refresh once the page is loaded, I see the rest of html elements remain static on page, the dropdown items appears / refreshes instead. With each refresh they are loaded again the focus is changed it seems, can I change this behaviour.
UPDATE PLUGIN CSS
/*
styles for the psuedo-select box
*/
div.mcdropdown {
position: absolute;
border: 1px solid #8e9daa;
padding: 1px;
display: -moz-inline-block;
display: inline-block;
width: 408px;
height: 14px;
padding: 2px;
}
/* style either the input or div where the plug-in is attached to */
div.mcdropdown input,
div.mcdropdown div {
position: absolute;
background-color: #fff;
left: 0;
top: 0;
width: 98%;
border: 0;
padding: 2px 0 0 3px;
font: 11px Arial, Helvetica, sans-serif;
}
div.mcdropdown a {
position: absolute;
right: 1px;
top: 1px;
background: transparent url(../images/mcdropdown/mcdd_select_button_sprite.gif) no-repeat top left;
display: -moz-inline-block;
display: inline-block;
height: 16px;
width: 15px;
text-decoration: none;
font-size: 0pt;
z-index: 2;
outline: 0;
}
div.mcdropdown a:hover, div.mcdropdown a:focus {
background-position: 0% -16px;
}
div.mcdropdown a:active {
background-position: 0% -32px;
outline: none; /* hide dotted outline in Firefox */
}
div.mcdropdownDisabled {
background-color: #e1e0e0;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
div.mcdropdownDisabled input {
cursor: default;
}
div.mcdropdownDisabled a:hover, div.mcdropdownDisabled a:focus {
background-position: 0 0;
cursor: default;
}
/*
styles for the dropdown menu
*/
ul.mcdropdown_menu {
display: none;
margin: 0px;
padding: 0px;
list-style-type: none;
/* float so we can calculate the size of the columns */
float: left;
clear: both;
z-index: 10000;
-khtml-user-select: none;
-o-user-select: none;
-moz-user-select: none;
-moz-user-focus: ignore;
-moz-user-input: disabled;
}
ul.mcdropdown_menu ul {
display: none;
font: 11px Arial, Helvetica, sans-serif;
/* float so we can calculate the size of the columns */
/*
float: left;
*/
}
/* -- Sub-Menus -- */
ul.mcdropdown_menu ul {
position: absolute;
list-style-type: none;
margin: 0px;
margin-left: 30px;
padding: 0px;
z-index: 10000;
}
ul.mcdropdown_menu ul li {
margin: 0px;
min-width: 150px;
_width: 150px; /* ie6 min-width hack */
}
/* color schema */
ul.mcdropdown_menu {
/*
height: 19px;
*/
height: auto;
background-color: #e1e0e0;
padding: 5px 5px;
/* define font here for IE6 */
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_menu li {
padding: 2px 20px 2px 6px;
/* this is needed to ensure that all browsers have the same line-height--fixes issues in Chrome (Mac) and IE10 */
line-height: 14px;
}
/* we don't use "ul.mcdropdown_menu > li" here so that IE6 knows how to style the root level */
ul.mcdropdown_menu li.mc_root {
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 20px 2px 6px;
margin: 0 10px;
}
ul.mcdropdown_menu > li.mc_endcol {
border-bottom: 1px solid #fff;
}
/* this is for IE6 only */
ul.mcdropdown_menu li.mc_hover {
background-color: #ccc !important;
}
ul.mcdropdown_menu > li:hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_menu > li:hover.mc_endcol {
border-bottom: 1px solid #999;
}
ul.mcdropdown_menu > li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #999;
}
ul.mcdropdown_menu li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_menu li:hover.mc_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}
ul.mcdropdown_menu ul {
background: #f0f0f0;
/* add a slight border for better visualization of deep menus */
border: 1px solid #d0d0d0;
padding-bottom: 10px;
/* IE 6/7 will bleed through the background color if we don't set the visibility to hidden */
visibility: hidden;
}
ul.mcdropdown_menu ul li {
background: #f0f0f0;
padding-left: 16px !important;
border-top: 1px solid #fff;
color: #666;
white-space: nowrap;
}
ul.mcdropdown_menu ul li.mc_firstrow {
border-top: 1px solid #f0f0f0;
}
ul.mcdropdown_menu ul li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_menu ul li:hover {
background-color: #d6d6d6;
border-top: 1px solid #dedede;
color: #666;
}
ul.mcdropdown_menu ul li.mc_endcol:hover {
border-bottom: 1px solid #dedede;
}
ul.mcdropdown_menu ul li:hover + li:not(.mc_firstrow) {
border-top: 1px solid #dedede;
}
/*
* drop down shadows
*/
div.mcdropdown_shadow {
display: none;
position: absolute;
margin: 3px 0 0 3px;
/* for IE6, we use just a square transparent image */
background: #000;
filter :alpha(opacity=33);
}
/* ie6 ignores this selector */
html>body div.mcdropdown_shadow {
/* let's use a transparent PNG */
margin: 5px 0 0 5px;
padding: 5px 0 0 5px;
background: transparent url(../images/mcdropdown/shadow.png) right bottom no-repeat !important;
/* remove the filter for IE7 */
filter: none;
}
/*
* styles for the dropdown menu
*/
/* autocomplete styles */
ul.mcdropdown_autocomplete {
display: block;
position: absolute;
height: auto;
max-height: 210px;
overflow-x: hidden;
overflow-y: auto;
clear: both;
padding: 5px 10px;
background-color: #e1e0e0;
z-index: 10000;
margin: 0px;
list-style-type: none;
width: 392px;
font: 11px Arial, Helvetica, sans-serif;
}
ul.mcdropdown_autocomplete ul {
display: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
ul.mcdropdown_autocomplete ul li {
margin: 0px;
}
ul.mcdropdown_autocomplete li {
display: block;
font: 11px Arial, Helvetica, sans-serif;
cursor: pointer;
white-space: nowrap;
color: #666;
border-top: 1px solid #fff;
padding: 2px 26px 2px 6px;
}
ul.mcdropdown_autocomplete li.mc_endcol {
border-bottom: 1px solid #fff;
}
ul.mcdropdown_autocomplete li.mc_parent {
padding-right: 20px !important;
background: url(../images/mcdropdown/mcdd_icon_normal.gif) no-repeat 100% 50%;
}
ul.mcdropdown_autocomplete li.mc_hover {
border-top: 1px solid #999;
background-color: #999 !important;
color: #fff;
}
ul.mcdropdown_autocomplete li.mc_hover_parent {
background: #999 url(../images/mcdropdown/mcdd_icon_hover.gif) no-repeat 100% 50% !important;
color: #fff !important;
}

Add !important to your css that must be used.
.myOverride:focus {
display: block !important;
}
Just like that. This was an example, but you'd have to change it up a little to suit your needs.