$(".Menu_Tab").live(
'mouseover',
function()
{
$(this).animate(
{"top": "130px"},
1000);
}
);
This is my code...as you can see "mouseover" changing the position of $(#.Menu_Tab).
My question is-If for example I want to change the color of $(#.Menu_Tab),but only
after the change of a position,how I'm doing that...
$(".Menu_Tab").live(
'mouseover',
function()
{
$(this).animate(
{"top": "130px"},
1000,
function() {
$(this).css("color", "blue");
}
);
}
);
Related
Ask for help from the community. For two weeks I can not overcome the problem with repeated firing of 'mooveend' in the project. I have tried all the advice given here. Here's what I've read and researched already, but it didn't work for me.
This is one of the tips:
moveend event fired many times when page is load with Leaflet
<template>
<div id="map"></div>
</template>
<script>
export default {
name: "ObjectMapView",
props: ['coordinate'],
data: function () {
return {
map: null,
addressPoints: null,
markers: null,
}
},
mounted: function() {
this.initializedMap();
},
watch: {
coordinate: function (val) {
this.run();
}
},
methods: {
initializedMap: function () {
this.map = L.map('map').setView([52.5073390000,5.4742833000], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(this.map);
this.markers = L.markerClusterGroup();
},
run: function () {
var map = this.map;
var markers = this.markers;
var getAllObjects = this.coordinate;
var getBoundsMarkers;
//Clearing Layers When Switching a Filter
markers.clearLayers();
this.addressPoints = getAllObjects.map(function (latlng){
return [latlng.latitude, latlng.longitude, latlng.zip, latlng.object_id, latlng.archived];
});
map.addLayer(markers);
//We give to the map only those coordinates that are in the zone of visibility of the map during the first
getBoundsMarkers = getAllObjects.filter((coord) => {
if(!coord.latitude && !coord.longitude){
return false;
}
return map.getBounds().contains(L.latLng(coord.latitude, coord.longitude));
});
/*
Responds to changing the boundaries of the map visibility zone and
transmits a list of coordinates that are in the visibility zone
*/
console.log('getAllObjects_1', getAllObjects);
map.on('moveend', function() {
console.log('moveend');
console.log('getAllObjects_2', getAllObjects);
getBoundsMarkers = getAllObjects.filter((coord) => {
if(!coord.latitude && !coord.longitude){
return false;
}
return map.getBounds().contains(L.latLng(coord.latitude, coord.longitude));
});
eventHub.$emit('sendMarkers', getBoundsMarkers);
});
// In the loop, we iterate over the coordinates and give them to the map
for (var i = 0; i < this.addressPoints.length; i++) {
var a = this.addressPoints[i];
var title = '' + a[2] + ''; //bubble
var marker = L.marker(new L.LatLng(a[0], a[1]), {
title: title
});
marker.bindPopup(title);
markers.addLayer(marker);
}
eventHub.$emit('sendMarkers', getBoundsMarkers);
}
}
}
</script>
<style scoped>
#map {
width: 97%;
height: 100%;
}
</style>
I figured it out myself.
The 'zoomend' and 'dragend' option didn't work for me. I searched a lot for a suitable option and realized that the "moveend" event fires several times because this event is created every time you move the map. Therefore it is necessary to stop this event. I got out of the situation in this way. Immediately after the map was initialized, I wrote:
map.off('moveend');
and for me it worked. Now it works fine. I will be very happy if this is useful to someone.
I have two components: TodoList and TodoListsList. They get their data from states in todos.js and todoLists.js modules accordingly. When I choose some to-do list, i.e mark it as active, TodoListsList is updated, but TodoLists isn't, thought the data is updated. Here's how I do it.
todoListsState and markAsActive() (todoLists.js):
import todos from '#/modules/todos.js'
// ... some code ...
const todoListsState = reactive({
todoLists: [],
todoListsAreLoading: false,
removedTodoListId: null,
editedTodoListId: null,
editedTodoListName: '',
baseTodoListsApiUrl: process.env.VUE_APP_BASE_TODO_LISTS_API_URL,
todoListCreationFormModalId: 'todoListCreationFormModal',
todoListNameChangeFormModalId: 'todoListNameChangeFormModal'
});
// ... some code ...
function markAsActive(value) {
let { close } = infoToast();
if (value) {
axios.post((todoListsState.baseTodoListsApiUrl + 'mark-as-active'), {
activatedTodoListId: value
}).then(function () {
getTodoLists();
const { getTodos } = todos();
getTodos();
}).catch(function () {
dangerToast('Failed to mark to-do list as active.');
}).finally(() => {
close();
});
}
}
todosState and getTodos() (todos.js):
const todosState = reactive({
todos: [],
activeTodoListId: 0,
removedTodoId: null,
editedTodoId: null,
editedTodoText: '',
todosAreLoading: false,
baseTodosApiUrl: process.env.VUE_APP_BASE_TODOS_API_URL,
todoAdditionFormModalId: 'todoAdditionFormModal',
todoEditFormModalId: 'todoEditFormModal'
});
// ... some code ...
async function getTodos() {
try {
todosState.todosAreLoading = true;
const response = await axios.get(todosState.baseTodosApiUrl);
todosState.activeTodoListId = response.data[0];
todosState.todos = response.data[1];
} catch (e) {
dangerToast('To-dos loading failed.');
} finally {
todosState.todosAreLoading = false;
}
}
How does todosState.todos look in console:
todosState.todos when Todos.vue is mounted:
It doesn't look like the array looses it's reactivity.
If you need something else to understand my question, feel free to ask. Help appreciated.
The problem is solved! I have just moved todosState out of
export default function () {}
and it works! Finally! This thread helped me a lot.
I'm trying to initialize my datatable, but there's no way.
I want to configure 2 things at the same time but I do not know where the problem is.
First:
$(document).ready(function() {
$('#example').DataTable({
"bFilter" : false,
"bLengthChange": false
});
});
Second:
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#button').click( function () {
table.row('.selected').remove().draw( false );
} );
} );
Either of the two separately work correctly, but if the together do not work.
I have try this:
$(document).ready(function() {
$('#example').DataTable({
"bFilter" : false,
"bLengthChange": false
});
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
$('#button').click( function () {
table.row('.selected').remove().draw( false );
});
});
Where is the problem? How can I combine this two options?
SOLVED: One css file was delete.
Ok, now all is fine. I have just removed one css file. Thank you Just code 9. I have find the problem trying to make the snippet.
As said in the title I would like to prevent removing a jquery ui tab or at least asking a confirmation before.
I tried
$( "#tabs" ).bind( "tabsremove", function(event, ui) {
var ok=confirm("Are you sure you want to close this tab ?");
if (ok) {
return true;
} else {
return false;
};
});
or
$( "#tabs" ).bind( "tabsremove", function(event, ui) {
var ok=confirm("Are you sure you want to close this tab ?");
if (ok) {
return true;
} else {
return false;
};
});
But the question is asked after, and not before as I want.
Is this possible ?
Is this what you mean?
$( "#tabs span.ui-icon-close" ).live( "click", function() {
var ok=confirm("Are you sure you want to close this tab ?");
if (ok) {
var index = $( "li", $tabs ).index( $( this ).parent() );
$tabs.tabs( "remove", index );
} else {
return false;
};
This is from jQuery-ui-tabs
I'm creating a dialogbox from ExtLib and I want to prevent users to press Escape or click on X icon.
I've checked several posts about same implementation but none of them using a Dialogbox from ExtLib.
I was able to hide icon with CSS and I'm trying with dojo.connect to prevent the use of Escape key:
XSP.addOnLoad(function(){
dojo.connect(dojo.byId("#{id:dlgMsg}"), "onkeypress", function (evt) {
if(evt.keyCode == dojo.keys.ESCAPE) {
dojo.stopEvent(evt);
}
});
});
Note I'm able to get it working only if I create my dialogbox manually and not from ExtLib; then I can use for example:
dojo.connect(dojo.byId("divDlgLock"), "onkeypress", function (evt) {
if(evt.keyCode == dojo.keys.ESCAPE) {
dojo.stopEvent(evt);
}
});
Any ideas?
By adding an output script block you can extend the existing declaration:
<xp:scriptBlock id="scriptBlockNonCloseableDialog">
<xp:this.value>
<![CDATA[
dojo.provide("extlib.dijit.OneUIDialogNonCloseableDialog");
dojo.require("extlib.dijit.Dialog");
dojo.declare(
"extlib.dijit.OneUIDialogNonCloseableDialog",
extlib.dijit.Dialog,
{
baseClass: "",
templateString: dojo.cache("extlib.dijit", "templates/OneUIDialog.html"),
disableCloseButton: true,
_onKey: function(evt){
if(this.disableCloseButton &&
evt.charOrCode == dojo.keys.ESCAPE) return;
this.inherited(arguments);
},
_updateCloseButtonState: function(){
dojo.style(this.closeButtonNode,
"display",this.disableCloseButton ? "none" : "block");
},
postCreate: function(){
this.inherited(arguments);
this._updateCloseButtonState();
dojo.query('form', dojo.body())[0].appendChild(this.domNode);
},
_setup: function() {
this.inherited(arguments);
if (this.domNode.parentNode.nodeName.toLowerCase() == 'body')
dojo.query('form', dojo.body())[0].appendChild(this.domNode);
}
}
);
// This is used by the picker dialog to grab the correct UI
XSP._dialog_type="extlib.dijit.OneUIDialogNonCloseableDialog";
]]>
</xp:this.value>
</xp:scriptBlock>