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

Question

Eugene_15 0 Newbie Poster

3 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

  })
}

css html javascript

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

All 5 Replies

Dani 4,084 The Queen of DaniWeb

3 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 4,084 The Queen of DaniWeb

3 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 2,580 "Nothing to see here." Moderator · 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 182 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 4,084 The Queen of DaniWeb Administrator Featured Poster Premium Member · 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

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers