Having trouble getting my parallax slideshow to work with jquery preventDefault

Question

Having trouble getting my parallax slideshow to work with jquery preventDefault

-UPDATE-

After countless hours of online courses, tutorials, and programming, I finally completed my website! Check it out here:

The site is almost where I want it to be, but there are a few remaining challenges:
1) AJAX: I'm struggling to get the AJAX transition from the index to the navigation page to work smoothly. The method suggested by w3schools didn't quite do the trick. Any tips or resources on how to achieve this would be greatly appreciated.
2) Content Slides: The content slides currently slide in vertically indented, which is not ideal. While fixing them with a "position: fixed" works, it also makes the page unscrollable. Looking for a better solution.
3) Google Map: There's an issue with the Google Map in the contact section sometimes failing to load. It seems to only load after a page refresh. Could this be a hosting issue or something in the JS code? Suggestions are welcome.
4) Opacity Animation: The opacity animation is glitchy, only working properly with 'slow' as the duration. Changing the value breaks the animation, causing the opacity to revert instantly once complete.

-UPDATE-

I've started working on a mobile version of the website using a parallax slideshow for transitions. Here's the jsfiddle link for reference: https://jsfiddle.net/j7bwnbwm/9/

Unfortunately, my preventDefault function doesn't seem to be functioning correctly, resulting in the slideshow jumping to the top when navigating. As a newbie to web development, this challenge has been keeping me up at night. If anyone has insights or solutions, please share!

  <body>

<div class="container">

  <div class="sp-slideshow">
    <!-- Slideshow content -->
  </div>

</div>

<script>
  src = "js/parallaxscript.js"
</script>

Your assistance and advice are highly valued!

javascript jquery html css slideshow

Answer 1

Answer №1

UPDATE:

Your understanding of when and where to use AJAX seems to be slightly off. You mentioned that you are attempting to utilize AJAX to transition from one HTML Document to another. However, this is not the correct way to use AJAX.

At its core, AJAX functions as follows:

AJAX allows for new content to be loaded onto a page without requiring a full page refresh.
It should be implemented when you need to communicate with your server without reloading the entire page.

If you want to transition from your index page to your navigation page, there are two possible options:

Simply use a link, such as an HTML <a> tag. This method will trigger a page reload.
Transform both your navigation and index pages into slides for a seamless slideshow transition without page reloading, achieved by utilizing AJAX.

The preventDefault function is designed to halt default actions associated with specific elements.

For instance, when clicking on a link, the default action is to navigate to the URL specified in the href attribute.

To override this behavior, the preventDefault can be utilized within the link's click event.

In order to preserve scroll positions, it is necessary to save the scroll position upon button click and restore it on the subsequent slide. This may cause slight visual flickering or a momentary display of the new slide at the top before smoothly scrolling down to the saved position.

Automating scroll position maintenance could potentially be achieved through leveraging background-position-x, although caution must be exercised since it is an experimental CSS property. While basic support appears acceptable, cautious usage is advised.

To be candid, the complexity and rigidity of your current slideshow setup leave much to be desired.

I recommend introducing additional JavaScript functionality and possibly incorporating asynchronous data loading. For asynchronous execution, a local development server can be set up instead of purchasing one, serving solely for local access.

An asynchronous slideshow dynamically fetches slides as needed:

Load slide 1.
User clicks "next" button, retrieving slide 2 from the server.
Upon receiving slide 2, discard slide 1 and display the new slide.
Repeat process for subsequent slides based on user interaction.

This exemplifies an ASYNCHRONOUS slideshow, exhibiting slide updates rather than full page reloads. Both JQuery and pure JavaScript with the AJAX API offer suitable solutions for this scenario.

Synchronous JavaScript slideshows present various approaches:

Loading all slides and toggling visibility as needed.
Storing slide contents in variables and updating via the innerHTML property.
Implementing a parallax effect by manipulating CSS classes, though maintainability concerns might arise over time.

Irrespective of the method chosen, JavaScript will manage the current slide number to determine which slide should be displayed upon user interaction.

Acquiring familiarity with JavaScript or setting up a local development server for an asynchronous slideshow may seem daunting initially; however, these efforts significantly enhance code readability and comprehension over time.

The initial challenges will eventually pave the way for a more flexible and sophisticated approach to programming with JavaScript.

Answer 2

UPDATE:

Your understanding of when and where to use AJAX seems to be slightly off. You mentioned that you are attempting to utilize AJAX to transition from one HTML Document to another. However, this is not the correct way to use AJAX.

At its core, AJAX functions as follows:

AJAX allows for new content to be loaded onto a page without requiring a full page refresh.
It should be implemented when you need to communicate with your server without reloading the entire page.

If you want to transition from your index page to your navigation page, there are two possible options:

Simply use a link, such as an HTML <a> tag. This method will trigger a page reload.
Transform both your navigation and index pages into slides for a seamless slideshow transition without page reloading, achieved by utilizing AJAX.