Develop Reference

Why Is My Lazy Loading Page Not Loading Correctly?

I need help in determining why my page using a Lazy Loading jQuery library isn't working correctly. One element or calendar renders correctly, but the other doesn't. I'm enclosing my div content within the <div class='lazyload'> class as specified:
...
<div class='main regularslider owac'>
<div class='lazyload'>
<script type='text/lazyload'>
...
</script>
</div>
...
Note that the JavaScript wasn't produced by me.
I'm using this plugin as inspiration (most of the PHP and all of the JavaScript is identical to what I have): https://wordpress.org/plugins/availability-calendar/
Here is my sample web page: https://applicable-owl.jurassic.ninja/apartments/
I expect to see both calendars with clickable buttons on both sides of the calendar, but one calendar always seems to output the entire collection of divs in a linear succession without having any associated JavaScript with it to render the buttons.
Please also note this is a WordPress site and using two shortcodes to render the calendar content, with one shortcode followed by another.
So I have this with the shortcodes:
[availabilitycalendar apartment="2" language="EN"]
[availabilitycalendar apartment="2" language="EN"]
I'm attempting to increase the speed of the page because without lazy loading, the page has to wait for all the divs to be created.
A link to the relevant PHP responsible for this: https://plugins.trac.wordpress.org/browser/availability-calendar/trunk/public/includes/frontend.php#L104
And for the JavaScript (it appears to be using Slick as inspiration) : https://plugins.trac.wordpress.org/browser/availability-calendar/trunk/public/js/owac.js

HTML tags don't appear in DOM when included using ng-include

I'm trying to include a file using ng-include.
the side-bar appear in the UI but when I say view page source that time the HTML tags of the side-bar doesn't appear.

That is because when you view the source of an HTML page in any browser, it will perform a fresh GET of the original document and display that source code. Since AngularJS injects elements to the DOM dynamically (and because it is "just" JavaScript all together), the original generated by the server-side will not be modified. To see the generated source, use a developer tool of your choice, i.e F12 Developer Tools in IE. Also, you may want to read up on the role JavaScript plays in the whole lifecycle of webpage rendering.

super fast switch menu links without using tab

http://www.revivalx.com/my/#home
try to navigate with the menu, the content load real fast, unlike a normal one. What is the technology behind? I'm sure it isn't tab because I inspected the markup and network tab with Chrome dev tool. Just curious.

By the look of some of the files that have been included it's using backbonejs.org

The website is using Backbone.js
But the underlying technique being used is:
Its loading all the templates
http://www.revivalx.com/my/templates/content/privacyTemplate.html
http://www.revivalx.com/my/templates/content/aboutTemplate.html
,etc
at page load and caching them. Then when you click on the menu it just replaces the html of the container with the template. So its sort of working like tabs.

It is Simple jump to section trick.
First create div with id's like service contact etc.
<div id="contact" ></div>
<div id="service" ></div>
Make sure that the gap between them is such that they both doesn't appear on single page
Now create link like
contact
serice

how to navigate in a mobile app without reloading all resources?

Considering that the mobile app is not native, but made with phonegap (or something simmilar), i am wondering if there is a javascript / jquery library that i can use to navigate from one html page to another one without the need to reload all ls and css resources.
More or less like jQuery Mobile does it.
One issue would be enhancing all the ui and js widgets on each page
Any ideas?

You can do an AJAX call to whatever the local URL is and wrap the entire response in something traversable via jQuery, like...
// on click link ->
$.get('myUrl.html', function(response) {
var new_body, traversable;
traversable = $('<div></div>', {
html: response
});
new_body = traversable.find('body').html();
// code to replace your content here ...
});
And if you have a lot of scripts/styles running per page, you could traverse through the list of traversable.find('link') and traversable.find('script') to compare what has and has not been used yet. Then append to the document after replacing your markup.

I think it is Phonegap you are talking about.
Yes, Jquery mobile is would be a solution to your problem because whenever we change the page in Jquery Mobile, instead of reloading the whole DOM, it only replaces/inserts (depends on if you enable caching) the new page div to be shown.
Thus, all resources you included initially would persist and be usable in all pages.

Depending on how your html and css are written, you could wrap your pages in divs and use css transforms to position them off screen, then scroll them into view when the user clicks a link.
jQuery mobile inside of phonegap is very, very slow.

Bootstrap.js file in both parent and iframe

I am creating a web app using bootstrap by twitter. The app contains of a page which loads up another page of the same domain in an iframe. Now my problem is, if the page that I am loading in iframe also contains bootstrap.js file it starts conflicting with the app.
For example, my app has a accordion (collapse) http://twitter.github.com/bootstrap/javascript.html#collapse built using the data attributes.
Once a page with bootstrap.js is loaded the collapse event starts getting fired twice.So something like
<head>//Bootstrap css and js files included</head>
<body>
<div>
//Collapsible Menu #1
</div>
<iframe>
<head>
//BootStrap.js script from same location as parent
</head>
<body>
// Another Collapsible Menu #2
</body>
` </head>
</iframe>
</body>
Here when I try to click on Menu #1, the code of Bootstrap.js gets triggered twice which ends ups in showing and then hiding the menu.
But my problem is not just limited to the menu. I need to be able to use bootstrap.js in my app and also allow pages which already contain bootstrap.js to be loaded inside the iframe.
Is there a way around this or am I doing something wrong?

found the problem.. it was very specific for my app. The way it was working was - there was an included JS file to trigger the app inside the "target" webpage. The JS file would not remove everything from the page and build an iframe to put load the content of the "target" inside iframe. Now in this case, I had BootstrapJS running before the app.js file which in turn resulted in getting executed in the "parent" frame and then when the app loads it was getting reloaded causing the conflict (or multiple events due to multiple inclusion).

I had the same issue in IE9 only.
I was opening an instance of my website in an IFRAME dialog. Meaning that there was 2 instances of Bootstrap, like above.
When I moused out of the IFRAME it resized the underlying layout to match that of the width of the smaller one in the IFRAME.
To get round it I had to disable the opening pages bootstrap-responsive.js stylesheet using javascript. You can then turn it back on, when you close the IFRAME dialog.
if(navigator.userAgent.indexOf("Trident/5")>-1){
window.parent.document.getElementById("responsiveCSS").sheet.disabled = true;
}
Horrible hack, I know.