here's a weird on that I can't seem to find any reference too after trawling the internet for some time.
i'm using knockout to bind a list of images to a view / edit control.
here i have my original attempt
<!-- ko if: Position() == 'gal' -->
<div class="editor-image">
<!-- ko if: $parent.mode() == 'view' -->
<a title="" class="view-image" data-bind="attr: { href : imagePath }">
<!-- /ko -->
<img data-bind="attr: { src : imageThumbnail }" />
<!-- ko if: $parent.mode() == 'view' -->
</a>
<!-- /ko -->
<!-- ko if: $parent.mode() == 'edit' -->
<div>
<a style="display: none;" class="ui-icon ui-icon-zoomin" title="View larger image" href="#">View larger</a>
<a style="display: none;" class="ui-icon ui-icon-zoomout" title="View smaller image" href="#">View Smaller</a>
<a class="ui-icon ui-icon-refresh" title="Delete this image" href="#">Delete image</a>
</div>
<!-- /ko -->
</div>
<!-- /ko -->
the above code adds a tag in if we in view mode then adds controls in if in edit mode and in both situations it will include in img tag. oddly the img src binding doesn't work. but if i do the following it does
<!-- ko if: Position() == 'gal' -->
<div class="editor-image">
<img data-bind="attr: { src : imageThumbnail }" />
<!-- ko if: $parent.mode() == 'view' -->
<a title="" class="view-image" data-bind="attr: { href : imagePath }">
<!-- /ko -->
<!-- ko if: $parent.mode() == 'view' -->
</a>
<!-- /ko -->
<!-- ko if: $parent.mode() == 'edit' -->
<div>
<a style="display: none;" class="ui-icon ui-icon-zoomin" title="View larger image" href="#">View larger</a>
<a style="display: none;" class="ui-icon ui-icon-zoomout" title="View smaller image" href="#">View Smaller</a>
<a class="ui-icon ui-icon-refresh" title="Delete this image" href="#">Delete image</a>
</div>
<!-- /ko -->
</div>
<!-- /ko -->
all i have done here is more the img tag to the top outside the if/endif if/endif and it binds fine. To resolve this i have resorted to
<!-- ko if: Position() == 'gal' -->
<div class="editor-image">
<!-- ko if: $parent.mode() == 'view' -->
<a title="" class="view-image" data-bind="attr: { href : imagePath }">
<img data-bind="attr: { src : imageThumbnail }" />
</a>
<!-- /ko -->
<!-- ko if: $parent.mode() == 'edit' -->
<img data-bind="attr: { src : imageThumbnail }" />
<div>
<a style="display: none;" class="ui-icon ui-icon-zoomin" title="View larger image" href="#">View larger</a>
<a style="display: none;" class="ui-icon ui-icon-zoomout" title="View smaller image" href="#">View Smaller</a>
<a class="ui-icon ui-icon-refresh" title="Delete this image" href="#">Delete image</a>
</div>
<!-- /ko -->
</div>
<!-- /ko -->
which i guess is less code, but its repeated code. and i'm now curious to why my first attempt didn't work.
I would guess knockout traverses the DOM thus the comments need to be in the same level in the DOM tree for knockout to match opening and closing comments.
The following nodes mean that the end comment is in a different level in the DOM to the start comment:
<!-- comment 1 --><!-- end comment 1 -->
Here's the DOM tree for that markup:
|-- A
|---- COMMENT
|-- COMMENT
..and thus knockout cannot find the closing comment tag.
There's nothing wrong with your last code example in my opinion. You can use templates to reduce code duplication though if this is your concern.
Related
This code below for the menu, all links scroll down to a certain section, except for the Blog button that should send the user to another link, but it doesn't work, it only works if I write click and choose open in new tab
here is the code
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://example.com/blog/">Blog</a>
</div><!-- .hm-content end -->
</div><!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div><!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div><!-- .header-menu-and-meta end -->
If you want to open your link in a new tab you can use the target='_blank' attribute. If you wish to open it in the same window then don't include this attribute. See the code snippet below. (Note that the target blank attribute will not work on this site, so test it locally or on this fiddle)
Also, ensure the you have the full url, including www.
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://www.example.com/blog/" target="_blank">Blog</a>
</div>
<!-- .hm-content end -->
</div>
<!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div>
<!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div>
<!-- .header-menu-and-meta end -->
Its working fine for me it redirects to link.
<div class="header-menu-and-meta">
<ul id="main-menu" class="main-menu">
<li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
<li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
<li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
<li><a data-scroll-nav="0" href="#header">main</a></li>
</ul>
<div class="header-meta">
<div class="hm-content">
<a class="header-btn scroll-to btn small colorful hover-white" href="http://example.com/blog/">Blog</a>
</div><!-- .hm-content end -->
</div><!-- .header-meta end -->
<div class="mobile-menu-btn hamburger hamburger--slider">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</div><!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div><!-- .header-menu-and-meta end -->
You can control the behaviour of redirection of the anchor tags by setting the target attribute.
by default property it has is self: target="_self"
You want to achieve is target="_blank"
I took the image clip from Mozilla Developers Network.
Ok I found the problem it was in the JS files, the HTMLAnchorElement was set to preventdefault
I've created a gridview component and if the user provides a title as a parameter, I want it to be wrapped in a bootstrap panel. I don't really want to duplicate my markup so I tried to utilise containerless control syntax to prevent the panel HTML from being added to the DOM.
Here is my attempt:
<!-- ko if: $root.title-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" data-bind="text: $root.title"></h3>
</div>
<div class="panel-body">
<!-- /ko -->
<table class="table table-striped">
<thead>
<tr data-bind="foreach: columns">
<th data-bind="text: headerText"></th>
</tr>
</thead>
<tbody data-bind="foreach: itemsOnCurrentPage">
<tr data-bind="foreach: $parent.columns">
<td data-bind="html: typeof rowText == 'function' ? rowText($parent) : $parent[rowText]"></td>
</tr>
</tbody>
</table>
<nav data-bind="visible: maxPageIndex() > 0">
<ul class="pagination">
<li data-bind="click: previousPage">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- ko foreach: ko.utils.range(0, maxPageIndex) -->
<li data-bind="css: { active: $data == $parent.currentPageIndex }, click: function(){$parent.updateCurrentPageIndex($data)}">
</li>
<!-- /ko -->
<li data-bind="click: nextPage">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- ko if: $root.title -->
</div>
</div>
<!-- /ko -->
However the result isn't correct. If I invert the condition to ifnot: $parent.title it hides correctly.
Result with if: $parent.title
Any suggestions?
So it seems that knockouts containerless control syntax requires valid HTML syntax to work correctly. So since I didn't close the div tags when I wrapped it, it's throwing a wobbler, understandably.
The solution I've just come up with is using the CSS binding, and removing the panel and panel-default classes if typeof $root.title === 'undefined'
Solution
<div class="panel panel-default" data-bind="css:{'panel panel-default': typeof $root.title !== 'undefined'}">
<div class="panel-heading">
<h3 class="panel-title" data-bind="text: $root.title"></h3>
</div>
<div class="panel-body" data-bind="css:{'panel-body': typeof $root.title !== 'undefined'}">
Not pretty but it's far prettier than duplicating markup.
I'm setting up a Bootstrap Carousel working from a Django-powered image database. I have no errors in the console log, jQuery is loading, etc., so I'm definitely missing something painfully obvious. It does not transition to other slides, and the controls are not working either. I have tried loading the carousel library separately, and nothing seems to work. I'm using jQuery 1.11.0 loaded via CDN from Google. I'm using jQuery 1.11.3 served via Static files in Django. The error seems to be in how Django is loading the varied Javascripts, but I'm not savvy enough to determine what the issue is.
ETA:
I am loading bootstrap.min.js after jQuery. I normally have some custom JS running, but I've removed that script for testing.
Here's the Django code generating the carousel:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
{% include "menu.html" %}
<div class="container-fluid">
<div class="panel panel-primary shadow-normal">
<div class="panel-body">
<div id="mycarousel" class="carousel slide">
<ol class="carousel-indicators">
{% for image in index_carousel %}
{% if forloop.first %}
<li data-target='#mycarousel' class='active' data-slide-to='{{ forloop.counter }}'></li>
{% else %}
<li data-target='#mycarousel' data-slide-to='{{ forloop.counter }}'></li>
{% endif %}
{% endfor %}
</ol>
<div class="carousel-inner">
{% for image in index_carousel %}
{% if forloop.first %}
<div class="item active">
{% else %}
<div class="item">
{% endif %}
<img class="img-responsive" src="{{ image.carousel_image.url }}" alt="Carousel Slide - {{ image.alt_text }}">
</div>
{% endfor %}
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
</div>
<script type="javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script>
$(document).ready( function() {
setTimeout( function() {
$('#mycarousel').carousel();
}, 15000)
});
</script>
</body>
Here's the generated HTML:
<!DOCTYPE html>
<html>
<head>
<script src="/static/js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="panel panel-primary shadow-normal">
<div class="panel-body">
<div id="mycarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target='#mycarousel' class='active' data-slide-to='1'></li>
<li data-target='#mycarousel' data-slide-to='2'></li>
<li data-target='#mycarousel' data-slide-to='3'></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="/media/carousel_images/staff_blogs.png" alt="Carousel Slide - ">
</div>
<div class="item">
<img class="img-responsive" src="/media/carousel_images/aarp-tax-help-slide_ZznUFS2.png" alt="Carousel Slide - ">
</div>
<div class="item">
<img class="img-responsive" src="/media/carousel_images/august_book_sale_new.png" alt="Carousel Slide - ">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
</div>
<script type="javascript" src="/static/js/bootstrap.min.js"></script>
<script>
$(document).ready( function() {
setTimeout( function() {
$('#mycarousel').carousel();
}, 15000)
});
</script>
</body>
</html>
The error I consistently get is
$(...).carousel() is not a function.
What could be the issue here? All the files are being found, and I've tried timeouts to make sure everything is loaded, but to no avail. I'm running this same setup served via PHP/MySQL, and it works, so the only variable is Django. Is there something I'm missing with loading the static files?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Please include the above lines, its working fine if I include the above.
I have here in my views a sidebar and I got problem because the sidebar aren't clickable. I don't know what's the problem I read online about this problem but I do the right thing, Please can anyone help to check this out?
Do check my code below:
I have a master.blade.php: The code below.
<!DOCTYPE html>
<html lang="en">
<head>
#include('layouts.head')
</head>
<body>
<!-- START PAGE CONTAINER -->
<div class="page-container">
#include('layouts.sidebar')
<!-- PAGE CONTENT -->
<div class="page-content">
#include('layouts.navigation')
#include('layouts.breadcrumb')
<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
#yield('content')
</div>
<!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTENT -->
</div>
<!-- END PAGE CONTAINER -->
#include('layouts.messagebox')
<!-- START PRELOADS -->
<audio id="audio-alert" src="audio/alert.mp3" preload="auto"></audio>
<audio id="audio-fail" src="audio/fail.mp3" preload="auto"></audio>
<!-- END PRELOADS -->
<!-- START SCRIPTS -->
<!-- START PLUGINS -->
{{HTML::script('js/plugins/jquery/jquery.min.js');}}
{{HTML::script('js/plugins/jquery/jquery-ui.min.js');}}
{{HTML::script('js/plugins/bootstrap/bootstrap.min.js');}}
<!-- END PLUGINS -->
<!-- START THIS PAGE PLUGINS-->
{{HTML::script('js/plugins/icheck/icheck.min.js');}}
{{HTML::script('js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js');}}
{{HTML::script('js/plugins/scrolltotop/scrolltopcontrol.js');}}
{{HTML::script('js/plugins/morris/raphael-min.js');}}
{{HTML::script('js/plugins/morris/morris.min.js');}}
{{HTML::script('js/plugins/rickshaw/d3.v3.js');}}
<!-- {{HTML::script('js/plugins/rickshaw/rickshaw.min.js');}} -->
{{HTML::script('js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js');}}
{{HTML::script('js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js');}}
{{HTML::script('js/plugins/bootstrap/bootstrap-datepicker.js');}}
{{HTML::script('js/plugins/owl/owl.carousel.min.js');}}
{{HTML::script('js/plugins/bootstrap/bootstrap-select.js');}}
<!-- END THIS PAGE PLUGINS-->
<!-- START TEMPLATE -->
{{HTML::script('js/ixepms.js');}}
<!-- {{HTML::script('js/settings.js');}} -->
{{HTML::script('js/plugins.js');}}
{{HTML::script('js/actions.js');}}
{{HTML::script('js/demo_dashboard.js');}}
<!-- END TEMPLATE -->
<!--START DATA TABLE TEMPLATES PLUGIN-->
{{HTML::script('js/plugins/datatables/jquery.dataTables.min.js')}}
<!--END DATA TABLE TEMPLATES PLUGIN-->
#yield('script')
#yield('department_script')
<!-- END SCRIPTS -->
</body>
</html>
As what you have noticed in the code, I #include in the masterpage a sidebar
layouts/sidebar.blade.php : Code below
<!-- START PAGE SIDEBAR -->
<div class="page-sidebar">
<!-- START X-NAVIGATION -->
<ul class="x-navigation">
#include('layouts.profile')
<li class="xn-title">Navigation</li>
<li class="xn-openable">
<span class="fa fa-dashboard"></span> <span class="xn-text">Dashboards</span>
<ul>
<!-- <li><span class="fa fa-desktop"></span> <span class="xn-text">General Dashboard</span></li> -->
<li><span class="fa fa-desktop"></span> <span class="xn-text">General Dashboard</span></li>
<li><span class="fa fa-desktop"></span> <span class="xn-text">My Dashboard</span></li>
</ul>
</li>
<li class="xn-openable">
<span class="fa fa-users"></span> <span class="xn-text"> Manage Users</span>
<ul>
<li><span class="fa fa-file"></span> <span class="xn-text">Users</span></li>
<li><span class="fa fa-file-text"></span> <span class="xn-text">Add New User</span></li>
<li><span class="fa fa-file-text-o"></span> <span class="xn-text">View Profile</span></li>
<li><span class="fa fa-file-text-o"></span> <span class="xn-text">Deactivated Users</span></li>
</ul>
</li>
<li class="xn-openable">
<span class="fa fa-files-o"></span> <span class="xn-text">Assessment</span>
<ul>
<li><span class="fa fa-file"></span> <span class="xn-text">Do My Assessment</span></li>
<li><span class="fa fa-file-text"></span> <span class="xn-text">Peer Assessment</span></li>
<li><span class="fa fa-file-text-o"></span> <span class="xn-text">Supervisorial Assessment</span></li>
</ul>
</li>
<li>
<span class="fa fa-folder-open"></span> <span class="xn-text">Manage Assessments</span>
</li>
</ul>
<!-- END X-NAVIGATION -->
</div>
<!-- END PAGE SIDEBAR -->
Can you check why does my sidebar aren't clickable?
Use element inspector... you might have some element (like a div, perhaps .page-content) over your side bar.
In my current piece of code when i try to collapse a letter it collapses the first div of the content when it should collapse all the divs within a letter header - i am not sure how to alter my JavaScript to properly collapse divs within a div.
<div class="accordion-group" data-bind="foreach: Types">
<div class="text_x-large header"> <span data-bind="text:Name()"></span>
</div>
<div class="testing" data-bind="foreach: Users">
<!-- ko if: Letter -->
<div class="text_x-large letterHeader list_accordion_toggle" data-bind="visible: $parent.ShowLetter(), text: Letter"></div>
<!-- /ko -->
<div class="type_list_item smoke_hover" data-bind="template: { name: 'list'}"></div>
</div>
</div>
JavaScript
$(document).on('click', '.list_accordion_toggle', function (event) {
$(this).toggleClass('type_list_item collapse').next().toggle();
});
One approach is to adjust your markup to include a containing DIV element. Like so: jsFiddle
EDIT:
Knockout allows you to set your own markup, so you should be able to modify it like this:
<div class="accordion-group" data-bind="foreach: Types">
<div class="text_x-large header"> <span data-bind="text:Name()"></span>
</div>
<div class="testing" data-bind="foreach: Users">
<!-- ko if: Letter -->
<div class="text_x-large letterHeader list_accordion_toggle" data-bind="visible: $parent.ShowLetter(), text: Letter"></div>
<!-- /ko -->
<div class="wrapper">
<div class="type_list_item smoke_hover" data-bind="template: { name: 'list'}"></div>
</div>
</div>
</div>