|
|
|
I actually got this working fine outside of the Joomla CMS I am using so I am wondering if there's some sort of conflict going on and it's not as simple as I thought it might be. Might help if I take a break and eat something as I am going cross eyed with this!
|
|
|
|
|
wrote: Uncaught TypeError: $ is not a function
Either you haven't included jQuery properly, or you've included it after this script.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I have used THIS SCRIPT to create collapsible sections into my website.
as you can see I have problem since inside the collapsible section, I inserted a drop down menu',
when I expand section and I click on drop down menu' to see more voices, the collapsible section doesn't expand automatically with the content. How can I make the collapsible section automatically expand\contract according to its content?
this is the javascript part:
<pre><script>
window.addEventListener("DOMContentLoaded", e => {
const getContainerHeight = el => {
return window.getComputedStyle(el).getPropertyValue("height");
};
const setTransitionHeights = el => {
let containerWasOpen = el.classList.contains("open");
el.style.height = null;
el.classList.remove("open", "ready");
el.dataset.initial = getContainerHeight(el);
el.classList.add("open");
el.dataset.final = getContainerHeight(el);
el.classList.remove("open");
if(containerWasOpen) {
el.classList.add("open");
el.style.height = el.dataset.final;
} else {
el.style.height = el.dataset.initial;
}
el.classList.add("ready");
};
document.querySelectorAll(".collapsible.slow").forEach(current => {
let toggler = document.createElement("div");
toggler.className = "toggler";
current.appendChild(toggler);
setTransitionHeights(current);
toggler.addEventListener("click", e => {
current.style.height = current.classList.toggle("open") ? current.dataset.final : current.dataset.initial;
});
});
window.addEventListener("resize", e => {
document.querySelectorAll(".collapsible.slow").forEach(current => {
setTransitionHeights(current);
});
});
});
</script>
and this is the CSS part:
<pre lang="CSS"><pre> .boxed {
border: 1px solid #ccc;
padding: 1em 2em;
}
.collapsible.slow {
position: relative;
overflow: hidden;
padding-bottom: 0.5em;
transition: height 0.5s ease-out;
}
.collapsible.slow > * {
display: none;
}
.collapsible.slow > p:first-child,
.collapsible.slow.open > *,
.collapsible.slow.ready > * {
display: revert;
}
.collapsible.slow > .toggler {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #fff;
text-align: center;
cursor: pointer;
}
.collapsible.slow > .toggler::after {
content: "\25bc";
}
.collapsible.slow.open > .toggler::after {
content: "\25b2";
}
If required I can write also the drop down menu' code.
Thanks in advance for sharing your experience.
Regards,
jeyjack
modified 26-Feb-22 8:05am.
|
|
|
|
|
<pre>window.addEventListener("DOMContentLoaded", e => {
const getContainerHeight = el => {
return window.getComputedStyle(el).getPropertyValue("height");
};
const setTransitionHeights = el => {
let containerWasOpen = el.classList.contains("open");
el.style.height = null;
el.classList.remove("open", "ready");
el.dataset.initial = getContainerHeight(el);
el.classList.add("open");
el.dataset.final = getContainerHeight(el);
el.classList.remove("open");
if(containerWasOpen) {
el.classList.add("open");
el.style.height = el.dataset.final;
} else {
el.style.height = el.dataset.initial;
}
el.classList.add("ready");
};
document.querySelectorAll(".collapsible.slow").forEach(current => {
let toggler = document.createElement("div");
toggler.className = "toggler";
current.appendChild(toggler);
setTransitionHeights(current);
toggler.addEventListener("click", e => {
current.style.height = current.classList.toggle("open") ? current.dataset.final : current.dataset.initial;
});
});
document.querySelectorAll(".collapsible.slow").forEach(l=>{
l.addEventListener("click", e => {
document.querySelectorAll(".collapsible.slow").forEach(current => {
setTransitionHeights(current);
});
});
})
});
|
|
|
|
|
I have this cookie that I wrote in PHP, and I need to read the cookie to get the Project Number. I tried using decodeUri but it strips the semi colon out of the JSON. I also plagurized some JavaScript to get the cookie in the first place.
If I use this URL Decoder/Encoder it gives me the proper decoding that I need.
It looks like URL encoding to me.
cookie: {"timeStamp"%3A"02\%2F17\%2F2022 10%3A15%3A02"%2C"coreMode"%3A"open"%2C"}
function getCookie(name) {
let cookie = {};
document.cookie.split(';').forEach(function(el) {
let [k,v] = el.split('=');
cookie[k.trim()] = v;
})
return cookie[name];
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
How are you generating that cookie value? It looks like URL-encoded JSON, but the JSON is invalid.
"{\"timeStamp\":\"02/17/2022 10:15:02\",\"coreMode\":\"open\",\"}" That trailing quote before the closing brace doesn't match an opening quote. Attempting to parse the value will give you an error:
const value = JSON.parse(decodeURIComponent('{"timeStamp"%3A"02\%2F17\%2F2022 10%3A15%3A02"%2C"coreMode"%3A"open"%2C"}'));
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I pulled that example out of storage in the browser, and cut off a large section just to use as an example.
This is the cookie straight out of the browser storage. Pretty ugly but that's just how it writes even with pretty print.
%7B%22timeStamp%22%3A%2202%5C%2F18%5C%2F2022%2009%3A41%3A35%22%2C%22coreMode%22%3A%22open%22%2C%22projectIntegrityCheck%22%3Afalse%2C%22projectNumber%22%3A%225342%22%2C%22projectType%22%3A%22poolspa%22%2C%22projectStage%22%3A%22designing%22%2C%22projectVersion%22%3A0%2C%22projectFinalVersion%22%3A0%2C%22projectJob%22%3A0%2C%22projectEmployeeId%22%3A91%2C%22projectEmployeeName%22%3A%22Jim%20Miller%22%2C%22projectCustomerId%22%3A%225324%22%2C%22projectCustomerName%22%3A%22Jim%20Kirker%202022021602%22%2C%22projectAddNumber%22%3A-1%2C%22projectSalesId%22%3A%2291%22%2C%22originalBookPrice%22%3A32761.2153%2C%22bookPrice%22%3A32761.2153%2C%22preBookPrice%22%3A32761.2153%2C%22contractAmount%22%3A0%2C%22inputId%22%3A%22%22%2C%22inputName%22%3A%22Selection%20Name%3A%22%2C%22inputPrice%22%3A0%2C%22inputMode%22%3A%22ADD%22%2C%22addTotal%22%3A0%2C%22bookDifference%22%3A0%2C%22userName%22%3A%22jimk%22%2C%22userType%22%3A%22Executive%22%2C%22versionNumber%22%3A-1%2C%22versionBookPrice%22%3A32761.2153%2C%22salesCommission%22%3A0%7D
The same cookie URL decoded ...
{"timeStamp":"02/18/2022 09:41:35","coreMode":"open","projectIntegrityCheck":false,"projectNumber":"5342","projectType":"poolspa","projectStage":"designing","projectVersion":0,"projectFinalVersion":0,"projectJob":0,"projectEmployeeId":91,"projectEmployeeName":"Jim Miller","projectCustomerId":"5324","projectCustomerName":"Jim Miller 2022021602","projectAddNumber":-1,"projectSalesId":"91","originalBookPrice":32761.2153,"bookPrice":32761.2153,"preBookPrice":32761.2153,"contractAmount":0,"inputId":"","inputName":"Selection Name:","inputPrice":0,"inputMode":"ADD","addTotal":0,"bookDifference":0,"userName":"jimk","userType":"Executive","versionNumber":-1,"versionBookPrice":32761.2153,"salesCommission":0}
Maybe reading this cookie with JavaScript is not a good idea. I found that I don't really need this since my projectClose.php will read the cookie and close the project.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Given that string, JSON.parse and decodeURIComponent work fine:
const parsedCookie = JSON.parse(decodeURIComponent("%7B%22timeStamp%22%3A%2202%5C%2F18%5C%2F2022%2009%3A41%3A35%22%2C%22coreMode%22%3A%22open%22%2C%22projectIntegrityCheck%22%3Afalse%2C%22projectNumber%22%3A%225342%22%2C%22projectType%22%3A%22poolspa%22%2C%22projectStage%22%3A%22designing%22%2C%22projectVersion%22%3A0%2C%22projectFinalVersion%22%3A0%2C%22projectJob%22%3A0%2C%22projectEmployeeId%22%3A91%2C%22projectEmployeeName%22%3A%22Jim%20Miller%22%2C%22projectCustomerId%22%3A%225324%22%2C%22projectCustomerName%22%3A%22Jim%20Kirker%202022021602%22%2C%22projectAddNumber%22%3A-1%2C%22projectSalesId%22%3A%2291%22%2C%22originalBookPrice%22%3A32761.2153%2C%22bookPrice%22%3A32761.2153%2C%22preBookPrice%22%3A32761.2153%2C%22contractAmount%22%3A0%2C%22inputId%22%3A%22%22%2C%22inputName%22%3A%22Selection%20Name%3A%22%2C%22inputPrice%22%3A0%2C%22inputMode%22%3A%22ADD%22%2C%22addTotal%22%3A0%2C%22bookDifference%22%3A0%2C%22userName%22%3A%22jimk%22%2C%22userType%22%3A%22Executive%22%2C%22versionNumber%22%3A-1%2C%22versionBookPrice%22%3A32761.2153%2C%22salesCommission%22%3A0%7D"));
I can't see a semi-colon which would be stripped out. 
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
decodeUriComponent did not occur to me. I'll go ahead and give that a try and finish the module.
I may post another question soon about communicating between browser tabs using LocalStorage or opening up some sort of channel communication. The goal is for an inactivity timer on the main browser tab to close other open tabs that feed off the same cookie, so when the cookie is wiped, the other open tabs won't bomb from the missing cookie.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi
I am working with Asp.net and using Angular JS
For below code
<a href="{{image.link}}">
when we check view-source then it is showing the same
<a href="{{image.link}}">
while in Inspect element in browser it shows
<a href="https://urltoredirect.com">
How it can be possible that in page View-source also it will show
<a href="https://urltoredirect.com">
As This is causing the site to appear to have broken links and could impact SEO.
Thanks in Advance
|
|
|
|
|
|
Hello, I am trying to teach myself web development and I found a form I wanted to duplicate on a roof construction website.
All my input boxes are centered except the last one that's a bit off and I cannot figure out why. The class is "powerwall-battery-input"
Please don't be like stack overflow and constantly criticize the format of my question because it has gotten old over there, which is why I am here.
Thanks
Here is my code:
<main class="calc-wrapper">
<!--
<form class="calc-form" action="form-results.html" method="get">
<label for="first-name" class="label first-name-label">
First Name
</label>
<input type="text" class="first-name-input" />
<label for="last-name" class="label last-name-label"> Last Name </label>
<input type="text" class="last-name-input" />
<!--
<label class="label addr-sec-label" for="addr-sec"
>Address Selection*</label
>
<input type="text" class="input" placeholder="Address" id="location" />
<input
type="text"
class="input"
placeholder="Apt, Suite, etc (optional)"
/>
<input type="text" class="input" placeholder="City" id="locality" />
<input
type="text"
class="input"
placeholder="State/Province"
id="administrative_area_level_1"
/>
<input
type="text"
class="input"
placeholder="Zip/Postal code"
id="postal_code"
/>
<input type="text" class="input" placeholder="Country" id="country" />
<div class="map" id="map"></div>
<!--
<div class="roof-complexity">
<label class="label roof-complexity-label" for="roof-complexity"
>Roof Complexity Type*</label
>
<select
class="roof-complexity-input"
id="roof-complexity-input"
name="roof-complexity"
>
<option selected disabled hidden>Select an Option</option>
<option id="simple" value="simple">Simple</option>
<option id="moderate" value="moderate">Moderate</option>
<option id="complex" value="complex">Complex</option>
</select>
</div>
<div class="system-size">
<label class="label system-size-label" for="system-size"
>Select System Size*</label
>
<button class="btn calc-form-btn system-size-minus-btn" type="button">
-
</button>
<input
class="system-size-input"
id="system-size-input"
value="4.0"
/>
<button class="btn calc-form-btn system-size-plus-btn" type="button">
+
</button>
</div>
<div class="powerwall-battery">
<label class="label powerwall-battery-label" for="powerwall-battery"
>Select Powerwall Battery Storage (in units)*</label
>
<button
class="btn calc-form-btn powerwall-battery-minus-btn"
type="button"
>
-
</button>
<input class="powerwall-battery-input" id="powerwall-battery-input" />
<button
class="btn calc-form-btn powerwall-battery-plus-btn"
type="button"
>
+
</button>
</div>
</form>
<!--
<div class="totals-section">
<label class="label roof-before-itc" for="roof-before-itc"
>Solar Roof Price Before Incentives</label
>
<input type="text" class="input" id="roof-price-before-itc" />
<label
class="label powerwall-price-before-itc"
for="powerwall-price-before-itc"
>Powerwall Price Before Incentives</label
>
<input class="input" id="powerwall-price-before-itc" value=" " />
<label class="label est-total-before-itc" for="est-total-before-itc"
>Estimated Total Price Before Incentives</label
>
<input type="text" class="input" id="est-total-before-itc" />
<label class="label est-itc" for="est-itc">Estimated Solar ITC</label>
<input type="text" class="input" id="est-itc" />
</div>
</main>
:root {
--mainFont: "Arial";
--textFont: "Open Sans", sans-serif;
--secondaryFont: "Raleway", sans-serif;
--primary: #4f5449;
--darkGray: #2f2e2e;
--lightGray: #ebebeb;
--white: #fff;
--black: #000;
--darkorange: orange;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: var(--mainFont);
font-size: 1.6rem;
line-height: 2;
}
.calc-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.calc-form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 5rem;
margin-bottom: 5rem;
width: 50%;
padding: 5rem;
}
.first-name-input {
width: 50%;
padding: 2rem;
}
.last-name-input {
width: 50%;
padding: 2rem;
}
.sb-title {
font-family: var(--mainFont);
font-weight: bold;
}
.addr-sec-input {
width: 100%;
padding: 2rem;
}
.input {
width: 50%;
padding: 2rem;
text-align: center;
}
.label {
margin-top: 2rem;
font-weight: bold;
text-align: center;
display: block;
}
.home-size-input {
padding: 2rem;
text-align: center;
}
.roof-complexity-input {
padding: 2rem;
text-align: center;
}
.system-size {
display: block;
}
.system-size-input {
padding: 2rem;
text-align: center;
}
.powerwall-battery {
display: block;
}
.powerwall-battery-input {
padding: 2rem;
text-align: center;
}
.calc-form-btn {
background-color: var(--primary);
border: none;
color: var(--white);
padding: 0 1.5rem;
text-align: center;
text-decoration: none;
font-size: 2rem;
border-radius: 0.5rem;
cursor: pointer;
}
.totals-section {
border: var(--black);
border-style: solid;
background: var(--darkorange);
width: 50%;
margin-right: 5rem;
border-width: 1px;
padding: 5rem;
display: flex;
flex-direction: column;
align-items: center;
width: 25%;
}
.submit-section {
text-align: center;
margin-bottom: 5rem;
}
.submit-btn {
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #FFFFFF;
color: #FFFFFF;
background-color: var(--primary);
padding: 4rem;
font-size: 2rem;
text-transform: uppercase;
border-radius: 1rem;
width: 10%;
}
.submit-btn {
cursor: pointer;
}
modified 11-Feb-22 20:33pm.
|
|
|
|
|
I am not a CSS expert. and this is in the javascript forum. But what the heck. Your issue might be the width setting about width overriding some other areas.
width: 50%; //this is all over the place.
You might specific in your powerwall-battery-input the width variable as well. Just a thought.
reminder I am not a CSS person.
To err is human to really elephant it up you need a computer
|
|
|
|
|
Well, my idea of using converting my JavaScript into modules, so I have just one copy of every function to manage hit a concrete wall today upon implementing my great idea. Perhaps I'm just overlooking something or it's just not feasible to do.
This is a plain PHP 7.4 project with some Bootstrap 5, Feather Fonts, plain vanilla Javascript. No webpacks or Gulp yet. No compressed code or script. Just a folder called assets that containers all the CSS, Scripts, Images. This PHP project has many includes for Bootstrap Modals, headers, footers, navigation. I'm using PHP Storm from Jet Brains to create with.
Let's start with "must declare type as module" with you use a external script element for a module that has exports. Then make that change from "text/javascript" to "module" and now that error clears, and the new error comes up, "function saveProjectWithProgress() is undefined".
I made a core module, literally called core.module.js, which consolidates all my special functions. This is the whole file.
export { dismissProjectNoticesAsync as dismissProjectNotices } from './projectNoticesModal.module.js';
export { saveVersionNoteAsync as saveVersionNote } from './saveVersionNote.module.js';
export { saveManagerAsync as saveManager } from './saveManagerAsync.module.js';
export { saveSwanJobAsync as saveSwanJob } from './saveSwanJobAsync.module.js';
export { saveCommentAsync as saveComment } from './saveCommentsAsync.module.js';
export { removeCommentAsync as removeComment } from './removeComment.module.js';
export { addFeatureAsync as addFeature, removeFeatureAsync as removeFeature, validateFeatureAsync as validateFeature } from './features.module.js';
export { checkSupplierAsync as checkSupplier } from './checkSupplierAsync.module.js';
export { recalculateAsync as recalculate } from './recalculateProjectAsync.module.js';
export { saveProjectAsync as saveProject } from './saveProjectAsync.module.js';
export { saveProjectWithProgressAsync as saveProjectWithProgress } from './saveProjectWithProgress.module.js';
And my PHP HTML, just a snippet of it.
<button type="Button" onclick="saveProjectWithProgress()">Save</button>
<?php include dirname(DIR, 2) . '/includes/modals/core/confirmSave.modal.php'; ?>
<?php include dirname(DIR, 2) . '/includes/modals/core/projectNotices.modal.php'; ?>
<script type="module" src="/pcad/assets/scripts/core/module/core.module.js"></script>
And the error from the console ....
Uncaught ReferenceError: saveProjectWithProgress is not defined<br />
onclick <a href="https://core/breakdown/updateBreakdown.phtml:1">https:
updateBreakdown.phtml:1:1<br />
I understand the error message. I've done this before, but I made a script element, imported the function and ran the function inside the script element, but the concept of importing a function and using it in onclick="udv()" doesn't cut it.
<script>
import { udv } from 'udv';
udv();
</script>
PHPStorm suggested that I wrap the onclick="" with a function ... But this seems strange to me.
<button type="Button" onclick="function saveProjectWithProgress() { } saveProgectWithProgress()">Save</button>
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
So all my modules were created, imported and stored on the module level above the DOM. I had to get these modules down to the DOM level to be defined and consumed. But if I write individual window statements, I will run into global pollution? So you put them all in a window namespace?
It works now, so far so good, and is exactly what I wanted to achieve with having a unified core module to call throughout the core of my PHP project. This is quite promising so far, hope it works out. Started to lose version control of all the scripts in my project, and now I've eliminated duplicate script functions.
onclick="core.saveProjectWithProgress()"
import { dismissProjectNoticesAsync as dismissProjectNotices } from './projectNoticesModal.module.js';
import { saveVersionNoteAsync as saveVersionNote } from './saveVersionNote.module.js';
import { saveManagerAsync as saveManager } from './saveManagerAsync.module.js';
import { saveSwanJobAsync as saveSwanJob } from './saveSwanJobAsync.module.js';
import { saveCommentAsync as saveComment } from './saveCommentsAsync.module.js';
import { removeCommentAsync as removeComment } from './removeComment.module.js';
import { addFeatureAsync as addFeature, removeFeatureAsync as removeFeature, validateFeatureAsync as validateFeature } from './features.module.js';
import { checkSupplierAsync as checkSupplier } from './checkSupplierAsync.module.js';
import { recalculateAsync as recalculate } from './recalculateProjectAsync.module.js';
import { saveProjectAsync as saveProject } from './saveProjectAsync.module.js';
import { saveProjectWithProgressAsync as saveProjectWithProgress } from './saveProjectWithProgress.module.js';
window.core = {
dismissProjectNotices,
saveVersionNote,
saveManager,
saveSwanJob,
saveComment,
removeComment,
addFeature,
removeFeature,
validateFeature,
checkSupplier,
recalculate,
saveProject,
saveProjectWithProgress
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
You'll probably need to use addEventListener[^] to wire up the event handlers, rather than using the on... attributes.
<button id="saveProjectWithProgressButton" type="button">Save</button>
import { saveProjectWithProgress } from 'core';
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('saveProjectWithProgress').addEventListener('click', saveProjectWithProgress);
});
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
That's a good idea!
Plus I have Bootstrap modal event listeners to wire up as well.
I have 5 main web pages in my CORE, and the goal was to use the same core.module.js on all 5 pages. Yes, that will apply on all 5 pages; I just had to think that thought through. That saveProjectWithProgress is on a PHP include that is a Bootstrap Modal on all 5 web pages.
Thanks Richard!
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Wow, feels really good to finally get my haystack cleaned into a nice organized collection of scripts, with some added wiring as well. This is what I wanted in the thread below when I was looking for a way to create common external scripts that are used over and over.
I'll have to do more research on this, perhaps some lazy loading and look into global pollution. This is looking very promising so far.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I have a function that I need to call for every one of my Plain Vanilla Javascript API calls.
So I made a module and loaded in in a common header.
<script type="module" src="/assets/scripts/authCookie.module.js"></script>
Should I be calling this module authCookie.module.cjs?
export function getCookie() {
}
I have all these scripts
<script type="text/javascript" src="/assets/scripts/breakdown/editBreakdownItem.script.js" ></script>
I get this error, import must be at the top of a module. I understand the error, it's want me to declare this as a module. Do you think this is the right thing to do? I ran a test and the error message went away. But I'm reluctant to just charge through the project and make the change. I need some clarity here.
import { getAuthToken } from 'module';
Just wondering what the right way would be. I'm certainly not going to add these functions to every script file. The internet seems polluted with all sorts of ideas.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
You know what. I can just pick up the cookie in the PHP API I wrote, and match the cookie token in the database. I don't need to transmit the unique token via my JavaScript API, but that would be cool. I just need to get some sort of basic auth into my API's to secure them.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hello,
I am trying to add the area of the room.
Anyone have an idea how to do it ?
Thank you in advance and good day !
modified 24-Jan-22 8:23am.
|
|
|
|
|
Most people will not follow links to other sites. You need to show the code that is not working and explain the problem in proper detail.
|
|
|
|
|
The program defined the following variables:
- P array of size 8 containing zeros (inputs 1 to 8)
- integer integer variables n, i
The following command segment is executed:
Input n
I = 8
Do until n = 0
P (I) = n mod 2
N = n / 2
I = i-1
End-do
Print p
- What does this section do?
- What are the conditions for the correctness of the code?
- What order will the plan fall into if one of the following options does not exist:
A. do until n = 0
B. p (i) = n mod 2
C. N = n / 2
D. I = i-1
- What will be printed for input 147?
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
