jQuery UI bounce effect aligns elements left in Firefox and IE8 - javascript

There is an issue with JQuery UI's bounce effect in both Firefox and IE8 or lower. IE9, Chrome, and Safari render the bounce effect properly. Any ideas what is causing this?
The problem is exhibited in Firefox and Chrome. The popup asks if you received an invitation. In Firefox/IE8 the box jumps to the left-hand side when it bounces.
Here is the jQuery that is running the bounce:
if ($.readCookie('noticehidden') == null)
{
$('#notice').show('drop', { direction: 'left' }, 2000)
.data('bounceinterval', setInterval(function ()
{
$('#notice').effect("bounce", { times: 3, distance: 10 }, 300);
}, 5000));
$('#dismissnotice').click(function (e)
{
clearInterval($('#notice').data('bounceinterval'));
$('#notice').hide('drop', { direction: 'right' }, 2000);
$.setCookie('noticehidden', 'true', { duration: 365 });
e.preventDefault();
return false;
});
}
I am using jQuery 1.4.4 and jQuery UI 1.8.6

Bounce effect applies this style to the element:
element.style {
bottom: auto;
left: 0;
position: relative;
right: auto;
top: 0;
}
Firefox disregards margin:auto in favor of left:0.
This fixed the problem:
#notice {
margin-left: 300px;
}
And for variable-width box:
#notice-container {
text-align: center;
}
#notice {
display: inline-block;
}
EDIT: For anyone that uses this answer I wanted to add a couple minor tweaks that made it work.
First
#notice-container
{
text-align: center;
display: none; /*Add this to make the parent invisible until the show effect is used.*/
}
Next, the above JQuery in the question should be modified to use the parent container, not the centered child.
$('#notice-container').show('drop', { direction: 'right' }, 2000);
$('#notice-container').effect('bounce', { times: 3, distance: 10 }, 300);
// etc...

Related

Javascript animate Method Accumulation Problem

I am trying to do an animation example but there is a problem about accumulation. At first click on the button, the translate animation is done and the position of the element changes permanently. However, on second click it does the translate animation again but this time does not keep the last position. How to overcome this? I went through MDN document and applied the optional section but failed to complete this challenge. Regards,
https://jsfiddle.net/ja218pbr/19/
document.getElementsByTagName("button")[0].addEventListener("click", function() {
document.querySelectorAll("div")[0].animate([
{transform: 'translate(100%, 0)'}
], {
duration: 250,
composite: "accumulate",
iterationComposite: "accumulate",
fill: "forwards"
});
});
If I'm understanding this correctly, you want to be able to let the object slide again from the position it ended in earlier. To do this we can get the boundingClientRect each time the button is clicked and calculate the new translation distance by basically taking the width of the object and adding the left distance of the client rect, this will effectively allow the rectangle to keep moving from the distance it ended in before. Also I removed the composite property because it caused the rectangle to jump over the correct position.
document.getElementsByTagName("button")[0].addEventListener("click", function() {
const clientRect = document.querySelectorAll("div")[0].getBoundingClientRect();
const translationX = clientRect.width + clientRect.left;
document.querySelectorAll("div")[0].animate([{
transform: `translate(${translationX}px, 0)`
}], {
duration: 250,
iterationComposite: "accumulate",
fill: "forwards"
});
});
body {
margin: 0;
}
div {
position: relative;
height: 150px;
width: 150px;
background-color: yellow;
text-align: center;
line-height: 150px;
}
<div>Moving Object</div>
<button>Press</button>

jQuery effect for resizing text

so, I'm trying to make two adjacent divs, such that on mouseover the div on the right is moving left and the div in left is resizing (getting tighter). The div on the left contains text that when div is getting tighter the words in the must go to next line to fit new size, and that's exactly what I want. but the problem is that when words go to next line they just disappear from line and appear in the next. I want them to move to the next line instead of disappearing and appearing, like this:
here is the code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".SideMenu").mouseout(function() {
$(".mainTitleDiv").animate({
width: '900px',
}, {
queue: false,
})
$(".SideMenu").animate({
right: '-500px',
}, {
queue: false,
})
});
});
$(document).ready(function() {
$(".SideMenu").mouseover(function() {
$(".mainTitleDiv").animate({
width: '400px',
}, {
queue: false,
})
$(".SideMenu").animate({
right: '0px',
}, {
queue: false,
})
});
});
</script>
Here are options to achieve Fitting Text to a container
USING CSS vw
<h1>Fit Me</h1>
CSS
#import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC');
h1 {
text-align: center;
font-family: 'Bowlby One SC', cursive;
font-size: 25.5vw;
}
USING jQUERY Library such FitText
Here is a sample after including the library in your HTML file
jQuery("h1").fitText(0.38);
Here are link to other library
textFit

