I am trying to use the YUI ScrollView with paging but I do not want to use the "previous + next" button. Instead I would like a to have a container with links to each page.
Is it possible to skip to a specific page of ScrollView on a button/link click.
Something like
scrollView.pages.ScrollToPage(3);
Any help would be highly appreciated. You can find the documentation here.
As the documentation explains, there is a scrollTo method in the ScrollViewPaginator plugin: http://yuilibrary.com/yui/docs/api/classes/Plugin.ScrollViewPaginator.html#method_scrollTo.
You just need to write something like scrollview.pages.scrollTo(3, 0.6, "ease-in");.
Related
I have a question about paginationElement in Tabulator.
As per tabulator documentation, i created a DIV and used paginationElement in Table setup to render the paginator in the DIV. Well, it works. But with a drawback, no styling works, no colors, no highlighting of current page. So it is kinda inconvenient.
Is there a way to resolve this?
Otherwise, i am really happy with Tabulator! Thank you for the great work!
Cheers
You might have to style the pagination footer by css as the location of it has been changed by paginationElement.
This is because all of the table styling is based around the pagination element being inside the table.
Moving it outside the table will mean you will need to apply the styles yourself. The classes that denote that you are on the current page etc will still be applied, you just need to tell the browser how to style them.
The Styling Documentation contains more information on the classes used by tabulator and how to style the table
I'm trying to make a two-lines menu with bootstrap 4, and I found some examples on the web:
https://www.codeply.com/go/DpHESPqZsx
https://www.codeply.com/go/cxXqBnGrPx
In the first example they use "div class='navbar'" to create the menus.
<div class="navbar">...</div>
In the second example they use "nav class='navbar'" to create the menus.
<nav class="navbar">...</nav>
Which is the correct way? Which one should be used?
I have another question. Why do they NOT use the bootstrap grid with the rows and columns? When should you use it?
Thank you very much
Div and nav are similar element, in terms of what they do. However, nav is better in this situation because you want to have semantic markup. It is because of SEO and more readable for developers.
And why they are not using grid is probably because they haven't implemented it yet and should be coming. Their grid system is done with flex currently, but should change. And CSS Grid does not work that great with IE11.
You should use Grid when you feel that it will be easier to structure your site. It's a great tool, and combine it with Flex is so easy and comfortable
The difference is that a div has no meaning and a nav Element has a semantic meaning (indicating that there is a navigation). You can remove every div and span from a website and have no difference about the semantic structure of a page, every other element has a meaning: For example, states that there is the main content, says here is the header-part of the site.
These parts tell for example search engines what's on a site. So if you have the text "Stackoverflow" in your Element somewhere, google (and other search engines) know that you have a stackoverflow link in your navigation. If you have it in your Tag, you probably have a text about stackoverflow.
Keep in mind: These are some simplified examples.
The html5 nav tag has semantic meaning.
Please follow the Bootstrap docs. The grid (row>col) should not be used in the Navbar as it's not a supported component. Using the grid inside the Navbar will through off alignment, spacing and the responsive behavior controlled by the navbar-expand-* classes. I'm the author of both Navbar examples from Codeply you posted.
I've been playing around with Extension Library Navigator for a while and I can't figure out how to make the selected (or the current opened pages basic node) node to change any of the looks properties, for example font or color. I'm trying to do that so that user can tell what page is currently opened. Any tips on how to do that?
Another option, which is not as simple as the one suggested by Per, is to do the customization via a bit of script.
For example, I have built my site navigation with pure HTML and bootstrap.
My link HTML looks like this
<a id="YOURLINKIDHERE" href="vwBringUpsByDate.xsp">Bring ups</a>
When a page loads, you can then then use the below script to customize your selected menu item exactly how you like, fonts, colours, backgrounds etc just by referencing the link ID....
<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[$("*[id$='YOURLINKIDHERE']").css('background-color', '#eeeeee');]]></xp:this.script>
</xp:eventHandler>
Not ideal, as you have to put the script on each page that you want to modify a menu link with, but gives you some good customization options...
I want to have a series of images slide into a section on a page. Can anyone point me to a technique of doing that?
many thanks!
clem
It sounds like you are looking for a carousel - check out these jQuery plugins
http://www.tripwiremagazine.com/2012/06/jquery-carousel.html
If you like to use Dojo that comes with XPages, check out these links:
http://davidjs.com/2011/01/fun-with-dojo-animation/
https://dojotoolkit.org/reference-guide/1.8/dojox/image/LightboxNano.html
http://ofps.oreilly.com/titles/9780596516482/animation_and_special_effects.html
http://almaer.com/blog/cleanup-of-manual-animation-via-dojo-animation
Have fun!
Check out the Dojo Effects simple actions available with 8.5.3 UP1 and extlib.
Documentation here:
http://infolib.lotus.com/resources/domino/8.5.3/doc/designer_up1/en_us/DominoDesignerXPagesExtensionLibrary.html#Simpleactions_dojoslideto
The default pagination in drupal is great, but the text links are used
<<first <previous 6 7 next> last>>
But I need to use forward and backward image buttons instead of text links. Can anyone point me in the right direction?
Depending on what portions of the pager you're interested in replacing with images, you may be able to use CSS background images, without having to override the theme function. However, in the default pager output, not all the links may have unique classes.
That said, if you're using Drupal's default pager, you can override the theme_pager function to add your image links.
If you're using the Views module, you may be using a different theming function. When in doubt, you should be able to use the Theme Developer module to find which function or template file is outputting the part of the page you're interested in theming. Theme Developer will also tell you what suggestions you can use to override the output.