Css/javascript position

Css/javascript position - javascript

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.

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 change tooltip background color?

I have created a tooltip in my html file like this:
<span title="" class="duedate-warning-msg"></span>
And I set the CSS property like this:
.duedate-warning-msg{
background: url("/static/img/error.png") no-repeat scroll 14px 12px white;
border-color: #f5c7c7;
padding: .5em 0.25em 0.5em 2.5em;
title:"my tooltip";
color: #D11006;
}
span:hover{
position:relative;
}
span[title]:hover:after {
content: "This statement is past due.";
padding: 4px 8px;
color: white;
font-size:16px;
font-family: "open_sansregular";
background: #0679ca;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
The above style created tooltip perfectly. Only problem which I am facing is that I want background color of tooltip is blue. But it always shows gray. Why it is happening so?

Remove the background-image and add background, like so:
span[title]:hover:after {
content: "This statement is past due.";
padding: 4px 8px;
color: white;
font-size:16px;
font-family: "open_sansregular";
background: #0679ca;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background: #00F;
}

Easy, in background-image property replace #cccccc with a color of your choice, assuming that you want to keep the fade-to-almost-white (#eeeeee) gradient.

Remove the background image from span[title]:hover:after
Here is the working Demo

Create a DIV onclick

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>

How can I keep hover state on unhover until page refresh?

I'm having a lot of trouble getting this to work properly. I just want to make .accordion-content stay upon unhover. I've tried several approaches to this and now I'm pretty much at a total loss. Here is the code I'm working with:
HTML
<ul class="accordion-thing">
<li>
<a>How do I setup my Chem+Nect Drum?<span>Learn More</span></a>
<ul class="accordion-content">
<li><em>01</em></li>
</ul>
</li>
CSS
.accordion-thing,
.accordion-thing ul,
.accordion-thing li,
.accordion-thing a,
.accordion-thing span {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.accordion-thing li {
list-style: none !important;
}
.accordion-thing li > a {
display: block;
position: relative;
min-width: 910px;
min-height: 46px;
padding: 0 10px 0 40px;
vertical-align: middle !important;
color: #fdfdfd;
font: bold 16px/42px Arial, sans-serif !important;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35) !important;
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51)) !important;
background: -webkit-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -o-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: -ms-linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
background: linear-gradient(top, #6c6e74 0%, #4b4d51 100%) !important;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion-thing li > a span {
display: block;
position: absolute;
top: 12px;
right: 0px;
padding: 0 10px;
margin-right: 10px;
font: normal bold 14px/18px Arial, sans-serif !important;
background: #404247;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.accordion-content li a {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.accordion-content li:last-child a { border: none; }
.accordion-content li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.accordion-content {
position: absolute;
top: o;
left: 0
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif !important;
}
.accordion-thing > li:hover > a,
.accordion-thing > li:target > a {
color: #00334c;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);
background: #0679b9 !important;
background: -moz-linear-gradient(top, #0679b9 0%, #3b59e2 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0679b9), color-stop(100%,#3b59e2)) !important;
background: -webkit-linear-gradient(top, #0679b9 0%,#3b59e2 100%) !important;
background: -o-linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
background: -ms-linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
background: linear-gradient(top #0679b9 0%,#3b59e2 100%) !important;
}
.accordion-thing > li:hover > a span,
.accordion-thing > li:target > a span {
color: #fdfdfd !important;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #00334c;
}
.accordion-content li:hover a { background: #efefef; }
.accordion-thing li > .accordion-content {
height: 0;
overflow: hidden;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all .2s ease-in-out;
}
.accordion-thing li:hover > .accordion-content {
height: 98px;
}
Is there some Javascript I can add to make this work properly?

If you want to have the hover style applied permanently after the first hover until the page refreshes, you will have to use javascript:
var accordion = document.getElementsByClassName('accordion-thing')[0];
accordion.addEventListener('mouseenter', function () {
this.classList.add('hovered');
});
then in your css, anywhere that you have .accordion-thing li:hover {}, you can change that to .accordion-thing.hovered li {}
Here is a simple example to show this concept.

jQuery ajax load function doesn't include custom javascript file

I have made a custom jquery popupbox for "Tell a friend" application on my website. It uses the jQuery load function to include a php file from Modules folder and display it into the popupbox. The CSS Works fine but when I bind Javscript to it, It doesn't work at all.
The code below popups the "Tell a friend Form from module folder"
/* Popup for Email to a friend*/
$("#emailtoafriend").click(function (){
$("#overlay").removeClass("overlayHide");
$("#overlay").addClass("overlayShow");
$("#overlay").fadeIn("slow");
$("#popup").load('modules/mod_tellafriend/default.php');
return false;
});
This code below, fires off when a user clicks on the Close Button. This doesn't work
$(".btnClose").click(function (){
alert("Works");
$("#overlay").fadeOut("slow");
$("#overlay").removeClass("overlayShow");
$("#overlay").addClass("overlayHide");
return false;
});
And below is the CSS am using on this popupbox
.overlay{
width: 100%;
height: 100%;
position: absolute;
}
.overlayHide{
display: none;
}
.overlayShow{
display: block;
background: url(../images/overlay.png) repeat;
z-index: 1;
}
.popups{
border: 1px solid #666;
background-color: #FFF;
width: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 150px;
padding: 10px;
-webkit-box-shadow: 0px 1px 14px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 1px 14px rgba(255, 255, 255, 1);
box-shadow: 0px 1px 14px rgba(255, 255, 255, 1);
}
.popupTitle{
font-weight: bold;
font-size: 16px;
border-bottom: 1px solid #CCC;
padding-bottom: 5px;
}
.popupdescription{
font-size: 12px;
padding-top: 5px;
padding-bottom: 5px;
}
.btnsubmit{
width: 100px;
line-height: 20px;
font-weight: bold;
background-color: hsl(120, 69%, 17%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#23c123", endColorstr="#0d490d"); background-image: -khtml-gradient(linear, left top, left bottom, from(#23c123), to(#0d490d)); background-image: -moz-linear-gradient(top, #23c123, #0d490d); background-image: -ms-linear-gradient(top, #23c123, #0d490d); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #23c123), color-stop(100%, #0d490d)); background-image: -webkit-linear-gradient(top, #23c123, #0d490d); background-image: -o-linear-gradient(top, #23c123, #0d490d); background-image: linear-gradient(#23c123, #0d490d); border-color: #0d490d #0d490d hsl(120, 69%, 10%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.46); -webkit-font-smoothing: antialiased;
}
.btncancel{
width: 100px;
line-height: 22px;
font-weight: bold;
color: #000;
border: 1px solid #CCC;
background: #FFF;
}
What's wrong?
Why does CSS works fine and JavaScript doesn't. All my Javascripts are being loaded in the bottom of the page (Not on the head).

$.load can't load jsfile or javascript.
you can put the jsfile in parent page who call load ;
and put js in $.load function ,like:
$("#popup").load('modules/mod_tellafriend/default.php',function(){
//javascript
});

We Keep Coding

JavaScript is the programming language of the Web.

Css/javascript position - javascript

Try useing z-index, it should help.

Related

Text on the top not center in the button

How to change tooltip background color?

Create a DIV onclick

How can I keep hover state on unhover until page refresh?

jQuery ajax load function doesn't include custom javascript file

Categories

Resources