Develop Reference

Should a JQuery plugin be responsible for creating new HTML?

I am not quite sure what the best (or most common practice) is when needing HTML elements for your JQuery plugin to work. For example (although contrived), if you required a spinner (ticker) plugin where you would have text box containing a number and to the left of the box a up and down arrow. When the up arrow is clicked the value is incremented and the value is decremented when the down arrow is clicked.
I see some JQuery plugins, especially the JQuery UI widgets, that expect you to supply all the html and to give them special classes.
In the case of the spinner would you just expect the input tag and then in the JQuery plugin generate the HTML to render the up and down buttons?
Perhaps a better example is something like creating a paging data grid. Would the paging buttons (First, Last, Previous, Next, Page 1, Page 2...) be generated by the plugin or should the user of the plugin be expected to create HTML with special classes.

You should look into jqGrid. It generates a lot of HTML, but it leaves the <table> and pager elements up to you. It then obviously appends to these elements. But it also creates siblings and containers for these elements as well.
For example,
<!-- index.html -->
<table id="mygrid"></table>
<div id="pager"></div>
// main.js
$('#mygrid').jqGrid({pager: '#pager', ...});
jqGrid not only appends to #mygrid and #pager, but also creates new siblings and containers.
<div id="gbox_mygrid">
<div class="ui-jqgrid-view">
<table id="mygrid"><!-- rows --></table>
</div>
<div id="#pager"><!-- stuff --> <?div>
</div>
So you see that jqGrid does what it has to do, to work well. I think it depends on the needs of the plugin.

Generally, I would expect the developer to supply only the container element along with any essential inner elements (think images in a slider). I would expect the plugin to generate any controls like buttons, pagination, etc.
Requiring the developer to supply a container element gives them complete control over how, when, and where your plugin appears on their page, as if it was just another div. Requiring them to also supply any necessary content isn't always necessary, as this could just as easily be a config item.
The main upside I see to having the user supply HTML comes when dealing with clients that don't support/allow JavaScript (think old browsers, spiders, etc). At least they'll see something related to what your plugin was meant to display, rather than just an ugly blank space. In the slider example, if done properly, the plugin can gracefully degrade to a static image in the case of lacking JavaScript support.
All intricacies such as controls and status displays should always be generated by the plugin. Why? User-friendliness is the first thing that comes to mind. People use jQuery plugins because they want a fast, relatively pain-free solution to a problem. Additionally, many users of jQuery plugins are not web developers, but instead are often just administrators of blogs and such.
By eliminating the need for the users of your plugin to have to create elements that they really have no control over, you also eliminate a lot of headaches caused by typos, misunderstandings, and lack of RTFMing.
Hopefully my opinions and insights have been helpful.

Toggle visibility of content in web app

This question is not about how to toggle a div. But instead how to toggle visibility in a big web app. My web app needs only to run on Chromium (Webkit). The problem I have is probably more related to infrastructure and best practices, and I wonder if anyone has experience with this.
My app runs on node-webkit, which means all files are local, and loading is quick. To feel really snappy, I add all content to the DOM I possibly can. I want to stay away from state changing my app with Javascript, so no $('.view-projects').addClass('visible');. Because it will get messy really soon, and I feel it's not really the task of JS.
Instead the approach I have chosen works like this.
// javascript sample (I actually code in CoffeeScript)
// catch all click events on elements with data-trigger attributes
app.on('view:addProject', function () {
// add a class to the root view
$('#app').addClass('view-addProject');
}):
Markup:
<!-- markup sample -->
<div id="app">
<div class="projects">
<div data-trigger="view:addProject"></div>
<div>etc.</div>
</div>
<div class="addProject">
etc.
</div>
</div>
Css, used as the state machine:
app.view-addProject .addProject {
visibility: visible;
display: block;
}
What I want to know is if other people have tried something like this, have good experiences with other approaches etc. Or maybe I am missing something, I feel I am getting myself in trouble with dynamic content.
Note: I can't simply use show/hide, since my elements use display: -webkit-flex/-webkit-box; etc.

If you want to toggle visibility, here are some alternative approaches:
Control state by changing CSS via the CSSOM
Change state by changing data- attributes
Change state by changing DOM nodeNames

Show "For best results, Please enable Javascript"

I have tried to enabled a banner in my opencart shop.
The site is PHP, i basically just need a banner at the top of the page to alert users that don't have JS turned on to turn it on.
i used
<noscript>
<div id="noscript-warning">We reccomend using javascript for the best viewing pleasure ></div>
</noscript>
However this does not seem to be executing.

