The affect I'm going for is something I can only compare to Google+ top navigation effect and through some parallax into that. That is, when you scroll down, the search bar disappears and your left with a small "toolbar". I found some jQuery to help me out and I will mess with after I figure this out.
What I'm trying to do first, is get a background image to scroll from below the bar (see the jfiddle) and scroll up to the bar where it will eventually stay put. This is what I've got so far:
<section id="account-bar" class="shelf navbar-fixed-top">
<div class="navbar-header">
more...
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Links</li>
</ul>
</div>
</section>
with the associated css:
section#account-bar {
background-color:#111;
color:#ccc;
font-size:1.1em;
height:3.6em;
line-height:3.4em;
text-align:right
}
section#account-bar:after {
content:'';
width:267px;
height:46px;
background:url('http://lorempixel.com/267/46/') no-repeat 0 0 scroll;
background-size:267px 46px;
top:0;
left:0;
position:absolute;
}
EDIT: Here's that jsFiddle
Although this is not currently possible in pure CSS, by using window.onscroll, scrollTop, and a couple if statements, you can create a lovely state change effect that is similar to what you're looking for
Looking at the Google Plus page, there was some content above the navigation. As a result, I set up my HTML as follows
<div class='topContent'>Top Content</div>
<nav>
<div class='googleSlide'></div> <!--The image that slides in from the left-->
<div class='navContent'>Nav bar content</div> <!-- Everything else in nav -->
</nav>
Here are my important CSS lines to get it functioning
.topContent { height:75px; /* Arbitrary but necessary value */ }
nav { height:44px; width:100%; }
nav div { float:left; }
.googleSlide {
background-image: url(//ssl.gstatic.com/s2/oz/images/sprites/ribbon-nav-1x-69dd561f4c55d6702aadda4e3b4ce787.png);
background-position:0 -100px;
height: 44px; /* More arbitrary but necessary values */
width: 44px;
margin-left:-55px;
transition: all 0.200s; /* To smooth the transition to the new state */
}
And finally, we have the javascript that gets it all working
window.onscroll = function() { // Fires whiles the page scrolls
var navigation = document.getElementsByTagName('nav')[0],
slide = document.getElementsByClassName('googleSlide')[0];
// Conditional to check whether scroll is past our marker, second conditional
// to make sure that it doesn't keep firing when scrolling inside of the range
if(document.body.scrollTop > 75 && navigation.style.background != 'white') {
navigation.style.background = 'white';
navigation.style.border = '1px solid black';
navigation.style.position = 'fixed';
slide.style.marginLeft = '0px';
}
// Same as above but toggles back to the original state
if(document.body.scrollTop < 75 && navigation.style.background != 'grey') {
navigation.style.background = 'grey';
navigation.style.border = 'none';
slide.style.marginLeft = '-55px';
navigation.style.position = 'static';
navigation.style.top = '0px';
}
}
Demo
I'm not sure exactly what you mean by scrolling the background, but a similar approach as this one can get you what you want
Related
I'm using Bootstrap 3. I have this menu which works ok only when is not a touch (mobile) device:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Inicio</li>
<li>Ayuda</li>
<li>Metodología<span></span>
<div class="nav-sub-menu">
<ul class="text-submenu">
<li style="padding-left=0px">Guía Metodológica</li>
<li style="padding-left=0px">Modelos y Resultados</li>
</ul>
</div>
</li>
<li>Glosario</li>
<!--<li>Link de Interés</li>-->
<li>Contacto</li>
</ul>
</div>
In the css, the hover that give the style to the elements have this code:
.nav li > a {
display: table-cell;
}
.nav>li>a:hover {
background: none;
color: #ff7113;
}
.nav > li > ul {
display:none;
list-style:none;
position:relative;
}
.nav > li:hover > ul {
display:block;
}
I've read some posts about making menus for both desktop and touch without hover, with javascript or even using external libraries. Is there are more simple way to use this menu in mobiles devices?
I made a Jsfiddle with the menú working:
https://jsfiddle.net/esqkx349/
You have to open it in a wide screen to see it, like this:
in case, anyone still finding solution to this problem,
Add onclick="void(0)" in <div class="navbar-collapse collapse"> to make mobile device recognise an element as an element with a hover.
like <div class="navbar-collapse collapse" onclick="void(0)">
Well, I made it:
https://jsfiddle.net/pmiranda/bwkyocpa/1/
I had to put some javascript and css:
function isTouchDevice(){
return typeof window.ontouchstart !== 'undefined';
}
$(document).ready(function(){
/* If mobile browser, prevent click on parent nav item from redirecting to URL */
if(isTouchDevice()) {
// 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
$(".navbar-nav > li > a").click(function(event) {
// Perform a reset - Remove the "clicked" class on all other menu items
$(".navbar-nav > li > a").not(this).removeClass("clicked");
$(this).toggleClass("clicked");
if ($(this).hasClass("clicked")) {
event.preventDefault();
}
});
}
});
CSS:
.hover-hack {
position: fixed !important;
background-color: rgba(0, 0, 0, 0.7) !important;
}
#media only screen and (max-width:1024px) {
.hover-hack {
background: rgba(0, 0, 0, 1) !important;
z-index: 10;
}
}
And the html:
<li>Metodología<span></span>
<ul class="text-submenu hover-hack">
<li style="padding-left=0px">Guía Metodológica</li>
<li style="padding-left=0px">Modelos y Resultados</li>
</ul>
</li>
<li>Glosario</li>
It's possible to make a clickable dropdown without Js.
The hover method is sketchy because some touch devices will treat the first click like a hover action.
It can be done using a checkbox html element. Then, css can detect wether or not the checkbox is current checked.
I created a component that does the job using this link. It works fairly well on mobile because click events work just fine.
Pure CSS clickable dropdown?
Problem is, this solution is slightly hacky and pure HTML, CSS implementations can't work outside of the HTML heirarchy.(so if your button and your dropdown menu exist in different branches of the html heirarchy it won't work.)
I think the most appropriate solution is to use a little bit of JS and handle the element on click.
This is the only thing in the body of the HTML:
<div id="box">
<p id="text"> Enter The Disco! </p>
</div>
and this is my CSS relating to the problem:
#box:hover{
-webkit-transform:rotate(360deg);
opacity:1;
background-image:url("Logo.jpg");
width:428px;
height:208px;
font-size:38px;
}
#text:hover{
padding:18% 0% 0% 0%;
color:red;
}
And what I want to do is make the text inside the div disappear when I hover over it how do I do this? It already spins and changes background but i just want the text to disappear after it has finished its animation.
You could use the color CSS attribute and instead of making it invisible, just make it transparent, which should have the same effect:
#text:hover {
/* other rules */
color: transparent;
}
you can use different way too. It is easy too like another solutions:
#text:hover {
display:none;
}
It's no problem to let it disappear: use display:none, opacity:0, visibility:hidden or color:transparent; but hiding it AFTER the animation? This seems to be a bit more difficult. I don't think that this is possible without javascript:
<div id="box" onmouseover="spin();">
<p id="text"> Enter The Disco! </p>
</div>
<script type="text/javascript">
var i; var rotate;
function spin() {
i = 180; rotate = setInterval("spinInterval()",3);
}
function spinInterval() {
document.getElementById('box').style.WebkitTransform = "rotate("+ i +"deg)";
document.getElementById('box').style.MozTransform = "rotate("+ i +"deg)";
document.getElementById('box').style.OTransform = "rotate("+ i +"deg)";
document.getElementById('box').style.Transform = "rotate("+ i +"deg)";
i++;
if(i>360) {
document.getElementById("text").style.opacity = 0;
clearInterval(rotate);
}
}
</script>
PS: this works for all browsers, not only on Chrome :)
I have inherited a project, and have some questions on how to resolve a particular issue.
There is a fixed left sub-nav, seen below. As the user scrolls, there are 6-10 different "sections" that are stacked vertically. The top section has a background-image (seen below), while the remaining sections alternate between white & various colors, such as:
section 1: background-image
section 2: background-color: white
section 3: background-color: blue
section 4: background-color: white
section 5: background-color: green
... etc
The customer wants the menu items to change colors based on what background each item is over at a given time (so as you scroll, it's changing item by item). As you can see in the image, when I scroll from the header to the first content section, I'm moving to a white background, so my menu is white text on a white background (the 5th menu item is moving into the white background).
The guys that worked on this initially used jquery waypoint to trigger wholesale changes to the menu item color when a particular div scrolled to a certain location. This basically works - but only when the entire section is scrolled to the top of the menu (meaning the menu items are white-on-white until the last menu item is scrolled into the section).
Any thoughts on how to handle this?
[EDIT TO ADD]
I thought I made this pretty clear above. We're already using jquery waypoints. The problem is, waypoint cannot trigger on each menu item (primarily since the menu items are not part of the ancestral tree of the content nodes, which prohibits me from passing in a context to the waypoint handler), unless I create a handler for the section div at each offset of every menu item (which are different for each page). This would result in a crazy amount of waypoint handlers being bound, which I don't think is ideal.
Here is an example of what I'm describing. As you scroll, the menu items change all at once. You can see where this is a problem when you're scrolling down from the header into the first content section. The menu items are white. So is the background of the first content section. So until the waypoint is hit, the menu is effectively hidden. What I am looking to do is change the color of each menu item as it "enters" or "exits" a particular content div. I suppose I could do this on window.scroll, but that seems pretty expensive. Was hoping there's something I'm either missing with waypoints, or a better way to do this.
Alright, so I did solve this by creating an event handler at every offset. Given that I have 6-10 menu items per page (so 6-10 sections), I don't really like a solution where I create 36-100 event handlers, so I'm hopeful somebody has a better one (although I'm starting to doubt it).
SO is telling me I need to post code, so here goes:
HTML
<div class="menu">
<ul>
<li>
<a href='#header'>Header</a>
</li>
<li>
<a href='#getting-started'>Getting Started</a>
</li>
<li>
<a href='#zomglaserguns'>Laser Guns</a>
</li>
<li>
<a href='#pewpew'>Pew Pew</a>
</li>
</ul>
</div>
<div id="header" data-menu-color-down='#fff' data-menu-color-up='#000'>
Some header content
</div>
<div class="content">
<div id="getting-started" data-menu-color-down='#000' data-menu-color-up='#fff'>
some content
</div>
<div id="zomglaserguns" data-menu-color-down='#fff' data-menu-color-up='#000'>
laser guns!
</div>
<div id="pewpew" data-menu-color-down='#000' data-menu-color-up='#fff'>
pew pew!!!!
</div>
</div>
JS:
var myObj = {
menuOffsets: {},
pageSections: [],
init: function() {
myObj.initMenuOffsets();
myObj.initSections();
myObj.initWaypoints();
},
initMenuOffsets: function() {
$('.menu a').each(function() {
var self = $(this),
href = self.attr('href'),
menuItemHeight = self.height();
myObj.menuOffsets[href.substring(1, href.length)] = self.offset().top + self.height();
});
console.log(myObj.menuOffsets);
},
initSections: function() {
var header = $('#header'),
sections = $('.content > div');
if(header.length) {
myObj.pageSections.push('header');
}
sections.each(function() {
var self = $(this);
myObj.pageSections.push(self.attr('id'));
});
console.log(myObj.pageSections);
},
initWaypoints: function() {
var menuItemColor,
key,
i = 0,
len = myObj.pageSections.length;
for ( i; i < len; i++ ) {
for ( key in myObj.menuOffsets ) {
if( myObj.menuOffsets.hasOwnProperty( key ) ) {
(function ( key, i ) {
$('#' + myObj.pageSections[i]).waypoint(function(direction) {
var self = $(this);
menuItemColor = self.data('menuColor' + (direction === 'up' ? 'Up' : 'Down'));
$('.menu a[href="#' + key + '"]').css('color', menuItemColor);
}, { offset: myObj.menuOffsets[key] });
})(key, i);
}
}
}
}
};
myObj.init();
SEE-ESS-ESS:
.menu {
position: fixed;
top: 40px;
left: 10px;
color: white;
}
.menu li {
list-style-type: none;
}
.menu a {
color: inherit;
text-decoration: none;
}
.content {
}
#header {
background: black;
color: white;
height: 200px;
padding: 0 120px;
}
#zomglaserguns {
background: green;
color: #777;
}
.content div {
min-height: 300px;
padding: 0 120px;
}
Well, it's not too difficult to set up some ID's on the page, and use those as anchors for when to trigger the background change.
Say you had an HTML structure like this:
<header>
...
</header>
<div id="getting-started" data-background-color="lightBlue">
...
</div>
<div id="afford" data-background-color="red">
...
</div>
<div id="down-payment" data-background-color="green">
...
</div>
<div id="financing" data-background-color="blue">
...
</div>
And now you include jQuery Waypoints
<script type="text/javascript">
(function($) {
$('#getting-started').waypoint(function() {
var $this = $(this);
$('header').css('background-color', $this.data('background-color'));
});
})(jQuery)
</script>
Keep in mind this isn't a complete solution, just something to help poke you in the right direction.
I want to show a div by hovering over its parent.
The code is quite big so I'll try to explain.
On the site there is a scrollable div (overflow:auto) which shows a table.
-> it shows 10 lines of the table and the rest (nearly 30) must be scrolled.
In every tr of my table there is a div(hover_over) that has a child-div (show_by_hower)
By hovering over the div (hover_over) the child-div (show_by_hower) should be displayed.
That works so far but the child-div (show_by_hower) is always under the scrolling div.
If I remove the overflow:auto; from the scrollable div it all works fine but I need the overflow auto.
#hover_over
{
position:relative;
width:20px;height:20px;
}
#hover_over:hover div
{
position:absolute;
display:block;
z-index:999;
width:310px;
height:125px;
}
#hover_over div { display:none; }
There is no other positioning in the code.
Here is a jsFiddle with one possible solution. I'm using jQuery's .hover() method to animate an element outside of the table and fill it with the content contained inside the table. This way, your pop-up element is not restricted to the bounds of the table.
Here is the jQuery code:
$(function() {
$(".hover_over").hover( function() {
hovDiv = $(this);
showDiv = $(".show_hover");
showDiv.html(hovDiv.children("div").html());
showDiv.css("top", hovDiv.offset().top)
showDiv.css("left", hovDiv.offset().left + hovDiv.width()).show();
}, function() {
$(".show_hover").hide();
});
});
And the HTML:
<div class="theTable">
<div class="hover_over">1
<div>I'm hidden! 1</div>
</div>
<div class="hover_over">2
<div>I'm hidden! 2</div>
</div>
<div class="hover_over">3
<div>I'm hidden! 3</div>
</div>
<div class="hover_over">4
<div>I'm hidden! 4</div>
</div>
<div class="hover_over">5
<div>I'm hidden! 5</div>
</div>
</div>
<div class="show_hover"></div>
And the CSS:
.show_hover {
display:none;
position:absolute;
background-color:black;
width:100px;
height:20px;
font-size:14px;
color:white;
}
.hover_over div { display:none; }
Update
Because you asked, I decided to make this work with plain javascript. It is not as easy to read, but the same idea applies: move the popup div outside the table and dynamically add the desired content and positioning with onmouseover and onmouseout event handlers.
Here is the new jsFiddle.
And here is the relevant code:
Javascript
(function() {
function hoverIn() {
var hovDiv = this;
var showDiv = document.getElementById("show_hover");
showDiv.innerHTML = hovDiv.children[0].innerHTML;
showDiv.className = "see";
var newTop = hovDiv.offsetTop + hovDiv.offsetParent.offsetTop + hovDiv.offsetParent.offsetParent.offsetTop;
showDiv.style.top = "" + newTop + "px";
var newLeft = hovDiv.offsetLeft + hovDiv.offsetParent.offsetLeft + hovDiv.offsetParent.offsetParent.offsetLeft + hovDiv.clientWidth;
showDiv.style.left = "" + newLeft + "px";
};
function hoverOut() {
document.getElementById("show_hover").className = "";
};
var hoverDivs = document.getElementsByClassName("hoverdiv");
for(var i = 0; i < hoverDivs.length; i++)
{
hoverDivs[i].onmouseover = hoverIn;
hoverDivs[i].onmouseout = hoverOut;
}
})();
CSS
#show_hover
{
display:none;
position:absolute;
top:0;
left:0;
}
#show_hover.see {
display:block;
background-color:green;
width:400px;
height:80px;
position:absolute;
top:20px;
left:20px;
}
Update 2
This answer is getting insanely long. Here's the new jsFiddle. This update allows you to hover over the shown div to interact with the objects inside. I made use of the basic idea behind the hoverIntent jQuery plugin, which is to place the onmouseout handler behind a setTimeout call that allows you half a second to move your mouse into the popup before it disappears. It's a bit fidgety, so you might play with the wait time until it does what you want.
Also, see this StackOverflow question if you want to just check to see where the mouse is at any given moment and trigger the show/hide behavior off that.
That said, here's the important part of the update:
var mouseInShowHover = false;
var showDiv = document.getElementById("show_hover");
showDiv.onmouseover = function() { mouseInShowHover = true; }
showDiv.onmouseout = function() {
mouseInShowHover = false;
showDiv.className = "";
}
function hoverOut() {
setTimeout( function() {
if( !mouseInShowHover )
showDiv.className = "";
}, 500);
};
Well, your JSFiddle example worked fine for me, so I'm assuming you're using IE8 or something that has very strict z-index rules.
Try adding this:
#divscroll tr:hover {
position:relative;
z-index:1;
}
JSFiddle example.
I am using "background: #BDBDBD url(image.png) top left no-repeat" this css property for two div elements which has width and height set. On clicking a button I am changing the width of both the nested divs dynamically by making the function run continuously with the help of setInterval(). The image is not loading in chrome but it works fine in firefox and IE .. Many searches convey that using background image in chrome is not working but none of those solutions seems to work.
<div id="boxes">
<div id="dialog" class="window" style="overflow: auto">
<div id="progressBar" class="meter-wrap" style="display: block;position: relative; margin: auto;">
<div class="meter-value" style="background-color: #05C; width: 40%">
<div class="meter-text">
Loading...
</div>
</div>
</div>
<div class="meter-text-message">
Loading...
</div>
</div>
CSS:
.meter-wrap, .meter-value, .meter-text {
width: 155px; height: 30px;
}
.meter-wrap, .meter-value {
background: #bdbdbd url('/sf-images/tracker/inline_progress_bar.png') top left no-repeat;
}
js code:
function setProgressBar() {
var pgBar = jQuery("#progressBar");
pgBar.show();
running = true;
var inter = null;
function run() {
pgBar.find(".meter-value").css("width", progress + "%");
pgBar.find(".meter-text").text(progress + "%");
if (progress == 100) {
jQuery(".meter-text-message").html("Complete");
clearInterval(inter);
running = false;
}
}
inter = setInterval(run, 50);
}
Found that the image is not loading for first time, I made the div element visible with the image as background by another method. After that , when I execute the above js method image loads properly.