I am using twitter boostrap (twipsy) to implement tooltip for my web app. I want to add a delay in the tooltip display (say after 2 seconds).
My implementation is as follows (see delay)
%li.friend
%a{:href=>"#!/<%=nick%>/<%=question_slug%>", :rel=>"twipsy", :title=>"<%=nick%>'s answers for this question", :delay=> {show:2000}}
%img{src: "<%= avatar_url %>"}
However, the tooltip still shows up immediately when I mouseover on the avatar.
Any advice on how I can implement the delay in display for the tooltip?
Try this :
%li.friend
%a{:href=>"#!/<%=nick%>/<%=question_slug%>", :rel=>"twipsy", :title=>"<%=nick%>'s answers for this question", :delay=> {show:2000, hide: 0}}
%img{src: "<%= avatar_url %>"}
Or if you also want a delay for hide :
%li.friend
%a{:href=>"#!/<%=nick%>/<%=question_slug%>", :rel=>"twipsy", :title=>"<%=nick%>'s answers for this question", :delay=> 2000}
%img{src: "<%= avatar_url %>"}
Related
I have created dialogs using Angular Material, but so far haven't found a way to create one using Material Design Lite. Is there a workaround for it?
MDL has support for styling HTML5 dialogs but does not include any polyfills for them. So you must have a browser that supports them (like Chromium). Else use a polyfill like https://github.com/GoogleChrome/dialog-polyfill as pointed out by #manuel-84
<dialog id="dialog" class="mdl-dialog">
<h4 class="mdl-dialog__title">Hello User</h4>
<div class="mdl-dialog__content">
<p>Hello world from dialog!<p>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button close">Disagree</button>
</div>
</dialog>
And using a button somewhere call
document.getElementById('dialog').showModal();
See Material Design Lite Components : Dialogs
I'm just a user of MDL, not an insider. But, as I understand it, Dialog support isn't there, but it's being worked on. Tagged for V1.1, but no idea what the schedule for that might be.
https://github.com/google/material-design-lite/pull/1762
Not a dialog per se, but what I am doing in one project is to have a form slide down, using jQuery you get some nice animation
Basically define the form in a card, set the height to zero and opacity to 0. Then execute the following script to reveal the dialog
$('#objects_card_holder').animate({
height: 400
},500,function(){
$('#objects_card_holder').animate({
opacity: 1
},100,function(){
$('#projectName').val('');
});
});
Then when the form is not required run another script to hide it.
$('#objects_card_holder').animate({
opacity:0
},
100,
function(){
$('#objects_card_holder').animate({
height:0
},
500,
function(){
});
});
Assuming that your card has the id objects_card_holder
Of course if you really need a dialog jQuery has it's own dialog.
see https://jqueryui.com/dialog/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to figure out how to implement the "android" feel on Onsen-UI by using the 'swipe' navigation.
I tried implementing idangerous swiper, but not having much luck. My idea is to combine:
http://codepen.io/negibouze/pen/jEvOYz
enter code here
http://codepen.io/negibouze/pen/wBLeyp
enter code here
When you swipe, the tabs change but has that swipe animation/effect. I also would love it if each tab/swipe was a different html and not one index file.
Any ideas or help?
Great question. There are two different approaches:
As it's done in your second example, using tabbar and gesture detector. Onsen 2.0 has a slide animation for tabbar, so you just need to add <ons-tabbar animation="slide" ... >. Onsen 2.0 is still in alpha version but it will be released in the upcoming weeks. The drawback of this approach is that the slide animation starts after the swipe action is completed.
You basically add your ons-tabbar element and then configure the gesture detector as follows:
ons.ready(function() {
// Create a GestureDetector instance over your tabbar
// The argument is the actual HTMLElement of tabbar, you can also do document.getElementById(...)
var gd = ons.GestureDetector(myTabbar._element[0]);
gd.on('swipe', function(event) {
var index = myTabbar.getActiveTabIndex();
if (event.gesture.direction === 'left') {
if (index < 3) {
myTabbar.setActiveTab(++index);
}
} else if (event.gesture.direction === 'right') {
if (index > 0) {
myTabbar.setActiveTab(--index);
}
}
})
});
Working here: https://jsfiddle.net/frankdiox/o25novtu/1/
Combining ons-tabbar and ons-carousel elements. The drawback of this approach is that ons-carousel-item cannot get a template or separated file (check the comments to find another workaround to this).
ons-tab requires a page attribute and you cannot leave it blank without errors in the console, but we can use ons-tabbar's style instead of the actual component: http://onsen.io/reference/css.html#tab-bar
We combine it now with a fullscreen carousel like the one you mentioned and add the next CSS to make the page content respect our tabbar so it does not fall over or behind it:
ons-carousel[fullscreen] {
bottom: 44px;
}
Next step, we link every tab with its corresponding carousel item:
<div class="tab-bar" id="myTabbar">
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(0)">
...
</label>
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(1)">
...
</label>
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(2)">
...
</div>
And so on. This will make that when we click on a tab the carousel changes automatically. Now we need to do the opposite connection: update the checked tab when we swipe the carousel. The tabbar is basically a set of radio buttons, so we just need to get the one we want in the carousel's postchange event and check it:
ons.ready(function(){
carousel.on('postchange', function(event){
document.getElementById('myTabbar').children[event.activeIndex].children[0].checked = true;
});
});
You can now change the content of every carousel-item-index and insert an ons-page with anything you want.
Working here: http://codepen.io/frankdiox/pen/EVpNVg
We may add a feature to make this easier in upcoming versions of OnsenUI.
Hope it helps!
the angular md-menu-bar demo shows a nested Menu under new. Check the code from the demo on codepen here: https://material.angularjs.org/latest/#/demo/material.components.menuBar
As you can see, from the codepen, the nested menu opens on hover, but in the HTML you can see the button element has a ng-click="$mdOpenMenu()" function. I cannot see how to this even works. Am also failing to get the side arrow to appear for the submenu.
Are people able to replicate this demo? My code is a follows:
md-menu-bar
md-menu(md-position-mode="target-right target", md-offset="0 40", width="4")
button.ts-chart-icon.refresh-icon.glyphicon.glyphicon-certificate(ng-click="$mdOpenMenu()", md-menu-origin)
md-tooltip(md-delay="0") Add Overlay
md-menu-content.ts-menu-content(width="5")
md-menu-item(md-menu-align-target)
md-button(disabled="disabled", ng-if="!chartConfig.series") Add 50D Moving Average
md-menu.nested-menu(ng-if="chartConfig.series")
md-button(ng-click="$mdOpenMenu()") Add 50D Moving Average
md-menu-content(ng-show="chartConfig.series", width="5")
md-menu-item(ng-repeat="s in chartConfig.series")
md-button(ng-click="handleAdd50DMA_(s)") {{ s.name }}
I upgraded from angular-material 0.10.1 to 0.11 and it is working fine now.
When the page loads, the featured charts that are present in the page does not take up the available width and overflows their columns. However, when the window is re-sized or I try to investigate using Inspect element, the charts immediately snap into the correct dimensions. This behavior occurs in Chrome, FF, and IE.
I have tried the following with no results :-(
<div id="container" style="width:100%;margin: 0 auto"></div>
$(window).resize();
Please Help!!
I faced a similar problem, and I "fixed" the issue by delaying the creation of the chart:
setTimeout(function () {
$(element).highcharts({...});
}, 0);
More details there: Highcharts dynamic (re-)sizing in AngularJS tabs
I have the following in to show and hide the clear button based upon if the searchQuery is empty or not. When a user starts typing in the input box, the button shows instantly.
However, when the user either clicks the clear button or deletes all input, there is a noticeable lag before the clear button is removed. I have tried ng-show as well, and have received the same results. Any ideas why this lag might exist?
HTML
<button ng-if="search.cardsQuery.length" class="button-icon" ng-click="clearSearchQuery()">
<i class="ion-android-close search-cards"></i>
</button>
CONTROLLER
$scope.clearSearchQuery = function() {
$scope.search.cardsQuery = '';
};
Check the css class on the element you're applying ng-if/ng-show to. Look for the transition effect. If the class has a transition, it may be the cause to the delay:
.button-icon {
transition: all .5s;
}
Its a common problem seen among the developers. Even trying with ng-if causes the same issue. I can suggest a simple solution for you.
Open your css file for the particular html file and add below line.
**.ng-hide { display: none !important }**
Hope, it will help.
$scope.$evalAsync();
Worked for me :)