relative display - Githubissues

jwigton commented 4 years ago

I am having issues getting the slide container div to display relative instead of absolute. I was trying to get the carousel to just display at the top of a page instead of floating over the page. Is this not possible? I can look into the code more, but was first checking if it was set up in a way that this could be fixed or it was hard coded in the JS to require it being in a fixed position.

nir9 commented 4 years ago

I have tried this myself with the container div being position:relative and it worked fine with a scrollable page, please provide a non-working example.

jwigton commented 4 years ago

Not sure why, but I found the issue. It took me a long while. I created a test page that didn't run through any of the rest of the includes or site. It worked, so then I had to figure out what was different by testing removal of one piece at a time, which finally resulted in the last thing I tried: The code completely breaks when I add <!DOCTYPE HTML> I am not sure what is in the code that isn't being recognized correctly. That is a whole different debug another day.

jwigton commented 4 years ago

 <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script src="jquery.mousewheel.js"></script>
  <script src="js/ItemSlide.js"></script>

<style>

#scrolling{/*frame*/
position: relative;
top:0;
background:black;/*#FF8383 FF473D*/
height:40%;
width:100%;
overflow: hidden;
}
ul.slideul {
    /*Add if you want to disable the option of selecting the text while sliding*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 0;
    position: relative;
    /*top:10%;*/
    margin-top:4vh;
    height:80%;
    list-style-type: none;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
li.slideli {
    font-size:8vmin;/*cool*/
    float: left;
    width:25vw;
    min-width: 250px;
    height: 100%;
    color: #000;
    font-weight: 300;
    text-align: center;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    -moz-border-radius: 30px;
    cursor: pointer;
    background: #FFF;
    -webkit-transform:  scale(0.95);
    -ms-transform:  scale(0.95);
    -moz-transform:  scale(0.95);
    transform: scale(0.95);
    -moz-box-shadow: 25px 25px 25px black;
    -webkit-box-shadow: 25px 25px 25px black;
    box-shadow: 25px 25px 25px black;
}

.itemslide-active{/*applied to current active item*/
    -webkit-transform:  scale(1);
    -ms-transform:  scale(1);
    -moz-transform:  scale(1);
    transform: scale(1);

}
</style>

<div id="scrolling">
    <ul class="slideul">
    <li style='background-color: white;' class='slideli'>

    </li>
    <li style='background-color: white;' class='slideli'>

    </li>
    <li style='background-color: white;' class='slideli'>

    </li>
    <li style='background-color: white;' class='slideli'>

    </li>
    </ul>
</div>
<div style='position: relative; background-color: green; height:40%;'>
    test
</div>
<div style='position: relative; background-color: green; height:40%;'>
    test 2
</div>
<div style='position: relative; background-color: green; height:40%;'>
    test 
</div>

<script>
var carousel;
$(document).ready(function () {
    carousel = $("#scrolling ul");
    carousel.itemslide({
        swipe_out: false, //NOTE: REMOVE THIS OPTION IF YOU WANT TO DISABLE THE SWIPING SLIDES OUT FEATURE.
        start:1
    }); //initialize itemslide

    $(window).resize(function () {
        carousel.reload();
    }); //Recalculate width and center positions and sizes when window is resized
});
</script>

jwigton commented 4 years ago

I have tried this myself with the container div being position:relative and it worked fine with a scrollable page, please provide a non-working example.

I apologize if you read this earlier. I edited my responses to be more readable. I was having trouble getting my code to show up. With the above code, if you add the doctype it doesn't work when relative. It works fine in other positions like fixed. I am not yet sure without more digging into the code.

Apparently I needed to just add a style reference to fix it. I didn't realize such a small piece of missing code could do so much chaos.

html,body{
height:100%; /* w00t */
}

nir9 commented 4 years ago

Ok, I see what you are talking about, interesting, looking into it :)

nir9 commented 4 years ago

This has to do with the browser going to "standards mode" when you have the DOCTYPE, while when you don't have the DOCTYPE your browser is in quirks mode. The precentage height/width works a bit differently between these modes see https://stackoverflow.com/questions/32214152/why-does-height-100-work-when-doctype-is-removed for more information

Closing because this is not related to ItemSlide

nir9 / itemslide

relative display #84