I want to use the hide() function of jquery to hide messages that are flashing on a page.
When I load the page, I want to display it for 5 sec then make it disapear.
$('#flash-message').show("clip");
setTimeout(function() {
$("#flash-message").hide("clip", { direction: 'vertical' }, 1000);
}, 5000);
It doesn't do the "animation" if I use a fixed or absolute position and I need to put the message on top of the page with a fixed position.
Is there a work around for that? Thanks for your help
To call events when the page loads use:
$(document).ready(function(){
//code here
});
If you only want to use "clip" try this:
$("#flash-message").hide("clip", {direction: "vertical"}, 5000)
or else try using animate:
$('#flash-message').animate({
opacity: 0.25,
direction: "left",
}, 5000, function() {
$(this).hide();
});
Or something more simple:
$("#flash-message").click(function() {
$("#flash-message").fadeOut("slow");
});
Related
I have a div that is conditionally binded to a class in vueJS. The formula for my computed variable uses Screen.width. It seems to work correctly when first loading, but if I change the size of the screen it doesn't rebind with the new screen size, unless I refresh the page. Is there a way I can get my conditionally binding to honor the change in screen?
<div class="div_1" v-bind:class="{ horizontalScroll : showScroll }"/>
showScroll(){
return this.events.length*225>(screen.width*.84);
}
If you wanna do it this way, you will probably have to register a 'resize' listener. Your code should look something like this:
data: () => ({
windowWidth: document.documentElement.clientWidth,
windowHeight: document.documentElement.clientHeight
}),
mounted() {
window.addEventListener('resize', this.setDimensions);
},
methods: {
setDimensions() {
this.windowWidth = document.documentElement.clientWidth;
this.windowHeight = document.documentElement.clientHeight;
},
}
and don't forget to remove it:
beforeDestroy() {
window.removeEventListener('resize', this.setDimensions);
},
Hi all,
Hopefully this is an easy one. I've set up a legend with an onclick event but would like the mouse cursor to change to "pointer" when I hover over the labels (see chart screenshot above). Currently it's hard to tell that the labels are links because the mouse cursor doesn't change when I hover over them.
Also how do I add some margin/padding between the legend and chart (space below the legend).
Many thanks!
You can achieve the desired behavior using a combination of the legend onHover config option (to change the pointer style to pointer) and the custom tooltips config option (to change the pointer style back to default).
Here is an example config demonstrating a working solution. I wasn't sure if you were using jQuery or not so I decided not to use it. Feel free to change accordingly.
options: {
legend: {
position: 'top',
labels: {
fontColor: 'rgb(255, 99, 132)'
},
onHover: function(event, legendItem) {
document.getElementById("canvas").style.cursor = 'pointer';
}
},
tooltips: {
custom: function(tooltip) {
if (!tooltip.opacity) {
document.getElementById("canvas").style.cursor = 'default';
return;
}
}
}
}
I found a different way to make this work. This lines up more literally in my mind. Perhaps the framework was updated in the interim since this was initially answered.
// This event fires anytime you mouse over the chart canvas.
onHover: function (event) {
event.target.style.cursor = 'default';
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
position: 'bottom',
onHover: function (event, legendItem) {
// There is only a legendItem when your mouse is positioned over one
if (legendItem) {
event.target.style.cursor = 'pointer';
}
}
}
In case anyone wants to know more, here are the docs for events and the legend.
Faster, without scanning the DOM every time, you find the target under native in the hover event
Tested in version 3.2.1 and 3.3.2 (latest on 2021 jun 22)
options: {
plugins : {
legend: {
labels: {
onHover: function (e) {
e.native.target.style.cursor = 'pointer';
},
onLeave: function (e) {
e.native.target.style.cursor = 'default';
}
}
}
}
}
The accepted answer did not work for me because my tooltips are always visible (position: "nearest"). So I use a timeout to change and revert the cursor style:
onHover: function(event, legendItem) {
document.getElementById("canvas").style.cursor = "pointer";
clearTimeout(hoverTimeout); // global var
hoverTimeout = setTimeout(function() {
document.getElementById("canvas").style.cursor = "default";
}, 100);
}
It's a dirty trick but it works.
I am trying to figure out how to dynamically change a size of ngDialog that I use for my popups. The dialog fires event when it's been opened:
$scope.$on('ngDialog.opened', function (e, $dialog) {
dialogReady($dialog);
});
I tried all of these:
function dialogReady(caseEditorWindow) {
caseEditorWindow.css({ 'width' : '1350px' });
caseEditorWindow.width(1350);
caseEditorWindow.css('width', '1350px' });
}
Nothing takes any effect.
It only gets sized if I use a class like this:
<style>
.ngdialog.dialogcaseeditor .ngdialog-content
{
width : 1350px;
height: 810px;
margin-top:-100px;
padding-top:10px;
}
</style>
at the time of creating the dialog:
ngDialog.open({
template: 'caseEditor.html',
controller: 'caseEditorController',
className: 'ngdialog-theme-default dialogcaseeditor',
closeByDocument: false,
disableAnimation: true,
scope: $scope
data: row
})
Any idea?
Thanks
var dialog = ngDialog.open(); //always return object {id: 'div attr id'};
$('#'+ dialog.id).css('width', '100px'); //You can get outer div like this
Althrough, not so good using jquery in angular controller, but it works (the only way).
I've tried everything I can think of to get the tooltip by the hovered-over event. But for whatever reason it just appears every time in the top left corner of my browser window.
Here is my javascript:
$(document).ready(function(){
var tooltip = $('<div/>').qtip({
id:'myCalendar',
prerender:true,
content:{
text:' ',
title:{
button:true,
},
},
position:{
my:'center left',
at:'center right',
target:'mouse',
viewport:$('#myCalendar'),
adjust:{
mouse:false,
scroll:false,
},
},
show:false,
hide:false,
style:'qtip-light',}).qtip('api');
$('#myCalendar').fullCalendar({
editable:true,
eventMouseout:function(e,j,v){
tooltip.hide();
},
eventMouseover:function(e,j,v){
var event = '<h3>'+e.title+'</h3>';
tooltip.set({'content.text':event,}).reposition(e).show(e);
},
events:[{title:'All Day Event',start:new Date(y,m,1)}],
header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
});
});
I'm using all of the same javascript and css linked from this example on jsfiddle:
http://jsfiddle.net/craga89/N78hs/
Can someone spot where I'm going wrong?
I couldn't ever get the code above to work, so I decided to go a different route and use the render event instead. Now it works exactly as I wanted by putting the qtip in the middle of the right side of each fullcalendar event on mouse over.
$(document).ready(function(){
$('#myCalendar').fullCalendar({
editable:true,
eventRender:function(event,element,view){
element.qtip({
content:{
text:'<h3>'+event.title+'</h3>',
},
position:{
my:'center left',
at:'center right'
},
show:'mouseover',
});
},
events:[{title:'All Day Event',start:new Date(y,m,1)}],
header:{left:'prev,next today',center:'title',right:'month,agendaWeek,agendaDay'},
});
});
I still don't know why using this code works as expected. Note: I didn't change any of the stylesheets or javascript included with either fullcalendar or qtip, just something about how the code above was implemented improperly.
I made a wordpress theme with bootstrap, it uses carousel and affix.
Now, when the carousel changes slide, the .affix isn't working over that period, when the carousel has finished the transition, the div with position:fixed is displayed correctly again.
You can check it here:
http://hu.rundertisch.org/?page_id=106
The navigation on the left side gets the position:fixed when you scroll to the bottom.
Just wait until the transition of the background image starts then scroll down. You see that the menu isn't moving with the screen. When the transition finished try again and you will see the difference.
I also have this problem with normal div's that have position:fixed like the wordpress top-admin bar that is displayed when you log-in. It just doesn't scroll witht he screen when a transition is going on.
This is my application.js that is included just before the (and wp_footer) tag, it is the last js file that I include after the whole bootstrap js files:
!function ($) {
$(function(){
var $window = $(window)
setTimeout(function () {
$('#af-me').affix({})
$('#ad-box-1').affix({offset: 580})
}, 100)
$('#running-box, #bg-car').carousel({})
$('#klapp').on('show', function () {
$("html, body").animate({ scrollTop: $(document).height() }, 365);
$('#col-switch').text("Becsukni");
})
$('#klapp').on('hide',function () {
$('#col-switch').text("Kinyitni");
})
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
$('#top').on('click',function () {
$("html, body").animate({ scrollTop: 0 }, 360);
})
$(".stop-car").hover(
function(){
$('#running-box, #bg-car').carousel('pause');
},
function() {
$('#running-box, #bg-car').carousel('cycle');
}
);
})
}(window.jQuery)