I have fancybox triggered on a link that loads content from a hidden div.
If I close the fancybox and click the link again, it loads up blank the second time around
Here's my code:
$.fancybox({
content: $target
});
Any ideas?
I've had a lot of bother with other people's light boxes, issues similar to yours, and other issues with not displaying content and such.
This quick bit of code creates the same as the fancybox plugin (essentially), this is what I use all the time, and its cross browser compatible and easy to debug and change when your content doesn't fit or comes out screwy or anything.
<script type="text/javascript">
jQuery(document).ready(function($){
$('a.clickme').click(function(){
// this creates an overlay
var theOverlay = $('<table class="overlayTable"><tr><td style="vertical-align:middle;text-align:center;padding:0"></td></tr></table>')
.click(function(){ $(document).unbind('keyup'); $(this).remove(); });
// this creates the white "inner" box
$('<div></div>')
.attr('id','insideContent')
.css({
'display':'inline-block',
'background':'#fff',
'padding':'20px'
})
.append('<p>Some content here... you can load anything you want - or copy it from another div if you want...</p>')
.appendTo($('body'))
.wrap(theOverlay)
.click(function(e){ e.stopPropagation(); });
$(document).bind('keyup', function(e){
// this binds the esc key to close the overlay
if(e.keyCode==27) { $(document).unbind('keyup'); $('table.overlayTable').remove(); }
});
});
});
</script>
<style>
.overlayTable {
background: url("url/to/transparent/png/for/overlay/background.png") repeat scroll 0 0 transparent;
border-collapse: collapse;
border-spacing: 0;
height: 100%; width: 100%; z-index: 999;
left: 0; position: fixed; top: 0;
}
</style>
Feel free to make it into a plugin or similar. As you're just filling a div with content you can put any HTML or anything in there you want.
You can also add your own touches, such as the close button (all it needs to do is call $('table.overlayTable').remove();).
Related
I wanted to scroll to the bottom of the page using vanilla JS, but I encountered a problem. The code below is supposed to scroll to the bottom of the page:
window.scrollTo(0,document.body.scrollHeight);
Whereas all it does is logs "undefined" in the console. Inputting
document.body.scrollHeight
returns an integer 736. Other than that, it doesn't matter what I input into the function's parameters, nothing happens. What more, it only happens on one website. What may matter (not sure) is that the website hides its vertical scrolling bar, even thought it has a really long list of content.
The problem might be that the actuall scroll that you have on the website is not the scroll of the body but a scroll of another element inside that body.
Here is an example:
$('#btn1').click(function() {
window.scrollTo(0,document.body.scrollHeight);
});
$('#btn2').click(function() {
el = $('.a')[0];
el.scrollTop = el.scrollHeight;
});
body {
overflow: hidden;
margin: 0;
padding: 0;
}
div.a {
height: 100vh;
overflow: auto;
}
div.b {
height: 1500px;
position: relative;
}
div.c {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<div class="b">
<button id="btn1">Scroll body - doesn't work</button><br />
<button id="btn2">Scroll element - will work</button>
<div class="c">This is at bottom of page</div>
</div>
</div>
Note - the usage of jquery is only to make the example shorter.
Put some content in your page o style the body heigth = 1500px for example, then try to execute same code.
Solved. This is what had to be done:
document.getElementsByTagName('body')[0].style.display = "block";
For whatever reason, changing the display to "block" enabled the scrolling using the given code:
window.scrollTo(0,document.body.scrollHeight);
If you will try to type in browser's console like a var a = 5 you also will get undefined. It happens that your example and my did not return anything.
I've been searching on many posts but almost all of them are confusing.
I'm working with animate.css into a which is at the middle of my page.
For default the animation is played when the page is loaded, but i want that it play when i reach the (when i'm scrolling).
Please, don't say about JS Reveal, i'd like to use the animation from animate.css
What i was trying:
HTML
<!-- Others div above -->
<div class="row sf-medida" id="sf-medida" onscroll="Animar();">
<!-- Others div below -->
JS
function Animar() {
setTimeout(function(){
document.getElementById("sf-medida").style.visibility = "visible";
$("#titulo-general").addClass("animated fadeInLeft");
$(".sub-titulo").addClass("animated bounceInRight");
$(".titulo-izquierda").addClass("animated swing");
$(".texto-1").addClass("animated fadeIn");
$(".texto-2").addClass("animated fadeIn");
},1000)
}
But it doesn't work, however, i've tried adding
window.addEventListener("scroll", Animar);
But what it does is that the animation is played whenever i scroll on the page,
This can be very easily done using little jquery. All you need to do is listen to the scroll event, then check if user have scrolled to the target element. If the user did, then add animation class from your animate.css. Adjust your if condition according to your desires. Check the below code and fiddle https://jsfiddle.net/15z6x5ko/ for reference
$(document).ready(function(){
$(document).scroll(function(evt){
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
var v1 = $(this).scrollTop();
if( v1 > v2 ){
console.log('in');
$('.box').addClass('animated flip')
}
});
});
So as per your request, let me try to explain the code line by line
$(document).ready(function(){
This is easy to understand. It just waits for browser to load all HTML & CSS first and when everything is loaded, the javascript code inside this function will run.
$(document).scroll(function(evt){
This is an event handler, our callback function will run whenever user scrolls on document. Remember change $(document) according whatever the parent is of your target element. So if your target div is inside another div whose class is .parent then use $('.parent').scroll . As for my code I am listening the event on document. When my document scrolls, my event will trigger.
var v1 = $(this).scrollTop();
This code will get the amount of scrolling user had done in pixels.
var v2 = Math.abs($('.box').position().top - $(window).height()/2);
This is a simple math that checks the position of my target div from its parent element subtracting the half of the size of window from it. This will return the pixel positing of your target div. So when user reaches this pixel positing while scrolling, your animation will start.
$('.box').addClass('animated flip')
Now this code simply adds the animation css classes into the target div as soon as user scrolls to the target div.
I'm using "WoW.js" for my scroll reveal library. It's pretty easy to use, like for real. One line of code
<div class="wow fadeIn">content</div>
Here, take a look: http://mynameismatthieu.com/WOW/docs.html
Here's an example using Jquery.
In it we use .scrollTop and .height to measure the videos container from the top of the page so that we know when it comes into view when scrolling. (it's actually set to load when it reaches 100px below the bottom of the viewable area, a sort of preload. you can adjust it to whatever you like.)
The video load is done by copying the url from data-src= into src= when the video container is at the desired spot on the page. (in this case, 100px below the viewable area)
fiddle
note, the video won't load on stack so be sure to view the fiddle
https://jsfiddle.net/Hastig/xszu6b1p/
I scraped it together from these two answers..
Youtube Autoplay
Ladyload Images
$(window).scroll(function() {
$.each($('iframe'), function() {
if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
var source = $(this).data('src');
$(this).attr('src', source);
$(this).removeAttr('data-src');
}
})
})
body {
margin: 0;
}
.filler {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}
.filler-top { background-color: blue }
.filler-btm { background-color: green; }
.video-container {
/* css tricks - responsive iframe video */
/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
display: flex;
justify-content: center;
background-color: red;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filler filler-top">filler top</div>
<div class="video-container">
<iframe data-src="https://www.youtube.com/embed/f0JDs4FY8cQ?rel=0&autoplay=1"></iframe>
</div>
<div class="filler filler-btm">filler bottom</div>
I have a div containing three buttons. The div needs to be draggable, so that you can drag all three buttons around the screen together. That works fine, but the problem is that when I click on of the individual buttons it inherits the draggable id and it is draggable on it's own. I do not want that to happen. So my question is: how do I make my buttons draggable, but make them always stay together and keep them clickable. I added the code below, but here is a JSFiddle: http://jsfiddle.net/2ga50vvt/
So to be clear: the div also needs to be draggable through dragging one of the individual buttons, but then the rest of the div needs to stick with it. Now dragging an individual button only moves the button.
P.S. I do not want to use JQuery UI
HTML:
<div id="draggable" class="ui-widget-content">
<button ng-click="menu.shown = !menu.shown">MENU</button>
<br>
<button ng-click="disconnect()">CLOSE</button>
<br>
<button ng-click="">KEYS</button>
</div>
JS
$(document).ready(function() {
var $dragging = null;
$('body').on("mousedown", "#draggable", function(e) {
$(this).attr('unselectable', 'on').addClass('dragged');
var el_w = $('.dragged').outerWidth(),
el_h = $('.dragged').outerHeight();
$('body').on("mousemove", function(e) {
if ($dragging) {
$dragging.offset({
top: e.pageY - el_h / 2,
left: e.pageX - el_w / 2
});
}
});
$dragging = $(e.target);
}).on("mouseup", ".dragged", function(e) {
$dragging = null;
$(this).removeAttr('unselectable').removeClass('dragged');
});
});
CSS:
body {
padding: 50px;
}
.dragged {
background-color: yellow;
}
#draggable {
position: fixed;
width: 150px;
height 150px;
padding: 0.5em;
background: red;
background-color: black;
z-index: 1000;
cursor: move;
float: left;
}
Update 1
This is a working solution: http://jsfiddle.net/2ga50vvt/3/
However when I click on the div and start dragging the center of the div jumps to my cursor. It works great, but it looks a bit wonky. Is there a way to prevent the div from moving to my cursor?
Your help is most welcome.
You can read the target property of the event and return false to avoid all not #draggable to be draggable.
if(e.target.id !== "draggable") {
return false;
}
The edited fiddle:
http://jsfiddle.net/2ga50vvt/1/
It works perfectly, but one suggestion: don't target with ids because with this code you can't drag more of one element (ids must be unique), so the workaround is to write an attribute or a classname and play with it.
Good luck.
Use $dragging = $('#draggable'); instead of $dragging = $('e.target');
It will drag div if you try to drag using cursor on button. It will drag #draggable instead of target.
Working Fiddle
Presuming you're opposed to JQueryUI for it's file size, I'd still recommend a prebuilt solution because why reinvent the wheel?
Draggabilly is a really nifty library that I've used when resource size has been an issue. It's 20k minified (obviously even smaller gzipped) and available on a CDN - which in itself has lots of benefits e.g. caching.
$(function() {
$( "#draggable" ).draggabilly();
});
There's a few CSS hooks, different options, events etc.
JSFiddle here
See this fiddle: http://jsfiddle.net/r0mvyLmx/
I have to write a simple jQuery horizontal carousel from scratch, but I've stumbled into the following issue: when the next button is pressed the current element slides out of view just fine, but the next element does not slide in. It shows up only after the previous element is completely out of view. If you've not understood me, this is the effect I'm after: http://jsfiddle.net/yvD5S/ (next and previous slides sliding at the same time).
Here's my code:
$('#carousel-outer button:last').on('click', function () {
var slide = $('#carousel-inner .item.active');
slide.animate({'margin-left':'-480px'},2000,function() {
slide.css({ 'margin-left': 0 });
slide.parent().find('div:last').after(slide);
slide.removeClass('active');
slide.parent().find('div:first').addClass('active');
});
});
Whoops, the issue turned out to be pretty simple. It was not the jQuery, but actually the CSS, that is faulty. On the inner wrapper of the carousel, I had given it the same width of the outer wrapper and the slides weren't displaying inline, but rather block, so they weren't able to flow after one another. I've updated the fiddle for anyone who is interested in the issue: http://jsfiddle.net/r0mvyLmx/1/. There was also a minor change in the JS, in order to keep the inactive elements with display:none.
CSS:
#carousel-outer {
width: 480px;
margin: 0 auto;
overflow: hidden;
}
#carousel-inner {
width: 1600px;
height: 200px;
overflow: hidden;
}
jQuery change:
$('#carousel-outer button:last').on('click', function () {
var slide = $('#carousel-inner .item.active');
slide.next().addClass('active');
slide.animate({'margin-left':'-480px'},2000,function() {
slide.css({ 'margin-left': 0 });
slide.parent().find('div:last').after(slide);
slide.removeClass('active');
});
+++++i add mention+++++
thanks guys for your answers,
but, i think, i missed something to write more.
when i click the button to show the div(#pop), it works right at the scroll on the top.
but, when i go down the scroll, the div(#pop) goes up in the window(height:0) not in "bottom:10%" like at the scroll on the top.
so, i'm trying your answers now, but, i'm not succeed yet T_T HELP!! :)
=================================================================================
Here are my codes.
I have a floating menu and one button of them works for showing a div id = pop, which is floating too.
I want to hide the div #pop when window starts, and when the button's clicked, it shows.
So I added codes display:none to hide, but when i click the button to show the div #pop, the div #pop is anywhere, not in bottom: 10% in CSS.
HTML
<div class="menu">
<img src="btnUp.png"><br/>
<img src="btnMe.png" id="pop_bt"><br/>
<a href="#scrollbottom">
<img src="btnDown.png">
</a>
</div>
<div id="pop">
<div>
POP UP
</div>
</div>
CSS
#pop{
display: none;
width: 300px;
height: 400px;
background: #3d3d3d;
color: #fff;
position: absolute;
bottom :10%;
left: 30%;
z-index: 3;
}
Javascript
$(document).ready(function(){
var boxtop = $('.menu').offset().top;
$(window).scroll(function(){
$('.menu').stop();
$('.menu').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
$(document).ready(function() {
$('#pop_bt').click(function() {
$('#pop').show();
});
$('#pop').click(function() {
$('#pop').hide();
});
});
$(document).ready(function(){
var boxtop = $('#pop').offset().top;
alert(boxtop);
$(window).scroll(function(){
$('#pop').stop();
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
});
});
Actually, I'm not a programmer, just a designer, so I'm very fool of HTML/CSS/Javascript.
Can anyone help me?
Display none is removing your button from the layout.
Same on .hide().
Use opacity 0 to hide the dig but keep it in your browser.
In the absence of a fiddle, I can do some guess work only. Looks like the line below is the problem:
$('#pop').animate({"top": document.documentElement.scrollTop + boxtop}, 800);
It sets a top value and moves the layer to some other place. It should work fine if you remove that.
use this...
$(document).ready(function()
{
$("#pop").hide();
$("#button_id").click(function()
{
$("#pop").show();
});
});
is this you actually need?