I have a very simple web page. Here is my Demo.
Desktop: When I hover over the circle, it expands.
iPad: When I click the circle, it expands.
However, is it possible (on iPad) that when the circle is in the "expanded" state, if I click it again, it contracts?
How would I do this using my existing code?
Javascript:
$('.circle').on('touchstart',function(){});
Many thanks for any help with this.
var events = "mouseover mouseout";
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
events = "touchstart";
};
$('.circle').on(events,function(){
if ($(this).hasClass("expanded")) {
// contract the circle
$(this).addClass("contracted").removeClass("expanded");
} else {
// expand the circle
$(this).addClass("expanded").removeClass("contracted");
};
});
Now add class contracted to all your circles.
I would try using jQuery toggle: http://api.jquery.com/toggle-event/
$('.circle').toggle(function() {
$(this).addClass("expanded").removeClass("contracted");
}, function() {
$(this).removeClass("expanded").addClass("contracted");
});
Related
I am trying to dim the background of my main content while accenting on a sidebar that needs to show up from the right, so I am using the dim-background jquery plugin. I want to toggle the .dimBackground() method for my element when I click its trigger. It adds a div with the class of dimbackground-curtain and it simply stacks this div when I click the trigger, making everything darker and darker.
I want to be able to toggle both the sidebar and the dimming above the main content. And if possible, to be able to toggle it if I click outside the sidebar as well.
Sample code from the fiddle:
$('.trigger').click(function() {
$('.sidebox').toggleClass('sidebox-open');
$('.sidebox').dimBackground({
darkness: 0.35
});
});
There is no CDN that provides this library, however, here is the Fiddle describing my problem.
According to the Usage guide, there's a .undim method.
It seems that .dimBackground does not toggle, so you will have to store the state on your end and invoke either .dimBackground or .undim depending on the state and switch it.
Example:
var dimmed = false;
$('.trigger').click(function() {
var $sidebox = $('.sidebox'); //avoid searching the element twice
if(dimmed){
$sidebox.removeClass('sidebox-open');
$sidebox.undim();
dimmed = false;
} else {
$sidebox.addClass('sidebox-open');
$sidebox.dimBackground({
darkness: 0.35
});
dimmed = true;
}
});
You could try this and check if it gives you a similar functionality:
$('.trigger').click(function() {
$('.sidebox').toggleClass('sidebox-open');
if($('.sidebox').attr('class') == "sidebox sidebox-open"){
$('.sidebox').fadeTo( "slow" , 1);
}
else{
$('.sidebox').fadeTo( "slow" , 0);
}
/*$('.sidebox').dimBackground({
darkness: 0.35
});*/
});
Here's a fiddle: http://jsfiddle.net/MZ9Xm/
Note: The following occurs in Chrome 22.0.1221.1, but not in Firefox 14.0.1. [Ubuntu linux]
Move your mouse to the top canvas and press and hold the mouse button. Drag the mouse, and the cursor will change to a text-selection mouse cursor (I-bar). This does not happen if there are no other elements on the page.
I've messed around with setting user-selection to none, but have not had any luck.
You can bind a mousedown event in your canvas to prevent default behavior.
Something like:
// with jQuery
$( "#canvasId" ).mousedown(function(event){
event.preventDefault();
});
// without jQuery
document.getElementById( "canvasId" ).onmousedown = function(event){
event.preventDefault();
};
Here is the updated fiddle: http://jsfiddle.net/MZ9Xm/1/
You will need to test this to see if there is some side effect in what you are doing.
Have you tried using the CSS cursor property ?
canvas {
cursor: pointer;
}
It should display the default cursor.
Try this:
var canvasEls = document.getElementsByTagName('canvas'),
preventHl = function () { return false; },
i = 0;
while (i < canvasEls.length) {
canvasEls[i].onmousedown = preventHl;
i += 1;
}
Returning false will prevent default actions such as highlighting from occurring.
Have a few divs that need to show/hide and the buttons within need to know when it's on and when it's off. Somehow they need to "communicate with another" to know when to be hidden or visible. Oh yeah, I'd like to keep the smooth fadein/fadeout effect on all elements.
Thanks!!
My fiddle is here:
http://jsfiddle.net/Pe9jn/
Here's the code I've got that mostly works, but it's a bit quirky:
//hide maximize link on page load
$('.maximize_menu').css('display','none');
//settings
var opacity = 1, toOpacity = 0, duration = 350;
//set opacity ASAP and events
$('.toggle_all, .toggle_all2').css('opacity',opacity).toggle(function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,toOpacity);
}, function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,opacity);
}
);
// this minimizes the menu and should make the mazimize_menu link visible when toggled off
$('.minimize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,.maximize_menu').fadeTo(duration,toOpacity);
}, function() {
$('.maximize_menu, #menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
$('.maximize_menu').show(duration,toOpacity);
$('.maximize_menu').css('display','block');
}
);
// this maximizes the menu and should disappear once the menu is visible
$('.maximize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,').fadeTo(duration,toOpacity);
}, function() {
$('#menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
}
);
I think that you should rethink all the logic, because you are not actually hiding the elements, you are just setting the opacity to 0. What you should really use is fadeOut() and fadeIn()
I'm trying to adapt Gaya Design's Animated Tabbed Content http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/ for a navigation menu. I want to have the background verting back to the first tab on mouseout but can't seem to get that working. Below is the Javascript for moving background function:
var TabbedContent = {
init: function() {
$(".tab_item").mouseover(function() {
var background = $(this).parent().find(".moving_bg");
$(background).stop().animate({
left: $(this).position()['left']
}, {
duration: 300
});
TabbedContent.slideContent($(this));
});
},
}
$(document).ready(function() {
TabbedContent.init();
});
And here is a link to what I'm trying to achieve. Link
Any help on how to get the background to revert to tab one on mouseout will be very much appreciated!
Thanks
What about triggeting the mouseover event of the first item:
$('.tabs').mouseout(function(){
$(this).find('.tab_item:first').mouseover();
});
Going to play with an Overlay from YUI 2 and IE6 (old stuff, but I have to deal with these)... and encouter a problem. So, can you help with an idea or two ? :D
Suppose the Overlay is created :
var newOverlay = new YAHOO.widget.Overlay("myOverlay" ,
{
context: [someObjectToAttachTo, "tl", "bl"],
monitorresize: false,
iframe: false,
zIndex: 900 });
some content is initalized (inside a div) :
var content = new StringBuffer();
content.append('<div id="containerDiv">');
content.append('whatever! some text for the overlay');
content.append('</div>');
an event is attached to the inner div so we know when it's got the mouse over it :
YAHOO.util.Event.addListener('containerDiv', "mouseover",
function() { alert('mouse in') });
"pour" the div into the overlay :
newOverlay.setBody( content.toString() );
render the overlay, but invisible :
newOverlay.render( document.body );
newOverlay.hide();
Problem : even if the overlay is hidden, if you move the mouse in his area, you will get an alert saying "mouse in".
This does not happen in IE7 or Mozilla. Seems that it is a bug and is related to IE not repainting the DOM until after the execution context is complete Source and some info here, another StackOverflow question
the Overlay is shown and hidden by this mechanism (note: the code described above is being updated here) :
newOverlay.hideTimer = null; // new code
YAHOO.util.Event.addListener('containerDiv', "mouseover", //event existed in above code
function() {
alert('mouse in'); // line existed
clearTimeout(newOverlay.hideTimer) }); // added functionality
YAHOO.util.Event.addListener('containerDiv', "mouseout", // new event
function() { timedHide(newOverlay) });
newOverlay.setBody( content.toString() ); //old code
newOverlay.render( document.body ); //old code
newOverlay.hide(); //old code
the functions used above are :
function customShow(overlayName) {
var overlay = document.getElementById(overlayName);
clearTimeout(overlay.hideTimer);
overlay.syncPosition();
overlay.show();
}
function timedHide(overlayName) {
var overlay = document.getElementById(overlayName);
overlay.hideTimer = setTimeout(function() {overlay.hide() }, 200);
}
here is part two of the hide/show mechanism - the trigger div; please ignore the mix of html and js; you still can read it :P
<span id="triggerSpan">I will show an Overlay</span>
and its events :
YAHOO.util.Event.addListener('triggerSpan', "mouseover",
function() { customShow('myOverlay') });
YAHOO.util.Event.addListener('triggerSpan', "mouseout",
function() { timedHide('myOverlay') });
the object used in the creation of the overlay is :
var someObjectToAttachTo = document.getElementById('triggerSpan');
Long stuff...
now, can you see another way of passing by this IE bug ?
so the overlay does not take my mouse... I have stuff under that overlay that needs to be clicked and hovered (that part is not mentioned in the above code)
Can you see another way of creating/initiazing/showing/hidding that overlay ?
The solution was to change the display style of the containerDiv to none or to block when hiding/showing the overlay.
Add some functions to the Overlay that change the style of the inner div:
newOverlay.showOverlay = function() {
document.getElementById('containerDiv').style.display="block";
newOverlay.show(); };
newOverlay.hideOverlay = function() {
document.getElementById('containerDiv').style.display="none";
newOverlay.hide(); };
and call those functions instead of calling overlay.show() or overlay.hide(), inside the functions customShow and timedHide