how to preserve formatting of html textarea - javascript

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>

Related

Changing CSS via JS

How can i change the "background-image" on .btn-1 to the variable "color" that i have on the script?
I basically want to change the 3color gradient property of the CSS .btn-1 using JS.
<style>
.btn {
flex: 1 1 auto;
margin: 10px;
padding: 30px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
box-shadow: 0 0 20px #eee;
border-radius: 10px;
}
.btn:hover {
background-position: right center;
}
.btn-1 {
background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}
</style>
<body>
<div class="container">
<script>
var color = {background-image: linear-gradient(to right, color1 0%, color2 51%, color3 100%)}
</script>
<a name="button" class="btn btn-1">Button Text</a>
</div>
</body>
var color needs to be a string, select the element you want using document.querySelector then apply the gradient with element.backgroundImage = color
var color = 'linear - gradient(to right, color1 0 % , color2 51 % , color3 100 % )'
document.querySelector('.btn.btn-1').backgroundImage = color;
.btn {
flex: 1 1 auto;
margin: 10px;
padding: 30px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
box-shadow: 0 0 20px #eee;
border-radius: 10px;
}
.btn:hover {
background-position: right center;
}
.btn-1 {
background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}
<div class="container">
<a name="button" class="btn btn-1">Button Text</a>
</div>
I would recommend you to add a modifier class for btn class. Modifier class is a part of BEM methodology and it is a sort of helper class which used to change behavior or appearance of the element. Read more about BEM.
After you added your modifier class just add it to your element when you need it.
This approach is better in terms of code cleanness and maintenance. Let me know if you have any questions.
Quick example:
.btn {
flex: 1 1 auto;
margin: 10px;
padding: 30px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
/* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
box-shadow: 0 0 20px #eee;
border-radius: 10px;
}
.btn:hover {
background-position: right center;
}
.btn-1 {
background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}
.btn-1--extra {
background-image: linear-gradient(to right, color1 0%, color2 51%, color3 100%);
}
<body>
<div class="container">
<a name="button" id="button" class="btn btn-1">Button Text</a>
</div>
<script>
var button = document.getElementById("button");
button.classList.add("btn-1--extra");
</script>
</body>

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>

Add CSS3 Button to HTML Page

I have the following button in between my style tags:
<style>
.myButton {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.myButton:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.myButton:active {
border-top-color: #1b435e;
background: #1b435e;
}
</style>
Question:
How would I add the button to my HTML page with the ID of btnAdd
Is this the correct way of doing it:
<button class="myButton" id="btnAdd" /> Add </button>
1.)
<a class="myButton" id="btnAdd"> Add </a>
2.)
and then this? (full code below)
document.addEventListener('DOMContentLoaded', function(){
});
function myFunc(){ alert('Hey Hey Hey, is that a mirror in your pocket?'); }
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('btnAdd').addEventListener('click', myFunc);
});
.myButton {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
.myButton:hover {
border-top-color: #28597a;
background: #28597a;
color: #ccc;
}
.myButton:active {
border-top-color: #1b435e;
background: #1b435e;
}
<a class="myButton" id="btnAdd" href="#"> Add </a>
3.) Based on comment request, can also do it this way:
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<a class="myButton" id="btnAdd" href="#"> Add </a>
<p><strong>Note:</strong> The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.</p>
<p id="demo"></p>
<script>
document.getElementById("btnAdd").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
</script>
JSFIDDLE
4.) And also without using href="" in the <a> tag
JSFIDDLE (no link in a tag)
The correct format would be:
<button class="myButton" id="btnAdd">Add</button>
What you posted is a mixture between a standard tag and a self-closing tag. If you use a self-closing tag, you do not need the trailing enclosure (</button> in this case), but button is not an element that supports self-closing tags so a standard tag enclosure should be used.

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>

DIV over iframe blinks when I hover the mouse over this

I'm trying put a social button over iframe (youtube/vimeo video). This social buttons are inside a div container. The div container show/hidden the content with javascript. When I hover the mouse over the button, this blink. Can anyone help me to avoid the blink effect? I use javascript, but some css only based solution it's good, too.
Here a jsfidle code --> http://jsfiddle.net/QYpKH Thank you Tyler Rafferty for upload the file
HTML
<div class="overlaySharing">
<div id="overlayIcons">
<div class="row">
<div class="col-lg-12">
<a href="http://www.facebook.com/sharer.php?u=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> ">
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
<div class="buttonFb"><span class="facebook"></span>Share en Facebook</div>
</div>
</a>
<a href="http://twitter.com/share?url=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>&text=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> <?php the_title(); ?>">
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
<div class="buttonTw"><span class="twitter"></span>Share Twitter</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="showButtons" onmouseover="document.getElementById('overlayIcons').style.display = 'block';" onmouseout="document.getElementById('overlayIcons').style.display = 'none';">
<iframe src="//player.vimeo.com/video/80871338" width="100%" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
Css
.overlaySharing {
padding: 0;
position: relative;
transition: opacity 0.4s ease 0s, top 0.25s ease 0s;
width: 100%;
z-index: 500;
}
#overlayIcons {
padding: 0;
top: 50px;
position: absolute;
width: 100%;
z-index: 6000;
}
.showButtons {
width: 100%;
height: 500px;
}
.buttonFb {
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#599Bdc), color-stop(100%,#3072B3));
background: -moz-linear-gradient(center top, #599Bdc 0%, #3072B3 100%);
-webkit-box-shadow: 0px 1px 0px 0px #7dc0ff inset, 0px -1px 0px 0px #1a3d5e inset, 0px 2px 2px 0px #d4d4d4;
-moz-box-shadow: 0px 1px 0px 0px #7dc0ff inset, 0px -1px 0px 0px #1a3d5e inset, 0px 2px 2px 0px #d4d4d4;
box-shadow: 0px 1px 0px 0px #7dc0ff inset, 0px -1px 0px 0px #1a3d5e inset, 0px 2px 2px 0px #d4d4d4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0px 1px 0px #424242;
padding: 10px 20px;
display: block;
border-color: #295c8c;
border-width: 1px;
border-style: solid;
font-family: Lucida Grande;
font-size: 14px;
color: #FFFFFF;
width: 251px;
}
.buttonFb:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82bbf0), color-stop(100%,#3072B3));
background: -moz-linear-gradient(center top, #82bbf0 0%, #3072B3 100%);
}
.buttonFb:active {
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#143a5e), color-stop(100%,#5ea3e0));
background: -moz-linear-gradient(center top, #143a5e 20%, #5ea3e0 100%);
-webkit-box-shadow: 0px 1px 0px 0px #54799c inset;
-moz-box-shadow: 0px 1px 0px 0px #54799c inset;
box-shadow: 0px 1px 0px 0px #54799c inset;
}
.buttonTw {
display: inline-block;
background: #58bfd8; /* Old browsers */
background: -moz-linear-gradient(top, #58bfd8 0%, #3096b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58bfd8), color-stop(100%,#3096b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #58bfd8 0%,#3096b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #58bfd8 0%,#3096b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #58bfd8 0%,#3096b2 100%); /* IE10+ */
background: linear-gradient(to bottom, #58bfd8 0%,#3096b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bfd8', endColorstr='#3096b2',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0px 1px 0px #424242;
padding: 10px 14px;
display: block;
border-color: #008CAF;
border-width: 1px;
border-style: solid;
font-family: Lucida Grande;
font-size: 14px;
color: #FFFFFF;
width: 231px;
}
.buttonTw:hover {
background: #effbff; /* Old browsers */
background: -moz-linear-gradient(top, #effbff 0%, #3096b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#effbff), color-stop(100%,#3096b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #effbff 0%,#3096b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #effbff 0%,#3096b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #effbff 0%,#3096b2 100%); /* IE10+ */
background: linear-gradient(to bottom, #effbff 0%,#3096b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#effbff', endColorstr='#3096b2',GradientType=0 ); /* IE6-9 */
}
.buttonTw:active {
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#143a5e), color-stop(100%,#5ea3e0));
background: -moz-linear-gradient(center top, #143a5e 20%, #5ea3e0 100%);
-webkit-box-shadow: 0px 1px 0px 0px #54799c inset;
-moz-box-shadow: 0px 1px 0px 0px #54799c inset;
box-shadow: 0px 1px 0px 0px #54799c inset;
}
The blinking is caused by a small bug in your logic:
When the mouse enters the iframe, you show the buttons. When the mouse hovers over the button, it is leaving the iframe so the mouse-out event fires. This causes the buttons to go away. But now the mouse is over the iframe again so the mouse-over fires and the button comes back. but wait! now the mouse is over the button again so the iframe mouse-out fires..... and so now you have a blinky button :)
You need to add some logic to not hide the buttons if the mouse is over them. You may be able to avoid it if the buttons AND the iframe were all inside the same div. That 'parent' div could handle the mouse events. (And in fact, it works if you move your "overlaySharing" div inside your "showButtons" div -- http://jsfiddle.net/5crKg/)
<div class="showButtons" onmouseover="document.getElementById('overlayIcons').style.display = 'block';" onmouseout="document.getElementById('overlayIcons').style.display = 'none';">
<div class="overlaySharing">
<div id="overlayIcons">
<div class="row">
<div class="col-lg-12">
<a href="http://www.facebook.com/sharer.php?u=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> ">
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
<div class="buttonFb"><span class="facebook"></span>Share en Facebook</div>
</div>
</a>
<a href="http://twitter.com/share?url=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>&text=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> <?php the_title(); ?>">
<div style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
<div class="buttonTw"><span class="twitter"></span>Share Twitter</div>
</div>
</a>
</div>
</div>
</div>
</div>
<iframe src="//player.vimeo.com/video/80871338" width="100%" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Categories