I have a Custom Taxonomy called groups as part of my species Custom Post Type.
On the front-end of my website, each parent Group displays in a box, with a title and a description.
The children of said parent Group then display as single line <li>.
I would like to use a JavaScript plugin to display the description of each of these children when a user hovers over the link. For example, hover over "Hatchetfishes" and see the description for that Group, which might be "All fishes from the genera Gasteropelecidae".
I've had a look at ClueTip and I like the styling/simplicity of the plugin, so if possible, I'd quite like to use that. I'm totally open to using others though, as long as they're based on jQuery and are lightweight.
What would be the most efficient way of doing this? I have 7 parent Groups and 39 children on one page; no descriptions are longer than 20 words.
Thanks in advance,
Within the <li> that holds the children, put the description of the children. Default behavior for these should be to not display, and they should presumably all have the same class. You can then set another class (or just apply css directly with jQuery) to make these display.
Related
Like for my one component there a two styles added , if style one is selected then I have to hide 1 field in cq:dialog and if style 2 is selected then I have to show that field
Is the style mentioned above, is a dropdown within same dialog? If yes, there are numerous examples explaining how to implement Show/Hide of dialog fields. Please check here, here, here, here.
Basically idea is on the dropdown field, add a class cq-dialog-dropdown-showhide and a property cq-dialog-dropdown-showhide-target with a value of class selector unique to component. Then by defining property showhidetargetvalue on the element, selecting the dropdown will show/hide respective properties.
If the style you mentioned is the style system applied using brush icon, it is not OOTB. You ll need to add an authoring clientlib and implement logic to hide specific dialog field based of style system applied.
IMO style system is presentational, only to apply skin to the component. It should not drive business logic of allowing dialog properties. As simplistic, maybe allow authors to enter all allowable fields at dialog and using JS, you may consume / not, the dialog properties.
I'm using the Angular UI Bootstrap typeahead to display a customized list of suggestions as the user types into a text input form control. This form control exists inside a div using jQuery slimScroll in order to maintain a constant div size despite the size of its contents fluctuating. I really hoped the typeahead would display over everything like a regular html select dropdown, but unfortunately it does not, as can be seen in this plunker. I've tried futzing around with the z-index and adjusting the position and display properties; all fruitless endeavors.
Does anybody know how to get the typeahead popup to display over its parent border? If not, is there a way I could coerce the select tag to display HTML content so I can include glyphicons, emphasized text, etc. in the list of suggestions?
The problem is with the slim scroll - you are inside a div with relative position and overflow hidden (think of it as an iFrame). There is a small workaround...
You could, essentially set the position of the generated UL (.dropdown-menu) to fixed, set a height for it, then set an overflow:scroll...
It would work in some scenarios where the input field has a fixed position... otherwise you'd need to control where the input is and adjust the position of the auto-complete to follow, and a whole other bunch of nasty scripts.
Without looking at your application, I cannot understand why your have this particular architecture, but I can say that there must be cleaner options for handling autocomplete outside of slimscroll.
I just set typeahead-append-to-body="true" on the typeahead control and it worked. Not sure exactly why, but it's certainly a simple solution.
I have a requirement from my customer where I need to make the footer of the website dynamic in terms of adding sublayouts in footer placeholders via page editor by the Content Author.
The footer shall consist of:
One content slot - to which any sublayout/sublayouts like grid component or rich text can be added.
I want to add a new placeholder 'ContentSlotPH' to my footer which picks up its presentation details and data from a common page at "/sitecore/Content/Common/Footers/FooterContent/" ( where I have added my sublayouts like grid/richtext for the footer); and shall apply to all the pages of the website where the footer is present.
I want this change to be visible on the fly so that in future if the presentation details on FooterContent page change, new presentation and data gets applied to the ContentSlotPH of the footer.
Can someone help me in implementing this?
This functionality is not available out of the box unfortunately, the only way to achieve it with standard features (as Anton mentions in the comments) is to set them as presentation details on the standard values of a base template.
Unfortunately, this is not user friendly or editable through the Experience Editor (out of the box). It would also mean giving Content Editors write access to the templates and standard values, something that is normally locked down since making a mistake could cause exceptions especially on a production system.
Instead you could look to utilise Sitecore Placeholder Fallback. This will allow you to set up the headers/footers on a top level page and then any children will fallback to use the renderings in the placeholder from a parent item if they have not been set.
We have tried to approach this problem by using components that have presentation details on them. We call these Content Blocks, but other accelerators have different names for them with similar functionality. Essentially, this becomes a 'page inside a page'. You add your component to the template and reference a central datasource which has your footer datasource (including presentation details).
This allows for authors to have access to edit the footer by editing the footer component datasource without accessing template details.
Check out my Sitecore Base Layouts project:
http://www.awareweb.com/resources/video?vid=7d52fef2a67c453fa38dd092bd9ae7e2&
https://github.com/BenGGolden/Sitecore.BaseLayouts
Here's the issue, I build a special book reader/browser (For holy quran), my code behind loads the page and constructs how it should look. and then it should bind that look to a some kind of data-bindable custom control to view it properly. the problem is, the look differs from page to page, so I cannot bind to a certain control or wrap panel.
here's how it generally looks:
The decorative border top of the page is always there at any page, it indicates the part and chapter the viewer is in.
If you're starting a new chapter it have additional image under that decorative border or anywhere in the page (there can be multiple chapters in the same page) something like this
or this:
The normal text is not an issue, it's just a special font, however, I put each individual word in its own text block for reasons of user selection by word.
The issue here is, given the previous information, and knowing how random it is to place the decoration picture or the amount of words (text blocks) per page. how can I bind that to some kind of view to separate the view from the VM and Engine that builds the page.
my past solution was to actually build everything in the VM in a wrappanel built inside a scrollviewer having lots of textblocks and images according to the page. but that's naiive solution. I want to rebuild that in a more professional separated way. I also want to do this for Windows RT beside Windows phone so I need to reuse the code behind in a Portable class library.
I think all you need to do is slightly adjust your current design. So perhaps have a VM that represents the entire content, and that would have a Collection of say Pages or Sections. A second VM would represent the Page/Section, allowing you to create a property for the WrapPanel content (i.e. the words) and another property for the Header and or other things.
In the View you would have the scrollviewer and bind to the main VM collection. Then create another View or DataTemplate that represents the Page/Section.
You should be able to do this is a strict MVVM sense quite easily and it will be dynamic based on the content.
You could even cater for advanced scenarios where each section has a different template/view.
I know there are many questions concerning this topic but after reading them all I'm even more confused.
I have an application that manages contacts. There are three pages:
Add contact
Show contacts
Modify contact
And now I have no idea what structure to give to my project: should I create three different modules? if so, what would be the best package structure? and how would I call other modules within a page? for example, from the 'add contact' page there should be a button to the 'show contacts' page, and from this one there should be button/links to 'modify contact' and 'add contact'.
would it be enough to add this line to the corresponding buttons event handlers?
Window.Location.assign("showcontacts.html");
(or just create a link to "showcontacts.html" if it's the case)?
GWT is not suited for applications with multiple pages. What you can do is
create a page with multiple div's. Create the links on the top of the page. When any of the link is clicked you can then show or hide divs as per your need. This is how I had done it for a different app.
Hope that helps
To allow multiple pages to be selectively displayed within a single module, I use one of two techniques:
use a SimplePanel or one of its
derivatives (e.g. LazyPanel,
ScrollPanel).Use setWidget to change
the page. Each "page" is a widget.
For example, I am doing a project
with a menubar. When "Home" menuitem
is clicked, the menu command
replaces the body of the simplepanel
by setting its widget to the Home
widget. Likewise for login, etc
menuitems.
A SimplePanel allows only one widget.
Therefore, you do not addWidget to it but setWidget to it.
use tab. Either TabLayoutPanel or
TabPanel. I prefer using the
TabLayoutPanel. You have to meticulously
set/design the CSS for TabLayoutPanel, otherwise
you would only see a blob of text hanging around.
I also try to encapsulate a "page" widget in a lazypanel (which is a derivative of a simple panel. That will prevent instantiation of any pages that may not be used in a module with a large number of "pages".
GWT is indeed suitable for ui presentation with multiple pages. In fact, one of the advantages of GWT over JSP is that you can change a page without a browser refresh/fetch flicker - one of the extremely strong reasons why you would want to use GWT for a web app with multiple pages.
Seems that GWT MVP framework suits your needs:
http://code.google.com/webtoolkit/articles/mvp-architecture.html