Split page scrolling behaviour in HTML - scroll

So I have a page that is split into 2 columns. The left column there are expandable forms that are quite long to ask the user optional product preferences. On the right side of the page there is a much shorter, 'contact details' form.
The contact details form is mandatory while all the left product preferences forms are optional. The behaviour idea is that as the user scrolls down to complete the left column optional forms, the page will only scroll the left column - the contact details forms displayed in the right column stay in place beginning. I'm having trouble implementing this and I haven't found a solution yet or any examples of pages with this split column behaviour online.
Any advice / suggestions?
Thanks!

Depending on how involved your layout is, you can use css fixed positioning so that as the page scrolls down, your right column stays in the same place.
Sample.

You can put the contents of the longer (left) column in a container div, and make that div independently scrollable using the overflow attribute.
Here's a sample.

Related

Xamarin Forms: Values vanished/refreshed on swiping more than four content pages inside carousel page or tabbed page

I am working on a xamarin forms project which have a carousel page container, and content pages as its children are created dynamically on different condition checks. (Minimum 8 children in my case)
Let's take the mentioned minimum case. I enter some values in entry/picker controls in the 1st child and then navigate/swipe pages till 5th child. When I came back to the first child page, the values I entered/selected are now vanished/refreshed.
I have noticed that carousel page saves only 3 pages data in it. i.e. (Left Page, Current Page and the Right Page).
And Tabbed page saves 4 pages data.
I want the values to stay in the child page where I entered whether I navigate to the last most page or in the middle and navigate back to that page.
I have googled via the letters as "Carousel page/ Tabbed page Saved states" etc. but unable to find something useful.
So, I need to know the property name/ method name etc. by which xamarin forms setting the limit of carousel page as 3 and tabbed page as 4.
Waiting for your response.
Thanks.
OK I found that I was using a Custom Picker Control and the value refreshing issue is with it. I just forget to set the selectedIndex of the picker on OnElementChanged event.

Can I add navigation arrows to PDF output in SSRS / Report Builder 3.0?

Somebody pulled the most random question on me today and I realized I'd never even considered it. What they wanted was my PDF rendering of an SSRS report to come standard with navigation arrows, i.e., previous page, next page. This started me looking at all the options that are available, which are actually kind of cool, and I was able to add on a table of contents, including bookmarks for a new number (e.g., if you're printing 5 invoices with 2-5 pages each into one long document, those will have the invoice number and you can jump to the beginning of that invoice), but I couldn't see anything about navigation links. In fact, most of what I've seen says that PDF's only can have navigation maps, i.e., the table of contents tab. So if anyone has any ideas on how I can do this, that would be great. I know it can be added after-the-fact with something like Blubeam, but that's not practical in this case.
As I mentioned in comments you can create a bookmark in each page. A bookmark can be added using the component DocumentMapLabel property almost all SSRS Report Items (Tablix, Textbox, Charts, etc) have.
If you don't have a title or a textbox at the very top of each page, add an empty textbox, be sure place them at the top of the page in order to each bookmark jumps to the beginning of the corresponding page.
Select the first textbox and press F4 to see the extended properties window, look for DocumentMapLabel and type Page 1.
In each page set the textbox DocumentMapLabel property to the corresponding page number.
When the report is exported to PDF, your PDF client shows the bookmark menu, containing a bookmark for each page. If you click on a bookmark it jumps to the related page.
This is how it looks in Adobe Acrobar Reader:
Let me know if this helps.

Two Column Article content Joomla

How to make some of article when I click readmore the paragraph not show
to the bottom but to the right side...
Here's the illustration screenshot:
http://www.oymo.com/upload/uploads/collumn-artikel.jpg
You can't do proper columns - ie. when the text flows from the bottom of one column it moves to the top of the next, without use of CSS3 (which isn't widely supported). You could probably do something with a bit of mootools or jquery as an alternative.
However, if you just want to show the intro text in one div and the main text in another (something like http://www.kodaklens.co.uk/mobile/) then you need to modify your template /templates/templatename/html/com_content/article/default.php, by creating your required 'static' layout and then loading the different article pieces into each container, but this won't help with text flow.

Update Drupal views argument via AJAX

I have a request concerning Drupal 6.x
I'd like to have this behaviour:
imagine to have 2 columns, on the left a list of nodes (only titles for example) and on the right a view showing just one of the contents on the left.
My idea would be to achieve this with an AJAX-fashion: clicking a link in the list on the left updates the view on the right with the actual node.
Which is the best way to handle this?
My idea is to use Panels, make 2 column panel with 2 views, one (left) filtered on content type, with no arguments, and one on the right which takes in as an argument the node id to be displayed.
But how to link the 2 views with AJAX?
(or, better, how to update the view on the right with an AJAX call?)
is this possible?
Any help or idea is really welcome
Thanks!
Cheers
Mauro
You also can do a quick hack, which is quite flexible, because it allows you to change your views without changing code.
I have had a similar task recently and for your task I would do the following:
for your right column, create a exposed filter (node id) and hide whole exposed filter form using CSS.
using jQuery, attach a click behavior to titles on your left column.
the click behavior takes the node id, finds the attached exposed filter at the right column, enters the node id into the input field and executes form's .submit().
the .submit() triggers the build-into-views well debugged ajax request which refreshes your right column.
this is certainly possible, and not very difficult to do.
Your task can be divided into two main parts:
Providing a 'callback' URL in the Backend that takes a node id (nid) and returns the markup to display the node in the right panel in a format that can be processed by javascript. This will be done in PHP within a normal Drupal module. The main point is not to return a full Drupal page as usual, but only the markup for the node.
Create logic for the Frontend that, when triggered by clicking a link in the left panel, retrieves the new node markup via the URL callback above and replaces the content of the right panel with it. This needs to be done in javascript, using the Drupal javascript API with jQuery.
You can find an introduction and example for AJAX in Drupal here. (This does almost exactly what you want to do, only with images)
You should also look at this more general entry point for JavaScript in Drupal.

User Interface - Dropdown

What is the best way to design an interface so that very long drop down values that get trucated due to size limits do not create a very bad user experience. My question is for web applications.
Could you please send your suggestions.
Thanks.
One option is to use 'type-ahead' with postback (AJAX) to reduce the size of the list.
Well, what I have done in such a case is:
Using autocomplete (so that the user can start typing and get at the intended option faster).
Have the dropdown of a fixed length like 30 chars. Now, if the value of the drop down is longer I just truncate it to 25 with a '...' at the end. A hover on this value will make the full text appear as a 'title' or similar.
You can use a another window (div?) with list/grid with paging instead of dropdown.
Its very intuitive for general users.
have a tooltip for each item in the dropdown list so when a user hovers his mouse pointer to an item, he'll still be able to see the full description of the item.
or have your dropdown width auto-resize to the longest description in the list.

Resources