siema slider in a jquery tab unable to slideimage after i resize browser

Question

Eugene_15 0 Newbie Poster

5 Years Ago

Hi guys, my siema slider plugin is not working in the jquery tab, everything i switch my tab, my image slider unable to slide image, only if I resize my browser and the slider image will function back again.

Below there is a demo codepen link, hope i can get some advise from u guys. thanks alot

https://codepen.io/Eugene7/pen/LYRmyZW

HTML

<main class="maingallery">
     <div class="containergallery">
        <nav class="top-nav">
            <div class="topnavrow">
                <ul class="navbar-left tabprofile">
                    <li>
                        <a class="element hahafav" href="#favourite" onclick="favourite(&lt;?php echo $data4['totalviews']; ?&gt;, &lt;?php echo $data5['totaladv']; ?&gt;, &lt;?php echo $data6['totallike']; ?&gt;, 'favouritefireadv')">favourite</a>
                    </li>
                    <li>
                        <a class="element" href="#advertisement" onclick="advertisement(&lt;?php echo $data7['totalviews']; ?&gt;, &lt;?php echo $data8['totaladv']; ?&gt;, &lt;?php echo $data9['totallike']; ?&gt;, 'advfireadv')">advertisement</a>
                    </li>
                </ul>
            </div>  
        </nav>

        <div class="profile_content" id="favourite">
            <div class="galleryupload" id="favouritephoto">
                <div class="gallery-item">
                    <div class="mobileslider">

                        <div style="width:275px;">
                            <img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--pink.svg">                
                         </div>

                        <div style="width:275px;">
                                <img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--yellow.svg">                           
                        </div>  

                    </div>
                </div>
            </div>
        </div>

        <div class="profile_content" id="advertisement">
            <div class="galleryupload" id="galleryadv">
                <div class="gallery-item" >
                    <div class="mobileslider">

                       <div style="width:275px;"><img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--pink.svg">
                       </div>

                        <div style="width:275px;"><img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--yellow.svg">
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</main>

CSS

    .maingallery {
     border-style: none;
     border-color: #fff;
     border-width: 1px;
     display: block;
     margin: 10px 0px 0px 0px;
 }
 .containergallery {
     border-style: none;
     border-color: #FFF;
     border-width: 1px;
     display: block;
 }
.galleryupload {
     display: grid;
     grid-template-columns:repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
     grid-gap: 2rem;
}

 .gallery-item {
    position: relative;
    flex: 1 0 22rem;
    margin: 1rem;
    color: #fff;
    width:275px;
    overflow:hidden;
}
 .gallery-item:hover .gallery-item-info {
     display: flex;
     justify-content: center;
     align-items: center;
     position: absolute;
     top: 0;
     width:275px;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.3);
     font-size: 12px;
 }
 .gallery-item-info {
     display: none;
 }
 .gallery-item-info li {
     display: inline-block;
     font-size: 12px;
     font-weight: 600;
 }
 .gallery-item-likes {
     margin-right: 2.2rem;
 }
 .gallery-item-type {
     position: absolute;
     top: 1rem;
     right: 1rem;
     font-size: 2.5rem;
     text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
 }
 .fa-clone, .fa-comment {
     transform: rotateY(180deg);
 }
 .gallery-image {
     width: 100%;
     height: 350px;
     object-fit:cover;
    position:relative;
 } 
 .visually-hidden {
     font-size:16px;
 }
 .top-nav {
     width: 855px;
     height: 48px;
     position: relative;
     overflow: hidden;
     font-family: 'Gibson', sans-serif;
     font-size: 11px;
     padding: 5px;
     border-style: none;
     border-color: #000;
     border-width: 3px;
     margin: 5px 0px 0px 0px;
 }
 .topnavrow {
     float: left;
 }
 .top-nav ul li {
     float: left;
     padding: 10px 10px;
     color: #FFF;
     opacity: 0.6;
     border-style: none;
     border-color: #FFF;
     border-width: 1px;
     margin: 0px 6px 0px 0px;
     background-color: #29282b;
     border-radius: 3px;
     -webkit-box-shadow: 0 0 2px 2px #000;
     -moz-box-shadow: 0 0 2px 2px #000;
     box-shadow: 0 0 2px 2px #000;
 }
 .top-nav ul li.active {
     color:#0983b8;
     border-color:#0983b8;
     border-width:1px;
     border-style:solid;
 }
 .top-nav ul li i {
     font-size: 19px;
     margin-right: 7px;
     border-radius: 2px;
     color: #fff;
 }