Forcing a layer repaint

I have a kiosk application running on Ubuntu server 14.04.3 and chrome. Currently I have some code which hides the mouse if there was no movement for 2 seconds and once the user attempts to move the mouse again it shows up again. The trick is by using a cursor:none and adding an overlay:
js:
var body = $('body');
function hideMouse() {
body.addClass("hideMouse");
body.on('mousemove', function(){
if(window.hiding) return true;
window.hiding = true;
body.removeClass("hideMouse");
$('div.mouseHider').remove();
clearTimeout(window.hideMouse);
window.hideMouse = setTimeout(function(){
body.addClass("hideMouse");
$('<div class="mouseHider"></div>').css({
position: 'fixed',
top: 0,
left: 0,
height: '100%',
width: '100%',
zIndex: 99999
}).appendTo(body);
redraw(document.body);
setTimeout(function(){
window.hiding = false;
}, 100);
}, 4000);
});
}
function redraw(e) {
e.style.display = 'none';
e.offsetHeight;
e.style.display = 'block';
}
css:
body.hideMouse *, body.hideMouse{
cursor: none;
}
body.hideMouse *{
pointer-events: none !important;
}
This code works perfectly fine but there is only 1 caveat. When the page first loading it attempts to hide the mouse with the same trick but the mouse is still sticking there since it just didn't repainted the layer I guess. If I want it to work, I have to move the mouse a little bit and from then on it will work as expected and hide the mouse. The thing is that the kiosk application is restarting every day which means I boot the X display again and the mouse is being reset to the middle of the screen and it just sticks there until I move it a little bit. I hope you understand what I mean.
Do you guys have any idea how I can fix this?
You don't need all that code to do what you want. You could do:
Create a setTimeout to hide the cursor after 2s as soon as the page is loaded
When someone moves the mouse, you:
2.1. Show the cursor again
2.2. Clear the current setTimeout
2.3. And create the setTimeout to hide the cursor after 2s again.
The code below should work for you:
document.addEventListener('DOMContentLoaded', function() {
var cursorNone = document.getElementById('cursor-none');
var t = setTimeout(hideMouse, 2000);
document.addEventListener('mousemove', function(e) {
showMouse();
clearTimeout(t);
t = setTimeout(hideMouse, 2000);
});
function hideMouse() {
cursorNone.classList.remove('hidden');
}
function showMouse() {
cursorNone.classList.add('hidden');
}
});
#cursor-none {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
cursor: none;
background-color: transparent;
}
.hidden {
display: none;
}
<body>
<div id="cursor-none" class="hidden"></div>
</body>

overflow-y: scroll causing issues with JQuery

