JS Progress bar not updating with document.write - javascript

I'm using this JS to create progress bars on my website : http://www.webappers.com/progressBar/
On some pages, I use those bars in tables. But for an unknown reason, the first time I load a page containing a table, only the bars are (partially) displayed, the rest of the document isn't rendered :
This is when the table has only 1 row, if there are many rows I then have many of these juxtaposed and the rest of the document is still empty.
Now if I load the page again (typing the URL by hand), it works fine, the table and all the document is rendered as it should. But if I refresh the page (CTRL+R), again the problem appears.
Any idea what is happening ? Using JS debugger (Chrome's one), I can see that the "display" function is called and the "document.write" for the bars is running ok. It just seems that after this the document rendering suddenly stops. No JS error is happening.
As suggested in comments, I should remove the "document.write" and replace it with something else. Any idea what will do the trick ?

Well, if you don't know about Javascript, just ask your favourite search engine for a more recent script of the same type. One that uses the DOM. I'm sure there are plenty out there.

Related

Interacting with elements within nested iFrames, Existing on page but returning null

I am programming a script that will download a report for me. One of my steps involves checking a table for the correct date of the report I want to pull. The website im working on is old, and they are set up using multiple iFrames (they are of the same domain).
From my research, ive come up with this line to return the innerText of a certain row in a table
document.getElementById('iframe1').contentWindow.document.getElementById('iframe2').contentWindow.document.getElementsByClassName('status_table')[5].innerText
iFrame2 contains the table with all the info I want to access. This line works, but only sometimes. When I refresh the page, wait 10 seconds, and run the command, it returns null. It seems after I expand all the elements in google chrome, or mess around with the page a bit it starts working and returning the correct information.
Im not sure what is going on here, am I accessing the elements wrong? Why does it start working after I click things on the page or after I expand the elements in the dev console? Any Help would be appreciated!
For some reason, When I use getElementsByTagName instead of getElementByID It works all the time!
document.getElementsByTagName('iframe')[2].contentWindow.document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByClassName('status_table')[5].innerText.toString();

How to trigger on "appearance in viewport"

I have a project made with Framework7. All content is programmed in one html file. The project contains several pages.
My goal is to update some spans ([id^='Update']) every second whenever they are visible but not when they are not visible on the screen. This will save traffic.
The problem I had with plugins like jQuery.inview or jQuery.appear is that they trigger on the first view but after this they always "see" the element even when I'm virtually on another page and the element is not visible to me.
Edited
If I run $.force_appear(); every second it updates the status - shouldn't this be done "always"?
However the new page just covers the first page - therefore the elements are not disappeared for the plugin even though I don't see them.
I hope this makes it clearer. Putting a demo online is too complex because I have to add the full framework.
Do you have any idea what I could do?

Images not showing up on first time

Hellow everyone,
I'm having a problem on the site where my images' widths are not being calculated properly (they're not showing either on first load as well) inside jCarouselLite plugin.
I wonder if this has something to do with the fact that they're loaded from the CDN and don't have a proper content-type set (or something similar). (Example apartment)
If you check the List of apartments, you can go inside each one by clicking on the name or on the picture. It's INSIDE that pictures do not show up for me in any browser I've tried. If, however, I refresh the page, they show up fine.
Can anyone suggest what may be happening here?

JQuery TouchTouch plugin doesn't display photos if their URLs were dynamically changed

I have a JQuery TouchTouch based gallery on one of my websites. It works perfect when I call it once for the photos list that was loaded with the page. Recently, I needed to add new functionality to this page (the website is online store, I'm talking about page with a product). I need to load same product of a different color without leaving the page (different URLs are still used for this purpose, but I need to change this ASAP because of duplicates affect SEO).
Using AJAX, I'm loading all necessary information about product (including photos URLs) and everything is ok, except the JQTT gallery: if I don't call touchTouch() on selector that was used the first time, during the page loading - nothing works at all (that is obviously, because no photos information auto-updates provided in plugin). However, when I call touchTouch() second time on the same selector, overlay with buttons (arrows) appears, but photo is never loaded, only the loading GIF is shown permanently. I have checked this in Mozilla FireFox and Google Chrome - the same behavior. By the way, thumbnail photos are loaded fine, but displaying them is not directly related to the plugin, because they are only triggers for loading large photos.
The first thing that may help, as I supposed, was a test: call touchTouch() not immediately after AJAX-request and new photos insertion in DOM, but call it after a long delay (for example, 10 secs) to make sure that problem is not in plugin's preloading features (if any) or someting similar. That didn't help.
Then I made the second test: I deleted first touchTouch() call in document-ready (so, plugin doesn't work on document load), then made this call after updating photos. In this case, plugin worked fine.
So, in view of the aforesaid, i'm searching for solution how to make JQTT plugin work after photos list update. The selector is always the same (I mean CSS class name that is used for every photo and that is called in $(selector).touchTouch()).
Here is a real example on website: http://raroom.com/chairs/chair_bertoia/bertoia-1
At the moment, two versions of one product (designer's chair with black seat and with white seat) is available via two links (current is marked with thick black underscore). Second link ends with "bertoia-2" (instead of "bertoia-1").
I writed a function loadProductPage(productId) to load the second product without following a link (you can see code in the bottom of page source). If you call this function from console - you will see the problem described (id of second product in DB is 6, for first is 5, so, if you open first link - call loadProductPage(6)).
Thanks in advance.
It's so pitty, 5 days left and nobody helped me with such an easy question. I found a solution by myself. Having no other choice, rather then to explore the JQuery Touch Touch JS code line by line, I noticed that it creates new div's with class "placeholder" inside the div with id "galleryOverlay", no matter if they were creater earlier or not. I mean, it appends new placeholder-divs to existing ones (at the previous call of touchTouch() method), so it breaks the script logic and it cannot load new photos anymore, because of using wrong placeholder-divs.
The solution is to delete previous placeholder-divs before updating photos and thumbnails URL's and before calling touchTouch() method again. With JQuery it is one simple line of code:
$('#gallerySlider .placeholder').remove();

finding text in ajax returns on Javascript console

My javascript framework uses Ajax to dynamically change certain parts of my page. When I use a javascript console like firebug or the one that comes with Chrome and I try to find some tags it seems that the dynamically altered HTML parts are not searched. I will have to hunt them down manually which is a daunting task at times since the framework generates tons of HTML.
The only info I can find about this concerns finding tags programmatically by traversing the DOM but that is not what I'm looking for, I need my debugger to be able to find those tags when I am examining the code at runtime.
Is there a way around this in any browser?
I've created a simple example to demonstrate here
If you open it with Chrome, start the javascript console before clicking on the button and search for the word tag you will find 1 in the original HTML.
Next, click the button. You will see the change. Now search again for the same word tag. It will not be found. However, if you do a find for ta, it will be found. Looks like the search results are buffered someway and not cleared once the page changes.
Firebug doesn't seem to update the page at all.
I found out that if you start Chrome's javascript console after the Ajax refresh, text can be found however, if the Ajax refresh happens when the Javascript console is allready open, searching capabilities within the refreshed Ajax content is limited. I still can't figure out when it does/doesn't work.
Firebug > HTML Panel > mini-menu > Expand Changes
Then your search will work.
Make sure you are appending the ajax content to the document, at least some hidden div. It would be useful if you provide an example.
You can use jquery expressions in the console if you want to find something particular. Something like that: $('#myid'). Of course, you can search not only by id using jquery.

Categories

Resources