I created a on/off button using html/css. When on or off button is clicked it will link to python script using href tag. But i dont want buttons to appear seperate. so what i am trying is When ON button is clicked, off button should go invisible or hidden and vice-versa. When one button is clicked it should swap its position with another button. So it will appear as single button.
<!DOCTYPE html>
<head>
title>{{ title }}</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
.large_button {
position: absolute;
width: 32%;
height: 23%;
text-align: center;
text-decoration: none;
font-size: 400%;
}
#On {
background-color: #ffe4c4;
color: #000000;
top: 1;
tect-shadow: 1px 1px 10px #5C4E17;
}
#On {
background-color: #ffe4e1;
color: #66cd00;
left: 34%;
top: 1;
text-shadow: 1px 1px 10px #5C4E17;
}
#Off {
background-color: #ffe4e1;
color: #66cd00;
left: 68%;
top: 1;
text-shadow: 1px 1px 10px #5C4E17;
}
</style>
</head>
<body>
<h1>
ON
</h1>
<h1>
OFF
</h1>
</body>
If i understand your question correctly, Something like this might help.
Calling a javascript function on click.
<script>
var hidden = false;
function action() {
hidden = !hidden;
if(hidden) {
document.getElementById('ON').style.visibility = 'hidden';
} else {
document.getElementById('OFF').style.visibility = 'visible';
}
}
</script>
You can add Jquery based on id and class like below
<body>
<h1>
ON
</h1>
<h1>
OFF
</h1>
</body>
$(document).ready(function ()
{
$('#On').hide();
$('#Off').click(function () {
if ($('#Off').hasClass('off_class'))
$('#off').removeClass("off_class").addClass("large_button");
});
});
Related
if I have a normal text ( <h1> for example ) that is covered with any element representing a shape, How do I change the part of text that is crossed with the shape.
if I have something like this:
.
How do I change the color of this part only:
It dose not matter if the shape is an HTML element or a background image for the container.
Note:
I know that I can play with the opacity to get a different color for the crossed part. but I want to set any color I want.
my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: uppercase;
}
body {
font-family: sans-serif;
font-size: 6vw;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
#con {
position: relative;
}
h1:not(#cloned) {
color: blue;
position: absolute;
top: 0;
left: 0;
}
#cloned {
color: transparent;
}
#shape {
display: inline-block;
height: 18.7vw;
width: 18.7vw;
background-color: red;
border-radius: 50%;
position: absolute;
top: 5%;
right: 10%;
opacity: 50%;
}
</style>
</head>
<body>
<div id="con">
<h1>this is<br>awesome</h1>
<h1 id="cloned">this is<br>AWESOME</h1>
<div id="shape"></div>
</div>
</body>
</html>
One way to do this is to make everything in the container except the h1 text into an image which can then be used to mask the cloned text (which we make the required color rather than transparent).
As the requirement was to have any sort of content beneath the text, html2canvas is used to make a canvas and then convert it to an image. This is then used to mask the cloned text.
There are questions around whether it is required that opacity be carried over to the intersection color. I assumed not because it looked rather washed out, but it can be kept if required. Also, html2canvas may not cope with absolutely all the formatting in any underlying HTML - whether this matters depends on the use-case.
Here is the code. Note that element shape can contain HTML. Remember to replace the copy of the html2canvas library with a copy of your own. Downloadable to your machine from github for example.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ahweb.org.uk/html2canvas.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: uppercase;
overflow: hidden;
}
#container {
font-family: sans-serif;
font-size: 6vw;
display: flex;
height: 100vh; /* 100vh doesn't work on Safari IOS because of its definition of vh (not same as innerHeight). See hack in the JS code. */
justify-content: center;
align-items: center;
}
#con {
position: relative;
overflow: hidden;
}
#con h1 {
top: 0;
left: 0;
}
#text {
position: relative;
color: blue;
}
#cloned {
position: absolute;
color: lime; /* THE COLOR YOU WANT THE OVERLAPPING BIT OF TEXT TO BE */
}
#shape {
display: inline-block;
height: 18.7vw;
width: 18.7vw;
border-radius: 50%;
position: absolute;
top: 5%;
right: 10%;
background-color: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="container">
<div id="con">
<h1 id="text">this is<br>awesome</h1>
<div id="shape"></div>
<h1 id="cloned">this is<br>awesome</h1>
</div>
</div>
<script>
const container = document.getElementById('container');
const con = document.getElementById('con');
function resize() {
container.style.height = window.innerHeight + 'px';
let w = con.offsetWidth;
let h = con.offsetHeight;
const textel = document.querySelector('#text');
const cloned = document.querySelector('#cloned');
const shape = document.querySelector('#shape');
//get an image of everything except the masking text so we can use it to mask the cloned
textel.style.opacity = 0;
cloned.style.opacity = 0;
shape.style.opacity = 1;
html2canvas(document.querySelector("#con"), {backgroundColor: null, scale: 1, width: w, height: h, allowTaint: true, useCORS: true}).then(canvas => {
// now we set the cloned to be masked by all the shape
cloned.style.opacity = 1;
shape.style.opacity = 0;
cloned.style.maskImage = 'url(' + canvas.toDataURL() + ')';
cloned.style.WebkitMaskImage = 'url(' + canvas.toDataURL() + ')';
textel.style.opacity = 1;
shape.style.opacity = '';
});
}
resize();
window.addEventListener('resize', resize);
</script>
</body>
</html>
I'm trying to make a basic FAQ of sorts using a simple click on element to reveal the answer to the FAQ. Spoiler..
I have found a really handy piece of coding, but everything I try I cannot prevent the mouse hover from making the answer disappear.
I need the answer to remain on the page until the user is ready to click the next FAQ.
I hope someone can help, thank you very much.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p><b>This is an FAQ</b><br />
<p>This is also FAQ click below for the answer</p>
<div class=spoiler><div>
My hidden text
</div></div>
</body>
</html>
.spoiler { display: relative; cursor: pointer; margin-bottom: 10px; margin-top: 10px; }
.spoiler:before { content: "Answer:"; position:absolute; cursor: pointer; font-weight: bold; color: #2C3635; }
.spoiler > div { cursor: default; top: 0px; display: none; position: relative; right: 10px; top: 20px; border: #A6B2A6 1px solid; background: darkgrey; padding: 0px 10px 15px 10px; border-radius: 4px; }
.spoiler > div:before { content: ""; display: block; width: 100%; height: 20px; margin-top: -20px; }
.spoiler:active > div { display: block; }
.spoiler > div:hover { display: block; }
https://jsfiddle.net/g9b3ugzh/
The HTML details and summary elements are perfect for this. The basics without any CSS required are as follows:
<details>
<summary>Answer:</summary>
<p>My hidden text</p>
</details>
JSFiddle demo
You could give the code, it is a JavaScript solution, in the JSFiddle a go.
var spoiler = document.getElementsByClassName('spoiler');
var showSpoiler = function() {
this.classList.add("show-spoiler");
}
for (var i = 0; i < spoiler.length; i++) {
spoiler[i].addEventListener("mouseover", showSpoiler);
}
Had to disable and amend some CSS too though, to make it work:
Took off position: absolute; from .spoiler:before
Took off top declarations from .spoiler > div
Removed the :hover and :active states on .spoiler
A tool-tip is shown when I click inside of a text-box and the tool-tip disappears when I exit the text-box using the following JavaScript codes and CSS. The problem is the scrolling of the page. The position of tool-tip changes equal to the scrolling value. How can I fix the the position of a tool-tip relative to text-box in HTML?
<style type="text/css">
.tooltip {
visibility: hidden;
position: fixed;
width: 450px;
top: 0;
left: 0;
z-index: 2;
color: red;
background-color: #ffffe6;
font-family: 'B Yekan';
font-size: 20px;
text-align: center;
padding: 1px;
border: solid 1px;
border-radius: 5px;
overflow:auto;
}
</style>
<script type="text/javascript">
function tooltip_show(tooltipId, inputId) {
var inputField = document.getElementById(inputId);
var rectObject = inputField.getBoundingClientRect();
var top = rectObject.top, left = rectObject.left;
var it = document.getElementById(tooltipId);
it.style.left = (left - it.offsetWidth / 2 + inputField.offsetWidth / 2) + 'px';
it.style.top = (top + inputField.offsetHeight + 5) + 'px';
var a = inputField.scrollTop;
it.style.visibility = 'visible';
}
function tooltip_hide(tooltipId) {
var it = document.getElementById(tooltipId);
it.style.visibility = 'hidden';
}
</script>
This tooltip created with pure css.
body {
height:800px;
}
.container {
position: relative;
margin-top: 50px;
}
.tooltip {
display: none;
background-color: #000;
position: absolute;
padding: 2px 5px;
border-radius: 10px;
color: orange;
top: -30px;
left: 60px;
}
.tooltip:before {
content: '\25bc';
position: absolute;
top: 18px;
color: #000;
}
.txt:focus + .tooltip {
display: inline-block;
}
<div class="container">
TextBox : <input type="text" class="txt">
<div class="tooltip">This is TextBox</div>
</div>
Please use position absolute instead of fixed.
Apart from the above, be careful with your solution, because if you change the coordinates of the textbox itself, the tooltip will not move together.
A better solution would be to create a wrapper element, make it position relative, and use position absolute on the tooltip. This way, if you move the wrapper around, the tooltip will move with it.
I have a menu that is displayed on the location where the user clicks on the web page. This is how it works:
a hidden DIV with menu content is present on the bottom of the page
click event triggers a function
DIV is displayed by altering it's style (to trigger the hover CSS)
DIV is positioned on the mouse click location
DIV's display style is unset after a small fraction of time (0,5 seconds)
the user has the option to use the menu as long as he hovers over it
This works in Chrome/Opera, but not in Internet Explorer/Edge. There's a 1px (my guess, since I can't measure it) distance the user has to move the mouse to trigger the hover on Internet Explorer/Edge (within the 0,5 seconds time frame).
Of course, I can fix this problem by repositioning the menu 1px left/up, but the point of this question is to try to understand why is this happening.
This is the HTML stripped of unnecessary code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).click(function(e) {
menu = document.getElementById("m");
menu.style.display = 'block';
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
setTimeout(function(){ menu.style.display = ''; }, 500);
});
</script>
<style>
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
#m
{
display: none;
position: absolute;
z-index: 100;
background-color: white;
}
#m:hover
{
display: block;
}
#m ul
{
color: #1E90FF;
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid gray;
}
#m li
{
margin: 0;
padding: 5px 10px;
}
#m li:hover
{
color: white;
background-color: #1E90FF;
}
</style>
<body>
<div id="m">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</body>
</html>
This is a really strange problem which only affects Google Chrome.
If I have 299 rows in a drop down list, it keeps my custom CSS. However, the second I reach 300 rows all my styling is removed and seems to be set to a default by Google Chrome.
In the JSFiddle page, it has 300 rows, if you view the result, it will have default styling. But if you remove one row, my custom styling will be applied. Why is this?
JSFiddle: https://jsfiddle.net/s7opd7dm/
Simple drop down element:
#Html.DropDownListFor(m => m.SupplierID, new SelectList(Model.Suppliers, "SupplierID", "DisplayName"), "Select Supplier Name", new { #id = "SuppNameDD", #class = "GRDropDown", disabled = true })
I had the same problem. I found out that they disabled it at 300 options or more.
We intentionally disabled styling for 300+ options because of a
performance issue (crbug.com/500401).
Read about it here
Chrome Intentionally did disabled styling for 300+ options, so we can't reach the answer that way.
In short i would like to say that you should use any custom drop down.
As you are requesting for a solution to achieve, here's the fix
In that case i would prefer you to create a customized drop-down using other html elements like divs and list and take the selected list value. Here i am going to show a demonstration of how to create a customized div. The code has been tested in ASP.NET MVC5 C# and works fine. Post this demonstration here to promote this idea, as this might help anyone like you searching for what to do on cases like this.
in your some_view.cshtml add the following to include jquery and styles
<script src="#Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>
<!--<script src="#Url.Content("~/Scripts/myjquery.js")"></script> in case want this jquery to be external-->
<script>
function my_dd(el) {
this.dd = el;
this.initEvents();
}
my_dd.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function() {
var dd = new my_dd( $('#dd') );
$(document).click(function() {
$('.wrapping').removeClass('active');
});
});
/** on select take the value to hidden text field**/
$(document).ready(function()
{
$('ul.my_dd li').click(function(e)
{
var selected=$(this).text();
/**change label to selected**/
$('.label').text(selected);
$('#selected-value').val(selected);
});
});
</script>
<!--<link href="#Url.Content("~/Content/my.css")" rel="stylesheet" type="text/css" />
in case want the css to be external-->
</script>
<style>
*,*:after,*:before {
box-sizing: border-box;
}
.wrapping {
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px 15px;
cursor: pointer;
outline: none;
}
.wrapping:after {
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 1px solid red;
border-style: solid;
border-color: #366;
}
.wrapping .my_dd {
position: absolute;
top: 60%;
left: -45px;
right: 0px;
background: white;
transition: all 0.1s ease-out;
list-style: none;
opacity: 0;
pointer-events: none;
}
.wrapping .my_dd li a {
display: block;
text-decoration: none;
border: 1px solid;
padding: 10px;
transition: all 0.1s ease-out;
}
.wrapping .my_dd li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
.wrapping .my_dd li:hover a {
color: grey;
background-color: darkgrey;
max-height:300px;
}
.wrapping.active:after {
border-width: 0 6px 6px 6px;
}
.wrapping.active .my_dd {
opacity: 1;
pointer-events: auto;
height:300px;
overflow-y:scroll;
}
</style>
</style>
<div id="dd" class="wrapping">Test Drop Down
<ul class="my_dd">
<!-- use list or a foreach or for loop to push content to list
example
#foreach(var productId in Model.FailedProductIdsList)
{
<li>#Convert.ToString(productId);</li>
}-->
<li><i></i>Select 0</li>
...............
<li><i></i>Select 300+</li>
</ul>
</div>
<!-- #Html.TextBoxFor(c => c.Propertyname, new { #Value = "selected" })-->