-
AuthorPosts
-
August 28, 2015 at 7:19 am #680420
Hey everyone,
I’m trying to implement Progressive Sidebar Navigation
As you can see the sidebar is showing well, when I click on an item de text is well displayed but the menu doesn’t follow the article
JS
// docs navigation
!function ($) {
if ($('.docs-sidebar').length) {
if (navigator.userAgent.match(/IEMobile/10.0/)) {
var style = document.createElement("style");
style.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}")), document.querySelector("head").appendChild(style)
}
var $window = $(window),
$body = $(document.body);$body.scrollspy({
target: ".docs-sidebar"
});
$(".docs-sidebar").on ('activate.bs.scrollspy', function () {
$active = $('.docs-sidebar li.active');
$active.prevAll().find('.docs-progress-bar').css ('width', '100%');
$active.nextAll().find('.docs-progress-bar').css ('width', '0%');
}).find ('a').before ($('<span class="docs-progress-bar" />'));$window.on("load", function () {
$body.scrollspy("refresh")
$active = $('.docs-sidebar li.active');
$active.prevAll().find('.docs-progress-bar').css ('width', '100%');
$active.nextAll().find('.docs-progress-bar').css ('width', '0%');
}).on ('scroll', function (event) {
if (this.timeout) {
clearTimeout(this.timeout);
}
this.timeout = setTimeout (function () {
var $active = $('.docs-sidebar li.active'),
$progress = $active.find('.docs-progress-bar'),
$scrollspy = $body.data('bs.scrollspy'),
scrollTop = $scrollspy.$scrollElement.scrollTop() + $scrollspy.options.offset,
scrollHeight = $scrollspy.$scrollElement[0].scrollHeight || $scrollspy.$body[0].scrollHeight,
maxScroll = scrollHeight - $scrollspy.$scrollElement.height(),
offsets = $scrollspy.offsets,
targets = $scrollspy.targets,
activeTarget = $scrollspy.activeTarget,
i;if (scrollTop >= maxScroll) {
$progress.css ('width', '100%');
return ;
}if (activeTarget && scrollTop <= offsets[0]) {
$progress.css ('width', '0%');
return ;
}
for (i = offsets.length; i--;) {
if (scrollTop >= offsets
&& (!offsets || scrollTop <= offsets)) {
var p1 = offsets,
p2 = scrollTop,
p3 = !offsets ? maxScroll : offsets,
p = (p2-p1)/(p3-p1)*100;
$progress.css ('width', p + '%');
return ;
}
}
}, 100);
});$(".docs-container ").click(function (event) {
event.preventDefault()
});
setTimeout(function () {
var $docs = $(".docs-sidebar .nav-list");
$docs.affix({
offset: {
top: function () {
return this.top = $(".page-masthead").outerHeight() + 90.
},
bottom: function () {
return this.bottom = $("#t3-footer").outerHeight(!0) + $('.t3-navhelper').outerHeight(!0) + 50;
}
}
});
}, 100);
}
}(window.jQuery);CSS
.docs-sidebar ul > li > ul {
display: none;
}
.docs-sidebar ul > li.active > ul {
display: block;
}
.docs-sidebar .nav-list {
padding: 0;
margin: 0;
width: 100%;
}
.docs-sidebar .nav-list:before {
display: block;
content: "Menu";
background: #3f4045;
color: #ffffff;
padding: 10px 15px;
margin-bottom: 1px;
}
@media (max-width: 991px) {
.docs-sidebar .nav-list.affix {
position: relative;
}
}
.docs-sidebar .nav-list.affix-bottom {
position: relative;
}
.docs-sidebar .nav-list ul {
padding: 0 0 0 20px;
}
.docs-sidebar .nav-list li {
position: relative;
list-style: none outside none;
white-space: nowrap;
}
.docs-sidebar .nav-list > li {
margin-bottom: 1px;
background: #f6f8fa;
}
.docs-sidebar .nav-list > li a {
border: 0;
border-left: 5px solid #dee4ec;
color: #686a6f;
background: none;
display: block;
padding: 10px 15px;
position: relative;
}
.docs-sidebar .nav-list > li a:hover,
.docs-sidebar .nav-list > li a:active,
.docs-sidebar .nav-list > li a:focus {
border-left-color: #3f4045;
}
.docs-sidebar .nav-list li.active > a {
border-left-color: #29739d;
}
.docs-sidebar .nav-list .docs-progress-bar {
position: absolute;
top: 0;
left: 0;
bottom: 0;background: #dee4ec;
}
.docs-sidebar.affix-button {
top: auto;
bottom: 0px;
}
HTML
<div class="doc-container row"><!-- ==================== Doc nav ==================== -->
<div class="docs-sidebar nav col-xs-12 col-sm-3 col-md-3 pull-right">
<ul class="nav nav-list">
<li><a href="#wat-is"> Wat is MDT</a></li>
<li><a href="#prerequistes"> Prerequistes</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-9 col-md-9"><!-- Layout
================================================== -->
<section id="wat-is">
<div class="page-header">
<h2>Wat is MDT</h2>
</div>
<p class="alert alert-warning">Microsoft Deployment Toolkit</p>
<h3>Microsoft Deployment Toolkit</h3>
<p>Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p>
</section>
<!-- Layout
================================================== -->
<section id="prerequistes">
<div class="page-header">
<h2>Prerequistes</h2>
</div>
<p class="alert alert-warning">Microsoft Deployment Toolkit</p>
<h3>Microsoft Deployment Toolkit</h3>
<p>Het is al geruime tijd een bekend gegeven dat een lezer, tijdens het bekijken van de layout van een pagina, afgeleid wordt door de tekstuele inhoud. Het belangrijke punt van het gebruik van Lorem Ipsum is dat het uit een min of meer normale verdeling van letters bestaat, in tegenstelling tot "Hier uw tekst, hier uw tekst" wat het tot min of meer leesbaar nederlands maakt. Veel desktop publishing pakketten en web pagina editors gebruiken tegenwoordig Lorem Ipsum als hun standaard model tekst, en een zoekopdracht naar "lorem ipsum" ontsluit veel websites die nog in aanbouw zijn. Verscheidene versies hebben zich ontwikkeld in de loop van de jaren, soms per ongeluk soms expres (ingevoegde humor en dergelijke).</p>
</section>
<!-- Layout
<p style="margin-top: 40px;"><a style="color: #eb583c;" title="Purity III documentation main page" href="../documentation/joomla-templates/purity-iii">Back to main page →</a></p>
</div>
</div>
<blockquote>JS Problem ?</blockquote>http://www.computilo.be/prd/index.php/tutorials/mdt
Thanks for helping :-[
Pankaj Sharma
Moderator
Pankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
August 31, 2015 at 3:50 am #680817Hello @chw1979
can u let me know how u added the js in file .
Kindly use this doc
Add js and css with help of this documentationExample to add :
1 – Create a blank file with Notepad++, for example,
named progressive.js and copy all the js script above, in this file.
Save it.
Copy this file in /templates/JA template/js/
2 – Create a
blank file with Notepad++, for example, named progressive.css and copy
all the css code above, in this file. Save it.
Copy this file in /templates/JA template/css/
3 – Modify the file assets.xml located in /templates/JA template/etc/ by adding the lines
<file>js/progressive.js</file> and <file>css/progressive.css</file> in the appropriate sectionsSave the file , Add code in article , save , clean cache and check.
Pankaj Sharma
Moderator
Pankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
August 31, 2015 at 3:50 am #747044Hello @chw1979
can u let me know how u added the js in file .
Kindly use this doc
Add js and css with help of this documentationExample to add :
1 – Create a blank file with Notepad++, for example,
named progressive.js and copy all the js script above, in this file.
Save it.
Copy this file in /templates/JA template/js/
2 – Create a
blank file with Notepad++, for example, named progressive.css and copy
all the css code above, in this file. Save it.
Copy this file in /templates/JA template/css/
3 – Modify the file assets.xml located in /templates/JA template/etc/ by adding the lines
<file>js/progressive.js</file> and <file>css/progressive.css</file> in the appropriate sectionsSave the file , Add code in article , save , clean cache and check.
August 31, 2015 at 6:09 am #680882Hey Pankajsharma,
First off al like to thank you for answering.
I thought I have read somewhere that you had to make changes into head.php
Nevertheless, I made head.php original and made the adaptations like you said. Nothing has changed
assets.xml
<?xml version="1.0" encoding="utf-8"?>
<assets>
<scripts>
<file>js/progressive.js</file>
</scripts><stylesheets>
<file>fonts/font-awesome/css/font-awesome.min.css</file>
<file>css/progressive.css</file>
</stylesheets></assets>
head.php
<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/defined('_JEXEC') or die;
?><!-- META FOR IOS & HANDHELD -->
<?php if ($this->getParam('responsive', 1)): ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/stylesheet">
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
</style>
<script type="text/javascript">
//<!.appendChild(msViewportStyle);
}
//]]>
</script>
<?php endif ?>
<meta name="HandheldFriendly" content="true"/>
<meta name="apple-mobile-web-app-capable" content="YES"/>
<!-- //META FOR IOS & HANDHELD --><?php
// SYSTEM CSS
$this->addStyleSheet(JURI::base(true) . '/templates/system/css/system.css');
?><?php
// T3 BASE HEAD
$this->addHead();
?><?php
// CUSTOM CSS
if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) {
$this->addStyleSheet(T3_TEMPLATE_URL . '/css/custom.css');
}
?><!-- Le HTML5 shim and media query for IE8 support -->
<!-->
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="<?php echo T3_URL ?>/js/respond.min.js"></script>
<!--><!-- You can add Google Analytics here or use T3 Injection feature -->
<!-->
<link rel="stylesheet" href="<?php echo T3_TEMPLATE_URL ?>/css/ie8.css" type="text/css" />
<!-->I’ve checked that CSS is applied by changing the filename and CSS was skipped so I know that assets.xml is taking care of CSS and JS
Any suggestions ?
August 31, 2015 at 6:09 am #747063Hey Pankajsharma,
First off al like to thank you for answering.
I thought I have read somewhere that you had to make changes into head.php
Nevertheless, I made head.php original and made the adaptations like you said. Nothing has changed
assets.xml
<?xml version="1.0" encoding="utf-8"?>
<assets>
<scripts>
<file>js/progressive.js</file>
</scripts><stylesheets>
<file>fonts/font-awesome/css/font-awesome.min.css</file>
<file>css/progressive.css</file>
</stylesheets></assets>
head.php
<?php
/**
* @package T3 Blank
* @copyright Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/defined('_JEXEC') or die;
?><!-- META FOR IOS & HANDHELD -->
<?php if ($this->getParam('responsive', 1)): ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/stylesheet">
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
</style>
<script type="text/javascript">
//<!.appendChild(msViewportStyle);
}
//]]>
</script>
<?php endif ?>
<meta name="HandheldFriendly" content="true"/>
<meta name="apple-mobile-web-app-capable" content="YES"/>
<!-- //META FOR IOS & HANDHELD --><?php
// SYSTEM CSS
$this->addStyleSheet(JURI::base(true) . '/templates/system/css/system.css');
?><?php
// T3 BASE HEAD
$this->addHead();
?><?php
// CUSTOM CSS
if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) {
$this->addStyleSheet(T3_TEMPLATE_URL . '/css/custom.css');
}
?><!-- Le HTML5 shim and media query for IE8 support -->
<!-->
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script type="text/javascript" src="<?php echo T3_URL ?>/js/respond.min.js"></script>
<!--><!-- You can add Google Analytics here or use T3 Injection feature -->
<!-->
<link rel="stylesheet" href="<?php echo T3_TEMPLATE_URL ?>/css/ie8.css" type="text/css" />
<!-->I’ve checked that CSS is applied by changing the filename and CSS was skipped so I know that assets.xml is taking care of CSS and JS
Any suggestions ?
Pankaj Sharma
Moderator
Pankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
August 31, 2015 at 6:49 am #680886Hi
I checked your site but i did not found the code in assets.xml > http://prntscr.com/8avd0o
And there is no js and css file u have added .Copy CSS and JS code from here
create file and add code in
<file>js/progressive.js</file> and <file>css/progressive.css</file> iPankaj Sharma
Moderator
Pankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
August 31, 2015 at 6:49 am #747067Hi
I checked your site but i did not found the code in assets.xml > http://prntscr.com/8avd0o
And there is no js and css file u have added .Copy CSS and JS code from here
create file and add code in
<file>js/progressive.js</file> and <file>css/progressive.css</file> iAugust 31, 2015 at 7:20 am #680887I try to understand … Purity III template
Assets.xml
August 31, 2015 at 7:20 am #747068I try to understand … Purity III template
Assets.xml
Pankaj Sharma
Moderator
Pankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
August 31, 2015 at 7:42 am #680891<em>@chw1979 489841 wrote:</em><blockquote>I try to understand … Purity III template
Assets.xml
</blockquote>
Hi its really weird :((
, i just checked ur site and there is no call for css and js file here http://prntscr.com/8avpdf
+ there is no file in the js/progressive.js >> http://prntscr.com/8avq1x
and css/progressive.css >>> http://prntscr.com/8avq52
to use progressive sidebar you need to add file and code on your site .Pankaj Sharma
Moderator
Pankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
August 31, 2015 at 7:42 am #747072<em>@chw1979 489841 wrote:</em><blockquote>I try to understand … Purity III template
Assets.xml
</blockquote>
Hi its really weird :((
, i just checked ur site and there is no call for css and js file here http://prntscr.com/8avpdf
+ there is no file in the js/progressive.js >> http://prntscr.com/8avq1x
and css/progressive.css >>> http://prntscr.com/8avq52
to use progressive sidebar you need to add file and code on your site .August 31, 2015 at 7:49 am #680895It is here that I need to change …
How do you check ? 😉
August 31, 2015 at 7:49 am #747076It is here that I need to change …
How do you check ? 😉
Pankaj Sharma
Moderator
Pankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
August 31, 2015 at 7:53 am #680896<blockquote>, i just checked ur site and there is no call for css and js file here http://prntscr.com/8avpdf
+ there is no file in the js/progressive.js >> http://prntscr.com/8avq1x
and css/progressive.css >>> http://prntscr.com/8avq52
to use progressive sidebar you need to add file and code on your site .</blockquote>
Kindly Add the css and js as i said on above posts , without adding sidebar will not work .
+ kindly check the site details u submitted for staff , that site is does not contain any code like in your screenshots .
once u will add css and js in the css and js folder
and define them in assets.xml it will work .Pankaj Sharma
Moderator
Pankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
August 31, 2015 at 7:53 am #747077<blockquote>, i just checked ur site and there is no call for css and js file here http://prntscr.com/8avpdf
+ there is no file in the js/progressive.js >> http://prntscr.com/8avq1x
and css/progressive.css >>> http://prntscr.com/8avq52
to use progressive sidebar you need to add file and code on your site .</blockquote>
Kindly Add the css and js as i said on above posts , without adding sidebar will not work .
+ kindly check the site details u submitted for staff , that site is does not contain any code like in your screenshots .
once u will add css and js in the css and js folder
and define them in assets.xml it will work . -
AuthorPosts
This topic contains 27 replies, has 2 voices, and was last updated by Pankaj Sharma 8 years, 8 months ago.
We moved to new unified forum. Please post all new support queries in our New Forum