i'm trying to code a div which appears, dissapears after a while and apears when hovering..
you can see the live example at www.aedas.com - the left pane slides in, then it dissapears, and when you hover that area it will reappear.
thank you very much!
You could try something simple as this :
I am using setInterval and clearInterval for setting an interval for hiding the bar.
Important Note
id returned by the setInterval should be used by the clearInterval or the loop won't break!!
Working jsfiddle : http://jsfiddle.net/frictionless/QmLAv/
$(function() {
var showTime = 5000;
var transition = 'slow';
var target = $('.headerbar');
var flag = false;
target.slideDown(transition);
var id = setInterval(function(){hide(target);}, showTime);
var hide = function(item) {
debugger;
if(flag){
return;
}
clearInterval(id);
item.slideUp(transition);
};
target.hover(function() {
flag = true;
clearInterval(id);
$(this).show();
}, function() {
flag = false;
id = setInterval(function(){hide(target);}, showTime);
});
});
Related
I'm trying to grab and drag the scroller canvas horizontally. I can scroll left & right with my mouse (Apple Magic Mouse), but have not been able to figure out how to implement the grab and drag left & right.
I tried to follow the instructions on the link below, but the pageX & clientX seems to cancel out bringing me straight to the beginning.
$('.fc-scroller-canvas').on('mousedown', function(e) {
console.log('pageX:::', e.pageX)
$('.fc-scroller-canvas').on('mousemove', function(evt) {
console.log('clientX:::', evt.clientX)
$('.fc-scroller').stop(false, true).animate({
scrollLeft: e.pageX - evt.clientX
});
});
});
$('.fc-scroller-canvas').on('mouseup', function() {
$('.fc-scroller-canvas').off('mousemove');
});
jQuery Grab Content and Scroll page horizontally
Any clue? Can someone help?
Thanks #hman! Code worked like a charm!
I've made some modifications to mine so the scrolling activated when clicking and dragging on the .fc-time
let pageX_Drag, pageY_Drag;
let disableDragSelector = '.fc-event,.some-other-class-here-maybe';
$('.fc-time-area').on('mousedown', '.fc-scroller', function (e) {
// prevent drag from happening if we click on certain things
let dragDisabledElms = $(e.target).parents(disableDragSelector).addBack(disableDragSelector);
if (dragDisabledElms.length) return;
pageX_Drag = e.pageX;
pageY_Drag = e.pageY;
$(window).off("mousemove", __mouseMove_Drag);
$(window).on("mousemove", __mouseMove_Drag);
});
$(window).on('mouseup', __mouseUp_Drag);
function __mouseUp_Drag() {
$(window).off("mousemove", __mouseMove_Drag);
}
function __mouseMove_Drag(evt) {
let offsetX = pageX_Drag - evt.pageX;
let offsetY = pageY_Drag - evt.pageY;
$('.fc-scroller', '.fc-time-area').each(function () {
let scroller = $(this);
let newX = scroller.scrollLeft() + offsetX;
let newY = scroller.scrollTop() + offsetY;
scroller.scrollLeft(newX);
scroller.scrollTop(newY);
});
pageX_Drag = evt.pageX;
pageY_Drag = evt.pageY;
}
Here is what I did to allow panning around the calendar both vertically and horizontally. You should be able to easily modify it to only work horizontally if that's what you want. I've only tested this with timeline view but it should work with all of the views.
var pageX_Drag, pageY_Drag;
var disableDragSelector = '.fc-event,.some-other-class-here-maybe';
calendarElement.on('mousedown', '.fc-scroller', function (e)
{
// prevent drag from happening if we click on certain things
var dragDisabledElms = $(e.target).parents(disableDragSelector).addBack(disableDragSelector);
if (dragDisabledElms.length) return;
pageX_Drag = e.pageX;
pageY_Drag = e.pageY;
$(window).off("mousemove", __mouseMove_Drag);
$(window).on("mousemove", __mouseMove_Drag);
});
$(window).on('mouseup', __mouseUp_Drag);
function __mouseUp_Drag()
{
$(window).off("mousemove", __mouseMove_Drag);
}
function __mouseMove_Drag(evt)
{
var offsetX = pageX_Drag - evt.pageX;
var offsetY = pageY_Drag - evt.pageY;
$('.fc-scroller', calendarElement).each(function ()
{
var scroller = $(this);
var newX = scroller.scrollLeft() + offsetX;
var newY = scroller.scrollTop() + offsetY;
scroller.scrollLeft(newX);
scroller.scrollTop(newY);
});
pageX_Drag = evt.pageX;
pageY_Drag = evt.pageY;
}
I have integrated a Google Map on my page and add a search box to it with the following code:
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
});
Currently this give me a search box with autocompletion list, which is good. But I have to click on a item of this list to go to the location. If I just type something in the input an hit enter, nothing happened..
Any help ?
Thanks !
Try changing
var searchBox = new google.maps.places.SearchBox(input);
to
var autocomplete = new google.maps.places.Autocomplete(input);
In a application, I am using google map to display stations with google marker, because the google marker is static with icon not animated, so I decided to inherit OverlayView and use canvas to draw a station dynamically. And this works, however, I want this overlay to receive the google events like the marker, such as click, mouse over, mouse out...
For example,
function StationCanvas(map, position, name) {
this.map_ = map;
this.position_ = position;
this.name_ = name;
this.canvas_ = null;
this.labelDiv_ = null;
this.canvasWidth_ = 12;
this.canvasHeight_ = 50;
this.setMap(map);
console.log('canvas '+this.position_);
}
StationCanvas.prototype = new google.maps.OverlayView();
StationCanvas.prototype.onAdd = function() {
var canvas = document.createElement("canvas");
canvas.setAttribute("width", this.canvasWidth_);
canvas.setAttribute("height", this.canvasHeight_);
canvas.style.position = "absolute";
this.canvas_ = canvas;
var panes = this.getPanes();
panes.floatPane.appendChild(canvas);
this.labelDiv_ = document.createElement("div");
this.labelDiv_ .setAttribute("width", this.canvasWidth_);
this.labelDiv_ .setAttribute("height", this.canvasHeight_);
this.labelDiv_ .style.position = "absolute";
this.labelDiv_ .innerHTML = this.name_;
panes.floatPane.appendChild(this.labelDiv_ );
/////////////////////////////////////////////////////////////
this.listeners_ = [
google.maps.event.addListener(this.canvas_, "mouseover", function (e) {
//this.style.cursor = "pointer";
//google.maps.event.trigger(this, "mouseover", e);
console.log('mouse mover');
}),
google.maps.event.addListener(this.canvas_, "mouseout", function (e) {
//this.style.cursor = this.getCursor();
//google.maps.event.trigger(this, "mouseout", e);
console.log('mouse out');
}),
google.maps.event.addListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this, "click", e);
console.log('click');
}),
google.maps.event.addListener(this.canvas_, "dblclick", function (e) {
//google.maps.event.trigger(this, "dblclick", e);
}),
];
}
Intially, I use google.maps.event.addListener as showed above to listen the event, nothing happens, so it seems canvas doesn't work with google.maps.eventListener.
Then I found google has provided a addDomListener(instance:Object, eventName:string, handler:Function), but since it only support dom rather then canvas, so when I used that listener, the browser breaks down.
At last, I have tried to use
canvas.onmouseout = function() {
console.log("on mouse out");
}
}
It is supposed to work, but still no, I guess something wrong within the code. even this works, the next question is how can I trigger the event to outside, so that I can work this overlayview like the google marker
var test1 = new StationCanvas(map, new google.maps.LatLng(53.3234,-2.9178), "abc",13);
google.maps.event.addListener(test1, 'click', function(event){
console.log('test 1 click');
});
addDomListener works for me, even with <canvas/>
What would break your code is e.g. this:
google.maps.event.addListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this, "click", e);
console.log('click');
})
this , when used in a event-callback, refers to the object that triggers the event(here: the canvas-node), your code produces a recursion. When you want to trigger the click-event for the StationCanvas-instance, you may store the instance as a property of the canvas-element, so it will be easy accessible inside the click-callback
StationCanvas.prototype.onAdd = function() {
var canvas = document.createElement("canvas");
canvas.overlay=this;
//more code
}
this.listeners_ = [
google.maps.event.addDomListener(this.canvas_, "click", function (e) {
google.maps.event.trigger(this.overlay,'click')
}),
google.maps.event.addListener(this, "click", function (e) {
alert('click on the StationCanvas-instance');
})
];
Right now, the autocomplete box works just fine when I click on the location, but when I press down, highlight the location that I want to go to, and press enter, it simply goes back to the home location of the map. Any insights on this? I call this function in initialize(). I'm lost as to what I possibly did wrong. Is this just a google api bug? If so, any insights as to how to work around it?
function setupAutoComplete() {
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180));
var input = document.getElementById('placeSearch');
var options = {
bounds: defaultBounds,
types: ['(regions)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
alert('hi');
removeAllOverlays();
var place = autocomplete.getPlace();
var mapCenter = place.geometry.location;
var colLat = mapCenter.lat() - (halfPoints)*latSeparation;
var colLng = mapCenter.lng() - (halfPoints)*lngSeparation;
var tempStart = new google.maps.LatLng(colLat, colLng);
map.setCenter(mapCenter);
pointArray[0][0] = tempStart;
reService();
mapSearch();
drawBounds();
});
}
Thanks so much!
I guess the input#placeSearch is placed inside a <form>.
You submit the form when you press [ENTER].
You may either remove the surrounding form or cancel the submission by adding:
onsubmit="return false"
...to the form-element.
I just hit this issue and went with the following, as I do want to submit the form at a later stage. This code is from google groups.
var input = document.getElementById('create-location');
var options = {
//types: ['(cities)'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13)
{
if (e.preventDefault)
{
e.preventDefault();
}
else
{
// Since the google event handler framework does not handle early IE versions, we have to do it by our self. :-(
e.cancelBubble = true;
e.returnValue = false;
}
}
});
$(document).ready(function() {
$('#<%=ddlContinents.ClientID %>').change(function() {
var element = $(this);
var totalLength = element.children().length;
if ($(this).disabled == false) { $(this).disabled = true; }
});
});
What I am trying to do is fire off the change event of the dropdownlist and on change making this dropdownlist disabled. The code is firing and everything, but it does not disable the dropdownlist.
This portion of the code is not working:
if ($(this).disabled == false) { $(this).disabled = true; } });
You should use .prop() for jQuery 1.6+ or .attr() for earlier versions of jQuery:
> jQuery 1.6:
$(document).ready(function() {
$('#<%=ddlContinents.ClientID %>').change(function() {
var element = $(this);
var totalLength = element.children().length;
if (!$(this).prop("disabled")) {
$(this).prop("disabled", true);
}
});
});
< jQuery 1.6:
$(document).ready(function() {
$('#<%=ddlContinents.ClientID %>').change(function() {
var element = $(this);
var totalLength = element.children().length;
if (!$(this).attr("disabled")) {
$(this).attr("disabled", "disabled");
}
});
});
if (!$(this).attr("disabled")) { $(this).attr("disabled","disabled"); }
If you want to enable it later on, you gotta do:
$(this).removeAttr("disabled");
I know this post is old..This might help if anyone stuck with disabling dropdown on dropdown chnage function
if ($(this).attr('disabled', false))
{ $(this).attr('disabled', true);
}