Rich content front-ends/jQueryUI replacement - javascript

I've been going around in circles for days on this. I've got a (conceptually) simple website, which is all Javascript/Ajax at the front end, with a minimal amount of hand-written HTML, and lots of C++ on the server. The user basically needs to see a few menus, and fill in a few forms, and they get back pretty tables.
My problem is the actual UI front-end. This is for a sports club, and is not a commercial site, so it doesn't have to be that good. I've been using jQueryUI (there's some jQuery in the JS). I'm using tabs and dialogs, and it's all a bit clunky. I now want to add a couple of horizontal menus, and jQueryUI doesn't do this (there's menubar, on a code branch, but it's unfinished and development stopped 6 months ago). I also want to integrate dokuwiki if possible, which is php. I don't have to support old browsers.
Question: can anyone recommend a lightweight rich content front-end to replace jQueryUI, that will get me going quickly? I can spend a little on something commercial as long as I can quickly prototype without paying anything. A CMS would be Ok - I have some Joomla experience, but I really don't want to write any modules just to get my own JS and a wiki into the site.
Oh - and please suggest something quickly, before the question is closed as pointless and irrelevant... :)

There are a lot of examples.
Twitter bootstrap or flat ui

Related

I want edit every single page in wordpress. Is possible?

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/

Problems with adding javascript in html with jsfiddle

beginning beginner here, I wrote a little and simple text based adventure in javascript, which asks the choices of the guy running the thing in jsfiddle. Now I want to add images, and text to that with html. The problem being that I dont know how to add the things step by step. I dont want the whole adventure being written all at once, I want it to be written step by step. Everything that existed in the confirm("") form should be going in a text form in html, and the prompts should not be written down. Adressing this issue is the most important, images and such are way less important.
First of all, your "story" should have a graphical user interface in the web page. That means you should create some html markup that makes the story flow along with an animation. This is not an easy task and a great ability in javascript and libraries like jQuery or AngularJS (just a couple of examples) is required. Such a project shouldn't use dialog boxes caled "alerts" from your browser.
As a beginner(you said you are a beginner), I advise you to take it easy and start with a less pain-in-the-ass web project.
A few tutorials and platforms where you can try to learn the skills needed are:
CodeAcademy
Learn Angular
Toptal: Guide for your first AngularJS app
And a website with a great User Interaction is Quiz App.

Jquery: Swap out HTML partials depending on screen resolution

With the current project I am working on (Using Bootstrap 3), the client has asked for major changes to the structure for mobile views.
I have used Zurb Foundations Interchange in the past: http://foundation.zurb.com/docs/components/interchange.html - Which is just awesome!
I am wondering if anyone has used a bootstrap alternative? Or if you have coded this before, what has been your approach? I'm a little lost in which direction to go on this one. Searching seems to yield little results. I will probably just do this programmatically, but like the idea of JS handling it.
Many thanks
I had to do this for a client and I used the built in Bootstrap visible-xs, invisible-s etc. to end up with several different versions of the page depending on the screen size. It was a bit fiddly but it didn't need any JavaScript and is easy to modify. It's an option at least and as you're already using Bootstrap everything you need is there.

wysiwyg javascript editor replace images with text

I am currently working on a MVC4 asp.net project(my first, before I worked with WPF and winforms, no real website expierience). And I want to make a editor/wysiwyg for comments that people can make on items on the site. Everything is already setup but the comments are just written in a <textarea/>. Now I googled a bit and found a bunch of WYSIWYG editors for javascript, however I can t find a good one, or a good way to solve this issue:
Lets say the site is about poker (it is not but it is for easy example) and when a person makes a comment like "h9 is better then s10" once he posts (or at the time he types, that would even be better). The h9 is replaced by a hearts 9 jpg (or we can create a div of it and it has a backgroundimage css property)(all the jpgs are on the server ofc). (Same for the S10 it should be replaced by the spade 10 card image)
I got no clue how I can fix this, so any help with what wysiwyg editor I should use for this problem and how I could get closer to fixing it, would really be appreciated.
Maxim

jQuery: Plain HTML/CSS with core jQuery or jQuery UI for a blog?

I'm about to implement a blog, and I'm pretty sure I want to go with jQuery, because I really like it.
However, when I last did jQuery, I just did plain HTML/CSS and then improved the user experience with what jQuery has to offer. Meanwhile, jQuery UI has been released, and it looks like a full-fledged user interface framework like Ext JS.
Can I benefit from jQuery UI with a rather simple website like this, or is it more geared towards web applications like GMail?
jQuery UI is quite large and seems to have lots and lots of CSS in their skins. I'm a bit worried that I would have to write/adjust tons of CSS to make the blog look like I want it to. If I did plain HTML/CSS, I would have fine-grained control over the appereance.
Edit: I'll stress again that I'm specifically wondering whether jQuery UI is intended for and useful for a simple website like a blog. It is no doubt useful for more sophisticated web applications.
Edit 2: Thanks for all your answers, too bad I couldn't accept more than one. By now I realised that jQuery UI is not like I expected a full-fledged web application framework, but rather a bunch of useful utilities on top of jQuery. I think I'll use it, if only for Draggable, Droppable and Selectable.
You don't necessarily need to write loads of CSS if you don't like the supplied styles.
The jQuery UI ThemeRoller is a very good web-based GUI for customising the look of the widgets. It then allows you to download your own customised (and minified) .css and .js files containing just the widgets you need.
I suggest that you should have a play with that first and see if you can make the demo widgets look how you'd like them before making any decision.
You can have both... I have! Where I am using widgets (datepicker) etc, I use jquery ui, besides visit : http://jqueryui.com/themeroller/ and you can customize the colours quite easily. The UI themes are recommended strongly if you use the widgets as the widgets rely on the css defined therein to move things around, for display and selection, handling rezise of widgets.
You can always build your site using html + css then add the ui theme later, as you said it will increase the user experience greatly... besides we always end up using 1 or 2 features then extend or find other suitable plugins.
As always, the answer is 'it depends'.
More specifically though, it depends on what kind of a UI you're planning on. If you find yourself coding functionality that's already there in jq UI go ahead and use it. They've got a handy theme roller plugin which will allow you to customize the skin to perfectly match the look of your site, so that is a non issue.
You might also want to include it all through a CDN (offered by google or MS) so that your site doesn't get slow downloading the (relatively) heavy initial payload.

Categories