Very impressed with jQuery lightGallery, it's been a joy to use. As per the first example on the lightGallery website, Gallery with animated thumbnails (http://sachinchoolur.github.io/lightGallery/examples.html) I have moved navigation arrows to the sides but have left the thumbnails hidden.
#lg-gallery .thumb-cont .thumb-info {
display: none;
}
#lg-action {
position: static;
}
#lg-action a#lg-prev,
#lg-action a#lg-next {
margin-top: -14px !important;
position: absolute;
top: 50%;
z-index: 9999999;
font-size: 18px;
}
#lg-action a#lg-prev {
left: 18px;
}
#lg-action a#lg-next {
right: 18px;
}
I have moved the open thumbs button next to the gallery close button at the top right hand corner of the window, as follows.
#lg-action a.cl-thumb {
position: absolute;
top: 18px;
right: 50px;
z-index: 9999999;
}
So, how do I hook-up an open/close toggle for the thumbs using the thumbs button? I guess I need to look at the onOpen callback, but I'm not sure how to use it, something like this perhaps.
onOpen: function() {
$("#lg-action a.cl-thumb").on("click", function(e) {
e.preventDefault();
if ($("#lg-gallery").hasClass("open")) {
$("#lg-gallery .thumb-cont").slideDown();
$("#lg-gallery").removeClass('open');
}
return false;
});
}
This (obviously) does not work.
Solved this by adding a function to the onOpen callback. I added a class called 'open-toggle' (and set the required css) to #lg-gallery.open when the thumbs button is first clicked. The second click removes the 'open-toggle' and 'open' classes from #lg-gallery and re-sets the css.
onOpen: function() {
$("#lg-action a.cl-thumb").on("click", function() {
$gallery = $("#lg-gallery");
if ($gallery.hasClass("open-toggle")) {
$gallery.removeClass('open-toggle open');
$("#lg-gallery .lg-slide").css("padding-bottom", "0");
}
else {
$gallery.addClass("open-toggle");
$("#lg-gallery.open .lg-slide").css("padding-bottom", "120px");
}
});
}
EDIT
I found that the images don't get out of the way if you toggle the thumbs bar, but they do get out of the way for the example on the website. I opened up Firebug and found that the website example page has a file called base.css which contains the following line:
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
I added this line to my css and animated the padding-bottom so that the images didn't jump to size when the thumbs were toggled.
onOpen: function() {
$("#lg-action a.cl-thumb").on("click", function() {
$gallery = $("#lg-gallery");
if ($gallery.hasClass("open-toggle")) {
$("#lg-gallery .lg-slide").animate({
"padding-bottom": 0
}, 500);
$gallery.removeClass('open-toggle open');
}
else {
$("#lg-gallery.open .lg-slide").animate({
"padding-bottom": 120
}, 500);
$gallery.addClass("open-toggle");
}
});
}
Anyway, maybe this will point someone in the right direction.
Related
When using a combination of jQuery and CSS to trigger my navbar to shrink on scroll, it get's buggy when you scroll back up to a certain position, I have linked a video as an example.
I have tried two different methods. The first is using $(window).scrollTop) with an if statement and a series of .addClass and .removeClass. The second thing I have tried is using $(window).scrollTop) with a series of .css dynamic style modifications. Both of these attempts render the same end result that is shown in this video https://youtu.be/YXKsrL1cghs .
My first jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").removeClass("py-5");
$(".navbar").addClass("compressed");
} else {
$(".navbar").addClass("py-5");
$(".navbar").removeClass("compressed");
}
});
});
My second jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").css({ "padding-top": "10px" });
$(".navbar").css({ "padding-bottom": "10px" });
} else {
$(".navbar").css({ "padding-top": "3rem" });
$(".navbar").css({ "padding-bottom": "3rem" });
}
});
});
My CSS:
.navbar.compressed {
padding-top: 10px;
padding-bottom: 10px;
}
My expected results would be a smooth scrolling fixed navbar that shrinks to a smaller size after scrolling beyond a certain point.
What actually occurs is that when you scroll down past a certain point, for 20px worth of height, it gets super buggy and starts bouncing up and down. Once you clear those 20 or so px it's perfectly fine, but when you scroll back up it acts the same within those 20px.
When watching the video, I noticed that your .navbar has transition: all .3s. It could be the reason that when you remove the class py-5 and add class compressed, it triggers the transition twice.
It would be helpful if you can provide the HTML markup and CSS as well.
The script is manipulating the DOM quite a lot. I am not sure if this is going to fix your problem but it might be a good idea to only change the classes if the have not yet been applied.
$(document).ready(function() {
$(window).on("scroll", function() {
let navbar = $(".navbar");
if ($(window).scrollTop() >= 40) {
if (navbar.hasClass("py-5")) {
navbar.removeClass("py-5");
navbar.addClass("compressed");
}
} else {
if (navbar.hasClass("compressed")) {
navbar.addClass("py-5");
navbar.removeClass("compressed");
}
}
});
});
body {
height: 10000px;
position: relative;
}
.navbar {
width: 100%;
position: fixed;
height: 50px;
top: 0;
transition: all .3s
}
.py-5 {
background-color: blue;
padding-top: 10px;
padding-bottom: 10px;
}
.compressed {
background-color: red;
padding-top: 0px;
padding-bottom: 0px;
}
<html>
<head></head>
<body>
<nav class="navbar py-5">Navigation</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I have build sidebar with css and jquery. It's working fine but i want that when sidebar opens then whole screen except sidebar should get semi-black or disabled.
Here is my working
jsFiddle
How can i make whole screen semi-black or disabled on sidebar open?
You can use a box-shadow on the sidebar:
#sidebar{
box-shadow:0 0 0 10000px rgba(0,0,0,.50);
}
This is black, at .50 opacity. It's set to 10000px to cover the full screen.
Or change rgba(0,0,0,.50) to a solid color like #5a5a5a.
In your case add to your css:
#slide-out.visible:not(.close){
box-shadow:0 0 0 10000px #666666;
}
The general concept to achieve this is fairly straightforward:
Modify the javascript to add a class to the body when the nav is open (I called it nav-open.)
Modify the CSS so that the "overlay" element (you already had one in place) is displayed when the body has the class nav-open
Adjust your overlay element CSS to cause it to show properly (for some reason, it had opacity: 0 on it, which meant it was there, but was not visible).
Here's the relevant CSS:
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
// removed opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 997;
// set display to none by default
display: none;
}
// when the body has the class nav-open, display the overlay
.nav-open #sidenav-overlay {
display: block;
}
Here's the relevant changes to your javascript:
// no-conflict-safe document ready function
jQuery(function($) {
$('#show-hide-menu').click(function() {
if ($('#slide-out').hasClass('visible')) {
// $('#slide-out').removeClass('visible');
$('#slide-out').toggleClass('close');
} else {
$('#slide-out').addClass('visible');
}
// check if the nav is "open"
var open = !$('#slide-out').hasClass('close');
// for simplicity, always first remove the nav-open from the body
$('body').removeClass('nav-open');
// if the nav is open, add the 'nav-open' class to the body
if (open) {
$('body').addClass('nav-open');
}
});
// modify to use "on", is best-practice
// $(document).click(function(e) {
$(document).on('click', function(e) {
var sidebar = $(".sidenav, #show-hide-menu");
if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
$('#slide-out').toggleClass('close');
// be sure the nav-open class is removed when the sidebar is dismissed
$('body').removeClass('nav-open');
}
});
});
Here is a link to your fiddle, modified with these changes to do what you want: http://jsfiddle.net/cale_b/hThGb/8849/
Make a content div below your nav. Something like:
<div id="maincontent" class="">
<p>Lorem.</p>
</div>
Add some styling so it has min-height, etc.
#maincontent {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
min-height: 400px;
}
Add some JS so when the nav menu button is clicked, it toggles on and off a new style class for this area.
$('#show-hide-menu').click(function () {
if ($("div#maincontent").hasClass("overlayed")) {
$("div#maincontent").removeClass("overlayed");
}
else {
$("div#maincontent").addClass("overlayed");
}
});
Define the overlayed class in the CSS.
.overlayed {
background-color: rgba(0,0,0,.8);
}
I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})
Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}
I am trying to get this jQuery dropdown to work properly: http://jsfiddle.net/a2geG/2/
The first problem is that both .bounce-summary div elements are open by default. I'd like them to be closed by default and have included the following to achieve that, but it doesnt seem to work:
.bounce-summary {
width: 75%;
height: 100px;
background: #ccc;
position: relative;
display: none;
}
The second issue is that when then first li element is clicked, the bottom one doesn't transition smoothly but seems to jump a bit as well. How can I prevent this behavior?
Thanks!
Try setting easing: 'swing', it makes it much smoother and just set toggle to false later after defining toggle. Fiddle
$(document).ready(function () {
$("ol.rounded-list li").click(function () {
$(this).find("div.bounce-summary").toggle("slide", {
duration: 700,
easing: 'swing',
direction: 'up'
});
});
$(this).find("div.bounce-summary").toggle(false);
});
Update 1
I just added to .rounded-list the following css:
div.enumerate {
display: block;
margin: .5em 0;
}
while removing margin: .5em 0; from the main div:
Updated Fiddle: Fiddle
The boxes are both expanded because you define:
.rounded-list {
...
div {
display: block;
}
...
}
which takes precedence over the display: none defined in your .bounce-summary, as the aforementioned selector is more specific.
I ll tell you what the problem is :
when you add margin to div then it adds to all the divs.
So when you try clicking to have the bounce effect, the resulting div will have margins on top and bottom as well as the original div which is already present.
added
li{
margin: .5em 0;
}
.bounce-summary{
margin-top: 10px;
}
and removed the margin from the div.
fiddle here
I have been searching for a code snippet that I assumed would already be out there somwhere. There are many different variations that I have found but none of which are best suited for me. I have attempted to modify jsfiddles ive found and tweak other examples but to no avail.
As I have little to no prior experience with javascript and Jquery languages I hoped someone on here could help.
In my current project I have a single page in which all the content is loaded. currently I have six divs all hidden off screen to the right. with a vertical navigation menu sitting on the left. What I want is for when a link with the assigned div is clicked, that targeted div slides on screen from right to left and stops next to the navigation menu.
The twist, however is when a new link is clicked the content of the previous div to slide off screen allowing the newely selected div to replace it.
Hopefully I have explained myself well enough.
The content divs I want slided are =
id="content-one"
id="content-two"
and so on.
Any solutions or pointers in the right direction would be extreamly usefull many thanks in advance.
This is what i was originally trying to modify but i was unsuccessful...
$(document).ready(function(){
$("#navigation li a").on("click", function(e){
e.preventDefault();`enter code here`
var hrefval = $(this).attr("href");
if(hrefval == "#content-one") {
var distance = $('#container').css('right');
if(distance == "auto" || distance == "0px") {
$(this).addClass("open");
activateSlider();
} else {
deactivateSlider();
}
}
}); // end click event handler
// $("#closebtn").on("click", function(e){
// e.preventDefault();
// closeSidepage();
// }); // end close button event handler
function activateSlider() {
$('#container').animate({
right: '350px'
}, 400, 'easeOutBack');
}
function deactivateSlider(){
$("#navigation li a").removeClass("open");
$('#container').animate({
right: '0px'
}, 400, 'easeOutQuint');
}
});
Try like this,
Here .panel your sliding div class
JS Fiddle
$(document).ready(function() {
var settings = {
objSlideTrigger: '#trigger', // link button id
objSlidePanel: '.panel' // slide div class or id
}
$(settings.objSlideTrigger).on('click', function() {
//If the panel isn't out
if (!$(settings.objSlidePanel).hasClass('out')) {
slidePanelOut();
} else if ($(settings.objSlidePanel).hasClass('out')) {
slidePanelIn();
}
});
function slidePanelOut() {
//Animate it to left
$(settings.objSlidePanel).animate({
'right': '-67%'
});
//Add the out class
$(settings.objSlidePanel).addClass('out');
}
function slidePanelIn() {
//Otherwise, animate it back in
$(settings.objSlidePanel).animate({
'right': '-89%'
});
//Remove the out class
$(settings.objSlidePanel).removeClass('out');
}
});
.panel {
width: 85%;
padding: 2%;
position: fixed;
right: -89%;
top: 46px;
z-index: 2;
background: #2F2F2F;
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
border-radius: 1% 1% 1% 1%;
border-radius: 5px;
}
.trigger {
width: 8%;
text-align: center;
color: goldenrod;
position: absolute;
top: 26px;
padding: 0.5% 0%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
background: #2F2F2F;
right: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="panel" class="panel">
<!-- Trigger -->content
</div>
<a id="trigger" class="trigger">click here</a>