I have some javascript inside a function that creates and populates an image carousel. It works fine after activating it in a pop up window the first 5 or 6 times, but then it eventually crashes the browser. I think there's some kind of leak, like something inside of it needs to be deleted before it gets created again. I know it's the carousel because if I get rid of that part of the script, it no longer crashes.
Here's the carousel script:
/* carousel */
var carousel,
el,
i,
page,
slides;
carousel = new SwipeView('#wrapper', {
numberOfPages: slides.length,
hastyPageFlip: true
});
// Load initial data
for (i=0; i<3; i++) {
page = i==0 ? slides.length-1 : i-1;
el = document.createElement('span');
el.innerHTML = slides[page];
carousel.masterPages[i].appendChild(el)
}
carousel.onFlip(function () {
var el,
upcoming,
i;
for (i=0; i<3; i++) {
upcoming = carousel.masterPages[i].dataset.upcomingPageIndex;
if (upcoming != carousel.masterPages[i].dataset.pageIndex) {
el = carousel.masterPages[i].querySelector('span');
el.innerHTML = slides[upcoming];
}
}
});
This script runs every time I click a link that launches a floating window.
I found out that I needed to clear my wrapper div. In the beginning of my function call:
document.getElementById('wrapper').innerHTML = "";
Seems to work.
Related
So I am using the Infinite Scroll script to prevent the user having to move on to the next page to view more products in Woocommerce. Everything works great except...
On iPhone (and iPad) the images that would technically be on the next page do not load at all once "Load More" initiates... so for example, if I have 1-8 products visible and I scroll down - the rest of the products appear, but only the images for the initial 1-8 products load, but the rest do not.
I have tried implementing bug fixes to no avail... just wondering if anyone else has encountered this and managed to find a fix?
<script>
var elem = document.querySelector('.shop-section');
var infScroll = new InfiniteScroll( elem, {
// options
path: '.woocommerce-pagination a.next',
append: '.products',
hideNav: '.woocommerce-pagination',
history: false,
status: '.page-load-status',
});
// iPhone Bug Fix
infScroll.on( 'append', function( response, path, items ) {
for ( var i=0; i < items.length; i++ ) {
reloadSrcsetImgs( item[i] );
}
});
function reloadSrcsetImgs( item ) {
var imgs = item.querySelectorAll('img[srcset]');
for ( var i=0; i < imgs.length; i++ ) {
var img = imgs[i];
img.outerHTML = img.outerHTML;
}
}
</script>
EDIT: I should also add that I noticed an error in the console as follows:
Uncaught ReferenceError: item is not defined
at InfiniteScroll.<anonymous> ((index):970)
at InfiniteScroll.proto.emitEvent (infinite-scroll.js?ver=1:254)
at InfiniteScroll.proto.dispatchEvent (infinite-scroll.js?ver=1:688)
at InfiniteScroll.<anonymous> (infinite-scroll.js?ver=1:1069)
at InfiniteScroll.proto.appendNextPage (infinite-scroll.js?ver=1:1076)
at InfiniteScroll.proto.onPageLoad (infinite-scroll.js?ver=1:1052)
at InfiniteScroll.<anonymous> (infinite-scroll.js?ver=1:1029)
at XMLHttpRequest.req.onload (infinite-scroll.js?ver=1:1249)
I am trying to get my little js script to run once the entire dom or content of the aspx is loaded.
I have loaded the below:
JavaScript that executes after page load
and they still fire everytime an element is loaded.
I also tried
document.addEventListener("DOMContentLoaded", function () {
//Me Script!
});
This kinda works it loades the entire page before running the script for the number of times per element.
Or if there is a work around for my script so that it still forces what I want. Which is just add two slashes to my chosen links. ie file://///jobs/year/etc
if (isFirefox || isChrome) {
//You can use what ever to detect links, you can do it by tag and get every link.
var linkmodify = document.getElementsByClassName("fa-folder-open");
for (var i = 0; i < linkmodify.length; i++) {
var replacementLink = "";
link = linkmodify[i].href;
for (var j = 0; j < link.length; j++) {
if (j == 5) {
replacementLink += '//';
}
replacementLink += link[j];
}
linkmodify[i].href = replacementLink;
}
}
Currently the links only have the standard three slashes.
var haveIDoneMyStuff = false;
var myDOMLoadHandler = function(){
if (!haveIDoneMyStuff){
doMyStuff();
haveIDoneMyStuff = true;
}
}
document.addEventListener('DOMContentLoaded', myDOMLoadHandler);
My problem is that I have loaded up to application frame in js via the funtion i created called createFrame(). The fullScreen functionality isn't working properly ass it goes fullScreen nicely but if I move the application frame around the desktop it will not work properly even when I move it back to it's original position. The code changes the size of the application frame and temporally remove taskbar and user/time info pane at the top. It also doesn't seem to want to allow the use to touch the box that the minimize/exit/fullscreen buttons are in. It just hides everything and leave me with a blank screen.
The code works as follows: var app; creates new application frame(exit/fullscreen/minimize button + content). The width and height are defined by w and h in the functions first line which is called upon in my js file called front-end.js by calling createFrame(500,300); . Content_src should explain itself quit easily although the parameter in not used yet. The fullscreen button should be able to work as stated above but for some reason int wont work properly if I drag it around on the screen. That is ok for now as I have not worked out code to re-position it to 0,0 on the screen. But if I re-position it to 0,0 myself in the desktop it will not end up at 0,0 of the screen. I think this has something to do with me upsetting the position i.e. the application was not in draggable state till I moved it. Any ideas?
var isFullScreen;
function createFrame(w,h,content_src) {
var app = $('<div class = "application-frame ui-resizable-se" style="width:'+w+'px; height:'+h+'px;">\
<div class = "buttons-box">\
<div class = "exit-button">\
</div>\
<div class = "fullscreen-button">\
</div>\
<div class = "minimise-button">\
</div>\
</div>\
<div class = "content">\
</div>\
</div>');
var apps = [];
$(".desktop-box").append(app);
apps.push(app);
$(app).draggable({containment:"parent"}).resizable({containment:"parent",maxHeight: 678,maxWidth: 1361});
$(".exit-button").click(function() {
for(var i = 0; i <apps.length;i++) {
apps[i].pop($(app).fadeOut('very slow'));
for(var f = 0; f < fullscreenArray.length;f++) {
if(fullscreenArray[f]) {
$(".infoPane").show();
$(".info-dropdown").show();
$(".taskbar").show();
fullscreenArray[f] = false;
}
}
}
});
var fullscreenArray = [];
fullscreenArray.push(isFullScreen);
$(".minimisse-button").click(function() {
for(var i = 0; i <apps.length;i++) {
for(var f = 0; f < fullscreenArray.length;f++) {
if(fullscreenArray[f]) {
$(".infoPane").show();
$(".info-dropdown").show();
$(".taskbar").show();
fullscreenArray[f] = false;
apps[i].pop($(app).slideToggle('very slow'));
}
}
}
});
var fullScreenWidth = $(".desktop-box").width();
var fullScreenHeight = $("body").height()+5;
$(".fullscreen-button").click(function() {
for(var f = 0; f < fullscreenArray.length;f++) {
if(!fullscreenArray[f]) {
$(app).css({width:fullScreenWidth});
$(app).css({height:fullScreenHeight});
fullscreenArray[f] = true;
$(".infoPane").hide();
$(".info-dropdown").hide();
$(".taskbar").hide();
}else if(fullscreenArray[f]) {
$(app).css({width:w});
$(app).css({height:h});
fullscreenArray[f] = false;
$(".application-frame").draggable();
$(".infoPane").show();
$(".info-dropdown").show();
$(".taskbar").show();
}
}
});
}
I just found a solution to the problem if anybody else is trying to attempt something similar. All add is $(app).offset({top:0,left:0); in the if statement that makes isFullScreen true. and that will work!
I'm writing a Greasemonkey script to automatically delete my notifications from a site, based on words I enter into a search box.
The delete "button" is basically a link, so I'm trying to open the first link in a new tab. Then, after it loads enough, open the rest of the links, one by one, in that same tab.
I figured out how to get the links I needed and how to loop and manipulate them. I was able to grab the first delete-link and open it in a new tab. I added an event listener to make sure the page was loaded before going to the next link.
I finally made that work so added my search box and button. Then I had to figure out how to wrap the whole thing in the event listener again.
So, I now have the whole thing working, except only the last link loads.
All links are going to my waitFor function so they should open, so it seems the event listener isn't working so it goes through the loop too fast and only the last link loads.
How do I make this script not continue the loop until the previous loaded page is fully loaded?
Complete code except for box and button creation:
var mytable = document.getElementById ('content').getElementsByTagName ('table')[0]
var myrows = mytable.rows
//function openLinkInTab () {
//mywin2.close ();
//}
var mywin2;
mywin2 = window.open ("http://www.aywas.com/message/notices/test/", "my_win2");
var links;
var waitFor = function (i) {
links = myrows[i].cells[1].getElementsByTagName ("a");
mywin2 = window.open (links[0].href, "my_win2");
}
var delnotifs = function () {
var matching;
var toRemove;
toRemove = document.getElementById ('find').value;
alert (toRemove)
for (i = 0; i < 10; i++) {
matching = myrows[i].cells[0].innerHTML;
if (matching.indexOf (toRemove) > 0) {
mywin2.addEventListener ('load', waitFor (i), false);
}
}
}
searchButton.addEventListener ('click', delnotifs, true);
So, why isn't it waiting for `mywin2.addEventListener('load', waitFor(i), false);`? I have a feeling it's something extremely simple that I'm missing here, but I just can't see it.
I also tried mywin2.addEventListener('load', function(){waitFor(i)}, false); and it still does the same thing, so it's not a problem of being a call instead of a pointer.
Swapping mywin2.addEventListener('load', waitFor(i), false); for
if (mywin2.document.readyState === "complete") { waitFor(i)} doesn't work either.
And while I'm at it... every time I see code looping through a list like this it uses
for(i=1;i < myrows.length;i++)
Which was skipping the first link in the list since arrays start at zero. So my question is, if I switch 'i' to zero, and the loop only goes while 'i' is < length, doesn't that mean it won't go through the whole list? Shouldn't it be
for(i=0;i != myrows.length;i++)
When you open a popup (or tab) with window.open, the load event only fires once -- even if you "open" a new URL with the same window handle.
To get the load listener to fire every time, you must close the window after each URL, and open a new one for the next URL.
Because popups are asynchronous and you want to load these links sequentially, don't use a for() loop for that. Use the popup load status to "chain" the links.
Here is the code to do that. It pushes the links onto an array, and then uses the load event to grab and open the next link. You can see the code in action at jsFiddle. :
var searchButton = document.getElementById ('gmPopUpBtn');
var mytable = document.getElementById ('content').getElementsByTagName ('table')[0];
var myrows = mytable.rows;
var linksToOpen = [];
var mywin2 = null;
function delnotifs () {
var toRemove = document.getElementById ('find').value;
for (var J = 0, L = myrows.length; J < L; J++) {
var matching = myrows[J].cells[0].innerHTML;
if (matching.indexOf (toRemove) > 0) {
var links = myrows[J].cells[1].getElementsByTagName ("a");
linksToOpen.push (links[0].href); //-- Add URL to list
}
}
openLinksInSequence ();
};
function openLinksInSequence () {
if (mywin2) {
mywin2.close ();
mywin2 = null;
}
if (linksToOpen.length) {
var link = linksToOpen.shift ();
mywin2 = window.open (link, "my_win2");
mywin2.addEventListener ('load', openLinksInSequence, false);
}
}
searchButton.addEventListener ('click', delnotifs, true);
See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener.
The second argument of the addEventLister function must be a pointer to a function and not a call.
I'm building a very simple lightbox script; when you click a button, the lightbox is created. When you click on the lightbox background, it is removed.
The first time you call the function it works just fine. Click button, lightbox shows, click lightbox, it disappears. However, if you try to click the button AGAIN, nothing happens - the div isn't called. No console errors or anything, don't know what the problem is.
JSFIDDLE http://jsfiddle.net/3fgTC/
CODE
function closeLightBox(){
document.body.removeChild(lightBox);
}
function createElem(){
var elem = "<div id='lightBox'></div>";
var bodyElem = document.body;
bodyElem.innerHTML = elem + bodyElem.innerHTML;
var lightBox = document.getElementById("lightBox");
lightBox.style.width = "100%";
lightBox.style.height = "800px";
lightBox.style.backgroundColor = "rgba(0,0,0,.5)";
lightBox.onclick = function(){
closeLightBox();
}
}
var button = document.getElementsByClassName("btn");
for (var i = 0; i<button.length; i++){
button[i].onclick = function(){
createElem();
}
}
Any ideas?
Don't prepend to innerHTML; that makes the browser re-parse the HTML and re-create every DOM element, losing event handlers in the process. Instead, use document.createElement:
var lightBox = document.createElement('div');
document.body.insertBefore(lightBox, document.body.firstChild);
Furthermore, inline closeLightBox:
lightBox.onclick = function() {
document.body.removeChild(lightBox);
}
Try it.