Jquery addClass function fails in IE7 for td element - javascript

For the following HTML:
<td class="width2 padLeft" id="loading_45"> </td>
the following JQuery:
$('#loading_45').addClass('loading');
With the following css definition:
td.loading
{
background-image:url("../images/icon_loading_circle.gif");
background-position:left center;
background-repeat:no-repeat;
height:auto;
position:absolute;
text-align:center;
}
does not cause the background-image to appear in IE7 (works fine in FF)
Does anyone have an idea what I am doing wrong?
As Pointy noted the problem was in the css the position:absolute; definition should be removed
Thanks all for answering so fast

I'm sure that "addClass" is working, in that it's adding the class to the element, if (as #Gaby notes) you're doing it at the right time. Since it works in Firefox, you probably are.
I suspect that the problem might simply be that your stylesheet is freaking IE7 out. Putting "position: absolute" on a table cell is likely to cause problems, like making the table cell render in completely the wrong place. When I try it, table cells always render in the upper left corner of the page, even though the stylesheet doesn't specify a "top" or "left".
Try testing your page with that class hard-coded onto the table cell and see what happens.

make sure the code runs after the DOM is loaded using
$(function(){
$('#loading_45').addClass('loading');
});
or
$(document).ready(function(){
$('#loading_45').addClass('loading');
});
Also make sure the elements has a width/height that will fit the background image.
Demo: http://www.jsfiddle.net/9PZZB/2/

Related

How can I hide a scrollbar smoothly?

I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance
Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.
I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/
You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}
This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});

How to make a hidden (ng-cloaked) item preserve the space it takes up when its visible

In a table... I have action buttons that appear when the mouse goes over that row by using ng-cloak and ng-show.
The problem is, when the icon appears, it takes up more space than when its not there, and the html around it jumps.
I even set my css to use display:none for ng-click, which I thought is supposed to preserve the space the hidden element takes up (as opposed to visibility: hidden).
How can I fix this? OR can you think of a better way to do this?
<tr id="treeHistoryItem" ng-repeat="o in tree.history"
ng-mouseover="showEdit=true" ng-mouseleave="showEdit=false">
....
<td align='right'>
<a ng:cloak ng-show="showEdit" href
ng-click="removeTreeRec(o.$$hashKey)"
class='fa fa-times _red _size6' ></a>
</td>
</tr>
Here's a plunkr example:
http://plnkr.co/edit/POA9b2pZA9QbBgcMsxBE?p=preview
ngCloak is used to
prevent the Angular html template from being briefly displayed by the
browser in its raw (uncompiled) form while your application is
loading
The correct place to put it would be way further up in the DOM tree but it's really meant to solve a different problem than this. I would try just going with ngShow here and rather override its CSS class, .ng-hide to do visibility: hidden; rather than display: none;
(Visibility is the one that preserves space, not display).
As noted in the docs for ngShow you will need to use !important to override the display: none; property.
Note, in the version of Angular you were using in your plunker, ngShow is adding an inline style to the hidden element. I am not sure which version moved away from that but I could not get this approach to work with 1.0.5.
Here's it working with your plunker, but with the most recent Angular version:
Plunk
Late to the party, however...
In my case, whenever I need to do this i use ng-class. If you copy the code from your ng-show and put it into:
HTML:
ng-class="{'disabled': showEdit}"
ng-click="showEdit && removeTreeRec(o.$$hashKey)"
CSS:
.disabled {
visibility: hidden;
cursor: default;
}
Cursor:default simply makes the cursor not change for usability purposes.
Hope this helps!
EDIT: in this case adding the cursor and showEdit to the ng-click probably wont make a difference as the icon will always be shown if the mouse is over the icon due to the hover event, but nonetheless I think it's good practice to cover all bases
You can do that using css. You can put to your <tr> a height.
you can assign height to your containers which sometimes isn't practical because you don't always know the content height up front. or you could change your classes content declaring them to be
.not_remove.ng-cloak,.not_remove.ng-hide{
display:block;
visibility:hidden;
}
note the .not_remove class. this will enforce this new behavior only on elements who have the no_remove class. the display property can be setted to what ever flow your element follows

How to assign css hover to tag when there is another tag on top?

