Change colour only during mouse click event - javascript

I have a CSS shape that acts as a stop button for some audio:
.double-border {
background-color: #f1f1f1;
border: 2px solid black;
width: 2em;
height: 2em;
position: relative;
margin: 0 auto;
}
.double-border:before {
background: black;
content: "";
display: block;
position: absolute;
top: 7px;
left: 7px;
right: 7px;
bottom: 7px;
pointer-events: none;
}
When the button is clicked it changes colour during the click, and returns to the original colour when the click is released.
I've achieved this by creating two functions to chnage the colour:
function toggleStop(param) {
param.setAttribute("style", "background-color: #C8C8C8;");
}
function toggleStart(param) {
param.setAttribute("style", "background-color: #f1f1f1;");
}
One function is for an onmousedown event and one for an onmouseup event.
<div class="double-border" onclick="stop();" onmousedown="toggleStop(this);" onmouseup="toggleStart(this);">
This kind of works, except if the user hold down the click and simultaneously moves the mouse pointer off the button. In this scenario the button remains the onmousedown colour which I don't want.
Is there a better way of achieving this without too much additional code?

have you tried this with pure css?
.double-border:active,.double-border:focus {
background-color: #f1f1f1;
}
.double-border {
background-color: #f1f1f1;
border: 2px solid black;
width: 2em;
height: 2em;
position: relative;
margin: 0 auto;
}
.double-border:before {
background: black;
content: "";
display: block;
position: absolute;
top: 7px;
left: 7px;
right: 7px;
bottom: 7px;
pointer-events: none;
}
.double-border:active,.double-border:focus {
background-color: #888;
}
<div class="double-border" onclick="stop();"></div>

Related

Variables inside a function

I have a div which acts like a button when I press it. I add classes to change color and the circle inside moves to the right when is clicked. What I would like to do, is to call a function and then change a global variable inside the function and pass it back. I am also testing the code using the document.getElementById("test").innerHTML and the 12th changes to 13th and vise versa successfully. However, the variable flag13th does not change. It always has a false value.
Any ideas folks on this? I would appreciate your help. Thank you.
document.getElementById("toggleButton").addEventListener("click", dekatosTritos);
var flag13th = false;
function dekatosTritos() {
var ThirteenthSalary = document.getElementById("toggleButton").classList;
if ((ThirteenthSalary.contains("toggle-btn")) && (ThirteenthSalary.contains("active"))) {
flag13th = false;
document.getElementById("test").innerHTML = "12th";
} else {
flag13th = true;
document.getElementById("test").innerHTML = "13th";
}
}
document.getElementById("test11").innerHTML = flag13th;
.toggle-btn {
display: inline-block;
position: relative;
top: 8px;
width: 60px;
height: 28px;
background: gray;
border-radius: 30px;
}
.toggle-btn .inner-circle {
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 80%;
}
.toggle-btn.active {
background: #4F94CD;
}
.toggle-btn.active>.inner-circle {
margin-left: 32px;
}
<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
<div class="inner-circle"></div>
</div>
<p id="test">12th</p>
<p id="test11"> </p>
Here's an example that uses no JavaScript, but rather an input type checkbox that can be submitted with your form:
.toggler {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
clip: rect(0 0 0 0);
opacity: 0;
}
.toggler-btn {
display: inline-block;
position: relative;
width: 60px;
height: 28px;
border-radius: 28px;
cursor: pointer;
background: gray;
transition: background 0.3s;
}
.toggler-btn:after {
content: "";
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 100%;
transition: transform 0.3s;
}
.toggler-label::after {
content: attr(data-label);
}
/* CHECKED STATES */
.toggler:checked ~ .toggler-btn {
background: #0bf;
}
.toggler:checked ~ .toggler-btn:after {
transform: translateX(30px);
}
.toggler:checked ~ .toggler-label::after {
content: attr(data-labelchecked);
}
<div class="Question_13th">13th Month Salary?</div>
<input class="toggler" type="checkbox" id="13th" name="13th">
<label class="toggler-btn" for="13th"></label>
<div class="toggler-label" data-label="12th" data-labelchecked="13th"></div>
Here's an example that uses JavaScript, classList.toggle() and bool = !bool to toggle a boolean
const EL_btn = document.querySelector("#toggleButton");
const EL_test = document.querySelector("#test");
let is13 = false;
function dekatosTritos() {
is13 = !is13; // Toggle boolean
EL_btn.classList.toggle('active', is13);
EL_test.innerHTML = is13 ? "13th" : "12th";
}
EL_btn.addEventListener("click", dekatosTritos); // Do on btn click
dekatosTritos(); // and on init.
.toggle-btn {
display: inline-block;
position: relative;
top: 8px;
width: 60px;
height: 28px;
background: gray;
border-radius: 30px;
}
.toggle-btn.active {
background: #4F94CD;
}
.toggle-btn .inner-circle {
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 80%;
}
.toggle-btn.active>.inner-circle {
margin-left: 32px;
}
<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
<div class="inner-circle"></div>
</div>
<p id="test"></p>

