I'm looking to build a website with a story based flow using Javascript and jQuery to manage the 'flow' of the story. The best way to describe what I'm looking to do is with an example.
In this example they use an Ajax loader plugin called Lazyload to load assets from another JS file (Looks like underscore.js formatted, maybe?). It looks like a very complicated way of achieving something that should be easier, though, IMO.
As a starting point, all elements could be on the page and hidden with .(hide), the click of each button would reveal and scroll to the relevant item, a class would then be added to that button to make them greyed out and unclickable. Or maybe use Ajax to call in story components as they are needed? What do you think is the simplest and best way of doing this?
According you want to use the long-story-version:
Well my very first idea of how this could work was to store each StoryPart (lets call it Item) in a special File which you can load with ajax later.
Then it would be possible to define a possible storyPath where you can use itemId's.
Does this help you?
Depending on the amount of data you need to load, I would do this:
Load the page normally (without the story)
Display some kind of loading/waiting interface to the user while requesting the whole story by ajax call
Show only the first item after ajax completes
Hide the "wait" interface from the page
Hope this helps
Related
I am currently building a website but in an effort to prevent not necessary data to be loaded i decided to split but the website into serveral divs and load the content inside the div.
Because of this when i click on the back button i dont go to the previous location on the site but to where i was browsing before. Is there a way to solve this without rewriting the entire site? So for instance on my site there would be a members page that would be called upon using javascript by loading $('#content').load('members.php?id=$id');
For instance by creating a fake location...index.php#fakelocation (which contains the specific content i just loaded)
Can anyone give me a push in the right direction (or if this is impossible id like to hear it to)
I think what you're looking for is a combination of the History API and AJAX.
Lucky for you, there's a great library called PJAX that combines these technologies.
Without knowing more about how your backend works, I can't comment on additional steps to optimize the whole application, but PJAX is friendly with any number of server-side technologies.
I have been making a javascript program thing and now I am at the stage where I need to make it visual. I have an idea of what It should look like but Dont know the best way to go about it. I could just put images and change them when needed, but I am wondering do I have to refresh the page everytime I want to change something?
Here is what I want it to look like, whats the best way to go about this. Just javascript no jquery etc.
http://postimg.org/image/p4nnnmqap/
You may use SetInterval() to refresh, if you want to...
Your program is running in what plataform and what language?
Long time ago i made one HTML WYSIWYG editor in Delphi7, and using the TWebBrowser as a viewer, and with the save button, had a function to also refresh the TWebBrowser, worked fine.
But if your workspace runs directly to a HTML page you can just set an interval of 60000ms to refresh the viewr every 1 minute.t
The simplest way is to build the structure in HTML and let Javascript fill in the dynamic parts on the fly.
It could be as simple as having simple <span> placeholders.
<span id="count">0</span> <!-- initial value = 0 -->
And update it with
document.getElementById('count').innHTML = '987';
P.s. Always make sure the DOM element exists before the code executes.
I'm making a web application that uses hash tags for page navigation like this
http://foo.bar.com/#pages/home
I just realized that one of my pages is going to be kind of huge, containing it's own tree-structured menu with links that should scroll the page to different anchor tags in the page. Obviously I can't use actual hash tags for that now, since they are busy. I'm going to have to use a programmatic solution with an URL like this
http://foo.bar.com/#pages/home/section
Or would it be possible to use more than one hash symbol, perhaps changing it to this?
http://foo.bar.com/#!/pages/home#section
But how can this be done programmatically anyway?
I'd scrap the broken use of hashbangs, switch to using the history API instead and give serious consideration to the question of "If that much content is being replaced, is loading it via Ajax really providing a benefit?"
Your Question does not seem clear to me,
If your page is too large, you could go for pagination using AJAX and PHP, for more
http://www.codediesel.com/php/simple-pagination-in-php/
or http://www.99points.info/2011/01/ajax-pagination-using-jquery-and-php-with-animation/
Other wise, if you still want things to be in URL #tags, then you can go with it.
I doubt you could give something like this "http://foo.bar.com/#pages/home/ "
You could also try URL rewriting http://httpd.apache.org/docs/2.0/misc/rewriteguide.html
Been working on an App and since it's getting a bit too big I've thinking of ways to improve memory management since the app runs mostly on Javascipt. So every time a navigation item is clicked I would call the jquery empty then show the html via ajax. ex:
//$.ajaxSetup(); called before this
//$this is the attached element
$.ajax({success:function(data){
$this.empty().html(data.output).fadeIn(400);
//more javascript stuff like loading tinymce or jquery ui
}});
is this enough to prevent memory leaks? I'm not entirely sure what empty does but I'm assuming it removes all DOM elements within that div along with any other objects and events? btw. You can find the app here http://webproposalgenerator.com/ and http://webproposalgenerator.com/demo.
any tips on improving the performance/security or any feedback at all would be greatly appreciated.
$.fn.empty should be enough, it deletes all data and events associated to the elements and then deletes the elements. It also calls .widget("destroy") on all jquery-ui widget.js based widgets that are defined on those elements.
It is also important to note that jquery's $.fn.html method calls $.fn.empty() on the given element before appending html, therefore, if you are using $.fn.html, you don't have to call $.fn.empty
actually my guess was that .html implies .empty anyway, also I'm not sure that's true. for the perforamnce part: according to jqfundamentals excelent book it is a recommanded best practice to add content while the element is in .detach() from the DOM. tried to lock at the code for advice but didn't find it. nice site btw
I know this is a problem I could solve with a huge list in "innerHTML", but there's got to be a better way.
I'm making a webpage with a "search" and "browse" section, both are big buttons at the top of the index page. I have search.html and browse.html, but I want their contents to load in my "main" div on the index page rather than open their own pages. I should be able to quickly click between "search" and "browse" and have their different pages load back and forth inside the index page. Hopefully that makes sense. I was trying a solution with frames before, but it wasn't working for me.
Any advice would be greatly appreciated.
Thanks!
You can use tabs or something like that: http://jqueryui.com/demos/tabs/
Most JavaScript AJAX libraries such as jQuery have this built-in - in case of jQuery the load method.
However keep in mind, "tricks" like this destroys the browser usability for your users (broken back button, not possible to set bookmarks, etc.). It's possible to work around, but that makes extra work.