Create a DIV onclick

Create a DIV onclick - javascript

I have a div and a button which are laid out fine. When I click the button, how can I make the same div spawn again and again. I have tried adding an onclick function but I do not know how I would implement adding the div to it.
HTML
<div class="note" contenteditable="true">
<span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
<img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/>
</span>Keep clicking this text to select
</div>
<a href='#' class='button'>Create Note</a>
Javascript
<script type="text/javascript">
$(function() {
$(".note").resizable();
$(".note").keyup(function() {
$(this).css('height', '100%');
});
$(".note").draggable()
.click(function() {
$(this).draggable({
disabled: false
});
}).dblclick(function() {
$(this).draggable({
disabled: true
});
});
});
</script>
CSS
.note {
width: 280px;
height: 100px;
padding-top: 40px;
margin-top: 60px;
margin-left: 35px;
word-break: break-word;
font-family: Note;
font-size: 30px;
background-image: url("images/stickynote.png");
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.note img{
position:relative;
position: absolute;
top: 0px;
right: 0px;
}
.button {
position: fixed;
top: 160px;
margin-left: 44%;
border: 1px solid #000000;
background: #f2ad24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff92), to(#f2ad24));
background: -webkit-linear-gradient(top, #ffff92, #f2ad24);
background: -moz-linear-gradient(top, #ffff92, #f2ad24);
background: -ms-linear-gradient(top, #ffff92, #f2ad24);
background: -o-linear-gradient(top, #ffff92, #f2ad24);
background-image: -ms-linear-gradient(top, #ffff92 0%, #f2ad24 100%);
padding: 13px 26px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #000000;
font-size: 35px;
font-family: Note;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 1px solid #0a3c59;
text-shadow: #1e4158 0 1px 0;
background: #f08d24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f08d24);
background: -moz-linear-gradient(top, #ffe194, #f08d24);
background: -ms-linear-gradient(top, #ffe194, #f08d24);
background: -o-linear-gradient(top, #ffe194, #f08d24);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f08d24 100%);
color: #212121;
}
.button:active {
text-shadow: #1e4158 0 1px 0;
border: 1px solid #0a3c59;
background: #f09424;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f09424);
background: -moz-linear-gradient(top, #ffe194, #f09424);
background: -ms-linear-gradient(top, #ffe194, #f09424);
background: -o-linear-gradient(top, #ffe194, #f09424);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f09424 100%);
color: #fff;
}

Here is a simple example of how you can use jQuery accomplish what it is you're trying to do. Obviously this is not exactly tailored to your needs, but will give the basis for you to learn how it might work. You're likely going to want to look at the jQuery Clone method and jQuery AppendTo method.
CSS
.note {
margin-bottom: 10px;
background-color: yellow;
width: 100px;
height: 100px;
}
jQuery
$(function() {
$('button').on('click', function() {
$('.note:last').clone().appendTo('.wrapper');
});
});
HTML
<div class="wrapper">
<div class="note">Content in div</div>
</div>
<button>Add note</button>
JSFiddle Example

Do you mean something like this?
$(window).ready(function(){
$('.button').click(function(e){
e.preventDefault();
var html = $('.template').html();
$('#notes').append('<div style="position:relative;">'+html+'<div>');
});
})
.note img{
position:relative;
position: absolute;
top: 0px;
right: 0px;
}
.button {
position: fixed;
top: 160px;
margin-left: 44%;
border: 1px solid #000000;
background: #f2ad24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffff92), to(#f2ad24));
background: -webkit-linear-gradient(top, #ffff92, #f2ad24);
background: -moz-linear-gradient(top, #ffff92, #f2ad24);
background: -ms-linear-gradient(top, #ffff92, #f2ad24);
background: -o-linear-gradient(top, #ffff92, #f2ad24);
background-image: -ms-linear-gradient(top, #ffff92 0%, #f2ad24 100%);
padding: 13px 26px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;
text-shadow: #7ea4bd 0 1px 0;
color: #000000;
font-size: 35px;
font-family: Note;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
border: 1px solid #0a3c59;
text-shadow: #1e4158 0 1px 0;
background: #f08d24;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f08d24);
background: -moz-linear-gradient(top, #ffe194, #f08d24);
background: -ms-linear-gradient(top, #ffe194, #f08d24);
background: -o-linear-gradient(top, #ffe194, #f08d24);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f08d24 100%);
color: #212121;
}
.button:active {
text-shadow: #1e4158 0 1px 0;
border: 1px solid #0a3c59;
background: #f09424;
background: -webkit-gradient(linear, left top, left bottom, from(#ffe194), to(#f08d24));
background: -webkit-linear-gradient(top, #ffe194, #f09424);
background: -moz-linear-gradient(top, #ffe194, #f09424);
background: -ms-linear-gradient(top, #ffe194, #f09424);
background: -o-linear-gradient(top, #ffe194, #f09424);
background-image: -ms-linear-gradient(top, #ffe194 0%, #f09424 100%);
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notes">
<div class="template" style="position:relative;">
<div class="note" contenteditable="true"> <span id='close' contenteditable='false' onclick='this.parentNode.parentNode.removeChild(this.parentNode)'>
<img src="images/close.png" height="25" width="25" align="right" style="vertical-align: top; float: right"/>
</span>Keep clicking this text to select</div>
</div>
</div>
<a href='#' class='button'>Create Note</a>

Related

Text on the top not center in the button

I have button with text on top
Here is code
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
line-height: 14px;
text-align: center;
position: relative;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc',GradientType=0 );
background-image: linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
.settings-button-new span {
display: block;
position: absolute;
top:0;
left:0;
}
<button class="settings-button-new"><span>Home</span></button>
It on the top, but not centered as you can see.
I try to use text-align: center; but seems it not works.
How can i center it in button?
Thank's for help

Just add below css code for center, if don't need to vertically center then the top:0 or as your need; and transform: translate(-50%, 0);.
.settings-button-new span {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
line-height: 14px;
position: relative;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc', GradientType=0);
background-image: linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
.settings-button-new span {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<button class="settings-button-new"><span>Home</span></button>
Only center.
.settings-button-new span {
display: block;
position: absolute;
top: 5px;
left: 50%;
transform: translate(-50%, 0);
}
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
line-height: 14px;
position: relative;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc', GradientType=0);
background-image: linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
.settings-button-new span {
display: block;
position: absolute;
top: 5px;
left: 50%;
transform: translate(-50%, 0);
}
<button class="settings-button-new"><span>Home</span></button>

Maybe this code can help you
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
line-height: 14px;
text-align: center;
position: relative;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc',GradientType=0 );
background-image: linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
.settings-button-new span {
display: block;
position: absolute;
top:0;
left: 50%;
transform: translateX(-50%);
}
<button class="settings-button-new"><span>Home</span></button>

You can remove vertical aligning text using without absolute positioning: you can use vertical-align and pseudoelement for this. Source answer for this technique.
Also
You don't need absolute position in this case (and text-align: center).
I would recommend you to delete vendor prefixed properties because they are for very old browsers
linear-gradient will work for background, not background-image property
Demo:
/* styles to align button's text at the top */
.settings-button-new:after {
content: "";
display: inline-block;
vertical-align: top;
height: inherit;
}
/* styles to align button's text at the top */
.settings-button-new span {
vertical-align: top;
display: inline-block;
}
/* Cleaned up button styles */
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background: #fff linear-gradient(top, #fff 0%, #fcfcfc 100%);
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #fff;
}
<button class="settings-button-new">
<span>Home</span>
</button>

.settings-button-new span {
margin: 0px;
text-align: center;
}

can you change span to div , text-align:center will then work fine

remove the poistion .and simply add margin:auto
.settings-button-new {
width: 150px;
height: 150px;
text-decoration: none;
line-height: 14px;
text-align: center;
position: relative;
margin-left: 20px;
margin-bottom: 20px;
border: solid 4px #d3dbde;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
font: 15px Arial, Helvetica, sans-serif;
color: #1c559b;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #fcfcfc 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#fcfcfc',GradientType=0 );
background-image: linear-gradient(top, #ffffff 0%,#fcfcfc 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
.settings-button-new span {
margin:auto;
}
<button class="settings-button-new"><span>Home</span></button>

how to preserve formatting of html textarea

the question is i have a textarea, from which if the text is copied and pasted to a word document it looses all formatings like fonts and colors only plaintext is retained. I am alrewady aware of Ckeditor and nicedit but i am trying to make my own implementattion of such editor .
the question is what should be my approach?
which direction i should start?
Note: i am using javascript
the code is below
<html>
<head>
<script src="index.js" type="text/javascript"></script>
<link rel="index.css" type="text/css">
<style>
textarea {
resize: none;
width: 80%;
height: 600px;
}
#dock{
width: 80%;
height: 61px;
background: rgb(246, 242, 250);
-moz-box-shadow: 2px 0px 4px 0px rgb(128,128,128);
-webkit-box-shadow: 2px 0px 4px 0px rgb(128,128,128);
box-shadow: 2px 0px 4px 0px rgb(128,128,128);
}
.btn {
border:1px solid #495267; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
background-color: #606c88; background-image: -webkit-gradient(linear, left top, left bottom, from(#606c88), to(#3f4c6b));
background-image: -webkit-linear-gradient(top, #606c88, #3f4c6b);
background-image: -moz-linear-gradient(top, #606c88, #3f4c6b);
background-image: -ms-linear-gradient(top, #606c88, #3f4c6b);
background-image: -o-linear-gradient(top, #606c88, #3f4c6b);
background-image: linear-gradient(to bottom, #606c88, #3f4c6b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#606c88, endColorstr=#3f4c6b);
}
.btn:hover {
border:1px solid #363d4c;
background-color: #4b546a; background-image: -webkit-gradient(linear, left top, left bottom, from(#4b546a), to(#2c354b));
background-image: -webkit-linear-gradient(top, #4b546a, #2c354b);
background-image: -moz-linear-gradient(top, #4b546a, #2c354b);
background-image: -ms-linear-gradient(top, #4b546a, #2c354b);
background-image: -o-linear-gradient(top, #4b546a, #2c354b);
background-image: linear-gradient(to bottom, #4b546a, #2c354b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4b546a, endColorstr=#2c354b);
}
#b1{
float:left;
width: 10px;
height: 25px;
line-height: 5px; /* <- changed this */
box-sizing: border-box;
margin-left: 3px;
margin-top: 3px;
}
</style>
</head>
<body>
<div id="editor">
<center>
<div id="dock">
<button type="button" class="btn" id="b1" onclick="myFunction()">B</button>
<button type="button" class="btn" id="b1" onclick="myFunction()"><i>i</i></button>
<button type="button" class="btn" id="b1" onclick="myFunction()">U</button>
</div>
<textarea id="textarea-1" rows="20" cols="70"></textarea>
</center>
</div>
</body>
</html>

Css/javascript position

Well, this is my problem:
I need the red box behind the number , not above.
My css:
[data-counter]:after {
background-color: #FF6969;
background-image: -webkit-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -moz-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -o-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: -ms-linear-gradient(#FF6969 0%, #ff0000 100%);
background-image: linear-gradient(#FF6969 0%, #ff0000 100%);
height: 8px !important;
margin-top: 4px;
content: attr(data-counter);
top: -10px;
position: absolute;
padding: 1px 4px;
box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset;
background-clip: padding-box;
font:bold 10px "Helvetica Neue", sans-serif;
color: white;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.6);
margin-left: -10px;
}
My javascript(lol)
$(function () {
$('head').append('<style>#numberMps {display:none !important; }#sizeMps { color: red; width: 5px; margin-left: -7px; } </style>');
$('#inbox_link').prepend('<div id="numberMps"></div>');
var newMPs = ".main-content .statused .tcl.tdtopics:has(img[src='http://illiweb.com/fa/empty.gif?NEW']) a[href*='/privmsg?folder=inbox&mode=read&p']";
$('#numberMps').load('privmsg?folder=inbox ' + newMPs, function () {
$('#numberMps').after('<div id="sizeMps"></div>');
var sizeMPs = $('#numberMps a').size();
if (sizeMPs == '0') return;
$('li a[href^="/privmsg?folder=inbox?BOX"]').attr('data-counter', ''+sizeMPs+'');
});
});
Look, the javascript obatin the number of messages, and the css draw this.
Anyone have tips or a solution?

Try useing z-index, it should help.

keep website menu on screen when scrolling

I am trying to make it so my drop down menu will stay on the top of the screen (so no matter how far you scroll down the site menu is always at the top) when scrolling down on my website. This is the css and menu I am using for my website. Can someone PLEASE help me I have tried for days to accomplish this with no success.
<style>
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu: after, #cssmenu ul: after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
color: #FF0000;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #000;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li.active a {
background: #000 url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #000 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #000));
background: -webkit-linear-gradient(top, #000 0%, #000 100%);
background: -o-linear-gradient(top, #000 0%, #000 100%);
background: -ms-linear-gradient(top, #000 0%, #000 100%);
background: linear-gradient(to bottom, #000 0%, #000 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
-moz-box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
-webkit-box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
filter: none;
}
#cssmenu > ul > li.active a: hover {
background: -moz-linear-gradient(top, #000 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #000));
background: -webkit-linear-gradient(top, #000 0%, #000 100%);
background: -o-linear-gradient(top, #000 0%, #000 100%);
background: -ms-linear-gradient(top, #000 0%, #000 100%);
background: linear-gradient(to bottom, #000 0%, #000 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
filter: none;
}
#cssmenu > ul > li a {
box-shadow: inset 0 0 0 1px #000;
-moz-box-shadow: inset 0 0 0 1px #000;
-webkit-box-shadow: inset 0 0 0 1px #000;
background: #000 url(grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(50%, #000), color-stop(51%, #000), color-stop(100%, #000));
background: -webkit-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: -o-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: -ms-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
background: linear-gradient(to bottom, #000 0%, #000 50%, #000 51%, #000 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
border-bottom: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
line-height: 34px;
padding: 0 35px;
filter: none;
}
#cssmenu > ul > li a: hover {
background: #000 url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(50%, #000), color-stop(51%, #000), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: -o-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: -ms-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
background: linear-gradient(to bottom, #000 0%, #000 50%, #000 51%, #c 100%);
filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
filter: none;
}
#cssmenu > ul > li: first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #000;
}
#cssmenu > ul > li: last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub: hover ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
/* IE7 */
*width: 100%;
}
#cssmenu .has-sub ul li {
text-align: center;
}
#cssmenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #000;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}
</style>
<div id='cssmenu'>
<ul>
<li class='Stream Portal'><a href="./home.html" >Home</a>
</li>
<li class='has-sub'><a href="./home.html" >TV</a>
<ul>
<li><a href="./justintv.html" >Justin</a></li>
<li><a href="http://lmtv.us/#" >LM</a></li>
<li><a href="http://www.mtv.com/ontv/" >MTV</a></li>
<li><a href="http://www.spike.com/episodes" >Spike</a></li>
<li><a href="http://www.cartoon-world.tv/cartoon-list/" >Toon</a></li>
<li><a href="./tubtub.html" >TubTub</a></li>
<li class='last'><a href="shows" >Veetle</a></li>
</ul>
</li>
<li class='has-sub'><a href="./home.html" >Movies</a>
<ul>
<li><a href="./moviesearchframe.html" >Movie Search</a></li>
<li><a href="http://topdocumentaryfilms.com/" >Documentaries</a></li>
<li><a href="http://freeonlinemoviestream.co/" >Movie Stream</a></li>
<li><a href="./megashare.html" >MegaShare</a></li>
<li><a href="http://www.cartoon-world.tv/movie-list/" >Toon</a></li>
<li class='last'><a href="http://watch32.com/new-movies.html" >Watch32</a></li>
</ul>
</li>
</ul>
</div>

#cssmenu {position:fixed;top:0px}

Here is a working example (only had to add a few lines of js): http://jsfiddle.net/wHF97/
jQuery(function($) {
$(document).ready( function() {
$('#cssmenu').stickUp();
});
});
It uses a jQuery plugin called stickUp. Their main page also has a working example: http://lirancohen.github.io/stickUp/#
Note: I included the stickUp plugin using the "External Resources" in the left-pane of the jsfiddle.

Used the css position:fixed attribute:
http://www.w3.org/Style/Examples/007/menus.en.html

jQuery scroll() event and $(window).scrollTop() returns the current position of the window scrolled. If that value goes above the position of the item you want to 'follow' the scroll, use addClass to give that item: position:fixed; top:0; That way, when the user scrolls down past the position of the item, it will suddenly (and nicely) move with the window scroll. You may have to recalc the left of the item. If the position of the window is above, removeClass the fixed position.

My CSS fails my javascript dropdown-menu slide effect

So if you want to see my menu go here.
Since I know you'll want my source, here's the CSS:
* {
margin: 0px;
}
#menu-container ul,
#menu-container li,
#menu-container span,
#menu-container a {
margin: 0;
padding: 0;
position: relative;
}
#menu-container {
text-align:center;
height: 49px;
border-radius: 0px 0px 0 0;
-moz-border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
}
#menu-container:after,
#menu-container ul:after {
content: '';
display: block;
clear: both;
}
#menu-container a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
margin-right: -4px;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#menu-container ul {
list-style: none;
}
#menu-container > ul > li {
display: inline-block;
margin-right: -4px;
}
#menu-container > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#menu-container > ul > li:first-child > a {
border-radius: 0px 0 0 0;
-moz-border-radius: 0px 0 0 0;
-webkit-border-radius: 0px 0 0 0;
}
#menu-container > ul > li:last-child > a {
border-radius: 0 0px 0 0;
-moz-border-radius: 0 0px 0 0;
-webkit-border-radius: 0 0px 0 0;
}
#menu-container > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#menu-container > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#menu-container .has-sub {
z-index: 1;
}
#menu-container .has-sub:hover > ul {
display: block;
}
#menu-container .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#menu-container .has-sub ul li {
*margin-bottom: -1px;
}
#menu-container .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#menu-container .has-sub ul li:hover a {
background: #0c7fb0;
}
#menu-container .has-sub .has-sub:hover > ul {
display: block;
}
#menu-container .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#menu-container .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#menu-container .has-sub .has-sub ul li a:hover {
background: #095c80;
}
#menu-container {
-moz-box-shadow: 0 0 10px #888;
-webkit-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
}
li {
font-size: 0
}
And JavaScript:
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
And the HTML:
<div id='menu-container'>
<ul id='menu' class="menu">
<li class='active'><a href='/'><span>Home</span></a></li>
<li class='has-sub'><a href='/games/'><span>Games</span></a>
<ul>
<li><a href='/games/dota-2/'><span>Dota 2</span></a></li>
<li><a href='/games/cs-go/'><span>CS: GO</span></a></li>
<li><a href='/games/css/'><span>CS: Source</span></a></li>
<li><a href='/games/terraria/'><span>Terraria</span></a></li>
<li class='last'><a href='/games/minecraft/'><span>Minecraft</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='/about.html'><span>About Us</span></a>
<ul>
<li><a href='http://www.youtube.com/user/'><span>Our YouTube Channel</span></a></li>
<li><a href='/faq-list.html'><span>Our FAQs/Q&A List</span></a></li>
<li><a href='/feed-news.rss'><span>Our RSS Feed</span></a></li>
<li><a href='/wiki/'><span>Our Wiki</span></a></li>
<li><a href='#'><span>Our Blog</span></a></li>
<li class='last'><a href='/privacy.html'><span>Privacy Policy</span></a></li>
</ul>
</li>
<li class='has-sub last'><a href='/contact.html'><span>Contact Us</span></a>
<ul>
<li class='last'><a href='/forums/'><span>Forums</span></a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
After I added "text-align:center;" to my CSS, when I hover to the menu the slide animation goes in the down direction, but it goes to right too. How to make it go down only?
So I want when you hover on a menu the slide to be only to the bottom NOT to the right.

You have a negative margin being inherited by links in the menu [#menu-container a]. So your menu items end up 4 pixels wider than the menu. You can reset the margin to 0 by adding to the more specific selector like this:
#menu-container .has-sub ul li a { margin-right: 0 }

We Keep Coding

JavaScript is the programming language of the Web.

Create a DIV onclick - javascript

Related

Text on the top not center in the button

how to preserve formatting of html textarea

Css/javascript position

keep website menu on screen when scrolling

My CSS fails my javascript dropdown-menu slide effect

Categories

Resources