Unwanted HTML element flickering

I was working on a quick pen for a project when I ran into flickering issues when dragging an element across an image I'm using. Not really sure whats going on here, the problem doesn't seem to occur when you initially load the pen and pan over it the first time, but after that it starts bugging out.
Link to Pen.
Snippet Demo:
$(document).bind('mousemove', function(e){
$('.tagger').css({
left: e.pageX - 55,
top: e.pageY - 55
});
});
$('#crowd').hover(function(){
$('.tagger').show();
});
$('#crowd').mouseleave(function(){
$('.tagging').attr('class', 'tagger');
$('.tagger').hide();
});
$('#crowd').click(function(){
$('.tagging').attr('class', 'tagger');
});
$('.tagger').click(function(){
$('.tagger').attr('class', 'tagging');
});
$(document).on('click', '.tagging li', function(){
alert($(event.target).text());
});
.tagger {
top: 0px;
left: 0px;
position: absolute;
z-index: 3;
}
.tagger .frame {
position: relative;
height: 100px;
width: 100px;
padding: 0px;
border: 5px;
border-style: solid;
border-color: red;
}
.tagger .name {
display: none;
position: relative;
top: -5px;
height: 90px;
width: 90px;
padding: 5px;
border: 5px;
border-style: solid;
border-color: red;
background-color: white;
}
.tagger .name ul {
list-style: none;
padding: 0px;
margin: 0px;
display: inline-block;
}
.tagging {
position: absolute;
z-index: 3;
}
.tagging .frame {
position: relative;
height: 100px;
width: 100px;
padding: 0px;
border: 5px;
border-style: solid;
border-color: red;
}
.tagging .name {
position: relative;
top: -5px;
height: 90px;
width: 90px;
padding: 5px;
border: 5px;
border-style: solid;
border-color: red;
background-color: white;
}
.tagging .name ul {
list-style: none;
padding: 0px;
margin: 0px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="crowd" src="https://s3.amazonaws.com/viking_education/web_development/web_app_eng/photo_tagging_small.png" height="600">
</div>
<div class="tagger">
<div class="frame"></div>
<div class="name">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Fork</li>
<li>Fyve</li>
</ul>
</div>
</div>
$(document).bind('mousemove', function(e){
$('.tagger').css({
left: e.pageX - 55,
top: e.pageY - 55
});
});
$('#crowd').hover(function(){
$('.tagger').show();
});
$('#crowd').mouseleave(function(){
$('.tagging').attr('class', 'tagger');
$('.tagger').hide();
});
$('#crowd').click(function(){
$('.tagging').attr('class', 'tagger');
});
$('.tagger').click(function(){
$('.tagger').attr('class', 'tagging');
});
$(document).on('click', '.tagging li', function(){
alert($(event.target).text());
});
The hover effect consider the cursor and actually your are moving an element with the cursor so what's happening is this:
You start inside the .tagger element and everything is ok as the cursor is on the .tagger element. No event on the #crowd as the cursor never touched/hovered the #crowd until now.
Once you click or you do something that bring the cursor on #crowd you trigger the hover effect which mean that if you leave you will trigger the mouseleave!
So you hover again on the element .tagger and you trigger the mouseleave as expected.
The element disappear (because of what written in the handler of mouseleave) and the cursor is now on #crowd and you trigger again the hover!
The element .tagger appear again, the cursor is on it and you trigger the mouseleave of #croud and so on ...
The flicker is the infinite sequence (4) (5) (4) (5) (4) ...
To fix this you may change the logic as follow. No need to apply the hide/show function, you can simply wrap the image and .tagger element inside the same wrapper and apply overflow:hidden then keep only the click events.
Here is the full code (I made the image smaller so we can see it in the reduced snippet)
$(document).bind('mousemove', function(e){
$('.tagger').css({
left: e.pageX - 55,
top: e.pageY - 55
});
});
$('#crowd').hover(function(){
$('.tagging').attr('class', 'tagger');
});
$('.tagger').click(function(){
$('.tagger').attr('class', 'tagging');
});
$(document).on('click', '.tagging li', function(){
alert($(event.target).text());
});
.tagger {
top: 0px;
left: 0px;
position: absolute;
z-index: 3;
}
.tagger .frame {
position: relative;
height: 100px;
width: 100px;
padding: 0px;
border: 5px;
border-style: solid;
border-color: red;
}
.tagger .name {
display: none;
position: relative;
top: -5px;
height: 90px;
width: 90px;
padding: 5px;
border: 5px;
border-style: solid;
border-color: red;
background-color: white;
}
.tagger .name ul {
list-style: none;
padding: 0px;
margin: 0px;
display: inline-block;
}
.tagging {
position: absolute;
z-index: 3;
}
.tagging .frame {
position: relative;
height: 100px;
width: 100px;
padding: 0px;
border: 5px;
border-style: solid;
border-color: red;
}
.tagging .name {
position: relative;
top: -5px;
height: 90px;
width: 90px;
padding: 5px;
border: 5px;
border-style: solid;
border-color: red;
background-color: white;
}
.tagging .name ul {
list-style: none;
padding: 0px;
margin: 0px;
display: inline-block;
}
.container {
overflow:hidden;
position:relative;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img id="crowd" src="https://s3.amazonaws.com/viking_education/web_development/web_app_eng/photo_tagging_small.png" width='400' height="300">
<div class="tagger">
<div class="frame"></div>
<div class="name">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Fork</li>
<li>Fyve</li>
</ul>
</div>
</div>
</div>
You are assuming .tagger is JUST the border you've drawn. In actuality, there is an invisible box there. The invisible box is on top of #crowd. When .tagger loads, you are no longer hovering over #crowd, you are hovering over .tagger, which is hovering over #crowd.
To fix it, you may change .tagger from one large box around the mouse, to 4 skinny boxes, so that there is nothing directly below the mouse.
You continuously hide() and show() .tagger repeatedly. mouseleave hides and :hover shows.
there are two ways to fix this:
move the mouseover effect inside the #crowd .hover()
this makes the movement a bit shuddery
see this Pen enter link description here
delete the .delete() call within the .mouseleave handler
Also, a note: The jQuery .hover() method takes two callbacks:
1. for the mouseenter
2. for the mouseleave
So the code could be changed a bit in that regard too.

When the mouse hovers over an element I want to display a small snippet of text for example "Get Info"

So I have my button below, styled with CSS, and already declared as div in the html file. When the mouse hovers over it, I want to display a small snippet of text, e.g. "Get Info".
I tried selector #GetInfo :hover { but it changed all the style and position of my button.
How can I achieve this?
#GetInfo{
cursor: pointer;
width: 33.2px;
height: 33.2px;
display: inine-block;
z-index:1;
position: absolute;
background-color: rgba(219 ,63,63,.5);
text-align: center;
font-size:23px;
color: white;
top:19px;
right:19px;
}
Is that what you want?
#getInfo {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#getInfo .yourTooltip {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
}
#getInfo .yourTooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
#getInfo:hover .yourTooltip {
visibility: visible;
opacity: 1;
}
<html>
<body>
<h1>Pass your mouse over the text below</h1>
<div id="getInfo">Your content goes here<span class="yourTooltip">Get info</span>
</div>
</body>
</html>
There is a title attribute to almost every HTML element. It shows a text while you hover over the element. Try this:
<input type="button" value="Button" title="I wonder what this red button do ..." />

