jsfiddle
$(document).ready(function() {
$(".button").click(function(){
$(".circle-div").animate({width: "300px"});
});
});
I am trying to may the div expand in width 300px. When I wrote it, it only expands to the right, rather than the center from the p tag. What am I doing wrong?
It worked when I was messing around at W3schools and just centered the div and changed width to height, but it won't work in my workspace?
Need to add a container for it and center align the content inside, so that when it expands it seems like it is expanding from the center.
Check if this helps -
$(document).ready(function() {
$(".button").click(function(){
$(".circle-div").animate({width: "300px"});
});
});
p {
padding: 5px;
font-size: 25px;
color: white;
background-color: yellowgreen;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
position: fixed;
bottom: 15px;
left: 50%;
right: 50%;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}
p:hover {
color: #f0f;
}
.circle-div {
background-color: green;
border-radius: 50px;
display: inline-block;
height: 50px;
position: relative;
width: 50px;
}
.container {
bottom: 3.49%;
display: block;
position: absolute;
text-align: center;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="circle-div">
<p class="button">+</p>
</div>
</div>
Related
How can I place the tooltip centered and directly under the red circle without Javascript? Thank you in advance! :-)
Here is an image of my problem and the marked position where it should be:
My code currently looks like this:
HTML code:
<li>
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
</li>
CSS code:
#ovm-oup_under ul{
text-align: center;
list-style-type: none;
padding: 0;
}
#ovm-oup_under li{
padding: 20px;
margin: 15px;
display: inline-block;
}
.ovm-oup_under_item{
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0,0,0,.2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
top: 0%;
left: 50%;
z-index: 999;
}
One solution would be to combine absolute placement of the tooltip (relative to the parent div), with a translation transformation on the tooltip, which would achieve the required placement:
/* Extracted styling to top of style sheet to show the required additions */
.ovm-oup_tooltip span {
/* Offset the tooltip 50% from left side of parent (div) width
and 100% from top edge of parent height */
left: 50%;
top: 100%;
/* Pull the tooltip back 50% of it's own width, nudge the tool
tip downward 8px to account for arrow point */
transform: translate(-50%, 8px);
}
.ovm-oup_under_item {
/* Allow absolute placement of children (tooltip) */
position: relative;
}
/* Your existing styling starts here */
.ovm-oup_under_item {
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
/* Remove
top: 0%;
*/
left: 50%;
z-index: 999;
}
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
The idea here is to use absolute placement of the tooltip (ie the span), to position the top-left corner of that span at the horizontal center, and bottom edge of the parent div. The transform rule is then used to offset the tooltip span relative to it's own dimensions, to achieve the final center/baseline placement.
You can merge the additions above with your existing styling - I extracted the changes to the top of the stylesheet to clarify the additons that were made to achieve the desired result. Hope that helps!
I have seen this tendency on some websites now, where the default cursor is replaced with a new cursor – in many cases circles
These cursors are interactive – with interactive i mean when hovering an a-tag it changes size and color.
On this website: https://en.leviev-group.com/ you can see the effect on the cursor that I want.
I have tried to make a Pen, but it isn't working properly: https://codepen.io/anon/pen/VQwdBv?q=cursor&limit=all&type=type-pens
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
I would like the circle in the middle to be the cursor and the big circle around to follow the cursor with delay.
When hovering a-tags it should wrap around the a-tag, similar to the example on the website. If possible made with javascript and css
How is this possible?
You are almost good, simply make both element behave the same and by adding the transition on the small one you will make it slower and create the follow effect.
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
transition: all 1s linear;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
z-index: -1;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
Or change the transition if you want the bigger one to follow the small one:
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
transition: all 1s linear;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
z-index: -1;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
UPDATE
You may consider event on links tag if you want to change the cursor when hovering links.
Here is a simple example:
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
$('a').mouseover(function() {
$('#cursor').addClass('on-link');
})
$('a').mouseout(function() {
$('#cursor').removeClass('on-link');
})
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
transition: all 1s linear;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
z-index: -1;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
#cursor.on-link #circle-big {
border: 2px solid blue;
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
I have seen this tendency on some websites now, where the default cursor is replaced with a new cursor – in many cases circles
These cursors are interactive – with interactive i mean when hovering an a-tag it changes size and color.
On this website: https://en.leviev-group.com/ you can see the effect on the cursor that I want.
I have tried to make a Pen, but it isn't working properly: https://codepen.io/anon/pen/VQwdBv?q=cursor&limit=all&type=type-pens
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
I would like the circle in the middle to be the cursor and the big circle around to follow the cursor with delay.
When hovering a-tags it should wrap around the a-tag, similar to the example on the website. If possible made with javascript and css
How is this possible?
You are almost good, simply make both element behave the same and by adding the transition on the small one you will make it slower and create the follow effect.
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
transition: all 1s linear;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
z-index: -1;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
Or change the transition if you want the bigger one to follow the small one:
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
transition: all 1s linear;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
z-index: -1;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
UPDATE
You may consider event on links tag if you want to change the cursor when hovering links.
Here is a simple example:
$('body').mouseover(function() {
$(this).css({
cursor: 'none'
});
});
$(document).on('mousemove', function(e) {
$('#circle-big').css({
left: e.pageX,
top: e.pageY
});
$('#circle').css({
left: e.pageX,
top: e.pageY
});
});
$('a').mouseover(function() {
$('#cursor').addClass('on-link');
})
$('a').mouseout(function() {
$('#cursor').removeClass('on-link');
})
#circle-big {
display: block;
position: absolute;
margin-top: -30px;
margin-left: -30px;
transition: all 1s linear;
width: 60px;
height: 60px;
z-index: -1;
text-align: center;
border: 2px solid red;
border-radius: 50%;
}
#circle {
display: block;
position: absolute;
margin: auto;
width: 15px;
height: 15px;
margin-top: -7.5px;
margin-left: -7.5px;
background-color: rgba(255, 0, 0, 0.5);
border-radius: 50%;
z-index: -1;
box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 1);
}
#cursor.on-link #circle-big {
border: 2px solid blue;
}
a {
font-size: 26px;
text-align: center;
margin: 100px auto;
display: block;
}
a:hover {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor">
<div id="circle-big"></div>
<div id="circle"></div>
</div>
<a>link</a>
I have apply opacity using 'rgba' on parent div and i don't want to inherit this effect on child div.. How can i restrict rgba style from child element...
i have posted images as well for better assistance.
'http://imgur.com/a/YxipO' = (actual image of my code)
'http://imgur.com/a/7ltDa' = (what i want to do using css or js)
.banner-inner {
background-color: rgba(255,255,255,0.2);
padding: 3%;}
.logo-circle {
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;}
You can use a box shadow, like this
.content {
height: 200px;
width: 300px;
position: relative;
background: url(http://lorempizza.com/500/350/);
background-size: cover;
}
.logo-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
border: 7px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
/* background: rgba(0,0,0,0.5); uncomment if you want a semi transparent
opacity inside circle
*/
}
<div class="content">
<div class="logo-circle"></div>
</div>
You may consider following example approach:
.content {
height: 200px;
width: 200px;
position: relative;
}
.banner-inner {
background-color: rgba(0, 0, 0, 0.2);
padding: 3%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.logo-circle {
width: 1em;
border: 7px solid #fff;
border-radius: 50%;
padding: 1em;
z-index: 2;
height: 1em;
position: absolute;
top: 50%;
margin-top: -1.5em;
left: 50%;
margin-left: -1.5em;
}
<div class="content">
<div class="banner-inner"></div>
<div class="logo-circle"></div>
</div>
For background in circle use RGBA
.logo-circle {
background: rgba(0, 0, 0, 0.2);
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;
}
You could use the same picture (as seen in the background) as background in .logo-circle. And set the position of the image like this: background-position: center;
or:
Use a wrapper div for .logo-circle with the same size of the image and set overflow: hidden;. For .logo-circle set a very big shadow, like box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2);
i'm creating a toggle button with jquery. I've watched a tutorial from youtube (lynda.com) on how to create toggle button with jquery. I tried copying the code but the content under "p tag" doesn't show up. it's working perfectly on the tutorial. i'm not good in javascript. maybe you could see what i missed or maybe libraries idk. here's my code. thank you in advance.
HTML:
<div id="toggle">
<div id="poptext"> toggle </div>
<div id="box">
<p> hello</p>
</div>
</div>
CSS:
#toggle {
position: fixed;
bottom: 0px;
left: 50%;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
margin-left: -120px;
}
#box {
margin: 0 auto;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 19px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
}
#box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
#poptext {
width: 50px;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
#poptext.highlight {
background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8);
}
JAVASCRIPT:
<script>
window.jQuery || document.write('script src=\'jquery.min.js\'></script>');
$(document).ready(function () {
$('#poptext').click(function () {
$('#poptext').toggleClass('#highlight');
$('#box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
});
</script>
There are 2 issues here, 1 appending script tag as given won't work, you need to split it, second you need to wait for the script to load to execute your code. You can use the window load event to do that
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></' + 'script>');
window.addEventListener('load', function() {
$('#poptext').click(function() {
$('#poptext').toggleClass('#highlight');
$('#box').animate({
height: 'toggle',
opacity: 'toggle',
width: 'toggle'
}, 500);
});
})
#toggle {
position: fixed;
bottom: 0px;
left: 50%;
width: 240px;
margin: 0 auto;
margin-bottom: 10px;
margin-left: -120px;
}
#box {
margin: 0 auto;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 19px;
text-shadow: 0 1px 2px #000;
background-color: #644d52;
display: none;
opacity: .9;
}
#box p {
margin: 0;
padding: 5px 20px 15px 20px;
text-align: left;
color: #FFF;
}
#poptext {
width: 50px;
height: 18px;
font-size: 14px;
text-align: left;
padding-left: 23px;
overflow: hidden;
cursor: pointer;
margin: 0 auto;
border-radius: 10px;
}
#poptext.highlight {
background: url("images/blue.jpg") no-repeat 5px 18px rgba(255, 128, 0, 0.8);
}
<div id="toggle">
<div id="poptext">toggle</div>
<div id="box">
<p>hello</p>
</div>
</div>