When I use Summernote and jQuery UI Sortable, I can sort items but cannot input text into the textareas. How can I accomplish it?
HTML
<ul class="sortable-list">
<li>
<h2>Textarea 1</h2>
<textarea name="textarea_1" id="textarea_1" class="summernote">
</textarea>
</li>
<li>
<h2>Textarea 2</h2>
<textarea name="textarea_2" id="textarea_2" class="summernote">
</textarea>
</li>
<li>
<h2>Textarea 3</h2>
<textarea name="textarea_3" id="textarea_3" class="summernote">
</textarea>
</li>
</ul>
JavaScript
$('.summernote').summernote();
$('.sortable-list').sortable({
axis: 'y'
}).disableSelection();
Please see also jsfiddle:
http://jsfiddle.net/L4pq1fad/
I got the answer in GitHub issue.
https://github.com/summernote/summernote/issues/1174#issuecomment-115235983
The JS should be:
$('.summernote').summernote();
$('.sortable-list').sortable({
handle: "h2",
axis: 'y'
});
sanchezzzhak created jsfiddle: http://jsfiddle.net/sanchezzzhak/L4pq1fad/3/
Related
Using angular dart, I have a material dialog with a basic list on it. When the dialog shows I want the end user to be able to navigate the list with the arrow keys (up/down).
<modal *ngIf="visible" [visible]="visible">
<material-dialog headered class="headered-dialog">
<div header>
<h1>List Demo</h1>
</div>
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
<div class="list-body form-control">
<ul>
<li *ngFor="let item of items; let i=index">
<div>{{item.name}}</div>
</li>
</ul>
</div>
</form>
</material-dialog>
</modal>
package:angular_components provide a MaterialListComponent and FocusListDirective that support up/down navigation
https://dart-lang.github.io/angular_components/#/material_list
You can use them together as follow
<material-list focusList>
<material-list-item *ngFor="let item of items; let i=index">
<div>{{item.name}}</div>
</material-list-item>
</material-list>
Never tried but you should also be able to use the FocusListDirective on any element.
<ul focusList>
<li *ngFor="let item of items; let i=index">
<div>{{item.name}}</div>
</li>
</ul>
HTML:
<div id="my-id">
<li class="list_element">
<div class="my_class"></div>
</li>
<li class="list_element">
<div class="another_class"></div>
</li>
<li class="list_element">
<div class="class3"></div>
</li>
</div>
What I want to do with behat/mink:
$page = $this->getSession()->getPage();
$selector = $page->find('css', "#my-id .my_class"); //here I need anchor element located near to .my_class div.
I don't know in which one .list_element .my_class div is. I know only anchor is next to .my_class element. Which selector should I use in the find() function?
Try one of these:
#my-id .my_class ~ a
#my-id .my_class + p
#my-id .list_element a
This is too basic question.Please see more here w3schools
Can someone please help me. I'm trying to select an option from the drop down list using selenium IDE but not able to. Below is the HTML.I tried to use "Select"Command with xpath in target but not able to select from the options
<select id="age" class="default chzn-done"onfocus="javascript:setOmnitureFallout('birthdate');"name="ctl00$ContentPlaceHolder1$age" style="display: block; visibility: hidden;" tabindex="21">
<option value="0">0 - 11 months</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
</select>
<div id="age_chzn" class="chzn-container chzn-container-single chzn-container-active" style="width: 200px;" tabindex="21">
<a class="chzn-single" tabindex="-1">
<span style="background-color: transparent;">2 years</span>
<div>
<b/>
</div>
</a>
<div class="chzn-drop" style="left: -9000px; width: 198px; top: 41px;">
<div class="chzn-search" style="">
<ul class="chzn-results">
<li id="age_chzn_o_0" class="active-result" style="">Select one</li>
<li id="age_chzn_o_1" class="active-result" style="">0 - 11 months</li>
<li id="age_chzn_o_2" class="active-result" style="">1 year</li>
<li id="age_chzn_o_3" class="active-result result-selected" style="">2 years</li>
<li id="age_chzn_o_4" class="active-result" style="">3 years</li>
</ul>
This is how I would use a 'select' command in general:
Using select command
For the select element locator I would usually use it's xpath and for the option locator I would use label which can be specified as a regex. For example:
label=regexp:^This_Matches_the_Option_I_want_to_Select$
Hope this helps.
We can give you a more specific answer if you post the html code snipet of the page you are working on and the code you have already written.
Let me know in case you have any questions.
dunno whats going on with my image slider under the 'support' tab section its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But, when you inspect element all of a sudden the 'support' orbital image slider looks normal. This is with the foundation framework.
here's a link to see the bug:
http://www.omegadesignla.com/virtual/
and some html:
<div class="content" id="panel6">
<div class="row">
<div class="large-4 columns">
<h3> OFLVS Contact Info:</h3>
<ul>
<li>Student Support</li>
<li>Parent Support</li>
<li>Support links and resources</li>
</ul>
</div>
<div class="large-8 columns">
<ul class="example-orbit" data-orbit>
<li>
<img src="imgs/flash3.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="imgs/flash12.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="imgs/flash9.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
Learn More
Sign Up
</div>
javascript:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('reflow');
}
},
orbit: {
pause_on_hover: false,
timer_speed: 6000
}
});
I think your error stems from the fact that the orbit slider is in the tab content section. I had a similar error with a range slider in a tab section.
Try reflowing the javascript in a JS file with a tab callback like so:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('orbit', 'reflow');
}
}
});
EDIT: I've corrected my answer and added a working fiddle.
I have a routing related question.
App.Router.map(function(){
this.resource('whiteBoards',function(){
this.resource('whiteBoard',{path:'/:whiteBoard_id'},function(){
this.resource('image');
this.resource('video');
});
});
this.resource('dummy');
});
App.WhiteBoardsRoute = Ember.Route.extend({
model: function(){
return this.store.find('whiteBoard');
}
});
App.ImageRoute = Ember.Route.extend({
model: function(){
return this.store.find('image');
}
});
If I click all navigational links manually all things works as expected.
my templates:
<script type="text/x-handlebars" data-template-name="application">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="navbar-brand" href="/index.html">Routing Test</a>
</div>
<ul class="nav navbar-nav">
<li>{{#link-to 'whiteBoards'}}WhiteBoard{{/link-to}}</li>
<li>{{#link-to 'dummy'}}Dummy{{/link-to}}</li>
</ul>
</div>
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="whiteBoards">
<ul class="nav nav-tabs whiteBoards">
{{#each whiteBoard in controller.content}}
<li>
{{#link-to 'whiteBoard' whiteBoard}}{{whiteBoard.title}} {{/link-to}}
</li>
{{/each}}
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="whiteBoard">
<div class="whiteBoard">
<H3>WhiteBoard {{controller.content.name}}</H3>
</div>
<ul class="nav nav-tabs">
<li>
{{#link-to 'image'}}Images{{/link-to}}
</li>
<li>
{{#link-to 'video'}}Videos{{/link-to}}
</li>
</ul>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="image">
<div class="imagelist">
<H3>Images</H3>
<ul>
{{#each img in controller.content}}
<li>{{img.name}}</li>
{{/each}}
</ul>
</div>
</script>
The problem occurs if I try to activate the image route (as default child route) in combination with a whiteBoard navigation click.
This mean If I select a whiteBoard a list of images should also be shown (here only a simplified image list).
To achieve this I insert:
App.WhiteBoardIndexRoute = Ember.Route.extend({
redirect: function(){
this.transitionTo('image');
}
});
The first time it works as expected (the selected whiteBoard is shown and the image list).
If I try to navigate to another whiteBoard the problems begins.
After inserting WhiteBoardIndexRoute I can't navigate to another whiteBoard.
What is the problem ?
I'm working with ember.js verion 1.0
I known that I can implement the display of the image list using the renderTemplate method in the WhiteBoardRoute but I think that it should be possible to use the "default child route concept".