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...
Related
I work with Jade (pug) and Nodejs.
I created a dropdown button, so that user can choose an item, but it didn't show in the application. There is no dropdown there. I've already use display:block and clean the browser cache. But still stuck here.
Here is my .pug file:
.filters-nav
.btn-group.m-r-15
button.btn.btn-inverse.dropdown-toggle.waves-effect.waves-light.btn-custom(type='button', data-toggle='dropdown', aria-expanded='false')
span.btn-label
i.fa.fa-filter
| Add filters
span.caret
ul.dropdown-menu.filters-dropdown(role='menu')
li
a(href='#', data-filter='table_1_filter_0') Instrument ID
li
a(href='#', data-filter='table_1_filter_1') Instrument Code
I wonder if it is CSS, but all I know is CSS doesn't related to element visibility at all.
Maybe this will help, its pug plus the css
li.dropdown.btn.btn-default
span.glyphicon.glyphicon-th-list
............
https://codepen.io/thehumanscience/pen/qbLepW
i have purchased a website template and i need help concerning the website translator using google translate.
The translate works well but after selecting a language, a google drop down appears and when i scroll down, it still appears and hides my main header titles.
Can something be done like removing this drop down when i translate a language or can someone suggest me another method.
Thanks a lot.
The problem is the the contents in this bar are inside of an iframe, So you cant use javascript to trigger the close button.
Solution
Once the user chooses a language the an iframe with a class named 'goog-te-banner-frame'
is added.
You can use javascript to detect if it present and hide it
$(document).ready(function(){
if($('.goog-te-banner-frame').length > 0){//check if the iframe exsits
$('.goog-te-banner-frame').css('display','none');
$('body').css('top',0);//google adds top to the body so the bar wont cover website content
}
});
because this code uses jquery. make you sure you load it like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
In an XPages application I've been given the following HTML code for a navigation bar which will be used to select which of three different Custom Controls display:
<ul class="Navigation">
<li>Option One</li>
<li>Option Two</li>
<li>Option Three</li>
</ul>
I know lots of ways to display or hide Panes or Divs or Custom Controls from buttons or code but I can't figure out how to do it from a simple HREF call. I've tried hiding a div using dojo which works in CSJS in a button but not here, and using CSJS to set a sessionScope variable which of course doesn't work:
<li>Option One</li>
<li>Option Two</li>
I'd appreciate any help with this. Thanks very much in advance!
If you want to hide a custom control based on url. I believe that's can be done via the dynamic content control that comes with the ext library or 9.0x. I might have the name wrong but should be close. I think there's an example in the ext library demo app that you can get from OpenNTF.
You could hide the whole <li> element by using a panel:
<xp:panel tagName="li" rendered="...">
...
</xp:panel>
Just calculate the rendered property with your logic for that panel element.
Use XSP.partialRefreshGet() or XSP.partialRefreshPost() to refresh your panel with all custom controls from client side. Set a parameter "option" with the current value.
javascript:XSP.partialRefreshGet("#{id:panelAll}", {params: {'option': 'One'}}
Refresh the panel on server side testing the delivered option with
param.option == 'One'
and render your sub panels accordingly.
If it must be
href="optionOne"
or similar, you could try with
href="currentpage.xsp?nav=optionOne"
and use param.nav in your code to find out which option is selected. Much like Knut's idea, but then doing a full refresh.
I wish to add a new menu item/link (e.g. "Stack Overflow") at the end of the menu in the screenshot below.
The new link URL would end in the community_uuid e.g. http://example.stackoverflow.com/some-page#community_uuid
Is there any good documentation available to show how this is done?
Immediately I thought of three things:
1 - Custom CSS for a community, so you could somehow add/change or maybe create a landing spot for a dom manipulation event which adds it.
In order to change the CSS, You should look at:
http://infolib.lotus.com/resources/oneui/3.0/docPublic/components/menu.htm
It's the navbar role.
In a folder such as /local/con/opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/conServerCell/Communities.ear/comm.web.war/nav/common/styles/orangeTheme/
2 -
You may also want to look at /local/con/opt/IBM/WebSphere/AppServer/profiles/AppSrv01/config/cells/conServerCell/LotusConnections-config/widgets-config.xml
specifically
you could add a StackOverflow widget, when loaded it automatically opens up a new window, and transfers the person back to the previous page. ... a little bit of a kluge...
3 - Look for /local/con/opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/conServerCell/Communities.ear/comm.web.war/nav/templates/page.jsp
find the line
<div class="lotusMenu" id="lotusMenu" style="display:none;" role="navigation" aria-label="Main navigation"><div class="lotusBottomCorner"><div class="lotusInner">
<div id="lotusMenuTree"></div>
</div></div></div>
You could modify the very end to add some custom link for you.
Just some quick thoughts...
I'm customizing a NewForm.aspx page and I've created a few new SharePoint:FormFields in the form of textboxes. I'm looking to customize the height of these boxes on a case-by-case basis, but I can't figure it out.
I've looked into DisplaySize, but that only controls the width of a specific textboxe, and I've seen adding in:
<style>
.ms-long{width:100px;}
</style>
but that changes every SharePoint:FormField size, not just one.
Find the element in the complete html output, and use the id rather than the class as the css selector. If you can't find a suitable selector or you need to use selectors not supported in ie, you can use javascript/jquery to find and modify individual controls.
If you are customizing the NewForm.aspx, and you want to customize the look of the controls, you should also customize the CSS by using your own .css file. That may or may not include a customized master page.
I take it your a user of SharePoint Designer to be editing NewForm.aspx. Personally the route I would go down is to design a custom text box field and give it the desired size that way. Might not be what you want, but it's one way to do it.