Skip to main content
J
jessicaa53534387
Participant
February 4, 2021
Question

Code Cleanup, Responsive Images, Pop Up Images, Mobile Menu, InfintyFree & Advice!

  • February 4, 2021
  • 2 replies
  • 556 views

Hi all - apologies and thanks in advance for my long post and many questions!

I am fairly new to website creation, and have spent WAY too many hours troubleshooting my code and googling answers to no avail!

 

I am in need of some advice, and possible help with cleaning up my code. I haven't used a template, and I feel it is super messy with me trying to fix everything!

Questions and link:
http://rosesinhand21test.epizy.com/RIH21/

1. InfinityFree Server
- Somehow I always get this wrong, and the files aren't there correctly. You have to click the folder first?

- Pros/Cons on InfinityFree? I am trying to avoid costs as much as possible. 

2. Showing a different background-image for mobile and desktop. 
- I am trying to find the best way to replace an image on different devices, and haven't found the best way to do it correctly. Once I find a solution that looks good on one device, it messes up everything on the other device. 
- I have a horizontal image (the cartoon) for desktop, and a vertical version of the image for mobile. I have tried different <divs>, .background-image, #hide @217338 etc... what is the best way to do this???

3. Pop Up Images, or Modal? Images 
- The image gallery currently opens the full image in a new tab. (I don't think infinityfree is allowing this with the test site?)
- I am wanting to click on an image, have the image 'pop up' enlarged, or zoomed, with the background semi-transparent where you can still see the gallery, and you click an 'x' to go back. If I can figure out how to have multiple images that you can click through with the pop up, that would be amazing too. 

- Again, I have found many codes trying to replicate a modal image gallery but have had no luck making it work correctly. 

 

3. Mobile Menu
This is probably bothering me the most, other than the cartoon images!
- Currently on mobile, you click the 'hamburger', and click a menu item to direct the user to that section. The only way to close the menu is to click the hamburger again. 
- How can you make the menu close automatically when you click a menu item? 

- Or alternatively, click anywhere on the screen?

 

4. Scrolling
- This probably has something to do with the background images width or being fixed - but every once in a while when I fix something, the mobile has white space or is scrolling all over the place (not in a straight line, in all directions and loses itself) - is there a cheat-sheet kind of thing to go to when that happens?

 

5. YouTube playlists? 
- Is there a way to have youtube playlists? Where the site will update the content based on what's in the playlist. I am trying to achieve a low-maintenance site where I don't have to update content regularly - the content updates itself based on social feeds etc.

 

6. Mailchimp popup, Facebook feed, Insta feed
- How can I make the mailchimp pop up look better? The code seems to be absolute. It looks so bland!

- Same with the facebook feed - it's very limited as to what I can do with it!
- The insta feed is through curator.io - I want to make the posts more responsive for mobile. Only 3 show up? How would I shrink gallery? - Or is there a better option for insta feeds?

 

7. Overall advice, constructive criticism, responsiveness. 

- I know there are still alot of issues, but I am starting to go crazy trying the same things over and over, hoping for a different result. 
- Any advice or criticism based on my goals for the website is much appreciated!!
- Code clean up advice? There's probably alot in there that doesn't need to be there. 
- I know the last image messed up too 😭

Thankyou again, 

Jess

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 4, 2021

Hi @jessicaa53534387,

I think it's fair to say there's too much you don't know.  What's your projected completion date -- 6 months, 12 months?  If you need this fast, hire an experienced developer who can do it right the first time.  If you haven't the budget for a developer and reliable hosting services, consider using an online website builder like Squarespace, Webflow or Wix.  It won't be free and there is a learning curve but not nearly as steep as trying to do it all from scratch.

 

Another option to consider is Adobe Portfolio which comes free with your paid Creative Cloud plan.  You can have up to 5 Portfolio sites, freely hosted on Adobe's servers.  The built-in image viewer is a Lightbox modal.  And no coding skills required.

https://portfolio.adobe.com/

 

Portfolio Photo Grid

https://help.myportfolio.com/hc/en-us/articles/360035920114-Photo-Grid-module

 

Portfolio Lightbox Viewer

https://help.myportfolio.com/hc/en-us/articles/360038427913-Enabling-disabling-Lightbox-for-images

 

Portfolio Embed code from YouTube, MailChimp, Twitter, etc...

https://help.myportfolio.com/hc/en-us/articles/360036483773-Embed-module

 

Good luck!

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
February 4, 2021

I think it's fair to say there's too much you don't know.

 

???? It's not a bad attempt, a bit messy here and there but there's plenty of functionality going on. Could easily be sorted out in terms of a few of the less complex solutions that the OP asked for - 2 and 3 (the issue with the sub-menu on mobile devices not disappearing onclick) now have solutions.

 

Everyone has to start somewhere and you only get better with much practice and the desire to succeed. I think thats better than just using a pre-built solution if one finds building their own website, without too many dependancies, is something they enjoy.

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
February 4, 2021

I think it's fair to say that Jess is a musical talent, not a web developer.  It takes years to cultivate the skills necessary to play piano.  And learning web development is no different.  That said...

 

#5 Google owns YouTube.  To pull in a YouTube Playlist / Channel, use the Google API.

https://developers.google.com/youtube/v3/docs/playlists/list

 

#6 Facebook Developers Site

https://developers.facebook.com/docs/plugins/page-plugin/

 

#6a MailChimp Add Signup Form to your Website (style the form on Mailchimp before you export the code).

https://mailchimp.com/help/add-a-signup-form-to-your-website/

 

#6b InstaFeed JS Documentation

https://instafeedjs.com/#/

 

Also the extra vertical scrollbars are hideous.

DELETE THIS from the CSS.

body, html {overflow:hidden}

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
February 4, 2021

This is way too much to request in one thread and probably why you have received no responses to date.

 

2. Have a look at the below link to serve different images to different screen device widths:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture

 

I've not really studied the other issues in depth apart from No.3 which has me thinking the way the menu structure is set up maybe it wont work. One option you could possibly explore is closing the drop-menu when the page scrolls to the specific section after the link is clicked.

 

Search 'Codepen' for modal gallery/galleries. There should be plenty of code examples.

 

No 5. I've not done this myself but I assume you could use the Youtube API and grab a specific channels playlist which should return it as a json file which you could use to loop through the data and show the videos on your page:

https://developers.google.com/youtube/v3/docs/playlists/list

 

Failing that you could build you own json playlist file, a bit more to manage though, but you can definitely streamline the process by learning some javascript which will enable you to loop through a json file of data or even an array of javascript objects which could be used to quickly compile a playlist on your website, without having to add addition code each time.

O
osgood_
Legend
February 4, 2021

OK the 'cheap nasty' solution to resolve No3. - closing your mobile menu when scrolling to a section is to add the onclick="myFunction()" to the links:

 

<nav>
<div class="topnav" id="myTopnav">

<a href="#about" class="menu" onclick="myFunction()">ABOUT</a>
<a href="#videos" class="menu" onclick="myFunction()">VIDEOS</a>
<a href="#music" class="menu" onclick="myFunction()">MUSIC</a>
<a href="#merch" class="menu" onclick="myFunction()">MERCH</a>
<a href="#images" class="menu" onclick="myFunction()">IMAGES</a>
<a href="#socials" class="menu" onclick="myFunction()">SOCIALS</a>
<a href="#contact" class="menu" onclick="myFunction()">CONTACT</a>
<a href="javascript&colon;void(0);" class="hamburger" onclick="myFunction()" >

<i class="fa fa-bars"></i>
</a>
</div>
</nav>

 

 

 

The slightly more elegant way is to re-write the javascipt:

 

 

<script>
const navLinks = document.querySelectorAll('.topnav a');
navLinks.forEach(function(navLink) {
navLink.onclick = function() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
});
</script>

 

Then you can remove the onclick="myFunction()" from the hamburger html:

 

<a href="javascript&colon;void(0);" class="hamburger" onclick="myFunction()" >

 

Plus you wont need the below any longer as the new script will work both for the hamburger and the links:

 

<script> 
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
J
jessicaa53534387Author
Participant
February 8, 2021

I'll try that, thankyou for the help! 

I started studying the basics of JS, trying to figure out how to target the different elements. I'll definitely continue learning this. 


Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices