Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Junior Member LiquidVector's Avatar
    Join Date
    Nov 2017
    Posts
    1
    Member #
    57767

    Simple fix... I'm newer to CSS and responsiveness... Tabbed panel needs to be mobile

    I want to drop this tabbed panel onto a person's website... it's a ****** Real Estate website that does not give any access to the server of the code on the server but I CAN drop HTMLS and some CSS into certain sections... I got this panel to work and it will display but the problem is the panel is not responsive and her website is. I know i still need to make the youtube videos responsive (think I have that figure out) but I'm completely stumped on what to do with this... was thinking about having it switch to a vertical accordian or something and completely open to suggestion. banged my head against a wall for about 4 hours on this one. Any help from you guys would be greatly apprecited!~~~~ here is the code

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    * {box-sizing: border-box}
    body {font-family: "Lato", sans-serif;}

    /* Style the tab */
    div.tab {
    float: left;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: 30%;
    height: 800px;
    }

    /* Style the buttons inside the tab */
    div.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
    }

    /* Change background color of buttons on hover */
    div.tab button:hover {
    background-color: #ddd;
    }

    /* Create an active/current "tab button" class */
    div.tab button.active {
    background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
    float: left;
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 70%;
    border-left: none;
    height: 800px;
    }

    .tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
    }

    @-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
    }

    @keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
    }

    </style>
    </head>
    <body>

    <p>Learn More Information About The Surrounding Communities</p>

    <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'Alexander')" id="defaultOpen">Alexander</button>
    <button class="tablinks" onclick="openCity(event, 'Asheville')">Asheville</button>
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Arden</button>
    <button class="tablinks" onclick="openCity(event, 'Test')">Biltmore Forest</button>
    <button class="tablinks" onclick="openCity(event, 'Test')">Candler</button>
    <button class="tablinks" onclick="openCity(event, 'Test')">Fairview</button>
    <button class="tablinks" onclick="openCity(event, 'Test')">Fletcher</button>
    <button class="tablinks" onclick="openCity(event, 'Test')">Hendersonville</button>
    <button class="tablinks" onclick="openCity(event, 'Test')">Mills River</button>
    </div>

    <div id="Alexander" class="tabcontent">
    <h3>Alexander</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Oxty_pmMpw0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    <p>Alexander, NC real estate means living away from all of the city life. Picture rolling hills, with lush greenery, forests as far as the eyes can see, with picturesque magnificent mountain views to soothe your mind and body. Take a stroll along the rivers’ edge at Alexander River Park.</p> <p> According to bestplaces.net http://www.bestplaces.net/zip- code/north_carolina/alexander/28701 Alexander is “Ranked & Rated” as: #8 2005 Best Places to Live, and #25 Best Green Cities. Weather here brings beautiful warm mid 80’s temperatures, with the lows in winter at about 26. This unincorporated community, sits along the French Broad River, and not far (3.3 miles west) from Weaverville. Homes for sale in the unincorporated community of Alexander include, mobile, modular, cottages, bungalows, ranch, multi-level, older homes, as well as new construction.</p>
    </div>

    <div id="Asheville" class="tabcontent">
    <h3>Asheville</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Ap1NmaMEyqY?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    <p>Asheville, NC is an eclectic city of vibrancy, modern life, historic living, a mecca of lifestyles meshing together as one great mountain city community, within the majestic Western North Carolina Region. From Drum circles outside in summer to indoors in winter, concerts in the parks, canoeing the rivers, biking trails, hiking, rock climbing, zip-lines, tennis, basketball, Frisbee Golf, or Golf, you will find all of this here within Asheville, NC and / or many of the surrounding close areas. From the majesty of the Smokey Mountain National Parks, to the Appalachian Mountain Trails, there is an endless supply of places to go, things to do, and wonders to see and experience. Natural wonders like hidden away waterfalls, natural water-slides, fishing, white water rafting, and photo shoot spots are plenty. Wildlife surrounds this great city as well.
    Asheville, NC has become the “hot-spot” for city living, within the rustic feel of mountain life. So if you yearn to get back to nature, while also enjoying the modern conveniences found within much larger cities, Asheville’s real estate market is one you don’t want to miss. From Historical Homes filled with Architectural unique magnificence, to cabins in the woods, Asheville realty has it all. From quaint neighborhoods to private or gated majestic estate communities, Asheville real estate is visibly a growing choice for many around the country. Homes here within the city Asheville, NC range in a plethora of price ranges, from the vintage fixer-upper in a quaint quiet neighborhood, to the Mansion Lifestyles of exclusivity. Each choice will amaze and astound you. Asheville holds its’ own as a city, having been awarded numerous times, by the likes of Forbes, USA Today, The Huffington Post, Frommers, Matador Network, Gear Patrol, MovieMaker, Conde’ Nast Traveler, Travel Channel, Travel & Leisure, SmarterTravel, VacationIdea, the lists of awards, and mentions is outstanding, and the articles of the area can be read through this link: https://www.exploreasheville.com/press-room/ranked- rated/ See for yourself what all the buzz is about, and contact me, to help you find your perfect fit within Asheville, NC realty market.</p>
    </div>

    <div id="Arden" class="tabcontent">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan.</p>
    </div>

    <div id="Biltmore Forest" class="tabcontent">
    <h3>Biltmore Forest</h3>
    <p>Biltmore Forest</p>
    </div>

    <div id="Asheville" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
    </div>

    <div id="Asheville" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
    </div>

    <div id="Asheville" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
    </div>

    <div id="Asheville" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
    </div>

    <div id="Asheville" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
    </div>

    <div id="Asheville" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
    </div>

    <script>
    function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    }

    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();
    </script>

    </body>
    </html>

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:17 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com