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
Related
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;
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...
This is my test page and I want when the page is loaded everything is hidden. When I click on "About" text is fade in using fadeToggle(); but when I click on "My work" another text is fade in but under the previous one. I want fade it over the previous one. Can u help me?
My code:
<script>
$(document).ready(function(){
$(".thumbnail").hide();
$(".work").click(function(){
$(".thumbnail").fadeToggle('slow');
});
});
$(document).ready(function(){
$(".person").hide();
$(".about").click(function(){
$(".person").fadeToggle('slow');
});
});
</script>
Try this.
$(document).ready(function(){
$(".thumbnail").hide();
$(".person").hide();
$(".work").click(function(){
$(".person").hide();
$(".thumbnail").fadeToggle('slow');
});
$(".about").click(function(){
$(".thumbnail").hide();
$(".person").fadeToggle('slow');
});
});
Updated based on Matthew's comment
Demo here
This is a common problem:
multiple items to display but one of them showing at a time
simple solution is:
hide all elements
show what you want to see
in this way, you cover all possible solutions, even display nothing, where you skip second phase
in your case:
function hideAll(){
$(".thumbnail").hide();
$(".person").hide();
// ...... others ......
}
$(document).ready(function(){
$(".work").click(function(){
hideAll();
$(".thumbnail").fadeToggle('slow');
});
$(".about").click(function(){
hideAll();
$(".person").fadeToggle('slow');
});
hideAll();
});
This is something very easy to complete, its best to use the same click event names with the divs you want to open so it can be modular.
There are some slight amendments to your HTML as well as a big change in the JS but it will work with as many sections as you like now without having to continuously add new click() functions.
$(document).ready(function() {
$('section').hide();
$(".btn").click(function() {
$('section').fadeOut('1000');
$('section#'+$(this).attr('id')).delay('1000').fadeIn();
});
});
/* CSS Document
html {
background: url(green.jpg) no-repeat center center fixed;
background-size: cover;
}
*/
body {
font-family: 'Candara', 'Open Sans', 'sans-serif';
}
/* css for the shiny buttons */
.btn {
cursor: pointer;
margin: 10px;
text-decoration: none;
padding: 10px;
font-size: 14px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
display: inline-block;
}
.btn:hover {
cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto;
}
.contact {
color: #000;
}
.contact:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
.about {
color: #000;
}
.about:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
.work {
color: #000;
}
.work:hover {
background-color: #ecf0f1;
color: #000;
opacity: 0.5;
filter: Alpha(opacity=50);
}
}
.buttons {
padding-top: 30px;
text-align: center;
position: absolute;
top: 50px;
left: 100px;
}
.title,
.subtitle {
font-family: 'Wire one';
font-weight: normal;
font-size: 5em;
margin-bottom: 15px;
text-align: center;
}
.subtitle {
line-height: .9em;
font-size: 5.5em;
margin-top: 0;
margin-bottom: 40px;
}
.tagline {
font-size: 1.4em;
line-height: 1.3em;
font-weight: normal;
text-align: center;
}
.thumbnail {
background-color: rgba(255, 255, 255, .2);
border: 0 none;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.thumbnail .caption {
color: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
<a class="btn" id="about">About</a>
<a class="btn" id="work">My Work</a>
<a class="btn" id="contact">Contact</a>
</div>
<!-- Main (Home) section -->
<section class="section" id="about">
<div class="container">
<div class="person" style="display: block;">
<div class="row">
<div class="col-md-10 col-lg-10 col-md-offset-1 col-lg-offset-1 text-center">
<!-- Site Title, your name, HELLO msg, etc. -->
<h1 class="title">Welcome!</h1>
<h2 class="subtitle">My name is Daniel Adamek</h2>
<!-- Short introductory (optional) -->
<h3 class="tagline">
I am 23 years old IT enthusiast located in Zlin, Czech Republic.<br>
Currently, I am looking for any kind of job in IT field.<br>
Please, check out my work and feel free to contact me :)
</h3>
<!-- Nice place to describe your site in a sentence or two -->
</div>
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
</section>
<!-- Third (Works) section -->
<section class="section" id="work">
<div class="container">
<div class="thumbnail" style="display: block;">
<h2 class="text-center title">More Themes</h2>
<p class="lead text-center">
Huge thank you to all people who publish
<br>their photos at Unsplash, thank you guys!
</p>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4 col-sm-offset-2">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail" style="display: block;">
<img src="" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque doloribus enim vitae nam cupiditate eius at explicabo eaque facere iste.</p>
<p>Button Button
</p>
</div>
</div>
</div>
</div>
</div>
</section>
If you do want to keep your HTML the exact same, try this out
$(document).ready(function(){
$(".thumbnail").hide();
$(".person").hide();
$(".work").click(function(){
$(".person").fadeOut('500');
$(".thumbnail").delay('500').fadeIn('slow');
});
$(".about").click(function(){
$(".thumbnail").fadeOut('500');
$(".person").delay('500').fadeIn('slow');
});
});
function hideAll()
{
$(".hideable").hide();
}
$(document).ready(function(){
hideAll(); // great idea. First hide all then show the correct one.
$(".button").click(function(){
hideAll();
if ($(this).hasClass("work"))
{
$(".thumbnail").fadeToggle('slow');
}
else if ($(this).hasClass("about"))
{
$(".person").fadeToggle('slow');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail hideable">thumbnail</div>
<div class="person hideable">person</div>
<button class="work button">Work</button>
<button class="about button">About</button>
This example should you give you a start. It attaches a click event to the buttons using the .button class selector. Then it checks if the button has another class and performs the appropiate action.
Your question is not reliant upon jQuery - it is reliant upon CSS and styling those two texts on top of each other. Then you can fade in/out.
What I would suggest trying is wrapping both text inside one div and working with position properties.
ie
HTML
<div class="wrapper">
<div class="thubmnail">Some Thumbnail</div>
<div class="person">Some Person</div>
</div>
CSS
.wrapper {
position: relative;
}
.wrapper div {
position: absolute; //This will position both divs one on top of the other
}
I am new developer and trying to add a Bootstrap carousel to my rails app.
This is the carousel that I am trying to add in particular:
http://arturssmirnovs.com/blog/bootstrap-carousel-100-height-and-width/
So far i've only gotten the white left and right pointers to show up from the carousel (Ex: the navigation pointers that look like this < >)
Here's my html code, that i snabbed from the link above, I inserted this portion in the about.html.erb page, which is the static page that I want the carousel to appear in like this
views/layouts/staticpages/about.html.erb:
<div class="aboutslide">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item bg bg1 active">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item bg bg2">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item bg bg1">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
Here is my app/assets/stylesheets/carousel.css file:
html, body {
height:100%;
margin:0;
padding:0;
}
.carousel, .item, .active {
height:100%;
}
.carousel-inner {
height:100%;
}
.carousel {
margin-bottom: 60px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
background-color: #777;
}
.carousel .carousel-inner .bg {
background-repeat:no-repeat;
background-size:cover;
}
.carousel .carousel-inner .bg1 {
background-image:url(bg1.jpg);
background-position: center top;
}
.carousel .carousel-inner .bg2 {
background-image:url(bg2.jpg);
background-position: center center;
}
.carousel .carousel-inner .bg3 {
background-image:url(bg3.jpg);
background-position: center bottom;
}
#media (min-width: 768px) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
and there is the docs.js file that i have inserted in apps/assets/javascripts/docs.js. I can't post it because the file is too big.
The issue with the button images is probably just that you need to add the images to your app/assets/images directory and change the css use the Rails asset_path helper:
.carousel .carousel-inner .bg {
background-repeat:no-repeat;
background-size:cover;
}
.carousel .carousel-inner .bg1 {
background-image:url(<%= assets_path 'bg1.jpg' %>);
background-position: center top;
}
.carousel .carousel-inner .bg2 {
background-image:url(<%= assets_path 'bg2.jpg' %>);
background-position: center center;
}
.carousel .carousel-inner .bg3 {
background-image:url(<%= assets_path 'bg3.jpg' %>);
background-position: center bottom;
}
This uses ERB (embedded ruby) to add the correct url in the stylesheet. You can also just change the extension of the file to '.css.scss' and use the sass-rails helpers.
.carousel.carousel-inner {
.bg {
background-repeat:no-repeat;
background-size:cover;
}
.bg1 {
background-image:url( image-url('bg1.jpg') );
background-position: center top;
}
.bg2 {
background-image:url( image-url('bg2.jpg') );
background-position: center center;
}
.bg3 {
background-image:url( image-url('bg3.jpg') );
background-position: center bottom;
}
}
So I'm trying to implement something like this:
http://bootsnipp.com/snippets/featured/carousel-static-headline-caption
Where there is text with a carousel as a background. currently when I scroll through my carousel the text scrolls as well. Here's the carousel code I'm working with.
HTML:
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('image');"></div>
<div class="carousel-caption">
<h1>Text that I would like to stay</h1>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('image');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('image');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
CSS:
html,
body {
height: 100%;
}
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-caption {
padding-bottom: 475px;
}
/* Background images are set within the HTML using inline CSS, not here */
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
opacity: 0.9;
top: 50px
}
footer {
margin: 50px 0;
}
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
opacity: 0.6;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.services-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
Your HTML should be something like this
HTML
<div class="col-md-12">
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic" class="active"></li>
<li data-slide-to="2" data-target="#carousel-example-generic" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="First slide" src="http://placehold.it/1200x500/3498db/2980b9">
<div class="carousel-caption">
<h3>
First slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item active">
<img alt="Second slide" src="http://placehold.it/1200x500/9b59b6/8e44ad">
<div class="carousel-caption">
<h3>
Second slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://placehold.it/1200x500/34495e/2c3e50">
<div class="carousel-caption">
<h3>
Third slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a data-slide="prev" href="#carousel-example-generic" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span></a><a data-slide="next" href="#carousel-example-generic" class="right carousel-control"><span class="glyphicon glyphicon-chevron-right">
</span></a>
</div>
<div class="main-text hidden-xs">
<div class="col-md-12 text-center">
<h1>
Static Headline And Content</h1>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<div class="">
LoginRegistration</div>
</div>
</div>
</div>
CSS code For main content
CSS
.main-text {
color: #fff;
position: absolute;
top: 50px;
width: 96.6667%;
}
Although the link in the question provides a nice solution if we want a fixed text and also scrolling text at the same time, in most cases we only need either fixed or scrolling. Making the text fixed in Bootstrap is as simple as taking the <div class="carousel-caption"> outside the <div class="item"> and placing it directly under the <div class="carousel-inner">. No need for any additional CSS or HTML. Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x500/3498db/2980b9" alt="First slide">
</div>
<div class="item">
<img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
</div>
<div class="item">
<img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
</div>
<div class="carousel-caption">
<h3>Static Headline And Content</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
The carousel is designed so we place scrolling content inside <div class="item"> and fixed content directly inside <div class="carousel-inner">. We can provide both, but they will overlap each other and we need additional CSS to move them apart. But most cases don't need both at the same time.
All you have to do is add this html after the carousel code
<div class="main-text">
<div class="col-md-12 text-center">
<h1>
Static Headline And Content</h1>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<div class="">
<a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">Login</a><a class="btn btn-clear btn-sm btn-min-block"
href="http://www.jquery2dotnet.com/">Registration</a></div>
</div>
</div>
An add this css
.main-text {
position: absolute;
top: 50px;
width: 96.66666666666666%;
color: #FFF;
}
(Demo)