Here's the link: http://mindmup.github.io/bootstrap-wysiwyg/. I can't get it to work. I've included the script like that:
<script src="js/bootstrap-wysiwyg.js"></script>
And done like this:
<div id="alerts"></div>
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
<li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
<li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
<a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
<a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
<a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
<a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
<a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
<a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
<a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
<div class="dropdown-menu input-append">
<input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
<button class="btn" type="button">Add</button>
</div>
<a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
</div>
<div class="btn-group">
<a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</div>
<div class="btn-group">
<a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
<a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
</div>
<input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
</div>
<div id="editor">
Go ahead…
</div>
And it still doesn't show the editor. It shows the buttons and that things, but the editor isn't shown. I'm really now to using JavaScript and those things, if anyone could explain it a bit deeply, I would be grateful.
Also, on Chrome developer tools console, I get this error:
Uncaught TypeError: Cannot read property 'fn' of undefined bootstrap-wysiwyg.js:17
here's line 17:
$.fn.cleanHtml = function () {
You need the bootstrap library also, which also requires the jQuery library, add those both in head tags of your html. (first jQuery, then boostrap.js, then wsiwyg).
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
You should include also index.css in the head section of your HTML file. Like so:
<link href="path_to_your_css_files/index.css" rel="stylesheet">
You can copy its content from here
I know this is an old thread, but hopefully it may help someone coming upon it years later like myself with other issues.
Anyway, I was encountering the same problems, and here's what I did:
The Cannot read property 'fn' was due to the browser being unable to
locate the jquery script, as I had it referenced in a block at the
bottom of my base.html file vs the <head>. I'm certain there's an
optimal way to handle your scripts across templates without placing
them in the <head> of the base.html and incurring a performance hit,
but i'm just starting out so I'm not sure what that may be.
Regarding what to do with $('#editor').wysiwyg(); - you place this
in a script tag at the bottom of the html file that houses your
"#editor" div.
The reason its just a "box" is that they lightly touch on needing to
add a toolbar, but don't provide the entire code for it. However,
you can harvest it from the demo page if you inspect it. As of this
post it should start with something like the following:
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
...
</div>
Related
So, what I want to do is open a URL that I am providing in href and at the same time open a new html page. On button click it leads to the URL in a new window with target="_blank". But what I want to do is open the link in the new window and also open a new HTML page in the previous window.
Below is my code,
<li class="search-li">
<div class="collapsible-header collapsible-noborder sakura-lighter-bg">
<i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
</div>
<div class="collapsible-body collapsible-noborder sakura-midlight-bg">
<button class="primary download">
<a id="buttton1" class="buttton7" target="_blank" href="example.com">Download</a>
</button>
</div>
</li>
Something like this
Test page
The click will open a new window with the data-href and change existing window with href
window.addEventListener("load", function() {
document.getElementById("button1").addEventListener("click", function() {
window.open(this.getAttribute("data-href"), "_blank")
})
})
<li class="search-li">
<div class="collapsible-header collapsible-noborder sakura-lighter-bg">
<i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
</div>
<div class="collapsible-body collapsible-noborder sakura-midlight-bg">
<a id="button1" class="primary download button7"
data-href="https://example1.com"
href="https://example2.com">Download</a>
</div>
</li>
You need to use window.open() method.
<li class="search-li">
<div class="collapsible-header collapsible-noborder sakura-lighter-bg">
<i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
</div>
<div class="collapsible-body collapsible-noborder sakura-midlight-bg">
<button class="primary download">
<a onclick="window.open('http://google.com');" id="buttton1" class="buttton7" href="https://www.w3schools.com" >Download</a>
</button>
</div>
</li>
You can use This
<button onclick="window.location.href='page2.html'">Go to another page in your folder</button>
or you can use a link like that
<button onclick="window.location.href='https://example.com/'">Go to another page in an URL</button>
Below should do the job:
<a onclick="window.open('http://google.com');" id="buttton1"
class="buttton7" href="http://yahoo.com">Download</a>
No need of _blank since window.open() does that for us, while the current window updates its location from href attribute
<!DOCTYPE html>
<html>
<body>
<li class="search-li">
<div class="collapsible-header collapsible-noborder sakura-lighter-bg">
<i class="fa fa-mobile-alt" aria-hidden="true"></i>TEST LIST
</div>
<div class="collapsible-body collapsible-noborder sakura-midlight-bg">
<button class="primary download">
<a id="buttton1" onmouseup="window.location.replace('/blank.html');" class="buttton7" target="_blank" href="example.com">Download</a>
</button>
</div>
</li>
</body>
</html>
So I have a jQuery repeater form and it works perfectly fine when I use it as it is but I want to tweak the delete button effect. It has "slideup" jQuery effect but I want to change it my own effect so I have tried few methods but I haven't able to delete the items in the form.
Below is my code and methods I have tried.
form.html
<form role="form" action="//" method="post" class="mt-repeater form-horizontal">
<div data-repeater-list="group-a">
<div class="mt-repeater-input">
<label>Organization</label>
<input type="text">
</div>
<div class="mt-repeater-input">
<a href="javascript:;" data-repeater-delete class="btn btn-danger mt-repeater-delete inp-del">
<i class="fa fa-close"></i> Delete</a>
</div>
</div>
<div style="border-bottom: 1px solid #ddd;padding-bottom: 10px;">
<a href="javascript:;" data-repeater-create class="btn btn-success mt-repeater-add uadd_btn">
<i class="fa fa-plus"></i> Add</a>
</div>
<input type="submit" class="u-submit" value="Save Changes" />
</form>
Actual form-repeater.min.js
var FormRepeater=function(){return{init:function(){$(".mt-repeater").each(function(){$(this).repeater({show:function(){$(this).slideDown(),$(".date-picker").datepicker({rtl:App.isRTL(),orientation:"left",autoclose:!0})},hide:function(e){$(this.slideUp(e)},ready:function(e){}})})}}}();jQuery(document).ready(function(){FormRepeater.init()});
The above JS works fine because I haven't tweaked anything inside the JS code. But in below code I tweaked as per my requirement as you can see I changed $(this.slideUp(e) to $(this).css("background","red"). So the effect works fine but it doesn't delete the item. How can I achieve my requirements using below code?
Tried form-repeater.min.js
var FormRepeater=function(){return{init:function(){$(".mt-repeater").each(function(){$(this).repeater({show:function(){$(this).slideDown(),$(".date-picker").datepicker({rtl:App.isRTL(),orientation:"left",autoclose:!0})},hide:function(e){$(this).css("background","red")},ready:function(e){}})})}}}();jQuery(document).ready(function(){FormRepeater.init()});
Hi guys how would you click this link/Button I cant get any method to work, i have tried:
$('btn btn-large btn-info btn-embossed').children('a').click();
$('visit-trigger').trigger('click');
document.querySelector("visit-trigger").click();
I have tried all the names and class I could find not only the : visit-trigger class.
Website if you want to try your self
<div class="expandable ng-scope" ng-include="entryMethodView(entry_method)">
<form class="entry_details compact-box form-compact ng-pristine ng-valid ng-scope" name="entryDetailsForm">
<div class="form-compact__content center">
<div class="form-compact__part">
<p>Click here to ensure you are subscribed:</p>
</div>
<div class="form-compact__part">
<p class="visit-trigger">
<a class="btn btn-large btn-info btn-embossed" ng-href="https://youtube.com/user/videochumstube?sub_confirmation=1" rel="noopener" target="_blank" href="https://youtube.com/user/videochumstube?sub_confirmation=1">
<i class="fa fa-youtube"></i>
Subscribe here
</a>
</p>
</div>
</div>
visit-trigger is a class so use class selector
$('.visit-trigger').trigger('click');
//-^-------here
or
$('.btn-embossed').click(); // to fire the click event of `a`
Anyways most important part is use proper selectors. . for class, # for ids and so on.
I am playing with Fuel UX pillbox component and I want to make it part of a form I have to submit. Unfortunately, the control does not contain any form element to submit which makes it cool but useless (for me). I added a Input::Hidden element in the HTML code but now I have to force the pillbox component to work with the form element which I am not sure how to do.
<div class="form-group">
<label for="{name}" class="col-sm-4 control-label text-right">Tags</label>
<div class="col-sm-8">
<div class="pillbox" data-initialize="pillbox" id="pillbox-{name}">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
<input type="hidden" name="{name}" id="{name}" value="">
</div>
</div>
What I really need is to use JavaScript to update the Input::Hidden element when a new tag is added or removed from the list.
Oh, JavaScript is not my forte.
The Fuel UX component has event for add and remove new tag the probably has to be used but as I mentioned - not sure how to implement it.
If you have any suggestions, please help, or if you have any other suggestions on how to implement the Pillbox component with a HTML form - I am opened to new ideas.
Thanks.
You could use the Pillbox events to capture the pillbox data via the items method.
HTML:
<div class="pillbox" id="myPillbox1">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
</div>
<input id="pillboxInput" type="text" value="">
Javascript:
$('#myPillbox1').on('added.fu.pillbox edited.fu.pillbox removed.fu.pillbox', function pillboxChanged() {
$('#pillboxInput').val( JSON.stringify( $('#myPillbox1').pillbox('items') ) );
});
This example outputs into a JSON object structure, since the pillbox control supports text and value attributes (and more with data attributes) for each pill.
I am trying to add tooltip to Bootstrap, tried all solutions found on internet - nothing helps. Here is my dropdown(I am also using String and jstl tags):
<div class="btn-group" style="margin-bottom:5px; width: 100%;">
<a id="tableNameButton" data-placement="bottom" title="Text" class="my-tooltip my-dropdown tableNameButton btn btn-default btn-block btn-select" data-toggle="dropdown" href="#">Select table <span class="caret"></span></a>
<form:input class="form-control" id="tableNameFormId" path="tableName" style="visibility: hidden; display: none;" />
<ul id="tableName" class="dropdown-menu scrollable-menu">
<c:forEach items="${databaseTables}" var="databaseTable">
<li>${databaseTable}</li>
</c:forEach>
</ul>
</div>
And on javascript:
$('.my-dropdown').dropdown();
$('.my-dropdown').tooltip();
This thing doesn't work.
Hope someone already solved this problem, thanks in advance.
Check you have linked everything up correctly and included the bootstrap.js file. I have set up a JSFIDDLE with your code and the tooltip works:
http://jsfiddle.net/shannabarnard/ueoxmm9v/
<div class="btn-group" style="margin-bottom:5px; width: 100%;">
<a id="tableNameButton" data-placement="bottom" title="Text" class="my-tooltip my-dropdown tableNameButton btn btn-default btn-block btn-select" data-toggle="dropdown" href="#">Select table <span class="caret"></span></a>
<form:input class="form-control" id="tableNameFormId" path="tableName" style="visibility: hidden; display: none;" />
<ul id="tableName" class="dropdown-menu scrollable-menu">
<c:forEach items="${databaseTables}" var="databaseTable">
<li>${databaseTable}</li>
</c:forEach>
</ul>
</div>
JS
$('.my-dropdown').dropdown();
$('.my-tooltip').tooltip();
I suppose it doesn't work because you didn't add data-attributes like data-toggle and data-placement. Try to add them and I think it'll work.
See fiddle with working example: http://jsfiddle.net/h56xw8wq/1/
You should have smth like
<li class="dropdown" id="example" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" > ... </li>
Hope it'll help you:)