progress bar with reference line using css and html

I am trying to achieve a similar UI as shown in the image link: https://goo.gl/photos/4dNFyq8a3nESQj2g9 .
It is not a normal progress bar. I need to add a reference data line, the name for reference line (in the picture it is "TODAY") and the text inside the progress bar. Could anyone help me with this? I only can find a normal progress bar and I fails to add the reference data line & reference line text to it :(
I have my progress bar working, but I do not know how to add reference line and reference text.
#progress {
width: 500px;
border: 1px solid black;
position: relative;
background-color: rgba(0,0,0,0.1);
}
#percent {
position: absolute;
left: 10px;
color: white;
}
#bar {
height: 20px;
background-color: green;
width: 30%;
padding: 0px;
margin: 0px
}
<div id="progress">
<span id="percent">30%</span>
<div id="bar"></div>
</div>
.progress {
width: 400px;
}
.progress header span {
color: #666;
float: right;
}
.progress .bar {
position: relative;
background-color: #ccc;
}
.progress .bar .percent {
color: white;
background-color: #0c0;
width: 70%;
}
.progress .bar .ref {
position: absolute;
left: 80%;
top: 0;
width: 1px;
height: 100%;
background-color: black;
}
.progress .bar .ref:before {
content: attr(data-ref);
position: absolute;
width: 100px;
left: -50px;
top: 100%;
color: #888;
text-align: center;
}
<div class="progress">
<header><b>April 2015</b><span>$350 Left</span></header>
<div class="bar">
<div class="percent">$950 of $1,300</div>
<div class="ref" data-ref="TODAY"></div>
</div>
</div>

