Materialize slider deorganised my images size - javascript

i'm new here and also new at coding, i have been practicing with Visual Studio Code for a week now and i come with the following problem: i'm making a Slider with content inside so i can edit it and put a button inside it with a modal, i manage to make it work but as soon as i made it the images on the info cards for some reason went out of the limits of the info card, i can't figure out what i did wrong. this is my code and i apologize if this is not the correct way of uploading a code i still don't know how to properly use the site correctly.
<!DOCTYPE html>
<html>
<head>
<!----------------------------------------Zona de Extensiones+6------------------------------------------>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="Prueba numero2/assets/css/style3.css">
<link rel="stylesheet" type="text/css" href="Prueba numero2/assets/materialize/css/materialize.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<style>
.slider .indicators .indicator-item {
background-color: #666666 !important;
border: 3px solid #ffffff !important;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
}
.slider .indicators .indicator-item.active {
background-color: #ffffff !important;
}
.slider {
width: 900px !important;
margin: 0 auto !important;
}
.slider .indicators {
bottom: 60px !important;
z-index: 100 !important;
/* text-align: left; */
}
nav {
background-color: black !important;
border-style: outset white 100px !important;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
.nav-wrapper .brand-logo .logo {
width: 64px !important;
}
html {
box-sizing: border-box !important;
}
*, *:before, *:after {
box-sizing: inherit !important;
}
.column {
float: left !important;
width: 33.3% !important;
margin-bottom: 16px !important;
padding: 0 8px !important;
}
#media screen and (max-width: 650px) {
.column {
width: 100% !important;
display: block !important;
}
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
}
.container {
padding: 0 16px !important;
}
.card {
border-style: outset !important;
border-color: black 10px !important;
}
.container::after, .row::after {
content: "" !important;
clear: both !important;
display: table !important;
}
.title {
color: goldenrod !important;
}
.button {
border: none !important;
outline: 0 !important;
display: inline-block !important;
padding: 8px !important;
color: white !important;
background-color: #000 !important;
text-align: center !important;
cursor: pointer !important;
width: 100% !important;
}
.button:hover {
background-color: #555 !important;
}
footer div {
max-width: 100% !important;
}
</style>
</head>
<body>
<!----------------------------------------Scrips----------------------------------------->
<!----------------------------------------Scrips----------------------------------------->
<header>
<div class="panel">
<span style="display: inline-block; vertical-align: middle; height:100vh;"></span>
<span style="display: inline-block; vertical-align: middle; ">
<p class="title">L'excellance</p>
<p class="sub-title" style-color="goldenrod"> V.I.P Suites <a></p>
</div>
</header>
<nav>
<div class="nav-wrapper">
<img class="logo" src="https://i.dlpng.com/static/png/36814_preview.png"alt="L'excellance">
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li>Home</li>
<li></li>
<li>JavaScript</li>
</ul>
</div>
</nav>
<br><br>
<section>
<p>
Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue eratatmassa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum anteipsumprimis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, eliterat euismodorci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus,bibendum sed, posuereac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere.Praesent turpis.
</p>
</section>
<br>
<br>
<div class="container"><div class="divider"></div></div>
<br>
<br>
<br>
<br>
<div class="w3-row-padding w3-border-light-grey w3-round w3-padding"></div>
<div class="row">
<div class="column">
<div class="card">
<img class="materialboxed" data-caption="CEO & Founder Sugma Joe " src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="Jane" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">CEO & Founder</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example#example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img class="materialboxed" width="auto" src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">Art Director</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example#example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img class="materialboxed" src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="John" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">Designer</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example#example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="divider"></div>
<br>
<br>
<!----------------------------------------Sección 3------------------------------------------>
<div class="slider">
<ul class="slides">
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
<!----------------------------------------Fin de Sección 3------------------------------------------>
<!----------------------------------------footer------------------------------------------>
<!----------------------------------------Zona de Scrips------------------------------------------>
<script>
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
<script>
// init materialize tab
var elem = $('.tabs')
var options = {}
var instance = M.Tabs.init(elem, options);
//or Without Jquery
//var elem = document.querySelector('.tabs');
var options = {}
var instance = M.Tabs.init(elem, options);
</script>
</body>
</html>

