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>
Related
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>
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 am developing a chrome extension and want to open an HTML page from content script as a bootstrap modal on the same page. How is it possible?
Your answer is a bit vague and you didn't provide any code which isn't the best to do.
But you can achieve this using iFrames
Your modal body would have somthing like <iframe src="https://www.w3schools.com"></iframe> in it.
All the information you'd need is on that site. But you'd possibly need to update some CSS to make it look good.
I created a full screen modal with scrollable iframe and when the modal active the body scroll capabilty has been disabale and when modal close scroll has been enable.I hope this will help. :)
<!DOCTYPE html>
<html>
<head>
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="mybody">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg " data-toggle="modal" data-target="#myModal" onclick="disablebodyscroll()"> OOPEN A MODAL WITH IFRAME</button>
<div style="background-color: black; height: 800px;"></div>
<p>Copyright © 2017 Ace</p>
<!-- End of button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="enablebodyscroll()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe src="https://www.w3schools.com/" style="border:0px #ffffff none;" name="myiFrame" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" width="100%" height="100%" position="absolute" allowfullscreen></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
<style type="text/css">
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
.modal-body {
height: 500px;
min-height: 100%;
}
</style>
<script type="text/javascript">
function disablebodyscroll() {
document.getElementById("mybody").style.overflow = "hidden";
}
function enablebodyscroll() {
document.getElementById("mybody").style.overflow = "auto";
}
</script>
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
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>