Dynamic SITE TITLE, NAVIGATION BAR (inc LOGIN + CART AND CART QUANTITY) SITE LOGO (.svg)

/// Dynamic SITE TITLE, NAVIGATION BAR (inc LOGIN + CART AND CART QUANTITY) SITE LOGO (.svg) ///

Not sure the exact terminology for what I am trying to create but I am guessing its called "dynamic".

My website splits into WHITE BACKGROUND+ BLACK TEXT sections and BLACK BACKGROUND + WHITE TEXT page sections. 

I've been trying to find a solution for this but so far haven't been successful as I think it may need java not too sure.

So I just want to give the site title, the logo and all the navigation bar items a colour change once it reaches a particular section. For my website it would be once it reaches a page-section with black background all the necessary items to invert to white and vice versa. 

I only need this on the main page.

www.limited-clothing.co.uk

pass: limited123

I hope tagging you to this post doesn't cause any inconvenience. Would be very grateful if someone can find the time to assist with this.

I am just wondering if there is a code that that I can apply such as, using the nav as an example

" Change Nav colour to black  when you reach Section A (i.e data-section ID) and change back to white once you exit Section A or once you reach Section B (data-section ID). 

Not looking to make it complex but any suggestions would be more than welcome

Thanks 
 

On 4/3/2023 at 4:48 AM, NewbiefromUK said:

I am just wondering if there is a code that that I can apply such as, using the nav as an example

" Change Nav colour to black  when you reach Section A (i.e data-section ID) and change back to white once you exit Section A or once you reach Section B (data-section ID). 

Not looking to make it complex but any suggestions would be more than welcome

Thanks 
 

Do you use Personal/Business or Commerce Plan? I guess we need to use script code to achieve this

Hi,

Its a Basic Commerce Plan, its the next one after business plan.

Regards 

@tuanphan

Hi there,
Any thoughts on this? 

What is your recommendation, would be brilliant if you have a code for this :].

Thank you for your time and patience with whoever you are dealing with on daily basis in these forums 😄.

Much appreciated! 

On 4/8/2023 at 12:32 AM, NewbiefromUK said:

@tuanphan

Hi there,
Any thoughts on this? 

What is your recommendation, would be brilliant if you have a code for this :].

Thank you for your time and patience with whoever you are dealing with on daily basis in these forums 😄.

Much appreciated! 

It is not simple, at least 20 lines of script code are needed to solve this problem.

I have dealt with 2 similar sites, need to access the edit mode site to test the code (need you add me as a contributor on the site or duplicate site & add me), so I will send you a forum private message.

Hi @tuanphan,

I hope you are well,

Any chance you can look into an issue I am running to for me please?

I've got a CONTACT page in the NAV bar and also same contact page in the footer.

The nav bar CONTACT I've now converted it into a slide out with all the desired CSS, I know its working because I've used it across other things now.

The issue I am running to is the javascript I've written gets the /contact-form using its section ID but doesnt get displayed in the slide out? Using inspect elements shows the form being there as it gets highlighted, I also added a black border which appears both in the Slide out container and also in the actual contact page but for some reason nothing else is displayed. I am missing the button and all the input fields.

Can you please suggest what might be causing this and what would be a potential fix please?

Below I've pasted my Javascript for you, its using /contact-form page a new page I made but it's essentially same as the /contact one. 


limited-clothing.co.uk

pass: limited 

I've left the slide out active with the black border showing there, that is the border of the contact form, I am just not sure why it's not showing the full thing. Your help will be highly appreciated!


 

<!--- CREATING SLIDE OUT FOR CONTACT  --->

<div class="slide-out-contact" id="slide-out-contact">
  <div class="slide-out-close-contact"></div>
  <div class="slide-out-content-contact"></div>
</div>
<div class="slide-out-overlay-contact"></div>

