I'm building a website with phpfox and want to use intro.js to provide a guided tour of the website.
How can I do that, please?
This is for Phpfox 4.7.7 . I already tried extracting the downloaded intro.js folder to my project and adding the dependencies to the HTML code as shown on the website via AdminCp/themes/material/Edit/html
The bottom of the HTML code looked like this after linking the JavaScript:
</footer>
{{ js }}
<div class="nav-mask-modal"></div>
<script type="text/javascript" src="intro.js"></script>
</body>
</html>
I also created a button via AdminCp/Blocks/add block and input the below code in the php/html edit box:
<a class="btn btn-large btn-primary" href="javascript:introJs().setOption('showProgress',true).start;">Get a demo tour</a>
and finally, I added the below to an element in the HTML:
<div id="section-header" data-step="1" data-intro="Welcome">
<div class="sticky-bar">
<div class="container sticky-bar-inner h-6 {% if setting('user.hide_main_menu') == true %}setting-hide-menu{% endif %}">
<div class="mr-2 site-logo-block">
{{ logo }}
</div>
...
</div> <!-- Added by edit! -->
</div> <!-- Added by edit! -->
</div> <!-- Added by edit! -->
I expected a guided tour to start after clicking the button, but instead was redirected to a page with the message
Page not found
Related
enter image description here
enter image description here
enter image description here
add_user.ejs
<!--include header-->
<%- include('include/_header')%>
<!--/include header-->
<!-- Main Site -->
<main id="site-main">
<div class="container">
<div class="box-nav d-flex justify-between">
<div class="filter">
<i class="fas fa-backward"></i>Visi Naudotjai
</div>
</div>
<div class="form-title text-center">
<h2 class="text-dark">Naujas naudotojas</h2>
<span class="text-light">Naudokitės apačioja pateikta forma susikuriant nauja naudotojas</span>
</div>
<!-- add user form -->
<%- include('include/_form')%>
</div>
</main>
<!-- /Main Site -->
<!--include footer-->
<%- include('include/_footer')%>
<!--/include footer-->
Cannot understand there is the problem when i try to presss on main site add new user its need to open a new tab with a new just form but i get just this error someone know there is mistake was made ?
I think the problem is because you're calling add_user.ejs, which is in the include page. So, you probably put the page in the wrong folder. If I'm wrong, you need to rename add_user.html to add_user.ejs, or use html as the View Engine
I have the following code attempting to toggle a class on the body element:
$(document).on("turbolinks:load", function() {
// Minimalize menu
$(document).on('click', '.navbar-minimalize', function (event) {
$('body').toggleClass('mini-navbar');
})
...
It works on a fresh page load every time, but fails EVERY OTHER link navigation thereafter. Fresh page load (class toggle works), 1st link click (broken), 2nd link click (works), etc.
Note that I was using jQuery originally when I spotted the bug, then moved to vanilla JS to see if it was a jQuery issue. Needless to say, it wasn't.
I removed a bunch of other dependencies one by one and the only thing that resolves the issue is by removing Turbolinks and replacing turbolinks:load event with jQuery's document.ready.
When analyzing with Chrome Dev tools, it shows that the classlist is trying to be manipulated (highlights it yellow temporarily), but ultimately nothing changes.
I know this is very strange and probably unique to my codebase. I just can't figure the damn bug out.
-- UPDATE 1 --
Here is the relevant HTML markup. Note the 'a' tag class of 'navbar-minimalize' is the trigger. The body tag is the element which the js is trying to toggle the class.
<!-- topnavbar.html.erb -->
<div class="row border-bottom" id="vue-autocomplete-app">
<nav class="white-bg navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary" href="#"><i class="fa fa-bars"></i> </a>
<form role="search" class="form form-inline navbar-form-custom" method="" action="">
<global-search></global-search>
</form>
</div>
</nav>
</div>
Then the rails templating code that loads the above template:
<!-- application.html.erb -->
<body class="fixed-sidebar">
<!-- Wrapper-->
<div id="wrapper">
<!-- Navigation -->
<%= render 'layouts/navigation' %>
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Page wrapper -->
<%= render 'layouts/topnavbar' %>
...
-- UPDATE 2 --
If I move the toggle code outside of the turbolinks:load into a document ready, everything seems to work fine. With that said, it seems to be some sort of quirky behavior with turbolinks.
--
Any help? What's the issue here?
I have two files. One is an index.html, which essentially is the frame for my website, and the other a main.html which holds the template for my homepage. I have the following code right before all my scripts are imported.
<div class="container">
<div class="well" ng-view=""></div>
<div class="footer">
<p translate="footer">Well hello there Mr. Footer</p>
</div>
</div>
All my typeahead and controllers are imported in my scripts. This defaults to pulling my main.html because of the routed controller. The issue is that when I put the following code into my index.html, the typeahead works fine, but as as soon as I move it into my main.html it stops working. All of my javascript is being ran from files, so it shouldn't be a conflict of which loads first... Thoughts?
<div ng-controller="employeeController">
<table>
<center>
<div id="the-basics">
<input type="text"
ng-model="text"
ng-change="get(text, 'name')"
class="typeahead"
id="search"
placeholder="Search Employees..."/>
</div>
<button class="btn btn-primary btn-md" ng-click="get(text, 'name')">
<span class="glyphicon glyphicon-search"></span>
</button>
</center>
</table>
</div>
Here is a somewhat similar question that was never answered:
Bootstrap Typeahead Not Registering in AngularJS ng-view
I was able to resolve this issue by putting another script import for the controllers directly into the main.html.
New to this forum so please be gentle! I have been having issues with jQuery Accordions which are inside a set of tabs. The tabs work fine and so does the Accordion, but... what I really would like is to be able to use a link from within part of the Accordion to go to another part of the Accordion. The Accordion will be used as an instruction manual so therefore in certain sections there will be a bit that basically says to the user to "see this section".
I have checked on here at certain answers such as: jquery ui accordions within tabs and http://jsfiddle.net/9nKZp/1/show/#1| and have checked all over the internet searching for Accordions with anchors as well as Nested Accordions in tabs but I have YET to come across this being done!! Can't really believe that no one has done this!
Here is the code I have so far:
<!-- tabs -->
<link rel="stylesheet" href="/resources/css/tabs.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/resources/js/tabs.js"></script>
<!-- ENDS tabs -->
<!-- accordion -->
<link rel="stylesheet" href="/resources/css/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- ENDS accordion -->
<script>
$(function () {
$(".accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false,
});
});
</script>
<!-- TABS START -->
<div class="tabs_wrapper">
<!-- 1st new tab design START -->
<div id="new_tabs">
<ul>
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
<div id="new_tabs_content">
<div id="tab1" class="tab_content" style="display: block;">
<p>
Data on first tab
</p>
</div>
<div id="tab2" class="tab_content">
<h1>Tab2</h1>
<div class="accordion">
<h3><a id="#1">1</a></h3>
<div>
Content of 1
<div class="accordion">
<h3><a id="#1.1">1.1</a></h3>
<div>
Content of 1.1
<div class="accordion">
<h3><a id="#1.1.1">1.1.1</a></h3>
<div>
Content of 1.1.1, please see 2.1.2
</div>
<h3><a id="#1.1.2">1.1.2</a></h3>
<div>
Content of 1.1.2
</div>
<h3><a id="#1.1.3">1.1.3</a></h3>
<div>
Content of 1.1.3
</div>
</div>
</div>
</div>
</div>
<h3><a id="#2">2</a></h3>
<div>
Content of 2
<div class="accordion">
<h3><a id="#2.1.1">2.1.1</a></h3>
<div>
Content of 2.1.1
</div>
<h3><a id="#2.1.2">2.1.2</a></h3>
<div>
Content of 2.1.2
</div>
<h3><a id="#2.1.3">2.1.3</a></h3>
<div>
Content of 2.1.3
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab_content">
<h1>Tab3</h1>
<p>another load of data</p>
</div>
</div>
<!-- 1st new tab design END -->
</div>
<!-- TABS END -->
Please let me know if you require any further code that I am using such as the tabs.js etc.
Please help me! Is this at all possible?!
Many thanks and big hugs if you can help!!:-)
Here is the idea of how to get this one to work.
In the example http://jsfiddle.net/9nKZp/1/show/#1|1 it seems like the tabs linking works, but it only works when you load the page in a new tab, not from link.
You need your own jsfiddle (you already have one v.1), where you should place some example content WITH links from one tab/question to another pair tab/question (or there may have links to the same tab, but another question)! You also should implement the code from the semi-working example to your code.
Then the logic is as follows (examples using jQuery):
(1) Create on click event for each link you place inside the tabs, something like that:
$('#all_tabs_container a').click( function(){
checkInternalLinks();
});
In the function checkInternalLinks()...:
(2) You should check if the link is internal (#...) and if it is in a know format (like: #x|x or #x|x|x or both)
(3) When you validate this link you'll need to make the specific functionality to switch tabs and accordeons.
(4) The needed functionality already exists(!), but on page load, so you'll need to take some time on it and realize what is hapenning, so you can copy the same code to the onclick event function.
If you like the idea, you can start! Even if you can't complete it, I'm sure someone else will help :-)
I am trying to follow the instructions on this site: http://sathomas.me/acc-wizard/
I have followed the instructions, and even copied and pasted the exact code. Can you tell me what's going wrong? I have verified that all the code is located in the proper directory. Here is an image of what's displaying on my site: http://i.imgur.com/BSmrFZQ.png
Here's my code, the CSS is added in the header and is not in the code below:
<div id="body">
<div class="row-fluid breadcrumbs margin-bottom-30">
<div class="container">
<h1 class="pull-left">Book Now!</h1>
</div><!--/container-->
</div><!--/breadcrumbs-->
<div class="container">
<div class="row-fluid">
<div class="span9">
<div class="row-fluid acc-wizard">
<div class="span3" style="padding-left: 2em;">
<p style="margin-bottom: 2em;">
Follow the steps below to add an accordion wizard to your web page.
</p>
<ol class="acc-wizard-sidebar">
<li class="acc-wizard-todo">Prerequisites</li>
<li class="acc-wizard-todo">Add Wizard</li>
<li class="acc-wizard-todo">Adjust HTML</li>
<li class="acc-wizard-todo">Release</li>
</ol>
</div>
<div class="span9">
<div class="accordion" id="accordion-demo">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#prerequisites">
Install Bootstrap and jQuery
</a>
</div>
<div id="prerequisites" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-prerequisites">
<p>
The accordion wizard depends on two other open source packages:
<ul>
<li>The Bootstrap framework, available here.
<li>The jQuery javascript library, available here.
</ul>
Note that Bootstrap itself depends on jQuery for its interactive
components, so if you're using Bootstrap you probably already have
jQuery as well.
</p>
<p>
You'll include the CSS styles for Bootstrap in the
<code><head></code> of your HTML file, for example:
</p>
<pre><!--
--><link href="css/bootstrap.min.css" rel="stylesheet">
<!-- --><link href="css/bootstrap-responsive.min.css" rel="stylesheet"><!--
--></pre>
<p>
and you'll include jQuery and Bootstrap javascript files at the
end of your <code><body></code> section, for example:
</p>
<pre><!--
--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<!-- --><script src="js/bootstrap.min.js"></script><!--
--></pre>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#prerequisites -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#addwizard">
Add Accordion Wizard
</a>
</div>
<div id="addwizard" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-addwizard">
<p>
If you haven't already found it, the source code for the
accordion wizard is available on github
here.
There are two main folders, <code>/src</code> and
<code>/release</code>.
</p>
<p>
There are two different ways to add the accordion wizard to
your pages. The simplest approach is just to add the CSS and
javascript files from the <code>/release</code> folder
directly in your HTML without modifying them:
</p>
<pre><!--
--><link href="css/bootstrap.min.css" rel="stylesheet">
<!-- --><link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<!-- --><link href="css/acc-wizard.min.css" rel="stylesheet"><!--
--></pre>
<p>
and
</p>
<pre><!--
--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<!-- --><script src="js/bootstrap.min.js"></script>
<!-- --><script src="js/acc-wizard.min.js"></script><!--
--></pre>
<p>
The release styles for the accordion wizard are based on
Bootstrap's default styles. If you've tweaked the Bootstrap
styles (e.g. by changing the link color), you'll want to
make corresponding tweaks to <code>acc-wizard.min.css</code>.
</p>
<p>
Alternatively, if you're building custom CSS and javascript,
then you might want to start with the files in the <code>/src</code>
folder and adapt them to your source code. The <code>/src</code>
folder contains a LESS file and uncompressed (and commented)
javascript. Note that the <code>acc-wizard.less</code> file
depends on variables defined in Bootstrap's <code>variables.less</code>
file.
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#addwizard -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#adjusthtml">
Adjust Your HTML Markup
</a>
</div>
<div id="adjusthtml" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="form-adjusthtml">
<p>
Now you can modify your HTML markup to activate the accordion
wizard. There are two parts to the markup—the collapsible
accordion itself and the task list. I prefer putting both in
the same <code>.row</code> with the task list taking up a
<code>.span3</code> and the accordion panels in a <code>.span9</code>,
but that's not a requirement.
</p>
<p>
The accordion panel can be exactly as documented in the
Bootstrap example,
but I think there's a problem with the Bootstrap implementation.
Specifically, the Bootstrap example only adds the class
<code>.in</code> to one of the accordion panels. That class
marks the panel as visible by default. The problem with only
having one panel visible by default is that users without
javascript will <strong>never</strong> be able to see the other
panels. Sure, that's a minority of users, but why make your
pages unworkable even for a small minority. Instead, I suggest
adding <code>.in</code> to all your <code>.collapse</code>
elements and have javascript code select only one to make
visible when it runs. The accordion wizard javascript will handle
that for you if you choose to use that approach.
</p>
<p>
The sidebar task list is nothing but a standard HTML ordered
list. The only required additions are adding the
<code>.acc-wizard-sidebar</code> class to the <code><ol></code>
element and <code>.acc-wizard-todo</code> to the individual list
items. If you want to indicate that some steps are already
complete, you can instead add the <code>.acc-wizard-completed</code>
class to the corresponding <code><li></code> elements.
</p>
<pre><!--
--><ol class="acc-wizard-sidebar">
<!-- --> <li class="acc-wizard-todo"><a href="#prerequisites">Install Bootstrap and jQuery</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#addwizard">Add Accordion Wizard</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#adjusthtml">Adjust Your HTML Markup</a></li>
<!-- --> <li class="acc-wizard-todo"><a href="#viewpage">Test Your Page</a></li>
<!-- --></ol><!--
--></pre>
<p>
Finally, you'll want to active the wizard in your javascript.
That's nothing more than simply calling the plugin on an
appropriate selection.
</p>
<pre><!--
--><script>
<!-- --> $(window).load(function() {
<!-- --> $(".acc-wizard").accwizard();
<!-- --> });
<!-- --></script><!--
--></pre>
<p>
The default options are probably fine for most uses, but
there are many customizations you can use when you activate
the wizard. Check out the documentation on
github
for the details.
</p>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#adjusthtml -->
</div> <!-- /.accordion-group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-demo" href="#viewpage">
Test Your Page
</a>
</div>
<div id="viewpage" class="accordion-body collapse in">
<div class="accordion-inner">
<form id="viewpage">
<p>
Naturally, the last thing you'll want to do is test your
page with the accordion wizard. Once you've confirmed that
it's working as expected, release it on the world. Your
users will definitely appreciate the feedback and guidance
it gives to multi-step and complex tasks on your web site.
</p>
</form>
</div> <!--/.accordion-inner -->
</div> <!-- /#viewpage -->
</div> <!-- /.accordion-group -->
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/acc-wizard.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script>
function onNext(parent, panel) {
hash = "#" + panel.id;
$(".acc-wizard-sidebar",$(parent))
.children("li")
.children("a[href='" + hash + "']")
.parent("li")
.removeClass("acc-wizard-todo")
.addClass("acc-wizard-completed");
}
$(window).load(function() {
$(".acc-wizard").accwizard({onNext: onNext});
})
</script>
Are you not forgot about this?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
Order is important! You add these libraries but in wrong order. Here is correct:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/acc-wizard.min.js"></script>
And fix that errors first!:
GET http://shield.sitelock.com/shield/maidsinmemphis.com 403 (Forbidden) index.php:363
GET http://www.maidsinmemphis.com/assets/elasticslides/css/style.css 404 (Not Found) index.php:25
GET http://www.maidsinmemphis.com/assets/css/acc-wizard.min.css 404 (Not Found) index.php:31
GET http://www.maidsinmemphis.com/assets/elasticslides/js/jquery.easing.1.3.js 404 (Not Found) index.php:387
GET http://www.maidsinmemphis.com/assets/elasticslides/js/jquery.eislideshow.js 404 (Not Found) index.php:387
GET http://www.maidsinmemphis.com/assets/js/acc-wizard.min.js 404 (Not Found) index.php:387
Uncaught TypeError: Object [object Object] has no method 'accwizard'