I'm working on this form:
https://app.couponreach.co/view-form/869/582
And I'm looking to disable the button after the first click.
The only code I can add is a css code.
Is that possible?
I'm thinking of something like:
.btncustom:afterclick {
pointer-events:none;
}
Anything to disable the button after the first click, pointer-events is an option or to make it grayed out once clicked.
Since you're asking for a javascript solution as well, here:
UPDATE: used getElementsByClassName to disable all buttons on click of any other button.
var buttons = document.getElementsByClassName("btn-custom");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function() {
for(var j = 0; j < buttons.length; j++) {
buttons[j].disabled = true;
buttons[j].style.opacity = 0.5;
}
})
}
<button class="btn-1 btn-custom">Button 1</button>
<button class="btn-2 btn-custom">Button 2</button>
<button class="btn-3 btn-custom">Button 3</button>
<button class="btn-4 btn-custom">Button 4</button>
CSS
.btncustom:disabled {
pointer-events: none;
}
Javascript
document.getElementByClass("btncustom").disabled = true;
This code will disable the button which is enough to disable its pointer-events, but added the CSS to make it clear that you can style the disabled button (opacity, color, font or whatever)
I have designed a shape and I want to determine its height based on a TypeScript-function, but the ngStyle does not apply the height to the shape.
HTML:
<div class = "card" [ngStyle] = "{'height': CalculateHeight()}" (click) = 'onSelect()'>
Function:
CalculateHeight(): number {
let CardHeight = ((this.Card.duration.Hours * 60) +
(this.Card.duration.Minutes)) * 2;
if (CardHeight <= 60) {
CardHeight = 60;
}
console.log(CardHeight);
return CardHeight;
}
What is the problem?
CalculateHeight returns just a number. But height to work properly, there need to be the unit as well.
Try the following line.
< div class = "card" [ngStyle] = "{'height.px': CalculateHeight()}" (click) = 'onSelect()' >
Note the .px. It will do the trick.
OR. you can make CalculateHeight to return a string with the height unit attached at the end. For example 400px.
You will also need px in your html file like this
<div class="card" [ngStyle]="{'height': CalculateHeight() + 'px'}" (click)="onSelect()">
The problem is that you don't set any unit to your height.. its like "300 what?, eggs?, cars?, pixels?" :P
Just return your result with a valid unit. This could simply be done by adding + 'px' to your returned value:
CalculateHeight(): number {
let CardHeight = ((this.Card.duration.Hours * 60) +
(this.Card.duration.Minutes)) * 2;
if (CardHeight <= 60) {
CardHeight = 60;
}
console.log(CardHeight);
return CardHeight + 'px';
}
You should also change your HTML from (click)='onSelect()' to (click)="onSelect()" because its recommend to use doublequotes instead of singlequotes, when quoting attributes values.
To learn more take a look at the recommend style-rules, especialy for HTML Quotation Marks.
When I size my Chrome window to 328 x 455 pixels I still see a horizontal scrollbar.
How can I find out which element is causing this? I've been looking at elements via the developer console, but can't find the element.
I then tried the script I found here, but nothing is logged.
I tried it on element body, section1 and a bunch of others but don't know what else to do.
$(function () {
var f = $('body'); //document.getElementById("body");
var contentHeight = f.scrollHeight;
var declaredHeight = $(f).height();
var contentWidth = f.scrollWidth;
var declaredWidth = $(f).width();
if (contentHeight > declaredHeight) {
console.log("invalid height");
}
if (contentWidth > declaredWidth) {
console.log("invalid width");
}
});
.slide-content .scroller {
width: 1024px;
}
"fastestest" way: added this in inspector:
* {
outline: 1px solid #f00 !important;
}
and the culprit appeared
An excellent article by Chris Coyier explains everything you need to know about this problem.
after reading this article, I used this code in my console to find the element responsible for vertical scrolling:
press F12 in your Browser then choose console and paste the below code there and press enter:
var all = document.getElementsByTagName("*"), i = 0, rect, docWidth = document.documentElement.offsetWidth;
for (; i < all.length; i++) {
rect = all[i].getBoundingClientRect();
if (rect.right > docWidth || rect.left < 0){
console.log(all[i]);
all[i].style.borderTop = '1px solid red';
}
}
Update:
if the above code didn't work, it might be an element inside an iframe that makes the page scroll vertically.
in this scenario you can search through the iframes using this code:
var frames = document.getElementsByTagName("iframe");
for(var i=0; i < frames.length; i++){
var frame = frames[i];
frame = (frame.contentWindow || frame.contentDocument);
var all = frame.document.getElementsByTagName("*"),rect,
docWidth = document.documentElement.offsetWidth;
for (var j =0; j < all.length; j++) {
rect = all[j].getBoundingClientRect();
if (rect.right > docWidth || rect.left < 0){
console.log(all[j]);
all[j].style.borderTop = '1px solid red';
}
}
}
Find the culprit by copy paste the below js code in your URL address bar.
javascript:(function(d){var w=d.documentElement.offsetWidth,t=d.createTreeWalker(d.body,NodeFilter.SHOW_ELEMENT),b;while(t.nextNode()){b=t.currentNode.getBoundingClientRect();if(b.right>w||b.left<0){t.currentNode.style.setProperty('outline','1px dotted red','important');console.log(t.currentNode);}};}(document));
Add this to your css file:
* {
outline: 1px solid #f00 !important;
opacity: 1 !important;
visibility: visible !important;
}
It's making sure everything is visible while debugging with the red border.
My quick solution with jQuery,
stijn de ryck's createXPathFromElement and the console:
/**
* Show information about overflowing elements in the browser console.
*
* #author Nabil Kadimi
*/
var overflowing = [];
jQuery(':not(script)').filter(function() {
return jQuery(this).width() > jQuery(window).width();
}).each(function(){
overflowing.push({
'xpath' : createXPathFromElement(jQuery(this).get(0)),
'width' : jQuery(this).width(),
'overflow' : jQuery(this).width() - jQuery(window).width()
});
});
console.table(overflowing);
/**
* Gets the Xpath of an HTML node
*
* #link https://stackoverflow.com/a/5178132/358906
*/
function createXPathFromElement(e){for(var t=document.getElementsByTagName("*"),a=[];e&&1==e.nodeType;e=e.parentNode)if(e.hasAttribute("id")){for(var s=0,l=0;l<t.length&&(t[l].hasAttribute("id")&&t[l].id==e.id&&s++,!(s>1));l++);if(1==s)return a.unshift('id("'+e.getAttribute("id")+'")'),a.join("/");a.unshift(e.localName.toLowerCase()+'[#id="'+e.getAttribute("id")+'"]')}else if(e.hasAttribute("class"))a.unshift(e.localName.toLowerCase()+'[#class="'+e.getAttribute("class")+'"]');else{for(i=1,sib=e.previousSibling;sib;sib=sib.previousSibling)sib.localName==e.localName&&i++;a.unshift(e.localName.toLowerCase()+"["+i+"]")}return a.length?"/"+a.join("/"):null}
//**/
Adding a border to everything made the problem go away for me. The culprit was a drop-down menu hidden with opacity: 0.
I actually found it by process of elimination - delete elements in the DevTools one by one, starting with parent elements and moving down the tree.
This would have done it for me:
* {
opacity: 1 !important;
visibility: visible !important;
}
Actually what worked for me is deleting elements one by one. I tried some of the scripts / css here and they didn't work.
You can easily do a kind of tree search by hand that is quite efficient: Start at the children of the body tag, delete them one by one until the problem is fixed. Once you have the culprit, you restore it (reload page) and delete its children one by one until you find which of them is at fault. Repeat with its children and their children and so on.
add your chrome snippets >>> by inspect > sources > snippets > new snippet > add
code $("*").css("border","2px solid #f00") >> click ctrl+enter
and the culprit appeared
In addition, it will be saved on the browser and used easily afterward
style="white-space:pre-wrap; word-break:break-word"
in Nextjs, adding overflow-x:hidden to *{} in global.css solves the issue.
I need to capture the default generated CSS inside a lib, which will be displayed in an XML page type.
For this, I tried:
lib.defaultCss = COA
lib.defaultCss {
10 < plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE
wrap = <defaultCss><![CDATA[|]]></defaultCss>
}
page.1 < lib.defaultCss
In the object browser I can see the correct value (default css generated by css_styled_content extension), but on page, I only get the empty <defaultCss> tag.
This is because _CSS_DEFAULT_STYLE is a property, not an object.
Try this instead:
lib.defaultCss = COA
lib.defaultCss {
10 = TEXT
10.value < plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE
wrap = <defaultCss><![CDATA[|]]></defaultCss>
}
page.1 < lib.defaultCss
I have some keywords that show up in separate inline-block elements with 10%(=80px) width. Currently I am setting overflow:hidden; for longer words, but it's not a good practice. I want that if some of these keywords are longer than usual, their parent div (the one with currently 10% width applied to) should be twice its size: 160px. I wonder if this can be solved with CSS3 only.
I'll try to explain it visually:
+__80px__+__80px__+__80px__+
+__text__+
+__longer text____+
+______way longer text_____+
instead of
+overflow hi+ or +random width to fit text+
If the text does not fit in 80px, its container should be 160px. That simple. Please help me.
I can't think of any way to do this in CSS, but with a little JavaScript magic you can make it work:
// assuming all elements are in a container with id="container"...
var qsa = document.getElementById('container').children, l = qsa.length, i;
for( i=0; i<l; i++) {
if( qsa[i].scrollWidth > 240) {
// this one handles REALLY long text by cutting them off with "..."
qsa[i].style.textOverflow = "ellipsis";
qsa[i].style.whiteSpace = "nowrap";
}
if( qsa[i].scrollWidth > 160) qsa[i].style.width = "240px";
else if( qsa[i].scrollWidth > 80) qsa[i].style.width = "160px";
// else do nothing, leave the deafult 80 width
}