Jssor slider not responsive - slider
My slider is not responsive. It does not get re-sized when I re-scale my browser. I want the slider to bo responsive even if I use in tablet or mobile.
The slider code is below the navigation.
<!DOCTYPE html"">
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>Vijay Hemant Finance & Estates Limited</title>
<link rel="shortcut icon" href="" />
<link rel='stylesheet' id='page-css' href='css/bootstrap-shortcodes.css' type='text/css' media='all' />
<link rel='stylesheet' id='page-css' href='css/settings.css' type='text/css' media='all' />
<style type="text/css">.tp-caption a{color:#ff7302;text-shadow:none;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out}.tp-caption a:hover{color:#ffa902}</style>
</style>
<link rel='stylesheet' id='page-css' href='css/shortcodes.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css-css' href='css/bootstrap.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-responsive-css-css' href='css/bootstrap-responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='main_style-css' href='css/style.css' type='text/css' media='all' />
<!--
<link rel='stylesheet' id='Merriweather-css' href='http://fonts.googleapis.com/css?family=Merriweather%3A400%2C700%2C900%2C300&ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='fontawesome-css' href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css?ver=3.5.1' type='text/css' media='all' />
<link rel='stylesheet' id='google_fonts-css' href='http://fonts.googleapis.com/css?family&ver=3.5.1' type='text/css' media='all' /> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.core.js"></script>
<script type="text/javascript" src="js/jssor.utils.js"></script>
<script type="text/javascript" src="js/jssor.slider.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url(''); background-repeat: repeat; background-position: top left; background-attachment: fixed; }
</style>
<link rel='stylesheet' id='page-css' href='css/page.css' type='text/css' media='all' />
<link rel='stylesheet' id='slider-css' href='css/slider.css' type='text/css' media='all' />
</head>
<body class="home blog custom-background">
<div id="container">
<div class="container-narrow">
<!-- Header -->
<header>
<div class="top">
<div class="container">
<div class="row-fluid">
<div class="span12">
<!-- Logo -->
<div class="logo" style="margin-top:20px;margin-bottom:20px;margin-left:0px;">
<img src="img/logo4.png" alt='Vijay Hemant Finance & Estates Limited' title="Vijay Hemant Finance & Estates Limited"/>
</div>
<!-- Site description -->
<h2 class="site_heading">Handling Money........ With Devotion And Care</h2>
<!-- Contact -->
<div class="header_contact rounded">
<div class="phone"><img src="img/phoneicon.png" alt="phone icon" /><span>044-30228855 </span></div>
<div class="email"><img src="img/mailicon.png" alt="mail icon" /><span>office#vijayhemant.in</span></div>
</div>
</div>
</div>
</div>
</div>
<div> <img src="img/separator.png" style="margin-top: -60px; width:755px;
margin-left: 390px; "></div>
<!-- Menu Navigation -->
<div class="menu_wrap" style="position:relative; top:-60px;">
<div class="container">
<div class="navbar navbar-inverse navbar-relative-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
</a>
<div class="nav-collapse collapse navbar-responsive-collapse" style="height:auto;">
<ul id="menu-menu" class="nav">
<li id="menu-item-284" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home active menu-item-284"><a title="Home" href="index.html">Home</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9 dropdown-submenu"><a title="Blog" href="commercial-vehicles.html" data-toggle="dropdown" data-target="#" class="dropdown-toggle">Business<span class="caret"></span></a>
<ul class="dropdown-menu ">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a title="Commercial Vehicles" href="commercial-vehicles.html">Commercial Vehicles</a></li>
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="Car / LMV" href="car-finance.html">Car Finance</a></li>
</ul>
</li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="About Us" href="about-us.html">About Us</a></li>
</li>
<li id="menu-item-275" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-275"><a title="CSR" href="csr.html">CSR</a></li>
</li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Investment" href="investment.html">Investment</a></li>
<!-- <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85 dropdown-submenu"><a title="Shortcodes" href="" data-toggle="dropdown" data-target="#" class="dropdown-toggle">services<span class="caret"></span></a>
<ul class="dropdown-menu ">
<li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a title="Blog Fullwidth" href="">Fixed Deposits</a></li>
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="Blog Sidebar Left" href="">Recurring Deposits</a></li>
<li id="menu-item-149" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-149"><a title="Standard" href="">Annual Reports</a></li>
</ul>
</li> -->
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Contact Us" href="contact-us.html">Contact Us</a></li>
<li id="menu-item-594" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-594"><a title="Downloads" href="download.html">Downloads</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<section style="margin-top:-75px;">
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider2_container" style="position: relative; width: 600px;
height: 350px;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div class="sliderrs" u="slides" style="cursor: move; position: absolute; left: 150px; top: 0px; width: 1000px; height: 372px;
overflow: hidden;">
<div>
<a u=image href="#"><img src="img/slider1.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="img/slider2.jpg" /></a>
</div>
<div>
<a u=image href="#"><img src="img/slider3.jpg" /></a>
</div>
</div>
<!-- Bullet Navigator Skin Begin -->
<!-- jssor slider bullet navigator skin 01 -->
<!-- bullet navigator container -->
<div u="navigator" class="jssorb01" style="position: absolute; bottom: 30px; left: 620px;">
<!-- bullet navigator item prototype -->
<div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
</div>
<!-- Bullet Navigator Skin End -->
<!-- Arrow Navigator Skin Begin -->
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 123px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">slideshow</a>
</div>
<!-- Jssor Slider End -->
</section>
<!-- SLIDER ends -->
<!-- CONTENT STARTS -->
<section style="margin-top: 10px;">
<div class="container">
<!--part-1-->
<div class="row-fluid part_home">
<!-- SERVICES LEFT -->
<section>
<div class="span4 ca-menu left">
<div class="row-fluid">
<style type="text/css">
.ca-menu .ca-item270:hover {background-color: #FFFFFF}
.ca-menu.left .ca-item:hover a.more_link span, .ca-menu.left .ca-item:hover h1, .ca-menu.left .ca-item:hover p{color: #515151 !important;}
.ca-menu .ca-item270 {background-color: #D25555}
.ca-item270 .ca-main {color: #FFFFFF;}
.ca-item270 .ca-sub {color: #FFFFFF}
.ca-item270 .more_link {color: #FFFFFF;}
</style>
<div class="ca-item ca-item270 rounded">
<div class="ca-content">
<a href="investment.html">
<h2 class="ca-main">Secure Future</h2>
<p> </p>
<p align="justify" class="ca-sub">Become an entrepreneur and grow with the booming and extremely lucrative logistic sector. We are serving this segment since 1985 and have turned many dreams into reality.</p>
</a>
</div>
</div>
</div>
</div>
<!-- SERVICES CENTER -->
<div class="span4 ca-menu center">
<div class="row-fluid">
<style type="text/css">
.ca-menu .ca-item277:hover {background-color: #FFFFFF}
.ca-menu.center .ca-item:hover a.more_link span, .ca-menu.center .ca-item:hover h1, .ca-menu.center .ca-item:hover p{color: #515151 !important;}
.ca-menu .ca-item277 {background-color: #515151}
.ca-item277 .ca-main {color: #FFFFFF;}
.ca-item277 .ca-sub {color: #FFFFFF}
.ca-item277 .more_link {color: #FFFFFF;}
</style>
<div class="ca-item ca-item277 rounded">
<div class="ca-content">
<a href="about-us.html">
<h2 class="ca-main">Strong Values</h2>
<p> </p>
<p align="justify" class="ca-sub">We value people, culture, tradition, and respect honesty, truth, integrity and experience.</p>
</a>
</div>
</div>
</div>
</div><!-- span4 -->
<!-- SERVICES RIGHT -->
<div class="span4 ca-menu right">
<div class="row-fluid">
<style type="text/css">
.ca-menu .ca-item279:hover {background-color: #FFFFFF}
.ca-menu.right .ca-item:hover a.more_link span, .ca-menu.right .ca-item:hover h1, .ca-menu.right .ca-item:hover p{color: #103042 !important;}
.ca-menu .ca-item279 {background-color: #236890}
.ca-item279 .ca-main {color: #FFFFFF;}
.ca-item279 .ca-sub {color: #FFFFFF}
.ca-item279 .more_link {color: #FFFFFF;}
</style>
<div class="ca-item ca-item279 rounded">
<a href="commercial-vehicles.html">
<div class="ca-content">
<a href="commercial-vehicles.html">
<h2 class="ca-main"> Dedicated Services </h2>
<p> </p>
<p align="justify" class="ca-sub"> We have a bunch of loyal associates who have grown with the company and will partner you in all your needs.</p>
</a>
</a>
</div>
</div>
</div>
</div><!-- span4 -->
<div style="clear:both;"> </div>
<!-- NEWS RIGHT -->
</div>
<!--part-1-->
<!--part-2-->
<!--part-2-->
<!--part-3-->
</div><!-- .container -->
<!--part-3-->
</section>
<div style="clear:both;"> </div><div style="clear:both;"> </div>
<section class="homecon">
<div class="container">
<div class="row-fluid">
<ul>
<p align="justify">
<li>
<div align="justify"> Vijay Hemant Finance & Estates limited incorporated in the year 1985, listed on the Madras stock exchange serves the small and medium transport sector segment in Tamilnadu.</div>
<li>
<div align="justify"> We provide loans from 1 year to 3 years upto 70% value of the vehicle and upto 10 year old vehicle.
</div>
<li>
<div align="justify"> We have branches in Ramnad, Madurai, Coimbatore, Trichy & our head office is in Chennai.
</div>
<li>
<div align="justify"> A useful life of a vehicle is 15 years and we fund this segment.
</div>
<li>
<div align="justify"> We pride ourselves in last mile connectivity with the transport sector throughout Tamilnadu with our loyal staff, committed service and rare dedication.
</div>
<li>
<div align="justify">Attractive terms for the deposits and service through our Chennai office with monthly, quarterly and annual interest options.
</p>
</div>
</ul>
</div>
</div>
<br><br><br><br>
</section>
<!-- Div for styling purpose only -->
<div class="blank_separator"></div>
<!--prefooter-->
<section>
<div class="row-fluid">
<img src="img/shadow-divider.png" class="shadow_divider">
</div>
<div class="container">
<div class="row-fluid twitter_wrap">
<div class="span9" style="">
<p> Vijay Hemant Finance & Estates Limited, A trusted financial service group in India.</a></p></div>
<style type="text/css">
.social:hover {opacity: 0.5; filter: alpha(opacity=30);}
</style>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row-fluid">
<!-- Footer Widget 1 -->
<div class="span4">
<div class="textwidget"><p><img src="img/logo5.png"></p></br>
<p>A trusted financial service group in India. The activities of the group span savings products like Deposits, Car and Commercial Vehicle Finance...</p>
</div>
</li>
</div>
<style type="text/css">
.quicklinks{ }
</style>
<!-- Footer Widget 2 -->
<div class="span4">
<h3 class="widget_title">Useful Links</h3>
<ul id="quicklinks">
<li class="quicklinks">Branches</li>
<li class="quicklinks">Deposit Rates</li>
<li class="quicklinks">Deposit Form</li>
<li class="quicklinks"> Interest Rate Model</li>
<li class="quicklinks"> Invester Relations</li>
<li class="quicklinks">Fair Practice Code</li></ul></li>
</div>
<!-- Footer Widget 3 -->
<div class="span4">
<h3 class="widget_title">Head Office (Chennai)</h3>
<p>
No:110,5th floor,Prakash Presidium,<br />
Mahatma Gandhi Road,<br />
Nungabakkam,Chennai-600 034
Phone:044-3022885</p>
</div>
</div>
<!-- footer 4-->
<br>
<div id="foot">
<img src="img/separator.png" alt="separator" />
<div class="span8"><p>Copyright 2014©All Rights Reserved by Vijay Hemant Finance & Estates Limited.</p></div>
</div>
</div><!-- /container -->
</footer>
</div><!-- container-fluid ends -->
</body>
</html>
You can use the API instance.$ScaleWidth(width) to scale your slider.
The following is typical responsive code,
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
Reference: http://www.jssor.com/development/tip-make-responsive-slider.html
Related
How do I Make My Carousel and it's Content Visible?
I have coded a carousel (photo slide) that I had functioning before; however, I am revising my site and having trouble making it function again. The arrow controls that slide left and right are present; however, the photos are not. Before placing the carousel code the photos were visible, but they were not aligned correctly.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="images/rb/tisha-prevented-from-leaking-live-behind-the-scenes-stories.jpg" alt="superstar" style="width:500px;height:500px;">
<div class="carousel-caption">
<h3 align="right">Tisha Vaculin</h3>
<p align="right">Prevented from leaking teasers behind the scenes in stories. Amongst a few targeted.</p>
</div>
</div>
<div class="item">
<img src="images/rb/gabrielle-steberis-prevented-from-leaking-behind-the-scenes-footage-of-new-series-diety.jpg" alt="superstar" style="width:500px;height:500px;">
<div class="carousel-caption">
<h3 align="right">Gabrielle Steberis</h3>
<p align="right">Prevented from leaking teasers to her Diety series in her stories</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<style>
/* Carousel */
.carousel-inner img {
/* make all photos black and white */
width: 100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: green !important;
}
#media (max-width: 1200px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}
/* End of Carousel */
</style>
Bootstrap - Carousel | Links not working
I have been using a video tutorial for Bootstrap Carousel and somehow my code is same as per the video yet the links are not working... The code... <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Portfolio Document</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script src="js/bootstrap.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"> </script> </head> <body> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <div class="navbar-brand">Photo Gallery</div> </div> <ul class="nav navbar-nav"> <li><a href='#'>Home</a></li> <li><a href='#'>Nature Gallery</a></li> <li><a href='#'>Science Gallery</a></li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="carousel slide" data-ride="carousel" id="slider"> <ol class="carousel-indicators"> <li data-target="#slider" data-slide-to="0" class="active"></li> <li data-target="#slider" data-slide-to="1"></li> <li data-target="#slider" data-slide-to="2"></li> <li data-target="#slider" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item active"><img src="img/slide01.png"></div> <div class="item"><img src="img/slide02.png"></div> <div class="item"><img src="img/slide01.png"></div> <div class="item"><img src="img/slide02.png"></div> </div> <a href="#slider" data-slide="prev" class="left carousel-control"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#slider" data-slide="next" class="right carousel-control"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </div> </div> </body> </html> Another issue is, I am using images of 750px*300px and in desktop view there is grey shade area on the right of the image. While in the mobile or responsive view that grey shade area isnt visible. Can someone please suggest how to rectify the issue? Please help people, I am new to web-designing and new to stackoverflow too :)
Your links wont work because you need to load jquery.js before bootstrap.js so just flip these around in your head section. Also you need to load jquery and not jquery ui so it should look something like the following
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Then your images need to have some css to get them to fill the carousel
#slider .item {
height: 250px;
}
#slider .item img{
width: 100%;
height: 100%;
}
Here is a fiddle for you to see this working Fiddle
The only thing about this is images can become skewed in responsive design and images have different sizes so you may want to create a background image for each of the carousel items. Like so
#slider .item {
padding-bottom: 50%;
}
#slider .first-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
#slider .second-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
#slider .third-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
#slider .fourth-item{
background: url('http://placehold.it/350x150');
background-size: cover;
background-position: center;
}
and your html for the carousel inner will look like this:
<div class="carousel-inner">
<div class="item active first-item"></div>
<div class="item second-item"></div>
<div class="item third-item"></div>
<div class="item fourth-item"></div>
</div>
Here is a fiddle of that working Fiddle
Scrollspy is making the wrong link active on page load
For some odd reason scrollspy is causing my second list item to be active on page load instead of the first one. It's weird because after I scroll a bit with the mouse it will make the correct list item active. Aside from this error it functions perfectly. If someone could help me out it would be greatly appreciated.
Heres my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="111">
<header id="home">
<nav class="navbar navbar-default navbar-fixed-top cbp-af-header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
Determined Divas
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home" class="active">Home</li>
<li>About</li>
<li>Who We Are</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="content">
<!-- Home page row -->
<div class="row" id="home">
<div class="fill" style="background-image:url(img/LP/pathways_12.jpg)"></div>
</div>
<!-- About Section -->
<section class="row" id="about">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>About</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Who We Are Section -->
<section class="row" id="whoWeAre">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Who We Are</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Gallery -->
<section class="row" id="gallery">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Gallery</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Contact-->
<section class="row" id="contact">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Contact</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Scripts to animated the nav -->
<script type="text/javascript" src="js/Animated Header/classie.js"></script>
<script type="text/javascript" src="js/Animated Header/cbpAnimatedHeader.js"></script>
<!-- Smooth Scrolling -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Script for full screen bg image -->
<script src="js/fillscreen.js"></script>
</body>
</html>
Heres the CSS:
body{
position: relative;
background-color: #FFF2E2;
color: white;
font-family: 'Raleway', sans-serif;
/*Keeps page content under the header, must match navbar height*/
/*padding-top: 75px; */
}
/*NAV STYLING*/
.navbar-default{
height: 76px;
transition: all 0.5s;
-webkit-animation: all 0.5s;
}
.navbar-default .navbar-nav{
font-weight: bold;
}
.navbar-default .navbar-brand {
color: white;
font-size: 2.0em;
font-family: 'Poiret One', cursive;
font-weight: bolder;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .navbar-nav>li>a:hover {
color: #777;
}
.navbar-default {
background-color: #E498AF;
}
/*Controls active nav items*/
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus {
color: #777;
}
/*Animate nav on scroll*/
.cbp-af-header-shrink{
height: 51px;
}
/*Full screen image styles*/
.fill{
background-size: cover;
background-position: center;
}
/*Title Row Styling*/
.title-row{
height: 100px;
color: #777;
background-color: #FFF2E2;
text-align: center;
}
/*Content row styling*/
.content-row{
height: 600px;
background-color: white;
}
that is because you have <body data-spy="scroll" data-target=".navbar" data-offset="111"> data target of navbar class but you html markup has <div id="navbar" class="collapse navbar-collapse"> id navbar; switch either one and should work. bootstrap scrollspy will look for a target then default to a nav if it cant find the target or if a target is not specified. Its also better to put the scrollspy on a div that only contains the navigation here is a fiddle example
CSS3 box shadows and Bootstrap 3
I am developing a site using Bootstrap 3 and everything seems to work except when i try to use CSS3 box shadows.
What I want to achieve is have box shadows on the left and right of the whole content div. this works fine. i also want a box shadow on some of the content items such as divs in the sidebar but if I have box shadows on the main content container, it doesn't work for the others. If I remove the box shadow class on the main content container, the rest all work.
If i remove this div <div class="box outer">, all the other box shadows work but if this is in, then they don't show.
Any help on identifying why I can't use both box shadows at once would be appreciated
UPDATE:
Got a demo on Bootply http://www.bootply.com/ULX2kATkT8 of what it looks like, I just added a width to .outer given it a width of 1000px and I can see that both all shadows are visible but it looks like the .outer shadow overwrites the others
Here is my template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 3 Responsive Design</title>
<!-- Include bootstrap CSS -->
<link href="http://localhost/app/public/css/bootstrap.min.css" rel="stylesheet">
<link href="http://localhost/app/public/css/custom.css" rel="stylesheet">
<link href="css/media.css" rel="stylesheet">
</head>
<body>
<div class="box outer">
<!-- Site header and navigation -->
<header class="top" role="header">
<div class="container">
<img class="img-responsive" src="logo.png">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</header>
<!-- Site banner -->
<div class="banner">
<div class="container">
<div class="box contentimg">
<img class="img-responsive" src="http://localhost/app/public/images/layout/index.png" alt="">
</div>
</div>
</div>
<!-- Middle content section -->
<div class="middle">
<div class="container">
<!-- Main Content section -->
<div class="col-md-8 content">
</div>
<!-- End Main Content section -->
<!-- Sidebar Content section -->
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="box sidebar_item">
<div class="sidebar_item_head"><h3>Events Planner</h3></div>
<div class="sidebar_item_main">
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<div class="bottom">
<div class="container">
<div class="col-md-4">
<p>Content for the first footer section.</p>
</div>
<div class="col-md-4">
<p>Content for the second footer section.</p>
</div>
<div class="col-md-4">
<p>Content for the third footer section.</p>
</div>
</div>
</div>
</div>
<!-- Include jQuery and bootstrap JS plugins -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://localhost/app/public/js/bootstrap.min.js"></script>
<script src="http://localhost/app/public/js/bootbox.min.js"></script>
</body>
</html>
followed by my css
.box {
position:relative;
background:#f1f1f1;
margin:0 10px;
}
.box:before, .box:after {
position:absolute;
z-index:-1;
content:"";
}
.outer {
margin-top:20px;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
}
.contentimg {
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
width: 100%;
}
.sidebar_item {
margin: 40px auto;
width: 310px;
}
.outer:before,
.outer:after {
top:0;
width:100%;
height: 100%;
border-radius:2%/100%;
-moz-border-radius:2%/100%;
-webkit-border-radius:2%/100%;
box-shadow:-10px 0 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow:-10px 0 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:-10px 0 7px rgba(0,0,0, 0.3);
}
.outer:before{
box-shadow:10px 0 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow:10px 0 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:10px 0 7px rgba(0,0,0, 0.3);
}
.sidebar_item:before,
.sidebar_item:after,
.contentimg:before,
.contentimg:after {
bottom:12px;
left:5px;
width:50%;
top:80%;
max-width:300px;
-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.35);
-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
box-shadow:0 15px 7px rgba(0, 0, 0, 0.3);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.sidebar_item:after,
.contentimg:after {
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
right:5px;
left:auto;
}
I knew z-index had something to do with it as I could see the box shadow if i gave the .outer div a width.
I fixed it by adding this to my css
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12,
.col-lg-12 {
z-index: 0;
}
Dojo: BorderContainer not showing properly when using more than one DropDownButton
I'm trying to create a layout wherein a border container with two tabs will display a series of drop down buttons. For example consider the following code snippet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
</script>
<script type='text/javascript'>
dojo.require('dijit.form.DropDownButton');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.layout.BorderContainer');
dojo.require("dijit.layout.TabContainer");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0; overflow:hidden; }
</style>
</head>
<body class="claro">
<div dojoType="dijit.layout.BorderContainer" design="headline" gutters="true" liveSplitters="true" style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center" style="width: 100%;">
<div dojoType="dijit.layout.TabContainer" tabStrip="true" style="width: 100%; height: 100%">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
<div dojoType="dijit.layout.ContentPane">
<span>Drop Down Button 1</span>
<span>Drop Down Button 2</span>
</div>
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" style="width: 100%; height: 95%">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;">
Left
</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">
Center
</div>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="bottom" style="height: 100px;">
Bottom
</div>
</div>
</body>
</html>
The "Drop Down Button 1" and "Drop Down Button 2" span elements will show up nicely within the 1st tab element and above the border container within the same tab. Now if we enclose the span elements with the Dijit DropDownButton component using the code snippet below:
<div dojoType="dijit.form.DropDownButton" data-dojo-props="iconClass:'dijitIconEdit'">
<span>Drop Down Button 1</span>
</div>
<div dojoType="dijit.form.DropDownButton" data-dojo-props="iconClass:'dijitIconEdit'">
<span>Drop Down Button 2</span>
</div>
The tabs and the border container gets scrambled and not shown properly.
I'm using Dojo 1.6.1.
Well, it looks like your "My first tab" should be a BorderContainer, not a ContentPane. So that first tab has a top section (with the buttons), plus the left and center that you already have. In other words, rather than: <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true"> <div dojoType="dijit.layout.ContentPane"> <span>Drop Down Button 1</span> <span>Drop Down Button 2</span> </div> <div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" style="width: 100%; height: 95%"> <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;"> Left </div> <div dojoType="dijit.layout.ContentPane" splitter="true" region="center"> Center </div> </div> </div> do: <div dojoType="dijit.layout.BorderContainer" title="My first tab" selected="true" design="headline"> <div dojoType="dijit.layout.ContentPane" region="top"> <span>Drop Down Button 1</span> <span>Drop Down Button 2</span> </div> <div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" style="width: 100px;"> Left </div> <div dojoType="dijit.layout.ContentPane" splitter="true" region="center"> Center </div> </div>