I just noticed something unusual. This is what I want to accomplish:
I want a div to be shown when I click a link
I want the div to disappear when I click somewhere else in the document
I don't want it to disappear when I click the div itself
Something like this:
http://jsfiddle.net/XPmyF/
JS:
(function() {
var box = $('#box');
$(document).on('click', function() {
if (box.css('display') == 'block') {
box.css('display', 'none');
}
});
$('#start').on('click', function(e) {
box.css({
'text': 'Box',
'position': 'absolute',
'top': '50px',
'left': '0',
'background': '#EEE',
'border': '1px solid #555',
'width': '200px',
'height': '50px',
'display': 'block'
});
e.stopPropagation();
});
box.on('click', function(e) {
e.stopPropagation();
});
})();
That fiddle works just fine but when I tested that in Firefox (15.0.1), if you right-click on the div, it dissapears, which is not the behavior I'm looking for. It seems that stopPropagation() works for clicks but not right-clicks in Firefox. Chrome keeps right-clicks from propagating to the document.
How can I fix it?
Thanks
Use the event.which method to detect which button was clicked. Here's an example in jsfiddle.
$(document).on('click', function(event) {
if (event.which == 1 && box.css('display') == 'block') {
box.css('display', 'none');
}
});
Edited to actually work...
Sorry about that, the events didn't work as anticipated. You could handle it with mouse-overs.
(function() {
var box = $('#box');
var clicky = true;
$(document).on('click', function() {
if (box.css('display') == 'block' && clicky) {
box.css('display', 'none');
}
});
$('#start').on('click', function(e) {
box.css({
'text': 'Box',
'position': 'absolute',
'top': '50px',
'left': '0',
'background': '#EEE',
'border': '1px solid #555',
'width': '200px',
'height': '50px',
'display': 'block'
});
e.stopPropagation();
});
box.mouseenter(function(e) {
clicky = false;
});
box.mouseout(function(e) {
clicky = true;
});
})();
Related
I'm developing a quiz and i want this "check answer" button to be removed and on click of any choice answer must be displayed.
Can anyone please help me how to do it?
I've found a duplicate here,
Creating a JavaScript Quiz that shows answer explanation automatically
But this is not what i'm trying to do. since I'm new to stack overflow I can't comment on this question so opening this fresh one.
Here is JSfiddle link: http://jsfiddle.net/natmit/7Du6N/
function processQuestion(choice) {
if (quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']) {
$('.choice').eq(choice).css({
'background-color': '#84e47b'
});
$('#explanation').html('<h5>Awesome! Right answer!</h5><br/>' + htmlEncode(quiz[currentquestion]['explanation']));
score++;
} else {
$('.choice').eq(choice).css({
'background-color': '#e0514e'
});
$('#explanation').html('<h3>Oops! wrong answer</h3><br/>' + htmlEncode(quiz[currentquestion]['explanation']));
}
currentquestion++;
$('#submitbutton').html('<h4>NEXT QUESTION »</h4>').on('click', function() {
if (currentquestion == quiz.length) {
endQuiz();
} else {
$(this).text('CHECK ANSWER').css({
'color': '#ffffff'
}).off('click');
nextQuestion();
}
})
}
Try to add $('#submitbutton').hide(); at the end of your init() function.
Change the actions of your Buttons in your setupButtons() function somewhat like this:
$('.choice').on('click', function () {
picked = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({
'border-color': '#222',
'font-weight': 700,
'background-color': '#c1c1c1'
});
processQuestion(picked);
});
At the end of your processQuestion() function show the button again with $('#submitbutton').show(); and finally hide the button again at the end of your nextQuestion() function with $('#submitbutton').hide();
Here a working fiddle: http://jsfiddle.net/6ft4sy7s/
good luck :)
If I understand you correctly, all you need to do is change this code inside your setupButtons() function from this:
$('.choice').on('click', function () {
picked = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({
'border-color': '#222',
'font-weight': 700,
'background-color': '#c1c1c1'
});
if (submt) {
submt = false;
$('#submitbutton').css({
'color': '#000'
}).on('click', function () {
$('.choice').off('click');
$(this).off('click');
processQuestion(picked);
});
}
})
to:
$('.choice').on('click', function () {
if (submt) {
submt = false;
picked = $(this).attr('data-index');
$('.choice').removeAttr('style').off('mouseout mouseover');
$(this).css({
'border-color': '#222',
'font-weight': 700,
'background-color': '#c1c1c1'
});
$('.choice').css({
'cursor': 'default'
});
processQuestion(picked);
$('#submitbutton').css({
'color': '#000'
});
}
})
All I am doing here is taking the processQuestion() function outside of the $('#submitbutton') click event, so it is triggered as soon as a choice is selected.
I have also moved the rest of the jQuery code that was inside the $('.choice') click event and moved it inside the if (submt) conditional statement. This prevents the answer selection CSS being activated after an answer has been selected.
I added the CSS of cursor:default to the options after an option is selected, just so it is clear to the user that they can't select any more.
http://jsfiddle.net/7Du6N/326/
UPDATED FIDDLE: http://jsfiddle.net/7Du6N/328/ *process answer button hidden
I have a tooltip that can be seen below, at the moment it reveals the tooltip only on hover, but I want it to reveal the tooltip when both hovering and clicking (for touch screen devices) could somebody please show me how?
My JSFiddle
My javascript code
<script type="text/javascript">
$(function(){
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
});
</script>
You can create a function, let's call it activate:
function activate(that) {
//Your code here
}
and then use it like this:
$("ul.thumb li").hover(function() {
activate($(this));
});
$("ul.thumb li").click(function() {
activate($(this));
});
Note, that activate will hold the commands you need to process in those events. Also, in activate, try to make sure that you are using that instead of this.
First, refactor and rename your hover in and out function:
function showTooltip(){
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
// etc...
}
function hideTooltip(){
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
// etc...
}
Then instead of using the hover shorthand, use the mouseenter and mouseleave events to listen the hovering:
$("ul.thumb li")
.on('mouseenter', showTooltip)
.on('mouseleave', hideTooltip);
If you want to show the tooltip for touch events, just add the touchstart event to it: I guess you want to tap to both open and close the tooltip.
$("ul.thumb li")
.on('mouseenter touchstart', showTooltip)
.on('mouseleave touchstart', hideTooltip);
You can use jQuery .on() method to bind a handler to multiple events...
First of you need to name the two functions. Then you can use .on() as follows:
$("ul.thumb li").on('mouseover touchstart', show);
$("ul.thumb li").on('mouseleave touchend', hide);
Updated JSFiddle
I wrote a simple method that adds a spinner to the main body of an html page and binds the event to an ajaxstart method then removes it on the ajaxstop.
StartAjaxCallSpinner = function (spinnerObj) {
var $bod = $("Body");
if ($('#bgSpinnerDiv')[0] == undefined && $('#spinnerHolder')[0] == undefined) {
$bod.append("<div id='spinnerHolder' style='display:none;'></div><div id='bgSpinnerDiv'></div>");
}
$('#spinnerHolder')
.hide()
.ajaxStart(function () {
$('#bgSpinnerDiv').css({ 'background-color': 'black',
'height': '100%',
'left': '0px',
'opacity': '0.7',
'position': 'fixed',
'top': '0px',
'width': '100%',
'z-index': '1000001'
});
$(this).css({ 'position': 'fixed',
'top': '50%',
'left': '50%',
'width': '130px',
'height': '130px',
'margin-top': '-65px',
'margin-left': '-65px',
'z-index': '1000002',
'display': 'block',
'border': '1px solid black',
'border-radius': '5px',
'background': " white url('" + spinnerObj.SpinnerUri + "') no-repeat center center"
});
$(this).show();
//alert('test');
})
.ajaxStop(function () {
$(this).hide();
$('#bgSpinnerDiv').removeAttr("style").unbind('ajaxStart', UnBindAjaxStop($('#bgSpinnerDiv')));
$(this).removeAttr("style").unbind('ajaxStart', UnBindAjaxStop(this));
});
};
UnBindAjaxStop = function (me) {
$(me).unbind('ajaxStop');
};
I call the method before an ajax call and pass it an object with the uri of the spinner gif, but the spinner and background do not display unless I have an alert. I have tried adding a setTimeout()function{/*do some code*/},1000) in various places, but that did not seems to help.
I saw a similar issue in this posting but the setTimeout does not seems to help. Any ideas?
If your ajax request is being sent synchronously, the browser will be locked up immediately before it has time to render the spinner. When it's done, it will immediately hide the spinner, thus causing it to not display at all. The alert gave the browser enough time to render the spinner before sending the ajax request.
Remove async: false
I am working on a navigation system for my site. The idea is to display the content when the parent is hovered.
But, when content is hovered fast, the animation is incomplete and it stops in between.
The complete working and code is in the demo link below. Any suggestions on the changing the code will be helpful.
DEMO: http://jsfiddle.net/vaakash/yH9GE/
When the "two" arrows are hovered at the same time (move fast from one
arrow to another) they stop and are incomplete
The code I used is
$('.anpn-wrap').mouseenter(function(){
$wrap = $(this);
$txt = $(this).find('.anpn-text');
$cnt = $(this).find('.anpn-cnt');
$txt.hide();
$cnt.css({ 'opacity': 0, 'margin-top': '-50px', 'width': '200px' });
$wrap.stop().animate({ 'width': $cnt.outerWidth() });
$cnt.show().animate({ 'opacity': 1, 'margin': 0});
});
$('.anpn-wrap').mouseleave(function(){
$wrap = $(this);
$txt = $(this).find('.anpn-text');
$cnt = $(this).find('.anpn-cnt');
$cnt.show().stop().animate({ 'opacity': 0, 'margin-top': '-50px' }, function(){
$cnt.hide();
$wrap.stop().animate({ 'width': $txt.outerWidth() });
$txt.fadeIn();
});
});
By not localizing $wrap, $txt and $cnt, they will be global, hence if a mousenter event occurs before an earlier mouseleave animation has finished, these vars will be overwritten and the callbacks in the first animation will address the other button's elements.
The solution is to declare $wrap, $txt and $cnt with var, in both handlers.
Try this:
$('.anpn-wrap').mouseenter(function() {
var $wrap = $(this).stop();
var $txt = $wrap.find('.anpn-text').hide();
var $cnt = $wrap.find('.anpn-cnt').css({
'opacity': 0,
'margin-top': '-50px',
'width': '200px'
}).show().animate({
'opacity': 1,
'margin': 0
});
$wrap.animate({
'width': $cnt.outerWidth()
});
}).mouseleave(function() {
var $wrap = $(this);
var $txt = $wrap.find('.anpn-text');
var $cnt = $wrap.find('.anpn-cnt').show().stop().animate({
'opacity': 0,
'margin-top': '-50px'
}, function() {
$cnt.hide();
$wrap.stop().animate({
'width': $txt.outerWidth()
});
$txt.fadeIn();
});
});
I don’t know what you want instead, but you can pass arguments to stop() to force-complete the animation.
stop(true, true)
See this version: http://jsfiddle.net/yH9GE/2/
I work at an sidebar (left & right) which I can slide out/in with jQuery.
Both sides works but the right sidebar slides in left direction instead to right.
I use the following jQuery-code:
jQuery(function ($) {
var left_open = true;
var right_open = true;
$('a#ToogleSidebarLeft').click(function () {
if (left_open === true) {
$('#boxwrapper-left').animate({ width: 'hide' });
$('#leftcolumn').animate({ width: 'hide' });
$("#maincontent").animate({ marginLeft: "0px" });
left_open = false;
} else {
$('#boxwrapper-left').animate({ width: 'show' });
$('#leftcolumn').animate({ width: 'show' });
$("#maincontent").animate({ marginLeft: "220px" });
left_open = true;
}
});
$('a#ToogleSidebarRight').click(function () {
if (right_open === true) {
$('#boxwrapper-right').animate({ width: 'hide' });
$('#rightcolumn').animate({ width: 'hide' });
// $('#boxwrapper-right').hide('slide', {width: 'hide', direction: 'right' });
// $('#rightcolumn').hide('slide', { width: 'hide', direction: 'right' });
$("#maincontent").animate({ marginRight: "0px" });
right_open = false;
} else {
$('#boxwrapper-right').animate({ width: 'show' });
$('#rightcolumn').animate({ width: 'show' });
$("#maincontent").animate({ marginRight: "200px" });
right_open = true;
}
});
});
How can I change the sliding-direction of the second function (ToogleSidebarRight) to right?
I have try something like this but it doesn't works so:
$('#boxwrapper-left').animate({ width: 'hide', direction: 'right' });
Thanks for helping!
PS: English isn't my native language, so the text looks maybe a little bit strange...
$("#maincontent").animate({ marginRight: "-200px" });
I think negative value of margin will work.
or change it to
$("#maincontent").animate({ marginLeft: "200px" });
there are plenty of examples available ... i hope you can extract the needed piece...
Finally, we can achieve the same
effect as the left animation by
animating the marginLeft property. In
this case, we still need overflow:
hidden; on the parent element, but the
sliding element does not need to be
positioned.
$(document).ready(function() {
$('#slidemarginleft button').click(function() {
var $marginLefty = $(this).next();
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
});
});
});