Is there a JS/jQuery widget that would allow me to display a simple legend that contains for example a small colored rectanlge and a text label next to it?
In this specific case the legend would show meanings behind different color codes in an inline jQuery UI datepicker widget, which would be customized to enable multiple selections by a user and showing different colors for specific days.
In fact, the thing that I need would look exactly like the list of SO sites at the footer of this page (but ideally listed vertically next to the picker). So if there is no ready-made solution I guess I'll try and look at this page source.
You have to hand it to the StackOverflow crew. Their method for creating the legends is pretty clever. Basically, they use the character ■ (ASCII 254) in place of any image or div. They insert it in a span, which is styled with a font size and color property. Next to it is a styled anchor tag. Rinse and repeat.
What is particularly clever about it is that it all fits inline in a div and lines up on the baseline! Let me say that again: it lines up on the baseline! So there is no disparity in image offsets, etc. A tip of the hat to the UI engineer who made it that simple. Thanks for calling my attention to that, or I probably never would have looked and learned.
EDIT: ASCII 254 is incorrect. The actual value yielded by "■".charCodeAt(0) is 9632 and is probably some flavor of Unicode. Same look and shape, but different value.
Related
I have an HTML/CSS/Javascript related question, but I'm unsure of exactly how to ask, as I've long since forgotten the technical terms for everything.
My ultimate goal is to construct (code) a webpage element that does the following:
-Has a number of clickable elements (graphical buttons, not HTML "buttons") that, when clicked, display a variable amount of text that provides interesting details about certain things. If possible, some way to have these buttons "highlight" would be desired (I know how to pull off a CSS trick where the image is swapped up/down or left/right by coordinates when clicked, but I'm unsure of how to get this to work with what I intend).
-Allows me to affix some kind of a label in front of each button. (My original plan was to throw everything into an HTML table, so I could have a column on one side of the buttons that I can type labels into).
-Allows me to have an image background appear when the detail box pops up.
-Is organized such that the buttons and their title plates are on one side of the detail box, and the detail box itself is on the other side.
Example:
I have a column on the far left that has names of fruits (Apple, Orange, Banana, Pear). In a column immediately next to these names is a series of buttons aligned with each fruit name (one button per fruit name, so "Apple" then {button} on one row, then "Orange" then {button} on the next row, etc.). Clicking on that button will display, on the far right, a detailed description of each fruit, with a background image (same image for all of these detail boxes) behind this detailing text. This background image, and any text, would be hidden until a button is clicked. I would prefer it that if the same button is clicked twice, the text is once again hidden.
I've no problem constructing images for all of this, but I'm lost on the code. Is it possible to code all of this as some sort of HTML Table, so I can keep it organized? Would it be possible to have the far left column (example) have a background image, then replaceable text on top of it (thus decreasing the number of graphics)?
I apologize if my question and phrasing isn't technically descriptive. I've long since gotten too used to simple HTML pages and never really learned CSS/Javascript. If my question doesn't make sense, I'd be more than happy to draw an image to better explain my goal.
Thanks in advance for any responses.
Well, there's no single "right" way to do what you're asking. There's dozens of ways to approach this problem. It comes down to: 1) How much time do you want to spend building the solutions, and 2) Would it be an issue if you added different technologies to your project (such as Bootstrap or jQuery)?
To look it at from a general viewpoint:
There's a rule of thumb I heard somewhere that I think helps in situations like this. Every single thing on your page is a rectangle. Everything. All you're really doing is naming, styling, and manipulating these rectangles.
Any element, id, or class that you create on your html page can be manipulated by your css or javascript. And if it doesn't exist on your html page, then you can create it with css or javascript and then manipulate it.
Anything can be made into a "button", not just items specifically called out as buttons. You can choose whichever rectangles you want to be your "buttons"; you would just have to target and style them as such.
(As a piece of advice, though, I would recommend sticking with html's <button> functionality. Standardized semantics is good for everyone all around, and you can change the look and feel of these buttons however you want by using css).
To be more specific:
The traditional way to handle the hiding or showing of information on the page is by using javascript and/or jQuery.
Give all common html elements to be manipulated a class name class="example-class", and give any unique elements to be manipulated an id name id="example-id".
Here's the jQuery page regarding .hide() and .show(). (If you have any specific issues with these methods, then Stack Overflow can help). You would target the classes or ids that you named in the html.
As for organizing your page, using and nesting <div> tags is usually the way to go. Bootstrap comes with special classes that can help with the necessary roles: class="row" to help with the horizontals, class="col-SIZE-NUM" to help with the verticals, and class="well" to help with organizing sections.
Bootstrap's main page has a pretty good overview on your options: Here.
All of the above can be done with vanilla css and vanilla javascript as well. It's up to you to decide if you want to (or are even able to) make things a little easier for yourself here.
Hope this helps!
I want to create an online markdown editor that has limited wysiwyg formatting. If you're familiar with iA Writer, I'm trying to create an editor similar to their desktop version. For the most part it's just a simple text editor, but it does a few snazzy things that I'm trying to duplicate.
Automatically underline/bolds thing in *italics*, **bold**, ***bold italics***
Indents ">" blockquotes
Outdents "#" headers and "-" lists so that the text is left aligned, much like on the old three hole punched line paper you could align the text to the red line and put list numbers to the left of it.
I have a few thoughts about how to go about implementing this but I've run into some concerns with each of them.
Editable iFrame
How do I outdent text or apply a css class to it
The formatting happens automatically, so how would I change the selection of the text, reformat it and then go back to the original selection location
I hear that you can load another page into your editable iFrame to do more advanced features, but I'm not too familiar with that - any good resources?
Pure javavascript
How do I create a blinking cursor in an area because I don't think I'll be able to do this in a input or textarea...
Possibly make every line a div that converts into an input box when I click on it (similar to how the tags box works on the tags box when you ask a question (though doesn't work for inline formatting)
Any suggestions to how I might go about doing something like this?
A good start would be to look at Code Mirror (http://codemirror.net/) whom already provides Markdown Editor and a Strong API.
You should be able to add features and live rendering on top of it.
I am learning to develop mobile applications, quite in the initial phase.
This query is not related to mobile but more to html/css/js.(for
I intend to make a simple game, where a picture is seen, a few options are available and the user can drag and drop these options onto the image.
eg. There is an image of a plant > options are #leaf #stem #flower #bud
The user must drag and drop the correct option to the correct place on the image to get points. i.e Drag the #leaf option onto the leaf of the plant.
Now my problem is the image, the separation of these points, I can't figure out how to do it.
Query in short: How do I access separate points/sections on a single image in html/js for above purpose?
Query (longer version)
I did a little search and realised I can slice the image and recreate it using multiple images, I tried this, it sort of works but it has a a lot of drawbacks:
1)More images mean more space, combined size of the split images was about 1.5x the original image(this is just splitting it into 4 images)
2)For a complex picture, the number of images to slice into is large and hard to manage in css(n00b==me) as they don't just need to be split into a simple X*Y grid but a much more complex split depending on the object in the image.(realised when I was trying to do a simple cell structure img)
3)More images also means more http requests(in case the app is WebView based) which will increase loading time.
It just seemed liked too much of a hassle, there must be a better way.
Then I saw css sprites , I dont need to combine my images like sprites are intended for, rather the reverse. Just access parts of my pre-existing image, as separate objects.I haven't tried this(working on it) and and I haven't seen this being done either, or maybe its being done and I'm not seeing.
Please help guys, my problem is quite simple(I think) , I think I'm just not getting the correct google search terms.
If anybody has any ideas,links, resources and also any clarifications as I may not have put up my problem as clearly as I'd like to, please do reply.
regards,
Rahul Agarwal
You could try to place transparent divs over the main image using absolute position and fixed dimensions. Those divs will be assosiated to the possible options, and when a user drops an option over some specific div, you'll know what points to give.
Little demo using two divs and an animated scaling to show that the positioned divs will scale according to their parent:
http://jsfiddle.net/VK3A8/
fiddel with image:
http://jsfiddle.net/8qLFc/4/
I've already achieved this on my iPhone app, but I want to know if it's possible on an HTML page, maybe using CSS effects or similar.
As you can see, the current view is split, the bottom part is moved down, and another view is revealed underneath. I have a page I'd like to try this on. Any ideas if this is possible, and any specifics as to how I can do it? I'm quite new to HTML coding, so please take it easy on me. :)
Thanks in advance!
Here's an example to get you started http://jsfiddle.net/Cquhj/
A few things to take away from this pattern:
The middle div has an overflow: hidden; property and height: 0px.
The trigger icon has an event that tweens the height of the middle div to the size you want.
Edit:
I really like the resources and answers given and I would add this to the list http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Accordion_Menu
here an update, more iphone-like
http://jsfiddle.net/mFeyn/1/
it miss the triangle in the bottom of the folder once is clicked and calculate the height of the container when there is more than 4 icons.
Yes, it's absolutely possible, nothing out of the ordinary and CSS will definitely be needed.
As it is, your question is extremely generic and an answer would be: learn about HTML and CSS and the combination of the two for creating standard compliant web page layouts. You might want to read about the box model too. To solve your problem you need to know about the use, positioning and floating of a series of <div>s to achieve the desired layout.
If you want to add animation, like some part of the split view floating down into position, you will need Javascript as well.
Possible starting points for your research on SO:
Why not use tables for layout in HTML?
https://stackoverflow.com/search?q=css+div+column
Here is a code example that might give you a little bit more if your plan is to emulate iOS 4 folder behaviour using jQuery.
The view is basically split into rows and I played around w/ the background position css attribute to allow the background split illusion.
http://jsfiddle.net/hKHWL/
This is very possible, but it's kind of like asking "I want to program Civilization, and I'm quite new to C; how do I do it?" ;-)
I would strongly recommend picking up a good "DHTML" (Dynamic HTML) book. For instance, I rather enjoyed this one, from SitePoint: http://www.sitepoint.com/books/dhtml1/
If you're not the book-buying type, sites like SitePoint and AListApart can certainly explain things too, but not in as organized of a format.
Good luck.
I know this is an old post/question...
but I'm doing this with dynamic heights and positions here:
http://webkit-os.pixelass.com/iframe/
(only works in Chrome and Safari)
I am using jQuery and two divs with the same image.
Dynamic positions means.. you can move the folder to a different position or page.
Dynamic height means... the height is relative to the number of Icon-rows in the folder.
The folder even opens above and below if the content is too hight to be displayed below.
(opening the folder from the Dock does not work yet)
I have a 2 column table in a database 1,000 rows long(All integer data).
The display will allow for the user to delete a certain range of data from the table.
What I am looking for is a creative way to display all the data so the user can get to different parts of it really fast. Maybe displaying different chunks at once, represent with bar graphs or zooming the scope in/out would be really cool.
Any ideas,suggestions, examples at all are appreciated. Please just throw them out here for brainstorming.
Note: I am limited to JS, xml, html and C
Thanks!
By mouse scroll resize the text.
Add drag'n'drop for moving text block.
Example: user resizes it to a smaller chunk by mouse weal then moves it by using drag'n'drop.
It is possible to implement such thing with jQuery/JavaScript
Use a double slider with a min and max display range. Here is an example of one based on MooTools. Moving the slider controls will adjust which range of values are displayed in the table.
Could implement something that functions like google maps where you can easily zoom in and out and set points wherever you need that stay when you change elevation.
you can format the html with <h1>, <h2>, <h3> and <p> tags, and use jquery to collapse the paragraphs, leaving headings of major sections.
I did this with documentation i was working on and it worked out great.
I'm a fan of the JavaScript bookmarklet demoed in this video: http://www.youtube.com/watch?v=GPZ8YNgyl_I
The bookmarklet itself is available here: http://t_trace.wed.macserver.jp/overview.html
If you have used WinMerge, you could develop something like the location pane in the left that shows a full preview of the changes in files. It can be used to navigate very fast
Here's a screenshot. (Image too large to inline it here)
Assuming the integer data come in ranges, a common approach is to show how much data there is in each range as a horizontal bar. You click the range to zoom in, until you see the actual data, or click the X to delete.
ID Range
[X] 1-1000 xxxxxxxxxxxxxxxxxxxxx
[X] 1001-2000 xxxxxxxxx
[X] 2001-3000 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
A further refinement is to use colour on the horizontal bars to show data density. For instance red = lots of data, yellow = less