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 ...
Related
video.js - hello, newbie here, and i'm hoping someone could tell me what code i would need to place in the video-js.css file so that the full screen button does not show ?
have tried some codes I found online, but the button still shows in all browsers.
fingers crossed!
In your css look for the block of CSS marked:
.vjs-fullscreen-control { ... }
or
.vjs-default-skin .vjs-fullscreen-control { ... }
Within that block add display:none;
instead of display:none; you can use visibility:hidden;
the advantage is that the width of your tool bar remain the same and is correctly displayed.
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
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.
I've searched the web for a simple lightbox using dojo, and I've had no luck whatsoever!
Most of the examples use the dojo Dialog which IMHO is quite fugly.
I would like the ability just to display an arbitrary div with dimmed background, and I'll be in charge complete of what content is shown.
Anyone have any ideas?
Have you looked in dojox.image? There are both Lightbox and LightboxDialog variations. The plain lightbox doesn't have much styling. The Dialog one probably offers a choice of Dijit themes.
Look in the svn trunk > /dojox/image/tests. There are plenty of examples.
http://svn.dojotoolkit.org/src/dojox/trunk/image/tests/
Tip : Prevent multiple instances of Lightbox ! Use a singleton instead !
I've been playing around with Dojo over the last couple of days.
The script below changes the background position of the list item when the mouse is over the link.
dojo.query('a[class=main-menu-link]').forEach(function(linkTwo) {
dojo.connect(linkTwo, "onmouseover", function(evt) {
dojo.query('#main-menu ul li').forEach(function(linkThree) {
dojo.style(linkThree, {
"backgroundPosition": "right center",
});
});
You can see it in action in the right hand side menu: http://www.mechanic-one.suburban-glory.com/
I'm trying to work out the best of way of giving it a smooth transition between the two states... I've been looking on the Dojo documentation page but I'm not sure what is the best way of approaching it.
Check out the Animation quickstart. You can animate css properties and select from a set of existing animation effects and easings. Chaining is possible by requiring the NodeList-fx module.