i Was trying to make a simple button which changes colour on mouse over using JavaScript and its not working so,help please....
html:
<head lang="en">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="Button.css" />
<script type="text/javascript" src="Button.js"></script>
<title>BUTTON</title>
</head>
<body>
<div id="Button">PRESS ME</div>
</body>
JavaScript:
var Button = document.getElementById('Button');
Button.onmouseover(function(){
this.style.backgroundColor = 'rgba(0,255,0,0.3)';
});
CSS:
#Button{
width: 120px;
height : 30px;
position: fixed;
top: 100px;
left:300px;
border: 1px solid black;
background-color : rgba(0,0,255,0.3);
font-size : 25px;
}
Change
Button.onmouseover(function(){
this.style.backgroundColor = 'rgba(0,255,0,0.3)';
});
to
Button.onmouseover = function(){
this.style.backgroundColor = 'rgba(0,255,0,0.3)';
};
Full example:
var Button = document.getElementById('Button');
Button.onmouseover = function () {
this.style.backgroundColor = 'rgba(0,255,0,0.3)';
};
#Button {
width: 120px;
height : 30px;
position: fixed;
top: 100px;
left:300px;
border: 1px solid black;
background-color : rgba(0, 0, 255, 0.3);
font-size : 25px;
}
<div id="Button">PRESS ME</div>
JSFiddle demo: http://jsfiddle.net/n4j53jcu/
You're confusing two different paradigms of hooking events. onmouseover is a property you can assign a single function to, via assignment (not calling it). So you could do:
Button.onmouseover = function(){
this.style.backgroundColor = 'rgba(0,255,0,0.3)';
};
var Button = document.getElementById('Button');
Button.onmouseover = function(){
this.style.backgroundColor = 'rgba(0,255,0,0.3)';
};
#Button{
width: 120px;
height : 30px;
position: fixed;
top: 100px;
left:300px;
border: 1px solid black;
background-color : rgba(0,0,255,0.3);
font-size : 25px;
}
<div id="Button">PRESS ME</div>
But the modern way is to play nicely with others and not bludgeon any previous handler (which the above does), but just add to the handler list:
Button.addEventListener("mouseover", function(){
this.style.backgroundColor = 'rgba(0,255,0,0.3)';
}, false);
var Button = document.getElementById('Button');
Button.addEventListener("mouseover", function(){
this.style.backgroundColor = 'rgba(0,255,0,0.3)';
}, false);
#Button{
width: 120px;
height : 30px;
position: fixed;
top: 100px;
left:300px;
border: 1px solid black;
background-color : rgba(0,0,255,0.3);
font-size : 25px;
}
<div id="Button">PRESS ME</div>
Of course, IE8 and earlier make that difficult, but you can use the function in this other answer if you need to support them.
Related
I'm learning javascript and I've faced with a strange case while doing the gallery example in the MDN. I decided to add a simple function to this example but it didn't work. My goal is to add a function to the ".displayed-img" img.
I know that the issue is because of the "overlay" div. and I can run my function when I comment that line in the HTML. But I wonder what would be the best approach when I have a case like this and I need to access to an object which sits beneath another one. Thanks.
Here is my code:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
var btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
var imgUrl, currentImgUrl;
/* Looping through images */
for (var i = 0; i < 5; i++) {
imgUrl = 'https://via.placeholder.com/640x48'+(i+1)+'.jpg';
var newImage = document.createElement('img');
newImage.setAttribute('src', imgUrl);
thumbBar.appendChild(newImage);
newImage.addEventListener ('click', function(e){
displayedImage.setAttribute('src', e.target.getAttribute('src'));
} );
}
displayedImage.addEventListener('click', sayHi);
function sayHi(){
console.log('hi');
}
btn.onclick = function() {
if (btn.getAttribute('class')==='dark') {
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
btn.textContent = 'Light';
btn.setAttribute('class', 'light');
} else {
overlay.style.backgroundColor = 'rgba(0,0,0,0)';
btn.textContent = 'Darken';
btn.setAttribute('class', 'dark');
}
}
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 480px;
background-color: rgba(0, 0, 0, 0);
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image gallery example</h1>
<div class="full-img">
<img class="displayed-img" src="https://via.placeholder.com/640x480">
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar">
</div>
<script src="main.js"></script>
</body>
</html>
I want to add a fade in / fade out effect to a hidden block (id = "help"). How can I animate a block using pure css? Also, I want to animate the link (id = "show) after clicking. Please help and give me some examples.
See my code:
var showElem = document.getElementById("show");
var hideElem = document.getElementById("hide");
var helpDiv = document.getElementById("help");
helpDiv.style.display = 'none';
hideElem.style.visibility = 'hidden';
showElem.onclick = function() {
showElem.style.visibility = 'hidden';
hideElem.style.visibility = 'visible';
helpDiv.style.display = 'block';
};
hideElem .onclick = function() {
hideElem.style.visibility = 'hidden';
showElem.style.visibility = 'visible';
helpDiv.style.display = 'none';
};
div#help {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
margin-top: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
SHOW
HIDE
<div id="help"></div>
</body>
</html>
Try This:
$(document).ready(function(){
$("#show").click(function(){
$('.help').addClass('sh');
$(this).css('opacity',0)
$("#hide").css('opacity',1)
})
$("#hide").click(function(){
$('.help').removeClass('sh');
$(this).css('opacity',0)
$("#show").css('opacity',1)
})
})
#hide, #show, .help {
transition: all 1s;
}
.help {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
margin-top: 10px;
opacity: 0;
}
#hide {
opacity: 0;
}
.sh {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
SHOW
HIDE
<div class="help" class="sh"></div>
In case you're using jQuery:
jsfiddle: https://jsfiddle.net/0j9qbj7p/4/
HTML
SHOW
HIDE
<div id="help">Text here</div>
CSS
#hide, #help{
display: none;
}
#help{
background-color: blue;
height: 400px;
}
jQuery
$showElem = $('#show');
$hideElem = $('#hide');
$helpElem = $('#help');
$showElem.click(function(){
$helpElem.slideDown();
$hideElem.show();
});
$hideElem.click(function(){
$helpElem.slideUp();
$hideElem.hide();
});
In order to use animations with pure CSS, you have to use '#keyframes' to control the opacity ( in order to simulate fade in / fade out effect) of the box.
Just add this to the top of the CSS file:
#keyframes FadeAnimation {
from{
opacity:0;
}
to {
opacity:1;
}
}
But afterwards, you also have to show what item you want to animate by adding this line to your code:
div#help {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
margin-top: 10px;
background:grey /* it is important to give a background color*/
animation-name: FadeAnimation; /* the name of the keyframes */
animation-duration:0.5s /* the duration time */
animation-iteration-count:1; /* how many time to repeat */
}
You can do the same with the words in the box.
I've been searching a lot on the site and the web but can't really seem to find any help. My problem is that I need to make a function that creates a new div box on the press of a button and that div box needs to be draggable and editable.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
draggable is a part of jquery-ui library. Not jquery.
Add <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> to your code.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
Since you use jQuery, you can use .draggable() from jQuery UI along with contenteditable="true":
function addNew() {
var field = $('<div contenteditable="true">Text</div>')
field.appendTo('#fields').draggable();
}
#fields div {
border: 1px dashed #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button onClick="addNew()">Add new field</button>
<hr/>
<div id="fields"></div>
There is something I want to notice.
never use same id to elements.
use jquery .on function for element that make by scripts.
never use box-shadow :D
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox'+e.pageX+e.pageY+'"><span class="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$($newbox).css({
'top' : ($('#canvas').height() / 2 - 150 + sequentCounter++) + 'px' ,
'left' : ($('#canvas').width() / 2 - 100 + rowSeqCounter + sequentCounter++) + 'px'
});
$newbox.draggable({cancel : '.close'});
}
}
var sequentCounter = 1;
var rowSeqCounter = 1;
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#div_element_maker').click(function (e) {
if (sequentCounter > 70){
sequentCounter = 1;
rowSeqCounter += 11;
if (rowSeqCounter > 50)
rowSeqCounter = 1;
}
makeNote(e);
});
// Remove the note
$('#canvas').on('click',".close", function () {
$(this).parent().remove()
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.ui-widget-content {
position: absolute;
background-color: white;
height: 180px;
width: 185px;
border: 1px solid darkgray;
/*box-shadow: 10px 10px 10px #888;*/
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 180px;
height: 100px;
border: 1px solid darkgray;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
.close{
cursor: pointer;
background: red;
}
#div_element_maker{
cursor: pointer;
background: green;
padding: 10px;
margin: 10px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
<span id="div_element_maker">make element</span>
</div>
</body>
</html>
I have a div
<div id="preview">
</div>
Is there any way to bind a click event to this div's left border?
Thanks in advance.
div {
height:100px;
border:4px solid black;
padding:10px;
}
Please try this method
$('div').click(function(e){
if( e.offsetX < 5){
alert('clicked on the left border!');
}
});
Edit - Better version
$('div').click(function(e){
if( e.offsetX <= parseInt($(this).css('borderLeftWidth'))){
alert('clicked on the left border!');
}
});
You have have events only on elements. Borders are not elements. But you can make it look like elements by using pseudo elements.
$(document).ready(function () {
$(".border:before").click(function () {
alert("Hi");
});
});
.border {border-left: 5px solid #99f; padding-left: 10px; position: relative;}
.border:before {content: " "; display: block; height: 5px; width: 5px; position: absolute; left: -5px; top: 0; background: #f00; height: 1em;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>
Or you can go with having a parent element surrounded.
$(function () {
$(".outer").click(function () {
alert("Hi");
});
$(".inner").click(function () {
return false;
});
});
.outer {background: #f00; padding-left: 5px;}
.inner {background: #fff; padding: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="outer"><div class="inner">Hi</div></div>
If you feel you should not add borders manually, already you will be adding the events with JavaScript. You can create an element on the fly and make it clickable.
$(function () {
$(".border").wrap("<div class='outer' />");
$(".outer").click(function () {
alert("Hi");
});
});
.border {border-left: 5px solid #f00; padding: 5px;}
.outer {padding-left: 5px; background: #f00;}
.outer .border {background: #fff; border: 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>
Or the best way is to use the computed value and events.
$(document).ready(function () {
$(".border").click(function (e) {
if (e.offsetX < parseInt($(this).css("border-left-width").replace("px", "")))
alert("Hi");
});
});
.border {border-left: 5px solid #99f; padding-left: 10px; position: relative;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="border">Hi</div>
I don't think there is but you can make your own border with another div and set a click event on that!
Here is a example:
HTML
<div id="preview">
<div id="leftborder"></div>
</div>
CSS
#preview{
width:200px;
height:200px;
background-color:black;
border: 5px solid blue;
border-left:0px;
}
#leftborder{
width:5px;
height:100%;
background-color: blue;
}
JS
$( "#leftborder" ).click(function() {
alert( "Left border clicked!" );
});
the JS part is jquery so you gonna need to include that in your header first.
Borders are not elements, and as such you cannot bind click event to it.If you wanted this type of functionality, you would need to place an element at the left edge of the div, and bind to that.
here is an simple example
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
.preview {
background-color:#F5F5F5;
width: 50%;
height: 200px;
padding:10px;
border: 10px solid #FF0000;
}
</style>
</head>
<body>
<div id="el" class="preview"></div>
<!-- Script at the end -->
<script type="text/javascript" >
$('#el').click(function(e) {
var $this = $(this);
// Define the border with
var border_width = 10;
// Get the offset
var offset = $this.offset();
offset.left = e.pageX - offset.left;
offset.top = e.pageY - offset.top;
// Size can be used for calculate click on right border
var size = {
'width' : $this.width()
,'height' : $this.height()
};
if(offset.left <= border_width) {
console.info("border left clicked");
}
});
</script>
</body>
</html>
I have a nice touchscreen button that responds to the user's touch (looks like iOS button), the JavaScript works fine inside the html document, but will not work at all in an external file:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Custom buttons</title>
<link rel="stylesheet" href="buttons.css" type="text/css" />
<script src="main.js" type="text/javascript"></script>
</head>
<body ontouchstart=''>
<div class="round-button iOS-border">
<div class="round"></div>
</div>
</body>
</html>
CSS:
.round-button{
max-width: 50px;
max-height: 30px;
background-color: #fefefe;
padding: 0px 3px 1px 0px;
border-radius: 1000px;
transition:.3s;
-webkit-transition:.3s;
}
.round-button .round {
position: relative;
width: 30px;
height: 30px;
border-radius: 100%;
background-color: white;
box-shadow: 0px 2px 5px #c1c1c1;
border: .5px solid #d7d7d7;
transition:.3s;
-webkit-transition:.3s;
}
.round-button:hover .round {
left: 22px;
}
JS:
iButtonOn = '#4cda62';
iButtonOff = '#fefefe';
iButtonBorder = '1px solid #e1e1e1';
document.querySelector('.round-button').ontouchstart = function() {
var round = document.querySelector('.round-button');
document.querySelector('.round').style.left = '21px';
round.style.background = iButtonOn;
round.style.border = '1px solid transparent';
}
document.querySelector('.round-button').ontouchmove = function() {
var round = document.querySelector('.round-button');
document.querySelector('.round').style.left = '0px';
round.style.background = iButtonOff;
round.style.border = iButtonBorder;
}
// Default styles
document.body.onload = function() {
var round = document.querySelector('.round-button');
round.style.border = iButtonBorder; // loads default style
}
I tried putting var before iButtonOn, iButtonOff,iButtonBorder, and then putting it in a seperate function that starts on body load (like <body onload="function()">) but that still doesn't work.
The output looks like this, when the javascript is inside the document:
Outside Document:
Your script is being executed before the page loads. Move it to the end or wrap it in a window.onload handler function.