I have a requirement to split the screen into half and display the duplicate data on the other side of the screen. Initially this was achieved through a popup.
Hence user can compare the data without switching the screen. I want to avoid the use of iFrames for this. Could anyone guide me on how to get started with this. My application is pure Angular.
Thanks
Pretty much most of what you're looking for is in this tutorial:
AngularJS, Master-Detail page
It shows how to split the screen into two, and display a clickable list of items on the left, and an item's details on the right. But for your request, it sounds like you'd want the same on both sides..?
Related
I'm relatively new to developing and I just started with react. I have a scenario here and iam not able to implement it. So my query is
As in picture below, I need to implement page like there are list of categories and I need to display them in grids( like I have gird1 grid2 grid3...... In below image). And on click of any category I need to display its sub categories in grid right below the selected category(if I click on grid 1 or 2 or 3 or 4 their sub grid should display below those grids). How can I implement this.
Hope u understood my query.
Image here
Thanks in advance
I'm not sure if there are rules against posting a solution that I haven't really developed, but a search on google brought me to this page in w3schools with an example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_expanding_grid
I'm not sure if it would work on React, but it might be something you could adapt in your solution.
I am using ionic framework to make my first product on mobiles. I am trying to show a large block of text in different pages using ion-slide-box. But, the text is very dynamic, it can be anything and any number of characters. The page should not have vertical sliding. So, I have to find a way to calculate number of ion-slides required to show the entire text in as many pages (slides) as required. Is there a way in ionic or angularjs to achieve this?
Thank you in advance.
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/
Pretty simple question.
Its just some advice based on personal opinion and best practice.
It's difficult to explain so I'll draw the best image I can.
Try to imagine that I have any old website and at the very top I have a navigation bar which is broken into 3 rows.
Top is application: Settings, Profile, Login/Out
Second is notification: Error, new message
Third is part navigation part functional.
So we have 3 rows supporting different functionality and obviously different color schemes. Each on is no more than about 5% of the total pages height.
I supposed the question I'm asking is whats the best way to do this.
First guess was to use tables to format the data and space them out:
This worked, but It looks sloppy.
{
border-collapse: collapse;
border-spacing: 0;
}
seems to fill in any gaps in the table but it doesn't look right
Second guess was to use frame sets:
Shot myself a dirty look for even thinking of it
Third guess was to keep everything css and Html
Which seems like the most sensible one next to tables but keeping content organized with the multiple buttons and such sounds like it could be trouble.
Lastly
was use a JQuery or javascript UI library. This presents It's own set of problems but could be the prettiest if done right.
So if it was you, how would you go about doing this simple task and why?
picture of view as requested. Part in question is top nav
http://s1180.photobucket.com/albums/x406/0vertone/?action=view¤t=globalview.jpg
Don't use tables for this purpose.
Only use tables for tabular data (which this isn't).
Just use divs for the containers and lis for the menus.
EDIT
This is somewhat like I would do:
http://jsfiddle.net/uf2zU/1/
This uses elements what they are meant for.
And can be easily controlled using CSS.
EDIT 2
http://jsfiddle.net/uf2zU/4/
I would go about this using sets of HTML uls and CSS, because that's the most forward thinking, plus it uses HTML the way it should be. However, if you want to use tables, try border: none; and border-collapse: collapse;
I would go with the third guess for the presentation part, because that's the most flexible part, at least for me. If you split up all the sections correctly, then the task of managing the content will become quite easy, because you will be able to target the section and style anything with it.
In addition, I would go with the last option (i.e. vanilla JavaScript and jQuery), for client side functionality, because that's the Swiss Army Knife of DOM manipulation.
A horizontal nav bar just that -- a horizontal entity. Therefore, I wouldn't "stack" elements as rows, rather as columns. It's the difference between a huge header and something that's visually much easier to comprehend. Stretch your elements out, use icons, whatever. If you have the need to be really verbose, go with a giant menu
I personally use JQuery UI Tabs whenever possible because they're a well-established UI pattern, are easy to deploy, and automatically "Ajax Load" my pages. Sure, you get a few "gotchas" but they're nothing for a competent jQuery user to overcome.
In situations where I can't use UI Tabs, I will do a pure CSS bar across the top, "floating" via absolute positioning if that is what the client specs. Layout is no place for Tables (they are for tabular content elements) and you're right that frames have no place, period. This shouldn't be any more difficult than basic page layout, so it's a no-brainer to go this route.
For notification, there are other options that are more obvious and timely. Try the Notification Widget or StackOverflow style notifications All other small, basic info could be contained on your horizontal bar.
I'm working on a project that returns paged results with volumes potentially in the hundreds of pages. I've been playing around with more usable ways to perform paging than the standard fisrt/last/next/previous links and jump-to text box. One alternative I had was to have a scrolling list of pages. I'd display 5 to 7 links at a time, centered around the current page, but add onhover actions to buttons on either side to scroll through the numbered list. This allows users to jump way ahead in the page count if they like without the combersome "Jump to" textbox. Does anyone have any better ideas?
If not, I'm trying to decide on a way to implement the above functionality, but I'm not sure how to display only a section of a div (with the div being the full list of links.) Any ideas?
You might find Endless Pageless an interesting read.
Depending on the data you can categorize it different ways and display an index. Pages is one way. Calendar is another, etc..
basically Master/Detail view.
Another option is to use a slider control that displays the current page (and/or record range) numbers in a caption bubble.
You could use a dropdown list containing page numbers.