to post your code here just type your text message then under the message paste your code,
select your code paragraph and then hit ctrl+K, that should set your message to be posted with a code...
post your code for others to be able to help you...

Related

Trying to make the bootstrap navbar sticky with jQuery

I was trying to make my navbar sticky with jqueries the style of the className ".sticky" is in the css/styles.css folder
i am unable to achieve the sticky nav function... I don't know what I am doing wrong in my main.jss file
//html file ------->
<body>
<!-- HEAD SECTION WITH BG-IMAGE AND NAVBAR -->
<header class="masthead head" style="background-image: url('./images/back.jpg ');">
<!-- <div class="container-fluid p-0"> -->
<!-- NAVIGATION BAR WITH NAVBRAND AND TICKET -->
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a class="navbar-brand" href="#"><img src="images/brand.png" alt="brand"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa-regular fa-align-right"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- <div class="mx-auto"></div> -->
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<!-- <div class="container">
<button type="button" class="btn btn-outline-dark btn-lg ticket">
<i class="fa-solid fa-ticket"></i>
<span>Tickets</span></button>
</div> -->
<div class="container ticket"><img src="images/ticket.png" alt="ticket"></div>
</div>
</nav>
<!-- </div> -->
<div class="container text-center">
<!-- BACKGROUND IMAGE WITH LOGO IMAGE AND CAPTION TEXT -->
<div class="row">
<!-- CAPTION TEXT -->
<div class="col-md-6 col-sm-12">
<span class="top">Experience</span>
<h1>The Ada Calypso</h1>
<span>'Dec 16<sup>th</sup>-17<sup>th</sup></span>
</div>
<!-- LOGO IMAGE -->
<div class="col-md-6 col-sm-12 h-25">
<img src="images/banner.png" alt="logo image">
</div>
</div>
</div>
</header>
<!-- MAIN PAGE WITH SECTIONS -->
<main>
<!-- EXPERIENCE SECTION WITH IMAGES AND CAPTION -->
<section class="experience">
<div class="container align-center">
<h2>The Experience</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row">
<div class="col-md-6 col-sm-12">
<img src="images/fireside.jpg" alt="fireside at treasure island">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/relax.jpg" alt="couples enjoying a drink">
</div>
</div>
<h2>The Culture</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bubble">
<div class="col-md-6 col-sm-12">
<img src="images/samba.jpg" alt="samba dancers">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/masqu.jpg" alt="masqueraders paroding the streets">
</div>
</div>
<h2>The Arts</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/art.jpg" alt="arts">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/creativity.jpg" alt="arts">
</div>
</div>
<h2>The River</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/ada_port.jpg" alt="yatch on ada">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/ada_beach.jpg" alt="ada beach">
</div>
</div>
</div>
</section>
<!-- THE MEDIA PARTNERSHIP SECTION -->
<section id="sponsor">
<div class="container">
<h2>Media Partners</h2>
<img class="sponsor_logo" src="images/ghone.png" alt="Gh one Tv">
<img class="sponsor_logo" src="images/4syte.png" alt="4syte tv">
<img class="sponsor_logo" src="images/gbafrica.png" alt="Gb Africa">
<img class="sponsor_logo" src="images/kobby.png" alt="kobby kyei">
<img class="sponsor_logo" src="images/sheldon.png" alt="Kwadwo sheldon">
<img class="sponsor_logo" src="images/ronnie.png" alt="Ronnie is everywhere">
<img class="sponsor_logo" src="images/sammykay.jpg" alt="sammy kay">
<img class="sponsor_logo" src="images/starr.png" alt="Starr fm">
</div>
</section>
<!-- EMBED GOOGLE MAP -->
<section id="map">
<div class="container">
<h3>Locate Us</h3>
<div class="gmap_canvas">
<iframe width="100%" height="468"
src="https://maps.google.com/maps?q=Camp%20tsatse%20resort&t=&z=15&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section class="about">
<div class="container text-center">
<!-- ABOUT CONTENT -->
<div class="about-content text-right">
<h2>About RiverFest</h2>
<p class="pt-4">RiverFest22” is an annual festival curated to celebrate and propagate the
socioeconomic and cultural affairs of Ghana. It aims at creating a networking and
entertaining environment for all our revelers. Our target is the energetic individual
who wants to experience nature whiles having fun.This maiden edition will be organized
in Ada Foah at the Camp Tsatse Resort. The Resort is located on the amazing banks of the
Volta River.</p>
<p class="pt-4">#RiverFest22, which is also themed “The Ada Calypso”, is a 3-day fun-packed
event, which is scheduled to take place from Friday, 16 to Sunday, 18 December 2022. The
festival is designed to have an action-packed programme of activities with exciting
exhibitions of talents and products from vendors.</p>
<p class="pt-4">
The event promises patrons with an amazing experience of art and creativity from the
local creative and art industry and a taste of calypso in the Ghanaian environment.
There will be a street carnival with samba dancers and masquerades from the town to the
event venue. There will also be a special canoe boat race on the river to help promote
the need to protect the water bodies as well as create an ecological awareness of the
place.
</p>
<p class="pt-4">
The festival is set for both residential and non-residential participation. Residential
patrons arrive on Friday and leave on Sunday. All non-residential revelers will be
welcome on Saturday for the full day event.
</p>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER SECTION WITH CONTACTS AND COPYRIGHT -->
<footer>
<div class="container-fluid p-0">
<div class="row text-left">
<!-- FIRST COLUMN -->
<div class="col-md-5 col-md-5">
<h2 class="text-light">Presented By</h2>
<img class="footer_image" src="images/riverfest.png" alt="RiverFest logo">
<p class="pt-4 text-muted">
All rights reserved © Copyright 2022 Developed by <span>WolfeTech Devs Inc.</span> | Powered by
<span>Lono Concepts</span>
</p>
</div>
<!-- SECOND COLUMN -->
<div class="col-md-5">
<h4 class="text-light">Tickets Available On sale</h4>
<a class="ticket-image" href="#"><img src="images/ticket.png" alt="Ticket"></a>
</div>
<!-- THIRD COLUMN -->
<div class="col-md-2">
<h4 class="text-light">Follow Us</h4>
<p class="text-muted">Let's go social</p>
<div class="column">
<i class="social-icon fab fa-facebook-f"></i>
<i class="social-icon fab fa-twitter"></i>
<i class="social-icon fab fa-instagram"></i>
<i class="social-icon fa-brands fa-tiktok"></i>
<i class="social-icon fa-brands fa-youtube"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- BOOTSTRAP JAVASCRIPT PLUGIN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<!-- JQUERY PLUGIN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Personal JAVASCRIPT -->
<script src="js/main.js"></script>
</body>
//CSS FILE --------------->
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header,
section {
overflow-x: hidden;
}
:root {
--Slackey: 'Slackey', cursive;
--Rock-Salt: 'Rock Salt', cursive;
--light-black: #2e2c2caf;
--bggradient: linear-gradient(to bottom, #FEB101, #FE7435);
--light-gray: rgba(255, 255, 255, 0.877);
}
header {
opacity: rgba(0, 0, 0, 0.2);
}
/* NAVBAR STYLES */
header .navbar a {
font-family: var(--Slackey);
font-size: 0.9em;
color: black;
}
.masthead {
background-size: cover;
min-height: 100vh;
position: relative;
color: white;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
header .nav-item:last-child {
padding-right: 5.5em;
}
header .nav-item {
padding: 1.5em;
}
header .navbar-brand {
padding-left: 3rem;
}
header .navbar .navbar-brand img {
width: 40%;
}
.ticket img{
width: 30%;
}
.ticket i {
padding-right: 0.1rem;
}
header .nav-link:hover {
color: whitesmoke;
}
header .nav-link {
transition: all 0.3s ease-in-out;
}
.ticket span {
font-family: var(--Slackey);
}
header .row .col-md-5 {
padding: 4.2vmin 1vmin;
}
header .row .col-md-6 {
padding: 22vmin 1vmin;
padding-bottom: 35vmin;
font-family: var(--Rock-Salt);
}
header .row .col-md-5 img {
width: 90%;
}
header .container .col-md-6 span {
padding: 1vmin;
letter-spacing: 4px;
font-size: 3.5vmin;
}
header .container .col-md-6 h1 {
font-size: 8vmin;
font-weight: bold;
padding: 0.1em 0em;
}
/*/*//*/*//* MAINPAGE SECTIONS *//*/*//*/*/
/* EXPERIENCE SECTION */
.experience{
background: linear-gradient(to bottom
white, #FE7435
);
}
.experience .container {
padding: 3% 0%;
}
.experience .col-md-6 img {
opacity: 0.8;
width: 100%;
border-radius: 0.2em;
border: 1px solid #000000;
}
.experience .container h2 {
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 3.5em 0em .5em;
}
/* MEDIA PARTNERS */
#sponsor h2 {
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
.sponsor_logo {
width: 9%;
margin: 30px 20px 50px;
}
#sponsor .container {
padding: 7% 0%;
}
/* ABOUT SECTION */
.about{
padding: 8vmin 0;
}
.about .container .about-content{
background: white;
border-radius: 3px;
text-align: left;
padding: 13vmin 5vmin 20vmin 10vmin;
box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.about .container .about-content h2{
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 1.5em 0em 1.2em;
text-align: center;
}
.about.about-content p{
font-size: 0.9em;
color: rgba(0, 0, 0, 0.5);
}
/* MAP */
.gmap_canvas {
overflow: hidden;
background: none !important;
}
#map .container h3{
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
/* FOOTER */
footer{
background: rgba(0, 0, 0, 0.815);
overflow-x: hidden;
padding: 14vmin 18vmin;
}
footer h2, h4{
font-family: var(--Slackey);
padding: 20px;
font-weight: bold;
font-size: 1.5rem;
}
footer .column i{
color: #dd2476
}
footer .column i+i{
padding: 0 0.5em;
}
footer p>span a{
text-decoration: none;
}
footer p>span a{
color: #FE7435;
}
/* STICKY CLASS */
.sticky{
position: fixed;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.815);
z-index: 9999;
transition: all 1.5s ease;
}
//MAIN.JS FILE --------------------------->
let navigationbar = $(".navbar");
$(window).scroll(function () {
let topOfSect = $(".experience").offset().top - window.innerHeight;
if ($(window).scrollTop() > topOfSect) {
navigationbar.addClass("sticky")
}
else {
navigationbar.removeClass("sticky")
}
});
Maybe you can try with position: sticky;

how to display different div on button click with JS?

I am trying to make a section where there are 2 cards, each one with a button and a small descriptive text.
What I am trying to achieve is that when I click on the button 3 things happen:
1 The button changes content, that goes from a "+" to a "-", but that is what worries me the least.
2 that a div is displayed with information corresponding to that card and that occupies 100 vw
and
3 that if there is a div displayed and the other button on another card is clicked, the first div disappears and the second appears and occupies the 100vw
-----What am I using? I am using HTML5, CSS, Vanilla Js, Bootstrap (mainly for the css)-----
This is what I want to achieve:
This is what I have achieved:
var jsaccordion = {
init : function (target) {
var headers = document.querySelectorAll("#" + target + " .accordion-btn");
if (headers.length > 0) { for (var head of headers) {
head.addEventListener("click", jsaccordion.select);
}}
},
select : function () {
this.classList.toggle("open");
}
};
window.addEventListener('load', function(){
jsaccordion.init("accordion-container");
});
.accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
.accordion-btn.open + .accordion-text{
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'>+</button>
<div class="accordion-text">
<p>
some specific and special information for the first div.</p>
</div>
</div>
</div>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'>+</button>
<div class="accordion-text">
<p>some specific and special information for the second div.</p>
</div>
</div>
</div>
</div>
Please help me, I don't know how to do it
It is a lot easier to do this in jQuery, but here is how I would approach it using Vanilla JS.
The idea is that to center something that is based on neither elements, but moreso the browser window, is to use a shared container (outside of either element) to print to. This takes the guess work out of positioning as well.
On clicking the button, the information should be copied from the accordion, and printed to the target container. Also on that click, check if the other is active to remove the active class. Adding classes to the active container to change the button symbol + and -, using CSS pseudo-elements.
Keeping the arrows inside the accordion containers will also make it easier to position them according to the HTML element it is in.
Sidenote: You should only use an HTML ID once on the entire page, otherwise use a class for multiple instances. This is in reference to #accordion-container.
var sharedCont = document.getElementById('shared-container');
var allCont = document.querySelectorAll('#accordion-container');
var jsaccordion = {
init : function (target) {
var headers = document.querySelectorAll("#" + target + " .accordion-btn");
if (headers.length > 0) { for (var head of headers) {
head.addEventListener("click", jsaccordion.select);
}}
},
select : function () {
var targ1 = this.parentElement.closest('#accordion-container'), // find parent
targText = targ1.querySelector('.accordion-text').innerHTML; // grab text for shared container
if( targ1.classList.contains('active') ){
// when clicked, if active, reset them all
targ1.classList.remove('active');
sharedCont.innerHTML = '';
sharedCont.classList.remove('active');
} else {
// when clicked, reset them all, then activate
for (let i = 0; i < allCont.length; i++) {
var el = allCont[i];
el.classList.remove('active');
}
targ1.classList.add('active');
sharedCont.innerHTML = targText;
sharedCont.classList.add('active');
}
}
};
window.addEventListener('load', function(){
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
overflow: hidden;
}
#accordion-container {
position: relative;
}
#accordion-container button::before {
content: '+' !important;
}
#accordion-container.active button::before {
content: '-' !important;
}
#accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
#accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
/* .accordion-btn.open + .accordion-text{
display: block;
} */
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
display: none;
}
#shared-container.active {
display: block;
text-align: center;
}
#shared-container p {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Testing testing testing</h1>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
</div>
</div>
</div>
</div>
<div id="shared-container"></div>
</body>
</html>
Its very simple you can assign id or class to those div, you want to hide or show then use javascript or jquery method to show and hide on the specific event click.
A small snippet of working example. It can be optimized and made dynamic.
Also as Owais suggested, we can simply use .show() and .hide() instead of .addClass() and .removeClass()
var firstDiv = $("#div-1-1");
var secondDiv = $("#div-1-2");
$(document).ready(function() {
//On Click of 1st Div, we're also toggling the 2nd DIV in case if it was open
// Can handle in a better way as well
// Same goes for the 2nd div
firstDiv.click(() => {
$(".dc-11").addClass("open");
$(".dc-12").removeClass("open");
});
secondDiv.click(() => {
$(".dc-12").addClass("open");
$(".dc-11").removeClass("open");
});
});
.outer-block {
width: 200px;
margin: auto;
}
.block {
display: flex;
}
.block>div {
flex: 1;
text-align: center;
border: 2px solid red;
height: 80px;
}
.open {
display: block !important;
}
.dc-11 {
background: red;
display: none;
}
.dc-12 {
background: orange;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class='outer-block'>
<div class="block">
<div>
<p>First</p>
<button id="div-1-1">+</button>
</div>
<div>
<p>Second</p>
<button id="div-1-2">+</button>
</div>
</div>
<div id="div-1-1-content" class="dc-11">First Div Content will be displayed here</div>
<div id="div-1-2-content" class="dc-12">Second Div Content will be displayed here</div>
</div>
</div>

Have different <p> tag value show up in a separate div when you click each separate section

long time listener, first time caller. I am trying my hand at making an NHL draft chart, as I do some player evaluation and want a fancy looking place to put it all/I'm having a bit of fun while I learn SASS for the first time (it rocks, btw).
Codepen: https://codepen.io/trjwaugh/pen/abONgLm
$desktop: 1000px;
$padding: 15px;
$borders: 15px;
$margin: 20px;
$logo-clip: polygon(70% 0, 100% 0%, 75% 100%, 40% 100%);
$colors: ( ggold: #FFB81C, gold-light: lighten(#FFB81C, 40%), //buf, cbj, edm, fla, nsh
bblue: #002654, blue-light: lighten(#002654, 40%), ragsblue: #0038A8, ragsblue-light: lighten(#0038A8, 40%), leafblue: #00205B, leafblue-light: lighten(#00205B, 40%), rred: #C8102E, red-light: lighten(#C8102E, 40%), oorange: #F74902, orange-light: lighten(#F74902, 40%), starsgreen: #006847, starsgreen-light: lighten(#006847, 40%), yotesred: #8C2633, yotesred-light: lighten(#8C2633, 40%), burg: #6F263D, burg-light: ligthen(#6F263D, 40%), black: black);
#function color($color-name) {
#return map-get($map: $colors, $key: $color-name);
}
#mixin desktop {
#media (max-width: #{$desktop}) {
#content;
}
}
body,
html {
height: 100%;
font-family: 'Montserrat', sans-serif;
}
img {
margin: 0;
display: block;
width: 78px;
height: 80px;
float: right;
}
body {
margin: 0;
#bg {
clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
#include desktop {
//suff to change re: responsiveness
}
}
}
main {
#container {
white-space: nowrap;
text-align: center;
}
section#sticky-main {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
width: 100%;
margin: 1em auto;
padding: $padding;
border-radius: $borders;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
}
section#card {
margin: 1em auto;
float: right;
padding: $padding;
border-radius: $borders;
width: 100%;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
-webkit-transition: .5s ease-in;
-moz-transition: .5s ease-in;
-o-transition: .5s ease-in;
transition: .5s ease-in;
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
li {
strong {
display: inline-block;
margin-left: max(40px);
margin-top: 10px;
}
img {
display: block;
width: 138px;
height: 130px;
float: right;
#include desktop {
//suff to change re: responsiveness
width: 100px;
height: 92px;
}
}
}
}
#report.one {
margin: 1em auto;
float: right;
padding: $padding;
margin-right: 20px;
border-radius: $borders;
background-size: 100% 100%, 0% 100%;
box-shadow: 0 10px 30px rgba(0, 0, 0, $alpha: 0.2);
width: 90%;
background-color: white !important;
color: black !important;
}
#report.one:hover {
display: block;
}
}
section#card.gold:hover {
background-color: color(ggold);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
section#card.blue:hover {
background-color: color(bblue);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
section#card.red:hover {
background-color: color(rred);
color: white;
background-size: 80.1% 10%, 20% 10%;
box-shadow: 0 10px 30px rgba(100, 0, 0, $alpha: 0.2);
}
}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/main.css">
<script src="https://kit.fontawesome.com/9969435508.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main>
<div class="container">
<div class="row">
<div class="col-sm-4">
<section id="sticky-main">
<div id="content"></div>
</section>
</div>
<div class="col-sm-8">
<section onmouseover="hover()" id="card" class="gold">
<ul>
<li>
<img src="logos/anaheim-ducks.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
</section>
<section onclick="showReport()" id="card" class="red">
<ul>
<li>
<img src="logos/chicago-blackhawks-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report-two" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
<section onclick="showReport()" id="card" class="blue">
<ul>
<li>
<img src="logos/columbus -bluejackets-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
<section onclick="showReport()" id="card" class="blue">
<ul>
<li>
<img src="logos/columbus -bluejackets-logo.png">
</li>
<br>
<li>
<strong>Bigname McLongnamington III <i style ="color: green;" class="far fa-arrow-alt-circle-up"></i></strong>
</li>
<li>
<strong>Kitchener Rangers (OHL)</strong>
</li>
<li>
<strong>height weight</strong>
</li>
</ul>
<div id="report" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan est massa, quis hendrerit augue volutpat sed. Nam sit amet bibendum enim, eget suscipit odio. Donec risus odio, bibendum eget ipsum eget, bibendum congue est. Sed
maximus lorem sit amet nibh condimentum viverra. Vestibulum sed quam fringilla, rhoncus eros et, imperdiet tellus. In nec nibh sollicitudin, pharetra purus vitae, consectetur mi. Curabitur laoreet finibus placerat.</p>
</div>
</section>
</div>
</div>
</div>
</main>
<!-- Optional JavaScript -->
<script src="script.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
If you look at the Codepen, you can see i have a bunch of sections, all will act as a card that a players draft info will appear, minus a paragraph blurb about them. There are a few things ive tried in terms of accomplishing my goal but essentially I want to be able to click on a players <section onclick="showReport()" id="card"... and have that players paragraph blurb appear in the sticky div on the left, changing based on which section card you click on. right now I have the players paragraph in a p tag within the section just for now, but im open to anything. I have a JS function on click in there for now but what I have tried so far required me to write a seperate hide() for each section (will be 31 total). Im looking for a method that will also allow me to only change the bio info and never have to adjust any code when I want to make edits to my draft chart. I hope I explained myself well enough, please tell me if I need to clarify.
Any help would be highly appreciated!
First, add this to each onclick on sections to get the element itself anytime you click on them.
...
<section onclick="showReport(this)" id="card" class="blue">
...
Then, you can use this (now turned into el variable) to find the text and put into the #content element.
function showReport(el) {
$('#content').text($(el).find('p').text());
}

