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

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;
}

Related

Problems with ID anchors

I'm trying to use reload a page to go to an anchor, but the page don't reload or scroll to the anchor. The anchor is not shown till the link is hit.
$('.link').click(function() {
$('#box').css('display', 'block');
});
#box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<h1>Title</h1>
<p>Description of the content.</p>
</div>
Go to #Box
This is the page in my blog: http://simulatorio.blogspot.com.br/p/politicas.html#cookies
For exemple:
I open http://simulatorio.blogspot.com.br/p/politicas.html in a small window (width of 500px, the content is shown).
I click in Menu (the content is hidden, the menu is shown).
I click in a link http://simulatorio.blogspot.com.br/p/politicas.html#cookies.
The page does nothing (it doesn't reload)!!!
What I want is to go to the page http://simulatorio.blogspot.com.br/p/politicas.html#cookies on itself.
PS.: It only works when the link is opened in a new window/tab.
It should be opened in a small screen because the problem is happening there (responsive page). Thanks!
If the anchor is display:none, it may as well not exist for the purpose of navigation. Try this styling instead:
#box {
width:0;
height:0;
overflow:hidden;
}
Or:
#box {
visibility:hidden;
}
Its because after refreshing the style is applied to #box so its hidden.
#box {
display: none;
}
Do you need something like this:
HTML:
<div id="box" class="boxContent">
<h1>Title</h1>
<p>Description of the content.</p>
</div>
Go to #Box
CSS:
.boxContent {
visibility:hidden;
}
JS:
$('.link').click(function() {
$('#box').toggleClass( "boxContent");
});
FIDDLE: http://jsfiddle.net/2TCy4/42/

Javascript/Jquery hiding all h2 on mouseout

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/

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

jQuery Sticky Header displacing the page content

I am using jQuery Sticky header in my theme. It seems to work fine in most of the pages but in two pages it is displacing the content to the right on load and on scrolling down it places it back in the right position. i am trying to debug the issue with no results.
On Page Load
On Scroll
DEMO Link
Adding this will fix the problem:
.page {
width:100%;
}
Try removing overflow: hidden from .page at your css
.page {
overflow: visible
}
<div style="height: 50px;" class="sticky-wrapper" id="undefined-sticky-wrapper"></div>
<!--- PLEASE INCLUDE -->
<div style="clear:both"></div>
put style="clear:both" after header main div (#undefined-sticky-wrapper)
Used "clear:both" on .page
.page {
clear: both;
}
The problem is that the #nav is overflowing out of your header and pushes the page to the right side.

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.

Categories

Resources