I'm using Foundation 6 to make my websites frontend. Above the header of my website I want to show a promotionbar, which should be closeable / dismisable.
Therefore I'm using a close-button, coming out of the box with Foundation, to hide / dismis the promotionbar.
Now I want, that if the user closes / hides the promotionbar, that (for the rest of the session) the bar will not be shown anymore.
As the closebutton just "hides" the element, the bar will be shown again if I go to another subpage (for example, coming from a blogpost -> going back to the frontpage).
Is there a simple way to keep the bar hidden, after I've clicked on the closebutton for the rest of the session?
If the user stops by another day, the bar should be shown again.
https://foundation.zurb.com/sites/docs/close-button.html
Thank you in advance!
Thank you #daniel-ruf - I've solved it the following way if anybody is looking for a solution
Give the promotionbar an unique ID (id="promotionbar")
Add a class to the promotionbar (class="hider")
Add display:none, to the class via CSS File (.hider {display:none;})
Add onClick action the closebutton
button class="close-button" data-close="" onclick="promotionhide()">×
in App.js add
var cacheKeyNoPromo = 'promotionhide';
var nopromo = readFromCache(cacheKeyNoPromo);
if (!nopromo) {
document.getElementById("promotionbar").classList.remove("hider");
}
var promotionhide = function() {
writeToCache(cacheKeyNoPromo, true, 24 * 60 * 60 * 1000 /* 1D */);
document.getElementById("promotionbar").classList.add("hider");
};
works for me.
Related
I am currently designing an extension to make the notifications in the notification section of the calendar expendable. The goal is to make the noficiation expand like the initial notification on the desktop does. I have changed the type of notification added to the noficiation tray to class NotificationBanner from class NotificationMessage. I am currently using a work-around to make this work, this is what my expand function looks like:
expand(animate) {
this.expanded = true;
this._actionBin.visible = this._actionBin.get_n_children() > 0;
if (this._bodyStack.get_n_children() < 2) {
this._expandedLabel = new MessageList.URLHighlighter(this._bodyText,
true, this._useBodyMarkup);
this.setExpandedBody(this._expandedLabel);
}
if (animate) {
if (!this.clickedByButton && !this.forceExpansion) {
// This is the usual way notifications are expanded, using the layout manager
this._bodyStack.ease_property('#layout.expansion', 1, {
progress_mode: Clutter.AnimationMode.EASE_OUT_QUAD,
duration: MessageTray.ANIMATION_TIME,
});
}
else if (this.forceExpansion || this.clickedByButton) {
// When auto expanding or clicked by button, change height of body
oldHeight = this.bodyLabel.get_height();
const lines = Math.ceil(this._bodyText.length / 54);
this.bodyLabel.set_height(lines * this.bodyLabel.get_height());
}
this._actionBin.scale_y = 0;
this._actionBin.ease({
scale_y: 1,
duration: MessageTray.ANIMATION_TIME,
mode: Clutter.AnimationMode.EASE_OUT_QUAD,
});
} else {
this._bodyStack.layout_manager.expansion = 1;
this._actionBin.scale_y = 1;
}
this.emit('expanded');
}
As you can see, I have 2 options for this extension: Force expand all notifications or make the user use a button to expand. The current solution is not elegant, it simply changes the height of the notification label which manages the body. Furhermore, the notification body still shows the three dots, implying that the body is still not expanded. I believe this to be an issue with the layout manager, since the proper way to expand is to set message._bodyStack.layout_manager.expansion to 1. That does not work in the case of expanding a message in the notification tray. Is anyone familiar with the layout manager or can help me find a different solution? Here is an image of what my current solution looks like:
Image of an automatically expanded notification in the notification tray due to the extension (note the three dots at the end of the first line being still there)
Okay I have found a solution, it is not related to the layout manager. The value of the message message.bodyLabel.clutter_text.ellipsize is set to 3, which is the main cause of the dots appearing on the notification. Setting this value to 0 solves this problem. I would have still loved to find a more elegant approach to displaying the body, but this will do.
I have a number of Panels which, when expanded, show the corresponding questions for that particular 'Category'
The issue I have is, say for example I answer the questions for the 1st panel, the content will scroll down, eventually hiding the panel... fair enough.
However, when I click on the Next Category (Production Area), I need to the page to scroll back up to the first question in the Category, or maybe even just display the selected category at the top of the page.
Is this possible?
Currently, the user has to continually scroll back if when they select the next Category.
You can achieve it using scrollToElement()
var oPage = sap.ui.getCore().byId("pageId"); // you page ID
var oList = sap.ui.getCore().byId("ListId"); // element ID to which it has to scroll
if (oPage && oList) oPage.scrollToElement(oList, 1000);
Execute the above code inside the panel event expand.
you can try to use this control instead which suits your needs
https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout
After trying everything, this is what worked for me.
onExpand: function (oEvent) {
if (oEvent.getParameters().expand) {
var focusID = oEvent.getParameter("id");
var elmnt = sap.ui.getCore().byId(focusID);
elmnt.getDomRef().scrollIntoView(true);
Please tell me how do I click in point coordinates in application window?
I trying to UI automate my application on OSX 10.10 using JXA technology.
In documentation I found that it's possible using click at event. By I'am beginner of JXA and cant find how make a call.
Code snippet which I tried in Script Editor:
var app = Application('my_application_path')
app.window.click.at('{100,100}')
Thank you for help
You can interact with an application's user interface using the System Events application. Here is a script that clicks at certain coordinates in Safari:
// Activate Safari, so you will be able to click like a user
Application("Safari").activate()
// Access the Safari process of System Events
var SystemEvents = Application("System Events")
var Safari = SystemEvents.processes["Safari"]
// Call the click command, sending an array of coordinates [x, y]
Safari.click({ at: [300, 100] })
If you want to click a specific button (or other element of the user interface), it is more appropriate to click that specific element. For example:
// Click the third button of Safari's first window to minimize it
Safari.windows[0].buttons[2].click()
To learn what user interface elements can be interacted with and how, check out the Processes Suite in System Events' scripting dictionary. To open the dictionary, in Script Editor's menu bar, choose Window > Library, then select System Events in the Library window.
See https://github.com/dtinth/JXA-Cookbook/wiki/System-Events#clicking-menu-items
For example:
var fileMenu = proc.menuBars[0].menuBarItems.byName('File');
Below is an example of a portion of a script I wrote that automates creating mailboxes (aka folders) in Mail. I ended up using the UI file menus and click because using make() in the Mail DOM had issues for me. Hope it helps someone.
(() => {}
//this is part of a script that automates creating mailboxes (ie folders) in Apple Mail
//I used the file menu UI because when I tried the Mail library and make() method
//there was strange behavior when trying to interact with the new mailbox.
//However, when creating the new mailboxes thru the file menu, all seems to work fine
const Mail = Application('Mail');
const strId = Mail.accounts.byName('Exchange').id();
const exchange = Mail.accounts.byId(strId);
const activeClientFolder = exchange.mailboxes.byName('ActiveClient');
const SysEvents = Application('System Events');
const mail = SysEvents.processes.byName('Mail');
//next two lines insure Mail will be open and in front
mail.windows[0].actions.byName('AXRaise').perform();
mail.frontmost = true;
const mailboxMenu = mail.menuBars[0].menus.byName('Mailbox');
//below shows EXAMPLES of using .click(), keystroke(), and keyCode()
let newFolder = function (parentFolder, newFolderName, addTrailingDelay = true) {
//next line will select the parent mailbox (aka folder) where the new mailbox will be inserted
Mail.messageViewers[0].selectedMailboxes = parentFolder;
mailboxMenu.click();
delay(.2);
mailboxMenu.menuItems.byName('New Mailbox…').click();
delay(.2);
SysEvents.keystroke(newFolderName);
SysEvents.keyCode(36);
//delay is needed when creating multiple mailboxes with a loop
if (addTrailingDelay == true){
delay(1);
}
}
//now the payoff
const count = newActiveClients.length;
for(let i=0;i<count;i++){
/* Client Root Mailbox */
newFolder(activeClientFolder, newActiveClients[i], true);
/* Client Email Folders */
newFolder(activeClientFolder.mailboxes.byName(newActiveClients[i]), 'Client', true);
newFolder(activeClientFolder.mailboxes.byName(newActiveClients[i]).mailboxes.byName('Client'), 'Client_FYI_Sent');
newFolder(activeClientFolder.mailboxes.byName(newActiveClients[i]).mailboxes.byName('Client'), 'Client_FYI_Inbox');
newFolder(activeClientFolder.mailboxes.byName(newActiveClients[i]).mailboxes.byName('Client'), 'Client_FYI_Client_To');
newFolder(activeClientFolder.mailboxes.byName(newActiveClients[i]).mailboxes.byName('Client'), 'Client_From', false);
}
})()
I want to make input type="file" becomes available and clicked only when I click on some element, which is also activated it (for example, stylized span).
For this I have the Javascript parameters on span:
onclick="document.getElementById('upload_hidden').Disabled = false;
document.getElementById('upload_hidden').Click();"
But the trouble is that in Firefox only first click removes the input attribute disabled and second - opens the file selection window. In Chrome - all OK: input become enabled and clicked by first span click.
Why, first click in Firefox does not work ? :(
http://jsfiddle.net/ey47G/
P.S. In firefox v21 - all OK. Firefox v25 and v26 - have this trouble.
I could imagine that the script is already ahead when it tries to click the button - but the button is still disabled
var f = document.getElementById('f');
var s = document.getElementById('s');
s.onclick = function () {
f.removeAttribute('disabled');
setTimeout(function(){ f.click(); }, 100); // run the explorer after 100 ms
}
This does work.
http://plnkr.co/edit/9syOfSJHaJ4b3bhRufpv?p=preview
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Output: http://jsbin.com/APuCOwa/3
Edit: http://jsbin.com/APuCOwa/3/edit
When you have a responsive table in Bootstrap 3, when you are below the 767px break point, the dropdown-menus are not accessible because they add content and the content at that size has an overflow:auto or something, so depending on the location of the menu -- if the table itself doesn't have enough height -- the menu shows up and people won't see it. Plus scrollbars are not visible until you scroll on touch.
As a work around, which I need help with, I fudged together another toggle that doesn't close when clicked off and adds a class to the parent (to add height) when the menu is toggled (you must size the output http://jsbin.com/APuCOwa/3 down below 767px) to see this. The problem is that when the user clicks another toggle while one is open the class added to the parent is removed, tried toggleClass and this thing (which is the same) and it's the same result.
Essentially, when you click a toggle, it opens, adds height to the parent "table-responsive" div wrapper, and when you toggle off it undoes that, so far that's good, but if you click another menu while one is open, that is where I can't figure it out. Since they are all isolated menus, this is confusing to me.
I am not so hot with jQuery.
Output: http://jsbin.com/APuCOwa/3
Edit: http://jsbin.com/APuCOwa/3/edit
BTW: Firefox, at least mine, has issues with jsbin, Chrome does not.
Close all on click and only (re)open it when it wasn't open only:
$(document).ready(function() {
$('.table-responsive .dropdown-toggle').click(function(event){
var open = $(this).hasClass('open');
$('.table-responsive .dropdown-menu').hide('fast');
$(".table-responsive").removeClass("res-drop");
$('.table-responsive .dropdown-toggle').removeClass('open');
if(!open)
{
$(this).siblings('.dropdown-menu').slideToggle('fast');
$(this).parents(".table-responsive").addClass("res-drop");
$(this).addClass('open');
}
});
});
In my case I had dynamic heights so Bass Jobsen solution didn't work properly.
I decided to rely on data attributes to store the current height of parent div e then restore on dropdown close.
Here is my code:
var isOpen = !($(this).parent().hasClass("open"));
var menuHeight = $(this).siblings(".dropdown-menu").height();
var increaseHeightBy = menuHeight * 1.3;
var originalHeight = $(this).closest(".table-responsive").attr('data-original-height');
if (isOpen && !originalHeight) {
originalHeight = $(this).closest(".table-responsive").height();
$(this).closest(".table-responsive").attr('data-original-height', originalHeight);
$(this).closest(".table-responsive").height(originalHeight + increaseHeightBy);
}
if (!isOpen && originalHeight) {
$(this).closest(".table-responsive").height(originalHeight);
$(this).closest(".table-responsive").removeAttr('data-original-height');
}
You can set the dropdown menu to fixed position and close it when the window's resized. Not a perfect solution but it works.
// Responsive tables with dropdown buttons
$('.table-responsive .dropdown-toggle').on('click', function() {
var button = $(this),
menu = button.next('.dropdown-menu');
menu.css({
position: 'fixed',
top: button.offset().top + button.outerHeight() - $(window).scrollTop(),
right: $(window).width() - (button.offset().left + button.outerWidth())
});
$(window).on('scroll', function() {
menu.css({
top: button.offset().top + button.outerHeight() - $(window).scrollTop()
});
});
$(window).on('resize', function() {
$('.dropdown-backdrop').trigger('click');
button.blur();
$(window).off('resize scroll');
});
});