JSFiddle - React, Tailwind, and code Playground

by thcipriani

HTML

<html>  
<body>    
<div id="presentation" style="position: relative; top: 0px; height: 200px; width: 315; border:1px solid #CCCCCC; overflow: hidden;background: url(/image/background.png);">
            <div id="1" style="position: absolute; left: 0px;">
                <div style="font-size: 22px; color: #CCCCCC; text-align: center; position: relative; top: 65px; left: 25px; ">
                    &nbsp;&nbsp; <b>YOUR COMMERCE</b><br />
                    <span style="color: #CC0000;">+</span> OUR COMMUNICATION
                </div>
            </div>
            <div id="2" style="position: absolute; right: -800px;">
                BLABLA
            </div>
        </div>
        <div id="slideshow_navigation">
            <a href="#1" class="horizontal_scroll" id="default_slide">1</a>
            <a href="#2" class="horizontal_scroll">2</a>
            <a href="#3" class="horizontal_scroll">3</a>
            <a href="#4" class="horizontal_scroll">4</a>
        </div>
</body>

</html>

CSS

* {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    
    background-color: none;
    
    outline-width: 0px;
        
    font-family: "Arial", "DejaVu Sans", "Bitstream Vera Sans", "Lucida Grande", "Arial", "sans-serif";
    text-decoration: none;    
}
html, body {
    min-height: 1200px;
    
    padding-top: 15px;
    
    background-color: #FFFFFF;
    background-image: url(/image/background.png);

    z-index: 0;
}
table {
    width: 320px;
    border: 0px solid #CCCCCC;
    left: 10px;
    position: relative; 
    text-align: left;
}
.td_left {
    width: 110px;
}

#slideshow_navigation {
    position: absolute;
    right: 15px;
    top: 245px;
}
.horizontal_scroll {
    width: 15px;
    height: 15px;

    display: inline-block;
    
    background-color: #CCCCCC;
    
    color: #FFFFFF;
    text-align: center;
}
.horizontal_scroll:hover {
    background-color: #CC0000;
}


/* CONTACT FORM */
form {
    padding-left: 7px;
}
fieldset {
    border: 0px;
}
textarea {
    width: 310px;
    height: 130px;
            
    display: block;
            
    padding-left: 4px;
    
    background-color: #FFFFFF;

    color: #000000;
    
    border: 1px solid #D2D2D2;
    
    font-size: 11px;
    text-decoration: none;
    text-align: left;
    
    overflow: auto;
            
    z-index: 100;
}
label {
    width: 310px;
    height: 16px;
            
    display: block;
            
    padding-top: 4px;
    
    color: #000000;
    
    font-weight: bold;
    font-size: 11px;
    text-decoration: none;
    text-align: left;
                
    z-index: 100;
}
#message_status {
    width: 170px;
    height: 25px;
    
    position: absolute;
    top: 352px;
    left: 130px;
            
    color: #000000;
    font-weight: bold;
    text-align: center;

}
.form {
    list-style-type: none;
}
.submit {
   ...

JavaScript

// initialize horizontal_lasttrgt variable (we will need this to check if the link was already clicked)
    var horizontal_lasttrgt;
    
    $(document).ready(function(){
      
        
        
        //scroll to left when the page is loaded or refreshed
        $('#presentation').scrollLeft(0);
        
        //reset navigaton link background colors    
        $('#default_slide').addClass('active_square');
        
        
        $(".horizontal_scroll").click(function(event){
            //prevent the default action for the click event
            event.preventDefault();
     
            //get the full url - like mysitecom/index.htm#home
            var horizontal_full_url = this.href;
     
            //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
            var horizontal_parts = horizontal_full_url.split("#");
            var horizontal_trgt = horizontal_parts[1];
     
            //check if the target link was previously a target (this would mean that the link was clicked before)
            if (horizontal_trgt!==horizontal_lasttrgt) horizontal_lasttrgt=horizontal_trgt; else return;
     

            //get the top offset of the target anchor
            var horizontal_target_offset = $("#"+horizontal_trgt).position();
            var horizontal_target_left = horizontal_target_offset.left + $('#presentation').scrollLeft();
            
            //go to that anchor by setting the element scroll top to anchor top
            $('#presentation').animate({scrollLeft:horizontal_target_left}, 300);
            
            $('.horizontal_scroll').removeClass('active_square');
            $(this).addClass('active_square');
        });
        
    });