I have some troubles to make Reveal work properly from a dynamic link.
This is working fine if the link is loaded with the page. If the link is appended later on, it won't work:
<div id="deleteConfirm" class="reveal-modal" data-reveal>
Delete Confirm Modal
</div>
<a data-modal="deleteConfirm">Test</a>
JS:
$('body').on('click','a[data-modal]',function(){
$(document).foundation();
$('#deleteConfirm').foundation('reveal', 'open');
});
You need to use reflow. I assume that you are loading some html using ajax which includes a reveal link
If you have div#ajax-content you can use the following javascript
$(document).on('replace', '#ajax-content', function (e, new_path, original_path) {
$(document).foundation('reveal', 'reflow');
});
Related
On this page there is a slider updating a input box with example HTML code. You can also see that same code in the source.
I would like to use this in my application so I transplanted it into my code and converted it to Jade (aka Pug). The source now looks like:
div.row
div.small-10.columns
div.range-slider(data-slider data-options="display_selector: #days-off-count; initial: 28;")
span.range-slider-handle(role="slider" tabindex="0")
span.range-slider-active-segment
div.small-2.columns
input(type="number" id="days-off-count" value="28")
And the resulting html looks like this (after prettifying it):
<div class="row">
<div class="small-10 columns">
<div data-slider data-options="display_selector: #days-off-count; initial: 28;" class="range-slider">
<span role="slider" tabindex="0" class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="days-off-count" value="28">
</div>
</div>
Which is very close that shown on in the docs. However on the resulting page the input box is not updated. If I change the input box to a span like in the
'With Label' example it updates.
span(id="days-off-count" value="28")
becomes
<span id="days-off-count" value="28"></span>
I have the foundation.js and the .slider.js included at the bottom of the page.
In addition, if I manually change the value of the input box via the keyboard the slider will jump to that position, so there is some sort of link there.
The software being used:
Ubuntu 14_04
Chrome
Node v0.10.25
Express 4.14.0
Jade 1.11.0
Foundation v5.5.0
Other things to note:
The page has more than one slider so any javascript solutions need to take this into account.
I think this is a bug (hasOwnProperty instead of hasAttribute #6221) in the version of Foundation (5.5.0) you're using. It seems that while it initially applied only to Firefox, it now applies to Chrome too.
Example with (broken) sliders from 5.5.0: jsfiddle.net/tymothytym/jth99pkw/3
Example with (working) sliders from 5.5.3: jsfiddle.net/tymothytym/tw1we8fk/3
The bug was fixed here: https://github.com/zurb/foundation-sites/commit/896e81f1275eefbbdb84ce4da9004ab059b26d45
Basically, go to foundation.slider.js and change this (line 157):
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasOwnProperty('value')) { // this is the mistake / bug
$(this).val(value);
} else {
$(this).text(value);
}
});
}
to this:
if (settings.display_selector != '') {
$(settings.display_selector).each(function(){
if (this.hasAttribute('value')) { // this should fix it
$(this).val(value);
} else {
$(this).text(value);
}
});
}
This is not my fix, it's the same as the patch, but it should mean that when you do upgrade you don't need to modify your application code to account for a workaround.
1) Maybe I be wrong... but you didn't specify the version, you give an example from Foundation v5... are you not have installed Foundation v6?
Try this example : https://foundation.zurb.com/sites/docs/slider.html
2) After you include your js files, you need to have this:
<script>
$(document).foundation();
</script>
Edit: Sorry, first time I didn't read all, maybe the problem is that the Foundation use the "value" attribute, which is an attribute designed for <input> tags:
value <button>, <input>, <li>, <option>, <meter>, <progress>, <param> Specifies the value of the element
Source: https://www.w3schools.com/tags/ref_attributes.asp
I'm trying to get Slick Nav working and I'm currently testing it unsuccessfully on an empty page online. Locally it works perfectly, but it just doesn't want to run online - even if its the identical code. I have put the files from the "dist" folder from the slick nav download into a folder called "SlickNav" on my main folder on my FTP-Server (just like I did it locally). My test page contains the following:
<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="SlickNav/jquery.slicknav.min.js"></script>
// I already tried putting my URL before the link rel and the script src above but it didn't help
<script>
$(function(){
$('#menu').slicknav({
label: "MENU"
});
});
<ul id="menu">
<li><a class="scroll" href="#features">Features</a></li>
<li><a class="scroll" href="#usage">Usage Instructions</a></li>
<li><a class="scroll" href="#examples">Examples</a></li>
<li>View on Github</li>
</ul>
I'm trying this for over 3 hours now and I just don't see it anymore.. perhaps someone had similar problems or simply sees the (probably dumb) mistake, I would be eternally grateful..
Found the solution after inspecting the console: For the code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
which I simply copy and pasted had to be changed to match the https of my site -> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
I have recently decided to do a major upgrade with my javascript libraries and have ran into a perplexing issue with appending Ember.Views. I have been researching this issue for several hours now and have tried many things but nothing has worked.
What I want to do is quite simple: Extend Ember.View, manually create a new instance of this extended view and then append it to a div. In a much earlier version (ember.js 1.5) this was extremely straightforward. Now (ember.js 1.9) attempting the same thing results in an error.
Container was not found when looking up a views template. This is most
likely due to manually instantiating an Ember.View. See:
http://git.io/EKPpnA
Here is a very simple example that demonstrates this: http://jsfiddle.net/81dhm3ta/
html
<body>
<script data-template-name="main" type="text/x-handlebars">
Main
</script>
<div id="main" style="text-align: center;"></div>
</body>
javascript
$(document).ready(function () {
App = Ember.Application.create();
App.MainView = Ember.View.extend({
templateName: 'main',
});
App.view = App.MainView.create();
App.view.appendTo("#main");
});
Can someone show me the simplest way to do this properly?
App.view is neither a D0M element or jQuery object that you can simply append to a div. It is an Ember object of type View.
In the link given by the error, you are clearly told that you can't create views like you did in your snippet. Dynamic views must be instantiated within a parent view or directly through the container (not recommended).
Your life will be much easier if you add views within a template by just using the view helper:
<script type="text/x-handlebars" data-template-name="index">
{{view 'main'}}
</script>
I am attempting to render the HTML in a tooltip, but unfortunately its not working at all.
This is how it has been programmed:
<div class="someField"></div>
<script>
$(function () {
$('.someField').append('(Example)');
$("body").tooltip({html:true,selector: '[data-toggle=tooltip]'});
});
</script>
I have set data-html="true" in the link and furthermore enabled html in the tooltip parameter.
Whats wrong with my code?
UPDATE:
Bootstrap v2.3.1 is used for this project (old framework).
Try this:
$("body").tooltip({ html: true, selector: '[data-toggle="tooltip"]' });
WORKING DEMO
I am using Twitter Bootstrap's modals throughout a web application. I am also using Mustache templates to generate the information to display inside the modals. The problem is that I find myself creating new modals for nearly every single form that is rendered to the screen and I feel that this violates DRY. I am considering creating a global modal object that is defined in the 'window' object and can be accessed throughout my application. When I want to display a new form I just render the form into the global modal object and then show it. Can anyone give me some advice on how to better handle numerous forms with modals?
I think you have the right idea. If you have a lot of modals, creating new ones can get repetitive. I've done something similar to what you proposed: create a single modal object that can be reused for a variety of modals.
In the past I used jQuery dialog, but the principle is entirely the same. Create a JavaScript module with some boilerplate HTML, that you can use to display any number of forms (essentially HTML content).
I'll try to propose a very basic implementation without knowing too much about your application.
HTML based from the Bootstrap example here:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="dynamicHeader">
<!-- Our header will go here -->
</h3>
</div>
<div class="modal-body" id="dynamicBody">
<!-- Our body will go here -->
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Notice the unique id's I've added to the h3 and the div.modal-body. We'll use those in JavaScript to dynamically inject each form's title and content.
JavaScript:
var ModalManager = (function() {
// cache some DOM references
var $dynamicHeader = $('#dynamicHeader');
var $dynamicBody = $('#dynamicBody');
var $myModal = $('#myModal');
var launch = function(header, body) {
$dynamicHeader.html(header);
$dynamicBody.html(body);
$myModal.modal(/* options here */);
};
return {
launch: launch
/* expose more API methods here! */
};
}());
Here is an example usage!
HTML w/ JavaScript:
<div id="form1">
<div class="formHeader">
Form One
</div>
<div class="formBody">
<p>Html and stuff</p>
</div>
</div>
<script type="text/javascript">
// Using a closure to protect globals
// This would probably go in your click handler to launch a given modal
(function() {
var headerHtml = $('form1 .formHeader').html();
var bodyHtml = $('form1 .formBody').html();
ModalManager.launch(headerHtml, bodyHtml );
}());
</script>
Finally, I wrapped all of that up in a jsFiddle which demonstrates the ability to launch two different forms.
Link: jsFiddle
I used jQuery as it should be included with the Bootstrap code for the modal. It will pull out the header and body HTML that are specific to each form, and populate your common modal HTML in the DOM. Then when you launch the modal it will display what looks like a different modal, but you've centralized the common aspects so you're not repeating them anymore!
There's a lot more you can do but that's basically the gist. My own implementation exposed means to configure the buttons dynamically, for example. Depending on what you want configurable, you can add an options parameter that passes on to the modal() function, or has other properties specific to your application that ModalManager can handle. You can definitely use templating to carry out some of these features, it's just not essential to the example I've setup.
I hope that helps!
I'm not quite sure what you are asking. Mustache does have looping functionality, so you could pass in an array of modals, and Mustache should generate all of the code.
I actually just created a video showing how to build a Mustache template for Twitter Bootstrap's Alert component, and implement it via PHP and JavaScript. It also features the looping functionality I spoke of. Maybe that will help? Here is the link: http://mikemclin.net/mustache-templates-for-php-and-javascript/