I am using plupload in a from which is loaded dynamically through AJAX and also this form has a captcha image.
I was struggling to make plupload shim to position correctly. Then I found a solution which works in almost all browsers, except Google Chrome. Here is my solution:
<span id="upl_container" style="position:relative;">
<input type="button" id="my_button" value="Click me to upload something" />
</span>
In uploader settings I set:
browse_button : 'my_button',
container : 'upl_container',
Now this makes the shim to be absolutely positioned in a relative parent, where the parent (span) is exactly the size of the button (I could not use div because it takes 100% width of its parent and then plupload has positioning problems on all browsers).
When I inspect the plupload shim settings in Firefox (where it is positioned correctly), I see the following:
element.style {
background: none repeat scroll 0 0 transparent;
height: 28px;
left: 0;
position: absolute;
top: -4px;
width: 78px;
z-index: 99999;
}
but in Chrome it shows me:
element.style {
position: absolute;
background: transparent;
z-index: 99999;
top: 0px;
left: 146px;
width: 70px;
height: 23px;
background-position: initial initial;
background-repeat: initial initial;
}
Obviously, the left property is much too big.
For now I don't care if it is a bug or not, I just want to find some workaround how to force left side of plupload to be 0. I tried to add a Javascript code which sets left to 0 in Init, Refresh, PreInit callbacks to plupload, but this does not help, the left side anyway jumps to 146px.
Is there any way to force the left side of shim to be 0px?
(BTW, I have set Flash to be the default plupload runtime with fallback to HTML4 and HTML5).
Ok, so I went with the following ugly code:
uploader.bind('Refresh', function(up) {
$('#'+up.settings.container + ' > div').css('left',0);
$('#'+up.settings.container + ' > div').css('top',0);
$('#'+up.settings.container + ' > div').css('width','100%');
$('#'+up.settings.container + ' > div').css('height','100%');
$('#'+up.settings.container + ' > form').css('left',0);
$('#'+up.settings.container + ' > form').css('top',0);
$('#'+up.settings.container + ' > form').css('width','100%');
$('#'+up.settings.container + ' > form').css('height','100%');
$('#'+up.settings.container + ' > div').children().css('left',0);
$('#'+up.settings.container + ' > div').children().css('top',0);
$('#'+up.settings.container + ' > div').children().css('width','100%');
$('#'+up.settings.container + ' > div').children().css('height','100%');
$('#'+up.settings.container + ' > div').children().css('font-size','20px');// default is 999px, which breaks everything in firefox
})
And yay! it works for flash, htm5, htm4 runimes, tested all on Chrome, Firefox, IE7, IE9. The shim is in place, finally.
I had problems with the shim not being in the right place on dynamically loaded and toggled content.
$('#my_button').mouseenter(function() {
uploader.refresh();
});
Was sufficient to fix it.
Related
I've just revamped my tooltip code due to issues with the position altering depending on the size of it's parent (mostly due to using offsetX/Y instead of pageX/Y, but page was being weird, too). So I decided to just have one tooltip for each of my site's pages, parented to the main div, and just feed it different text depending on what the mouse is hovering over (I'll be dealing with the visibility part later).
And it's worked quite well so far, but the only issue is that, the smaller I make my window, the farther the tooltip is from my mouse, until it's not even in view anymore.
Here's the JavaScript coding I've done for it.
var body = document.getElementsByClassName("test");
var tooltip = document.getElementById("tooltip");
body[0].addEventListener("mousemove", tooltipMove)
function tooltipMove(event) {
var x = event.pageX;
var y = event.pageY;
tooltip.style.top = (y + -900) + "px";
tooltip.style.left = (x + -875) + "px";
}
The CSS coding for the tooltip:
.tooltip {
visibility: hidden;
width: 170px;
background-color: white;
background-image: url("images/tooltipbackground.png");
color: black;
text-align: center;
border-style: groove;
border-color: #f4bb4c #ffd966 #ffd966 #f4bb4c;
border-radius: 2px;
padding: 5px 5px;
position: absolute;
z-index: 1;
}
.notfound:hover .tooltip {
visibility: visible;
}
And the HTML:
<div class="test" style="top: 70px; position: relative; height: 100%; width: 100%;">
<h1>TEST</h1>
<img src="images/pagenotfound.png">
</div>
<div style="width: 1px; height: 1px; position: relative;">
<span class="tooltip" id="tooltip">testing</span>
</div>
I should mention the body's (which has the "notfound" class) height is 900px, and it's width 600px, in case that's one of the problems.
The 1 pixel div is just what I'm using to "host" the tooltip, not sure if it's causing any problems as well. I inspected the page in order to see it, and it never seemed to slide around with the window size.
Any sort of help would be greatly appreciated. I've tried to switch it from pageX/Y to clientX/Y, but it's the same issue. And using offset causes it's position to shift depending on what I'm hovering over, which is the reason I'm revamping the code in the first place.
I've also tried to change the tooltip's position from absolute to, well, anything else (after resizing it's parent so it doesn't get squashed), but that hasn't helped.
Another thing I should mention is that, for some reason, the shifting doesn't seem to happen in the Y axis, it's only when I squish the window horizontally that the tooltip shifts, at least from what I've noticed.
I had thought changing the tooltip's position to fixed had made it disappear, but I just couldn't see it due to the massive repositioning I had done to it. Once I deleted that it was visible and fine, and better yet, it stays in it's proper position no matter the screen size!
Also note: I had to change pageX/Y to clientX/Y, as using page made the tooltip shift vertically when squished.
<div style="height: 1px; width: 1px; position: relative;">
<span class="tooltip" id="tooltip" style="position: fixed;">Placeholder</span>
</div>
for (i = 0; i < tip.length; i++) {
tip[i].addEventListener("mousemove", tooltipMove)
tip[i].addEventListener("mouseleave", defaultVis)
}
function tooltipMove(event) {
var x = event.clientX;
var y = event.clientY;
tooltip.style.visibility = "visible";
tooltip.style.top = (y + -50) + "px";
tooltip.style.left = (x + -200) + "px";
}
function defaultVis() {
tooltip.style.visibility = "hidden";
}
I have a sticky border on my website, and during the window's scroll event I update it to follow the window when the user scrolls.
CSS:
.fixed {
position: relative;
background: black;
color: white;
height: 40px;
}
.container {
height: 2000px;
}
HTML:
<div class="container">
<div class="fixed">Fixed</div>
</div>
JS:
$(window).scroll( function() {
$('.fixed').css({top: $(window).scrollTop()});
});
Demo: https://jsfiddle.net/xt8c00yq/
I know scroll events are unreliable and unresponsive on mobile browsers, so I have already disabled it for devices. However, it seems to be laggy and jittery on the desktop version of Safari as well. It works fine on both Chrome and Firefox. Test the demo on both browsers to see for yourselves.
Are there any known hacks to make it update smoothly on Safari as well?
(position:fixed is not an option as it needs to flow in response to an unfixed sibling css transition)
Tap into hardware accelerated rendering with translate3d.
$(window).scroll( function() {
scrolled = $(window).scrollTop();
$('.fixed').css({
'-webkit-transform' : 'translate3d(0,' + scrolled + 'px,0)',
'-moz-transform' : 'translate3d(0,' + scrolled + 'px,0)',
'-ms-transform' : 'translate3d(0,' + scrolled + 'px,0)',
'-o-transform' : 'translate3d(0,' + scrolled + 'px,0)',
'transform' : 'translate3d(0,' + scrolled + 'px,0)'
});
});
I have a large page running a lot of javascript which also contains a fixed position floating element. The floating element updates its position based on the user's current scroll position, via a function which fires on the scroll event.
The issue I am having is that due to the size and complexity of the page, there is a delay before the code in the scroll event is executed, and this causes the fixed element to noticeably jump when scrolling quickly or using the mouse wheel.
See jsfiddle: http://jsfiddle.net/jorsgj2b/1/ (The use of setTimeout simulates the delay in executing the function on the real page.)
<div class="header"></div>
<div class="main"></div>
<div class="float"></div>
.header {
width: 100%;
height: 200px;
background-color: #787878;
}
.main {
width: 100%;
height: 1400px;
background-color: lightblue;
}
.float {
position: fixed;
width: 100px;
height: 50px;
top: 233px;
right: 25px;
background-color: red;
z-index: 2;
}
$(function() {
$(window).scroll(function() {
setTimeout(updateFloat, 50);
});
});
var updateFloat = function() {
var mainTop = $('.main').offset().top;
var scrollPos = $(window).scrollTop();
var floatOffset = 25;
var newTop = (scrollPos > mainTop)
? floatOffset + 'px'
: mainTop + floatOffset - scrollPos + 'px';
$('.float').css('top', newTop);;
}
I am at a bit of a loss as to how to resolve this. I have tried updating the margin instead of top position, as well as switching between absolute and fixed positioning. Perhaps there is a way to use css transitions to help, however I haven't managed to get them to work here.
You might add position: sticky to your css to that the stickiness is done by browsers that support it (only Firefox and Safari according to caniuse.com).
You'll always be limited to the fidelity of the scroll events so you may always see a bit of a delay, but you could improve things a little by caching values instead of looking them up each time updateFloat() is called. For example
var mainElement = $('.main');
var windowElement = $(window);
var floatElement = $('.float');
var updateFloat = function() {
var mainTop = mainElement.offset().top;
var scrollPos = windowElement.scrollTop();
var floatOffset = 25;
var newTop = (scrollPos > mainTop)
? floatOffset + 'px'
: mainTop + floatOffset - scrollPos + 'px';
floatElement.css('top', newTop);
}
The problem might also be related to browser trying to re-layout the page because the .float element is in the same render layer as the other divs. You can fix that by adding a style that tells the browser to put the .float element in its own render layer (resulting in much faster rendering due to GPU compositing). The most common trick is to add transform: translateZ(0); to your style, but there's also a proposed style will-change that is supported by several browsers. So you should update your css like this
.float {
will-change: scroll-position;
transform: translateZ(0);
position: fixed;
width: 100px;
height: 50px;
top: 233px;
right: 25px;
background-color: red;
z-index: 2;
}
Note that adding render layers increases memory usage so don't go overboard with it. It also sometimes impacts other features, like anti-aliasing of text.
I have the code like this for serving the image from 3rd party system:
var bbimagebannerfile = "";
document.write("<img src=\"" + bbimagebannerfile + "\" border=\"0\" />");
This image is positioned at the bottom of the page. What i am trying to do is make this image scroll along with the page once user reaches its position and when the user scrolls upwards then this image becomes static again. Can anyone help me with that ?
Just an example:
<div id="fixed-image"></div>
If we assume that the HTML above is your content that is being served. You can add this css:
#fixed-image {
width: 100%;
height: 100px;
background-color: red;
position: fixed;
bottom: 0;
}
In your case, you can try adding a class property with the styling above.
JS Fiddle: http://jsfiddle.net/df6tmLrg/
Another demo with your javascript:
http://codepen.io/FakeHeal/pen/qEgxKN (codepen, because jsfiddle doesn't allow document.write)
var bbimagebannerfile = "https://avatars2.githubusercontent.com/u/1038697?v=3&s=460";
document.write("<img src=\"" + bbimagebannerfile + "\" border=\"0\" width="100" />");
And the css:
.bottom-fixed {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
}
UPDATE:
If you use jQuery, you can use .scroll():
var t = $("#fixed-image").offset().top;
$(document).scroll(function(){
if($(this).scrollTop() > t)
{
$("#fixed-image")
.css('position', 'fixed') //we change the position to fixed
.css('top',0); // and the top to zero
} else {
$("#fixed-image")
.css('position', 'static') //we change the position to fixed
.css('top',0); // and the top to zero
}
});
Here's a demo:
http://jsfiddle.net/df6tmLrg/2/
I'm trying to fill that my image fits the size of the DIV.
I already find that "background-size: contain" is not working for Internet Explorer 8.
Is there a possible workaround for my specific code.
.thumb {
/* Select a maximum height and width to allot for each thumbnail. Set margin size here as well. */
height: 125px;
width: 135px;
/* Do not edit these properties. */
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
In my javascript:
$('.thumb:' + place).css("background-image", 'url(' + entry.thumbnailURL + ')');
$('.thumb:' + place).css("filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod='scale')');
$('.thumb:' + place).css("-ms-filter", 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' + entry.thumbnailURL + ',sizingMethod='scale')');
You get an Unexpected identifier because of these two bits:
',sizingMethod='scale')');
You must change it to
',sizingMethod=\'scale\')');
or
',sizingMethod="scale")');