I have a set of multiple circles of different opacity, each circle should be clickable and when clicked, should come into focus and the clicked on will come in front of the others.
simple you will say...
My question is what to use CSS or Jquery and how to achieve it
Example:
.circles{}
.round{opacity: 0.4;;width:75px;height:75px;border-radius: 50%; position: relative;}
.circle1{background:#0f4977;top: 35px;left: 200px;z-index: 1;}
.circle2{background:#f41875;top: 0px;left: 250px;z-index: 2;}
.circle3{background:#6b259c;top: -50px;left: 205px;z-index: 3;}`
$(".round").click(function() { //on click of any circle
$(this).css("z-index", "99");
$(this).css("opacity", "1");
$(this).siblings().css("opacity", "0.5");
$(this).siblings().css("z-index", "5");
});
<div clas="circles">
<div class="round circle1"></div>
<div class="round circle2"></div>
<div class="round circle3"></div>
</div>
Fiddle: https://jsfiddle.net/cLqqfh4v/8/
How about something like...
$(".round").click(function() { //on click of any circle
$(this).css("z-index", "99"); //set this circle's z-index to 99, i.e. bringing it to the front
$(this).css("opacity", "1"); //Set its opacity to 1 (opaque)
//Reset all other circles:
$(this).siblings().css("opacity", "0.5");
$(this).siblings().css("z-index", "5");
});
When your HTML is:
<div class="round" id="circle1></div>
<div class="round" id="circle2></div>
<div class="round" id="circle3></div>
Or something similar; your circles just have to have the class circle
See JSFiddle: https://jsfiddle.net/jofish999/somad48j/1/
Edit
As mentioned by #Sai, a more efficient solution would be to have a CSS rule for the class .opaque. Then, instead of using jQuery to change the circle's CSS, you use addClass() to give it that class, then removeClass() to remove it again.
$(".round").click(function () { //on click of any circle
$(this).addClass("opaque");
$(this).siblings().removeClass("opaque");
Where your CSS is:
.opaque {opacity:1; z-index:99;}
Related
Not sure if this is possible but I'm trying to display a div if another div which doesn't share the same parent is hovered.
The html looks something like this:
<div class="test">
<div class="hover-me"><p>Hover</p></div>
</div>
// some other content here
<div class="hover-content">
<p>hovered content</p>
</div>
I've tried using
.test:hover + .hover-content {
display: block;
}
But I think this only works if there's no other content in-between? Any suggestions?
Use javascript to listen to the onmouseover event, or jquery to handle the hover event on one and change the display attribute of the other. Using jquery
<script>
$(document).ready(function () {
$(".hover-me").hover(function () {
$(".hover-content").show();
}, function() {
$(".hover-content").hide();
});
});
</script>
If you don't want to use jquery, change your html like so
<div class="test">
<div class="hover-me"
onmouseover="document.getElementById('hover-content').style.display = 'block';"
onmouseout="document.getElementById('hover-content').style.display = 'none';">
<p>Hover</p></div>
</div>
// some other content here
<div class="hover-content" id="hover-content">
<p>hovered content</p>
</div>
notice that I added an id attribute to the hover-content div.
Try this, i think it will help you :
<script>
$(document).ready(function () {
$( ".hover-me" ).mouseenter( function () {
$( ".hover-content" ).show();
}).mouseout(function () {
/*anything you want when mouse leaves the div*/
} );
});
</script>
So you want to display the .hover-content when you hover the test. You can try the following solution. If it does not work, you gotta use javascript to check for the mouseover event. Hope it helps!
.test:hover ~ .hover-content {
display: block;
}
I have added the library for Bootstrap and data-spy attribute where I want to make the div fix when I scroll the page down. But it doesn't work, I have almost tried everything, but not able to figure out the problem.
Is is something like the data-spy attribute doesn't work on class = "row" ?
Here's my code for HTML.
<div class="row">
<h4> HEADING </h4>
<h5>
<div class="row" data-spy="affix" data-offset-top="10">
dsds
Date : <input type="date" name="graph_date" id="graph_date">
</div>
<div class="row">
<div class="graph-hourly">
<div class="loader" id="chart_loader">
<p>Loading...</p>
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_hourly"></div>
</div>
</div>
</div>
and some css :
.affix {
top : 0;
width: 80%;
}
after searching for some solutions, I've added this also,
.affix-top {
width: 100%;
}
.affix-bottom {
position: absolute;
width: 100%;
}
but this solution also dosen't worked for me.
Not sure what the problem is in your case. I copied and pasted your code into a jsfiddle with the bootstrap library and the affix class did work. Though, it worked badly because it affixed the row right when you started scrolling.
Looks like Bootstrap doesn't have a way to set the offset to the current position of the element so I added the following javascript to make it work.
$('#affix-this').affix({
offset: {
top: $('#affix-this').offset().top
}
})
(#affix-this should be changed to the id of the row you want to affix.)
Note the $('#affix-this').offset().top. This makes sure the element gets affixed right when you reach the element's current position.
Second, I removed the html attributes that you had for the affixing.
<div class="row">
<h4> HEADING </h4>
<div class="row" id="affix-this">
dsds Date :
<input type="date" name="graph_date" id="graph_date">
</div>
<div class="row">
<div class="graph-hourly">
<div class="loader" id="chart_loader">
<p>Loading...</p>
</div>
<div id="chart_hourly"></div>
</div>
</div>
Notice the affix-this id was added to the row that you want to affix.
Here is a working JSFiddle with these changes so you can see it in action: https://jsfiddle.net/heraldo/6s4u26m3/4/
First of all delete top:0; from affix class because it will make a issue for you.
now you have two methods pick a one :
1
adding data-spy="affix" which is works fine for me
2
same result ass data-spy but you will need some styling after you complete your page
by adding a position Property for input tag
as ex. :
CSS:
sticky{
position:fixed;
}
and HTML :
<input type="date" name="graph_date" class="sticky" id="graph_date">
Update 1
this Jquery code can detect a scroll event so when user scroll down it will make the div tag sticky or "affix"
$(function() {
$(window).scroll(function() {
var aTop = "100";
if ($(this).scrollTop() >= aTop) {
$('#affix-this').css( "position", "fixed" );
$('#affix-this').css( "top", "0" );
$('#affix-this').css( "width", "100%" );
}
});
});
change the aTop variable with the height you want (in pixel) so when the user scroll down 100px the div become sticky
a JSfiddle example
Update 1.1
a bit smarter Jquery code do the same but get the height automatically from a another element this can be good if you format your page to something similar to this
$(function() {
$(window).scroll(function() {
var aTop = $('id').height();
if ($(this).scrollTop() >= aTop) {
$('#affix-this').css( "position", "fixed" );
$('#affix-this').css( "top", "0" );
$('#affix-this').css( "width", "100%" );
}
});
});
Make sure the element to which you're adding data-spy="affix has been created in the DOM before your Bootstrap scripts load. I ran into an issue where I was adding data-spy="affix" in my HTML, but it was wrapped up in a section that wasn't rendering, thanks to data-ng-if. My HTML was created after my Bootstrap had loaded, so the <div> I wanted to stick to the top of the screen never stayed in a fixed position. If you can, use data-ng-show, or something that merely hides HTML, rather than prevents it from being created on page load.
<div class="slide-background a" style="" data-bg="images/1new.jpg">
</div>
I want when hovering the div to change smoothly the data-bg photo
i tried to hover with css
div.slide-background.a:hover{;background-image: url("../images
/1newcolor.jpg") !important;}
but i want a smoothly change.
You can do that with jquery...
$( ".slide-background" ).hover(function() {
$(".slide-background").attr("data-bg", "some_other_img.jpg");
});
It's easy with jquery,
$(".slide-background").hover(function()
{
$(".slide-background").attr("data-bg", "url.jpg");
});
I want to hover on an element (an imagemap area, actually but I made it a simple div for this example) and create an animation on a different div element. Since they're not child or sibilings I had to use java and addclass but it's not working. It looks like the trigger element is not recognized and if I hover it nothing happens
<div class="testHover">
<p>Hover me to change color</p>
</div>
<div id="timeLine">
<div id="primaGuerraMondiale">
<h2>Content</h2>
</div>
</div>
css
#primaGuerraMondiale {
background: green;
}
.animated {
color:white;
}
javascript
$('.testHover').hover(function() {
$('#primaGuerraMondiale').addClass('animated');
}, function() {
$('#primaGuerraMondiale').removeClass('animated');
});
Here is the fiddle https://jsfiddle.net/elisapessa/yzLe803n/
You need jQuery 1.9.1 and above to make it work. The code is right.
In the left hand panel in the jsfiddle, there is a section called "Add Resources". Click this, then add the URL into the field and click the + button. This will add your resource (JS or CSS) to the page. After that you click on run and check it:
I have tabs comprised of the following, When I clicked on any of the divs, I need background colour change to blue and if I clicke on other div, the previous tabs colour needs to set to original and new clicked div colour to be blue and so on:
This is my html:
<div class="zoom_controls">
<a class="db" id="prof_cpu_d" href="#" data-chart="line" data-range="1m">Real Time</a>
<a class="db" id="prof_cpu_w"href="#" data-chart="line" data-range="3m">Weekly</a>
<a class="db" id="prof_cpu_m" href="#" data-chart="line" data-range="6m">Monthly</a>
</div>
I have this:
.zoom_controls a:active {
background-color: #a6d1ff;
}
it does not seem to be working
how would I do this in css?
You need to use Javascript/jQuery to toggle the class. You can't do this with pure CSS.
Modify CSS
.zoom_controls a.active {
background-color: #a6d1ff;
}
jQuery
$('.zoom_controls a').on('click', function(event){
event.preventDefault();
$('.zoom_controls a').removeClass('active'); //Remove color for all with class .zoom_controls
$(this).toggleClass('active'); //Apply bgcolor to clicked element
});
Codepen sketch
Update
If you are, for some reason, thinking about a:hover, then you do it like this in CSS.
.zoom_controls a:hover {
background-color: #a6d1ff;
}
Otherwise, if you are looking to target the 'active' state of the link, you are doing it correctly.
The :active state only applies when the anchor is active -- that is, when the user is clicking on it. When that click ends, so does the state. What you want can't be done with pure CSS.
CSS:
.zoom_controls a.active {
background-color: #a6d1ff;
}
jQuery:
$('.zoom_controls a').on('click', function(ev) {
ev.preventDefault();
$(this).addClass('active').siblings('.active').removeClass('active');
});
JSBin demo
You can use the JS library jquery to select the active tabs and assign the the background color. The nice bit with using jquery is it's compatibility with other browsers.
It does work, but it's not doing what you want. Because active is only a dynamic pseudo-class that determines the styling of an active element (in this case any link inside the div with class zoom_controls when it's being clicked).
You might need JavaScript for this job, that or an unnecessarily complex CSS 3 solution.