I need to modify classical Notes Web UI application. In the UI, it shows mail data. If the data has attachments, they are shown as links in the body field.
I'd like to detect when a user clicks the links, and enable "next" button so that the user can move to the next screen. Is it possbile?
Yes, and this has nothing to do with Domino specifically: put a div around your next button, that initially has the style display: none or give itself an ID and put the display: none directly in the properties box of the button on the html tab, fields ID and style.
Then write a little JavaScript that runs in the onLoad event, selects all a tags with attachments in it (they all have $FILE in the href) and add a function to the click- event to set the style of the button to display: block or something else.
You can prevent the default event (open the attachment) by using preventDefault():
var list = document.getElementsByTagName("a");
for (el of list) {
if (el.href.includes("$FILE")) {
el.addEventListener("click", function(event){
var yourNextDiv = document.getElementById("IDOfDivWithNextButton")
yourNextDiv.style.display = "block"
event.preventDefault()
});
}
}
Related
I am working on a JavaScript based UWP app. Now I need to dynamically show a html page(with a url) in a pop-up window.
I did some search, there is a ContentDialog I can probably use:
var object = new WinJS.UI.ContentDialog(element, options);
but I cannot find any JavaScript sample code for it. I couldn't figure out what should I pass as "element" and how I put the html in ContentDialog.
Thanks in advance for any help.
The WinJS playground shows you how to use the ContentDialog: http://winjs.azurewebsites.net/#contentdialog
The element you pass is the Html element you want to initiate as the dialog.
<div id="myDialog">I am the going to be the dialog content.</div>
var element = document.getElementById('myDialog');
var options = {
title: 'Main instruction',
primaryCommandText: 'Ok',
secondaryCommandText: 'Cancel'
};
var dialog = new WinJS.UI.ContentDialog(element, options);
If you want to set the dialog content dynamically you can do so with
var webview = document.createElement('x-ms-webview');
webview.src = 'http://stackoverflow.com';
dialog.element.querySelector('.win-contentdialog-content').appendChild(webview);
dialog.show();
I have got a multi level navigation in Orchard CMS which shows sub menu items on hovering. When I click, it opens a content menu item. This works well on a PC but not on a mobile device. In case of a mobile device or touch device in general it should collapse the menu instead of jumping to another page.
I am looking for an easy and clean approach to solve this.
Is there a way to create such a menu item only acting as an opener for the sub menu items instead of actually linking to a page?
Some background information: It is actually a theme based on twittter bootstrap 3
You can extend the MenuItem shape (~/Core/Shapes/Views/MenuItem.cshtml) to differentiate between parent and children
So first create under {YourTheme}/Views new view called MenuItem.cshtml and paste in the following code
#{
// odd formatting in this file is to cause more attractive results in the output.
var items = Enumerable.Cast<dynamic>((System.Collections.IEnumerable)Model);
}
#{
if (!HasText(Model.Text))
{
#DisplayChildren(Model)
}
else
{
if ((bool)Model.Selected)
{
Model.Classes.Add("current");
}
#* morphing the shape to keep Model untouched*#
Model.Metadata.Alternates.Clear();
if (items.Any())
{
Model.Classes.Add("dropdown");
Model.Metadata.Type = "MenuItemLinkParent";
}
else
{
Model.Metadata.Type = "MenuItemLink";
}
#* render the menu item only if it has some content *#
var renderedMenuItemLink = Display(Model);
if (HasText(renderedMenuItemLink))
{
var tag = Tag(Model, "li");
#tag.StartElement
#renderedMenuItemLink
if (items.Any())
{
<ul>
#DisplayChildren(Model)
</ul>
}
#tag.EndElement
}
}
}
Now just create another view called MenuItemLinkParent.cshtml and create simple hyperlink placeholder that doesn't link anywhere
<a>#Model.Text</a>
Now any MenuItem which becomes parent will lose it's href link (you can also edit html structure and classes this way, if necessary for bootstrap). Easy and clean enough? :)
I would like to be able to link to individual tabs in a PrimeFaces' "tabView". In other words, if my page "test.jsf" has a tabView with a tab entitled "Example", I want to be able to click a link to "Test.jsf#Example" and have the "Example" tab loaded automatically. How can I do this?
This can be done with a wee bit of JavaScript (using jQuery). I hope I have commented the following code well-enough that it can be understood.
<script type="text/javascript">
// What this does: when the page is loaded with a URL fragment (i.e, the #abc in example.com/index.html#abc),
// load the tab (by "clicking" on the link) that has the same text value as the fragment.
// Example: if you go to test.jsf#Example, the tab called "Example" will be clicked and loaded.
// This allows individual tabs to be linked to, and puts what tab you were on in the history.
navigateToTab = function () {
if (window.location.hash) {
jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
if (jQuery(el).text() === window.location.hash.replace('#', '')) {
jQuery(el).click();
return;
}
})
}
};
jQuery().ready(navigateToTab);
jQuery(window).bind('hashchange', navigateToTab);
// This makes it so that if you click a tab, it sets the URL fragment to be the tab's title. See above.
// E.g. if you click on the tab called "Example", then it sets the onclick attribute of the tab's "a" tag
// to be "#Example"
setupTabFragmentLinks = function () {
jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
el.onclick = function() {window.location = '#' + jQuery(el).text()};
})
};
jQuery().ready(setupTabFragmentLinks);
</script>
All you have to do is insert that JavaScript in the page that has the tabs. Then you can get a link to a tab with the usual <a href='test.jsf#Example>Click here!</a>. An added bonus is that the tab you were on becomes part of the browser history; i.e., if you navigate away from the page that has the tabs, then press the "back" button, you are brought back to the tab you were on.
Note: if the tabView changes (e.g. you add or remove tabs), you will need to call setupTabFragmentLinks again.
Primefaces provides a javascript API for the <p:tabView/>(and many other components). You can call the select(index) method on the client side widgetVar name of your <p:tabView/>. For example, on a tab view
<p:tabView id="thePanel" widgetVar="tabPanel"/>
From a <p:CommandButton/>, you can call tabPanel.select(1) in the onclick attribute to select the first tab and so forth
<p:commandButton update=":thePanel" value="Do It " id="doIt" onclick="tabPanel.select(1)"/>
I have a Google earth plug-in and I have made various Placemarks and the balloon using the Winform library in c#. Now, i can see those Placemarks on the map and when i click the placemark, i can see the content i have parsed.
Now, my requirement is that when user clicks the balloon, i want to display the content of that balloon displayed in a text box outside the plug-in.
I am not finding any way where it can be recorded a which Placemark has been clicked and i can access the content of the balloon.
Can anybody help on this?
You should be able to find all the info you need here
https://developers.google.com/earth/documentation/balloons
Edit:
I am not sure of your approach to show the text in your webpage, try something like this
function addData(text) {
// var TheTextBox = document.getElementById("Mytextbox");
// TheTextBox.value = TheTextBox.value + text;
document.getElementById('Mytextbox').innerHTML = '<p>' + text + '</p>';
// if still having problems, try using an alert to see value of your 'text'
alert(text);
}
another idea - instead of listening for a balloonopening, listen for a click
google.earth.addEventListener(ge.getGlobe(), 'click', placemarkClicked);
function placemarkClicked(event) {
var obj = event.getTarget();
// determine if the user clicked on a Placemark
if (obj.getType() == 'KmlPlacemark') {
event.preventDefault();
var placemark = obj;
var placemark_name = placemark.getName();
var placemark_desc_active = placemark.getBalloonHtmlUnsafe();
// proceed to use the name and description as you like
I'm trying to display a div inside tab playlists if the href contains a spotifyURI. This will be used to display a playlist under a tab.
Step by step this is my problem:
Click playlist tab and then click the "My playlist1".
The href is displayed in the playlist container under the tab playlists. (perfect so far)
Click the start tab and then click the playlists tab.
Instead of displaying the list of playlists the playlist container is show again. So the last used url is cached?
Then if the playlists tab is clicked again the url will be "reseted" and the list of playlists will be shown and playlist container hidden.
I'd like 4. to show the playlist list right away instead.
Is there a way to reset or what am I missing?
<script>
$(document).ready(function() {
sp = getSpotifyApi(1);
var m = sp.require("sp://import/scripts/api/models");
updateTabs();
m.application.observe(m.EVENT.ARGUMENTSCHANGED, updateTabs);
function updateTabs()
{
console.log(m.application.arguments);
var args = m.application.arguments;
$('.section').hide();
if (args[1] == "spotify") $("#playlist").html("args:"+args).show();
else $("#"+args[0]).show();
}
});
</script>
<div id="playlist" class="section">Container for playlist content</div>
<div id="start" class="section">Welcome</div>
<div id="playlists" class="section">
My playlist1
My playlist2
</div>
Thanks alot for all replys!
Here is how I will proceed using JQuery.
First of all you need to use the Localstorage :
var stor = sp.require("sp://import/scripts/storage");
Then if for exemple you get a list of playlist you can build the list like this
for (var i=0; i<d.playlists.length; i++) {
$('#playlists').append('My <a id="p' + i + '"href="'+ d.playlists[i] +'">playlist1</a>');
$('#playlists #p'+i).live('click', function(e) {
e.preventdefault();
stor.set('choosenplaylist', d.playlists[i]);
});
}
This was for the storage now for when changing tad :
if (!stor.get('choosenplaylist')=='') {
location.href=stor.get('choosenplaylist');
}
Okay this is a suggestion and it need to be tested regarding to your app.
Im trying this out now, and i can reproduce your bug (im guessing it's a bug, the tab should replace the url in my opinion)
But, until it's fixed, my best guess is to capture the playlist links in an event handler and cancelling the original event, after cancelling you replace the content with the appropriate playlist view.
Tab test code (on gist.github.com)
I've abstracted the actual view binding from the event handler, and added a click event hook that calls the abstract view binder instead of the "real" one, this also supports deep linking into the an app