Within Javascript I am able to make a div (a rectangle with a solid border), set its display to none, and then change its display setting back to showing itself using {'display': ''}
Ex:
var overlay = $('<div class="area"></div>')
.css({position: 'absolute', left: l + 'px',
top: t + 'px', border: 'solid', borderColor: 'red', display: 'none' }).
overlay.css({'display': ''});
});
I want to make a CSS class that sets its elements display's back to their defaults:
<style id="default">.default { display: '';}</style>
<div class="default"></div>
This does not work. Can anyone tell me the correct syntax for this?
$('a.show').click(function() {
$('.area').addClass('show');
});
$('a.hide').click(function() {
$('.area').removeClass('show');
});
.area {
position: absolute;
left: lpx;
top: 30px;
display: none;
width: 50px;
height: 50px;
border: 5px solid red;
}
.area.show {
display: block;
}
a {
display: inline-block;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="area"></div>
<a class="show">SHOW</a>
<a class="hide">HIDE</a>
Related
When clicking the 'test' div, it opens up the div price-list-test in a popup way like this:
However, I am stuck on trying to get the div to pop up on the 'right' alignment of the element rather than left, like this:
How can I achieve this?
$(document).ready(function() {
$(".test").each(function() {
$(this).click(function() {
var leftpos = $(this).offset() - window.screen.width;
$(this).children().css("left", leftpos.left);
$(this).children().css("display", "block");
});
})
});
.price-list-test {
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}
.test {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
Open
<div class="price-list-test">
Test
</div>
</div>
Make 'test' class position relative, after that set 'price-list-test' left : 0%
.test {
postion: relative;
}
.price-list-test {
left: 0 %;
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}
I have a .stickyMenu div which I sits in the middle of the page. When the .stickyMenu comes in contact with the bottom of .navB, I want it to stick there. When a user scrolls back up, I want it to unstick in its original position.
Thing is, I also want this to be dynamic because .gapA can be of any height (currently using an offset of 350 as an example).
So in the demo below, when the orange div scrolls to the bottom of the blue div, I want it to stick there when scrolling down, then when scrolling back up, where the grey div is present, I want it to unstick and return to its natural position.
Current code and results:
(function($) {
$(document).ready(function() {
$(window).scroll(function(e) {
var $el = $('.stickyMenu');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 350 && !isPositionFixed) {
$el.css({
'position': 'fixed',
'top': '90px',
'width': '100%',
'left': '0px',
'background': 'orange',
'z-index': '1'
});
}
if ($(this).scrollTop() < 350 && isPositionFixed) {
$el.css({
'position': 'static',
'top': '50px'
});
}
});
});
})(jQuery);
body {
margin: 0;
}
.wrap{
position: relative;
display: block;
}
.wrap .navA {
background-color: red;
height: 50px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.wrap .navB {
background-color: blue;
height: 90px;
position: fixed;
top: 50px;
left:0;
width: 100%;
}
.gapA{
height: 300px;
background-color: grey;
}
.stickyMenu {
height: 70px;
background-color: orange;
}
.gapB{
height: 1500px;
background-color: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="navA"></div>
<div class="navB"></div>
</div>
<div class="gapA"></div>
<div class="stickyMenu"></div>
<div class="gapB"></div>
Try This
(function($) {
$(document).ready(function() {
$(window).scroll(function(e) {
var $el, nav, top,
$el = $('.stickyMenu');
nav = $('.navB');
top = nav.height() + nav.position().top;
if ($(this).scrollTop() >= top) {
$el.css({
'position': 'fixed',
'top': top,
'width': '100%',
'left': '0px',
'background': 'orange',
'z-index': '1'
});
}else{
$el.css({
'position': '',
'top': top,
'width': '100%',
'left': '0px',
'background': '',
'z-index': ''
});
}
});
});
})(jQuery);
body {
margin: 0;
}
.wrap{
position: relative;
display: block;
}
.wrap .navA {
background-color: red;
height: 50px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.wrap .navB {
background-color: blue;
height: 90px;
position: fixed;
top: 50px;
left:0;
width: 100%;
}
.gapA{
height: 300px;
background-color: grey;
}
.stickyMenu {
height: 70px;
background-color: orange;
}
.gapB{
height: 1500px;
background-color: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="navA"></div>
<div class="navB"></div>
</div>
<div class="gapA"></div>
<div class="stickyMenu"></div>
<div class="gapB"></div>
Fiddle
Hello,
I found sticky sidebar jQuery script, but the fixed element (sidebar) floats to the left once I start scrolling down. I am trying to keep it on the right-hand side the whole time. Also, I am trying to get some spacing around sidebar once it starts scrolling, as now it's just stuck to the very top.
I trust it's a simple fix but JavaScript is like a dark forest to me, I tried to change couple things, tried to look online but can't seem to find the answers or I just don't know how to look for them so I apologise if this has been asked before.
$( document ).ready(function() {
console.log( "document ready!" );
var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: right;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>
I used the Sticky-Kit.js plugin. That worked for me. See below, it keeps your sidebar to the right the entire time and has the sticky effect you're after:
$(document).ready(function() {
console.log("document ready!");
$(".sidebar").stick_in_parent();
});
.container {
width: 1000px;
float: left
}
.header {
clear: both;
margin-bottom: 10px;
border: 1px solid #000000;
height: 90px;
}
.sidebar {
float: right;
width: 350px;
border: 1px solid #000000;
}
.content {
float: left;
width: 640px;
border: 1px solid #000000;
height: 800px;
}
.footer {
clear: both;
margin-top: 10px;
border: 1px solid #000000;
height: 820px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
<div class="container">
<div class="header">
This is header
</div>
<div class="sidebar sticky">
This is side bar
</div>
<div class="content">
This is main content
</div>
<div class="footer">
<div class="sticky-stopper"></div>
This is my footer
</div>
</div>
You can use JQuery's css() method to apply css on scroll to the element to achieve the desired effect.
Change the JavaScript as follows:
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff, right: '0px' });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset, right: '0px' , margin: '10px 10px 0px 0px'});
} else {
$sticky.css({position: 'absolute', top: 'initial', right: "0px", margin: '0px'});
}
A css property of right:0px is applied to the element on scroll, since it's position becomes aboslute on scroll.
margin: 10px 10px 0px 0px was also applied to the element to provide additional spacing around it when scrolling. This is then sent to margin:0px when the scroll stops.
You will also need to adjust the css of the content css class, if you do not want your side bar sitting on top of the content area.
.content {
width: 550px;
border: 1px solid #000000;
height: 800px;
}
Here is an updated fiddle demonstrating these changes.
I want to animate an image to follow the shortest path to another element after clicking on another element.
How to do that? Is there already some handy jquery library for this?
What I mean? Imagine a bullet(image) following the shortest path toward the target(div)
I have this HTML code:
<style>
.click-me {
display: block;
float: left;
position: relative;
width: 10px;
height: 10px;
}
.image-will-go-after-me-after-click {
display: block;
float: left;
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: red;
}
</style>
<img class="click-me" src="bullet.png">
<div class="image-will-go-after-me-after-click">
<img class="i-will-be-hit" src="target.png">
</div>
How to do that?
I would do something like this :
// js :
$('.click-me').click(function() {
var target_top = $('.i-will-be-hit').offset().top;
var target_left = $('.i-will-be-hit').offset().left;
$(this).animate({
'top': target_top + 'px',
'left' : target_left + 'px'
}, 1000);
});
I have a fixed header and menu bar and there is a container div when i scroll down the container div does not hide itself below the menu bar as shown in image below is the jquery code i am using. Please help to solve my issue.
var header= $('.header');
var start_div = $(header).offset().top;
var menu_div = $('.menu');
var menu = $(menu_div ).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(header).css('position',((p)>start_div ) ? 'fixed' : 'static');
$(header).css('top',((p)>start_div ) ? '0px' : '');
$(header).css('width','840px');
$(header).css('min-height','108px');
});
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop()+100;
$(menu_div).css('position',((p)>menu) ? 'fixed' : 'static');
$(menu_div).css('top',((p)>menu) ? '110px' : '');
$(menu_div).css('width','575px');
$(menu_div).css('height','57px');
});
Unless I'm missing something you don't need jQuery or even JS to do that.
Check the snippet (codePen here)
html,
body {
width: 100%;
height: 100%;
background-color: white;
}
.header-wrapper {
top: 0;
right: 0;
left: 0;
position: fixed;
height: 160px;
background-color: white;
}
.header {
background-color: cyan;
height: 100px;
width: 100%;
}
.menu {
width: 100%;
height: 50px;
background-color: green;
margin-top: 10px;
}
.content {
color: #fff;
background-color: black;
margin-top: 170px; /* same as height of header + nav + margins + 10px for coolness*/
}
<body>
<div class="header-wrapper">
<div class="header">Blue Header</div>
<div class="menu">Green Menu</div>
</div>
<div class="content">
My content<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
blabla
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
blabla
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
Use the css z-index property.
.header, .menu {
z-index: 2
}
.container {
z-index: 1
}
http://www.w3schools.com/cssref/pr_pos_z-index.asp