I haven't been able to find the answer to this anywhere.
How do you make a hidden div appear when mousing over where it would have been?
Please do not tell me how to make a link, I know how to make a link ;)
I have tried:
a.) onmouseover set visibility to visible and onmouseout set visibility to hidden
this works in 0 browsers
b.) setting borders to 0px and background transparent and innerhtml to "" onmouseout and reverting onmouseover
this works in chrome
c.) This was the most popular answer on the internet, which i knew wouldn't work, but I tried anyway: make a container div set to visible and then do visibility visible and visibility hidden for the inner div
d.) Setting opacity to 1/100 and 0
works in chrome
e.) last resort: i tried making a transparent gif and having it display onmouseout
this also failed
I haven't tried jquery's .hover but I have read that it may not work correctly.
I have no other ideas. Will somebody help, please?
If I get it right you want div element to show if you are over it and hide when the mouse is not over. If that's it you can do it only with html and css:
<head>
<style>
#outerDiv{width:100px;height:100px;background-color:blue;}
#innerDiv{width:100px;height:100px;background-color:red;display:none;}
#outerDiv:hover #innerDiv {display:block;}
</style>
</head>
<html>
<div id="outerDiv">
<div id="innerDiv">some text</div>
</div>
</html>
The outer div is always visible and when it's hovered the inner one is shown.
I think that this is going to help you: http://jsfiddle.net/eb4x9/
The mouseover event won't trigger when the div is hidden so you can detect it's position and size.
Here is the source:
HTML
<div id="foo"></div>
CSS
#foo {
width: 300px;
height: 300px;
background-color: red;
visibility: hidden;
}
JS
$(document).mousemove(function (event) {
var div = $('#foo'),
divLeft = div.offset().left,
divTop = div.offset().top,
divWidth = div.width(),
divHeight = div.height();
if ((event.pageX >= divLeft && event.pageX <= divLeft + divWidth) &&
(event.pageY >= divTop && event.pageY <= divTop + divHeight)) {
div.css('visibility', 'visible');
} else {
div.css('visibility', 'hidden');
}
});
$(document).mouseleave(function (event) {
var div = $('#foo');
div.css('visibility', 'hidden');
});
Best regards!
Try setting the display attribute of the div to 'block' along with the visibility attribute to 'visible' in your onmouseover event.
Set the display to 'none' and visibility to 'hidden' to hide.
Of course the trouble will be firing the mouse over on a hidden div.
This works in every browser I have ever used it in.
Try this, having two divs one empty and other with your content and toggling between them on mouseover
<html>
<head>
<script>
function toggle() {
var your_div = document.getElementById("your_div");
var empty_div = document.getElementById("empty_div");
if(your_div.style.display == "block") {
your_div.style.display = "none";
empty_div.style.display = "block";
}
else {
your_div.style.display = "block";
empty_div.style.display = "none";
}
}
</script>
<style>
#empty_div{width:100px; height:100px;}
#your_div{width:100px; height:100px; border: 1px solid #000fff;}
</style>
</head>
<body>
<div id="your_div" onmouseover="toggle()">xyz</div>
<div id="empty_div" onmouseover="toggle()"></div>
</body>
</html>
Related
I am trying to make it so, that when a button is clicked like a toggle, the texts and everything below it move smoothly below it instead of suddenly moving it. An example of this is bootstrap navbar hamburger menu. When the menu is clicked in mobile view, the rest of the items under it move in a smooth manner to make room for the navbar items.
Here are my codes in the snippet.
let box = document.querySelector("#box");
let seconddiv = document.querySelector("#seconddiv");
box.addEventListener("click", myfunc);
function myfunc() {
if(seconddiv.style.display == "none") {
seconddiv.style.display = "block";
}
else {
seconddiv.style.display = "none"
}
}
#box {
height: 50px;
width: 50px;
background-color: red
}
#seconddiv {
display: none;
}
<div id="box">
</div>
<div id="seconddiv">
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
</div>
<p>hello</p>
When I click the red box, the "hello" text moves instantly when the "seconddiv" is set to display. Is it possible to move "hello" smoothly like in bootstrap?
You can use jQuery for this purpose. jQuery can handle better and in easy way.
Please include jQuery file for following jQuery code:
$('#box').click(function(){
$('#seconddiv').slideToggle();
});
If you want more slow speed for displaying and hiding div on click, then pass "slow" parameter in slideToggle function.
$('#seconddiv').slideToggle("slow");
display:none is not handled with transitions. But you can add a class to the button with javascript on click. And then give the button height:30px when it has class '.clicked'
#seconddiv {
height: 0;
transition: height 0.5s
}
#seconddiv.clicked{
height: 30px;
}
You can work with width or opacity too instead of height, but the difference with opacity is that the element will still use the space even when set to opacity:0
So, I use this Javascript for hide - show effect:
function effect(id) {
var h = document.getElementById(id);
h.style.display = ((h.style.display != 'none') ? 'none' : 'inline');
}
HTML:
<div class="div">
<img src="http://i.imm.io/1jf2j.png"/>
Home
</div>
and CSS:
.div {
background: #000;
}
.div .url {
font-size: 17px;
}
Here you can test (and edit!) the code: http://codepen.io/anon/pen/dhHiw
JSFiddle doesn't work for me.
All is good. Except when you click on image. It's moved 1px above. Should I use another image?
Where is the problem? And possible solutions. Thank you!
You are basically removing the text element. Since the <div class="div"> does not have a set height, it depends on the elements inside it. When the text is not displayed (display=none), the div will resize to only the image.
You can fix this by either setting a height for the div, or by setting visibility=hidden for the text instead of display=none. When making it hidden, it still has the same dimensions, but it's invisible instead.
If you goto www.rambocats.com, as the page loads you'll see this bottom-center div showing up for a second or two, then disappears. (Div says "Gallery II" in pink letters). It's supposed to only appear once you've scrolled down to about 2/3 of the page. How do I prevent it from showing during initial load?
Here's the jQuery:
$(document).ready(function(){
var open = false;
$('#homiesSlideButton').click(function() {
if(open === false) {
$('#homiesSlideContent').animate({ height:'610px' });
$(this).css('backgroundPosition', 'bottom left');
$("#homies-wrapper img").peTransitionHilight({ // image highlight/transitions plugin
slideshow:true,
transition:"all",
duration:1500,
delay:4444, boost:0.3
});
open = true;
} else {
$('#homiesSlideContent').animate({ height: '0px' });
$(this).css('backgroundPosition', 'top left');
open = false;
}
});
});
$("#homiesSlideButton").hide();
$(window).scroll(function(){
if($(window).scrollTop()>4444){ // position on page when button appears
$("#homiesSlideButton").fadeIn();
}else{
$("#homiesSlideButton").fadeOut();
}
});
$(window).scroll(function(){
if($(window).scrollTop()>4444){ // position on page when button disappears
$("#homiesSlideContent").fadeIn();
}else{
$("#homiesSlideContent").fadeOut();
}
});
What's happening is that it's set to be visible by default, so it shows before the javascript/jquery runs to hide it.
What I tend to do for items that should not be visible from the start is add a CSS class to them that is set to display: none; or visibility: hidden;, like so:
.hide {
display: none;
}
then using jquery to remove the class after calling .hide(). on the element:
$('#elementId').hide().removeClass('hide');
It can be as simple as:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Let's hide and show a div</title>
<style type="text/css">
#myHiddenDiv { visibility: hidden; }
</style>
</head>
<body>
<div id="myHiddenDiv">
Hidden until after the script loads. It will be imperceptible in most cases. But if you comment out or remove the script, the div will indeed be hidden!
</div>
<script type="text/javascript">
document.getElementById('myHiddenDiv').style.visibility = 'visible';
</script>
</body>
</html>
I think it's animating the .hide() event, try style="display:none;" as part of the html for the $("#homiesSlideButton") element.
In the CSS for your div, set the div to have the property
visibility: hidden;
When the page has loaded,
$("#yourDivId").show();
So, here it is:
I'll have 4 divs. Example below. Each div a particular height (around 1500px) but have a width of 100%. Each div is a different colour.
I want it so that when the user scrolls the page and reach a particular point, javascript will kick in and automatically scroll the user to the next div.
So, say the user is vertically scrolling and div #2 is appear and div #1 is disappearing. When div #1 has about 200px left, the page will automatically scroll down so that div #2 is flush with the top of the browser window.
A good example: http://thejuly16.com/ Which basically does it but can't work out how.
1
Content here
2
Content here
3
Content here
4
Content here
That page isn't doing anything for me :/
Anyway, if I get what you mean, you should have some anchors on top of every div, hook some code to the scroll event, check scrollTop() value on it, and scroll to the anchors when this value is in a desired range. You can check this fiddle and the relevant jQuery code:
$(window).bind('scroll', function(){
if (($(window).scrollTop() > 1300) && ($(window).scrollTop() < 1350)) {
window.scrollTo(0,1500);
}
});
This might be a strange behavior for the user, since scrolling up is pretty messed up. However, we can fix this by checking if the user is going up or down in the page, like in this fiddle, just checking if the last scroll position was higher or lower than the current scroll position:
var currentScroll = 0;
var previousScroll = 0;
$(window).bind('scroll', function(){
currentScroll = $(window).scrollTop();
if (($(window).scrollTop() > 1300) && ($(window).scrollTop() < 1350) && currentScroll > previousScroll) {
window.scrollTo(0,1500);
}
previousScroll = $(window).scrollTop();
});
Obviously, you'd need to add as many if statements as "jumps" you want in your page.
I have a solution as given in the code below. Somehow its not working on jsFiddle but working on my machine. Please try it in your own editor
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var isWorking = false;
var lastScrollPosition
function adjust(oDiv) {
if(oDiv.scrollTop > lastScrollPosition && !isWorking && oDiv.scrollTop % 400 > 300) {
isWorking = true
scroll(oDiv);
} else
lastScrollPosition = oDiv.scrollTop;
}
function scroll(div) {
if(div.scrollTop % 400 > 10) {
div.scrollTop = div.scrollTop + 10;
lastScrollPosition = div.scrollTop;
setTimeout(function(){scroll(div);}, 10);
} else
isWorking = false;
}
</SCRIPT>
</HEAD>
<BODY>
<div style="height: 440px; border: solid 1px red; overflow-Y: auto" onscroll="adjust(this)">
<div style="height: 400px; border: solid 1px green"></div>
<div style="height: 400px; border: solid 1px green"></div>
<div style="height: 400px; border: solid 1px green"></div>
<div style="height: 400px; border: solid 1px green"></div>
<div style="height: 100px"></div>
</div>
</BODY>
</HTML>
I think this functionality is available with jQuery. I have tried this but I was doing this on OnClick event in Javascript. In your case, onFocus or any other suitable event like mouseover etc should work.
Hope this helps.
I'm sure this is a poor oversight on my part but I'm hoping someone can explain the correct way to use .style.visibility/.style.display in a way that works in both IE and Firefox.
Basically, I have a custom tab control. The first tab has a custom MP3 player control in it. When the user clicks on a different tab the music needs to continue to play, even though it is no longer visible.
In IE, this works as advertised but in Firefox when the user clicks on another tab the music stops and the control resets to its initialized state.
//<summary>
// Display or hide relevent div areas.
//</summary>
//<param name="divId">The id of the viewable div</param>
function toggleDiv(divId) {
var elems = new Array("0", "1", "2", "3");
var hdnView = document.getElementById('<%=hdnCurrentDiv.ClientID %>');
for (div in elems) {
var elem = document.getElementById(div);
if (div == divId) {
elem.style.display = 'block';
elem.style.visibility = 'visible';
hdnView.value = divId;
//highlightSelection(elem);
}
else {
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}
How do I get Firefox to behave like IE in that when the user clicks on a tab, the player on the previously selected tab continues to play and just makes that div invisible?
Instead of showing/hiding you can set background of each tab to non-transparent color, position them absolutly on top of each other and change their z-index to bring clicked tab to the top of the stack.
This way you don't have a problem with elements beeing destroyed/reset. And you don't have to change the positioning every time a different tab is beeing clicked. All you do is change z-index...
quick example:
<html>
<head>
<style>
ul
{
list-style: none;
}
li
{
display: inline;
}
#Tab1, #Tab2
{
background-color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
</style>
<script>
function toggleTab( tabID )
{
for( var i = 1; i<= 2; i++ )
{
var id = "Tab" + i;
if( id != tabID )
{
document.getElementById(id).style.zIndex = "1";
}
}
document.getElementById(tabID).style.zIndex = "2";
}
</script>
</head>
<body>
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
</ul>
<div style="position: relative;" id="allTabs">
<div id="Tab1">
Tab 1...
</div>
<div id="Tab2">
Tab 2...
</div>
</div>
</body>
</html>
If you set display = 'none', firefox destroys the music player. Your alternative options are:
Just set visibility = 'hidden';
Position the elements absolute and move it to a place far away instead of hiding (-10000, -10000 is a good place to start)
Yes,
display=none will remove the element and all child elements from the document
visibility=hidden the element and children are invisible, but the element exists on the page and takes up space
you could set visibility to hidden and the width and height to 1px or position off the page somewhere, as a semi display none.