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.
Related
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.
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.
Well, I am trying create a web layout that I already have in mind. I have a header where I can create a set of tabs using jqueryUI. This is very easy and I already have it, I will show you a screenshot.
The html is there:
<div id="header"><div id="headerMenu"><!--headermenu is the tabs div --!>
<ul >
<li>edition</li>
<li>export</li>
<li>settings</li>
</ul>
<div id="tabs-edition">
<p>Text</p>
</div>
<div id="tabs-export">
<p>Text</p>
</div>
<div id="tabs-settings">
<p>Text.</p>
</div>
</div></div>
I want that this looks in another way, The tabs pane filling the entire main header (removing the white spacing), remove the rounded corners and customizing the css and color.
I know css enough for this changes, but I have serious dudes if there are a convection, a method, a general way to customize the jquery ui styles, (I suppose that developers in general not use the defaults styles and they have to changes).
Anybody can guide me about this topic?
You could use Themeroller to create specific changes you need and get the css required for it. It would probably be easier than trying to make changes by hand.
Themeroller is a part of the Jquery UI project.
I am working on a single-page-application using AngularJS, supported by Bootstrap. But Bootstrap is mainly used for modal dialogs. My DOM consists of various absolutely placed nested divs.
It works fine on most browsers, except for iOS (even the Windows Safari does it correctly) - but I have the problem, that on iPad the modal-backdrop is behind certain other elements.
The most common answer I found was to move the modals outside "everything". However this is not easily possible, since most of them are Angular directives that depend on the scope they are in.
The buildup looks something like this:
<header>..</header> <!-- position absolute -->
<content> <!-- position absolute -->
<sidebar>..</sidebar> <!-- position absolute -->
<part> <!-- position absolute -->
<button ng-click="openModal()">Click</button>
<my-modal parent="part"></my-modal>
</part>
</content>
part is a "wrapper" that manages the display of data.
my-modal is an Angular directive, whose template looks like a standard Bootstrap modal:
<div class="modal fade" class="my-modal-finder">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>...</h2>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
openModal basically looks for "my-modal" and then uses $('.my-modal-finder').modal('show'). As mentioned: on iPad, the header and the sidebar are shown over the backdrop and the modal content.
I have already updated to Bootstrap 3.3.2.
I suppose I could write two directives "my-modal-init" and "my-modal", where "my-modal-init" compiles the contents of "my-modal" and appends them to $('body') - and cleans up on $destroy.
This does feel rather hacky though, so I'd rather not.
Does anyone have experience with this problem and knows of a better solution?
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;}