<script>
document.querySelector('a[href="/contact"]').addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('slide-out-contact').classList.toggle('show');
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/contact-form');
  xhr.onreadystatechange = function() {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
      var parser = new DOMParser();
      var doc = parser.parseFromString(xhr.responseText, 'text/html');
      var content = doc.querySelector('section[data-section-id="645a61b2b46f126db831ebce"]').innerHTML;
      document.querySelector('.slide-out-content-contact').innerHTML = content;
      
      
    }
  };
  xhr.send();
});
  

  document.querySelector('.slide-out-close-contact').addEventListener('click', function() {
    document.getElementById('slide-out-contact').classList.remove('show');
  });

  document.querySelector('.slide-out-overlay-contact').addEventListener('click', function() {
    document.getElementById('slide-out-contact').classList.remove('show');
  });
  
  
  
  
</script>

On 4/2/2023 at 7:02 AM, NewbiefromUK said:

/// Dynamic SITE TITLE, NAVIGATION BAR (inc LOGIN + CART AND CART QUANTITY) SITE LOGO (.svg) ///

Not sure the exact terminology for what I am trying to create but I am guessing its called "dynamic".

My website splits into WHITE BACKGROUND+ BLACK TEXT sections and BLACK BACKGROUND + WHITE TEXT page sections. 

I've been trying to find a solution for this but so far haven't been successful as I think it may need java not too sure.

So I just want to give the site title, the logo and all the navigation bar items a colour change once it reaches a particular section. For my website it would be once it reaches a page-section with black background all the necessary items to invert to white and vice versa. 

I only need this on the main page.

www.limited-clothing.co.uk

pass: limited123

I hope tagging you to this post doesn't cause any inconvenience. Would be very grateful if someone can find the time to assist with this.

Password is incorrect

@tuanphan

Hi,

Ive managed to create the slide out for contact and for it to load properly but I am experiencing another glitch that I need assistance with.

Below is my javascript for the slide out.

Web: www.limited-clothing.co.uk

pass: limited

 

<script>
// Show the contact form when the contact link is clicked
document.querySelector('a[href="/contact"]').addEventListener('click', function(e) {
  e.preventDefault();
  // Check if the slide-out contact form is already shown
  if (!document.getElementById('slide-out-contact').classList.contains('show')) {
    // Show the slide-out
    document.getElementById('slide-out-contact').classList.add('show');
  }
});

// Hide the contact form when the close button or overlay is clicked
document.querySelector('.slide-out-close-contact').addEventListener('click', function() {
  document.getElementById('slide-out-contact').classList.remove('show');
});

document.querySelector('.slide-out-overlay-contact').addEventListener('click', function() {
  document.getElementById('slide-out-contact').classList.remove('show');
});

</script>


It already has set CSS for this slide out you can test it out by resizing the browser window below 50% screen width and the container will go full screen with an X button appearing in the top left corner which is all great. You can close it using the X which has a good animation, this is all good.

At that point the screen is converted into a mobile menu below 1200px and so you have the burger menu.

IF you try to open the slide out again from the burger menu CONTACT it directs me to the actual page /contact instead of getting the slide out. 

For some reason I cannot target only the CONTACT in the nav bar as a word or whatever for the slide out instead I use the href which seems to be using the URL slug. it works but I want it to also have the slide out feature on mobile. 


Can you please assist me in how I can make this work? The Footer obviously is using the/contact slug and I believe there is some kind of a cross between them below 1200px on mobile interface it just directs me to the page rather than triggering the slide out.

This would be much much appreciated! 

Kind Regards 


 

Try changing this

// Hide the contact form when the close button or overlay is clicked
document.querySelector('.slide-out-close-contact').addEventListener('click', function() {
  document.getElementById('slide-out-contact').classList.remove('show');
});

to this

// Hide the contact form when the close button or overlay is clicked
document.querySelectorAll('.slide-out-close-contact').addEventListener('click', function() {
  document.getElementById('slide-out-contact').classList.remove('show');
});