Let me clear first that I checked other answers. They're either too old or not working for me...
I am trying to dynamically disable and enable two navigation buttons using a function:
function arrowDisplayConfig() {
if (modeInSight == 1) {
$("#rightArrow").prop("disabled",false);
$("#leftArrow").prop("disabled",true);
}
if (modeInSight === maxModes) {
$("#rightArrow").prop("disabled",true);
$("#leftArrow").prop("disabled",false);
}
else {
$("#rightArrow").prop("disabled",false);
$("#leftArrow").prop("disabled",false);
}
}
Basically disabling left arrow when its the first item in carousel and right one when its the last item, while keeping both enabled when in-between.
The problem is that this works perfectly for all cases except the first one. Don't know why.
P.S
I increase and decrease the modeInSight integer value in other functions and call this function after it.
Related
By default Ag-grid sets a fixed column menu width. Their documentation has an example of setting the column menu width to a different fixed value. The issue with this approach is that every column will have the same menu width.
Is there a way to dynamically set the column menu width based upon the column's filter list values? The following has no effect:
.ag-set-filter-list {
width: auto;
}
Similarly word wrapping could also solve this issue, but is also not working:
.ag-set-filter-list {
overflow-wrap: break-word;
}
I also tried using the postPopup callback to adjust styling after rendering, with no luck:
created() {
this.postProcessPopup = (params) => {
if (params.type !== 'columnMenu') {
return;
}
params.ePopup.style.overflowWrap = "break-word";
params.ePopup.style.width = "auto";
}
}
Digging into Ag-grid's filter list styling more, I realized that the filter items are absolutely positioned and use top values for placement. This made it difficult to wrap filter values without having them collide with each other.
I contacted Ag-grid support and they confirmed that dynamic filter list widths are not supported. They did mention their tooltips feature though, which works for my use case.
I modified that example in two ways:
Only show tooltips for filter list values that are longer and will be cut off by the edge of the filter menu.
Only show tooltips for values in the filter list, not for rows in the grid.
Here's my version of a custom tooltip with the above modifications:
export class GridColumnFilterTooltip {
init(params) {
const FILTER_VALUE_CHARACTER_LIMIT = 28;
this.tooltip = document.createElement("div");
if (
params.location === "setFilterValue" &&
params.value.length > FILTER_VALUE_CHARACTER_LIMIT
) {
this.tooltip.classList.add("grid-column-filter-tooltip");
this.tooltip.innerHTML = params.value;
}
}
getGui() {
return this.tooltip;
}
}
In my app, I have divs that I want to dim and disable mouse events for, depending on component state - for example, loading. The initial method I came up with is to have a helper function that returns an inline style for dimming an element and disabling pointer events on it, given a boolean value:
const disableOnTrue = (flag) => {
return {
opacity: flag ? 0.15 : 1,
pointerEvents: flag ? "none" : "initial"
}
}
and using it on elements as such:
{loading && {/** render a loading circle */}}
<div style={disableOnTrue(this.state.loading)}>{/** stuff to be dimmed & disabled while loading */}</div>
In the disabled div, there are Material-UI Buttons. However, it turns out that they don't care if pointerEvents are disabled on their parent div, and remain clickable, which is a big problem. So, on the Buttons I had to set disabled={loading}. Then, this dims the Buttons themselves, which unnecessarily compounds with the lowered opacity of disableOnTrue, meaning I would need to add some custom styling to ameliorate that; I want the entire div to be disabled, not for the Button to look especially disabled.
I've also tried using the Backdrop component from Material, but couldn't get it to dim anything but the entire viewport.
Before I implement any sort of hacky solution throughout my entire app, I figured I should ask here to see if there is a clean way to achieve this that I'm missing. I've looked for quite a while, but haven't found anything.
I split the concept of "disabling" into two functions:
const dimOnTrue = (flag) => {
return {
opacity: flag ? 0.15 : 1,
}
}
const disableOnTrue = (flag) => {
return {
pointerEvents: flag ? 'none' : 'initial'
}
}
to be used on divs that should be dimmed and inputs that should be disabled, respectively.
I've implemented a google maps with autocomplete onverlayed on the map and I've set the FullScreenControl option to "true" (You can see the FullScreenControl on the right in the image below)
My problem is that when I switch to FullScreen mode by clicking the FullScreenControl, the dropdown is hidden behind the google map.
It seems that the ZIndex is too low but setting it to a very large number does not seem to fix the issue. You can see from the image below that the dropdown exists, but only behind the fullscreen google map.
I did find a similar question with answer where someone used a normal dropdown and not the google map autocomplete.
Similar Question and answer
However the solution didn't work for me.
Setting the ZIndex doesn't seem to work.
I'm using TypeScript with Angular2.
Thank you.
]4
For anyone struggling with this, if the z-index solution is not working:
The Google maps generated div ("pac-container") with the autocomplete options is appended to the body child elements. But when in full screen, only elements inside the target element (the map div) will be shown, so z-index is ignored.
A quick workaround is to move the pac-container div inside the map div when entering full screen, and move it back on exit.
document.onfullscreenchange = function ( event ) {
let target = event.target;
let pacContainerElements = document.getElementsByClassName("pac-container");
if (pacContainerElements.length > 0) {
let pacContainer = document.getElementsByClassName("pac-container")[0];
if (pacContainer.parentElement === target) {
console.log("Exiting FULL SCREEN - moving pacContainer to body");
document.getElementsByTagName("body")[0].appendChild(pacContainer);
} else {
console.log("Entering FULL SCREEN - moving pacContainer to target element");
target.appendChild(pacContainer);
}
} else {
console.log("FULL SCREEN change - no pacContainer found");
}};
i was fix it with add z-index to .pac-container
see here
.pac-container, .pac-item{
z-index: 2147483647 !important;
}
Thank you #vladhorby! I ended up with your solution due to updating z-index not working on my case. I got 1 little bug, somehow that options position not in the right place when on the fullscreen mode. I add little code to fix this thing. The idea is to add a class when in fullscreen mode, and delete that after leave the fullscreen. Hope this can help anyone with the same case.
document.onfullscreenchange = function ( event ) {
let target = event.target;
let pacContainerElements = document.getElementsByClassName("pac-container");
if (pacContainerElements.length > 0) {
let pacContainer = document.getElementsByClassName("pac-container")[0];
if (pacContainer.parentElement === target) {
document.getElementsByTagName("body")[0].appendChild(pacContainer);
pacContainer.className += pacContainer.className.replace("fullscreen-pac-container", "");
} else {
target.appendChild(pacContainer);
pacContainer.className += " fullscreen-pac-container";
}
}
};
and the last thing add this to the your css file:
.fullscreen-pac-container[style]{
z-index: 2547483647 !important;
top:50px !important;
}
Is it possible to selectively remove items from Google Chrome browsing history? I have a website from my history that wants to be the default everytime I start a search with a specific letter, but I often reference my history to re-find things.
So I would like to remove all history from, say, www.pythonismyfavoritest.com without removing everything; is that possible?
Try searching www.pythonismyfavoritest.com in the search bar in chrome://history/ and then remove each item by clicking the check box in the left and then hitting the "remove selected items" button.
The chrome history api works with url such chrome://history/#q=hello&p=0
Here's something I wrote in JavaScript. It works through the Console Debugger. I tried using it in a bookmark but I get no response from the page.
** // UPDATE (07.28.15)
I added a shorter approach provided by #Denis Gorbachev to the checkbox targeting, which helped shorten some of this code. I also added "auto-stop" functionality, meaning the loop will stop once it has finally cleared the list.
** // UPDATE (08.20.14)I made a few changes to the code, to make it more user friendly. Other users may not be code-savvy, and others may simply prefer convenience. Therefore, I whipped up a couple buttons (start/stop) to control the usage; as well as address some "ASSERTION FAILED" exceptions/errors that were being thrown when attempted to run the script loop.. Enjoy!!
In your address bar, type in the following address to to the meat of the history page.. It's normally loaded in an iframe, with the left-side menu loaded in another frame.. // **
chrome://history-frame/
Next, load your Console Debugger/Viewer by pressing Ctrl+Shift+J(For Mac users, ⌘+⌥+J)
You can also press F12 and select the "Console" tab.
In the Console Debugger/Viewer, copy & paste the following code:
function removeItems() {
removeButton = document.getElementById('remove-selected');
overlayWindow = document.getElementById('overlay');
//revision (07.28.15): Replaced the For Loop targeting the checkboxes, thanks to Denis Gorbachev via comments (02.19.15)
Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"), function(node) {node.checked = "checked"})
setTimeout(function () {
if (removeButton.getAttribute("disabled") !== null) {
removeButton.removeAttribute("disabled")
}
/* revision (08.20.14): no longer binding to that condition, button should no longer be disabled, so click! */
if ((overlayWindow.hasAttribute("hidden")) && (overlayWindow.getAttribute("hidden") !== false)) {
removeButton.click();
}
/* revision (08.20.14): new Interval, to check against the overlay DIV containing the confirmation "Remove" button */
/* Attempting to click the button while the DIV's "hidden" attribute is in effect will cause FAILED ASSERTION */
stopButton = setInterval(function () {
if (overlayWindow.hasAttribute("hidden")) {
if (overlayWindow.getAttribute("hidden") == "false") {
hidden = false
} else {
hidden = true
}
} else {
hidden = false
}
if (!hidden) {
document.getElementById("alertOverlayOk").click();
clearInterval(stopButton)
}
}, 250)
}, 250)
}
//revision (08.20.14): Lets build our buttons to control this so we no longer need the console
//stop button (08.20.14)
var stopButton = document.createElement('button');
stopButton.setAttribute('id', "stopButton");
stopButton.innerHTML = "Stop";
stopButton.style.background = "#800";
stopButton.style.color = "#fff";
stopButton.style.display = "none";
stopButton.onclick = function () {
clearInterval(window.clearAllFiltered);
document.getElementById("stopButton").style.display = "none";
document.getElementById("startButton").style.display = ""
};
//start button (08.20.14)
var startButton = document.createElement('button');
startButton.setAttribute('id', "startButton");
startButton.innerHTML = "Start";
startButton.style.background = "#090";
startButton.style.color = "#fff";
startButton.onclick = function () {
window.clearAllFiltered = setInterval(function () {
/* revision (07.28.15): Stop the Loop automatically if there are no more items to remove */
if(document.getElementById("results-header").innerText=="No search results found."){
document.getElementById("stopButton").click();
}
if (document.getElementById("loading-spinner").getAttribute("hidden") !== null) {
removeItems()
}
}, 250); //adjust Time Here (1500 [millisec] = 1.5sec)
document.getElementById("stopButton").style.display = "";
document.getElementById("startButton").style.display = "none"
};
/* revision (08.20.14): Now we add our buttons, and we're ready to go! */
editingControls = document.getElementById('editing-controls');
editingControls.appendChild(stopButton);
editingControls.appendChild(startButton);
This removeItems function will select loop through all form inputs and check all checkboxes, enable the "Remove Selected Items" button and click it. After a half-second, it'll check if the "Are You Sure" prompt is displayed and, if so, click the "Yes/Remove" button automatically for you so that it will load a new list of items to do this process all over again..
The item is looped using the variable "clearAllFiltered", which is a setInterval loop, which is checking for the status of the "Loading" screen..
To start erasing your filtered history items, you can now click the green Start button.
** // UPDATE (07.28.2015) It will now stop on ITS OWN.
To stop the loop manually, you can now click the red Stop button. Simple as that!
1) Go to your history settings ( chrome://history/ )
2) In the top right hand corner will be a search bar with a 'Search History" button
3) Type in the sitename you want to remove from history, then click the button
4) Click the box on the first one, then scroll to the bottom of the page
5) Press and hold the Shift key, then click the last box (This will check all on that page)
6) Scroll back up and select the 'Remove Selected Items" Button
7) Repeat steps 4-6 until all your Youtube History is gone.
Hopefully Chrome will update this clear history feature, but for now this seems to be the fastest option
Easy way is Shift+Delete.
For example when you type "you", "youtube.com" will be shown as selected in suggestions. Just click Shift+Delete. Then retype "you" and you will see no "youtube.com" in that list anymore.
If you are talking about getting rid of the suggested search/auto-completion... then removing specific items from your chrome://history won't do it (in my experience). I want to fill in more detail to the answer #LacOniC gave.
In the screenshot you can see I typed "ba" and Chrome is suggesting completion based on my browsing history (the items in green).
In my experience, removing specific items from your history will not remove them from showing up in this address bar auto-completion.
To quickly remove these auto complete items:
Start typing a few letters that generate the offending suggestion.
Use your keyboard's arrow keys to select the suggestion you don't like (selected item is highlighted blue in screenshot).
Press shift+delete on windows or shift+fn+delete on mac to remove the selected item.
How can I make the drop down show all the content of one option when it is expanded? If an option in the drop down is, for instance, a whole sentence and select tag width is small, the user in IE will not be able to read whole option. This is not the case in Mozilla where the whole content is shown when drop down is expanded.
Is there any way to avoid this behavior in IE8,
Thanks
I had a similar constraint when working against IE8 and the oh so famous drop down list truncating. I have multiple drop down lists on my page, one after another, some inside top nav content, and IE8 decides to cut off my attribute option text properties. Now, like many of us, I don't want to set the width obscurely large, so this option is out of question.
After a lot of research, I couldn't find a great answer, so I went ahead and fixed it with jQuery and CSS:
First, let's make sure we are only passing our function in IE8:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
//fix me code
}
Then, to allow the select to expand outside of the content area, let's wrap our drop down lists in div's with the correct structure, if not already, and then call the helper function:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8) {
$('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');
//helper function for fix
ddlFix();
}
Now onto the events. Since IE8 throws an event after focusing in for whatever reason, IE will close the widget after rendering when trying to expand. The work around will be to bind to 'focusin' and 'focusout' a class that will auto expand based on the longest option text. Then, to ensure a constant min-width that doesn't shrink past the default value, we can obtain the current select list width, and set it to the drop down list min-width property on the 'onchange' binding:
function ddlFix() {
var minWidth;
$('select')
.each(function () {
minWidth = $(this).width();
$(this).css('min-width', minWidth);
})
.bind('focusin', function () {
$(this).addClass('expand');
})
.change(function () {
$(this).css('width', minWidth);
})
.bind('focusout', function () {
$(this).removeClass('expand');
});
}
Lastly, make sure to add this class in the style sheet:
select:focus, select.expand {
width: auto;
}