When I add overflow-y:scroll to the .nav styling the button to open the navigation requires 2 clicks. Change this to overflow: none and it only requires 1 click as intended when using the following jquery:
$(function(){
var nav = $('.nav'),
navBut = $('.navBut');
navBut.click(function(){
if(nav.width() === 0){
nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
} else {
nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
}
});
Can anybody see why this would be the case or how I can solve this?
http://jsfiddle.net/9ubxyw0t/2/
Rather than checking if the width of .nav is equal to 0, you need to check to see if it is less than or equal to 0.
Your original issue only seemed to effect certain browsers. It seems like some browsers would give the element a negative width when the overflow property was set to scroll. I guess this is just a cross-browser rendering inconsistency.
Updated Example
var nav = $('.nav'),
navBut = $('.navBut');
navBut.on('click', function () {
if (nav.width() <= 0) {
nav.stop().animate({
width: '15%',
opacity: '1.0'
}, 300);
} else {
nav.stop().animate({
width: '0',
opacity: '0.0'
}, 300);
}
});

Jquery - How to disable the entire page

I have this ajax event
function save_response_with_ajax(t){
var form = $('#edit_'+t);
var div = $('#loading_'+t);
$.ajax({
url: form.attr("action"),
type: "POST",
data: form.serialize(),
cache: false,
beforeSend: function(){
form.hide();
div.show();
},
complete: function(){
div.hide();
form.show();
},
success: function (result) {
}
});
}
And everything works fine, but I want to add (if it's possible) the hability of turning the entire page (the content/body) into gray while before/complete ajax events, like if it were a modal (like this http://jqueryui.com/demos/dialog/#modal but without the dialog)
Is there a way of doing this?
Thanks in advance
Javier Q.
A way of doing this is having an overlay element which fills the entire page. If the overlay element has a semi-transparent background color, it grays out the page completely: http://jsfiddle.net/SQdP8/1/.
Give it a high z-index so that it's on top of all other elements. That way, it renders correctly, and it catches all events (and won't pass them through).
#overlay {
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}​
you can try
$("body").append('<div id="overlay" style="background-color:grey;position:absolute;top:0;left:0;height:100%;width:100%;z-index:999"></div>');
then just use
$("#overlay").remove();
to get rid of it.
quick & dirty.
Try appending an overlay during the "beforeSend" function:
$("body").prepend("<div class=\"overlay\"></div>");
$(".overlay").css({
"position": "absolute",
"width": $(document).width(),
"height": $(document).height(),
"z-index": 99999,
}).fadeTo(0, 0.8);
This is the complete solution which I am using:
Following are the sections:
CSS for overlay. "fixed" is used to cover whole page content, not just screen height and widths. You can use background color or gif
Attaches to "beforeSend" event of jQuery Ajax call. Creates the overlay on demand and shows it.
Upon completion of request, it removes the overlay from DOM
CSS:
.request-overlay {
z-index: 9999;
position: fixed; /*Important to cover the screen in case of scolling content*/
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
text-align: center;
background: rgba(200,200,200,0.5) url('../../Images/submit-ajax-loader.gif') no-repeat center; /*.gif file or just div with message etc. however you like*/
}
JavaScript:
$.ajax({
url: '/*your url*/',
beforeSend: function () {
$('body').append('<div id="requestOverlay" class="request-overlay"></div>'); /*Create overlay on demand*/
$("#requestOverlay").show();/*Show overlay*/
},
success: function (data) {
/*actions on success*/
},
error: function (jqXhr, textStatus, errorThrown) {
/*actions on error*/
complete: function () {
$("#requestOverlay").remove();/*Remove overlay*/
}
});
Use jQuery ajaxStart() to append a Div to your document. Set it to the size of your document with some form of semi-transparent document. Then remove it on ajaxStop().
var modal = $('<div>')
.dialog({ modal: true });
modal.dialog('widget').hide();
setTimeout(function() { modal.dialog('close'); }, 2000); // to close it
here is a demo: http://jsbin.com/avoyut/3/edit#javascript,html,live
don't forget to call modal.dialog('close'); to end it all!
this way you get the benefits of the actual dialog modal code, resizing, disabling, etc..
hope this helps -ck
You may want to give the user some indication that something is happening, too, not just a blank/gray screen. I would suggest some sort of loading gif, see this, for example.
Today I was looking for a solution which would work for all browsers of IE. I took the code of #pimvdb and #Ash Clarke along with his comment where he mentioned background-color: black; opacity: 0.8; may also work. For IE it will just be completely black. and came to a solution below:
$("#first-div").prepend("<div class=\"overlay-example\"></div>");
var height1 = $("#first-div").height();
var width1 = $("#first-div").width();
$(".overlay-example").css({
"background-color": "black",
"z-index": "9999999",
"position": "absolute",
"width": width1,
"height": height1,
"display": "none"
}).fadeTo(0, 0.0001);
Tested in IE8, IE9 above. Could not check for IE7. Will be glad to update my soulution in case you find it wrong. (it would help me also to update my solution :))
Thank you #pimvdb and #Ash Clarke
Demo

Categories