If you look at the behavior of the slider below, when the slides change (it can be by clicking the arrows, the circles, or scrolling), the .active class is applied to the circle in the middle.
If you move to a certain point (if you go to the right, you see the error when you get to the red circle. If you go to the left you see the error in the green circle) you will notice that the active class is not applied correctly, because the library swiperJS creates duplicate slides (you could to see this with the browser's inspector) and they don't behave as expected.
Does anyone know how to make my js apply to duplicate slides as well?
// COLORES
$(".circulo-color").first().addClass("active");
$(".btn-version").first().addClass("active");
$(".circulo-color").on("click", function () {
$(".circulo-color").removeClass("active");
$(this).addClass("active");
let urlImg = $(this).data("img");
let text = $(this).data("text");
let versiones = $(this).data("ver");
$("#auto-color")
.fadeOut(200, function () {
$("#auto-color").attr("src", urlImg);
})
.fadeIn(200);
$("#texto-color")
.fadeOut(200, function () {
$("#texto-color").text(text);
})
.fadeIn(200);
if (versiones != "") {
$("#version-color")
.fadeOut(200, function () {
$("#version-color").text(
"Disponible sólo en las versiones: " + versiones
);
})
.fadeIn(200);
} else {
$("#version-color").html(" ");
}
});
var swiperColores = new Swiper(".swiper-container.colores", {
slideToClickedSlide: true,
loop: true,
centeredSlides: true,
height: 40,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
mousewheel: true,
slidesPerView: 3,
spaceBetween: 1,
on: {
slideChangeTransitionStart: function () {
$(".swiper-slide-active>.circulo-color").click();
},
init: function () {
$(document).on("ready", function () {
$(".swiper-slide-active>.circulo-color").click();
});
}
}
});
.circulo-color {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
outline: none;
border: 0;
margin-top: 2rem;
margin-right: 0.5rem;
padding: 1rem;
border: 6px solid #e6e5e1 !important;
transition: 0.3s ease all;
}
.circulo-color.active {
box-shadow: 0px 0px 0px 2px #3ec8f0;
}
.swiper-slide{
transform: translate(3.5rem,-1rem)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<div class="swiper-container colores">
<div class="swiper-wrapper">
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="1"
data-text="1"
data-ver="1"
style="background-color: red;"
></button>
</div>
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="2"
data-text="2"
data-ver="2"
style="background-color: yellow;"
></button>
</div>
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="3"
data-text="3"
data-ver="3"
style="background-color: blue;"
></button>
</div>
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="4"
data-text="4"
data-ver="4"
style="background-color: teal;"
></button>
</div>
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="5"
data-text="5"
data-ver="5"
style="background-color: darkmagenta;"
></button>
</div>
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="6"
data-text="6"
data-ver="6"
style="background-color: darkgreen;"
></button>
</div>
</div>
<div class="arr">
<div class="swiper-button-next"></div>
</div>
<div class="arr2">
<div class="swiper-button-prev"></div>
</div>
</div>
</body>
</html>
Related
I'm trying to make a simple swiper / slider with thumbnails. It works fine, the only problem is, that slides on the right, which do not have to be shown yet, are present on the screen, which makes the swiper wider than the webpage...
Here ist the picture, how it looks like
Does anyone know, how to fix it? What am I doing wrong?
Thanks for you help.
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 'auto',
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
grabCursor: true,
thumbs: {
swiper: galleryThumbs
}
});
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
align-items: center;
}
.gallery-top {
height: 60%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs img{
width:40%
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.gallery-top img{
width: 400px;
height:400px;
}
#media only screen and (min-width:100px) and (max-width:500px){
.gallery-top img{
width: 300px;
height:300px;
}
.gallery-thumbs img{
width:100%
}
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/22/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/237/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>
<!-- Arrows -->
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>
Your mistake.
The CDN is for swiper 8
https://unpkg.com/swiper#8.4.4/swiper-bundle.min.css
But your markup is of the old versions of swiper.
https://swiperjs.com/migration-guide
Change swiper-container to swiper
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide{
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
}
.gallery-top {
height: 60%;
width: 100%;
}
.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs img{
width:40%
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.gallery-top img{
width: 400px;
height:400px;
}
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/22/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/id/237/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide slide-top">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>
<!-- Arrows -->
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 1' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 2' />
</div>
<div class="swiper-slide">
<img src='https://picsum.photos/200/300'
alt='slide 3' />
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 'auto',
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
grabCursor: true,
thumbs: {
swiper: galleryThumbs
}
});
</script>
I have an issue in my vue template down below. I fetched data from axios but it couldn't store the data on this.sub_brand variable. console.log(this.sub_brand) is only working for inside axios. here is the full code -
<template>
<div>
<div class="row" >
<div class="col-md-4 pt-5 pl-5">
<div class="product">
<div class="product__images">
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
class="product__main-image"
id="main-image"
/>
<div class="product__slider-wrap">
<div class="product__slider">
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
class="product__image product__image--active"
/>
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
class="product__image"
/>
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
class="product__image"
/>
<img
src="http://127.0.0.1:8000/images/gsm.jpg"
alt="google pixel 6"
class="product__image"
/>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 pt-5 pr-5">
<h4>{{sub_brand}}</h4>
<!-- <input type="text" class="form-control" name="" id="" v-model="sub_brand"> -->
<h5>Star</h5>
<div class="bg-light mt-4" style="padding: 10px 0px">
<h2 class="pl-4 pt-3">RM869.00</h2>
</div>
<div class="mt-4">
<h3>Variation</h3>
</div>
<div class="bg-light mt-4" style="padding: 10px 0px">
<h5 class="pl-4">Quantity: </h5>
<input type="number" class="form-control pl-4" placeholder="0" style="width: 12%; margin-left: 4%" min="0">
</div>
<div class="row mt-5">
<button class="btn btn-secondary ml-3">Add to Cart</button>
<button class="btn btn-primary ml-3">Buy Now</button>
</div>
<hr class="mt-5">
</div>
<div class="col-md-3 bg-light">
<div class="pl-5">
<h3><strong>Samsung</strong></h3>
</div>
<div class="pl-5 custom_pan">
Chat
Video Chat
View
</div>
<hr>
<div class="pl-5 mt-4 pr-4">
<strong>Shipping Details</strong>
<p style="color: #D1D3D4">2A, Changkat Duta Kiara, Mont Kiara, 50480 Kuala Lumpur, Willayah Persekutuan Kuala Lumpur</p>
<strong>From: China Logistic, Shankal</strong>
<br><br>
<strong>To: Kuala Lumpur, Willayah Persekutuan</strong>
<br><br>
<strong>Shipping Fee: RM8.00</strong>
</div>
<hr>
<div class="pl-5 mt-5">
<h5>Authentic</h5>
<br>
<h5>15 Days Return</h5>
<br>
<h5>Free Shipping</h5>
</div>
<br><br>
</div>
</div>
<div class="row bg-light">
<div class="card">
<div class="card-header">
<h4>Product Description</h4>
</div>
<div class="card-body">
Samsung
</div>
</div>
</div>
<div class="row bg-light">
<div class="card">
<div class="card-header">
<h4>Review</h4>
</div>
<div class="card-body">
Samsung
</div>
</div>
</div>
<div class="row bg-light">
<div class="card">
<div class="card-header">
<h4>You may also like other product from same merchant</h4>
</div>
<div class="card-body">
Samsung
</div>
</div>
</div>
<div class="row bg-light">
<br><br>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
mounted() {
// console.log('Component mounted.');
this.fetchProduct();
},
data() {
return{
single_product: [],
sub_brand: "",
product_id: 6,
}
},
methods: {
fetchProduct(){
axios.get('https://admin.globalshopping-mall.site/api/single_sub_brand_detail/'+ this.product_id)
.then(res => {
this.single_product = res.data.data[0];
this.sub_brand = res.data.data[0].GUID;
}).catch(err => {console.log(err);});
},
},
}
</script>
<style>
.card{
margin-top: 2%;
margin-left: 4%;
background-color: white;
width: 71%;
/* height: 30%; */
}
.card-header{
background-color: white
}
.product {
width: 100%;
height: 68%;
}
.product__images {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.product__main-image {
max-width: 500px;
max-height: 600px;
object-fit: cover;
cursor: pointer;
border: 1px solid #070707;
}
.product__slider-wrap {
max-width: 500px;
min-height: 100px;
display: flex;
align-items: center;
}
.product__slider {
width: 98%;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
padding-left: 2%;
}
.product__image {
max-width: 180px;
max-height: 100px;
object-fit: cover;
cursor: pointer;
opacity: 0.5;
margin: 0.25rem;
border: 1px solid #070707;
}
.product__image:first-child {
margin-left: 0;
}
.product__image:last-child {
margin-right: 0;
}
.product__image:hover {
opacity: 1;
}
.product__image--active {
opacity: 1;
}
.product__slider::-webkit-scrollbar {
height: 10px;
}
.product__slider::-webkit-scrollbar-thumb {
background-color: #D1AD33;
border-radius: 50px;
}
</style>
Look, the problem is, your context this. works inside axios with context of axios
If you want to use context this. of vue component, you have to get data from axios outside.
You have to use async/await for you vue method fetchProduct
Something like that
methods: {
async fetchProduct() {
let result = await axios.get("https://admin.globalshopping-mall.site/api/single_sub_brand_detail/" +this.product_id)
.then((res) => {
return res.data.data[0];
})
.catch((err) => {console.log(err);});
this.single_product = result;
this.sub_brand = result.GUID;
},
},
or
You can save your context this to the variable before axios
and use this variable inside the axios function
Something like this
methods: {
fetchProduct() {
let _this = this;
axios.get("https://admin.globalshopping-mall.site/api/single_sub_brand_detail/" + this.product_id)
.then((res) => {
_this.single_product = res.data.data[0];
_this.sub_brand = res.data.data[0].GUID;
})
.catch((err) => {console.log(err);});
console.log(this);
},
},
Root cause : As axios API calls works asynchronously, But other code will execute synchronously. Hence, While trying to logging this.sub_brand it will work synchronously and will invoke before the axios call (response time might vary).
Solution : If you want to access the API response immediately after a call. You have to use async/await which make promises easier to write.
async makes a function return a Promise
await makes a function wait for a Promise
Live Demo :
methods: {
async fetchProduct(){
const res = await axios.get('https://admin.globalshopping-mall.site/api/single_sub_brand_detail/'+ this.product_id)
.then(res => {
return res.data.data[0];
}).catch(err => {console.log(err);});
}
this.single_product = res;
this.sub_brand = res.GUID;
}
Please am trying to create a front page with a sliding image and the text and button on it remain in same position while images slide underneath the text and button..
solution i found online are not helpful
One way to do it is setting the content you want to remain static to fixed. Place all the content inside a wrapper so you dont need to manually position each element.
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
}
.container img{
height: 100%;
width: 100%;
}
.fixed {
width: 100%;
position: fixed;
z-index: 999;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="fixed">
<p class="lead" style="color: white;">Hello! I'm text.</p>
<button class="btn">PRESS</button>
</div>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
</div>
</div>
</div>
</body>
</html>
I have something in the following css that is causing my fixed navbar to push up when scrolling down untill its almost not visible. This navbar works on all my other pages so I know its something to do with the following css to this page. Attached is the nav bar css and the css that seems to be causing it to not work properly for (1) page... it seems to work fine in browser and Dreamweaver live view but not on any cell phone... The footer seems jacked now too.. its something in between the header and footer ; Also attached is the pages HTML.
live version as you can see the pages I have finished scroll properly except services > roofing page
<!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">
<title>Roofing Contractor Springfield IL Surrounding Areas</title>
<meta name="description" content="Licensed Roofing Contractor serving Springfield IL and surrounding areas. Hire a professional and let us exceed your residential roofing needs today!">
<meta name="keywords" content="Roofing Contractor New Roof Repair Licensed Bonded Insured Free Estimates">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container" id="custom-nav">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li class="dropdown">
Services<b class="caret"></b>
<ul class="dropdown-menu">
<li>Roofing</li>
<li>Siding</li>
</ul>
</li>
<li>
Contact
</li>
<li class="dropdown">
More<b class="caret"></b>
<ul class="dropdown-menu">
<li>Gallery</li>
<li>Reviews</li>
<li>Careers</li>
</ul>
</li>
</ul>
<div class="social">
<ul>
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-twitter"></i></li>
<li><i class="fa fa-lg fa-google-plus"></i></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container-fluid margin-top">
<div class="row padding-left padding-right">
<h3><span class="glyphicon glyphicon-bullhorn glyphicon-color"></span> Roofing Contractor <br><small>"Get The Free Estimate You Deserve!"</small></h3><hr>
<h4>Need a New Roof or Roof Repairs?<br><small>We are completely Licensed Bonded and Insured for all of your roofing needs!</small></h4>
</div>
<hr>
<div class="row ">
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Shingle Roofing" src="images/shingle-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Shingle Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Shingle Roofing Info Here!
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Rubber Roofing" src="images/flat-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Rubber Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Rubber Roofing Info Here
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Metal Roofing" src="images/metal-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Metal Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Metal Roofing Info Here!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12 call-now">
<h4>“We pride ourselves on being able to provide Safe, Clean, Quality work with competitive rates!”</h4>
Call Now (217) 820-7597
</div>
<footer>
<div class="container-fluid">
<small>Copyright © ZNC Roofing Contractor 2017</small>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-91438053-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Google Maps -->
</body>
</html>
Custom Navbar
.navbar-collapse {border-color: #FFFFFF !important; margin-top: 5px;}
.dropdown-menu > li > a {color : #FFFFFF !important;}
.dropdown-menu > li > a:hover{color : #EF7800 !important;}
.navbar-toggle {background: #192F42; padding-top: 12px;}
.navbar-inverse .navbar-toggle {border-color: #192F42;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background: none;}
#custom-nav { margin-left: 0px; width: 100%;}
.navbar-inverse {background-color: #192F42;}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #192F42}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #192F42}
.dropdown-menu { background-color: #192F42}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #192F42}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none;}
.navbar-inverse { border-color: #192F42}
.navbar-inverse .navbar-brand {height: 50px;width: 142px;background: url(../images/brand.jpg) no-repeat;background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #EF7800}
.dropdown-menu>li>a { color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #EF7800}
/* Roofing Page */
.lib-panel {
margin-bottom: 20Px;
}
.lib-panel img {
width: 100%;
background-color: transparent;
}
.lib-panel .row,
.lib-panel .col-md-6 {
padding: 0;
background-color: #FFFFFF;
}
.lib-panel .lib-row {
padding: 0 20px 0 20px;
}
.lib-panel .lib-row.lib-header {
background-color: #FFFFFF;
font-size: 20px;
padding: 10px 20px 0 20px;
}
.lib-panel .lib-row.lib-header .lib-header-seperator {
height: 2px;
width: 26px;
background-color: #FFFFFF;
margin: 7px 0 7px 0;
}
.lib-panel .lib-row.lib-desc {
position: relative;
height: 100%;
display: block;
font-size: 13px;
}
.lib-panel .lib-row.lib-desc a{
position: absolute;
width: 100%;
bottom: 10px;
left: 20px;
}
.row-margin-bottom {
margin-bottom: 20px;
}
.box-shadow {
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
}
.no-padding {
padding: 0;
}
I have two pages.
viewport1.html
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="js/lib/dijit/themes/claro/claro.css">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='js/lib/dojo/dojo.js'></script>
<script>
require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionPane"]);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top pane</div>
<div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="region:'leading'">
<div data-dojo-type="dijit/layout/AccordionPane" title="pane #1">accordion pane #1</div>
<div data-dojo-type="dijit/layout/AccordionPane" title="pane #2">accordion pane #2</div>
<div data-dojo-type="dijit/layout/AccordionPane" title="pane #3">accordion pane #3</div>
</div>
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'">
<div data-dojo-type="dijit/layout/ContentPane" title="tab #1">tab pane #1</div>
<div data-dojo-type="dijit/layout/ContentPane" title="tab #2" href="index.html">tab pane #2</div>
<div data-dojo-type="dijit/layout/ContentPane" title="tab #3">tab pane #3</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div>
</div>
</body>
</html>
index.html
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="js/lib/dijit/themes/claro/claro.css">
<!-- script>
var dojoConfig = {
baseUrl: "/site/mysite/js/",
tlmSiblingOfDojo: false,
packages: [
{ name: "dojo", location: "lib/dojo" },
{ name: "dijit", location: "lib/dijit" },
{ name: "dojox", location: "lib/dojox" }
]
};
</script-->
<script type="text/javascript" src="js/lib/dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.parser");
</script>
<script>
require(["dojo/data/ItemFileWriteStore", "dojox/grid/DataGrid", "dijit/layout/BorderContainer", "dojox/layout/ContentPane","dojo/domReady!"], function(ItemFileWriteStore, DataGrid, BorderContainer, ContentPane){
// create a BorderContainer as the top widget in the hierarchy
var bc = new BorderContainer({
style: "height: 500px; width: 700px;"
});
// create a ContentPane as the left pane in the BorderContainer
var cp1 = new ContentPane({
region: "left",
style: "width: 100px",
content: "hello world"
});
bc.addChild(cp1);
// create a ContentPane as the center pane in the BorderContainer
var cp2 = new ContentPane({
region: "center",
href: "center.html"
});
bc.addChild(cp2);
// put the top level widget into the document, and then call startup()
bc.placeAt('div1');
bc.startup();
cp2.startup();
});
</script>
</head>
<body class="claro">
<div id="div1"></div>
</body>
</html>
I am trying to load index.html inside one tab of viewport1.html page. But the index.html page is not getting rendered.
Appreciate any help. My requirement is to load a dojo enabled page inside another dojo enabled page dynamically.
I found what I wanted using below code sample. I think I should use declarative instead of programmatic approach.
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="js/lib/dijit/themes/claro/claro.css">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='js/lib/dojo/dojo.js'></script>
<script>
require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dijit/layout/AccordionPane"]);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top pane</div>
<div data-dojo-type="dijit/layout/AccordionContainer" data-dojo-props="region:'leading'">
<div data-dojo-type="dijit/layout/AccordionPane" title="pane #1">accordion pane #1</div>
<div data-dojo-type="dijit/layout/AccordionPane" title="pane #2">accordion pane #2</div>
<div data-dojo-type="dijit/layout/AccordionPane" title="pane #3">accordion pane #3</div>
</div>
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'">
<div data-dojo-type="dijit/layout/ContentPane" title="tab #1">tab pane #1</div>
<div data-dojo-type="dijit/layout/ContentPane" title="tab #2" href="bordercontainer.html" parseOnLoad="true" preLoad="false">tab pane #2</div>
<div data-dojo-type="dijit/layout/ContentPane" title="tab #3">tab pane #3</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div>
</div>
</body>
</html>