Style doesn’t Sync with Customized HTML

  • Unknown's avatar
    xmmywang · Member ·

    Hi! I have updates a new webpage by Copy-and-Pasting the customized HTML. The new page is: https://fabrikarchitects.ca/portfolio/170-victoria/

    However, the SlideShow’s page doesn’t align well for the Desktop view. Comparing to the other origional pages:

    My customized code is here, where the page number is auto found by the variable totalCount:

    <!-- wp:html -->
<!--- ADD THIS FOR SLIDESHOW FUNCTIONALITY ---->
https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
<!---------------------------------Script to add button functionality-------------------------------->
<script>
   $(function() {
            $('a[href*=#]:not([href=#])').click(function() {
                if (location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        $('html,body').animate({
                            scrollTop: target.offset().top
                        }, 1000);
                        return false;
                    }
                }
            });
        });
    </script>
<!---------------------------------End of Script to add button functionality-------------------->
<!----------------------------------------- Slideshow----------------------------------------->

<section class="slideshow-container container container-medium" id="slideshow">
<div class="rows">
<div class="slideshow-inner" id="pressHere">
<!---------------- Slideshow Image 1---------------->
<div class="mySlides fade wrapper_div" style="display: none;">
    <img class="slideshowImage wrapper_img" style="width: 100%;" alt="Norman House" src="https://fabrikarchitects.ca/wp-content/uploads/2023/11/01_ProjectImage_170Victoria.jpg" width="1200" height="675">
</div>
<!---------------- End of Slideshow Image 1---------------->
<!---------------- Slideshow Image 2---------------->
<div class="mySlides fade wrapper_div" style="display: none;">
    <img class="slideshowImage wrapper_img" style="width: 100%;" alt="Norman House" src="https://fabrikarchitects.ca/wp-content/uploads/2023/11/02_ProjectImage_170Victoria.jpg" width="1200" height="675">
</div>
<!---------------- End of Slideshow Image 2---------------->
<!---------------- Slideshow Image 3---------------->
<div class="mySlides fade wrapper_div" style="display: none;">
    <img class="slideshowImage wrapper_img" style="width: 100%;" alt="Norman House" src="https://fabrikarchitects.ca/wp-content/uploads/2023/11/03_ProjectImage_170Victoria.jpg" width="1200" height="675">
</div>
<!---------------- End of Slideshow Image 3---------------->
<!---------------- Slideshow Image 4---------------->
<div class="mySlides fade wrapper_div" style="display: none;">
    <img class="slideshowImage wrapper_img" style="width: 100%;" alt="Norman House" src="https://fabrikarchitects.ca/wp-content/uploads/2023/11/04_ProjectImage_170Victoria.jpg" width="1200" height="675">
</div>
<!---------------- End of Slideshow Image 4---------------->
<!---------------- Slideshow Image 5---------------->
<div class="mySlides fade wrapper_div" style="display: none;">
    <img class="slideshowImage wrapper_img" style="width: 100%;" alt="Norman House" src="https://fabrikarchitects.ca/wp-content/uploads/2023/11/05_ProjectImage_170Victoria.jpg" width="1200" height="675">
</div>
<!---------------- End of Slideshow Image 5---------------->
<!---------------- Slideshow Image 6---------------->
<div class="mySlides fade wrapper_div" style="display: none;">
    <img class="slideshowImage wrapper_img" style="width: 100%;" alt="Norman House" src="https://fabrikarchitects.ca/wp-content/uploads/2023/11/06_ProjectImage_170Victoria.jpg" width="1200" height="675">
</div>
<!---------------- End of Slideshow Image 6---------------->
<!---------------- Slideshow Image 7---------------->
<div class="mySlides fade wrapper_div" style="display: none;">
    <img class="slideshowImage wrapper_img" style="width: 100%;" alt="Norman House" src="https://fabrikarchitects.ca/wp-content/uploads/2023/11/07_ProjectImage_170Victoria.jpg" width="1200" height="675">
</div>
<!---------------- End of Slideshow Image 7---------------->
<!---------------- Div for Arrows---------------->
<div class="arrowControls">
<a class="prev" style="color:black; padding-right: 1%; border-bottom: none;" onclick="plusSlides(-1)">⟵</a>
<a class="prev" style="color: black; padding-right: 1%; border-bottom: none; outline: none; font-size:0.7em; position: relative; top: -1px" onclick="pauseSlides()">||</a>
 <a class="next" style="color: black; border-bottom: none; outline: none;" onclick="plusSlides(1)">⟶</a>
</div>
<!---------------- End of Div for Arrows---------------->
<!---------------- Div for Smaller Screens---------------->
<div class="small_arrowControls">
<a class="prev" style="color:black; border-bottom: none; position: relative; top: 6px" onclick="plusSlides(-1)">⟵</a>
<div class="smallNumDisplay">
<p style="font-weight: bold; text-align: center;">
<span id="countSmall" style="color:red;">1</span><span id="count2Small"> / 4</span>
</p>
</div>
 <a class="next" style="color:black; border-bottom: none; position: relative; top: 6px" onclick="plusSlides(1)">⟶</a>
</div>
    </div>
