I am building a web page for homework. I am trying to figure out how to make a child div appear whenever I hover over the parent div at the bottom, sort of like a dropdown menu. The thing is that the child div has a class and I want only the element that is hovered to show the child div from the parent div. More specifically, the parent div I am talking about is <div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();> and the child div I am talking about is <div class="dropdown-content">. I want to use Vanilla Javascript (preferred) or CSS (not preferred).
TLDR: How do I target only current hovered element from HTML/CSS class in Vanilla Javascript?
How do I do that?
I got this far:
HTML
<!--Lab 1-->
<!--Each individual box.-->
<div class="box">
<!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
<div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();">
<!--The div with an image in it. Top one inside the box div.-->
<div>
<a href="Lab_01/LB1_WeiJianZhen_DD.html">
<!--Get an image with 300px width by 200px height. Make it responsive.-->
<img src="../../../Visual Content/placeholder.jpg" alt="Under Contruction" class="imgGrids">
</a>
</div>
<!--The div that contains the heading or title of the lab.-->
<div class="txtBar">
<h3>Lab 1</h3>
</div>
<!--The div that drops down to explain the lab with some text.-->
<div class="dropdown-content">
<p>My first website ever made in an HTML file! Describes a bit about the process of making a very basic website like mine.</p>
</div>
<!--End of inside box div.-->
</div>
<!--End of box div.-->
</div>
CSS
/*Creates the styling of the dropdown box.*/
.dropdown-content {
display: none;
position: relative;
background-color: #62ff36;
box-shadow: 0px 8px 16px 0px rgba(56, 255, 42, 0.8);
padding: 12px 0px;
z-index: 1;
}
JavaScript
function showDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "block";
}
function hideDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "none";
}
The easiest, most performant and overall definitely best way to solve this problem clearly is using CSS.
.inside-box:hover .dropdown-content { display: block; }
If for whatever reason you insist go with Javascript (which I do explicitly not recommend), you are going to have to add 2 listeners to each .inside-box, one for mouseenter, the other for mouseleave:
document.querySelectorAll('.inside-box').forEach(insideBox => {
insideBox.addEventListener('mouseenter', () => insideBox.querySelector('.dropdown-content').style.display = 'block');
insideBox.addEventListener('mouseleave', () => insideBox.querySelector('.dropdown-content').style.display = 'none');
})
Using inline event listeners like you suggested is considered very bad practice, so don't try that.
Related
My question is related I think to jquery, angularjs and bootstrap.
I am rendering information that is coming from the backend and is presented on the front end in the form of several boxes. I am trying to get an "element selection effect" that when someone clicks on one or more of the boxes the entire box gets darker (or preferably blue with some level of transparency) and an ok-checkmark appears on it. The element is actually a bootstrap Well with some content inside.
I currently have an onClick event that colors the background, but it is not enough. Unlike an image, that can be entirely darkened when changing the background color, with a well (or any content box) it just colors the background and the content is still visible. I also want to add that green checked-mark icon inside the box when clicked, but I do not know how to add elements on the fly after onClick event.
Here is my relevant pieces of code (simplified objects, no backend):
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.collections = [
{text:'content collection1'},
{text:'content collection2'}];
$scope.selectBox = function(collection){
collection.isclicked =! collection.isclicked;
$("#well").click(function(){
if (collection.isclicked){
//$("div").append('<span class="glyphicon glyphicon-ok pull-right"></span>');
}
});
}
});
.well:hover{
cursor:pointer;
cursor:hand;
color: #555;
text-decoration: none;
background-color: #C0C0C0;
}
.well {
border-color:#8CC63F;
float:left;
margin-right: 20px;
}
.well-active {
background-color:#3399ff;
}
.well-active:hover {
background-color:#3399ff;
}
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<div>{{collection.text}}</div>
</div>
</div>
</div>
So as I mentioned, the way it works now is that the selected wells change their background color, but that's it. How do I darken/color the entire well, including the content, and how do I add an icon on top of that background (inside the well) after mouse-click?
You could do an ng-show/ng-hide in elements inside of the well div:
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<span ng-hide="collection.isClicked">{{collection.text}}</span>
<i ng-show="collection.isClicked" class="glyphicon glyphicon-ok"></i>
</div>
</div>
</div>
This will show the content if the collection is not checked, and a check mark if the collection is checked.
This question already has answers here:
How do I select an element based on the state of another element in the page with CSS?
(3 answers)
Closed 7 years ago.
I can't quite get my head around this. I have the following construct:
<div class="container">
for n = 0 to ...
Link n
endfor
for each link in ".container"
<div class="poptip"></div>
endfor
</div>
And an example could be:
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">...</div>
<div class="poptip">...</div>
</div>
Now the hurdle, I am trying to show the .poptip on hover on the anchor tag, and this obviously works fine if there is one link (which is usually the case). In any case where there's >1 link, then the last one will work. Current css (sass style) which doesn't quite work in >1 cases:
.producttooltip {
position: relative;
}
.producttooltip a:hover + div {
display: block;
}
I cannot change the structure of the html, it will always be container > all links followed by all poptips. I can however mark the poptips and anchor tags up with unique identifiers e.g. Link 1<div class="poptip" rel="identifier"></div>, but I can't quite figure out if I in css can create a general selector which goes (pseudo):
a:hover + div[rel=a.rel] {
display: block
}
So my question is, can I get this construct marked up in pure CSS, or do I have to use some JS trickery (which I can, but I would really prefer CSS). Hope one of you guys are more clever than me.
Edit: just gonna clarify - I cannot change the structure of the html. The neatest solution would obviously be to wrap each element with it's equivalent poptip, but my entire conundrum is the fact that I cannot do this.
In your case, you can do this way:
$('a').on('hover', function() {
$('.poptip').eq($(this).index()).show();
}, function() {
$('.poptip:visible').hide();
});
It is tough to do this with CSS alone. But even then, I have provided a CSS solution below. Do have a look if you wanna consider a CSS only solution.
You can do this via CSS itself. Although there are lot of plugins, lets do something like this. First, you need a hovering element, say in this case, a link.
Hover Me!
Next should be the tool tip. We can have a <span> for now and put it inside the link.
Hover Me!<span class="tooltip">Hello, World!</span>
Now comes the real CSS part.
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
Snippet
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
Hover Me!<span class="tooltip">Hello, World!</span>
This is just one of a pure CSS solution. You can see the working fiddle here.
However, there are a lot of plugins, which keep this concept as base and work for hover-cards and tool tips. Some good examples include:
jQuery UI Tooltip
Tipsy
HoverCard
40+ Tooltips Scripts With AJAX, JavaScript & CSS
jQuery solution
You can use mouseenter/mouseleave event in order to show up the desired elements
$('a').on('mouseenter', function() {
var i = $(this).index();
$('.poptip').eq(i).show();
}).on('mouseleave', function() {
$('.poptip').hide();
});
.poptip {
width:100%;
float:left;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">Some content related to link 2 retreived with ajax</div>
<div class="poptip">Some content related to link 3 retreived with ajax</div>
</div>
Using jquery this can be achieved easily, just need to get the index of the current anchor element & display the respective div present at the index location.
HTML CODE:
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">...</div>
<div class="poptip">...</div>
</div>
JS CODE:
$(function(){
$('a').on('hover',function(){
var ind = $('a').index(this);
$('.poptip').eq(ind).css('display','block');
});
});
Live Demo # JSFiddle
I want to create a simple website page that allows my users to flip through a few different sets of data (kind of like mini-pages) but without reloading the page. The data could all be preloaded or requested with Ajax for each selection.
I tried using Bootstrap to create Tabs, but the first screen would never disappear.
I'm not aware of any other way to do this, other than with complicated Javascript that sets visibility to invisible.
Are there any clean, convenient, HTML/CSS-only ways to go about this?
Below, are some prototype screenshots of what the page would look like, and how it changes with each sidebar selection.
You could do it without the use of JavaScript if you are willing to make the data sets change upon hovering the menu, instead of clicking it.
Here's a JSFiddle: http://jsfiddle.net/n8wF4/. It's quite ugly, but it works...
HTML:
<div class="menu">
<div class="menu-item-1">item 1
<div class="content data-set-1">Content 1</div>
</div>
<div class="menu-item-2">item 2
<div class="content data-set-2">Content 2</div>
</div>
<div class="menu-item-3">item 3
<div class="content data-set-3">Content 3</div>
</div>
</div>
CSS:
.menu {
position: relative;
}
.content {
display: none;
position: absolute;
right: 0;
top: 0;
}
.menu-item-1:hover .data-set-1,
.menu-item-2:hover .data-set-2,
.menu-item-3:hover .data-set-3 {
display: block;
}
no need to have complicated javascript.
Have a look at jquery ui tabs.
I believe you can't do the same thing in pure CSS. There are no click events in CSS.
I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.
I'm trying to get the following effect in the jQuery Mobile framework:
|-------------------------------------------------|
|[button1] HeaderText/Image [b1] [b2] [b3] |
|-------------------------------------------------|
Where [b1], [b2] and [b3] are small image buttons in the Header.
Is this even possible currently?
just simple like this
<div class="ui-btn-right">
</div>
I have had troubles with this in the past. Trick is, force all of your links to be data-role="button" and wrap said links in a container with class="ui-btn-[left/right]" (respectively) This takes care of the traditional header button positioning and markup.
<div data-role="header">
<div class="ui-btn-left">
Button1
</div>
<h1>HeaderText/Image</h1>
<div class="ui-btn-right">
B1
B2
B3
</div>
</div>
Seems as if it is possible, check out this link:
Grouped buttons on the jQuerymobile Framework website.
This is how i did it. Some of the styling may not be necessary as the class used on the parent div should be enough.
<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
Team Call
Logout
</div>
In order to use your own image buttons on the right side you'll need to either float or position a div to the right, then add your buttons.
Then you'll need to override the jQuery mobile styles for those specific buttons to prevent them from getting the rounded, gradient button style that's automatically added by the library.
#header {
float: right;
}
#header .ui-btn-up-b,
#header .ui-btn-hover-b,
#header .ui-btn-down-b
#header .ui-btn-active {
border: 0px;
background: none;
}