brand new to angular and I was just hoping for a little guidance on something that I could achieve relatively quickly in jQuery.
As a pet project I'm coming up with a comic organiser web app to learn angular. I started the project in jQuery looking like so...
<div id='main'>
<div id='library'>
</div>
<div id='series' data-currently-loaded-series='1234'>
</div>
<div id='comic' data-currently-loaded-comic='4321'>
</div>
</div>
Now I based this design off of how gmail works it, it doesn't destroy tabs it simply hides them, or caches them, so that you'll never have load the same piece of information twice.
Clicking on a series in library loads it into the series div. If the 'currently loaded series id' matches the one I'm trying to load it won't load anything as it sees that it's already loaded it, so on and so forth...
I felt this sort of design would be invaluable for my little project as a lot of the comic cover images are high res and navigating between views would be a bit pointless, I of course know that images are usually cache by the browser, but I still couldn't see a reason to destroy the divs when I could simply hide them. I guess I'm trying to minimise data requests.
I've seen a few examples of this tab like behaviour around the internet but gmail is like the only instance I could find where they didn't destroy previous views/tabs on navigation.
Enter Angular...
I've found that when switching between partials and views it destroys the old data and I'm not too sure if this behaviour can be disabled. I thought I could set up the same div layout I had before and just load in multiple views and switch but Angular doesn't play well with multiple views (apparently UI-Router might be solution here). Even doing this all in one view wouldn't be ideal as I'm not too sure I'd be able to use URL routing...
I guess what my ultimate question is does anyone know the name of this tab caching mechanism gmail employs? If not could anyone point me in the direction of how I'd go about creating something similar?
Thanks
I suggest you using Bootstap and Ui bootstrap for angular.
A simply tutorial: http://odetocode.com/blogs/scott/archive/2013/08/14/dynamic-tabs-with-angularjs-and-ui-bootstrap.aspx
Related
I have recently inherited a web app using the EXTjs framework. I'm not really that familiar with it, but I have been learning it the best I can over the last few months. I have recently been given an assignment to update the entire application to comply with 508 Compliance, that is to say, make the application accessible for those with vision issues. I was given a deficiency list that gives examples where the software doesn't comply for various reasons. I guess I need a little help in understanding how this works. I've looked at the EXTjs documentation and it does say that it has accessibility features available in it, but I haven't really been successful in finding what to do. Those using the application are using the JAWS screen reader if that makes any difference.
A few of the things I know that I need to fix are:
Some elements need to be tagged as a heading so the screen reader can read it programmatically an to give the web page some structure.
When tabbing around a table/grid the data is read without any context/header information.
Color is used as a visual cue to indicate action(ie required field). I'm supposing this is for color blindness and some other visual cue needs to be added.
Modal windows can't be resized or moved by the keyboard.
Needs a mechanism to bypass blocks of content that are repeated on multiple pages.
Pages do not have titles(this is a single page app).
Keyboard operable UI elements do not have a visible indication of focus(radio button group doesn't show focus, even if selected one does).
Name/State of UI elements in the product can't be understood(ie the name of expand and collapse buttons are read as expand panel or collapse panel by assistive tech without context to what is being expanded or collapsed).
There are many other issues, but this gives some idea of the scope of the changes required. As I have stated above, I've done a lot of examination of the EXTjs documentation at their site as well as google searches on how to make applications more accessible. But I'm not really seeing what I need. Much of this application is just configuring EXTjs templates and then loading them with much of the meat of the application being handled by the EXTjs built in js code.
I would appreciate any help, useful sites with examples, or code snippets on how to accomplish some of this. I'm hoping that once I get started with some examples, I can just go on from there.
Thanks.
Most items come with aria support. Personally I would add look into each component and add an automated aria support. E.g. button ==> aria.label = button.text
Take a look at ariaAttributes, ariaDescribedBy, ariaLabel and ariaLabelledBy. Some have ariaErrorText, ariaHelp.
Next take a look at tabIndex. You want to ensure that you can use TAB to jump through the fields, buttons, ...
Sorry if this question sounds stupid but im a noob with wordpress.
I am a javascript developer, and I want make a little game (or games) with wordpress. Opening main page there is a sliding puzzle. After complete, a button appears and clicking there you pass to another page. This is basically the same to all pages.
But I can't find were i put my javascript or HTML code. I create the pages but I can't edit them the way I want, everytime i try to do it i only can edit like word. I cant create, change or edit divs attibutes or tags. To be honest the only thing i can edit is CSS in stylesheet, but is too limited.
I have done the search, try found a solutions or ways to done it but when i look to tutorials is all diferent from what i see.
to give you an ideia I want to do a mix of this:
-> http://www.rustylake.com/room-escape-games/cube-escape-case-23.html
and this
-> https://ebonyriddle.com/
but i don't know how to edit page to page.
can you help me?
Thanks for everything
PS: I know I can do it without Wordpress, but I want use it anyway to learn more about the CMS (because of work) maintain website structure and later learn how to do my own templates or plugins.
To answer your question directly, yes it is possible (and easy, relatively speaking) to add custom code to every page / post of a Wordpress site.
More generally, you’re talking about creating a custom Wordpress theme, which you can find out more about here:
https://codex.wordpress.org/Theme_Development
and here:
https://developer.wordpress.org/themes/getting-started/ (Good suggestion from #ItsGeorge)
Regarding adding custom JavaScript to a theme, your files will need to be enqueued as per these instructions.
Outlining the steps involved in Wordpress theme development would go beyond the scope of your question, but there are plenty of resources online and answers to Wordpress specific questions on wordpress.stackexchange.com. You will need to familiarise yourself with php as well as JavaScript, to take full control of Wordpress.
I would say that developing a game feels like an odd fit... If learning Wordpress is your objective, a blog or personal website might be a better place to start, then you could move onto a game once you are familiar with the concepts involved, e.g. the loop, which plays a huge part in how Wordpress works
Good luck!
The primary focus of WordPress is to put HTML code and JS out of the user. You might manage your extra JavaScript files with your theme customization. If you want to get more control about how your pages are rendering, you should use action hooks and filters. The simplest way for you is to override each page template like this
https://developer.wordpress.org/themes/basics/template-hierarchy/#single-page
The preferable resource to ask Wordpress related questions is https://wordpress.stackexchange.com/
I am having trouble figuring out how to do even the simplest things in Alfresco, like typing a simple document. I've been Googling and noticed that customizations can be done through HTML documents. I need help and decided to post a question to a knowledgeable user platform. THe following customizations I would like are WAY far fetched and most likely not even achievable, but any help that can be provided I would really appreciate.
*list items in bold are most important
Anyone could be assigned a login and when they logged in they would have access to and easily view all of the contents of the site (or multiple sites that make up one accessible website?)
All of the items on the website would be a hierarchy, the user facing contents of the site would be a list of links with thumbnails, when one link was clicked it would be another list of links with large thumbnails, when one of those links was clicked a text document would be brought up, that document would contain clickable sections, when one of those sections was clicked it would bring up a page only containing the section clicked:
Links (crafts)
2nd layer of links (modules)
Text and image document with clickable links (single module containing clickable sections)
Section (single sections of module)
The module and section text would also contain images and tables throughout and mixed in the text
If a link (module or section) was used in multiple places all instances of the link would be linked to each other. If on instance was edited, the other would also change. THis setting could be turned off for any individual link if necessary.
Every document should have an easy to use live commenting system (something simple like Disqus would work) The comments are the most important on the single section pages but would also be good on the module page
An advanced tagging system that would be part of the entire site/website environment. A user could type anything they wanted as a tag and use multiple tags. The tags would be used for their comments on the content (text, sections) but the tags could be searched (most importantly by the administrators of the site) at any time in the whole environment. A popularity of any tag could also be viewed (I'm not sure how that would work, possibly another section of the site or an easy to see column on any text/image document?)
A user could edit their own comment if they wished but would not be able to delete it entirely. Comments would also be date and time stamped.
I know all of this is most likely impossible but if anyone has an idea of Alfresco customizations that could pull any of this off, or of an entirely different secure platform or site that would perform anything similar to this please let me know.
Thank you!
It sounds like you are looking for a Web Content Management (WCM) System. Alfresco is a Document Management (DM) System. You can use Alfresco as a back-end for a custom content-centric solution, but if you are expecting to install it, start it up, and have anything close to what you've listed above, you are barking up the wrong tree.
Everything you've listed is a front-end concern. You can use whatever you want to develop that functionality, but none of it will leverage Alfresco unless you choose to store some of the data in the Alfresco back-end.
You might be better off looking at something in the WCM space, such as Drupal or Wordpress. Or if you want something Java-based, look at Magnolia CMS or Hippo CMS.
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 a project that I am trying to find a solution for. I am attempting to have an Element (maybe a DIV), between 2 pages, be synchronized in real-time. After doing some research, it looks like using WebSocket to link them might be the best solution. I'm not experienced with setting up a scenario like this so have been trying to wrap my head around it.
My ultimate goal is to be able to inject (via JQuery) code into the shared/synced div (iframes with PDFs, URLs, other files) that will show up without refreshing on the 2nd page, real-time, so it works almost like co-browsing, but only a section of the page.
I'm building my app with ASP.NET MVC4/Razor.
Any suggestions or pointers in the right direction would be greatly appreciated!
If you use ASP.NET SignalR might be a solution.