We're trying to show checkboxes for the 700+/- options that the user has. It's to map users to accounts, for all intents and purposes.
The checkboxes start runing extremely slow under Internet Explorer 8. Firefox, Opera, Safari, etc. run like a champ without issue.
Does anyone have a better, faster, and cleaner method (other than checkboxes) to utilize for this?
We wound up going back to the users and showing them the fact that the page rendered like crap, and ultimately, they said "That's not a problem"! So, we're stuck with the 2,100+/- controls :/
There are several options:
Use a select control. Consider using two select controls, and copying the selected values from one control to the other. This is more usable than a large multi-select.
Split your form into multiple, smaller pages.
Allow the user to complete a portion of the form, and load the additional parts via AJAX as needed.
Does anyone have a better, faster, and cleaner method (other than checkboxes) to utilize for this?
I think you should Page your data in a table with multiple page. 700 checkboxes is a UI-Smell from my point of view.
Even if is feasible in the other browsers, from the point of view of user friendliness it would be a nightmare.
One possible solution:
1.- Instead of checkboxes use to select lists, in the left one put all the available one, in the right the ones selected
2.- Categorize and/or divide in multiple steps
3.- Add a addAll and removeAll buttons for each page/category
Why dont you use 10 user controls with jQuery in it and render all the controls at pipe line. This way its not too much load at the server side and your controls will be async with each other.
Just my cents on it..
Related
I have a vb.net web project that contains some dynamically filled tables. I recently changed how this data is calculated, and now it is not being displayed properly. There are many web tables being nested inside of each other, and I suspect that I messed up something with how those tables are being nested. I'm still quite new to web development, so I'm having some trouble tracking down where the issue is originating from.
I've learned that I can view the source code for my webpage while I'm debugging it in a browser by right clicking in the browser and selecting something like 'View Page Source'. This is very helpful for visualizing how various tables are nested inside each other, and has helped me fix a couple issues already. However, I've noticed that the dynamically created content doesn't seem to appear in this source anywhere.
For example, if I make a web table that loads usernames from a sql table and displays them, searching for a given username in the source will return 0 matches, even if I can see that username on the screen in the debug session I'm currently running.
A couple questions:
Why does my dynamic data not show up in the source?
Is there a way I can make it show up?
If not, what other ways are there to examine how the different tables are nested at runtime after I've filled my tables with data?
UPDATE:
I did some more research, and it looks like any code that is run on the server isn't visible in that piece of source that I mentioned above. I do have runat="server" set for my table, so maybe this answers my first question. I'm still lost on the other two though - and those are probably the more important questions in terms of helping me fix my problem I'm having.
Look into using a devloper console in your browser. Chrome's is good - just right-click a control on the page and 'inspect element' or press F12 and use the magnifying glass at the top left of the console to select the area of interest. Firefox also has one, and I think modern versions of IE do too. Makes it a lot easier to investigate styling, contents, etc. and may help you locate your usernames. If they're on the page then they'll definitely be in some source code somewhere, just possibly not in an obvious place.
Lets say I want to make a website in which only one HTML template is used. For example, if one wants to create a new object, he clicks a button, and form shows up, leaving the remaining web page intact. My question is simples: should I use only 1 view to handle all the possible inputs/outcomes or should I have multiple views that handle the same template?
Thanks in advance
You can do one view, but if it starts to get complex, accounting for each possible input and output can become a headache. I suggest you use as many views as you need and then later implement AJAX to present everything as if it's only one-page
Seems like if that is the only thing that you want to do, having one FormView and handling the cases accordingly should suffice. For a given form, if it's not necessary, keeping it to one view is generally a good choice.
The task sounds trivial but bear with me.
These are the buttons I'm working with:
Google (+1)
Facebook (Like)
Twitter (Tweet)
LinkedIn (Share)
With a little testing on webpagetest.org I found that it's incredibly inefficient if you grab the snippet from each of these services to place these buttons on your page. In addition to the images themselves you're also effectively downloading several JavaScript files (in some cases multiple JavaScript files for just one button). The total load time for the Facebook Like button and its associated resources can be as long as 2.5 seconds on a DSL connection.
Now it's somewhat better to use a service like ShareThis as you can get multiple buttons from one source. However, they don't have proper support for Google +1. If you get the code from them for the Google +1 button, it's still pulling all those resources from Google.
I have one idea which involves loading all the buttons when a generic looking "Share" button is clicked. That way it's not adding to the page load time. I think this can be accomplished using the code described here as a starting point. This would probably be a good solution but I figured I'd ask here before going down that road.
I found one possible solution if you don't care about the dynamic aspect of these buttons. In other words, if you don't care to show how many people have +1'd or liked your page, you can just use these links...
https://plusone.google.com/_/+1/confirm?hl=en&url={URL}
http://www.facebook.com/share.php?u={URL}
http://twitter.com/home/?status={STATUS}
http://www.linkedin.com/shareArticle?mini=true&url={URL}&title={TITLE}&summary={SUMMARY}&source={SOURCE}
You'd just have to insert the appropriate parameters. It doesn't get much simpler or lightweight than that. I'd still use icons for each button of course, but I could actually use CSS sprites in this case for even more savings. I may actually go this route.
UPDATE
I implemented this change and the page load time went from 4.9 seconds to 3.9 seconds on 1.5 Mbps DSL. And the number of requests went from 82 to 63.
I've got a few more front-end optimizations to do but this was a big step in the right direction.
I wouldn't worry about it, and here's why: if the websites in question have managed their resources properly - and, come on, it's Google and Facebook, etc... - the browser should cache them after the first request. You may see the effect in a service where the cache is small or disabled, but, in all likelihood, all of your clients will already have those resources in their cache before they ever reach your page.
And, just because I was curious, here's another way:
Here's the snippet of relevant code from StackOverflow's facebook share javascript:
facebook:function(c,k,j){k=a(k,"sfb=1");c.click(function(){e("http://www.facebook.com/sharer.php?u="+k+"&ref=fbshare&t="+j,"sharefacebook","toolbar=1,status=1,resizable=1,scrollbars=1,width=626,height=436")})}}}();
Minified, because, hey, I didn't bother to rework the code.
It looks like the StackOverflow engineers are simply calling up the page on click. That means that it's just text until you click it, which dynamically pulls everything in lazily.
I'm currently evaluating the combination of jQuery Mobile and PhoneGap. For my application, I need a kind of "inner application" navigation model: A fixed header that contains elements to switch between various contexts and functions, and the entire region below that depends on whatever function is selected. An example: The user selects a customer and can then switch between different data and statistics views concerning that customer. Alternatively, the user can switch between different customers while keeping the same view. Each function / view might again be a rather complex construct of multiple pages with its own navigation.
I think I understand the basic ideas of jQuery Mobile by now, but I'm unsure how to implement this "the right way".
I could do this simply by coding the entire header with the navigation into every single page, but that feels like a really bad idea - lots of redundant code, lots of places to insert tiny mistakes that are very hard to find.
I could try to add all the UI elements for the different views to a single page, hide them and only display the ones that belong to the current function. This doesn't feel right either - I suspect that the DOM would be really large and I suspect that this might cause various (performance) issues.
I could try to create the contents of the page that depend on the function dynamically using jQuery DOM manipulation techniques. This sounds like a good idea, but the individual pages can be really complex, and I'm worried that generating lots of complex HTML code using JavaScript will lead to an unmaintainable blob of code.
I could try to combine the approaches - code the individual pages in the HTML file and then somehow "link" them into the appropriate place using DOM manipulation - but I've never done that and I'm unsure if and how I can get this working.
I could try to put the "detail" page into an iframe - would this work at all?
What is the best / canonical way of implementing this kind of application? Do you know of any tutorials or examples?
Just detach your header and then reattach it to your new page. For instance:
$footer = $("#myfooter");
$header = $("#myheader");
$footer.detach();
$footer.appendTo('#newpage');
$header.detach();
$header.prependTo('#newpage');
$.mobile.changePage('#newpage');
Detaching does not kill all of your button handlers / etc. You will need to keep track of what page you are on or look at location.hash to do different things depending on what page is being shown.
--Greg Frame
Thex Interactive
www.thexinteractive.com
The first way is the easiest way to do it. That's the way i did it too. Also this gives u the freedom to add a button specific to whats in the browsing area for that page.
The second approach will have loads of extra calls which you don't want.
The rest of the approaches are not worth the effort.
Styling form elements using css can be problematic since every browser render tag in different way (just like when safari render checkbox).
Okay lets ignore safari for a while, skinning input and button are rather easy but how to completely skin select, checkbox, radio, etc.
See this pages:
Checkbox skinning
Select skinning
Radio skinning
I've heard some JS framework such as EXTJS or MooTools can do that, but i don't want a large scale framework solution, just independent JS and we can modify the skin as we like, please no JQuery solution, since i don't use it.
Any idea to do that without using some specific framework?
If you want complete control, then you generally have to replace the browser controls completely and fake them with other elements, stylesheets and scripting.
If you don't want to use a framework, then it basically comes down to DIY.
That said, the whole concept have a couple of problems.
Trying to get the controls to behave how the user expects (given input from clicking, double clicking, triple clicking, right clicking, dragging, arrow keys, the control key, etc, etc, etc) is hard.
The controls might not look as the user expects.
Personally, I'd generally try to let form controls stick to the system defaults and not try to deviate from them. Give users what they expect.
Today there are quite many javascript solutions which allow a wide range of customization for form elements styling. A quick google came up with a few nice ones:
Perhaps the best known is the Bootstrap CSS framework:
https://getbootstrap.com/docs/4.0/components/forms
https://www.psd2html.com/js-custom-forms (jQuery plugin)
https://purecss.io/forms
https://github.com/select2/select2
https://github.com/harvesthq/chosen
Checkboxes/Radios:
https://codepen.io/vsync/pen/aBOOZB
https://codepen.io/vsync/pen/wKkuz
https://codepen.io/manabox/pen/raQmpL
Today you can find many kinds of form element styling on Codepen.com
Old answer (from May 16 '09):
yes, it is quite easy.
you can use niceforms, which is independet script for making
nice looking forms, then you can modify the graphics images /
CSS as your wish.
The idea is, coding something that looks the same with same
funcionality but different design, then you need to "give it
life" with some javascript magic :)
then, you have to have ilsteners all over the place, to check
what the user clicked, than you need to reflect that same value
to the pre-hidden form element the corresponds to the "fake"
one. means, to manipulate it. then when you send the form, the
right values are places via JS.