I´m trying to simplify my jquery so I don´t have to make it so long. I got 3 boxes and I want to be able to change the color of each box independently. But without the need to put in jquery for each box separately. (At the moment only .profile1 (box) changes color from the dropdown menu).
html
<div class="profile1"></div>
<div class="profile2"></div>
<div class="profile3"></div>
<div class="overlay"></div>
<div class="popup">
<select class="dropdown" id="cp">
<option id="red"> red </option>
<option id="yellow"> yellow </option>
<option id="blue"> blue </option>
</select>
<a class="close" onclick="hidePopup()" href="">CLOSE</a>
<input onclick="hidePopup()" type="submit" value="SUBMIT" id="submit" class="submit">
</div>
css
.profile1 {
margin-left: 1.7%;
margin-top: 6%;
height: 40%;
width: 18%;
background-color: #0D7BFF;
position: absolute;
z-index: -1;
border-radius: 2px;
}
.profile2 {
margin-left: 21.4%;
margin-top: 6%;
height: 40%;
width: 18%;
background-color: #0D7BFF;
position: absolute;
z-index: -1;
border-radius: 2px;
}
.profile3 {
margin-left: 41.1%;
margin-top: 6%;
height: 40%;
width: 18%;
background-color: #0D7BFF;
position: absolute;
z-index: -1;
border-radius: 2px;
}
.student-name {
color: #FDFDFD;
font-size: 1.2vw;
text-align: center;
margin-top: 10%;
}
.overlay {
top: 0%;
left: 0%;
width: 100%;
height: 100%;
position: absolute;
background-color: #555454;
opacity: 0.80;
z-index: 2;
}
.popup {
top: 20%;
left: 27.5%;
height: 17%;
width: 45%;
background-color: #FDFDFD;
position: absolute;
border-radius: 5px;
z-index: 3;
-webkit-box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 10px 3px rgba(50, 50, 50, 0.75);
}
#submit {
background: #0D7BFF;
border: none;
cursor: pointer;
color: #FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width: 50%;
right: 0%;
bottom: 0%;
top: 76.5%;
position: absolute;
border-radius: 0px 0px 5px 0px;
text-align: center;
}
#submit:hover {
background-color: #004598;
transition: all 0.3s ease-out;
}
.close {
background: #0D7BFF;
border: none;
cursor: pointer;
color: #FDFDFD;
font-size: 1.8vw;
font-family: Avenir Next;
width: 50%;
left: 0%;
bottom: 0%;
top: 76.5%;
position: absolute;
border-radius: 0px 0px 0px 5px;
text-decoration: none;
text-align: center;
}
.close:hover {
background-color: #004598;
transition: all 0.3s ease-out;
}
jquery
$(document).ready(function() {
$('.popup,.overlay').hide();
$(".profile1").click(function() {
$(".popup, .overlay").show(300);
});
});
$(document).mouseup(function(e) {
var popup = $(".popup");
if (!$('.popup').is(e.target) && !popup.is(e.target) && popup.has(e.target).length === 0) {
hidePopup();
}
});
function hidePopup() {
$(".popup, .overlay").hide(300).fadeOut();
}
$(document).ready(function() {
$(".submit").click(function() {
var element = document.getElementById("cp");
$(".profile1").css({
"background-color": element.options[element.selectedIndex].id
});
});
});
I appreciate all help
This is what I would do:
Add a variable var active;
Change this:
$(".profile1").click(function() {
$(".popup, .overlay").show(300);
});
to this:
$("[class*='profile']").click(function() {
$(".popup, .overlay").show(300);
active = $(this);
});
and change this:
$(".profile1").css({
to this:
active.css({
Here is the JSFiddle demo
Just call this method and give it the element and then it gets the value of the id which is as example red and saves it in a variable. Then you set the color of the element you gave the function at the call the value (which has to be a color):
function changeColor(this){
var val = this.attr('id');
this.css('background-color', val);
}
This method you can call in a foreach-loop.
$('.dropdown').children('option').each(function () {
changeColor(this);
});
Related
I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.
You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I created a jsfiddle showing a simple range slider, with a max range of 4.
What I'm trying to achieve is to animate the number in the output, so for example if you're currently at 1 and you choose 4, 1 will go down and fade out, while 4 will come from the top and fade in. On the other hand, if you choose a lower number, the opposite will happen.
Thanks ahead for your help!
jsfiddle: https://jsfiddle.net/hm0gxs54/12/
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="range-slider-wrap range-slider-lg">
<input class="range-slider ng-valid ng-dirty ng-touched" step="1" type="range" id="range-slider" min="1" max="4" data-tooltip-top="true" aria-valuenow="3" aria-valuemin="1" aria-valuemax="4">
<output class="range-slider-output num" id="range-slider-output" for="range-slider"></output>
</div>
</div>
</div>
</div>
</div>
CSS
.range-slider-output {
position: relative;
display: inline-block;
padding: 0.2em 0.75em 0.25em;
color: #fff;
text-align: center;
background: #666;
border-radius: 3px;
width: 100%;
left: calc(50%);
flex: 0 0 5%;
align-self: center;
margin: 0;
font-size: 28px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: -92px;
}
.range-slider-output::before {
position: absolute;
top: 50%;
left: 0;
content: "";
}
.range-slider-lg .range-slider-output::before {
top: 48px;
width: 0;
height: 0;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #666 transparent transparent transparent;
transition: all 0.7s ease-out;
}
.range-slider-wrap {
min-width: 100px;
}
input[type='range'] {
width: 100%;
cursor: pointer;
padding-top: 90px;
}
input[type='range'] {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
-webkit-appearance: none;
padding: 0 0.5rem;
}
input[type='range']::-moz-range-track {
width: 100%;
height: 5px;
background: #e6e5e5;
border: 1px solid #999;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
-webkit-appearance: none;
}
input[type='range']::-moz-range-thumb {
width: 28px;
height: 28px;
margin-top: -11px;
background: #999;
border: 1px solid #666;
border-radius: 50%;
}
JS
$(function() {
var slider = document.getElementById("range-slider");
var output = document.getElementById("range-slider-output");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
});
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>
So basically, I'm building an app in Meteor, and I have the left navbar in a position: fixed; and left : -300px and want to slide it over to left : 300px, but have no idea about how to animate a transition in Meteor (somewhat the slide transition in jquery). I understand the basic JQuery aspect of thing, but for some reason, it doesnt seem to work when I put it under the if Meteor.isClient aspect of the script. Keep in mind, Im am fairly new to Meteor, inclusive javascript code would be much appreciated.
My current code is as follows.
HTML
<body>
<div class='topmenu'>
<div class='menubutton'>
<span class="icon-bar1"></span>
<span class="icon-bar2"></span>
<span class="icon-bar3"></span>
<!--Needs to be fixed so that we only need to use one icon-bar class!!!-->
</div>
<div class='BanditDiv'>
<h1 class='BanditName'>Bandit</h1>
</div>
</div>
<div class='leftnav'>
<div class='sitenav'>
<a class='internalnav' href="#">Home</a>
<a class='internalnav' href="#">Musicians</a>
<a class='internalnav' href="#">Recording Space</a>
</div>
</div>
<div class='main'>
</div>
</body>
CSS
body{
margin: 0px 0px 0px 0px;
}
.navitem:hover{
background-color: #000066;
}
.main{
background-color: rgb(128,128,128);
height: 200vh;
width: 100vw;
margin: 0px 0px 0px 0px;
overflow-x:hidden;
}
.topmenu{
position: fixed;
z-index: 10;
top: 0px;
width: 100vw;
height: 50px;
background: white;
border-bottom: 2px lightgray solid;
}
.BanditDiv{
position: fixed;
top: 0px;
height: 50px;
width: 30vw;
margin-left: 35vw;
float: center;
}
.BanditName{
text-align: center;
font: 400 25px/1.3 'Berkshire Swash', Helvetica, sans-serif;
color: #000066;
}
.menubutton{
position: fixed;
top: 5px;
left: 5px;
height: 40px;
width: 40px;
border: 1px #cccccc solid;
background-color: white;
border-radius: 5px;
}
.menubutton:focus{
outline: 0;
}
.icon-bar1 {
position: fixed;
top: 15px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar2 {
position: fixed;
top: 25px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.icon-bar3 {
position: fixed;
top: 35px;
left: 10px;
margin: 0px 0px 0px 0px;
display: block;
width: 30px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.leftnav{
position: fixed;
top: 0px;
left: -300px;
width: 300px;
height: 100vh;
z-index: 9001;
background-color: yellow;
}
So this is what I came up with for the solution that seemed to work.
I created an angular module inside the Meteor.isClient and that seemed to work well.
if (Meteor.isClient) {
angular.module('sidebar',['angular-meteor']);
angular.module('sidebar').controller('SidebarCtrl', ['$scope',
function ($scope) {
function Menu (callback){
$('.menubutton').on('click', function (){
$('.leftnav').css({"box-shadow" : "2px 2px 2px #888888"});
$('.leftnav').animate({left : "0px"}, 500, function(){
$('.main').click(function() {
$('.leftnav').animate({left: "-302px"}, 500);
$('.leftnav').css({"box-shadow" : "none"});
});
$('.leftnav').click(function(event){
event.stopPropagation();
});
});
});
}
Menu();
}]);
}