How to trigger on "appearance in viewport" - javascript

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?

Related

Hyperlinks don't work with ajax / jquery?

So I'm constructing a induction-type webpage, I'm using a template which someone has already previously built in order to see how it fits my needs
Essentially, it includes a dynamic page switcher that uses previous and next buttons to swap out the body content without having to load another entire page.
EXAMPLE: https://css-tricks.com/examples/DynamicPage/
Upon clicking a hyperlink inside the main content, the body will show the correct content from the external pages. However, if I click either of the navigation links up top ("Home >> Inductions >>") the link is not opened as a new page, but instead I think ajax attempts to load that page inside the ajax-body section.
Specifically in the codepen, this is the navbar I'm mentioning which I do NOT want ajax to work on. I've tried multiple fixes but finally throwing my hands in the air.
<nav id="location">Home >> Inductions >> Vehicle 1</nav>
What I am aiming to build is attempt something like this: https://css-tricks.com/examples/DynamicPage/
This is the creator showing how its made, if I am unable to describe it as well as I should: https://css-tricks.com/dynamic-page-replacing-content/
I made a codepen the best I could, without being able to upload the other 2 pages which ajax will load the bodies from - https://codepen.io/dylan-mclean-the-vuer/pen/XWbONyP
Just imagine that clicking the 'prev' or 'next' will load a body inside the contained from external HTML docs. I couldn't figure out how to use multiple HTML files. I still need to make a proper prev/next in JS somehow still, just will take some time! Currently, prev just links to one HTML doc and next links to another.
Keep in mind I'm still at the diploma-grad coding level, so I'm sorry if I'm missing an obvious solution, or if its too messy to understand!

Best way to display a popup container with lots of data

So I am developing a website (ASP.Net Core MVC) and I am trying to display a container, with potentially lots of data inside, as soon as I click on a Button see the image.
Each row has its add button. There will be only around 10-30 buttons on a page at once. As soon as you click on such a button the showed pop up should display next to the clicked button. As you can see in the picture the pop up may contain a lot of data itself. And this data might differ from each row.
What is the best approach?
Placing each these pop ups already in the HTML and on click display: block and display: none when hovering away.
With jQuery and using the append method and summon the popup next to it and remove it after hovering away.
Or is there even a different approach to this?
Why am I asking?
I am concerned in terms of performance and loading time.
In my opinion there are downsides and upsides to both approaches.
For approach 1:
This will cause a slower initial load time but will be faster to use than approach 2 when it's loaded.
Approach 2:
A downside to this is jQuery needs to be loaded for this. I don't know if you use it throughout your project. But just for this, it would be a little bit overkill.
However initial loadtime can be fast and you could use AJAX to load each data when it's clicked.
I'm not a programmer with 10 years of experience, so this answer is pure my opinion and what I think about it.
Hope this opens a discussion!

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();

replacing showModalDialog causes loss of form post functionality

I am replacing the showModalDialog function which no longer works in Chrome and FF. We have many applications using that. The problem is, pop up windows do post instructions to the web server and update the database. For instance if there's a list of accounts on screen and edit is clicked on one of the accounts, an edit page appears as a pop up, posts changes back to the web server, then the list is refreshed with changes. The entire list may be refreshed or just text that changed.
I made a javascript function to do pop up content using overlays. I thought it would be simple to replace showModalDialog calls with the javascript function, but I did not consider post instructions sent by the pop up page to update the database, and complexity to facilitate that. Posting can be done via ajax-like functionality, encapsulated in a set of functions. Before I start writing code to do this I'd like to know what other people have done in this circumstance. Thanks
I wrote some javascript to do everything I want. Since my pop up windows had javascript, I needed to run javascript upon rendering modal content, and also when the modal content went away. This will produce any number of overlays on top of each other, managing each. Content can optionally appear in a frame with a title bar, closely matching the functionality of showModalDialog.
Download at http://bikehappy.org/modal.html . If used, please give feedback saying if it works and provide update suggestions.

JS Progress bar not updating with document.write

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.

Categories

Resources