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);
Related
I'm try to add a web loading bar with jQuery on the top of my web, and it's work when I first open this web. But when I press F5 reload web, progress bar won't work and my web didn't show any content either(only show a white background web). Here is my code:
document.onreadystatechange = function (e) {
if (document.readyState == "interactive") {
var all = document.getElementsByTagName("*");
for (var i = 0, max = all.length; i < max; i++) {
set_ele(all[i]);
}
}
}
function check_element(ele) {
var all = document.getElementsByTagName("*");
var totalele = all.length;
var per_inc = 100 / all.length;
if ($(ele).on()) {
var prog_width = per_inc + Number(document.getElementById("progress_width").value);
document.getElementById("progress_width").value = prog_width;
$("#bar1").animate({ width: prog_width + "%" }, 10, function () {
if (document.getElementById("bar1").style.width == "100%") {
$(".progress").fadeOut("slow");
}
});
}
else {
set_ele(ele);
}
}
function set_ele(set_element) {
check_element(set_element);
}
I notice this problem when I editing file, I want check my web and reload the page. I know there's a way using Ctrl+F5, but it's got a little trouble. I want only use F5 can reload my web successfully.
Thanks for anyone answering me.
In your browser, you can also use
CTRL + Shift + R to reload the page and empty the cache.
(⌘ + Shift + R on Mac)
Maybe it will solve your problem ;)
EDIT: I've asked too many questions so I will just leave the part which was
solved in comment.
The second concern is another button that will disable all the photos that are on the site to be seen by te user. When you press it again, the photos will be seen again. SOLVED
I assume it should be done in Javascript, but I'm just starting with learning it, so any help would be much appreciated.
I would like to add functionality to my page.
I have not fully understand the behavior of the first button.
The second button is pretty simple:
just make a script that fetches all the images in the page and sets them to display="none";
<script>
var toggle = true;
function imagesToggle(){
var images = document.getElementsByTagName('img');
if(toggle == true){
for(var i = 0; i < images.length; i++) {
images[i].style.display="none";
}
toggle = false;
}
else{
for(var i = 0; i < images.length; i++) {
images[i].style.display="block";
}
toggle = true;
}
}
</script>
And in the button, add the onclick property:
<button onclick="imagesToggle()">Click on me</button>
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 just copied JavaScript code from Google, and I don't know how to make a hyperlink that will be opened on the current page.
Here's the code which I inserted into the <head> section of my page.
var slideimages = new Array()
var slidelinks = new Array()
function slideshowimages() {
for (i = 0; i < slideshowimages.arguments.length; i++) {
slideimages[i] = new Image()
slideimages[i].src = slideshowimages.arguments[i]
}
}
function slideshowlinks() {
for (i = 0; i < slideshowlinks.arguments.length; i++)
slidelinks[i] = slideshowlinks.arguments[i]
}
function gotoshow() {
if (!window.winslide || winslide.closed) winslide = window.open(slidelinks[whichlink])
else winslide.location = slidelinks[whichlink]
winslide.focus()
}
Here's the code I inserted into the body section:
<script>
<!--
slideshowimages("main.PNG", "mainhover.PNG")
slideshowlinks('index.php', '_self')
//configure the speed of the slideshow, in miliseconds
var slideshowspeed = 2500
var whichlink = 0
var whichimage = 0
function slideit() {
if (!document.images) return
document.images.slide.src = slideimages[whichimage].src
whichlink = whichimage
if (whichimage < slideimages.length - 1) whichimage++
else whichimage = 0
setTimeout("slideit()", slideshowspeed)
}
slideit()
slideit()
//-->
</script>
Everytime I click on the image, the index.php page always appears on the new tab,
is there an easy way, so that the index.php page can be opened on the same page?
I know nothing about JavaScript.
Seeing the HTML will help understand the issue, but this code
if (!window.winslide || winslide.closed) winslide = window.open(slidelinks[whichlink])
else winslide.location = slidelinks[whichlink]
winslide.focus()
basically tells that if this is the first time you run it, then open a new window (window.open(slidelinks[whichlink]) which Chrome for example will use to open a new tab
Else if it's already created, change that window's location to the slide URL (else winslide.location = slidelinks[whichlink] e.g it's as designed to operate in a new window
to change it, you'll need to replace window.open with something that will operate on an iframe or something.
I'm not sure what is the purpose of opening a new window, but this is what the code does
On a side note, I'm not sure you found the best piece of code to run HTML based slides, If you want modern slides, I would try something like http://lab.hakim.se/reveal-js/
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.