I've cobbled together some mootools accordion code that worked for a couple of years but suddenly I notice that firefox breaks it -- no problem in safari, chrome or IE.
http://jordanrossfilms.com
console shows: TypeError: toggler is undefined here:
toggler.setStyle('color', '#666');
I imagine that its something very simple, yet for this newbie, I have no idea what is going on to cause this? Any help? Complete code below:
window.addEvent('domready', function() {
var myAccordion = new Accordion($('accordion'), 'h1.toggler', 'div.element', {
display: -1,
opacity: true,
alwaysHide: true,
onActive: function(toggler, element){
toggler.setStyle('color', '#df1a00');
//remove the toggler hover events to clear out its events when it was inactive
toggler.removeEvents('mouseenter');
toggler.removeEvents('mouseleave');
//then add your events again
toggler.addEvent('mouseenter',function()
{
//...
});
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#666');
//remove the toggler hover events to clear out its events when it was active
toggler.removeEvents('mouseenter');
toggler.removeEvents('mouseleave');
//then add your events again
toggler.addEvent('mouseenter',function()
{this.setStyle('color', '#df1a00');
toggler.addEvent('mouseleave',function()
{this.setStyle('color', '#666');
});
});
}
});
var myAccordion2 = new Accordion($('accordion2'), 'h4.toggler', 'div.element2', {
display: -1,
opacity: true,
alwaysHide: true,
onActive: function(toggler, element){
toggler.setStyle('color', '#df1a00');
//remove the toggler hover events to clear out its events when it was inactive
toggler.removeEvents('mouseenter');
toggler.removeEvents('mouseleave');
//then add your events again
toggler.addEvent('mouseenter',function()
{
//...
});
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#666');
//remove the toggler hover events to clear out its events when it was active
toggler.removeEvents('mouseenter');
toggler.removeEvents('mouseleave');
//then add your events again
toggler.addEvent('mouseenter',function()
{this.setStyle('color', '#df1a00');
toggler.addEvent('mouseleave',function()
{this.setStyle('color', '#666');
});
});
}
});
var myAccordion = new Accordion($('accordion3'), 'h5.toggler', 'div.element3', {
display: -1,
opacity: true,
alwaysHide: true,
onActive: function(toggler, element){
toggler.setStyle('color', '#df1a00');
//remove the toggler hover events to clear out its events when it was inactive
toggler.removeEvents('mouseenter');
toggler.removeEvents('mouseleave');
//then add your events again
toggler.addEvent('mouseenter',function()
{
//...
});
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#666');
//remove the toggler hover events to clear out its events when it was active
toggler.removeEvents('mouseenter');
toggler.removeEvents('mouseleave');
//then add your events again
toggler.addEvent('mouseenter',function()
{this.setStyle('color', '#df1a00');
toggler.addEvent('mouseleave',function()
{this.setStyle('color', '#666');
});
});
}
});
});
I see you are using mootools 1.2
mootools recently post a fix to 1.2 causing error in firefox because of new firefox and mootools collide with String.concat.
You can see a Blog Post about it.
Anyway try to update to the new 1.2 version and see if it's solves the problem
Related
Using Swiper.js along side the Vimeo API. Have a custom thumbnail overlayed on the Vimeo embed with some JS to trigger the .play() method. This works fine outside of the slider, but if the video is embedded in a slide, it only plays the audio. The video appears but it's stopped, and can be played like normal.
My JS:
$(document).ready(function(){
var swiper = new Swiper(".swiper", {
slidesPerView: 3,
spaceBetween: 100,
centeredSlides: true,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
on: {
slideChange: function () {
$('.swiper-video').each(function(){
var iframe = $(this).data('player');
var player = new Vimeo.Player($('#'+iframe));
$(this).children( '.vidthumbnail' ).show();
player.pause();
});
}
}
});
$('.vidplay_btn').each(function(){
$(this).click(function(){
var video = $(this).data('video');
var iframe = $(this).data('player');
var player = new Vimeo.Player($('#'+iframe));
$( '.vidthumbnail' ).show();
$( '#'+video+' .vidthumbnail' ).hide();
player.play();
});
});
});
I am using FloatingTip tool tip for my project and i am struggling for how to stay active and not to be closed when cursor is on tooltip.
Hear is jsFiddle [http://jsfiddle.net/SLvUz/3/][1]
For example: When mouse hover to tooltip and anchor Let me see! tooltip stay open.
Detail link: https://github.com/lorenzos/FloatingTips
Any ideas or suggestions? Thanks.
Unfortunately this plugin doesn't have such option at the moment, but it has methods and events, so you can implement this behavior using them. The code may look like following:
$$('#advanced a').each(function(elem){
var instance = new FloatingTips(elem, {
// example options
content: function() { return $('htmlcontent'); },
html: true, // I want that content is interpreted as HTML
center: false, // I do not want to center the tooltip
arrowOffset: 16, // Arrow is a little more the the right
offset: { x: -10 }, // Position offset {x, y}
// override show/hide events
showOn: null,
hideOn: null
});
// customize tooltip behavior
var delay = 100, timer;
var tipHover = function() {
clearTimeout(timer);
}
var tipLeave = function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.hide(elem);
}, delay);
}
instance.addEvents({
show: function(tip, elem){
tip.addEvents({
mouseover: tipHover,
mouseout: tipLeave
});
},
hide: function(tip, elem){
tip.removeEvents({
mouseover: tipHover,
mouseout: tipLeave
});
}
});
elem.addEvents({
mouseover: function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.show(elem);
}, delay);
},
mouseout: function() {
clearTimeout(timer);
timer = setTimeout(function(){
instance.hide(elem);
}, delay);
}
});
});
Check updated fiddle here: http://jsfiddle.net/SLvUz/455/
I have done a part of a website with google map, animated markers. I am using a custom image of size 160X243px as the marker icon. I put the bounce animation in the mouseover event, And remove the animation on mouseout. The problem is I got some jerk at the starting of the animation, Its like get blurred on the begining. Is there any way to avoid this. I have set a delay to resolve this but it is not much helpful.The following is the code I used for animation.
WITH OUT DELAY
google.maps.event.addListener(marker, "mouseover", function() {
marker.setAnimation(google.maps.Animation.BOUNCE);
});
google.maps.event.addListener(marker, "mouseout", function() {
marker.setAnimation(null);
});
WITH DELAY
google.maps.event.addListener(marker, "mouseover", function() {
setTimeout(function() {
addMarkerMethod1();
}, 400);
});
google.maps.event.addListener(marker, "mouseout", function() {
setTimeout(function() {
addMarkerMethod2();
}, 100);
});
function addMarkerMethod1()
{
marker.setAnimation(google.maps.Animation.BOUNCE);
}
function addMarkerMethod2()
{
marker.setAnimation(null);
}
I used the following code to avoid the flicker in to an extend, But sill it got some flickering. Please let me know, if this code can be improved again
google.maps.event.addListener(marker, "mouseover", function() {
setTimeout(function() {
addMarkerMethod1();
},400);});
google.maps.event.addListener(marker, "mouseout", function() {
setTimeout(function() {
addMarkerMethod2();
}, 100);});
function addMarkerMethod1()
{
marker.setAnimation(google.maps.Animation.BOUNCE);
}
function addMarkerMethod2()
{
marker.setAnimation(null);
}
Probably that the mouseover event is called twice, as long as you stay over the market (so the animation is called many times, causing the flickering).
You can try to remove the mouseover event and re-add it on mouseout :
var overEvent = google.maps.event.addListener(marker, "mouseover", doBounce);
function doBounce() {
google.maps.event.removeListener(overEvent);
marker.setAnimation(google.maps.Animation.BOUNCE);
}
google.maps.event.addListener(marker, "mouseout", function() {
overEvent = google.maps.event.addListener(marker, "mouseover", doBounce);
marker.setAnimation(null);
});
EDIT : Doesn't work. Because the animation makes the mouse call out event (by moving the marker, your mouse is not yet over it...). And the gmaps API doesn't tell anything about animations events, like 'complete' etc. So it will be complicated and very tricky to accomplish.
I have one map and one marker on it. When i go with my mouse over the marker an infobox appears. What I want to do is that when I leave with my mouse (mouseout) the infobox to disapear, but only in case the mouse didn't go over the infobox. If the mouse went over the infobox I want the infobox to remain visible until I move my mouse of of the infobox.
So, as long as my mouse stays either on the marker or on the infobox, it should be visible, and when I leave them the infobox must disapear.
Thanks in advance
very simple, actually.
attach a mouse event handler to your marker
attach a domready event handler to your infowindow
create a div inside your infowindow and attach a mouse event handler to it
what i did:
added a timer to close the infowindow after a few seconds unless there is a mouse over it
some code:
google.maps.event.addListener(marker, 'mouseover', function () {
infowindow.open(map, marker)
});
google.maps.event.addListener(marker, 'mouseout', function () {
t = setTimeout(function () {
infowindow.close()
}, 3000);
});
google.maps.event.addListener(infowindow, 'domready', function () {
$('#infodiv').on('mouseenter', function () {
clearTimeout(t);
}).on('mouseleave', function () {
t = setTimeout(function () {
infowindow.close()
}, 1000);
})
});
see it working here: http://jsfiddle.net/RASG/vA4eQ/
I have polygons for various region and states in my application. Markers implement tooltip by taking the title attribute. On mouseover and mouseout over a polygon events can be fired. How do I create a tooltip that looks like the tooltip that is implemented for a marker.
Edit-1: Adding the code used to create the polygon and attach the handlers to show/hide tooltips.
function addPolygon(points) {
var polygon = new google.maps.Polygon({
paths: points,
strokeColor: " #FFFFFF",
strokeOpacity: 0.15,
strokeWeight: 1.5,
fillColor: "#99ff66",
fillOpacity: 0.14
});
var tooltip = document.createElement('div');
tooltip.innerHTML = "Alok";
google.maps.event.addListener(polygon,'mouseover',function(){
tooltip.style.visibility = 'visible';
});
google.maps.event.addListener(polygon,'mouseout',function(){
tooltip.style.visibility = 'hidden';
});
polygon.setMap(map);
}
There's actually a neat trick to work around this (strange) limitation in Google Maps. When moving your mouse over a data item, you can just add a tooltip to the map's <div>. It will be added at the location where your mouse pointer currently is - right over the item!
map.data.addListener('mouseover', mouseOverDataItem);
map.data.addListener('mouseout', mouseOutOfDataItem);
...
function mouseOverDataItem(mouseEvent) {
const titleText = mouseEvent.feature.getProperty('propContainingTooltipText');
if (titleText) {
map.getDiv().setAttribute('title', titleText);
}
}
function mouseOutOfDataItem(mouseEvent) {
map.getDiv().removeAttribute('title');
}
I think you will have to do it yourself.In a page i have implemented i attached a mouse move event to the page so i can record the mouse position.Then when a polygon mouseover event occurs i display a custom div near the mouse position
Hope it helps
This code works for me:
googleShape - is your polygon or circle or rectangle.
titleText - message you need to post on hover of shapes.
google.maps.event.addListener(googleshape, 'mouseover', function() {
this.map.getDiv().setAttribute('title', "`titleText`");
});
google.maps.event.addListener(googleshape, 'mouseout', function() {
this.map.getDiv().removeAttribute('title');
});
You could try the following
//Add a listener for the click event
google.maps.event.addListener('click', showArrays);
infoWindow = new google.maps.InfoWindow;
then when the click event happens call the following function
function showArrays(event) {
var contentString = 'Content here';
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
A nice solution will be to use Google's built in InfoWindow as a tooltip/popup container. Then listen to mouseover and mouseout to show/hide the tooltip.
Notice that by using InfoWindow you can also put HTML markup as the content of the tooltip and not only plain text.
const mapHandler: google.maps.Map = ... // your code here
const polygon: google.maps.Polygon = ... // your colde here
const popUp = new google.maps.InfoWindow({
content: "<span style='color:red'> SOME MESSAGE </span>" // red message
});
polygon.addListener("mouseover", (event) => {
popUp.setPosition(event.latLng);
popUp.open(mapHandler);
});
polygon.addListener("mouseout", (event) => {
popUp.close()
});