Joomla Templates Club 406,261 posts

[chw1979 Friend chw1979Join date: August 2015Posts: 13Downloads:1Uploads:0]

#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 SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#680817

Hello @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 documentation

Example 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 sections

Save the file , Add code in article , save , clean cache and check.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#747044

Hello @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 documentation

Example 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 sections

Save the file , Add code in article , save , clean cache and check.

[chw1979 Friend chw1979Join date: August 2015Posts: 13Downloads:1Uploads:0]

#680882

Hey 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 ?

[chw1979 Friend chw1979Join date: August 2015Posts: 13Downloads:1Uploads:0]

#747063

Hey 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 SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#680886

Hi
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> i

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#747067

Hi
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> i

[chw1979 Friend chw1979Join date: August 2015Posts: 13Downloads:1Uploads:0]

#680887

I try to understand … Purity III template

Assets.xml

[chw1979 Friend chw1979Join date: August 2015Posts: 13Downloads:1Uploads:0]

#747068

I try to understand … Purity III template

Assets.xml

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#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 SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#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 .

[chw1979 Friend chw1979Join date: August 2015Posts: 13Downloads:1Uploads:0]

#680895

It is here that I need to change …

How do you check ? 😉

[chw1979 Friend chw1979Join date: August 2015Posts: 13Downloads:1Uploads:0]

#747076

It is here that I need to change …

How do you check ? 😉

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#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 SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#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 .

[Author]

Posts