I have a table and I want to assign a css hover to all its cells. But at the same time I have a div tag with a bg image and it has the same width and height as the table and its being positioned right on top of the table with position relative. How can I still assign the css hover to the cells of the table, because when I try it, it doesn't work, and I think it's because when I it's detecting the div tag...
Does anyone know the solution to this?
NOTE: it has to work with IE9 (can't use css3 either)
check this post
It can be done using CSS pointer-events in Firefox >= 3.6 and Safari >= 4.0. Probably some Chrome version too. Unfortunately, I don't have knowledge of a cross-browser workaround.
#overlay {
pointer-events: none;
}
There are 2 solutions:
1-Use the following code:
<td onmouseover="className='tdon'" onmouseout="className='tdoff'"></td>
then write tdon and tdoff classes in css.
2- Use jQuery
$("td").hover(function() {});

jQuery change height on overflow

i have a div and its height is fixed to 100px right now.
but its data is not static and a user can add as much data as he wants, i dont want scroll bars and it should get resized to data contained in it(height only) is there any css property to achieve this except than min-height as it doesnot work on IE.
the div may have multiple children and i am thinking to do something that doesnt involve calculating change of height of all children
thanks
height in IE6 is essentially min-height anyway. If you don't have a problem using quick hacks -
div.blah {
_height:100px;
min-height:100px;
}
...otherwise, tuck it in some Conditional Comments so you can sleep at night.
<!--[if IE 6]>
<style type="text/css">div.blah { height:100px; }</style>
<![endif]-->
You can specify height:auto;overflow:visible;. This will make the <div> autosize itself.
overflow:visible; height:100px;
Should work, no?
Check out this plugin: http://james.padolsey.com/javascript/jquery-plugin-autoresize/
Hope I helped.
had to do using jQuery only calculated height of children and set it parent, css hacks dint helped

Font anti-aliasing issues with jQuery.fadeIn in IE8?

I'm banging my head against the wall with an issue I'm having in IE8. I am using the fadeIn function on jQuery to make the site content fade in. This works perfectly fine in all of the other browsers, but when the fadeIn finishes in IE8 the font anti-aliasing seems to change, causing the text to shift slightly.
You can see the site at http://www.ipulse.biz. The code I'm using to cause the fade in is quite simple, as shown below.
var showContent = function() {
$('#content div:first').fadeIn(1000);
$('#navigation').fadeIn(500);
} // end showContent
The code is called by a setInterval function, if that makes any difference.
As previously explained, this is caused by Cleartype in Internet Explorer- but there is a workaround that will at least make this issue tolerable.
$('#navigation').fadeIn(500, function(){
if ($.browser.msie){this.style.removeAttribute('filter');}
});
That should force IE to clear the transparency and thus render the text normally.
It still isn't pretty, unfortunately.
This is caused by ClearType disappearing in Internet Explorer, which is quite annoying.
http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/
I know my answer comes a bit too late, but how about thinkin' vice-versa?
IE7 / IE8 don't keep anti-alias for Faded text, so, if you have a single color background (e.g. black), you can create an empty div, background-color: #000; position: absolute; display:block; and put it over the text element.
If your request is to have a text FadeIn effect you just have to apply the FadeOut to the "black" layer over it, and vice-versa.
This way the text anti-alias is kept intact.
Sorry for the very late reply, but I had the same problem and was searching for a solution when I came across this topic. I didn't find a working solution in this topic, but I came up with a simple solution that seems to fix the problem perfectly.
In stead of using:
$('.element').fadeIn(500)
use fadeTo and fade to 99%:
$('.element').fadeTo(500, 0.99)
You won't see a difference in the 1% and because it doesn't reach 100% opacity, IE doesn't seem to apply cleartype.
Let me know if this works for anyone else.
it needs to be called after the fade effect is completed (e.g. 500ms after etc.)
I fixed this by adding in the css for the required text
filter:alpha(opacity=99);
this will only effect ie. I still get a small shift in ie7 but it's exceptable.
You can see it working here http://thriive.com.au/
Found a ready solution for that problem.
http://jquery.malsup.com/fadetest.html
I have a solution: Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
I also had problems with transparent PNG's in faded area's, but combining the above JS for removing the filter attribute with a tiny bit of css the image black 'border' was gone while fading.
Is my case it was a element that uses a css-sprite, so i only had to add this to my sprite class in the css:
.sprite{
background-image: url('/images/sprite.png');
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#00FFFFFF,startColorStr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',startColorStr='#00FFFFFF'); /* IE6 & 7 */
zoom: 1;
}
I'm not using JQuery but I half-solved this issue by using the following CSS:
div
{
opacity: .15;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
div:hover
{
opacity: 1;
-ms-filter:"";
}
The fully opaque text is anti-aliased now, but the translucent isn't. It's not a huge issue for the translucent text though.

Categories