Trying to control element visibility activated by JQUERY functionality at different HTML breakpoints

I have cards that I want to toggle visibility when the page is narrower than 750px. I have that part figured out. What I need help controlling (either with js or css) is displaying block on the elements that were hidden at < than 750 when I expand the page > than 750 automatically. I am attaching the code and jsfiddle to make sense of this.
Here is the jsfiddle
https://jsfiddle.net/galnova/bjz6pgyp/16/
$('[id^="coll-"]').click(function(e) {
e.preventDefault();
if ($(window).width() < 750) {
$("." + this.id).stop().slideToggle();
return false;
}
});
//I also tried this
I tried this but it didn't work.
$('[id^="coll-"]').click(function(e){
e.preventDefault();
if ($(window).width() < 750) {
$("." + this.id).stop().slideToggle();
return false;
} else if ($(window).width() > 750) {
$(".coll-1, .coll-2, .coll-3").show();
}
});
.coll-1,
.coll-2,
.coll-3 {
display: block;
background: pink;
}
#coll-1,
#coll-2,
#coll-3 {
display: none;
}
.ful_cwrap {
display: block;
top: 30px;
position: relative;
width: 100%;
}
.cwrap {
padding-left: 5px!important;
padding-right: 5px!important;
}
hr {
width: 100%;
float: left;
}
/* .card > hr { margin: 0px 0 10px 0; } */
dl.hpair {
float: left;
overflow: hidden;
margin-bottom: 0px;
}
.hpair dt,
.hpair dd {
float: left;
display: inline-block;
}
.hpair dt {
margin-right: 5px;
}
.hpair dd {
margin-right: 10px;
}
.card {
float: left;
width: 100%;
border: solid 1px #000;
padding: 0 10px 10px 10px;
margin-bottom: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
/*background: #eee;*/
}
span.card-title {
font-size: 1.4em;
}
.card-title {
margin-top: 0;
margin-bottom: .5em;
padding-top: 10px;
text-align: center;
/*padding-bottom: 10px;*/
font-weight: 700;
font-size: 1.143em;
line-height: 20px;
}
.card-subtitle {
margin-top: 0;
margin-bottom: 0;
}
#media only screen and (max-width: 767px) {
.coll-1,
.coll-2,
.coll-3 {
display: none;
}
#coll-1,
#coll-2,
#coll-3 {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.2.4/css/bootstrap.min.css" />
<div class="ful_cwrap">
<div class="col-xs-12 col-sm-2 cwrap">
<div class="card card-block">
<h4>
Tester
</h4>
<div class="col-xs-12 nill">
<dl class="hpair">
<dt>Cash: </dt>
<dd>Plenty Dollars</dd>
</dl>
<dl class="hpair">
<dt>Names: </dt>
<dd>Alot</dd>
</dl>
<dl class="hpair">
<dt>Avg. Time: </dt>
<dd>30 hours</dd>
</dl>
</div>
<hr/>
<div class="col-xs-12 nill">
<p class="card-text">
<span class="coll-1">
Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
</span>
</p>
</div>
<div class="col-xs-12 nill mar_bott">
<a id="coll-1" href="" class="">Show more <span class="indicator glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
<!-- -->
<div class="col-xs-12 col-sm-2 cwrap">
<div class="card card-block">
<h4>
Tester
</h4>
<div class="col-xs-12 nill">
<dl class="hpair">
<dt>Cash: </dt>
<dd>Plenty Dollars</dd>
</dl>
<dl class="hpair">
<dt>Names: </dt>
<dd>Alot</dd>
</dl>
<dl class="hpair">
<dt>Avg. Time: </dt>
<dd>30 hours</dd>
</dl>
</div>
<hr/>
<div class="col-xs-12 nill">
<p class="card-text">
<span class="coll-2">
Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
</span>
</p>
</div>
<div class="col-xs-12 nill mar_bott">
<a id="coll-2" href="" class="">Show more <span class="indicator glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
<!-- -->
<div class="col-xs-12 col-sm-2 cwrap">
<div class="card card-block">
<h4>
Tester
</h4>
<div class="col-xs-12 nill">
<dl class="hpair">
<dt>Cash: </dt>
<dd>Plenty Dollars</dd>
</dl>
<dl class="hpair">
<dt>Names: </dt>
<dd>Alot</dd>
</dl>
<dl class="hpair">
<dt>Avg. Time: </dt>
<dd>30 hours</dd>
</dl>
</div>
<hr/>
<div class="col-xs-12 nill">
<p class="card-text">
<span class="coll-3">
Maecenas mattis purus nunc, et molestie risus porttitor a. Phasellus ex lacus, viverra sed tempus at. Vivamus congue fringilla fringilla. Pit amet semper lacus.
</span>
</p>
</div>
<div class="col-xs-12 nill mar_bott">
<a id="coll-3" href="" class="">Show more <span class="indicator glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
<!-- -->
</div>
I added an image to help explain.
https://ibb.co/jj99w6
Does it have to be exactly 750px? if i understand you correctly bootstrap has classes for the behaviour you want to achieve.
However, be warned this feature was removed in bootstrap 4, however i've seen you're using bootstrap 3 so it will
hidden-xs = hidden when below 768px
hidden-sm = hidden between 768px and 992px
hidden-md = hidden between 992px and 1200px
hidden-lg = hidden when above 1200px
visible-xs-block, visible-xs-inline, visible-xs-inline-block
which will set the element to be visible in the ranges i've listed above.
There is also a really nice table and explanation on the bootstrap docs