fixed header jumps after scrolling down the page

I have found a few questions similar to this, but were unable to help me.
When I scroll down the page the header/navigation bar doesn't move "smoothly" with the page. After I reach a certain amount down the page, the header "jumps", but after that it's fine.
I have the following code for a fixed header:
$(window).scroll(function(){
if ($(window).scrollTop() >= 147) {
$("#top_nav").addClass("fixed");
$("#top_nav").css("position", "fixed");
$("#top_rule").hide();
$("#bottom_rule").hide();
}
else {
$("#top_nav").removeClass("fixed");
$("#top_nav").css("position", "initial");
$("#top_rule").show();
$("#bottom_rule").show();
}
});
My CSS:
.fixed {
width: 100%;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0px;
padding-top: 15px;
padding: 10px;
}
I don't have a position: fixed in my CSS, because for some reason it isn't working, so instead I used jQuery to set the position to fixed.
I have posted the rest of my page on jsfiddle.net
http://jsfiddle.net/5n4pF/
If I did not explain propelry, please ask and I'll try and explain better :)
Thanks in advance
EDIT
When I reach 147px, it must not jump. It looks as if it "hides and shows". Instead it must move smoothly as you scroll down the page.
You should position your header absolute. and give the news a margin-top the size of the header.
The reason why your position: fixed wasn't working is because you fixed it inside of a relative element. It get's fixed inside of that element (which isn't what you want, because you want it fixed on top of the page).
It jumps because of the fact that you change the element from static to fixed. All of a sudden you miss about 53 pixels of height in your layout . Which makes it jump.
In this fiddle: http://jsfiddle.net/5n4pF/3/
* {
margin: 0px;
padding: 0px;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
#black_top {
background: black;
font-size: 5px;
display:block;
width: 100%;
height: 5px;
}
#logo_header {
margin-top: 20px;
}
.list_item {
list-style-type: none;
display: inline-block;
font: 16px Arial;
padding: 10px 30px 10px 30px;
text-align: center;
}
#top_nav {
font: Arial 30px;
display: block;
width: 100%;
}
.nav_links {
text-decoration: none;
color: black;
}
hr {
margin-right: 30px;
margin-left: 30px;
color: #f00;
opacity: 0.3;
}
.nav_bullets {
color: #D6D6D6;
}
::-moz-selection {
background: #93E6E5;
}
::selection {
background: #b3d4fc;
}
#news_block {
/*Chrome & Safari*/
-webkit-column-count: 3;
-webkit-column-gap: 40px;
/*Firefox*/
-moz-column-count:3;
-moz-column-gap: 40px;
margin: 20px;
position: absolute;
top: 249px;
width: 100%;
box-sizing: border-box;
}
#search_field {
font-size: 25px;
}
.fixed {
width: 100%;
box-sizing: border-box;
background: white;
border-bottom: 1px solid black;
box-shadow: 0 0 20px #000000;
top: 0;
position: fixed;
padding-top: 15px;
padding: 10px;
}
the correct code is given. It's still a bit buggy with widths of something. But the code in general is not very tidy. So I'll leave that part to you. Hope this works for you.
I was working on it today, and I found the solution.
Change the CSS from
.fixed-header .main-header {
display: none;
}
to
.fixed-header .main-header {
display: inline;
}

Categories