I'm trying to use tween max and superscroll script, to handle opacity of my content while scrolling.
This works like a charm in chrome, safari, ff, ie9 and ie10.
However, I have an issue with ie8.
You can see the problem in this page : http://www.promenade-sainte-catherine.com/localisation
When scrolling down in ie8, the menu on the left changes its color to become white. This is okay, and once the animation is finished, it becomes green again.
This is my css :
body #menuGaucheContainer #menuGauche .logoPSC {
position: relative; zoom:1;}
/* line 270, sass/partial/_global.scss */
body #menuGaucheContainer #menuGauche .logoPSC #log1, body #menuGaucheContainer #menuGauche .logoPSC #log2 {
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
position: absolute;
top: -109px;
left: 75px; }
And this is the tweenmax call
controller.addTween('#aucoeurducentrevilleContainer',
TweenMax.fromTo(jQuery('#img2Localisation'), 1,
{css:{opacity:0}},
{css:{opacity:1}}),
200);
controller.addTween('#aucoeurducentrevilleContainer',
TweenMax.fromTo(jQuery('#log2'), 1,
{css:{opacity:0}},
{css:{opacity:1}}),
200);
If I remove the "filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);" line. Then it works good, but nothing have an opacity of zero at the beginning of the page.
If I add css:{opacity:X, alpha:X}, nothing changes,
If I change {css:{opacity:0}} to {css:{alpha:0}}, it kind of works, but I still have some issues.
Does anyone have any idea ?
Thanks
I also had this issue with a new version of Greensock, and it's not because the plugin, but because of CSS. The error is in the beginning statement:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
opacity: 0;
While this is perfectly ok if you don't want to support IE7, it will break TweenMax's animation rules. The fix is to add the IE5-IE7 css rule, even if you won't support IE7 in general:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
It looks like you're using a VERY old version of the GreenSock files (TweenMax). You should definitely update - that may fix the problem right there. http://www.greensock.com/?download=GSAP-JS Otherwise, try tweening to opacity:0.99 instead of 1 solves things for you. But again, I'm pretty sure that updating will help because if my memory serves correctly, this particular scenario had a workaround applied in a TweenMax update a while back.
Related
I have this jsfiddle script that I am having trouble to do the following:
Respond to button click.
To show the box drawn on the canvas
I know that I could make this work if I add "z-index: -1" to
var sss = `
.container:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background: url("${url}") 50% 50% no-repeat;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s
-o-transition: all 1s;
transition: all 1s;
}
`;
$(`<style id="dynastyle" type='text/css'>${sss}</style>`).appendTo("head");
But I don't want to do that for a peculiar reason that is too complicated to explain here.
Does anyone know how to get this to work? To be honest, I have no idea why the button is not clickable. enter link description here
Also, I need to be able to draw on top of the canvas. BTW, I don't want to draw the image in the canvas.
After tweaking it for a few hours, I finally got it working. Basically I needed to do the following:
enclosing the buttons in a div that has the position attribute and z-index'd (I used 1, I believe that the default value is 0, giving 1 to the buttons makes it bigger than the 0 for the background image).
place the canvas in a different div and use absolute position to overlay it on top of the div that has the background image and use z-index 1.
When all these two things are done, I can remove the z-index on the dynamic style for the background image. What has giving me a lot of trouble during this was that I keep forgetting to add the position attribute on the elements involved in the layering.
I'm facing a very odd issue here using Raphael.js to draw using SVG. If I set opacity on a triangle I've drawn, it cuts off the corners. It appears fine in Chrome and IE however. Using the same triangle drawing, if I change opacity to 1 or if I alter fill-opacity instead of just opacity, it renders correctly. Even more strange, creating a demo in jsFiddle using the same exact code and libraries renders fine. I double checked versions of Raphael.js, updated mine again just in case, etc.
Does anyone have any idea how this could be happening?
Here's the code I'm using:
var paper = Raphael(0,0, 800, 800);
var triangle1 = paper.path('M295,738 l0,-738 l500,0 Z')
var triangle2 = paper.path('M200,200 l0,-100 l100,0 Z')
triangle1.attr({
fill: '#fff',
'opacity': '0.5'
});
triangle2.attr({
fill: '#fff',
opacity: 1,
stroke: 'red'
});
Here is the jsFiddle: http://jsfiddle.net/crisp330/26PaS/
And here is what this looks like on my FF version 16.0.2: http://grab.by/hBWK
I even directly copied the iFrame source from jsFiddle (which looks correct in FF for me), and pasted it into a new HTML page... nope! Corners get cutoff again.
Any ideas as to whats going on?
I think this is a bug, and if so im going to report it, but even if it is a bug i need a way to fix this. I'd really like to not have to use an image but here's the problem:
JSBin Example: http://jsbin.com/alame5
Chrome 3 on Mac (and Windows)
Firefox 4 on Mac
Works the same on IE8 and IE9 as above
Now, Firefox 4 on Windows 7
the same affect can be made with one p:before:
.twitterfeed p:before {
content:"\00a0";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
right:25px; /* controls horizontal position */
width:0;
height:0;
border-width:0 0 20px 20px; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:transparent transparent transparent #fff;
z-index: 0;
}
I only changed the border-width, according to this page.
But still, i'm pretty sure its a FF4 bug..
I have this page where my container have a background image using
background-color:rgba(255, 255, 255, 0.76);
*background-color:#fff;
*opacity: 0.8;
*filter: alpha(opacity = 80);
in Mozilla works ok; shows the translucent background and the elements inside completely opaque; but in IE7 the transparency inherits to all other elements. I've tried making a new container inside the container giving
*opacity:1, *alpha(opacity=100), *zoom:1, *filter:none
and stuff but nothing seems to work...
You have to use a semi-transparent background-image, it will work in every browser (except IE6...)
This is happening because you are using the opacity and filter css tags, which will be inherited by child elements.
Try using the following:
.element{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity:0.8;
opacity:0.8;
}
.element *{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1.0;
opacity:1.0;
}
This should select all child elements and set their opacity to 100% and should work in all browsers
Can you guys please let me know what is the best way to disable the horiontal scroll bar?
I have div with width: 100% and height :280px. When we have long continuous text (without any spaces), we are getting a horizontal scrollbar displayed.
Btw I am using jscrollPane.
Any suggestions would be appreciated.
What I have found in jScrollPane - settings object documentation:
contentWidth - int (default undefined)
The width of the content of the scroll pane. The default value of
undefined will allow jScrollPane to calculate the width of it's
content. However, in some cases you will want to disable this (e.g. to
prevent horizontal scrolling or where the calculation of the size of
the content doesn't return reliable results)
So to get rid of horizontal bars, just set content width lower than the container width.
Example:
$('#element').jScrollPane({
contentWidth: '0px'
});
The answer from Sławek Wala (contentWidth: '0px') is a really magic wand :)
In IE8 unnecessary horisontal scrollbar appears often upon elastic containers. But that's only part of the trouble: when horisontal scrollbar appears the content overflows through both vertical gutter and scrollbar.
So, if one disables horisontal scrollbar just making it invisible (as the other answers suggest) then the second part of the trouble remains.
contentWidth: '0px' fixes the both symptoms.
However, knowncitizen was right, '0px' does something weird with the jScrollPane because contentWidth is an integer property (btw contentWidth: 'foo' gives us the same pretty result ).
To avoid unpredictable effects one can use any positive but small enough number like this: contentWidth: 1
This is quite outdated question. But in case someone has same issue as you and I:
as I haven't found any property or API call to achieve this, I used simple solution - disabled via CSS:
.jspHorizontalBar { display: none !important; }
Not very elegant way, but saved time of investigating or 'hacking' jScrollPane code.
Pass horizontalDragMaxWidth: 0 to the options.
None of the solutions worked for me here so here's what I did using nested divs:
JS
$('#scrollpane').jScrollPane();
HTML
<div id="scrollpane" style="max-height: 400px; width: 700px">
<div style="overflow:hidden; width: 650px">
Your long content will be clipped after 650px
</div>
</div>
I was able to accomplish this using CSS.
Since the parent should have the class horizontal-only, when we only want a horizontal bar, I added the class jspVerticalBar as a child so that when it appears ONLY under the horizontal-only class, it will not display it.
It will still work if you have set the vertical and horizontal on the same page.
div.horizontal-only .jspVerticalBar { display:none; }
After trying and failing with the other answers, we had to hack jScrollPane to make this work. In jquery.jscrollpane.js, line 171:
pane.css('overflow', 'auto');
// Hack: Combat size weirdness with long unbreakable lines.
pane.css('position', 'static');
// End hack
if (s.contentWidth) {
contentWidth = s.contentWidth;
} else {
contentWidth = pane[0].scrollWidth;
}
contentHeight = pane[0].scrollHeight;
// Hack: Continued.
pane.css('position', 'absolute');
// End hack
pane.css('overflow', '');
Not sure how safe it is but that works for us.
For me, the best solution was in to add left: 0 !important; for classes .customSelect and .jspPane in the CSS:
.customSelect .jspPane {
overflow-x: hidden;
left: 0 !important;
}