Javascript/Jquery hiding all h2 on mouseout - javascript

How can I hide all the h2 content in a page when mouse is not over that area, and only show on mouseover/hover in javascript or CSS

$(".redsquarecss")
.hover(function() {
$(".headers").show();
},
function() {
$(".headers").hide()
}
);
div.redsquarecss {
height: 150px;
width: 150px;
background-color: #FF0000;
}
div.headers {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="redsquarecss" title="Square 1"></div>
<div class="headers">
<h2>This is heading 2</h2>
<h2>This is heading 2</h2>
<h2>This is heading 2</h2>
</div>
https://jsfiddle.net/0r59so8r/1/

Just hide all h2 to elements on start and show it on hover. You will need a trigger for the hover event, you mentioned it as "that area".
There are several approaches to achieve this:
set the css display property to none h2 {display:none}
set html hidden property to true <h2 hidden></h2>
or even css opacity to 0 h2 {opacity:0}(won't work using jquery show())
or trigger it via jquery on startup (more like dirty solution) $('h2').hide()
The jquery methods you are searching for are show() and hide(), you can also play around with animations using slideToggle() functionality.
Have a look at:
https://jsfiddle.net/5caeLcn0/1/

Related

How to target only current hovered element in Vanilla Javascript

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.

Advanced sibling selector [duplicate]

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

Two scrollbar using the same css

I'm using custom scrollbar, add one scrollbar is very easy, but if I want to add second they twice use one mCustomScrollbar.css I don't know how to change that second div. I was looking on code on demo custom scrollbar but this just fail.
JQUERY
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
});
})(jQuery);
HTML
<link href="scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<div class="suwak"> content with first scrollbar </div>
<div class="suwak2"> content with second scrollbar </div>
Some simply CSS
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}
Just add another class on div with class="suwak", this will run your scrollbar and your second class will help override your first class. In css you are saying, if something has both classes, use new style. In css your selector would be .suwak.suwak2, no space between classes in css.
<div class="suwak"> content with first scrollbar </div>
<div class="suwak suwak2"> content with second scrollbar </div>
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}
.suwak.suwak2 {
/*new stile*/
}
Why don't you use second class as well? is it something that you don't know how many DIVs will be there to have same scrollbar?
If it is limited to 2 only, then try
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
$(".suwak2").mCustomScrollbar();
});
})(jQuery);
Or you can mention same class for second DIV as well. I have suggested this as per my observation of the code you posted.

JavaScript and CSS: display a div over an element on mouseover

I want to display a div over an element (especially a link) when hovered, like in Facebook, when you hover a profile picture.
I know this could be done with JavaScript and CSS but have no exact idea.
Facebook's approach is to simply use CSS, which won't work in all browsers. In those browsers Facebook ditches the effect and always shows the element that should only display on hover:
#parent #child {
display: none;
}
#parent:hover #child {
display: block;
}
Use conditional CSS to set display: block as the default in IE7 and below.
This can actually be done with pure css, here is a simple example:
HTML:
<div id='outer'>
<div id='button'>
<!-- your element here -->
</div>
<div id='popup'>
<!-- your popup menu here -->
</div>
</div>
CSS:
#popup {
visibility:hidden;
}
#outer:hover #popup {
visibility:visible;
}

creating an expandable area in a web page

I am new to CSS and Javascript. I want to create a specific area (I use the div tag) in the page where once a link is clicked within, the area will expand and an additional content would be displayed. I managed to create a code which does the job only partially: the new content is displayed after the click but this content is not displayed within the area border. In few words the area is not expanded, only a new content is displayed...any suggestion?
I really like this jQuery accordion method:
Live Demo: http://jsfiddle.net/kbZDv/1/
It's easy to use, style and looks good.
All you need to do is include the latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
Here is the HTML markup:
<p class="trigger">Click here to expand and reveal more information</p>
<div class="toggle_container">
<div class="block">
<p>Content goes here.</p>
</div>
</div>
The basic (yet to be styled) CSS:
p.trigger{
margin-bottom:7px;
margin-top:-5px;
}
.toggle_container{
margin-bottom:10px;
}
.toggle_container p{
margin:0px;
}
.toggle_container{
background:#f0f0f0;
clear: both;
font-size:100%;
}
And the all important jQuery to make it work:
$(".toggle_container").hide();
$("p.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
});
You could use a jquery plugin like div expand?
http://plugins.jquery.com/plugin-tags/div-expand
or perhaps a jquery exander plugin
http://plugins.learningjquery.com/expander/demo/index.html

Categories

Resources