Function is executed 1 in 10 chances, function doesn't make required changes
Using the following Javascript code I'm occurring 1 issue.
TL;DR:
My if statement within isOverflown function is executed only 1 out of 10 website loads. In the 9 attempts it doesn't even reach the inside of if. Although nothing changes, just reloaded website.
How to decrease font size gradually? Such as FONTSIZE -= 0.1;
function isOverflown() {
alert("test");
var element=document.querySelectorAll('.eventBoxTitle');
for(var i=0;
i < element.length;
i++) if (element[i].offsetWidth < element[i].scrollWidth) {
element[i].style.fontSize="small";
}
}
document.addEventListener("DOMContentLoaded", function () { //if finished loading
isOverflown();
});<div id="title" class="eventBoxTitle">
<h2>Become a star!</h2>
</div>- The function is executed in fact, every time website launches. Although the "if" statement, is only executed once within 10 attempts, even though the website layout/specification stays completely same.
Secondly my question is how to gradually/dynamically change fontSize? I don't have fontsize specified as it's pure H2 header. Although my plan is to make font adjustments until it fits the box, such as fontSize -= 0.1; So it gradually decreases the font size. How to accomplish such goal?
p.s. "alert(test)" is included so you can actually see that it enters that function.
javascript
asked Nov 12 at 19:34
Adrian
276
|
show 1 more comment
Using the following Javascript code I'm occurring 1 issue.
TL;DR:
My if statement within isOverflown function is executed only 1 out of 10 website loads. In the 9 attempts it doesn't even reach the inside of if. Although nothing changes, just reloaded website.
How to decrease font size gradually? Such as FONTSIZE -= 0.1;
function isOverflown() {
alert("test");
var element=document.querySelectorAll('.eventBoxTitle');
for(var i=0;
i < element.length;
i++) if (element[i].offsetWidth < element[i].scrollWidth) {
element[i].style.fontSize="small";
}
}
document.addEventListener("DOMContentLoaded", function () { //if finished loading
isOverflown();
});<div id="title" class="eventBoxTitle">
<h2>Become a star!</h2>
</div>- The function is executed in fact, every time website launches. Although the "if" statement, is only executed once within 10 attempts, even though the website layout/specification stays completely same.
Secondly my question is how to gradually/dynamically change fontSize? I don't have fontsize specified as it's pure H2 header. Although my plan is to make font adjustments until it fits the box, such as fontSize -= 0.1; So it gradually decreases the font size. How to accomplish such goal?
p.s. "alert(test)" is included so you can actually see that it enters that function.
javascript
asked Nov 12 at 19:34
Adrian
276
it's really not clear what you are trying to ask here.
– Claies
Nov 12 at 19:38
Such be clear now ;) Thanks for the heads up!
– Adrian
Nov 12 at 19:41
1
I'd use theonloadproperty of the<body>tag, it doesn't fail. Those event listeners they act up sometimes and can behave differently across different browsers. That or jQuery, vanilla JS is out of style and having to fix problems like this yourself is swimming against the tide. Just use ol'reliable jQuery.
– Havenard
Nov 12 at 19:44
Before I move onto jQuery, I need to know how to use Javascript itself. It's not great to use a great tool without knowing its fundamentals.
– Adrian
Nov 12 at 19:48
You will just catch a bunch of bad habits on the way, trust me. There will be plenty of room to use JS even having jQuery in your toolbox.
– Havenard
Nov 12 at 19:50
|
show 1 more comment
Using the following Javascript code I'm occurring 1 issue.
TL;DR:
My if statement within isOverflown function is executed only 1 out of 10 website loads. In the 9 attempts it doesn't even reach the inside of if. Although nothing changes, just reloaded website.
How to decrease font size gradually? Such as FONTSIZE -= 0.1;
function isOverflown() {
alert("test");
var element=document.querySelectorAll('.eventBoxTitle');
for(var i=0;
i < element.length;
i++) if (element[i].offsetWidth < element[i].scrollWidth) {
element[i].style.fontSize="small";
}
}
document.addEventListener("DOMContentLoaded", function () { //if finished loading
isOverflown();
});<div id="title" class="eventBoxTitle">
<h2>Become a star!</h2>
</div>- The function is executed in fact, every time website launches. Although the "if" statement, is only executed once within 10 attempts, even though the website layout/specification stays completely same.
Secondly my question is how to gradually/dynamically change fontSize? I don't have fontsize specified as it's pure H2 header. Although my plan is to make font adjustments until it fits the box, such as fontSize -= 0.1; So it gradually decreases the font size. How to accomplish such goal?
p.s. "alert(test)" is included so you can actually see that it enters that function.
javascript
asked Nov 12 at 19:34
Adrian
276
Using the following Javascript code I'm occurring 1 issue.
TL;DR:
My if statement within isOverflown function is executed only 1 out of 10 website loads. In the 9 attempts it doesn't even reach the inside of if. Although nothing changes, just reloaded website.
How to decrease font size gradually? Such as FONTSIZE -= 0.1;
function isOverflown() {
alert("test");
var element=document.querySelectorAll('.eventBoxTitle');
for(var i=0;
i < element.length;
i++) if (element[i].offsetWidth < element[i].scrollWidth) {
element[i].style.fontSize="small";
}
}
document.addEventListener("DOMContentLoaded", function () { //if finished loading
isOverflown();
});<div id="title" class="eventBoxTitle">
<h2>Become a star!</h2>
</div>- The function is executed in fact, every time website launches. Although the "if" statement, is only executed once within 10 attempts, even though the website layout/specification stays completely same.
Secondly my question is how to gradually/dynamically change fontSize? I don't have fontsize specified as it's pure H2 header. Although my plan is to make font adjustments until it fits the box, such as fontSize -= 0.1; So it gradually decreases the font size. How to accomplish such goal?
p.s. "alert(test)" is included so you can actually see that it enters that function.
function isOverflown() {
alert("test");
var element=document.querySelectorAll('.eventBoxTitle');
for(var i=0;
i < element.length;
i++) if (element[i].offsetWidth < element[i].scrollWidth) {
element[i].style.fontSize="small";
}
}
document.addEventListener("DOMContentLoaded", function () { //if finished loading
isOverflown();
});<div id="title" class="eventBoxTitle">
<h2>Become a star!</h2>
</div>function isOverflown() {
alert("test");
var element=document.querySelectorAll('.eventBoxTitle');
for(var i=0;
i < element.length;
i++) if (element[i].offsetWidth < element[i].scrollWidth) {
element[i].style.fontSize="small";
}
}
document.addEventListener("DOMContentLoaded", function () { //if finished loading
isOverflown();
});<div id="title" class="eventBoxTitle">
<h2>Become a star!</h2>
</div>javascript
javascript
asked Nov 12 at 19:34
Adrian
276
asked Nov 12 at 19:34
Adrian
276
edited Nov 12 at 19:40
asked Nov 12 at 19:34
Adrian
276
asked Nov 12 at 19:34
Adrian
276
asked Nov 12 at 19:34
Adrian
276
276
it's really not clear what you are trying to ask here.
– Claies
Nov 12 at 19:38
Such be clear now ;) Thanks for the heads up!
– Adrian
Nov 12 at 19:41
1
I'd use theonloadproperty of the<body>tag, it doesn't fail. Those event listeners they act up sometimes and can behave differently across different browsers. That or jQuery, vanilla JS is out of style and having to fix problems like this yourself is swimming against the tide. Just use ol'reliable jQuery.
– Havenard
Nov 12 at 19:44
Before I move onto jQuery, I need to know how to use Javascript itself. It's not great to use a great tool without knowing its fundamentals.
– Adrian
Nov 12 at 19:48
You will just catch a bunch of bad habits on the way, trust me. There will be plenty of room to use JS even having jQuery in your toolbox.
– Havenard
Nov 12 at 19:50
|
show 1 more comment
it's really not clear what you are trying to ask here.
– Claies
Nov 12 at 19:38
Such be clear now ;) Thanks for the heads up!
– Adrian
Nov 12 at 19:41
1
I'd use theonloadproperty of the<body>tag, it doesn't fail. Those event listeners they act up sometimes and can behave differently across different browsers. That or jQuery, vanilla JS is out of style and having to fix problems like this yourself is swimming against the tide. Just use ol'reliable jQuery.
– Havenard
Nov 12 at 19:44
Before I move onto jQuery, I need to know how to use Javascript itself. It's not great to use a great tool without knowing its fundamentals.
– Adrian
Nov 12 at 19:48
You will just catch a bunch of bad habits on the way, trust me. There will be plenty of room to use JS even having jQuery in your toolbox.
– Havenard
Nov 12 at 19:50
it's really not clear what you are trying to ask here.
– Claies
Nov 12 at 19:38
it's really not clear what you are trying to ask here.
– Claies
Nov 12 at 19:38
Such be clear now ;) Thanks for the heads up!
– Adrian
Nov 12 at 19:41
Such be clear now ;) Thanks for the heads up!
– Adrian
Nov 12 at 19:41
1
1
I'd use the
onload property of the <body> tag, it doesn't fail. Those event listeners they act up sometimes and can behave differently across different browsers. That or jQuery, vanilla JS is out of style and having to fix problems like this yourself is swimming against the tide. Just use ol'reliable jQuery.– Havenard
Nov 12 at 19:44
I'd use the
onload property of the <body> tag, it doesn't fail. Those event listeners they act up sometimes and can behave differently across different browsers. That or jQuery, vanilla JS is out of style and having to fix problems like this yourself is swimming against the tide. Just use ol'reliable jQuery.– Havenard
Nov 12 at 19:44
Before I move onto jQuery, I need to know how to use Javascript itself. It's not great to use a great tool without knowing its fundamentals.
– Adrian
Nov 12 at 19:48
Before I move onto jQuery, I need to know how to use Javascript itself. It's not great to use a great tool without knowing its fundamentals.
– Adrian
Nov 12 at 19:48
You will just catch a bunch of bad habits on the way, trust me. There will be plenty of room to use JS even having jQuery in your toolbox.
– Havenard
Nov 12 at 19:50
You will just catch a bunch of bad habits on the way, trust me. There will be plenty of room to use JS even having jQuery in your toolbox.
– Havenard
Nov 12 at 19:50
|
show 1 more comment
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268933%2ffunction-is-executed-1-in-10-chances-function-doesnt-make-required-changes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268933%2ffunction-is-executed-1-in-10-chances-function-doesnt-make-required-changes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
it's really not clear what you are trying to ask here.
– Claies
Nov 12 at 19:38
Such be clear now ;) Thanks for the heads up!
– Adrian
Nov 12 at 19:41
1
I'd use the
onloadproperty of the<body>tag, it doesn't fail. Those event listeners they act up sometimes and can behave differently across different browsers. That or jQuery, vanilla JS is out of style and having to fix problems like this yourself is swimming against the tide. Just use ol'reliable jQuery.– Havenard
Nov 12 at 19:44
Before I move onto jQuery, I need to know how to use Javascript itself. It's not great to use a great tool without knowing its fundamentals.
– Adrian
Nov 12 at 19:48
You will just catch a bunch of bad habits on the way, trust me. There will be plenty of room to use JS even having jQuery in your toolbox.
– Havenard
Nov 12 at 19:50