I have an element set to visibility:hidden and i need it to change to visible on hover, i tried this with javascript with no luck
HTML
<div class="options">
<div id="option-1" onmouseover="dis()"></div>
</div>
</div>
<div id="pic-1"></div>
CSS
#option-1{
width:100px;
height:20px;
background:#fff;
position:relative;
z-index:999;
top:0;left:0;
}
#pic-1{
width:100%;
height:100%;
position:absolute;
z-index:99;
background:#f0f;
visibility:hidden;
}
Javascript
function dis(){
document.getElementById("pic-1").style.visibility = "visible";
}
html:
<div class="options">
<div id="option-1" onmouseover="showx();" onmouseout="hidex();"></div>
</div>
</div>
<div id="pic-1"></div>
css:
#option-1{
width:100px;
height:100px;
background-color:red;
cursor: pointer;
}
#pic-1{
width:100%;
height:100%;
position:absolute;
z-index:99;
background:#f0f;
visibility:hidden;
}
js
function showx(){
document.getElementById("pic-1").style.visibility = "visible";
}
function hidex(){
document.getElementById("pic-1").style.visibility = "hidden";
}
codepen link: http://codepen.io/anon/pen/bNrdrN
Related
I want to make this image( [1]: https://i.stack.imgur.com/avuBI.png) with css but my problem is middle part help me with that part
This is my code:
body{
background:#09042A;
}
#left-circle,#middle,#right-circle{
position:absolute;
}
#left-circle{
top:75px;
left:75px;
height:150px;
width:150px;
border-radius:50%;
background:#7B3F61;
z-index:1;
}
#right-circle{
top:75px;
right:75px;
height:150px;
width:150px;
border-radius:50%;
background:#E78481;
z-index:1;
}
#middle{
top:95px;
left:175px;
height:110px;
width:50px;
border-radius:50%;
background:#09042A;
z-index:2;
}
<div id="left-circle"></div>
<div id="left-circle"></div>
<div id="middle"></div>
<div id="right-circle"></div>
My current situation is like this picture:https://i.stack.imgur.com/uXo1j.png
I appreciate your help
You can add middle div and right-circle and set proper css for it, like below example:
body{
background:#09042A;
}
#left-circle,#middle,#right-circle{
position:absolute;
}
#left-circle{
top:75px;
left:75px;
height:150px;
width:150px;
border-radius:50%;
background:#7B3F61;
z-index:1;
}
#right-circle{
top:75px;
left:175px;
height:150px;
width:150px;
border-radius:50%;
background:#E78481;
z-index:1;
overflow: hidden;
}
#middle{
top:0;
left:-99px;
height:150px;
width:150px;
border-radius:50%;
background:#09042A;
z-index:2;
}
<div id="left-circle"></div>
<div id="right-circle">
<div id="middle"></div>
</div>
for this challenge, you can insert a separate oval for the middle part.
<html>
<head>
<style>
body{
background-color:#09042A;
display:flex;
justify-content:center;
align-items:center;
}
.l-circle{
width:150px;
height:150px;
background-color:#7B3F61;
border-radius:100%;
position:relative;
left:25px;
}
.r-circle{
width:150px;
height:150px;
background-color:#E78481;
border-radius:100%;
position:relative;
right:25px;
}
.m-circle{
width:85px;
height:80px;
background-color:#09042A;
border-radius:0 100px 0 100px;
position:absolute;
transform:rotate(48deg);
left:223px;
}
</style>
</head>
<body>
<div class="l-circle">
</div>
<div class="r-circle">
</div>
<div class="m-circle">
</div>
</body>
</html>
you can make a separate oval for the middle
You have draw that in the middle with two elements like two cutted circles wich are put together. Its not possible with one element but maybe
mix-blend-mode
will help you?
<div id="left-circle"></div>
<div id="left-circle"></div>
<div id="middle"></div>
<div id="right-circle"></div>
<style>body{background:#09042A;}
#left-circle,#middle,#right-circle{
position:absolute;
}
#left-circle{
top:75px;
left:75px;
height:150px;
width:150px;
border-radius:50%;
background:#7B3F61;
z-index:1;
}
#right-circle{
top:75px;
left: 150px;
height:150px;
width:150px;
border-radius:50%;
background:#E78481;
z-index:1;
mix-blend-mode: screen;
}
</style>
Hi everyone i have one question about jquery textcomplete.
I think this is easy but i don't know how can i do that.
I created this DEMO without jquery
So what is my question. I want when i write in textarea open parenthesis ( then .textBox div automatically open.
How can i do that anyone can tell me?
<div class="container">
<div class="textarea_wrap">
<textarea id="textarea" class="text"></textarea>
<div class="tagBox"></div>
</div>
</div>
CSS
.container{
width:300px;
height:300px;
margin:0px auto;
margin-top:30px;
}
.textarea_wrap{
width:100%;
box-sizing:border-box;
position:relative;
}
.text{
width:100%;
height:100px;
box-sizing:border-box;
outline:none;
border:1px solid #999999;
}
.tagBox{
width:300px;
height:100px;
background-color:red;
position:absolute;
top:100px;
display:none;
}
You can do something like this.
UPDATED
$(document).ready(function(){$('#textarea').keyup(function(){
if(($('#textarea').val() =="(" || $('#textarea').val().indexOf("(")>0) && $('#textarea').val().lastIndexOf("(") == $('#textarea').val().length-1 ){
$('.tagBox').show();
}else{
$('.tagBox').hide();
}
});
});
.container{
width:300px;
height:300px;
margin:0px auto;
margin-top:30px;
}
.textarea_wrap{
width:100%;
box-sizing:border-box;
position:relative;
}
.text{
width:100%;
height:100px;
box-sizing:border-box;
outline:none;
border:1px solid #999999;
}
.tagBox{
width:300px;
height:100px;
background-color:red;
position:absolute;
top:100px;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="textarea_wrap">
<textarea id="textarea" class="text"></textarea>
<div class="tagBox"></div>
</div>
</div>
See the Working Fiddle Using regex instead of several conditions :
JS :
$(function(){
$('#textarea').keyup(function(){
if($(this).val().match(/([(]$)/g)){
$('.tagBox').show();
}else{
$('.tagBox').hide();
}
});
})
Here's the jfiddle http://jsfiddle.net/pq5ckkcg/4/. I basically need the whole window and div to scroll together no matter where the mouse is. How would I accomplish this?
<div id="bottomwrap">
<div id="element"></div>
<div id="element"></div>
<div id="element"></div>
</div>
#bottomwrap {
position:fixed;
top:45px;
right:0;
width:80%;
overflow-y:scroll;
bottom:0;
background-color:#666;
}
#element {
float:left;
width:200px;
height:300px;
background-color:#000;
margin:20px;
}
Your parent div needs to be relative positioned:
#bottomwrap {
position:relative;
margin-top:45px;
float: right;
width:80%;
overflow-y:scroll;
bottom:0;
background-color:#666;
}
http://jsfiddle.net/pq5ckkcg/3/
I am attempting to nest some divs. Each div is a unit which contains a right div and a left div. The left div can contain more units or single non-child units. Basic tree structure. However, I can't seem to get the css to work for what I'm going for.
I've created a js fiddle for it, listed below. The code is also below. I've also included a picture of what I'm going for. Any help is appreciated. I am open to jquery/javascript solutions.
JSFiddle
http://jsfiddle.net/atsFA/
HTML
<div id="main">
<div class="inmain">
<div class="inleft">
<div class="inthing">
Thing THing Thing X
</div>
<div class="inmain">
<div class="inleft">
<div class="inthing">
thing2 thing2 thing2 X
</div>
</div>
<div class="inright">
R<br/>
I<br/>
G<br/>
H<br/>
T<br/>
2
</div>
</div>
</div>
<div class="inright">
R<br/>
I<br/>
G<br/>
H<br/>
T<br/>
1
</div>
</div>
</div>
CSS
#main{
width:600px;
height:600px;
background-color:grey;
position:relative;
}
.inmain{
width:100%;
border:2px solid black;
position:relative;
height:100%;
}
.inleft{
background-color:blue;
position:relative;
width:100%;
margin-right:20px;
height:100%;
}
.inright{
background-color:green;
position:absolute;
width:20px;
right:0px;
top:0px;
}
Image for Reference
I have used nested classes and nth-child or nth-of-type basing on your html structure.
Bear in mind I have used padding-bottom: 22px to take into account of your 2px border.
You can try:
#main{
width:600px;
height:600px;
position:relative;
}
.inmain{
width:100%;
position:relative;
height:100%;
}
.inmain:nth-of-type(2){
border:2px solid black;
position:relative;
height:100%;
width:96%;
}
.inmain:nth-child(1) .inleft{
background:white;
position:relative;
width:100%;
margin-right:20px;
height:100%;
padding-bottom:22px;
}
.inmain:nth-child(2) .inleft{
background:blue;
position:relative;
width:100%;
margin-right:20px;
height:100%;
padding-bottom:0;
}
.inmain .inleft .inmain .inright{
background-color:#00FF00;
position:absolute;
width:20px;
right:0px;
top:0px;
height:100%;
padding-bottom:0;
}
.inmain .inright{
background-color:#00FF00;
position:absolute;
width:20px;
right:0px;
top:0px;
height:100%;
padding-bottom:22px;
}
Check this DEMO: http://jsfiddle.net/atsFA/12/
Using the below JQuery method with the css worked. The 22px less on the width is to account for a scroll bar, if one is used.
function setConstructSizes(element) {
//Set split group heights
element.find(".inthing").each(function () {
var hR = $(this).parent().parent().children(".inright").first().height();
if (hR > $(this).height()) {
$(this).height(hR);
}
});
//Set width of all inner lefts
element.find(".inleft").each(function () {
var p = $(this).parent();
var w = p.width();
$(this).width(w - 22);
});
//Set height of all inner rights
element.find(".inright").each(function () {
$(this).height($(this).parent().height());
});
}
.inmain
{
position:relative;
width:100%;
border-top:1px solid black;
border-bottom:1px solid black;
text-align:left;
}
.inleft
{
position:relative;
}
.inright
{
text-align:center;
border-left:1px solid black;
border-right:1px solid black;
width:20px;
position:absolute;
right:0px;
top:0px;
}
The following HTML makes a pretty clean foundation for a 200px wide, 30px high editable combobox that can be used with angular binding or some other JavaScript data-binding. However, I want the outer-most div to be 100% wide, and the 180px wide div to use padding instead of an explicit size. However, padding always seems to be ignored. Does anyone know why this is, and if there are any good work-arounds? (preferably CSS/HTML)
<style>
.comboboxOuterDiv {
padding:0px;
margin:0px;
border:0px;
height:30px;
width:200px;
position:relative;
}
.comboboxSelectDiv {
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
z-index:0;
}
.comboboxSelect {
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
}
.comboboxTextDiv {
height:100%;
width:180px;
position:absolute;
top:0px;
left:0px;
z-index:1;
}
.comboboxText {
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
}
</style>
<div class="comboboxOuterDiv">
<div class="comboboxSelectDiv">
<select class="comboboxSelect">
<option value="a_value">A Value</option>
</select>
</div>
<div class="comboboxTextDiv">
<input class="comboboxText" type="text"/>
</div>
</div>
Here's a working example for anyone interested:
<style>
.comboboxOuterDiv {
padding:0px;
margin:0px;
border:0px;
height:30px;
width:100%;
position:relative;
overflow:hidden;
}
.comboboxSelectDiv {
height:100%;
width:100%;
position:relative;
top:0px;
left:0px;
z-index:0;
}
.comboboxSelect {
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
}
.comboboxTextDiv {
display:block;
height:100%;
width:auto;
position:absolute;
top:0px;
left:0px;
right:20px;
z-index:1;
}
.comboboxText {
height:100%;
width:100%;
position:absolute;
top:0px;
left:0px;
}
</style>
<div class="comboboxOuterDiv">
<div class="comboboxSelectDiv">
<select class="comboboxSelect">
<option value="a_value">A Value</option>
</select>
</div>
<div class="comboboxTextDiv">
<input class="comboboxText" type="text"/>
</div>
</div>
i changed your code!
probably it is your goal!! check it and tell me about that!
Demo on jsfiddle
i changed height of comboboxText class to 80%
and
width of comboboxTextDiv class to a non percentage value , such as auto