I'm using Magnific popup to display an upload form where the user can select multiple images to upload and preview them before submitting the form, I let the user preview the images plus add a from inputs underneath the image when he clicks on it to enter the caption and alt for it, here's the code that I have ...
(function() {
if ($("a.uploadMediaImageForm").length) {
$("a.uploadMediaImageForm").magnificPopup({
type: 'inline',
preloader: false,
closeOnBgClick: false,
enableEscapeKey: false,
focus: '#name',
removalDelay: 500, //delay removal by X to allow out-animation
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if ($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
this.st.mainClass = this.st.el.attr('data-effect');
},
open: function() {
if ($("input#imageUpload").length) {
$("input#imageUpload").on('change', function() {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extension = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
if (extension == "gif" || extension == "png" || extension == "jpg" || extension == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function(e) {
$("<li><img src='" + e.target.result +"'></li>").appendTo(previewHolder);
}
previewHolder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Please select only images");
}
});
} //Image upload preview
if($("ul.imagePreview").length) {
$("ul.imagePreview").on("click", "li", function(event) {
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
$(this).find("div").remove();
} else {
$(this).addClass("selected");
$(this).append("<div><label><span>Image Alt</span><input type='text'></label><label><span>Image Caption</span><input type='text'></label></div>");
}
});
$("ul.imagePreview").on("click", "div", function(event) {
event.stopPropagation();
});
}//add form when clicked on an image
},
beforeClose: function() {
// $("ul.imagePreview").empty();
var countFiles = "";
var imgPath = "";
var extension = "";
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
}
},
midClick: true // allow opening popup on middle mouse click. Always set
});
}
})(); //popup Forms and Uploads
div.uploadPopup {
width: 80%;
margin: auto;
background: white;
position: relative;
padding: 40px;
}
label {
width: 100%;
margin-bottom: 20px;
clear: both;
}
ul.imagePreview {
width: 100%;
clear: both;
display: block;
}
ul.imagePreview li {
width: 100%;
display: block;
margin-bottom: 20px;
max-height: 150px;
cursor: pointer;
}
ul.imagePreview li.selected {
max-height: auto;
}
ul.imagePreview li img {
max-height: 150px;
display: block;
margin: auto;
}
<link href="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/magnific-popup.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/jquery.magnific-popup.min.js"></script>
Upload Media
<div id="uploadMediaImageForm" class="uploadPopup mfp-with-anim mfp-hide">
<form action="#">
<label class="upload">
<span>Upload Images</span>
<input id="imageUpload" type="file" multiple>
</label>
<ul class="imagePreview">
</ul>
</form>
</div>
Now everything works fine the first time, but when I close the popup and re-open it again, something wrong happens in the image previewer, it duplicates the images I choose and sometimes doesn't even show the image if it were the last image I choose before closing.
I tried to set all the variables before closing the popup and clear the image preview ul element, but that didn't help.
I need your help guys, what am I doing wrong here?
EDIT
I gave the form itself an id of "fileForm" and tried to reset the whole form and empty the ul.imagePreview before closing the popup with this code ...
$("#fileForm")[0].reset();
$("ul.imagePreview").empty();
But still no luck, it still duplicated any image I upload the second time after closing the popup and opening it again !!
need help here.
You are binding more and more listeners to the same event:
Your form always exists in your document even when the popup is closed, you just hide it most of the time (using the class mfp-hide).
Each time you open the popup, the callback "open" is called, which bind a function to the change event of your input, and this callback do the preview stuff.
But if you open the popup twice, it will bind again the same function to the same event on the same input. That's why you have duplicate: the code is called twice.
Move all your binding outside your callback so that they will be done once:
(function() {
if ($("input#imageUpload").length) {
$("input#imageUpload").on('change', function() {
//Get count of selected files
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var extension = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
if (extension == "gif" || extension == "png" || extension == "jpg" || extension == "jpeg") {
if (typeof(FileReader) != "undefined") {
//loop for each file selected for uploaded.
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function(e) {
$("<li><img src='" + e.target.result +"'></li>").appendTo(previewHolder);
}
previewHolder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Please select only images");
}
});
} //Image upload preview
if($("ul.imagePreview").length) {
$("ul.imagePreview").on("click", "li", function(event) {
if($(this).hasClass("selected")) {
$(this).removeClass("selected");
$(this).find("div").remove();
} else {
$(this).addClass("selected");
$(this).append("<div><label><span>Image Alt</span><input type='text'></label><label><span>Image Caption</span><input type='text'></label></div>");
}
});
$("ul.imagePreview").on("click", "div", function(event) {
event.stopPropagation();
});
}//add form when clicked on an image
if ($("a.uploadMediaImageForm").length) {
$("a.uploadMediaImageForm").magnificPopup({
type: 'inline',
preloader: false,
closeOnBgClick: false,
enableEscapeKey: false,
focus: '#name',
removalDelay: 500, //delay removal by X to allow out-animation
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if ($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
this.st.mainClass = this.st.el.attr('data-effect');
},
beforeClose: function() {
///$("ul.imagePreview").empty();
var countFiles = "";
var imgPath = "";
var extension = "";
var previewHolder = $("ul.imagePreview");
previewHolder.empty();
$("#fileForm")[0].reset();
}
},
midClick: true // allow opening popup on middle mouse click. Always set
});
}
})(); //popup Forms and Uploads
div.uploadPopup {
width: 80%;
margin: auto;
background: white;
position: relative;
padding: 40px;
}
label {
width: 100%;
margin-bottom: 20px;
clear: both;
}
ul.imagePreview {
width: 100%;
clear: both;
display: block;
}
ul.imagePreview li {
width: 100%;
display: block;
margin-bottom: 20px;
max-height: 150px;
cursor: pointer;
}
ul.imagePreview li.selected {
max-height: auto;
}
ul.imagePreview li img {
max-height: 150px;
display: block;
margin: auto;
}
<link href="https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/magnific-popup.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/jquery.magnific-popup.min.js"></script>
Upload Media
<div id="uploadMediaImageForm" class="uploadPopup mfp-with-anim mfp-hide">
<form action="#" id="fileForm">
<label class="upload">
<span>Upload Images</span>
<input id="imageUpload" type="file" multiple>
</label>
<ul class="imagePreview">
</ul>
</form>
</div>
There is a gap on the right side of my page probably 10px. I could fix it using oveflow-x:hidden for the html and body but if I do this, it disable the navbar effect
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 120) {
$("#mainNav").addClass("scrolling");
} else {
$("#mainNav").removeClass("scrolling");
}
});
</script>
That changes the navbar background-color when scroll down.
I tried width:100% as well, but it didn't work neither.
Could someone help me to eliminate the gap without affect this function?
Thank you
Got it. See http://jsfiddle.net/uffo6you/3/ The CSS specificity ranking of .scrolling wasn't strong enough to override #mainNav. Width and overflow shouldn't have any bearing on this at all. Pls confirm?
<style>
#mainNav{
height: 20vh;
width: 80%;
background-color: blue;
color: white;
position: fixed;
}
#mainContent{
height: 200vh;
padding-top: 20vh;
}
.scrolling{
background-color: red !important;
}
</style>
<div id="mainNav">Top Navbar</div>
<div id="mainContent">
Content goes here
</div>
<script>
$(window).scroll(function() {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= 80) {
$("#mainNav").addClass("scrolling");
} else {
$("#mainNav").removeClass("scrolling");
}
});
</script>
I'm having trouble getting my navigation bar to function properly when it's not fixed on top of the browser.
Here is the sticky nav code I'm using:
//sticky menu bar
menuTop = $('nav').offset().top;
menuOffset = menuTop;
function fixedMenu(){
scrollTop = $(window).scrollTop();
if (scrollTop > menuTop) {
$('nav').addClass('nav-fixed');
}
else if (scrollTop > menuOffset) {
$('nav').removeClass('nav-fixed');
}
else{
$('nav').removeClass('nav-fixed');
}
}
fixedMenu();
$(window).scroll(function() {
fixedMenu();
});
//scrolling
$('nav a').click(function(){
$('body,html').animate({scrollTop: $( $.attr(this, 'href') ).offset().top - 60}, 400);
//stops page from reloading
return false;
});
});
Thank you in advance!
I looked at your site and found that this class "nav ul" needed a z-index added to it. Try this out, see if it helps(css):
nav ul {
list-style-type: none;
text-decoration: none;
color: #fff;
text-align: center;
position: relative;
min-width: 1200px;
z-index: 1;
}
When page resize in chrome page scrolling bar moving here is my page link:
enter $( window ).resize(function() {
$("section").scrollTo(screenNames[scrollIndex]);
$( "nav li a" ).removeClass('current');
$( "nav li a:eq("+scrollIndex+")" ).addClass('current');
if($(document).height()<400) {
$("nav a").css("height","2px");
} else if($(document).height()<500) {
$("nav a").css("height","4px");
} else if($(document).height()<600) {
$("nav a").css("height","6px");
} else if($(document).height()<700) {
$("nav a").css("height","8px");
} else {
$("nav a").css("height","18px");
}});
section{ position: fixed; height: 100%; width: 100%; top: 5.75em; overflow-y: auto; overflow-x: hidden; z-index:1; }
I have used the jQuery cycle2 plugin on a blog website. What i want the slideshow to do is when there is more than 1 image displayed, the controls will show-at the moment they are hidden through css.
The plugin is used by declaring it in my header (here is the link to the js file:
http://malsup.github.com/jquery.cycle2.js
And then my css contains a class for the container of the slideshow, class for the container for the buttons and a class each for prev and next buttons:
css:
.cycle-slideshow {
height:400px;
z-index:0;
}
.cycle-slideshow img{
width:100%;
height:100%;
z-index:3;
}
.center {
display:none;
}
.center a{
z-index:4;
position:absolute;
margin-top:-48px;
}
.center a:hover {
display:block;
}
.center a#prev, .center a#next{
position:relative;
width:4%;
height:60px;
width:60px;
margin-top:-60px;
font-size:40px;
text-align:center;
color:#FFF;
}
.center a#next{
float:right;
background:url(images/next.png) center -2px no-repeat;
}
.center a#prev {
float:left;
background:url(images/prev.png) center -2px no-repeat;
}
My html code is actually embedded within a wordpress function but the html format goes along the lines of:
<div class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-pause-on-hover="true"
data-cycle-speed="200"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-swipe="true">
//does stuff here
</div>
<div class="center">
</div>
The following code i was told to do (the first three lines) but this still doesn't seem to work.
$(document).ready(function () {
$('.cycle-slideshow').on( 'cycle-initialized', function( e, opts ) {
if ( opts.slideCount > 1 ) {
$(".center").css("display", "block");
}
});
});
Im not the best with jQuery so can anyone help or give me any guidance please?
In this case you are going to want to initialize the slideshow via code AFTER you add the event handler. Remove the cycle-slideshow class so it doesn't auto initialize and then you can do this:
Demo: http://jsfiddle.net/lucuma/zyhrK/1/
$('.slideshow').on('cycle-initialized', function (e, opts) {
if (opts.slideCount > 1) {
$(".center").css({
"display": "block"
});
}
});
$('.slideshow').cycle();