Not getting feedback from comments, so I'll post possible issues.
You're testing with JavaScript enabled
Your CSS styling of the element is hiding the message
Your CSS styling of other elements is hiding the message
You've posted a modified example that doesn't reflect the actual code
Your trailing > is breaking the layout in whatever browser you're using to test (not likely)
You're attempting to generate the no-script element using JavaScript :P

The <noscript> tag is anecdotally deprecated (http://www.html-5.com/changes/noscript-tag.html), though I doubt that's the problem.
In any case, you can just create a script that removes a "You need Javascript enabled" div.
<div id="jserror">Enable Javascript Please!</div>
<script>
document.getElementById("jserror").style.display = "none";
</script>
Edit: an eventListener isn't even required.

Convert my Xcode application to a webapp (to use tabbar)

I have made a basic tabbar view app in xcode but I need it to be a webapp as I will be viewing the data from a server so do not need/ want it on the app store.
I've looked at some other questions with this kind of topic and nothing is relevant. Also I've done plenty of googling and looking into other code plus using things like cubiq.org's slide-in menu.
I really want that tabbar look. I've tried to do this in HTML with images as buttons and using frames but (I think) because I'm using the JS code to stop the UIview from moving (to look more native) it seems that the buttons open the link in a new page, or switch to Safari, rather then open them in the same frame as they would in a regular browser.
Alternatively, does anyone know of a way I can implement a taskbar in a webapp?
Regards,
Eric.

Have you seen JQuery Mobile !?
It's awesome... but still in Beta.
They have precisely the toolbar you're looking for: JQuery Mobile Navbar

Without code, it's hard to pinpoint your problem exactly, but you should not be doing:
Text of Button
Because the above code will actually load a different page. Rather, you want:
<div class="some_button_type" onclick="doSomeAction()"><!-- ... --></div>
And that "doSomeAction()" function should use DOM manipulation to transform the current page to look like whatever you want it to look like (rather than navigating to some separate page).
P.S. I'm assuming you have some CSS styling based on class type, and you might want content in the DIV (for example, for the text of the button). I've also omitted some attributes (e.g. "role") that you want.

Hidden divs - reducing latency with style display none + javascript

I commonly use hidden divs on my pages until they need to be unhidden with javascript. I used to do the initial hiding with javascript too, but now moved away to hiding them with css to guarantee that the hiding takes place (js disabled in the browser). Also there was a latency issue with js hiding (waiting for the js to load).
My problem is that with css, there's still some latency, and so I end up including the style with the markup like below, and I kind of hate doing it, makes me feel like I'm doing something wrong..
<div style="display:none;">
content
</div>
How often do you guys do this? and is there a way I can get the css or js to somehow load BEFORE the rest of the markup?
Thanks in advance

Include the css in an inline style block at the top of the page:
<style>
.hidden: { display: none; }
</style>
Then annotate your div with the needed class:
<div class="hidden"> ... </div>
The upshot of this approach is that to show the element, you don't need to set display to block, you can just add/remove the class from the element with JavaScript. This works out better because not every element needs display=block (tables and inline elements have different display modes).
Despite what another poster said, it's not bad practice. You should separate your CSS into presentational and functional markup - functional one controls such logical things as whether or not something gets shown, presentational one just determines how to show it. There is no issue putting functional CSS inline to avoid the page jumping around.

I may get hammered for this, but in a lot of apps, when I want to avoid this latency I use inline script tags immediately after the content, like this:
<div id="hidden-div">
content
</div>
<script type="text/javascript">
$('#hidden-div').hide();
</script>
Or if you're not using jQuery:
<div id="hidden-div">
content
</div>
<script type="text/javascript">
document.getElementById('hidden-div').style.display = 'none';
</script>
At first this seems clunky; however, there are a couple of reasons why I take this approach:
The hiding is immediate (no waiting
for the entire DOM to load)
People with JavaScript disabled will
still see the content, whereas if we
hide it with CSS there is no way for
non-JS users to make it visible
again.
Hope this helps!

I would suggest moving your display:none rule to the top of the stylesheet so it's the first or first of a few parsed, though to be honest it would really depend on how many http requests/media resources you have.
You could try throwing the js before the end body tag and making sure the css is at the top, and the css stylesheet that hides those elements is the very first one linked.

Depends on the browser. Opera, WebKit and Konqueror load CSS and JavaScript in parallel (all CSS is loaded before being applied, however).
display:none is the best solution, but you can use inline-css (like in your description) which is directly loaded with the page, if you want to be extra cautious, its bad practice though.