Panelbar like in JotForm.com? - html

Jotform.com uses a nice panel bar, the navigation system in the left side. It looks polished and is rich in functionality. The items have a highlight and have help '?' functionality which display a preview upon hovering.
I don't know if they built it themselves. I was wondering if there's a jQuery plugin or UI
Framework that helps me build something very similar. I already have Telerik's controls however this one looks cooler.

They probably did it with one of the JavaScript libraries they link to on the webpage. The probably did it with this one?
Edit: I was incorrect on closer inspection is is this file that is used when the side panel is used, but I cannot find the library that it came from.
Perhaps you could just contact them and ask?

Related

Is there a way to implement emoticon packs into HTML?

I am making a social networking site and would like emoticons to be available to users to click, and view a whole range of standard emoticons. I have seen around the web, and have not come up with any concrete information whether this can be done, and how.
The way I imagine the emoticons to be is similar to what WhatsApp have adopted. An emoticon icon, which, on click, displays a whole range of icons. Just wondering whether it is possible and if so, how?
It can be done, you would need a java-script widget for it though and depending on the rest of your framework it could be fully integrated or it would require some additional files.
Here is one example of such a widget, not sure if it is precisely what you need but you can get the idea there:
https://www.npmjs.com/package/emoticons-js
Umm, you can have a set of icons what you can display?
Or use the unicode entry points for the emojis?
http://apps.timwhitlock.info/emoji/tables/unicode
Then you need one element with some onclick handler in Javascript which opens up a floating div showing a selection of emojis.

Am I using Bootstrap's navbar correctly?

I can't find any info how the intended implementation of Bootstraps navbar is suppose to be done.
Right now I have downloaded the example, and cloned it for each of the button options, changed the menu so the shows the correct selected button, but this can't hardly be the correct way, as it is a lot of copy/paste maintenance.
Also I am guessing that is not the intended method, as it looks like navbar is a class in bootstrap.
Has anyone tried to use navbar and can tell me how they did it, or point me to the intended method?
It is outside of Bootstrap's scope how to implement it in an efficient way. That is the job of a server-side language.
When you have a situation where you do a huge copy/paste, then think template, and for small copy/paste think variable like in the case of the menu, where you have to change the active state.
Any modern server-side language have a template engine, where you put in skeleton of your page.
For the menu, you probably want to generate it, where you have the menu button names in a yaml file or perhaps database of some sort.
On the other hand is it popular to offline generate all possible html pages, and then serve them with a plain httpd or nginx. Jekyll and github pages are such examples.

Develop tabbed Content using HTML

I am trying to develop a tabbed system to represent my data. I am seeing that many approaches use format for the tabs to directly navigate to the content of that tab. Is this the one and only way to develop tabbed contents? My problem is
here is the fiddle
jsfiddle.net/rQTpB/4
I need to include this tabs a part of a larger home page. if I develop the tabs using the above approach, when I click on any of the tabs,the page snaps to the starting of the div. I don't want that to happen. I need the tabbed functionality without that snap issue. Is there any other way to achieve my requirement?
So , far couldn't find any..:(
Thanks,
This is very nice work. But you could use some ready solutions for tabs. E.g. jquery ui:
http://api.jqueryui.com/tabs/
or - based on the above, but more functions avaliable:
http://www.primefaces.org/primeui/tabview.html

How to implement a modal pop up window from a div

I'm a novice web designer and I am trying to design a pop up div contact for/box. I've been researching for an entire week, longer really, on how to create a pop up div with a modal layer. My website hosting doesn't allow for in-depth HTML, CSS and JS customization, so while I've discovered what appeared to be good plugins/templates, I can't really use them because of my limited access. (At least, they didn't work when I did try to use some of them.) All I can really customize is the section of my webpages and then I can add HTML snippets to the page. Everything else I have to jimmy-rig into these two areas; very limiting as you imagine.
I finally found some code I could use though, and after learning some CSS and javascript, I was able to successfully create my pop up div contact form/box. I figured out that I had to put the CSS and JS in the section and then add the simple div for pop up modal purposes to the page via the HTML tool from my host's website building application.
But there are issues. I discovered the code I discovered and adapted to my site isn't that great. There something going on with the formatting that prevents the modal opacity layer from being the correct size (and I have tried everything I could think of to fix it, but to no avail). Also, the way my pop up div is centered just doesn't seem 100% right. It "functions", but I want it to function appropriately. The other issue is compatibility between browsers. I've been designing my website and checking my progress in Chrome, and it works fine. But it gets mangled on IE8 and Firefox.
Well, after this very short glimpse at success, I started researching for a final solution. Using Chrome's developer tools, I was able to track down various elements of functioning modal popups on websites other than my own and stumbled upon SimpleModal, which happens to be the nifty little modal popup tool that my web hosting company uses. However, I've been unable to install it correctly using the demo code of SimpleModal.
SO COULD SOMEONE PLEASE TELL ME HOW TO INSTALL SIMPLEMODAL? And if necessary, I can post the code from my website in a comment (as much as I can fit at a time at least; there seems to be a limit...) and someone can see firsthand my troubles if that helps?....THANKS!
MY WEBSITE:
http://solitairethahalo.com/
You should look deeper into the inability to use Javascript. Which host are you using?
If you do find that you are able to use js, then, instead of going around, getting plugins from everywhere, and creating a mess in your DOM, you should start your projects using a boilerplate.
Check out http://www.initializr.com/ and use the bootstrap option. This will set you up with LESS stylesheets and incorporate Twitter Bootstrap which will do exactly what you want with your modal.
Once you have your page setup, using bootstrap you should be able to turn any div into a modal in your script.js file by calling the modal method on it (from bootstrap)
$('#myModal').modal(options)
You can find the bootstrap documentation here http://twitter.github.com/bootstrap
hope it helps!

Context menu in web applications, yay or nay?

There have been a few things in web app's that I don't like. First and foremost is not having a right click context menu. I'm so used to right clicking on an item in a list and doing an action. So I've had a browse around, and it's certainly doable here's an example.
My question is, are there reasons not to do this? I can't think of a single web site I've been to that uses a context menu like this. Is that just an historical convention, or is there something else?
Thanks
I don't think its so much as historical convention, more than in order to catch the right-click event you basically have to override/ignore the web browser's default functionality for right-clicking.
That being said it absolutely can be done via Javascript - here is one example ( i haven't used this, but just did a quick Google search ):
http://luke.breuer.com/tutorial/javascript-context-menu-tutorial.htm
Context menus are an excellent tool for web applications. The issue is many Mac users are not used to right-clicking.