.galleryupload {
     display: grid;
     grid-template-columns:repeat(auto-fill, minmax(min(25rem, 100%), 1fr));
     grid-gap: 2rem;
}
 .gallery-item {
    position: relative;
    flex: 1 0 22rem;
    margin: 1rem;
    color: #fff;
    width:275px;
    overflow:hidden;
}
 .gallery-item:hover .gallery-item-info {
     display: flex;
     justify-content: center;
     align-items: center;
     position: absolute;
     top: 0;
     width:275px;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.3);
     font-size: 12px;
 }
 .gallery-item-info {
     display: none;
 }
 .gallery-item-info li {
     display: inline-block;
     font-size: 12px;
     font-weight: 600;
 }
 .gallery-item-likes {
     margin-right: 2.2rem;
 }
 .gallery-item-type {
     position: absolute;
     top: 1rem;
     right: 1rem;
     font-size: 2.5rem;
     text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1);
 }
 .fa-clone, .fa-comment {
     transform: rotateY(180deg);
 }
 .gallery-image {
     width: 100%;
     height: 350px;
     object-fit:cover;
    position:relative;
 }

javascript

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js

$(document).ready(function() { 

    //Default Action

    $(".profile_content").hide(); //Hide all content
    $("ul.tabprofile li:first").addClass("active").show(); //Activate first tab
    $(".profile_content:first").show(); //Show first tab content


    //On Click Event

    $("ul.tabprofile li").click(function() {
        $("ul.tabprofile li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".profile_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;

    }); 

});

https://pawelgrzybek.github.io/siema/assets/siema.min.js

const siemas = document.querySelectorAll('.mobileslider');

// this is fairly new way of looping through DOM Elements
// More about ithere: https://pawelgrzybek.com/loop-through-a-collection-of-dom-elements/
// For better compatibility I suggest using for loop
for(const siema of siemas) {

  new Siema({

    selector: siema

  })
}

javascript:jquery

4 Contributors
5 Replies
269 Views
1 Day Discussion Span
Latest Post 5 Years Ago Latest Post by Dani

Dani AI

Generated 9 Months Ago

Short answer: this is the classic “slider initialized while hidden” problem that already flagged — Siema measures the carousel frame on init, so if the container is hidden (display:none) the widths come back wrong and the slider won’t respond until you force a recalculation. This is common for many carousels (see similar reports for other libraries). See the Siema docs and the author’s demo that calls a resize handler when the layout changes. (pawelgrzybek.github.io)

Two practical fixes (pick one):

Keep references to the Siema instances and call their resize handler after the tab is shown. Example pattern:

const siemaInstances = Array.from(document.querySelectorAll('.mobileslider'))
  .map(el => new Siema({ selector: el }));

// when the tab becomes visible, run:
$(activeTab).fadeIn(function () {
  siemaInstances.forEach(inst => inst.resizeHandler());
});

Calling the instance method is the most direct approach — the Siema author’s demo uses the same mechanism. (codepen.io)

Initialize the slider only when its tab is made visible (or destroy and re-create on each show). If you prefer a tiny hack instead of managing instances, trigger a global resize event inside the show callback; Siema listens for window resize and will recompute layout:

$(activeTab).fadeIn(function () {
  window.dispatchEvent(new Event('resize'));
});

(That dispatch fires the resize handlers; see the Resize event docs and Siema’s resize hookup.) (developer.mozilla.org)

Extra troubleshooting notes:

’s observation that removing the first slide changed behavior is consistent with a measurement-time edge case (small markup changes can shift the initial calculation).
If you re-initialize a slider, call destroy() first to avoid duplicated listeners/frames (Siema exposes a destroy method).
If slides contain images that load after init, wait for images to load (or give slides explicit dimensions) before creating the instance so measured widths are correct. (pawelgrzybek.github.io)

Relevant reading: Siema docs and the author’s demo showing usage of the resize handler. (pawelgrzybek.github.io)

All 5 Replies

Dani 5,664 The Queen of DaniWeb

5 Years Ago

I'm able to reproduce this in the Codepen with the latest version of Chrome / macOS.

rproffitt, what are you referring to? The color scheme in the pen is just the default demo from Siema.

Eugene, does it work fine when not within a jQuery tab?

I'm thinking that the problem is that you hide all profile_content at first, and so Siema isn't given an opportunity to render properly.

rproffitt commented: I was in Opera when I looked and default colors are not a good excuse for the horrible color choices. +0

Eugene_15 commented: it works fine, when not using jquery tab +0

Dani 5,664 The Queen of DaniWeb

5 Years Ago

I was in Opera when I looked and default colors are not a good excuse for the horrible color choices.

I think you're misunderstanding. The OP is just trying to get the demo to work. It isn't representative of their actual use case.

rproffitt commented: I understand that. Still, "My eyes, the goggles do nothing." +0

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

I was in Opera when I looked and default colors are not a good excuse for the horrible color choices.
I understand that. Still, "My eyes, the goggles do nothing."

rproffitt 3,249 https://5calls.org Team Colleague · Answer 1 · 2021-01-06T16:34:13+00:00

The pen doesn't seem to show the issue. But did make me write this reply over your text and box colors. The text in the boxes was unreadable.
Nod to https://www.htmlvalidator.com/htmlval/fontsandcolors.html

Biiim 215 Junior Poster · Answer 2 · 2021-01-07T16:15:20+00:00

Not familiar with Siema, I did get the bug you have on your codepen though. When I commented out the first gallery-image on the first slider it started working for me. I also fixed the canonicalised PHP code in the javascript <?php and ?> whatever it is for, I just changed it to 3 random integars - I just mention it incase that was a reason it started working for me.

<main class="maingallery">
     <div class="containergallery">
        <nav class="top-nav">
            <div class="topnavrow">
                <ul class="navbar-left tabprofile">
                    <li>
                        <a class="element hahafav" href="#favourite" onclick="favourite(5, 6, 7, 'favouritefireadv')">favourite</a>
                    </li>
                    <li>
                        <a class="element" href="#advertisement" onclick="advertisement(1, 2, 3, 'advfireadv')">advertisement</a>
                    </li>
                </ul>
            </div>  
        </nav>

        <div class="profile_content" id="favourite">
            <div class="galleryupload" id="favouritephoto">
                <div class="gallery-item">
                    <div class="mobileslider">

                        <!--<div style="width:275px;">
                            <img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--pink.svg">                
                         </div>-->

                        <div style="width:275px;">
                                <img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--yellow.svg">                           
                        </div>  

                    </div>
                </div>
            </div>
        </div>

        <div class="profile_content" id="advertisement">
            <div class="galleryupload" id="galleryadv">
                <div class="gallery-item" >
                    <div class="mobileslider">

                       <div style="width:275px;"><img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--pink.svg">
                       </div>

                        <div style="width:275px;"><img alt="" class="gallery-image" src="https://pawelgrzybek.github.io/siema/assets/siema--yellow.svg">
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</main>

The slider works by having all of the "slides" inside the mobileslider div then using javascript it moves through them by changing which image is active, that should point you to your bug if you look in the console while the slider is open to see what the HTML says.

It seems odd to me that you have the Slider code repeated twice - 2 different sliders?

Dani 5,664 The Queen of DaniWeb Administrator Featured Poster · Answer 3 · 2021-01-07T17:43:40+00:00

I also fixed the canonicalised PHP code in the javascript <?php and ?>

I have to figure out if this is a bug that escaped what you wrote instead of treating it as <?php and ?>

siema slider in a jquery tab unable to slideimage after i resize browser

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers