I have used WinJS and it works on Browsers. However, the WinJS site does not have examples for other controls like Win.UI.AppBar that can be used in Win8.1 or Win10.
Will WinJS.UI.AppBar work on Browsers and can be used for website development compared to windows store app development?
Yes you can use an AppBar on browsers. There no restriction to do that.
<div id="createAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',tooltip:'Add item',section:'primary',type:'flyout',flyout:select('#addFlyout'),onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',tooltip:'Remove item',section:'primary',onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdEdit',label:'Edit',icon:'edit',tooltip:'Edit item',section:'primary',onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',tooltip:'Take a picture',section:'primary',onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSettings',label:'Settings',icon:'settings',tooltip:'Settings',section:'primary',onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdShare',label:'Share',icon:'reshare',tooltip:'Share',section:'primary',onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdPrint',label:'Print',section:'secondary',onclick:Sample.outputCommand}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdNetwork',label:'Network',section:'secondary',onclick:Sample.outputCommand}"></button>
You can find here the sample: http://winjs.azurewebsites.net/#appbar :)
Related
I'm totally new to programming. Currently trying to automate few daily tasks using selenium web driver on Python. I have a webpage which contains multiple + expand button. Below is the code
Without expansion:
<div class="expansion container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle"></button>
</div>
</div>
With expansion
<div class="expansion_container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle active"></button>
</div>
</div>
I'm unable to find this element using any of the find_by method
My colleague said the page contains json that's why unable to locate using find_by
Can somebody please help with the code to locate and click the expand button.
Actual page:
Go-to https://fortigate.fortidemo.com
Username demo
Password demo
Click login read-only
Click later in next window
Now navigate to Network > interfaces There you can see lot of expand button that's what I'm referring I have written code to come till this page, but I want to expand before taking screenshot of the page
It does not have to do anything with JSON.
See, you are saying
<div class="expansion container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle"></button>
</div>
</div>
that you see this HTML when expand button is present.
You can locate with below css :-
button.compact-visual-toggle
or xpath :
//button[contains(#class, 'compact-visual-toggle')]
and since you have mentioned that they are multiple expension button, you can differentiate like below :
(//button[contains(#class, 'compact-visual-toggle')])[1]
should represent the first, for second you can try :
(//button[contains(#class, 'compact-visual-toggle')])[2]
and so on.. for 3rd, 4th....
in code you can use it like this :
driver.find_element_by_xpath("//button[contains(#class, 'compact-visual-toggle')]").click()
or
driver.find_element_by_xpath("(//button[contains(#class, 'compact-visual-toggle')])[1]").click()
or
driver.find_element_by_xpath("(//button[contains(#class, 'compact-visual-toggle')])[2]").click()
Now, coming to second part :
<div class="expansion_container">
<div class="expansion_base_parent"></div>
<div class="expansion expansion_parent">
<button type="button" class="compact-visual-toggle active"></button>
</div>
</div>
in you you want to un-expand it, you could use the below xpath :
//button[contains(#class, 'compact-visual-toggle active')]
and use it like above.
Recently a new bug came up which disabled the output window of the file select dialog.
<!-- shown in Maximilian Schwarzmuller Angular & NodeJS - The MEAN Stack Guide -->
<form [formGroup]="form" style="width: 100%">
<div class="row" [ngStyle]="{'height': editing[0] ? 'fit-content' : '200%'}">
<div class="col-12 d-flex justify-content-center" *ngIf="editing[0]">
<button mat-button [color]="'edit-color'" type="button" (click)="image.click()">Add Image</button>
</div>
<input type="file" (change)="onImagePicked($event)" (click)="clicked()" #image>
</div>
...form of image display...
</form>
whenever i call a click event in the mat-button it always gets called, same as in type="file", but the dialog in which i should select a file is never opened.
I assume the problem stems from this page being inside a mat-dialog, which is probably somehow conflicting with the browsers internal dialogs.
for now error has been seen in chrome and safari in development and production.
I am searching for a way to open a file dialog(browser) in my current page architecture.
Strange enough the issue wasn't the dialog. It was a click event called in html a bit higher up.
<h2 matRipple (click)="hamburgerClicked = !hamburgerClicked">
<i class="fas fa-bars" mat-icon-button aria-label="Close dialog"></i>
</h2>
i just changed it to a function
<h2 matRipple (click)="clicked()">
<i class="fas fa-bars" mat-icon-button aria-label="Close dialog"></i>
</h2>
and it works like a charm.
I have a search bar on my website that goes to google but it is making that web page not trustable. I have ssl and all my other pages have the little lock but the page with the search has an i with a circle around it. If i take the search off the page the little lock comes back. Can someone maybe tell me why.
<div class="wrap">
<div class="search">
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" class="searchTerm" placeholder="Search The Web"autocomplete="off" >
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</form>
</div>
</div>
I am working on a pretty basic website and I have the search bar exactly how I want it to look. The problem is that I cannot get the search button to be responsive to different devices. On my iPhone 6, the button moves below the search bar and doesn't look right. Any thoughts on how I can get this better looking? I am new to responsive templates!
Try clear fix:
<div class="bg-info clearfix">
<button class="btn btn-secondary float-left">Example Button floated left</button>
<button class="btn btn-secondary float-right">Example Button floated right</button>
</div>
How do I add a form (like below) in SharePoint (Office 365). I am posting from site.com to another_site.com. It is a branded site and I want the form in the master page.
I currently get this error: Your master page has one or more HTML tags. For your master page to work, remove the tags (but you can leave the content in them).
<form action="http://another_site/test" method="post">
<div class="form-group">
<div class="radio">
<input type="radio" name="request" value="demo">Request
</div>
<input name="fullname" type="text" class="form-control" placeholder="Full Name" required="required">
</div>
<button type="submit" class="btn">Submit</button>
</div>
</form>
If you would use a content editor webpart to incorporate the form, would that work? You then can embed the webpart into the masterpage.