First of all I warn you i am new in HTML development...
I am creating a website using Bootstrap. I have some buttons on the left as you can see in the screenshot and I want to content on the right to change without having to load the whole page.
Any help here? Thanks a lot!
You'll need to use JavaScript, which is the standard programming language that ships with all modern web browsers. In JavaScript, there is an API called the DOM (Document Object Model) which represents the current page as an object. You can use that API to change the text contained in the div tag.
Here is the W3Schools page on the DOM.
There are a few JavaScript libraries that try to abstract and simplify DOM manipulation. The most famous is jQuery.
You can try using AngularJS or any MVC framework/library. These might be a little heavy-handed for something simple, but they'll help achieve what you're looking for. Pretty good to learn these anyway as they're in high demand.
Here's AngularJS's homepage with docs and tutorials. You'd want to look at information on routing view templates using the ngView module, or you can use ui-router, created by Angular's UI team (my personal favorite) for nested views.
PS: Stay away from W3Schools
http://www.w3fools.com/
Related
I'd like to ask a question: how do I add a new subpage automatically after current page's content reaches pre-defined limit? I mean to create something like Google's search pages, as seen in the image, but I have no clue where to even start. Can someone give me even a hint?
https://i.stack.imgur.com/N9RQU.png
Are you working with vanilla js or some framework? In vanilla, you can write backend for that. In frameworks such as React or Vue, there're routing libraries that alongside lazy loading/data fetching can do wanted result.
I'm hoping someone with a better understanding of AngularJS might be able to shed some light on whats going on here.
I have a webpage with a long form. After the JS form plugin is initialized, everything in the form no longer has two way data binding. JS plugin for reference can be found here
If I remove the id link to the JS plugin, thus not applying or rendering the steps plugin, all two way data binding works as expected.
I could post a lot of code here but I'm not sure that would help. I have no problem posting code at any request.
Any ideas on why the two way data binding is losing effect after rerendering a form tag and its contents?
I was actually able to get AngularJS to work correctly with this plugin by including the plugin at the bottom of the page instead of the top. So I think the key here was to let AngularJS load up first, then the page, then the jQuery Steps plugin (at the boom of the page that uses it).
Thanks all for your comments!
Jquery library should include before angular library otherwise your site will try to use jquery instead of angular own lite jquery which will definitely break the binding.
I am building a webpage using Bootstrap 3. I am trying to find the best way to change the main content of the side. I have a Header, left content and right content but I want to change the middle content by pushing a button without changing the surrounding elements. What would be the best thing to use to accomplish this. Is there some demos online that someone can point out? I have been trying to find some but without luck.
Bootstrap doesn't have that feature. First try to learn what bootstrap can do or can't, what bootstrap made for.
What you are trying to do is called templating. You can use php, ajax or other methods to dynamically add content to your content section of your template.
You have many ways to do that, maybe with jQuery .load() and maybe combined with HTML5 history API or some other framework...
But Bootstrap has nothing to do with that..
You can start reading about AJAX and DOM manipulation first, but here is some link you can use:
Dynamically Loading Content in Twitter Bootstrap Tabs
You cannot do that with boot strap that is just not what it's made for you can use either PHP or Ajax personally if you know PHP already and have everything set up for go with that because in my opinion Ajax sucks to learn and work with
I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as
<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>
or similar.
I found some resources such as this article for developing a widget using jquery http://alexmarandon.com/articles/web_widget_jquery/.
How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.
You should also keep in mind the possibility that the 3rd party website also uses angular,
and potentially a different version.
Check Multiple versions of AngularJS in one page
This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.
As I know that in JQuery Mobile, every page changing is equivalent to create new "page" div, Can we just change a portion in the "content" of the page, something like subpage?
jQuery Mobile doesn't require you to manage pages by creating additional div element in the same HTML file - you can do it perfectly fine in a different HTML file and make a transition to it (perhaps with data-prefetch attribute set) using <a>.
Nothing prevents you from writing a jQuery plug-in, jQuery UI plug-in or (scary though, I know) pure JavaScript that will alter the contents of the DOM element dynamically and manage pages loading according to data received from server - with necessary calls to things of the listview('refresh') ilk - to ensure proper styling.
With that said you have to ask yourself two things:
Why do you need to do it? Can't you manage by pre-creating the page using jQuery Mobile paradigm and just retrieving and inserting the data into the new page?
What will the performance implication (if any) will be, if I have to perform DOM manipulations on every 'page transition'?
As a side note - jQuery Mobile provides you with methods that allow for page manipulation:
$.mobile.changePage and $.mobile.loadPage that you can use (look at pageContainer option).
See API docs here
I am trying to use right now a jQueryMobile plugin for subpages: https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget
I didn't make it work yet but i think it should work :).