<!---------------- End of Div for Smaller Screens---------------->
<!----------------------------------------- End of Slideshow----------------------------------------->
<!----------------Pagination Display---------------->
<div class="imageNumDisplay">
<p style="font-weight: bold;font-size: 100%;">
<span id="count" style="color:red;"></span><span id="count2"></span>
</p>
</div>
<!---------------- End of Pagination Display---------------->
</section>
<!---------------------------------Script to add slideshow functionality---------------------------------->
<script>
var slideIndex = 1;
var myTimer;
var slideshowContainer;
var status;
window.addEventListener("load",function() {
    showSlides(slideIndex);
    myTimer = setInterval(function(){plusSlides(1)}, 3000);
})

// NEXT AND PREVIOUS CONTROL
function plusSlides(n){
  clearInterval(myTimer);
  if (n < 0){
    showSlides(slideIndex -= 1);
  } else {
   showSlides(slideIndex += 1);
  }
  if (n === -1){
    myTimer = setInterval(function(){plusSlides(n + 2)}, 3000);
  } else {
    myTimer = setInterval(function(){plusSlides(n + 1)}, 3000);
  }
}

//Controls the current slide and resets interval if needed
function currentSlide(n){
  clearInterval(myTimer);
  myTimer = setInterval(function(){plusSlides(n + 1)}, 3000);
  showSlides(slideIndex = n);
}
function pauseSlides(){
    clearInterval(myTimer);
}
function showSlides(n){
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var images = document.getElementsByClassName("slideshowImage");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < images.length; i++) {
      images[i].className = images[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  images[slideIndex-1].className += " active";
  <!---------------- Pagination Display---------------->
  var totalCount = $(".slideshow-inner").find('img').length;
$('#count').html(slideIndex);
  $('#count2').html(' / ' + totalCount );
 <!---Small Pagination Display---->
  var totalCountSmall = $(".slideshow-inner").find('img').length;
  $('#countSmall').html(slideIndex);
  $('#count2Small').html(' / ' + totalCountSmall );
<!---------------- End of Pagination Display---------------->
}
</script>
<!---------------------------End of Script to add slideshow functionality-------------------------------->
<!-- /wp:html -->

<!-- wp:paragraph {"align":"center","className":"portfolio-h1","customFontSize":15} -->
<p class="has-text-align-center portfolio-h1" style="font-size:15px"><strong><strong><span class="has-inline-color has-black-color">170 Victoria Street</span></strong></strong> <span style="color:#c00000" class="has-inline-color">//</span> Kitchener, ON</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","className":"portfolio-h2","customFontSize":15} -->
<p class="has-text-align-center portfolio-h2" style="font-size:15px"><span style="color:#d42525" class="has-inline-color"><em><em>A Space for Community & Productivity</em></em></span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"justify","className":"portfolio-paragraph","customFontSize":12} -->
<p class="has-text-align-justify portfolio-paragraph" style="font-size:12px">Bringing mass timber to Kitchener, 170 Victoria features a vibrant public level with a ground floor made up of restaurants, cafés, and shops. Three stories of office space are situated above the public level, offering bright and welcoming environments for work.</p>
<!-- /wp:paragraph -->

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    xmmywang · Member ·

    BTW, the codes are all the same, except the number of 

    <!---------------- Slideshow Image #---------------->
<div class="mySlides fade wrapper_div" style="display: none;">
    <img class="slideshowImage wrapper_img" style="width: 100%;" alt="Norman House" src="" width="1200" height="675">
</div>
<!---------------- End of Slideshow Image #---------------->

    is different

  • supernovia · Staff ·

    Hi @xmmywang, we may not be able to provide a lot of support for the custom code, but could you get screenshots of what you’re seeing, and annotate them? I’m looking in Chrome and the alignment seems pretty similar on all pages, including the new one.

    I did notice, for what it’s worth, that if I click away and come back, the slideshows stop working on all three pages (no images displayed) so you might check in with the folks who did the slideshow code to confirm.

    If you’re interested, we do have a slideshow block you could use instead, or there are other slideshow plugins you could use that wouldn’t require tinkering with the code.

  • Unknown's avatar
    xmmywang · Member ·

    Hi Supernovia,

    Thanks for reaching back. After two days of reviewing, I found that there’s a bug that will delete an </div> which makes the whole structure messed up. When I add an additional </div>, everything works.

    Thanks!

  • Unknown's avatar
    dragstor · Member ·

    Hi there, @xmmywang! 👋🏼

    Thanks for reaching back. After two days of reviewing, I found that there’s a bug that will delete an </div> which makes the whole structure messed up. When I add an additional </div>, everything works.

    That’s a nice find — if this is related to the custom code you’ve introduced to your site, we won’t be able to help as it falls outside our support scope.

    However, it’s worth mentioning that the theme you’re using (Eris) is retired, so you may want to consider switching to any other newer theme for many reasons, some of which are compatibility with the newer technology and security.

    📖 You can read more about the retired themes here:

    WP
    Themes » Retired Themes
    in WordPress.com Support
    2 min read
    This guide explains what it means when a theme has been retired and what to do about it. Retired Themes If your theme has been retired, you will see this notice on the theme’s info page: When a theme is retired, it no longer appears in the list of themes at Appearance → Themes. However, if the theme is already active on your site, you can continue to use the theme. The theme will us
  • The topic ‘Style doesn’t Sync with Customized HTML’ is closed to new replies.