Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Exit
osgood_
LEGEND
osgood_
LEGEND
Activity
‎Aug 17, 2025
11:43 AM
1 Upvote
@osgood_, great example of not using Bootstrap. However, the example could be improved if clicking away from the dropdown automatically closed it. By @BenPleysier I think all you need to do is add the below: window.onclick = function(event) { if (!event.target.matches('.topLink')) { let subLinks = document.querySelectorAll('.subLinks'); subLinks.forEach((subLinks) => { subLinks.classList.remove('activeContent', 'fadeIn'); }) } } Granted it's tricky building one's own solutions but you learn a lot. If I was starting over I might come at it from a different perspective these days...........it ain't what it used to be.
... View more
‎Aug 11, 2025
10:08 AM
2 Upvotes
If you're still looking for a solution: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Navigation</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: helvetica, sans-serif;
font-size: 16px;
}
.mainNav {
background-color: #233854;
}
.topLinks {
margin: 0;
padding: 20px;
display: flex;
justify-content: space-between;
list-style: none;
}
@media screen and (max-width: 768px) {
.topLinks {
background-color: #233854;
padding: 0;
}
}
.topLinks li {
margin: 0;
padding: 0;
position: relative;
}
@media screen and (max-width: 768px) {
.topLinks li {
position: static;
}
}
.topLinks a {
text-decoration: none;
color: #fff;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.topLinks a {
padding: 15px 20px;
display: block;
border-bottom: 1px solid #fff;
}
}
@media screen and (max-width: 768px) {
.topLinks {
display: none;
}
}
.topLink span {
display: inline-block;
margin: 0 0 0 10px;
}
.subLinks {
position: absolute;
top: 2.4em;
margin: 0 0 0 -20px;
padding: 0;
background-color: #3c6090;
width: 200px;
display: none;
opacity: 0;
transition: opacity 500ms ease-in-out
}
@media screen and (max-width: 768px) {
.subLinks {
position: static;
width: 100%;
margin: 0;
}
}
.subLinks li {
list-style: none;
margin: 0;
padding: 0;
}
.subLinks a {
display: block;
padding: 12px 20px;
border-bottom: 1px solid #fff;
}
@media screen and (max-width: 768px) {
.subLinks a {
padding: 12px 35px;
width: 100%;
}
}
.subLinks a:hover {
background-color: #5d86bb;
}
.mobileIcon {
color: #fff;
background-color: #233854;
display: none;
padding: 10px 25px;
font-size: 25px;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.mobileIcon {
display: flex;
justify-content: end;
}
}
.burger {
display: flex;
flex-wrap: wrap;
align-items: center;
height: 25px;
width: 22px;
}
.burger > div {
width: 100%;
height: 2px;
background-color: #fff;
}
.activeContent {
display: block;
}
.fadeIn {
opacity: 1;
}
.showTopLinks {
display: block;
}
</style>
</head>
<body>
<div class="mobileIcon">
<div class="burger">
<div></div>
<div></div>
<div></div>
</div>
</div>
<nav class="mainNav">
<ul class="topLinks">
<li>
<a class="topLink">Current Events<span>+</span></a>
<ul class="subLinks">
<li><a href="#">Current Events 1</a></li>
<li><a href="#">Current Events 2</a></li>
<li><a href="#">Current Events 3</a></li>
<li><a href="#">Current Events 4</a></li>
<li><a href="#">Current Events 5</a></li>
</ul>
</li>
<li><a class="topLink">Plants<span>+</span></a>
<ul class="subLinks">
<li><a href="#">Plants 1</a></li>
<li><a href="#">Plants 2</a></li>
<li><a href="#">Plants 3</a></li>
<li><a href="#">Plants 4</a></li>
<li><a href="#">Plants 5</a></li>
</ul>
</li>
<li><a class="topLink">Plant Index<span>+</span></a>
<ul class="subLinks">
<li><a href="#">Plant Index 1</a></li>
<li><a href="#">Plant Index 2</a></li>
<li><a href="#">Plant Index 3</a></li>
<li><a href="#">Plant Index 4</a></li>
<li><a href="#">Plant Index 5</a></li>
</ul>
</li>
<li><a class="topLink">Pests<span>+</span></a>
<ul class="subLinks">
<li><a href="#">Pests 1</a></li>
<li><a href="#">Pests 2</a></li>
<li><a href="#">Pests 3</a></li>
<li><a href="#">Pests 4</a></li>
<li><a href="#">Pests 5</a></li>
</ul>
</li>
<li><a class="topLink">Team</a></li>
<li><a class="topLink">Get</a></li>
</ul>
</nav>
<script>
let topLink = document.querySelectorAll('.topLink');
let subLinks = document.querySelectorAll('.subLinks');
let burger = document.querySelector('.burger');
let topLinks = document.querySelector('.topLinks');
burger.onclick = function() {
topLinks.classList.toggle('showTopLinks')
}
topLink.forEach((topLink, index) => {
if (subLinks[index]) {
topLink.onclick = function () {
subLinks.forEach((subLinks) => {
subLinks.classList.remove('activeContent', 'fadeIn');
})
subLinks[index].classList.add('activeContent');
setTimeout(function () {
subLinks[index].classList.add('fadeIn')
}, 200)
}
}
});
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
topLinks.classList.remove('showTopLinks');
subLinks.forEach((subLinks) => {
subLinks.classList.remove('activeContent', 'fadeIn');
})
}
if (window.innerWidth < 768) {
subLinks.forEach((subLinks) => {
subLinks.classList.remove('activeContent', 'fadeIn');
})
}
});
</script>
</body>
</html>
... View more
‎Jun 08, 2025
11:59 AM
Consistency in development choices isn’t about adhering to popularity alone—it’s about selecting tools that best serve the project’s needs while ensuring maintainability and efficiency. Bootstrap is widely adopted, making it a practical choice for standardized styling and layout. Wappler, on the other hand, provides a structured workflow that aligns with my development approach, particularly in cases where flexibility and efficiency are prioritized. Vue and Wappler share several similarities, particularly in their component-based approach and reactive data binding. Wappler’s App Connect framework offers a structured workflow that aligns with modern development practices, much like Vue. The key difference is that Wappler provides a visual development environment while still allowing custom coding, making it a practical choice for certain workflows. The decision to use Wappler was based on workflow efficiency and maintainability, not just familiarity. Every framework has its strengths, and the choice depends on the specific needs of the project. Standardization and ease of collaboration remain key considerations, regardless of the tool used. Every framework has its strengths, and the choice depends on the specific needs of the project. Standardization and ease of collaboration remain key considerations, regardless of the tool used. The key is making informed decisions based on project requirements rather than rigid absolutes. Professionalism in development is about understanding trade-offs and making educated choices—not dismissing methodologies outright simply because they differ from conventional workflows. By @BenPleysier I don't disagree with much of what you are saying it just comes across as a bit of a contradiction that you regard Bootstrap and use it because it's a popular choice, because of familiarity, amongst other developers, who may need to collaborate or maintain the code you produce and yet you use a product and workflow which is not very familar amongst other developers..........that's all. The essence of the story is I don't think we really give a crap about other developers. It would be more honest to stop using that argument when you don't adhere to it .
... View more
‎Jun 08, 2025
12:21 AM
Http/2/3 etc wasn't deployed so that developers could include redundant code bloat it was deployed because websites and apps became more complex requiring more complex code which was integral and used by the website/app. You and many other developers are abusing a solution which was never intended to be used to mitigate code bloat. By @osgood_ The purpose of HTTP/2 and HTTP/3 is to optimize resource loading and improve web performance, which naturally includes handling larger codebases more efficiently. While they weren’t designed specifically to 'justify' unnecessary code, they do mitigate performance concerns that were more pressing in earlier web development By @BenPleysier Well you seem to be agreeing, taking advantage (l view it as abusing) a solution to justify deployment of unecessary redundant code.....that in my opinion is not a very professional approach. Regarding the off-topic remark, Vue vs. Wappler, the decision to transition was based on workflow efficiency and maintainability, not just familiarity. Every framework has its strengths, and the choice depends on the specific needs of the project. Standardization and ease of collaboration are key considerations, especially when working on projects that may be maintained by multiple developers. By @BenPleysier Ease of collaboration......Wappler? On the one hand you promote Bootstrap because its a popular choice amongst developers and brings uniformity in your opinion and on the other hand you promote Wappler workflow that very few developers use or have even heard of..........that's quite confusing as to what it is you really believe. Just be honest and cut the nonesense, you use something if it happens to suit your purpose to do so, regardless if it's a popular choice amongst developers or not.
... View more
‎Jun 07, 2025
12:03 PM
Professionalism in web development isn't just about minimizing code—it’s about making informed decisions that balance efficiency, maintainability, and scalability. Bootstrap, like any tool, has its place when used appropriately. In modern development, concerns about 'bloat' are largely mitigated by optimized delivery methods such as HTTP/2 and caching strategies. By @BenPleysier Http/2/3 etc wasn't deployed so that developers could include redundant code bloat it was deployed because websites and apps became more complex requiring more complex code which was integral and used by the website/app. You and many other developers are abusing a solution which was never intended to be used to mitigate code bloat. Rather than focusing on rigid absolutes, the goal should be to choose solutions that best serve the project’s needs while ensuring long-term maintainability. If a standardized framework improves collaboration and future-proofing, that’s a valid consideration—just as bespoke solutions have their own merits in specific cases. By @BenPleysier If only. Unfortunately these days much of the initial thought process is lacking in favour of a one size fits all approach. Regarding the off-topic remarks, yes, I have recently had to redo a Vue framework-based website. I managed to make significant improvements by translating it into the Wappler front-end framework called App Connect. By @BenPleysier Why didn't you just redo it in Vue. There's nothing Vue can't do that App Connect can do. I think the reasoning here is you know App Connect better than Vue, rather than any significant improvements being made. Let's be honest here, no developer wants to inherit some other developers project built in a workflow which is foreign to them and maintain it, they would rather start from scratch using the workflow they know.
... View more
‎Jun 06, 2025
11:59 PM
It's not about negating anything it's about being professional............a dirty word in today's society. Having to use solutions or even build them to cater for poor understanding and poor choice is not a solution in my view at least. As far as developers understanding well that's just pie in the sky given the myriad of options available. I doubt you would know how to maintain a site built in react or angular or vue despite the developer using Bootstrap as their main front end choice.........its all bespoke if you don't have the knowledge of a workflow. Today's developers know very little in terms of what workflows are available, forced to opt for niche choices as a result of too many choices. Gone are the days when developers were mostly singing from the same hymn sheet.
... View more
‎Jun 06, 2025
12:37 PM
The OP Originally Wrote: "yes I know I need to redo my website to make it responsive..." Modern Bootstrap takes care of that and a lot more, with very minimal overhead. By @Nancy OShea Keep on fooling yourself, why deploy code you don't need, it's senseless, at least make the effort to make it more streamlined. I've a hundred sandbags loaded in the boot of my car I dont need, the car is very slow, so instead of removing the sand bags I had a more powerful engine fitted..............lack of common sense is no excuse for someone to provide a solution which makes a bad solution faster or more convienient.
... View more
‎Jun 06, 2025
01:52 AM
I would not advise using a Bootstrap accordion in a predominately non-bootstrap website if that is the idea as you'll only be leveraging about 3% of the javascript, leaving 97% bloat...........gulp!!!!......not to mention the 1000's of lines of redundant css!!!! By @osgood_ There may be bloat in the website, but certainly not caused by the Bootstrap framework: By @BenPleysier 28kb and 23kb of Bootstrap css/scripts just for an accordion.............that's the bloat right there, hence I provided advice to consider not deploying Bootstrap for a single component use in a predominately non-bootstrap website.
... View more
‎Jun 06, 2025
01:15 AM
Code bloat isn't an issue for me, either. It might be if I used other 3rd party code, but I don't. By @Nancy OShea It's never an issue if you use that approach because it then becomes an issue that you would rather not consider.
... View more
‎Jun 06, 2025
12:51 AM
Talking Bootstrap bloat is so much of a previous (read: jQuery) era. By @BenPleysier It's unprofessional to deploy code that is NOT strictly required but l don't expect an amateur to understand that..............wheat from the chaff. Bootstrap will always be bloated because thats the nature of it - cheap and cheerful rather than bespoke, regardless of HTTP/? I acknowledge we are in an era where developers are very poor in terms of skill, practices, common sense as a result of their almost exclusive reliance on 3rd party frameworks and libraries. Throwing the kitchen sink at the problem these days is just a by-product of the state development is in today. In reality the majority don't really like it if truth be known but they have no choice but to join the lemmings.
... View more
‎Jun 05, 2025
01:07 PM
The arrow icons in the panels are a bit confusing.....they should be pointing down as the default position signifying there is some information beneath the panel title to view and then up when the panel is open, signifying it can be closed......surely that's the way!!!! Personally I'm not sure even when using Bootstrap you need to adhere strictly to the col/row suggestion to house content when the information is so basic....in this case I don't see it causing any issues and its lighter in terms of code bloat, which we all know Bootstrap is renowned for!!! I would not advise using a Bootstrap accordion in a predominately non-bootstrap website if that is the idea as you'll only be leveraging about 3% of the javascript, leaving 97% bloat...........gulp!!!!......not to mention the 1000's of lines of redundant css!!!!
... View more
‎Jun 05, 2025
12:09 PM
Got it! Lack of sleep struck again making me not see the obvious pattern. https://www.bassett.net/pages/bootstrap.html Now the only thing left (for this page anyway), is what am I doing wrong with the H1 and image. I have <h1 align="center"> and <img align="center". The heading centers, but the image does not, so what's wrong there? Did I misplace the center part of the code? By @Kathryn - Pasadena CA As you are using Bootstrap in the example use some dedicated Bootstrap css classes (see in red below): <h1 class="text-center">David Bassett<br>2 May 1945 - 16 May 2025</h1> <img class="mx-auto d-block" src="/photos/family/2025-05-02-justDave.jpg width="555" alt="David Bassett"> That should do it!
... View more
‎Jun 03, 2025
11:07 AM
Just shows you shouldnt rely on Copilot for information. Wappler according to UK pricing is per month 29 dollars for the basic version and 49 dollars for the pro version, probably can't do a lot with the basic version..........still l would rather pay either of those prices for a product which is currently in active development rather than waste a bean on one that isn't. However it's likely that anyone still using DW does so as part of the Cloud subscription package, rather than as a standalone product. To answer the OPs question...........................dream on.
... View more
‎Mar 24, 2025
02:24 AM
1 Upvote
And in HOLLA Id like to make the text on the contact form darker but Ive tried everything to affect that text but no go.. i can change the font but not the color or weight.. not sure why. By @REELHERO Try: ::placeholder { color: #666666; opacity: 1; }
... View more
‎Mar 20, 2025
12:13 PM
1 Upvote
thank you - I wanted to add a delay but it loads then delays.. https://pitchlab.net/lowdown/index_delay.html using animation: .7s slide-up cubic-bezier(.37,1.21,.58,1.1); animation-delay: 1s; is that not correct? By @REELHERO You have opacity: 1!important set on the .circle2 css selector............so it will show on page load..........set the opacity to 0 WITHOUT adding !important at the end otherwise that will overide the opacity that you have set on the slide_up keyframe animation. Also you need to add 'forwards' to your .circle2 css animation , see below: animation: .7s slide-up cubic-bezier(.37,1.21,.58,1.1) forwards;
... View more
‎Mar 20, 2025
05:23 AM
1 Upvote
@REELHERO wrote: I switched the animation from a fade to a slide up and its not working - Im guessing position is the culprit https://pitchlab.net/lowdown/slidertest.html the circle is in a fixed postion (i want it to stay at approx the bottom of the page where I set it) but I want it to slide up on page load (as the body text does) does the slider/activer animation class need to be relatively positioned here? conversely will the slider work if my div is fixed..? Add to your css selector 'circle2': animation: slideMeUp ease 700ms; Then create another keyframe animation for slideMeUp: @keyframes slideMeUp { 0% { transform:translate(-50%, 200px); } 100% { transform:translate(-50%, 0px); } }
... View more
‎Mar 19, 2025
11:47 AM
1 Upvote
version 2, i add it outside the div and it doesnt appear https://pitchlab.net/lowdown/index_fadetest2.html doesnt seem to be a z-index issue.. thoughts? By @REELHERO You just need to add to the fade-in2 css selector: position: relative; z-index: 1000; Then revise the html to: <div class="fade-in2"> <a href="https://pitchlab.net/contact"> <div class="circle2 shadow"> <p class="circletext"> let's make<br><span class="waves">waves</span><br>hit us up</p> </div> </a> </div> Currently your div/a tags are closed in the wrong position plus you must remove the second instance of 'fade-in2' from the child div.
... View more
‎Mar 15, 2025
05:15 AM
having a tough time vertically centering the "lets make waves, hit us up" in the circle at the bottom of the page.. https://pitchlab.net/lowdown/index_test.html# Just add to the 'circle2' css selector: display: grid; place-content: center;
... View more
‎Feb 28, 2025
12:22 PM
Works fine for me....at least the visa link.......you don't have the other movies linked as yet. What is it you expect to happen?
... View more
‎Feb 28, 2025
11:13 AM
I think z-index will only work if an item is positioned relative or absolutely. If the link is not clickable when css is applied it means something else is overlaying the link. It could possibly be an overlay.
... View more
‎Feb 27, 2025
01:07 PM
Have you tried disabling all the css to test if the link works? Have you tried the a tag on its own without the span tag wrapping it? If you can see the link but can't click on the link it would suggest to me that something is blocking it. A good way to test is to disable all the css.
... View more
‎Feb 27, 2025
11:49 AM
is it possible to make the whole video container linkable? Wrap an a href around the video container.
... View more
‎Feb 27, 2025
10:46 AM
1 Upvote
Try closing the span tag in the first version, should be an > after the "dotted" class name The second version won't work as a link requires an anchor tag wrapped around it.
... View more
‎Feb 26, 2025
10:46 AM
Who did or how was the 'reel' page set up, that has links to the movies player page/s? Have you tried copying the same link structure from that page. Seems to me that the movies are stored in their own seperate folders, so it seems logical that just linking to the appropriate folder should work?
... View more
‎Feb 25, 2025
12:07 PM
1 Upvote
isnt that already in the original script though? setTimeout(function() {
reviews[current].style.opacity = '1';
}, 1500)
That one just fades in the initial review so you don't have to wait 5 seconds for it to appear. I'm sure you have worked it out by now: setInterval(function() {
reviews.forEach((review) => {
review.style.opacity = '0';
});
current = (current !== reviews.length - 1) ? current + 1 : 0; setTimeout(function() {
reviews[current].style.opacity = '1'; }, 1000)
}, 5000)
... View more
‎Feb 25, 2025
12:52 AM
1 Upvote
@REELHERO wrote: Can I adjust the code so that it fades out completely before the new one comes in Sure, just add a setTimeout function to the script which delays the text fading in by 1 second: setTimeout(function() { reviews[current].style.opacity = '1'; }, 1000) @REELHERO wrote: also I am trying to get all the reviews no matter what the length to justity right (or align right) so they all end at the far right of "PITCH LAB" but float and text align are not working I would make your 'review_container' width 100% and give it the same right position as your 'review-title' css class #review_container{ position: fixed; right: 10vw; width: 100%; bottom:24vh; } Then apply width: 100% to your 'reviewText' css class. You have 2 declarations of the .reviewText css class, so I would remove one, so only the values below are present. .reviewText { font-size: .9vw; font-family: "kanitlight", sans-serif; font-weight: 100; letter-spacing: .05vh; color:#022d2c; position: fixed; line-height: 1; transition: opacity 1s ease; opacity: 0; text-align: right; width: 100%; } See if that positions the text where you require it to be.
... View more
‎Feb 24, 2025
12:22 PM
I added a little fade-in and out review sequence (below the video) https://pitchlab.net/ with pure css.. however I want it to loop continuously - there are temp lines in there but Ill have 6-8 - but I believe I need JS for that.. is that correct? Can you point out how i might do that? By @REELHERO The below should work. <style>
#review_container {
position: relative;
}
.reviewText {
font-size: .9vw;
font-family: "kanitlight", sans-serif;
font-weight: 100;
letter-spacing: .05vh;
color:#022d2c;
position: absolute;
line-height: 1;
transition: opacity 1s ease;
opacity: 0;
}
</style>
<div id="review_container">
<h1 class="reviewText">Top designers to help elevate your film, commercial, or music video pitch decks</h1>
<h1 class="reviewText">100% hit rate whenever we used Pitch lab helping us crush the competition - A24</h1>
<h1 class="reviewText">The deck was napalm by the time we hit the room they were sold and floored - Tool</h1>
</div>
<script>
let current = 0,
reviews = document.querySelectorAll(".reviewText");
setTimeout(function() {
reviews[current].style.opacity = '1';
}, 1500)
setInterval(function() {
reviews.forEach((review) => {
review.style.opacity = '0';
});
current = (current !== reviews.length - 1) ? current + 1 : 0;
reviews[current].style.opacity = '1';
}, 5000)
</script>
... View more
‎Feb 24, 2025
01:41 AM
1 Upvote
subtle change but i think its more elegant with the continuous direction.. By @REELHERO I agree in this case. Not sure quite what was happening before but it seemed to be turning anti clockwise on the first click, which felt counter intuitive to me. I think had it been going in a clockwise direction on first click and then anti clockwise on the second click it would have been passable. As it is l quite like it rotating clockwise on each click.
... View more
‎Feb 23, 2025
11:44 AM
1 Upvote
I initially wanted it to rotate clockwise 45 degrees on the second toggle- so that it appeared to return to its original state yet all rotations would be clockwise - but this works.. Just alter the script a little bit - see additions in red below, plus a line commented out in green. <script> const bento_box_wrapper = document.querySelector('.bento_box_wrapper'); let rotate = 0; bento_box_wrapper.onclick = function() { const overlayWrapper = document.querySelector('.overlayWrapper'); overlayWrapper.classList.toggle('overlayWrapperSlideDown'); const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper'); mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp'); rotate = rotate + 405; bento_box_wrapper.style.transform = `rotate(${rotate}deg)`; // Add or remove the 'rotated' class to manage the rotation // bento_box_wrapper.classList.toggle('rotated'); } </script> In reference to your other issue regarding the play/pause button it's best to ask the developer of the script. The script uses jQuery which I'm not totally familar with BUT it would seem you need to add the pause button when the page initially loads. I would have thought this would be one of the options available as the script uses an 'auto' play option on page load, so why would you want to show a play button initially if that option is selected.
... View more
‎Jan 23, 2025
11:27 AM
2 Upvotes
I'll throw this solution into the ring (store your list in a javascript array)....... <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sort List Alphabetically</title>
</head>
<body>
<button class="sort" onclick="sortedList()">Alphabetical</button>
<button class="sort" onclick="defaultList()">Original</button>
<ul class="listItems"></ul>
<script>
const list = [
'Blue Turtle (Josh Adams)',
'Devo (Devin Salam)',
'Champ (Mike Thompson)'
];
const listItems = document.querySelector('.listItems')
// Original unsorted list function
function defaultList() {
listItems.innerHTML = '';
list.forEach((list) => {
listItems.innerHTML += `<li>${list}</li>`;
})
}
// Sorted list function
function sortedList() {
listItems.innerHTML = '';
list.toSorted().forEach((sorted) => {
listItems.innerHTML += `<li>${sorted}</li>`;
})
}
// Run original unsorted list on page load
defaultList();
</script>
</body>
</html>
... View more
Copyright © 2025 Adobe. All rights reserved.
AdChoices