I am developing a simple application for windows 8. And now I want to modify the top app bar( i.e it should not look like bottom app bar) and I want it to work much better than only showing the default icons(like navigation job). I want to add my icons of different sizes(length).yes similar to those of weather app or travel app. But I am unable to find any good reference to start with. please help, from where I should start doing it. and whether is it possible to modify the app bar. please guide. note: I am developing app in javascript
Your very basic top appbar can be implemented using the following HTML:
<div data-win-control="WinJS.UI.AppBar" data-win-options="{layout:'custom',placement:'top'}">
<!-- your custom top bar content goes here -->
</div>
From inside the div, you can add anything to your hearts content, even AppBarCommands. Don't forget to initialize all win controls:
<script>
document.addEventListener("DOMContentLoaded", function () {
WinJS.UI.processAll();
}, false);
</script>
Quickstart: adding an app bar with custom content
Read following article, you'll get lot's of good tips
31 Days of Windows 8 | Day #4: New Controls
Related
Currently i am working in a project which is already developed in v-DataTable of vuejs which is all new to me. In this project, i need to call an event when the scrollbar reach its bottom.
Any API can also be used.
Please help me out.
If project is built with Vuetify (guessing because you've mentioned v-data-table) - take a look at https://vuetifyjs.com/en/directives/intersect/
Otherwise you can check out Interesection Observer API or third party libraries like Tornis
I am looking for tutorials, ideas, suggestions on how to implement the "skin-banners" (also called background-banners) in responsive template as the famous twitter bootstrap template.
How to manage the width of the background picture?
Is it possibile to implement a backgroud banner without using javascript complex scripts? Are there any working examples?
Many thanks, Fabio
The solution is to display the correct skin for each viewport.
First of all you needto read the width of the window browser:
<script type='text/javascript'>
var WidthBrowser = $(window).width();
</script>
Then for each viewport you have to call the right skin.
For desktop version for instance:
if (WidthBrowser > 1200){
// code for skin
}
else if ...
hi anybody help how to write page navigation code for win8 metro apps in user control.
I tried with following code it is not working.
this.Frame.navigate();
If you are following an MVVM pattern with a framework like Caliburn Micro, MVVMLight, MicroMVVM then all of them provide a NavigationService of some sort which is usually used for navigation purpose. I would recommend you use that.
From the child control you can do this
var frame = Window.Current.Content as Frame;
frame.Navigate(typeof (Page2));
Where Page2 is the page you want to navigate to.
I am creating Silverlight Application. In My Application I want to add Functionality for dynamically change Themes. Like I have two Themes(Blue.xaml, Gray.xaml).
And In My Home Page there are two button which is Blue and Gray. I want to Change Theme based on Button Click.
Can any one help me?
Thnx in Advance.
Silverlight Toolkit has Theming support (use the latest Silverlight 5 Toolkit - December 2011)
use Theme control and set ThemeUri in controls
<toolkit:Theme x:Name="ThemeContainer"
ThemeUri="/System.Windows.Controls.Theming.BubbleCreme;component/Theme.xaml">
<Button>
....
</Button>
</toolkit:Theme>
Ref :http://weblogs.asp.net/lduveau/archive/2010/05/31/dynamically-apply-and-change-theme-with-the-silverlight-toolkit.aspx
I'm developing a website using jQuery UI, and there are several elements on my site that appear to be incompatible when viewed on touchscreen devices; they don't cause any errors, but the behavior is not what it should be.
The elements in question are sliders and rangesliders as defined by jQuery UI; on the touch screen, instead of registering a touch as picking up a handle and a drag as dragging the handle across the slider, it just slides the whole webpage to the side of the screen. It does work if you tap the handle and then tap the location on the slider where you want the handle to end up, but this is very slow and not ideal. Any ideas?
I tried downloading the jqtouch plugin and then attaching .touch([...]) to all calls to slider() and rangeslider(), but that didn't work.
UPDATE: I found this "patch" on the jQuery UI website
http://bugs.jqueryui.com/ticket/4143
that says it facilitates slider on iPhone, but now for another question: how do I incorporate this "patch" into my code? Do I just include it at the beginning of the code like a plugin?
This library seems to offer what you're looking for:
https://github.com/furf/jquery-ui-touch-punch#readme
It also has some example use code (simply add the plugin):
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$('#widget').draggable();
</script>
Just wanted to add some new info about this. Touch-punch will work fine for Ipads and Android devices. But the slider will not work on Windows mobile devices, as far is I could test(with the latest versions of jquery ui & Touch punch)
The fix is quite simple, just add the following CSS-rules to the .ui-slider-handle:
-ms-touch-action: none;
touch-action: none;
Hope this helps
As #dazbradbury suggested, the touchpunch library can help translate the mouse events to touch events. The parameters in .draggable() limit the movement of the slider so it can't be moved beyond its slider parent.
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(".ui-slider-handle").draggable({
axis: "x",
containment: "parent"
});
</script>
EDIT: If you are already using a Jquery UI slider, you only need to include the touchpunch library. Do not call .draggable() for the .ui-slider-handle because it will overwrite the existing functionality.
I had the same problem. I developed an elaborate slider UI building on jQuery UI's slider only to realize it doesn't work at all on mobile. I tried the suggestions listed here but since I have a custom solution that's only based on jQuery UI Slider, it did not work.
Just use noUiSlider.
It does all the elaborate features (and much more) as the one I built on top of jQuery UI slider. It works beautifully on mobile devices and is easy to style too.