I have a list of the days and hours of operation of a business:
{% load static %}
<link type = "text/javascript" href="{% static 'core/js/index.js' %}">
<div class = "col-md-4">
<div class = "business-hours">
<h2 class="title">Opening Hours</h2>
<ul class="list-unstyled opening-hours">
<li>Sunday <span class="pull-right">Closed</span></li>
<li>Monday <span class="pull-right">9:00-22:00</span></li>
<li>Tuesday <span class="pull-right">9:00-22:00</span></li>
<li>Wednesday <span class="pull-right">9:00-22:00</span></li>
<li>Thursday <span class="pull-right">9:00-22:00</span></li>
<li>Friday <span class="pull-right">9:00-23:30</span></li>
<li>Saturday <span class="pull-right">14:00-23:30</span></li>
</ul>
</div>
</div>
And am trying to use JavaScript so that the current day is highlighted when a user visits the website:
// highlight current day on opeining hours
$(document).ready(function() {
$('.opening-hours li').eq(new Date().getDay()).addClass('today');
});
The above JavaScript is not producing any results and I am not sure why. Note: this is in a Django project with app core, and the JS file is located at core/static/core/js/index.js.
EDIT:
This is the error message shown in the console:
error: Bootstrap's JavaScript requires jQuery
That error message means that either jQuery wasn't loaded, or it wasn't loaded before Bootstrap's JavaScript. You will need to load jQuery before loading the Bootstrap JavaScript file. Your script tags should look something like this:
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
Related
<!doctype html>
<html>`enter code here`
{% include head.html %}
<body>
<div class="container jumbotron">
<h1 class="text-center"><i class="fa fa-paper-plane float shadow"></i> Flyaway.css</h1>
<p class="lead text-right">~ created by <small><i class="glyphicon glyphicon-fire"></i> 進擊的燊</small> ~</p>
<ul class="list-inline text-center">
<li>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=lushen&repo=flyaway&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=lushen&repo=flyaway&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
</li>
</ul>
{{ content }}
{% include footer.html %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/back-to-top.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/prefixfree.js"></script>
<script type="text/javascript" src="js/shake.js"></script>
<script type="text/javascript" src="js/flyaway.js"></script>
</body>
</html>
This is from an opensource project on Github. I just want to understand this code.
There are head.html and footer.html files, but when I open the default.html file on my computer,the head and footer file do not load on the web page. But on the other hand, when I use the 'check'-button on Chrome to see the source code, the head and footer are actually loaded.
At the same time, I've tried searching the internet to find what {{}} and {% include filename%} really are, but there seems to be no such a syntax.
This is most probably just template file of some templating framework, that code will get replaced with PHP or other server side language code.
For example
<?php include 'head.html'; ?>
Which will include to this document an actual file in same folder with that name.
This looks like a Twig PHP template. The documentation is here.
I want to dynamically load stylesheets and scripts that are in a variable. This is my current code.
<span ng-init="stylesheets = []"></span>
<span ng-init="scripts = []"></span>
<span ng-repeat="script in scripts">
<script src="{{script}}"></script>
</span>
<span ng-repeat="stylesheet in stylesheets">
<link rel="stylesheet" href="{{stylesheet}}"/>
</span>
My code is already working except that initially it loads the literals {{script}} and {{stylesheet}} which is adding up to the request time to the server.
I would like to avoid this.
Im building a web application that has some server side layouts and partials. I'm trying to insert partials into the dom using javascript depending on which button the user clicks. Below I've included a simple example that shows what I want to do, obviously it doesn't work. I know you can registerPartials by writing them in the same document and so on, but is there a similar function to be able to use a partial from the server? I wish i could call registerPartial and just pass it the url to the partial or something. For the below example, assume the following folder structure, and that I've registered the partials folder accordingly:
-web
L views
L partials
L edit-user.handlebars
L reset-pass.handlebars
L main.handlebars
code:
<script type="text/javascript">
var edit = {{> edit-user}};
var resetPass = {{> reset-pass}};
$(document).ready(function(){
$("#editMenuAction").click(function(e){
e.preventDefault();
console.log(html);
$("#adminChangesDiv").html(edit);
});
$("#resetPassMenuAction").click(function(e){
e.preventDefault();
console.log(html);
$("#adminChangesDiv").html(resetPass);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v3.0.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav id="menu" class="navbar navbar-default">
<div class="container-fluid">
<!--<div class="navbar-header navbar-brand" id="beingEdited">Admin</div>-->
<ul id="menu-items" class="nav navbar-nav">
<li id="editMenuAction" data-toggle="tooltip" title="Edit this user's profile."><a>Edit Profile <span class="glyphicon glyphicon-edit"></span></a></li>
<li id="resetPassMenuAction" data-toggle="tooltip" title="Reset user's password."><a>Reset Password</a></li>
</ul>
</div>
</nav>
<div id="changesDiv">
</div>
Handlebars won't do http requests for you. I think you have three options:
You could write a small utility function that requests the template, compiles it, and uses it.
Or, if your templates are precompiled, you could consider using requirejs or a similar tool to dynamically load the script.
What I do on my site is precompiled the Handlebars and bundle those functions into my js files which use them, eliminating any latency between when data is ready to be rendered and the actual render.
I am desperately trying to integrate a time picker in my app, but without success. I tried to use this code to do it: https://github.com/weareoutman/clockpicker
I have all the files and the paths are properly set. Here is the weird thing. If I integrate this code:
<!-- Or just a input -->
<input id="demo-input" />
<!-- jQuery and Bootstrap scripts -->
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>
<!-- ClockPicker script -->
<script type="text/javascript" src="../dist/bootstrap-clockpicker.min.js"></script>
<script type="text/javascript">
$('.clockpicker').clockpicker()
.find('input').change(function(){
// TODO: time changed
console.log(this.value);
});
$('#demo-input').clockpicker({
autoclose: true
});
if (something) {
// Manual operations (after clockpicker is initialized).
$('#demo-input').clockpicker('show') // Or hide, remove ...
.clockpicker('toggleView', 'minutes');
}
</script>
I have declared the css file in the header too:
<!-- ClockPicker Stylesheet -->
<link rel="stylesheet" type="text/css" href="../dist/bootstrap-clockpicker.css">
into the input.html file of my app and starts this app, I can see the box where the clock is supposed to be active but nothing happens when I click on the box, while the clock should appear.
However, if I run the html file in the browser, as a stand alone unit, then the clock works as it should be.
In the app, the input file is called from a higher up file view.py:
#app.route('/input')
def addresses_input():
return render_template("input.html")
I coded in python and used flask
Anyone has an idea? I have been struggling with this for quite some time now and I cannot find an answer...
Thanks!
Your #route should look like
from wtforms.fields.html5 import DateField
class TimeForm(Form):
time_picker = DateField('DatePicker', format='%Y-%m-%d')
#app.route('/current_page', methods=['POST'])
def show_time():
time_form = TimeForm() # this could be the class as well
if time_form.validate_on_submit():
return time_form.time_picker.data.strftime('%Y-%m-%d')
return render_template('bootstrap_template.html', form=form)
You can get the time picker in the jinja2 template in following way
bootstrap_template.html
<form action="some_action" method="post">
{{ time_form.time_picker(class='datepicker') }}
{{ time_form.hidden_tag() }}
<input type="submit"/>
</form>
Please note - you will need to add your js library and css file in template file.
My project consists of a menubar, and I would like to have the submenus display below when the mouse hovers over each button (hoverIntent). I am using the Wet-Boew (Web Experience Toolkit) (https://github.com/wet-boew/wet-boew) to create these features.
My project workspace consists of a main project php folder, including an index file which calls a jquery.min.js and subsequently the hoverintent.js and menubar.js.
Below is the start of the hoverintent.js:
(function($) {
// Alert Point A
$.fn.hoverIntent = function(f,g) {
// Alert Point B
// default configuration options
var cfg = {
sensitivity: 7,
interval: 100,
timeout: 0
};
// override configuration options with user supplied object
cfg = $.extend(cfg, g ? { over: f, out: g } : f );
etc...
})
My problem is that although I can reach the first alter point A I have in my code (and can generate the alter box), the program won't run the $.fn.hoverIntent = function(f,g){...} (where I have the second Alert Point B). I have a similar problem with my menubar.js (where the main functions of the code won't load).
What is usually the most common source of this problem and the best way to fix it?
It should be noted that I do call a jQuery earlier on in a different php project folder (still inside the project workspace) that has to do with a separate login program for this software. The Index file jumps to the login program to get the user's credentials before returning to the index document to display the main content.
I made sure this was the same jQuery file I later referenced in the index file before the hoverintent.js and menubar.js. Is this what is causing the issue?
Sorry I don't have all the code at this time to share, I will try to get the rest out soon. Thanks in advance.
----------------UPDATE-------------------------------
My main index file includes the head with the following code. Note the "../" are required since the wet-boew project folder is seperate from the main program project folder (index) in the workspace:
<head>
<script src="../wet-boew-master/build/js/jquery.min.js" type="text/javascript"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/outside-min.js"></script>
<script async="async" src="../wet-boew-master/src/js/dependencies/hoverintent.js"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/equalheights-min.js"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/resize-min.js"></script>
<script async="async" src="../wet-boew-master/build/js/i18n/en-min.js"></script>
<script src="../wet-boew-master/src/js/workers/menubar.js" type="text/javascript"></script>
<title>Title of the Project</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/ico" href="images/icon.ico">
<script src="../wet-boew-master/build/js/settings.js"></script>
<link href="../wet-boew-master/build/grids/css/util-min.css" rel="stylesheet"/>
<link href="../wet-boew-master/build/js/css/pe-ap-min.css" rel="stylesheet"/>
<link href="../wet-boew-master/build/.../css/theme-min.css" rel="stylesheet"/>
<noscript><link rel="stylesheet" href="../wet-boew-master/build/.../css/theme-ns-min.css" /></noscript></head>
Further down, inside the body of the index we have the menubar:
<body>
<div id="wb-body">
<div id="wb-head">
<div id="wb-head-in">
<header>
<div id="wu-bnr" role="banner">
<nav role="navigation">
<div id="wu-psnb" >
<div id="wu-psnb-in">
<div class="wet-boew-menubar mb-mega" data-load="menubar" role="application" style="min-height: 28px;">
<div>
<ul data-ajax-replace="../wet-boew-master/demos/includes/menu-eng.txt" class="mb-menu" role="menubar">
At which point my menubar options and their respective submenus are listed as such:
<li *class=""* role="presentation">
<section role="presentation">
<h3 role="presentation">
<a href="index.php?location=activitiesMenu:index" role="menuitem" class="knav-1-0-0 mb-has-sm" aria-haspopup="true">
<span class="expandicon">
<span class="sublink"><?=$glb_string["activities"]?></span>
</span>
<span class="wb-invisible">(open the submenu with the enter key and close with the escape key)</span>
</a>
</h3>
<div *class="mb-sm"* role="menu" *aria-expanded="false"* *aria-hidden="true"* **id="myHoverIntent"**>
<div class="span-2" role="presentation">
<ul role="presentation">
<li role="presentation"><?=$glb_string["views"]?><?=($language_set_variable == 'fr'?:)?></li>
<li role="presentation"><?=$glb_string["create"]?><?=($language_set_variable == 'fr'?':')?></li>
</ul>
</div>
</div>
</section></li>
Would this be the correct location for my id="MyHoverIntent" (Bold **) in the code above?
It should also be noted that the italic code (*) above isn't changing (I'm assuming because the menubar and hoverIntent main functions aren't running). This would normally auto-update as the user hovers over each menubar option or leaves it. I know this because of the sample file that was included in the WET-BOEW folder that shows a fully functioning page (with a menubar and hoverIntent working) and these changes were observed in Firebug. Although for some reason Firebug showed that the sample never referenced menubar.js.
It's a little hard to tell what exactly you are doing that stops your code from working since we only have half of the code right now but a few things come to mind. First, the hoverIntent function will get called when you actually call it on a jQuery Object like so
$('#myHoverIntent').hoverIntent();
Second, make sure you are not doing that before the hoverIntent function actually gets defined and lastly, make sure you are passing window.jQuery into your immediately-invoked function expression
Here is a fiddle of a working example: http://jsfiddle.net/G3vCS/