Responsive Carousel issue

Can someone explain why my Responsive Carousel isn't working?
Here's my demo: https://jsfiddle.net/9b9mt0ts/
// When the DOM is ready, run this function
$(document).ready(function() {
//Set the carousel options
$('#quote-carousel').carousel({
pause: true,
interval: 4000,
});
});
/* carousel */
#quote-carousel
{
padding: 0 10px 30px 10px;
margin-top: 30px;
}
/* Control buttons */
#quote-carousel .carousel-control
{
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left
{
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right
{
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li
{
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active
{
background: #333333;
}
#quote-carousel img
{
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#quote-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
}
/* Small devices (tablets, up to 768px) */
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class='col-md-offset-2 col-md-8 text-center'>
<h2>Responsive Quote Carousel BS3</h2>
</div>
</div>
<div class='row'>
<div class='col-md-offset-2 col-md-8'>
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="http://www.reactiongifs.com/r/overbite.gif" style="width: 100px;height:100px;">
<!--<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width: 100px;height:100px;">-->
</div>
<div class="col-sm-9">
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mijustin/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor nec lacus ut tempor. Mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/keizgoesboom/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum elit in arcu blandit, eget pretium nisl accumsan. Sed ultricies commodo tortor, eu pretium mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
Here the console error.
Mixed Content:
The page at 'https://fiddle.jshell.net/9b9mt0ts/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.10.2.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution: Access with "http" instead "https"
Codepen doesn't show an error.
Please add the Carousel js file in header.
http://sorgalla.com/jcarousel/dist/jquery.jcarousel.min.js
Also check http protocol. If your site is not in https, then use all external link as http

Categories