I'm creating an app using phonegap that pulls the majority of its content from a database. It has a few hundred pages so I thought the best option would be to use a single page solution and just keep loading content into the main div when needed.
I have tried using Handlebars to do this but I'm not sure if that was the best solution as I cant get jquery mobile working with it (the app needs lots of accordions). Have also tried creating my own very simple accordions but failed dismally to even get an onlcick event working within the handlebars script tags.
Can anyone recommend a build that would be good for this job please? Or guide me to some example solutions that are along these lines?
I have googled extensively for 2 days now and have tried quite a few suggestions out but no success so decided to post here.
Many thanks
Generate all the content into your div, but using css hide almost all of them. As the user does what needs to be done to activate your paging call the show() function for the first 10 elements, if you consider 10 to be a page.
Use List View pattern of jquery
// adding data on list view
$('#list_view').append('<li >' your data '</li>');
//refreshing list
$("#list_view").listview("refresh");
//removing elements from list
$("#list_view").empty();
You can use multiple div's as well in the list view
use below link for more:
http://api.jquerymobile.com/listview/
Related
We are using Bootstrap nav-tabs on our new website's events pages to create different sections on a single page related to our events — About, Speakers, Travel, Register and so on.
Our events coordinator would like to be able to link directly to the individual speakers who appear on the Speakers tab from outside the website. Normally, this is pretty simple — http://domain.name/events/eventspage#speakerID.
However, because we're using nav-tabs, there isn't an easy and obvious way of creating this link. I've looked through posts here and elsewhere to see if anyone else has addressed this problem, but have yet to find anything.
The site was built using Bootstrap 3 and uses ExpressionEngine 2.10 as the CMS.
You can view a working example of how our events pages are set up at https://www.rjionline.org/events/rjicollab.
Any suggestions would be appreciated.
This is how it can work with jQuery:
Select an anchor within a JQUERY Tab from a link on anther webpage
You can adapt the code from there.
Here you can try this function:
function goToTab(){
var hash=document.location.hash,
prefix="tab_";
if(hash)
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show')
};
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.
newbie question.
I've read some of the W3Schools, I also read a lot from other sources on the internet, however I can't find what I need, and I'm sure it's quite simple to you.
I'm using ASP.Net, and I want to add to my website, multiple items, which every item hold a picture, and some other information, including links. I'm pretty sure I don't need to write the code for every item in the HTML source, and I don't know exactly how to implement my this.
The basic idea is that my items will be imported from a Database that I create in visual studio, and I want to style my webpage so they would appear in a certain formation, I thought I might need to use Javascript or CSS for this, hope I'm not mistaken.
Javascript isn't some sort of magician that will render all your stuff on its own. However, you can use it to attach a template to every of your items.
What you have to do is :
Create a base HTML template for 1 of your item that can be applied to all of them
Create a Javascript function that will attach thoses CSS classes and HTML attributes to every element out of your DB (or you could use a templating frameork .. since there's a lot of them I'll let you look for it on Google. It's pretty easy to use)
On page load or whatever event you want to bind on, you call your function which will attach the CSS and HTML to every element out of your DB and will render it on your page
Enjoy what you've done.
I hope this helps. Good luck ! ;)
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 really like the Filtrify plugin with the multiple search categories like on this link http://luis-almeida.github.io/filtrify/movies.html by Luis. It is perfect for my project but I'm using bootstrap as a framework and this plugin uses version 1.7.1 of jquery and bootstrap needs 1.9.+. Is there a way so I can use both or is not possible? If not, do you guys know of similar plugin that I can use ? I need to be able to search multiple items and filter content by those items. My first try was to use the instafilta but then I can only search for one item at a time, unless I don't know how to configure it.
So to be exact, the Filtrify demo that I posted is exactly what I need.
This is the content of my project. I want to be able to search for for example Javascript and C++ and filter the users that have that in their list.
http://i.imgur.com/NlWP0oO.jpg
This is my first post so I hope this is specific enough.
Thanks in advance.
Maybe take a look at "http://isotope.metafizzy.co/". It has a filter function, too.
filtrify.js line 99: change the if statment with this
field = this._order[f];
This is an old problem, but I was able to fix the jQuery conflict of using newer jQuery with Filtrify by using method 1 on this page: https://www.sitepoint.com/fix-jquery-browser-function/