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.
There is a code like that(simplified):
<style>
.contentblock{
background-color:green;
}
.thereisaproblem{
background-image:url(image.png);
background-attachment:fixed;
}
.fix{
position:fixed; /* text is centred too if thats important*/
}
</style>
<body>
<div class="thereisaproblem" id="id1">
<div class="fix"> Fixed text </div>
</div>
<div class="contentblock">
Website content 1
</div>
<div class="thereisaproblem" id="id3">
<div class="fix"> Another fixed text </div>
</div>
<div class="contentblock">
Website content 2
</div>
</body>
I need "Fixed text" to be visible only in a div with id 1, and "Another fixed text" to be visible only in a div with id 3".
When I tried to do it simply by position:fixed; text overlapped in both divs. Using z-index can only prevent 3 from being visible in 1 and vice versa. Always one of texts can be visible in the wrong div. Is there any solution to make fixed like effect but with text visible only in one div? It would be best to use just html/css, but if jscript/jquery is needed then it's ok.
there is link to jsfiddle
Basicly, if you check the jsfiddle, I want other text to be visible in the place of the first one when you scroll down to another div. You can ignore the problem of fixed text being on top of solid blue divs.
Now I understand.
CSS SOLUTION
.thereisaproblem{
position:relative;
}
.fixed{
position:absolute; // FIXED IS RELATIVE to window
// ABSOLUTE is relative to first positioned parent
}
JAVASCRIPT SOLUTION
I'll post with jQuery but it's not necesssary, it can be done just as fine with simple good old javascript.
All the code does is if the user has scrolled 100px from the top then it hides whatever div has the class top (in your case is what you had with #1), and shows the div with class bottom. Otherwise, it does the opposite. You'd have to see what's the best distance for you to use to satisfy your purpose.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 100) {
$('.top').hide();
$('.bottom').show();
}
else {
$('.bottom').hide();
$('.top').show();
}
});
In regards to CSS:
.contentblock{
position:relative;
z-index:2;
}
.fixed{
position:fixed;
z-index:0:
}
.bottom{
display:none;
}
Notice how initially the div (third div) is in display none so that only the first div is visible.
<div class="thereisaproblem top" >
<div class="fixed">
Fixed text visible in first div
</div>
</div>
<div class="contentblock">
Website content
</div>
<div class="thereisaproblem bottom">
<div class="fixed">
Fixed text visivle in third div
</div>
</div>
<div class="contentblock">Webs content 2</div>
Without defining actual positions for your fixed text to go, it will always default to top: 0; left: 0; of the next parent to have a position: relative;. Defining position will fix your overlapping issue, however, the functionality you are asking for to have text be input in certain divs depending on ID will require javascript/jquery, or even PHP.
I want to achieve a navbar that is first stickied to the bottom of the page. No matter what height the window is, it will stick on the bottom - then I want it to be stickied on top upon scrolling.
I am able to achieve that through a jQuery library, Sticky-Kit http://leafo.net/sticky-kit/. However, all my other elements are overlapped by the navbar. I have changed the z-index of my other elements, that works but now the navbar is overlapped. Same problem, different element. Plus, it doesn't look nice as my content looks like as it goes on the navbar rather than underneath it.
The code on jsfiddle will help you get a picture of what I'm trying to achieve:
http://jsfiddle.net/u6aNX/
In the jsfiddle link above, it does not fully replicate my project but it does replicate the problem. The navbar height increase allowing other elements to be overlapped. Although on my project it does show that it increase but when I check on Chrome Dev Tools, I can see that the height of it is the same as the window.
Extra info:
I am using Bootstrap. .navbar is from Bootstrap
Code:
HTML:
<div class="navbar navbar-bottom" id="sticker">
<div class="container">
<a class="brand" href="https://twitter.com/duaneadam" id="duane-brand">#duaneadam</a>
<ul class="over-nav nav">
<li>Home</li>
<li>About</li>
</ul>
</div> <!-- /container -->
</div> <!-- /navbar /navbar-bottom -->
<div>
<h2>Hello World!</h2>
<p>
Lorem ipsums here to achieve scrolling. Check jsfiddle link
</p>
</div>
CSS: (Custom, overriding Bootstrap)
.navbar-bottom {
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin: 0px;
}
.navbar {
background-color: #ccff22;
}
JavaScript/jQuery:
/*
Sticky-kit v1.0.1 | WTFPL | Leaf Corcoran 2013 | http://leafo.net
*/
(function(){var g,t;g=this.jQuery;t=g(window);g.fn.stick_in_parent=function(d){var u,k,e,r,B,h,C;null==d&&(d={});r=d.sticky_class;u=d.inner_scrolling;e=d.parent;k=d.offset_top;null==k&&(k=0);null==e&&(e=void 0);null==u&&(u=!0);null==r&&(r="is_stuck");B=function(a,d,h,v,y,l){var p,s,m,w,b,f,z,A,q,x;f=a.parent();null!=e&&(f=f.closest(e));if(!f.length)throw"failed to find stick parent";z=function(){var c,b;c=parseInt(f.css("border-top-width"),10);b=parseInt(f.css("padding-top"),10);d=parseInt(f.css("padding-bottom"),
10);h=f.offset().top+c+b;v=f.height();c=a.is(".is_stuck")?q:a;y=c.offset().top-parseInt(c.css("margin-top"),10)-k;return l=c.outerHeight(!0)};z();if(l!==v)return m=a.css("float"),q=g("<div />").css({width:a.outerWidth(!0),height:l,display:a.css("display"),"vertical-align":a.css("vertical-align"),float:m}),p=s=!1,w=void 0,b=k,A=!1,x=function(){var c,g,n,e;n=t.scrollTop();null!=w&&(g=n-w);w=n;s?(e=n+l+b>v+h,p&&!e&&(p=!1,a.css({position:"fixed",bottom:"",top:b}).trigger("sticky_kit:unbottom")),n<y&&
(s=!1,b=k,"left"!==m&&"right"!==m||a.insertAfter(q),q.detach(),c={position:""},A&&(c.width=""),a.css(c).removeClass(r).trigger("sticky_kit:unstick")),u&&(c=t.height(),l>c&&!p&&(b-=g,b=Math.max(c-l,b),b=Math.min(k,b),a.css({top:b+"px"})))):n>y&&(s=!0,c={position:"fixed",top:b},"none"===m&&"block"===a.css("display")&&(c.width=a.width()+"px",A=!0),a.css(c).addClass(r).after(q),"left"!==m&&"right"!==m||q.append(a),a.trigger("sticky_kit:stick"));if(s&&(null==e&&(e=n+l+b>v+h),!p&&e))return p=!0,"static"===
f.css("position")&&f.css({position:"relative"}),a.css({position:"absolute",bottom:d,top:""}).trigger("sticky_kit:bottom")},t.on("scroll",x),setTimeout(x,0),g(document.body).on("sticky_kit:recalc",function(){z();return x()})};h=0;for(C=this.length;h<C;h++)d=this[h],B(g(d));return this}}).call(this);
$(document).ready(function() {
$("#sticker").stick_in_parent();
});
Your problem is position:absolute, and bottom:0, after you navigation stuck to the top (sticky kit adds style="top:0") and it gets stretched to the bottom of the page.
just add this function:
$("#sticker").stick_in_parent()
.on("sticky_kit:stick", function(e) {
$(".navbar").removeClass("navbar-bottom");
})
which does something when element "is sticky"
opposite to that one is:
.on("sticky_kit:unstick", function(e) {
//do something when "not sticky"
});
http://jsfiddle.net/u6aNX/2/
If you want your navbar to goes back to "onload" position when you scroll up
.on("sticky_kit:unstick", function(e) {
var top_bar = document.getElementById ("sticker");
top_bar.style.top = "";
$(".navbar").addClass("navbar-bottom");
});
http://jsfiddle.net/u6aNX/3/
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 am trying to move everything contained within the div id "tile", to the center of the web browser. By default the CSS is undefined and it appears on the left side of the browser. What I would like to do is move the entire div to the center using javascript when the button "move" is clicked.
The html is shown directly below, and the attempted (but not working) javascript is shown below that.
html
<div id="tile">
<div class="menu">
<ul>
<li> Vis </li>
</ul>
</div>
<div id="tabcontent4">Some generic content</div>
<button onclick="move();" type="button">Move</button>
</div>
</div>
javascript
document.getElementsById("tile").style.align='center';
EDIT: How would I move the div to a specific location?
There is no "align" property in CSS. The closest is text-align, but you probably want to use the CSS declaration margin: 0 auto, which will move the whole <div> to the center of the page. So you want:
document.getElementById("tile").style.margin="0 auto";
Make sure that tile has a specified width.
You can do this with just CSS:
<div id="tile" style='margin:0 auto;width:300px'>
...
</div>
Or, put it in a container, and center its content:
<div id='container' style='text-align:center'>
<div id='tile' style='width:300px'>
...
</div>
</div>
Of course, non-inline styles are preferred.
Nice username, BTW.
// EDIT
To place the div in a specific location with javascript:
document.getElementById('tile').style.position = "absolute";
document.getElementById('tile').style.left = "100px";
document.getElementById('tile').style.top = "100px";
It must have a position defined, usually absolute or relative.
Once again, this can - and usually should - be done with CSS:
#tile { position:absolute; left:100px; top:100px }