I have the following nav menu made with bootstrap toggle where only the first element of the list is being showed, no matter which one it is. I tried replacing the first element with another one and I get the same behaviour so this makes me believe that the html code is working.
<a href="#getting-started" class="list-group-item list-group-item-
success" data-toggle="collapse" data-parent="#admin-menu"><span></span><i
class="fa fa-tachometer fa-lg" aria-hidden="true"></i>Getting Started<i
class="fa fa-caret-down"></i></a>
<div class="collapse sp" id="getting-started">
<a class="navlink list-group-item" href="software.html">General
Information</a>
<a class="navlink list-group-item"
href="install_linux.html">Linux Installation</a>
<a class="navlink list-group-item"
href="install_win.html">Windows Installation</a>
<a class="navlink list-group-item" href="install_mac.html">Mac
Installation</a>
<a class="navlink list-group-item"
href="install_docker.html">Docker Installation</a>
<a class="navlink list-group-item"
href="lang_installation.html">Installing Languages</a>
<a class="navlink list-group-item" href="login.html">Login</a>
<a class="navlink list-group-item"
href="license.html">License</a>
<a class="navlink list-group-item"
href="releasenotes.html">Release notes</a>
</div>
I load boostrap.js jquery and the script I use works on a different site. Or if you know where I can find a script for showing an online manual with a menu on the left site. In order to check behaviour please visit https://www.dialtrix24.com/test/doc/index.html where you can find it on the left side. The pages are not populated but the script only toggles the Getting Started section, the other lower sections are not working.
Here is part of the js script:
//Navigation slide animation
$( document).ready(function() {
var str = document.URL;
var address = str.substring(str.lastIndexOf('/')+1);
// address = address.replace(/[0-9]/g, '');
$('a[href="'+address +'"]').addClass('currentPage');
$('a[href="'+address+'"]').parent('div').addClass('in').addClass('heightTest').prev ().find('.fa-lg').css( "color", "#c70000" );
//$('a[href="'+address+'"]').parent('li').addClass('heightTest');
$('a[href="'+address+'"]').parent('li').parent('ul').parent('div').parent('div').addClass('heightTest').addClass ('in').parent('div').addClass('heightTest').addClass('in').prev().find('.fa-lg').css( "color", "#c70000" );
$('.blur').click(function(e){
$(".navbar-inverse").toggleClass('whiteColor');
$('.fa- chevron-right').toggleClass('rotate1');
});
var doc_links =
[
//Getting Started----------------------------------------------
{
"name":"General Information",
"link": "software",
"type": "docs",
"data": ""
},
{
"name":"Linux Installation",
"link": "install_linux",
"type": "docs",
"data": ""
},
and so on
Thank you
The issue was resolved as it was an offset of 75px to the div containing the anchors and so I added position relative and z-index 1 and now it is working.
Related
As per attached image '7' tabs are there.
for each tab the code is as follow. The nav tag contains 7 anchor tags.
<nav id="tblDetailsLinks" class="nav modal-patient-navtabs" xpath="1">
<a href="#" onclick="objDetail.SelectTab(this, '745'); return false;" name="DetailTabLink" id="tabCases" class="nav-link modal-patient-navtabs-tab TabWidthCss" data-name="CaseManagement" data-toggle="tab" role="tab" aria-controls="Cases" aria-selected="false" style="width: 12.5%; text-align: center;">
CASES
</a>
</a>
<a href="#" onclick="objDetail.SelectTab(this, '745'); return false;" name="DetailTabLink" id="tabIntake" class="nav-link modal-patient-navtabs-tab TabWidthCss" data-name="Intake" data-toggle="tab" role="tab" aria-controls="Intake" aria-selected="false" style="width: 12.5%; text-align: center; display: none;">
INTAKE
</a>
I have to click on each and every link and just wanted to verify whether the data has been displayed or not. I have tried with the following code:
public void SecondaryDetails() throws IOException, Exception {
for(int i=0; i<tabOptionsList.size(); i++)
{
tabOptionsList.get(i).click();
Thread.sleep(3000);
if(tabOptionsList.get(i).isDisplayed())
{
System.out.println(tabOptionsList.get(i).getText() + " details has been displayed");
}
else {
System.out.println("Clicked but details has been not displayed");
softAssert.fail("Failing as tab option has been not displayed");}
softAssert.assertAll();
}
}
On every click its showing completely different data, nothing common on each click which i can mention in above code like contains text() something like.
The code is running fine clicking on each and every tab and displays the data. My question is "my above code is right to verify whether the data has been displayed on screen for all tab options after clicking on each tab/link it. Please note its also not opening a new page after every click.[![https://i.stack.imgur.com/PovCK.png] Any help will be appreciated.
I have been searching for 4 hours , cant even get my head to understand what to use
basically i want to add a new row (article tag) to a div element , everytime the user press the addbutton
in my method how can i pass this HTMLto the div :
<article class="col-md-11 col-md-offset-1 card" custom_attrib=atrrib_value> <span>
{{NEW VALUE}} - {{NEW VALUE_2}}
</span>
<span >
<button class="btn btn-theme btn-default btn-xs pull-left" #click="deleteItem" ><i class="fa fa-times inline"></i></button>
</span>
</article>
I have to say i need to put some custom attrib on the Article tag each time thats why i want to make a new tag on each request
if we take a look at this https://codepen.io/Pizzi/pen/GMOQXy
when pressing the + (add) a row drops , i want to do the same thing but the important part is the new row with article tag needs new custom_attrib and value everytime
another jsfiddle example : https://jsfiddle.net/50wL7mdz/17736/
instead of those input box will be my article with custom attrib and value
You make an array. When the user clicks "add new" you will append a new item to the array which contains HTML with two input fields. When you append it, Vuejs will re-render the HTML with the changed data.
// Vue.js
new Vue({
el: '#app',
data: {
items:[],
item:['NEW VALUE','NEW VALUE_2'],
},
created(){
this.items.push(this.item);
},
methods:
{
add()
{
this.item = ['</br><input type="text"/>','<input type="text"/></br>'];
this.items.push(this.item);
}
}
})
<h2>Vue.js</h2>
<div id="app">
<article class="col-md-11 col-md-offset-1 card" custom_attrib=atrrib_value>
<span v-for="item in items" ><span v-html="item[0]"></span> - <span v-html="item[1]"></span></span>
<span >
<button v-on:click="add" class="btn btn-theme btn-default btn-xs pull-left">
+
</button>
</span>
</article>
</div>
<!-- Vue.js -->
<script src="https://vuejs.org/js/vue.min.js"></script>
I have created a widget based template like,
<div class="content">
<div>
<!-- rest of content-->
</div>
<div class="col-md-6">
<div class="panel" data-dojo-attach-point="sysinfo">
<ul class="col-md-12 stats">
<li class="stat col-md-3 col-sm-3 col-xs-6">Host:</br> <span><b class="value">{{hname}}</b></span>
</li>
<li class="stat col-md-3 col-sm-3 col-xs-6"># CPU:</br> <span><b class="value">{{cpu}}</b></span>
</li>
</ul>
</div>
</div>
</div>
How do I update only content of sysinfo ?
Till now I was doing,
var widget = this;
widget.template = new dtl.Template(widget.templateString);
var template = widget.template;
template.update(node, stats); // but it update complete content as node == content. I just want to refresh sysinfo.
I also tried,
template.update(this.sysinfo, stats); // but it throws exceptions
Any ideas?
As far as I can see is that when you're using dojox/dtl/_Templated as suggested in the documentation, there is no update() function available.
If you really wish for certain things, you will have to manually define a template and render that one (and replace the attach point), for example:
var subtemplate = "<ul data-dojo-attach-point='sysinfo'>{% for item in list %}<li>{{item}}</li>{% endfor %}</ul>";
var template = "<div><h1>{{title}}</h1>" + subtemplate + "</div>";
var CustomList = declare("custom/List", [ _WidgetBase, _Templated, _DomTemplated ], {
templateString: template,
subTemplate: new dtl.Template(subtemplate),
title: "Fruits",
list: [ 'Apple', 'Banana', 'Lemon' ],
_setListAttr: function(list) {
this.list = list;
this.sysinfo = domConstruct.place(this.subTemplate.render(new dtl.Context(this)), this.sysinfo, "replace");
},
_getListAttr: function(list) {
return this.list;
}
});
Normally, if you would update the template when the list is set, you could use this.render() inside the _setListAttr() function to update the entire template.
However, as you can see in the _setListAttr() function I'm replacing an attach point by a newly rendered Django template.
This results in only that part of the template being updated, in stead of the entire template. So {{title}} would remain the original value, even when changed.
A full example can be found on JSFiddle: http://jsfiddle.net/pb3k3/
I'm generating a list of links and they have not the same text but I don't know how to put a text with knockout.
This is what I have:
<a data-bind="attr: { href: 'Controller/Method/' + Id, 'Title': CurrentTask }">
<!-- I need the name of the CurrentTask here-->
CurrentTask
</a>
So, the text I want to show appears only in the "alt" property but not in the text of the link. It works but I need that the name of the CurrentTask be the link and now it's just showing me everything like this:
<a href...>CurrentTask</a>
<a href...>CurrentTask</a>
<a href...>CurrentTask</a>
<a href...>CurrentTask</a>
and I need this
<a href...>I get this data from de controller</a>
<a href...>Sometext</a>
<a href...>OtherText</a>
<a href...>Anything</a>
Use the text binding.
<a data-bind="attr: { href: 'Controller/Method/' + Id, 'Title': CurrentTask }, text: TaskName">
</a>
Is there any way to add buttons to TitlePane header(right side of title bar), so that i can do some operations(download,delete...)
Thanks in advance.
dijit TitlePane header contains the following
<div class="dijitTitlePaneTitleFocus" data-dojo-attach-point="focusNode" aria-pressed="true" role="button" aria-controls="dijit_TitlePane_0_pane" tabindex="0">
<span data-dojo-attach-point="arrowNode" class="dijitInline dijitArrowNode" role="presentation"></span><span data-dojo-attach-point="arrowNodeInner" class="dijitArrowNodeInner">-</span><span data-dojo-attach-point="titleNode" class="dijitTitlePaneTextNode" style="user-select: none;">Rule</span>
<span class="dijit dijitReset dijitInline dijitButton" role="presentation" widgetid="dijit_form_Button_1">
<span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation">
<span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_1_label" tabindex="0" id="dijit_form_Button_1" style="user-select: none;">
<span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar"></span>
<span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_1_label" data-dojo-attach-point="containerNode">x</span></span></span></span>
</div>
As you see there are several attach points we can reference.
To add any item, even a dijit or custom widget do the following to place items after the last in the focusNode attach point (note: you have to style it correctly in order for items to appear in the position you want)
var myTitlePane = new TitlePane({ title: "TitlePane" });
var deleteButton = new Button({
label: 'x',
onClick: function () {
//do something here like delete the titlepane
//alert();
}
});
deleteButton.placeAt(rulesTitlePane.focusNode);
This will produce something that looks like this,
Or you can replace everything and create whatever you want in the focusNode.
There is. I was able to do it using the .placeAt() method in the added dijit's creation, such as below:
In index.htm
<div id="divMap"></div>
In main.js within callback
ready (function() {
var ttpMyTitlePane = new TitlePane({
title: 'My Title'
});
divMenu.appendChild(ttpMyTitlePane.domNode);
var btnMyButton = new Button({
label: 'ButtonText',
onClick: function() {
// do stuff
}
}).placeAt(ttpMyTitlePane.domNode);
}