The angular app that I am working on takes a while to apply the CSS. When any page first loads (or from refresh), everything is displayed as raw html (unordered lists, etc) like :
Here is the network log :
Not sure what the root cause of this is and what the best way to resolve it would be.
The best way to resolve it is to use a loading .gif which will be displayed until all elements of the page have been loaded.
HTML
<!-- Loading div with some CSS and possibly text to let the user know the page is loading -->
<div class="loading"></div>
<!-- Content div which will have the hidden class removed after the page has been fully loaded and rendered -->
<div class="content hidden"></div>
When the hidden class is removed from .content, it should be applied to .loading.
Related
What I want to achieve is the following:
I have a Layout with the following parts:
Header
Main (here various views are loaded based on the route where you are, in this example just Account.vue)
Footer
Example route: localhost:8080/account (It will load: Account.vue)
In this route I want to load a component called: Section.vue. This will be html code with various DIV blocks: a header, content and footer structure.
<template>
<div class="header">{{ Title }}</div>
<div class="main">{{ Form or anything else }}</main>
<div class="footer">{{ Save Button }}</footer>
</template>
My idea is to be able to manage this block in 1 place in terms of styling. (So in Section.vue). So if I make an adjustment in terms of design, everything will be applied immediately where Secton.vue is loaded. This saves me a lot of work. I want to dynamically supplement the content of this block with Account.vue with a title in the header. In the content a form with various fields and in the footer a save button.
The only problem I run into now. Where do I start to get this done?
I want to load Section.vue getting loaded into Account.vue as I need it there and want to fill this component with some header, content en footer things which are nessecary for the view of Account.vue
Your question is not very clear, but if I understand you correctly maybe vue slot will help you achieve your goal.
Here is the docs: https://v2.vuejs.org/v2/guide/components-slots.html
TL;DR : I'm trying to find a way to handle HTML injections into the DOM to avoid having to include irrelevant code in the DOM at all times.
I have a large PHP application that has several forms and modals through out the pages of the application. I'm trying to find a way to lessen the DOM elements by only showing/adding elements as and when they're needed.
What I have so far looks something like this:
<body>
<!-- Page Content -->
<main>
Click to access modal
</main>
<!-- / Page Content -->
<div class="modalContainer">
<div class="modal" id="modal-login">
<!-- modal content -->
</div>
<div class="modal" id="modal-register">
<!-- modal content -->
</div>
<div class="modal" id="modal-forgotpassword">
<!-- modal content -->
</div>
</div>
</body>
In the above, when someone clicks the anchor, you'd see the appropriate modal pop-up. Once you're done with the modal, it hides away until someone needs it again.
My problem with this is that it would mean that every modal needed in the application would always be a part of the DOM regardless of whether it is needed or not.
I wanted to know if there is any way of making this process a little more dynamic? This would involve the user clicking the anchor, and the JS code injecting the Modal into the page, and when done, removing the entire modal code from the page.
I assume this would greatly improve load times and render time.
The problem is that I have been unable to understand the logic behind it, I have been doing something very similar with other parts of the project but I have not been able to apply it to the modals. Here's what I assumed would be the jQuery code for injecting the modal
$('.ismodal').click(function(event) {
event.preventDefault();
let modal = $(this).data('modal'),
elem = '#modal' + modal;
// Check if element already exists
if ($(elem).length) {
$(elem).fadeIn();
} else {
// Get element code
let elementCode = functionToGetElementCode(modal);
// Inject element
$('#modalContainer').append(elementCode);
// Fade In element
$(elem).fadeIn();
}
});
I haven't tried the above code, but I would assume something like the above should work. However, my concern is how I could code the functionToGetElementCode such that it would work, and is not terrible difficult to maintain.
I assume the easiest method would be to have the function in which we could have a switch function that would filter out the needed code. But is there a way to import the template of each modal from a folder? Something similar to the include function in PHP?
Use the <template> tag
In html there is a specific tag designed for this use, it's called <template>. You can use this tag to store your modals and then render them as needed. You're on the right track but I think there is some confusion about how loading works on the web.
JS code injecting the Modal into the page ... I assume this would greatly improve load times and render time.
When you think about load times remember the fastest thing to load is plain text. It can be extremely fast and is very very lightweight. JS, on the other hand, will need to be loaded, run, and not error out
Using AJAX (Not recommended)
If you expect the modal to be infrequently clicked, you could store it in another file and summon it via AJAX. This isn't very advantageous as it will add a network request and processing time to your modal click.
You can use AJAX calls to get the required modal.
I am having a lot of tabs in my website designed with Bootstrap which I tried to make responsive using https://github.com/flatlogic/bootstrap-tabcollapse (Demo here:http://tabcollapse.okendoken.com/example/example.html)
I was able to make the tabs responsive but the problem is I am loading content into the tabs using AJAX (like https://coderwall.com/p/1lnxba/load-bootstrap-tabs-dynamically) and the problem is that the entire markup of the tab changes to panel when resized to small size and id of the element is also changed.
So, how will I load the elements inside those tabs using ajax since markup is changed. I dont want to write separate code for loading for both cases.
Or is there any other better alternative to this? Or some solution which does not change markup of tabs but still is responsive?
Thanks in advance.
Try using Bootstrap's Containers to hold the AJAX-loaded content.
I'm assuming your code is something like this (just the tab-pane bit), but you should update your question with at least a layout to get better responses.
<div class="tab-pane fade in active" id="home">
<!-- ... Other Content ... -->
<div id="ajaxContent" class="container">
<!-- Where Tab 1 Content would go because it's active -->
</div>
<!-- ... Other Content ... -->
</div>
See Bootstrap's Components page for a full list of classes that you can use.
I want to insert some HTML code inside a page, the code I insert should not be affected by the CSS and JS of that page, it should load it's own CSS and JS.
Example Code:
<div class="body">
<p>Example Content </p>
<p>Sample Content 2 </p>
<div class="special-div">
<p> No CSS and JS to be applied to this div 'special-div', it should load it's own CSS and JS </p>
</div><!-- /.special-div -->
</div><!-- /.body -->
In the above code div with class "special-div" should load it's own CSS and JS and should not be affected by page's CSS and JS
I've tried using iframes but firstly they are cross origin, secondly iframe has it's own scroll bar.
I am trying to insert a slider into wordpress page, I've built slider in a HTML site and tested it but the default wordpress styles and JS are changing the layout. I can easily remove the styles but I'm not sure how to get rid of the JS which is affecting the slider
Any help would be appreciate.
One way of doing it is Shadow DOM.
Shadow DOM provides encapsulation for the JavaScript, CSS and templating in a Web Component. Shadow DOM makes it so these things remain separate from the DOM of the main document. You can also use Shadow DOM by itself, outside of a web component.
I need to embed one webpage within another, the inner page will be wrapped by a <div> and not contain the <html>, <head><title> or stuff like that, however, the inner page can contain <link>'s to CSS that I don't want to affect the outer page
I currently fetch the HTML with AJAX and insert it into the outer DOM, to workaround the styles conflicting I extract any links prior to embedding into the DOM, fetch that CSS with AJAX, parse the styles and apply them inline using jQuery selectors.
That has obvious problems with things like pseudo-selectors, however, the main problem is that styles from the outer page affect the inner page, I cant reasonably reset every possible style, and I need to access the inner pages dom so using an iframe is out of the question.
Its a fairly complex setup, but I was wondering if anyone had seen anything along similar lines or had a nicer approach.
Cheers
Dale
You could assign a unique id to the div and prepend the selector to all the rules in the css.
HTML Before
<div>
<!--start ajax content -->
Content
<!--end ajax content -->
</div>
CSS Before
a {color:#999;}
HTML After
<div id="unique0001">
<!--start ajax content -->
Content
<!--end ajax content -->
</div>
CSS After
#unique0001 a {color:#999;}