I need to show a fixed div when i scroll onto and ID and then hide it when it gets to another ID or when a i scroll back to top and pass by the ID that had triggered it.
At the moment my code is showing the div in the ID i want and it's hidding when i scroll back to top at the same ID position but im not beeing able to also hide it when the next ID appears.
This is a small example of my code
https://jsfiddle.net/wo45r3yv/2/
I want to show the .cscroll div on scroll down at id="show" and then on scroll top hide it again on id="show" (that's working), when it reaches id="last-div" i want it to disappear again but also to appear on scroll top when reaches the bottom of id=middle-div, basicly the main idea is to have the fixed bar appearing on id="middle-div" but trigered by div ID and not screen position
Hope someone can help me
Many thanks
var offsetTop = $("#show").offset().top;
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop > offsetTop){
$(".sticky-section").slideDown('200');
$(".cscroll").fadeIn('200');
}
else {
$(".sticky-section").slideUp('200');
$(".cscroll").fadeOut('200');
}
});
#first-div {
height: 600px;
background-color: red;
}
#middle-div {
height: 1600px;
background-color: blue;
}
#last-div {
height: 2600px;
background-color: green;
}
.cscroll {
width : 100%;
}
.sticky-section {
position: fixed;
top: 0px;
z-index: 8;
background-color: white;
color: black;
padding-top: 10px;
padding-bottom: 5px;
display: none;
text-align: center;
box-shadow: 0px 12px 21px -8px rgba(0,0,0,0.32);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first-div">
MASTER
</div>
<div id="show"></div>
<div class="cscroll sticky-section">
<h4>
sticky content headline
</h4>
<h5>
more texts
</h5>
</div>
<div id="middle-div">
NEW DIV
</div>
<div id="last-div">
LAST DIV
</div>
Related
I've this code here (Please open in expanded mode):
#wrapper {
position: fixed;
background: gray;
color: #fff;
bottom: 0;
left: 0;
right: 0;
border-radius: 12px 12px 0 0;
width: 100%;
}
#title {
text-align: center;
padding: 15px;
border-bottom: 1px solid white;
}
#notifications {
display: flex;
flex-direction: column;
overflow: scroll;
overflow-x: hidden;
}
.entry {
padding: 15px;
}
<div id="wrapper">
<div id="title">Notifications</div>
<div id="notifications">
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
<div class="entry">Test</div>
</div>
</div>
It should be like in Google Maps when you explore the nearby. So like a slide up div from the bottom. The title should be visible when it's not expanded but not the notifications. When I click the title, I want to smoothly expand the element up to 85 percent of the viewport so that the user can scroll trough the notifications. When he clicks the title again, it should go back down to the initial state.
Is this possible? If yes, how?
To change between two states, expanded and collapsed, you'll need some kind of JavaScript.
As far as the CSS, I'd suggest for #wrapper instead of using bottom: 0, using something like top: calc(100% - 42px) (the 42px should be whatever the height you want to be visible) for the collapsed state, and then top: 15% for the expanded state.
For the "smooth" part of it, you just need to add a transition animation.
Here's a basic codepen showing what I mean: https://codepen.io/milesgrover/pen/gOpbrpd
There are lots of fixed footer/header variable width content posts but none seem to work for my specific use case.
The easiest way to describe what I want is a google doc's style interface where the header and footer are fixed and the content is X/Y scrollable but was part of the header scrolls away when you start scrolling down
https://jsfiddle.net/zve0mb5m/
HTML, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
div {
padding: 10px;
}
.header {
background: LightCoral;
border: 10px solid IndianRed;
}
.fixed-header {
position: sticky;
top: 0px;
background: Gold;
border: 10px solid GoldenRod;
}
.content {
overflow-y: scroll;
overflow-x: scroll;
height: 100%;
background: YellowGreen;
border: 10px solid OliveDrab;
}
.fixed-footer{
position: fixed;
bottom: 0px;
background: LightSteelBlue;
border: 10px solid SteelBlue;
width: 100%;
}
<div class="header">
<h1>Non fixed header content</h1>
</div>
<div class="fixed-header">
Fixed header content
</div>
<div class="content">
Some content that will overflow horizontally aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="fixed-footer">
Fixed footer content
</div>
The above fiddle is what I have so far, in a working solution the border for the green content section would appear just above the blue footer which would allow the horizontal scroll bar to be present.
Also, when scrolling the content section goes underneath the fixed header which isn't ideal. I want the content section to be fully visible at all times, and grow as we scroll. Possible with CSS? Do I need some JS in here?
You can wrap the fixed items in a container div and use flexbox to lay them out the way you want: http://jsfiddle.net/38m5d13r/
I have an application with a side-menu built using jQuery-ui. It can be collapsed to show icons only or expanded to also include menu titles.
On mouse hover, the sub-menu pops up, its location adjusted for whether the menu is collapsed or expanded.
The problem is the width of the hover area. It works fine when expanded. When collapsed, the hover area width should match the collapsed menu width. But it is still causing the sub-menu to appear when the mouse hovers over the area where the expanded menu would be.
In the html below, the menu div has a width defined in the style attribute, and I suspect it's the source of my issue. But I have not been able to cause the hover area width to change in coordination with the expand/collapse state of the menu. How can I fix this behavior?
See JSFiddle.
The html:
<div id="main$main_menu$1" class="ui-state-hover ui-corner-all menuBar">
<div id="main$visibility" class="menuContent">
<input type='button' value='4' id='menuVisibility' class="menuToggler ui-state-default ui-corner-all" onclick="runEffect();">
</div>
<div id="main$help_menu$1" class="menuContent" style="background: none; border: none; width: 100px;">
<span class="menuIcon">s</span>
<span class="menu_hideable menuHidden" >Help</span>
<ul class="menu menuDropdown ui-menu ui-widget ui-widget-content" style="width: 79px; display: none;" id="ui-id-121" role="menu" tabindex="0">
<li class="ui-menu-item" id="ui-id-122" tabindex="-1" role="menuitem"><div id="main$help_button$1">Contents</div></li>
<li class="ui-menu-item" id="ui-id-124" tabindex="-1" role="menuitem"><div id="main$help_about_button$1">About</div></li>
</ul></div>
</div>
Some CSS styling:
.menuBar {
padding: 0px;
margin: 0px;
height: 99%;
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
width: 1.3em;
font-size: 24pt;
}
.menuBar-Expanded {
width: auto;
}
.menuDropdown{
margin: -24px 0px 0px 36px;
text-align: left;
z-index:101; /* dropdown on top of main menu */
position:absolute; /* do not displace the main menu items */
}
.menuDropdown-Expanded {
margin: -24px 0px 0px 100px; /* position of pop-ip when menu bar is expanded */
}
.menuContent{
padding: 4px 4px 4px 4px;
}
.menu_hideable {
display: inline;
}
.menuHidden {
display: none;
}
.menuIcon {
font-family: webdings;
font-size: 24pt;
height: 24px;
width: 24px;
vertical-align:middle;
}
.menuToggler {
font-family: webdings;
font-size: 14pt;
width:20px;
height:20px;
}
Javascript functions:
var collapseIcon = '3';
var expandIcon = '4';
function runEffect() {
$(".menu_hideable").toggleClass("menuHidden");
$("div#main\\$main_menu\\$1").toggleClass("menuBar-Expanded");
$(".menuDropdown").toggleClass("menuDropdown-Expanded");
if ($("#menuVisibility").val() == expandIcon) {
$("#menuVisibility").prop('value', collapseIcon);
} else {
$("#menuVisibility").prop('value', expandIcon);
}
};
$(document).ready(function() { var menu = $("#main\\$help_menu\\$1 > ul.menu").menu();
menu.menu('widget').hide();
$('#main\\$help_menu\\$1').hover(function () {
var menubarWidth = $("div#main\\$help_menu\\$1").css("width");
$("div#main\\$help_menu\\$1").addClass("ui-state-active");
menu.menu('widget').show();
$("div#main\\$help_menu\\$1").css("width", menubarWidth);
}, function () {
menu.menu('widget').hide();
$("div#main\\$help_menu\\$1").removeClass("ui-state-active");
});
$(menu).hover(function () {
menu.menu('widget').show();
}, function () {;
menu.menu('widget').hide();
});
});
Ok so the problem is that you set your hover area to width 100px. Put it relative to it's container with width 100% ! Like so https://jsfiddle.net/peurhwam/4/
<div id="main$help_menu$1" class="menuContent" style="background: none; border: none; width: 100%;">
You may have trouble with your padding, soo try to put padding inside instead of in the hover area directly.
EDIT : https://jsfiddle.net/peurhwam/6/
I believe the issue is the selector being used to call the hover function is set to this '#main\$help_menu\$1'. This includes the hidden content and is activated when you hover over it even when it is hidden.
Change the following line:
$('#main\\$help_menu\\$1').hover(function () {
to this:
$('.menuIcon').hover(function () {
I'm wanting to create a div panel with a link which when clicked slides a panel in from the right, I have this working fine but I want to have the clickable link pushed out with the div panel and it's this I cannot figure out although i'm guessing it's really simple.
The html I have is:
<div class="quick-contact">
<div class="slide-toggle">Slide Toggle</div>
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
</div>
the css is this:
quick-contact {
background: #ccc;
float:right;
}
.box{
float:right;
overflow: hidden;
background: #f0e68c;
display: none;
}
.slide-toggle {
float: right;
position: relative;
right: 0;
}
/* Add padding and border to inner content for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
and the jquery is:
// use this docu ready //
jQuery(function($) {
$(".slide-toggle").click(function(){
$(".box").animate({
width: "toggle"
});
});
}); // end
I can get the panel to slide when I click the link but the clickable link just sits above the panel when it slides in, I need it to slide out with the panel, I need it to work like this http://www.sanwebe.com/assets/floating-contact-form/ The reason i'm not using that example is because I need to slidein panel to slide in the header div and not the body div like this example does.
Just place your <div class="slide-toggle">...</div> after <div class="box">...</div> (because you are using float: "right";). Make it look like this:
<div class="quick-contact">
<div class="box">
<div class="box-inner">
content goes here
</div>
</div>
<div class="slide-toggle">
Slide Toggle
</div>
</div>
Working example: http://codepen.io/anon/pen/GoPPPE
Here's a working example: https://jsfiddle.net/ruo8r7o8/2/
Essentially, what you want to do is:
Lose the float .. it complicates calculations
Animate the whole box, not just one part
Javascript action:
$(function(){
$('.slide-toggle').click(function(){
$('.quick-contact').animate({
right: $('.quick-contact').css('right') == '0px' ? "100px": "0px"
})
});
});
CSS action:
.quick-contact {
position: absolute;
right: 0;
}
.slide-toggle {
position: relative;
background-color: red;
}
.box {
position: absolute;
right: -100px;
width: 100px;
background-color: green;
}
I have a gridview with a link in each datarow. When user clicks the link, there is a popup div. The popup div is at a certain location on the page, but if there are a lot of rows in the gridview, user clicks on a link after scrolling down to the bottom of the page, the div pops up at the top of the page, moving the page back up to the top.
I would like the div to position on the page relative to where the link they click is. So, if they scroll down and click on gridview link, the div pops up down there. If a link at top of gridview, then popup there at top.
Here is my code:
<script type="text/javascript">
function CopyRecords() {
document.all.CopyItemsDiv.style.display = 'block';
document.getElementById("outerdiv2").style.display = 'block';
}
function closeFrame2() {
document.getElementById("outerdiv2").style.display = 'none';
location.replace('default.aspx');
}
</script>
<div id="outerdiv2" style="position: absolute; top: 30px; left: 550px; filter: alpha(opacity=85); z-index: 1001; display: none; background-color: white; border: .125em solid #736F6E;">
<div style="text-align: right; padding: .25em .5em; font-size: 1.25em; border: outset 2px gray; margin-bottom: 4px; background-color: #cccccc;">
<span style="float: left; font-size: medium;">Import Budget</span>
<b>x</b></div>
<div id="CopyItemsDiv" style="height: 150px; width: 300px; border: none; margin-left: 15px;" >
Div Contents...
</div>
</div>
I'm afraid your example is incomplete: http://jsfiddle.net/6H7Ss/5/embedded/result/ There is nothing shown on the screen.
Please update the code for a more complete example: http://jsfiddle.net/6H7Ss/
Then I'll try to answer.