I have on my website some lightboxes and now I can scroll them only when my pointer is inside the box.
How can I scroll them outside the box, like when you open a comment on Trello or on Pinterest?
Here is my code:
//Declare vars
var $lightboxAnchor = $("a.list_message");
//Lightbox
$(".overlay-background").hide();
//Lightbox functions from leistungen
$lightboxAnchor.click(function() {
var $attr = $(this).attr("href").replace("#", "");
console.log($attr);
$('div[id=' + $attr + ']').show();
$("body").addClass("noscroll");
});
$(".overlay-background").click(function() {
console.log('alert');
$(this).hide();
$("body").removeClass("noscroll");
});
$(".close_lightbox").click(function() {
console.log('alert');
$(".overlay-background").hide();
$("body").removeClass("noscroll");
});
.overlay-background {
display: block;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-content
{
display: block;
background: #fff;
padding: 1%;
width: 70%;
height:70%;
position: absolute;
top: 15%;
left: 10%;
margin: 0;
cursor: default;
z-index: 10001;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
<div class="overlay-background">
<div class="overlay-content">
<object type="text/html" data="https://en.wikipedia.org/wiki/Dentist" style="width: 100%; height: 100%;" </object>
</div>
</div>
I`ve made this JSFiddle as a representation: jsfiddle.net/9mesun50 As you can see the lightbox can be scrolled only inside it. If I have the pointer outside the lightbox I can scroll it.
Thank you for help!
Related
As you can see I have positioned my divs properly position: relative; for slideshow and position: absolute; for containers
I have looked at similar questions that others posted and tried to fix the issue. It is still not working. Everything else works except slideshows. Slideshow shows only the last image. Does not change. My side panels work perfectly.
previously I had not added $(document).ready(function ()... In hopes of fixing issue I tried it but something else seems to be the problem. Any help would be appreciated, Thank you!
here are my files
//jshint esversion:6
$(document).ready(function (){
$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="/images/IMG_E2670.JPG">
</div>
<div class ="container">
<img src="/images/IMG_E2668.JPG">
</div>
<div class="container">
<img src="/images/IMG_E2665.JPG">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
I made some modifications in $(document).ready() and replaced the images with inline data to visualize the fade in / fade out and the images get replaced now.
Looks like the fadeOut function returns immediately and not after the fading is finished. I created a callback function which gets called once fadeOut, see https://api.jquery.com/fadeOut/ which seems to do the trick.
//jshint esversion:6
$(document).ready(function (){
//$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000, "linear", function() { $('#slideshow > div:first').appendTo('#slideshow'); });
$('#slideshow > div:first').next().fadeIn(1000);
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="data:image/png;base64,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">
</div>
<div class ="container">
<img src="data:image/png;base64,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">
</div>
<div class="container">
<img src="data:image/png;base64,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">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
I am working on a Wordpress site and I have the code below which is working how I want it (only playing once, with the "replay" button appearing at the end)
I would like it to start playing when it is scrolled to ie. in the viewport.
I have seen a few different ways of making this happen on here, but I can't get them to play nice with my current code.
HTML
<div class="spacer">
</div>
<div class="video-wrapper">
<video id="bVideo" muted autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
<div id="playButton" class="playButton" onclick="playPause()"></div>
<div class="replayButton" id="replayButton" onclick="playPause()">REPLAY ↻</div>
</div>
<script>
var bunnyVideo = document.getElementById("bVideo");
var el = document.getElementById("playButton");
var replay = document.getElementById("replayButton");
replay.style.visibility = "hidden";
function playPause() {
if (bunnyVideo.paused)
{
bunnyVideo.play();
replay.className = "replayButton";
replay.style.visibility = "hidden";
}
else
{
bunnyVideo.pause();
el.className = "playButton";
replay.className = "";
}
}
function playPauseControls() {
if (!bunnyVideo.paused) {
el.className ="";
replay.className = "";
} else {
el.className = "playButton";
replay.className = "";
}
}
function videoEnd() {
replay.className = "replayButton";
replay.style.visibility = "visible";
el.className = "";
}
function showControls(){
bunnyVideo.setAttribute("controls","controls");
}
function hideControls(){
bunnyVideo.removeAttribute("controls","controls");
}
/*Google Analytics Tracker Function*/
/*Assuming you've already set up the Google Analytics script function on your webpage. This just activates a trigger event when the video plays.*/
/*function bunnyVideoView() {
ga('send', 'event', {
'eventCategory': 'Bunny Video',
'eventAction': 'play',
'eventLabel': 'Bunny Video View'
});
}*/
bunnyVideo.addEventListener("play", playPauseControls, false);
bunnyVideo.addEventListener("pause", playPauseControls, false);
bunnyVideo.addEventListener("mouseout", hideControls, false);
bunnyVideo.addEventListener("ended", videoEnd, false);
/*Google Analytics Tracker*/
/*bunnyVideo.addEventListener("play", bunnyVideoView, false);*/
</script>
CSS
.spacer {
height: 400px;
}
.video-wrapper {
position: relative;
max-width: 680px;
}
.video-wrapper > video {
width: 100%;
max-width: 100%;
box-sizing: border-box;
vertical-align: middle;
cursor: pointer;
}
/* Hide iOS Play Button */
video::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
.playButton {
border-radius: 100px;
border: 8px solid #fff !important;
height: 100px;
position: absolute;
width: 100px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: pointer;
display: block;
opacity: 0.95;
transition: opacity 400ms;
}
.playButton:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0;
left: 0;
right: -10px;
bottom: 0;
margin: auto;
}
.replayButton {
color: black;
position: relative;
text-align: center;
margin: auto;
margin-top: 0px;
cursor: pointer;
display: block;
opacity: 0.95;
transition: opacity 150ms;
}
.replayButton:hover, .replayButton:focus {
color: #ea7200;
}
.replayButton:before {
height: 45px;
width: 45px;
position: absolute;
top: 18px;
left: 18px;
content: '';
display: block;
border-color: transparent white white white;
border-radius: 50%;
border-style: solid;
border-width: 8px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.replayButton:after {
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 0 45px 22px 22px;
height: 0;
position: absolute;
top: 40px;
left: 15px;
bottom: 0;
right: 0;
width: 0;
content: "";
display: block;
margin: auto;
}
https://jsfiddle.net/ag3sowbg/
I had to solve a similar task some time ago.
First, you add an empty element absolutely positioned in the dead center of the video wrapper.
Next, you define the "belt" of your viewport as a tracking zone for the video trigger.
On window.scroll you simply detect if a collision trigger enters or leaves the trigger area and either play or pause the video.
I hope this helps: CodePen link
PS: I would probably be very careful with adding custom play/replay buttons as lots of media players in different browsers use their own (Safari, Firefox) and you'll most likely end up having two over each other (the browser default always wins, mind you). Been there :) Drop them if they aren't essential...
I am trying to create a overlay to display a internal html page. I started with dynamic DHTML modalbox but the code was outdated for HTML5 browsers(didn't show properly for MS Edge). I found something called LightBox, but it only look like it display images.
Modal Window: http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/dhtmlmodal.htm
LightBox: http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528
All I want is a jquery overlay page that shows internal webpages. Any help?
This should get you started...
in your style section add:
.overlay-background {
display: block;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
cursor: pointer;
z-index: 1000; /* high z-index */
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-content
{
display: block;
background: #fff;
padding: 1%;
width: 40%;
position: absolute;
top: 15%;
left: 50%;
margin: 0 0 0 -20%;
cursor: default;
z-index: 10001;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
in your HTML section add but remember to change the URL to whatever page you want shown:
<div class="overlay-content">
<object type="text/html" data="https://www.google.com" style="width: 50%; height: 50%;"></object>
</div>
<div class="overlay-background">
</div>
I've made a side - dot - navigation. It works fine, except for the active dot. I want the active dot to be filled, but I can't get it to work.
here's the JSFiddle
http://jsfiddle.net/R8f2j/
I know I need Javascript but I've tried several things from other tutorials. Can't figure out what I need.
this is the HTML
<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>
Handgemaakte meubelen door een Groninger vakman
De mogelijkheden
Restauratie
Het Proces
</nav>
</div>
<div id="page1">een</div>
<div id="page2">twee</div>
<div id="page3">drie</div>
<div id="page4">vier</div>
this is the CSS
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 50px;
top: 50%;
width: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 999;
color: transparent;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid #666;
}
.cbp-fbscroller > nav a:hover {
display: block;
position: relative;
z-index: 999;
color: transparant;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid #d7d7d7;
}
#page1 {
width: 100%;
height: 400px;
background-color: red;
}
#page2 {
width: 100%;
height: 400px;
background-color: #98ffbc;
}
#page3 {
width: 100%;
height: 400px;
background-color: #a5d1ff;
}
#page4 {
width: 100%;
height: 400px;
background-color: #ffc1ff;
}
First define your current class CSS:
.cbp-fbcurrent {
background: #ffffff;
}
Then add an event listener to each navigation item that will remove the current class and add it to the clicked element:
var currentClass = "cbp-fbcurrent",
navLinks = document.querySelectorAll('nav a');
for(var i = 0; i < navLinks.length; i++){
navLinks[i].onclick = function(){
var current = document.querySelector("." + currentClass)
current.className = current.className.replace(/(\s)?cbp-fbcurrent/ig, "");
this.className += " " + currentClass;
};
}
Example: http://jsfiddle.net/R8f2j/3/
You can do this with jquery like this:
$('a').click(function(){
$('a').removeAttr('style');
$(this).css('background-color', 'yellow');
});
Here's demo
Page: http://www.bureauforgood.com/RSTR-IA-2B/1.1-Home-Modal.html
Near the end of the body tag I have the following:
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation4.min.js"></script>
<script src="javascripts/foundation.reveal.js"></script>
(note that I changed the name of the js file to "foundation4". This change works fine and I know this because Orbit is working)
Followed by this
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
<div class="reveal-modal-bg" style="display: none"></div>
Click Me For A Modal
Then my closing body and html tags.
(for testing purposes I'm putting my button right at the bottom of the page, uner the footer)
On my CSS file I made sure this was included (the all the Reveal-related CSS that comes with Foundation)
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: black;
background: rgba(0, 0, 0, 0.45);
z-index: 98;
display: none;
top: 0;
left: 0; }
.reveal-modal {
visibility: hidden;
display: none;
position: absolute;
left: 50%;
z-index: 99;
height: auto;
margin-left: -40%;
width: 80%;
background-color: white;
padding: 1.25em;
border: solid 1px #666666;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
top: 50px; }
.reveal-modal .column,
.reveal-modal .columns {
min-width: 0; }
.reveal-modal > :first-child {
margin-top: 0; }
.reveal-modal > :last-child {
margin-bottom: 0; }
.reveal-modal .close-reveal-modal {
font-size: 1.375em;
line-height: 1;
position: absolute;
top: 0.5em;
right: 0.6875em;
color: #aaaaaa;
font-weight: bold;
cursor: pointer; }
#media only screen and (min-width: 768px) {
.reveal-modal {
padding: 1.875em;
top: 6.25em; }
.reveal-modal.tiny {
margin-left: -15%;
width: 30%; }
.reveal-modal.small {
margin-left: -20%;
width: 40%; }
.reveal-modal.medium {
margin-left: -30%;
width: 60%; }
.reveal-modal.large {
margin-left: -35%;
width: 70%; }
.reveal-modal.xlarge {
margin-left: -47.5%;
width: 95%; } }
#media print {
.reveal-modal {
background: white !important; } }
But the plugin doesn't work! Any ideas?
Ok, solved. I forgot to include this
<script>
$(document).foundation();
</script>
Nothing is wrong with any of your code, just make sure to always fully include the snippet below before closing your body tag:
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Also just a suggestion, you can add a button class to your anchor tag to make it even cooler looking. Like so:
Click Me For A Modal
You need to include this script
<script src="javascripts/foundation/foundation.reveal.js"></script>