Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Filters and cleartype... together

    As some of you may know, using any kind of filter disables ClearType in IE7.

    You can see what I'm talking about with the the fade in content viewer from this page:

    http://www.javascriptkit.com/script/...ntviewer.shtml



    I was looking for ways to prevent ClearType from getting disabled and came across this workaround:

    http://mattberseth.com/blog/2007/12/...transform.html


    Unfortunately, my knowledge in javascript is limited and I have no clue how to implant that workaround to the content viewer above.

    Any help? Or another suggestion to make this work?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Any help? Or another suggestion to make this work?
    Seems like the easiest workaround from the link you posted is the second:

    Workaround #2: Apply the FadeOut Animation to an Overlayed DIV

    The other workaround I tried was to overlay the element I was going to apply the FadeIn to with another DIV element. And instead of Fading in the original element, I applied the FadeOut animation to the overlayed DIV. So instead of my content being faded-in, the overlayed DIV is being faded-out. This causes it to slowly disappear and provide the illusion that my underlayed content is being faded in. Here is the JavaScript for the function that handles this.
    Not sure what application you're planning on using the JSkit animation on, but a flow of:

    1. Position the content areas next to each other, either vertically or horizontally and hide the ones not displayed initially with CSS.
    2. When each link is clicked, the "page" jumps into view, underneath an opaque white div.
    3. The white div is faded with the Javascript, leaving ClearType active and making it look like the content is being faded in.


    It's not copy-and-paste, but it could be done easily with the jQuery library, which is the library the initial script uses.

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply.

    I understand the logic behind your suggestion, unfortunately I really lack the javascript knowledge to do something like that from scratch.

    I was hoping there would be a way to implant a workaround to the JSkit script because for my purpose, I pretty much like the way it works. Except for the part where the text is aliased.

    I actually thought method 1 seemed easier. Basically when you click on the menu links, the content div fades in, and when it's done the javascript function that removes all filters from that div is called. I guess it's just not as easy as it sounds.

    It's amazing the amount time that is wasted trying to get things to look good in IE...
    Last edited by enkay; 08-07-2008 at 05:05 AM.

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I actually thought method 1 seemed easier. Basically when you click on the menu links, the content div fades in, and when it's done the javascript function that removes all filters from that div is called. I guess it's just not as easy as it sounds.
    Actually that seems easier to me, but since you mentioned you didn't have a lot of JS knowledge I thought the flow of the second solution would be easier to implement. Plus the first method still doesn't solve the issue of the text looking wonky while the effect is being run.

    I don't have much time to look at the script now, but have you tried simply adding the JS function removeFilter from that article at the end of the jQuery script?

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can live with the text looking aliased while the effect is being run.

    I would really like to keep the JSkit code and not write one from scratch because I've already implanted it in my website... in ways that are a little complicated. I would rather not have to do all that work again.

    I'm not really sure where I should add that new funtion in the .js file, but I could probably figure that out from looking at how the other functions are presented.

    What I can't figure out from looking at the .js file from the content viewer code is how to make it so everytime it runs the fade in effect, it runs the remove filter function right after.

    Here's the JS code for the remove filter function

    Code:
                function removeFilter(element) {
    
                    if(element.style.filter && element.style.removeAttribute){
                        element.style.removeAttribute('filter');
                    }
                }
    Here is the original JS file :

    Code:
    //Fade In Content Viewer: By JavaScript Kit: http://www.javascriptkit.com
    
    var fadecontentviewer={
    	csszindex: 90,
    	fade:function($allcontents, togglerid, selected, speed){
    		var selected=parseInt(selected)
    		var $togglerdiv=$("#"+togglerid)
    		var $target=$allcontents.eq(selected)
    		if ($target.length==0){ //if no content exists at this index position (ie: stemming from redundant pagination link)
    			alert("No content exists at page number "+selected+"!")
    			return 
    		}
    		if ($togglerdiv.attr('lastselected')==null || parseInt($togglerdiv.attr('lastselected'))!=selected){
    			var $toc=$("#"+togglerid+" .toc")
    			var $selectedlink=$toc.eq(selected)
    			$("#"+togglerid+" .next").attr('nextpage', (selected<$allcontents.length-1)? selected+1+'pg' : 0+'pg')
    			$("#"+togglerid+" .prev").attr('previouspage', (selected==0)? $allcontents.length-1+'pg' : selected-1+'pg')
    			$target.css({zIndex: this.csszindex++, visibility: 'visible'})
    			$target.hide()
    			$target.fadeIn(speed)
    			$toc.removeClass('selected')
    			$selectedlink.addClass('selected')
    			$togglerdiv.attr('lastselected', selected+'pg')
    		}
    	},
    
    	setuptoggler:function($allcontents, togglerid, speed){
    		var $toc=$("#"+togglerid+" .toc")
    		$toc.each(function(index){
    				$(this).attr('pagenumber', index+'pg')
    		})
    		
    		var $next=$("#"+togglerid+" .next")
    		var $prev=$("#"+togglerid+" .prev")
    		$next.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('nextpage'), speed)
    			return false
    		})
    		$prev.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('previouspage'), speed)
    			return false
    		})
    		$toc.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('pagenumber'), speed)
    			return false
    		})
    	},
    
    	init:function(fadeid, contentclass, togglerid, selected, speed){
    		$(document).ready(function(){
    			var faderheight=$("#"+fadeid).height()
    			var $fadecontents=$("#"+fadeid+" ."+contentclass)
    			$fadecontents.css({top: 0, left: 0, height: faderheight, visibility: 'hidden'})
    			fadecontentviewer.setuptoggler($fadecontents, togglerid, speed)
    			setTimeout(function(){fadecontentviewer.fade($fadecontents, togglerid, selected, speed)}, 100)
    			$(window).bind('unload', function(){ //clean up
    				$("#"+togglerid+" .toc").unbind('click')
    				$("#"+togglerid+" .next", "#"+togglerid+" .prev").unbind('click')
    			})
    		})
    	}
    }
    Can anyone help with combining those 2 to produce the desired effect?

    Unless someone else can help, I'm looking at a looong night of trial and error!

  • #6
    New Coder
    Join Date
    Aug 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well I've been trying to edit the JS with no luck for a while now..
    It looks like such a simple thing to add to the code.

    After it fades in:

    Code:
    .style.removeAttribute('filter');
    I just don't know where to put it, and what to apply it to...

  • #7
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    I'm no Javascript expert, so I'm sure someone else will have some more helpful advice…BUT if I was working on this I would start here:

    Code:
    $next.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('nextpage'), speed)
    			return false
    		})
    		$prev.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('previouspage'), speed)
    			return false
    		})
    		$toc.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('pagenumber'), speed)
    			return false
    		})
    jQuery is assigning functions to run on the click of #toc, #next, or #prev. So I would add the "removeFilter" function after it runs "fadecontentviewer".

    If that doesn't work you're on your own.

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    try this:
    Code:
    //Fade In Content Viewer: By JavaScript Kit: http://www.javascriptkit.com
    
    var fadecontentviewer={
    	csszindex: 90,
    	fade:function($allcontents, togglerid, selected, speed){
    		var selected=parseInt(selected)
    		var $togglerdiv=$("#"+togglerid)
    		var $target=$allcontents.eq(selected)
    		if ($target.length==0){ //if no content exists at this index position (ie: stemming from redundant pagination link)
    			alert("No content exists at page number "+selected+"!")
    			return 
    		}
    		if ($togglerdiv.attr('lastselected')==null || parseInt($togglerdiv.attr('lastselected'))!=selected){
    			var $toc=$("#"+togglerid+" .toc")
    			var $selectedlink=$toc.eq(selected)
    			$("#"+togglerid+" .next").attr('nextpage', (selected<$allcontents.length-1)? selected+1+'pg' : 0+'pg')
    			$("#"+togglerid+" .prev").attr('previouspage', (selected==0)? $allcontents.length-1+'pg' : selected-1+'pg')
    			$target.css({zIndex: this.csszindex++, visibility: 'visible'})
    			$target.hide()
    			$target.fadeIn(speed)
                            $toc.removeClass('selected')
    			$selectedlink.addClass('selected')
    			$togglerdiv.attr('lastselected', selected+'pg')
                            removeFilter($toc);
    		}
    	},
    
    	setuptoggler:function($allcontents, togglerid, speed){
    		var $toc=$("#"+togglerid+" .toc")
    		$toc.each(function(index){
    				$(this).attr('pagenumber', index+'pg')
    		})
    		
    		var $next=$("#"+togglerid+" .next")
    		var $prev=$("#"+togglerid+" .prev")
    		$next.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('nextpage'), speed)
    			return false
    		})
    		$prev.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('previouspage'), speed)
    			return false
    		})
    		$toc.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('pagenumber'), speed)
    			return false
    		})
    	},
    
    	init:function(fadeid, contentclass, togglerid, selected, speed){
    		$(document).ready(function(){
    			var faderheight=$("#"+fadeid).height()
    			var $fadecontents=$("#"+fadeid+" ."+contentclass)
    			$fadecontents.css({top: 0, left: 0, height: faderheight, visibility: 'hidden'})
    			fadecontentviewer.setuptoggler($fadecontents, togglerid, speed)
    			setTimeout(function(){fadecontentviewer.fade($fadecontents, togglerid, selected, speed)}, 100)
    			$(window).bind('unload', function(){ //clean up
    				$("#"+togglerid+" .toc").unbind('click')
    				$("#"+togglerid+" .next", "#"+togglerid+" .prev").unbind('click')
    			})
    		})
    	}
    }
    removeFilter must be in fade method, but I'm not sure which is the object, I just guess that must be $toc. Try also $target and $togglerdiv and post results.

    regards

  • #9
    New Coder
    Join Date
    Aug 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help, I'm really at loss at how to implant this...

    How would you actually declare the function? and where... Please be specific because I think I'm doing something wrong in the actual code. I basically have no clue how to add a new function to that code.

    Also do I really need the function? Can't I just use .style.removeAttribute('filter') on the right element? I have a feeling that element is $target but no matter what I try with it, it won't work.

    If anyone has some free time, the fade in div viewer takes about a min to set up. Just copy paste the code at the bottom of the page and make sure it links to jquery.js and contentfader.js.

    So far no matter what I try to add to that JS code (including what you guys have suggested) all I get is:

    1. Nothing changes, I can switch between each tabs, they fade in and out but no ClearType.
    2. The first content loads with no ClearType but clicking any of the tabs links to a page not found instead of loading the appropriate content div.
    3. Not even the first content will load and clicking any of the tabs gives a page not found.

    In 2. and 3. The little "this page contains errors" warning pops in the status bar at the bottom.

  • #10
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    try to put on the top of the fadein script
    Code:
    function removeFilter(element) {
         if(element.style.filter && element.style.removeAttribute){
              element.style.removeAttribute('filter');
         }
    }
    
    //Fade In Content Viewer: By JavaScript Kit: http://www.javascriptkit.com
    
    var fadecontentviewer={
    	csszindex: 90,
    	fade:function($allcontents, togglerid, selected, speed){
    		var selected=parseInt(selected)
    		var $togglerdiv=$("#"+togglerid)
    		var $target=$allcontents.eq(selected)
    		if ($target.length==0){ //if no content exists at this index position (ie: stemming from redundant pagination link)
    			alert("No content exists at page number "+selected+"!")
    			return 
    		}
    		if ($togglerdiv.attr('lastselected')==null || parseInt($togglerdiv.attr('lastselected'))!=selected){
    			var $toc=$("#"+togglerid+" .toc")
    			var $selectedlink=$toc.eq(selected)
    			$("#"+togglerid+" .next").attr('nextpage', (selected<$allcontents.length-1)? selected+1+'pg' : 0+'pg')
    			$("#"+togglerid+" .prev").attr('previouspage', (selected==0)? $allcontents.length-1+'pg' : selected-1+'pg')
    			$target.css({zIndex: this.csszindex++, visibility: 'visible'})
    			$target.hide()
    			$target.fadeIn(speed)
    			$toc.removeClass('selected')
    			$selectedlink.addClass('selected')
    			$togglerdiv.attr('lastselected', selected+'pg')
    		}
    	},
    
    	setuptoggler:function($allcontents, togglerid, speed){
    		var $toc=$("#"+togglerid+" .toc")
    		$toc.each(function(index){
    				$(this).attr('pagenumber', index+'pg')
    		})
    		
    		var $next=$("#"+togglerid+" .next")
    		var $prev=$("#"+togglerid+" .prev")
    		$next.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('nextpage'), speed)
    			return false
    		})
    		$prev.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('previouspage'), speed)
    			return false
    		})
    		$toc.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('pagenumber'), speed)
    			return false
    		})
    	},
    
    	init:function(fadeid, contentclass, togglerid, selected, speed){
    		$(document).ready(function(){
    			var faderheight=$("#"+fadeid).height()
    			var $fadecontents=$("#"+fadeid+" ."+contentclass)
    			$fadecontents.css({top: 0, left: 0, height: faderheight, visibility: 'hidden'})
    			fadecontentviewer.setuptoggler($fadecontents, togglerid, speed)
    			setTimeout(function(){fadecontentviewer.fade($fadecontents, togglerid, selected, speed)}, 100)
    			$(window).bind('unload', function(){ //clean up
    				$("#"+togglerid+" .toc").unbind('click')
    				$("#"+togglerid+" .next", "#"+togglerid+" .prev").unbind('click')
    			})
    		})
    	}
    }
    Quote Originally Posted by enkay View Post
    Thanks for the help, I'm really at loss at how to implant this...

    How would you actually declare the function? and where... Please be specific because I think I'm doing something wrong in the actual code. I basically have no clue how to add a new function to that code.

    Also do I really need the function? Can't I just use .style.removeAttribute('filter') on the right element? I have a feeling that element is $target but no matter what I try with it, it won't work.

    If anyone has some free time, the fade in div viewer takes about a min to set up. Just copy paste the code at the bottom of the page and make sure it links to jquery.js and contentfader.js.

    So far no matter what I try to add to that JS code (including what you guys have suggested) all I get is:

    1. Nothing changes, I can switch between each tabs, they fade in and out but no ClearType.
    2. The first content loads with no ClearType but clicking any of the tabs links to a page not found instead of loading the appropriate content div.
    3. Not even the first content will load and clicking any of the tabs gives a page not found.

    In 2. and 3. The little "this page contains errors" warning pops in the status bar at the bottom.
    I have no idea if it work or not or how could be done.
    What I try here is based on intuition not knowledge and my desire to help,

    I'm really sorry but I could not test the script because I don't have windows and IE.

    regards

  • #11
    New Coder
    Join Date
    Aug 2008
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    After many tries, I think I've found where to put the function in the code...

    Now I'm not sure if "element" should be call something else.

    I'm also not sure how I should call the function.

    Everything I've tried has not been successful. It can't be that hard to figure out to remove all filters from every div that has the class "fadecontent" AFTER it has fade in.

    I'm at the point where I'll just pay someone to figure it out. Send me a message if you're interested. Feel free to try helping here if you have any suggestions, here's the way my code looks now... With my best shot at calling the function, but it's not working.

    Code:
    //Fade In Content Viewer: By JavaScript Kit: http://www.javascriptkit.com
    
    var fadecontentviewer={
    	csszindex: 90,
    	
    removeFilter:function(element) {
    	     if(element.style.filter && $target.style.removeAttribute){
    	          element.style.removeAttribute('filter');
    	     }
    	},
    	
    	
    	fade:function($allcontents, togglerid, selected, speed){
    		var selected=parseInt(selected)
    		var $togglerdiv=$("#"+togglerid)
    		var $target=$allcontents.eq(selected)
    		if ($target.length==0){ //if no content exists at this index position (ie: stemming from redundant pagination link)
    			alert("No content exists at page number "+selected+"!")
    			return 
    		}
    		if ($togglerdiv.attr('lastselected')==null || parseInt($togglerdiv.attr('lastselected'))!=selected){
    			var $toc=$("#"+togglerid+" .toc")
    			var $selectedlink=$toc.eq(selected)
    			$("#"+togglerid+" .next").attr('nextpage', (selected<$allcontents.length-1)? selected+1+'pg' : 0+'pg')
    			$("#"+togglerid+" .prev").attr('previouspage', (selected==0)? $allcontents.length-1+'pg' : selected-1+'pg')
    			$target.css({zIndex: this.csszindex++, visibility: 'visible'})
    			$target.hide()
    			$target.fadeIn(speed)
                                          removeFilter($target)
    			$toc.removeClass('selected')
    			$selectedlink.addClass('selected')
    			$togglerdiv.attr('lastselected', selected+'pg')
    		}
    	},
    
    	setuptoggler:function($allcontents, togglerid, speed){
    		var $toc=$("#"+togglerid+" .toc")
    		$toc.each(function(index){
    				$(this).attr('pagenumber', index+'pg')
    		})
    		
    		var $next=$("#"+togglerid+" .next")
    		var $prev=$("#"+togglerid+" .prev")
    		$next.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('nextpage'), speed)
    			return false
    		})
    		$prev.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('previouspage'), speed)
    			return false
    		})
    		$toc.click(function(){
    			fadecontentviewer.fade($allcontents, togglerid, $(this).attr('pagenumber'), speed)
    			return false
    		})
    	},
    
    	init:function(fadeid, contentclass, togglerid, selected, speed){
    		$(document).ready(function(){
    			var faderheight=$("#"+fadeid).height()
    			var $fadecontents=$("#"+fadeid+" ."+contentclass)
    			$fadecontents.css({top: 0, left: 0, height: faderheight, visibility: 'hidden'})
    			fadecontentviewer.setuptoggler($fadecontents, togglerid, speed)
    			setTimeout(function(){fadecontentviewer.fade($fadecontents, togglerid, selected, speed)}, 100)
    			$(window).bind('unload', function(){ //clean up
    				$("#"+togglerid+" .toc").unbind('click')
    				$("#"+togglerid+" .next", "#"+togglerid+" .prev").unbind('click')
    			})
    		})
    	}
    			
    }

  • #12
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm having the same issue as Enkay with the same contentfader.js

    You can see the problem in action at Smutbomb.com (NSFW!) if you use IE7. All other browsers work fine.

    The left column has cleartype turned off, but try dragging a link to the blank middle column and after the drop you'll see that because it's not part of the contentfader it will have cleartype on.

    I'm dying to find a solution to this. I'm in the same boat as Enkay is (or was). There are plenty of solutions out there, I just don't understand how to implement any of them. It seems like I can just drop in a few lines of code, but I'm virtually clueless. I can tweak, but have no practical JS abilities.

    All my code is identical to Enkay's.

    Thanks in advance for any help! If you can help, point me to your favorite Paypal button and I'll donate!
    Last edited by Mann Fairbanks; 01-11-2009 at 03:01 AM.

  • #13
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump, anyone have an idea on this one? Enkay (probably gone by now), did you figure this out?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •