Cycle plugin works but IE is killing me with a white box!!!
www.nerkin.com
This is my testing site. I'm rotating out 4 Top Featured stories with associated images at the top. This is driven by the Malsup Cycle plugin for jQuery (http://malsup.com/jquery/cycle/) and it is actually working 97%. I have some key issues though and cannot seem to get a solution that will work:
1. The rotator module functions great in FF but in IE 8 a white background fills the container and I can't get it to go away. I have tried the cleartype: false trick and cleartypeNoBg trick too and it's still not working.
The only thing the cleartype trick does is shut the white box off and that would work - except that the subtle drop shadow on each of the 4 rotating PNG files then turns to an ugly fat black border and the transparency is gone. I know this has something to do with how IE 8 is swapping out the PNG's and that's where the issue is but I can't seem to fix that either. I've even installed the Unit PNG fix (http://labs.unitinteractive.com/unitpngfix.php) and nothing seems to help. I have no experience with IE8 filters and what not. I don't know how to fix filters!?
2. The second issue is that in IE8 when the fade occurs from one transition to the next, there is still a brief moment where the paragraph title & excerpt text "shifts or jumps" slightly when the fade cycle initiates. It just looks unprofessional & crappy.
3. The third issue is that I cannot figure out how to make the round blue buttons show a series of numbers like 1,2,3,4 to tell the user they can be clicked on as a sequence. Right now they are just blue buttons without numbers, although when you click each button they do jump the rotation cycle to the appropriate slide - so it does work functionally, but it's not exactly user-friendly. It should be smooth and easy, much like this: http://www.whitehouse.gov/ ....I wanted there to be little buttons with numbers in each below the READ MORE button so a user could jump from article to article without having to wait for the entire cycle to occur.
Development site: http://www.nerkin.com/
If anyone can help me figure these final tweaks out I would be super stoked. Here is code:
----------------------------------------------------------------------
JQuery CODE STARTS:
<script type="text/javascript">
$(function() {
var bc = $('#buttonContainer');
var $container = $('#container').cycle({
fx: 'fade',
speed: 2800,
timeout: 1,
pause: 1,
cleartype: 1
});
$container.children().each(function(i) {
$('<input type="image" src="http://nerkin.com/sys/templates/site/img/rotator-dot.png" value="'+(i+1)+'" />')
.appendTo(bc).click(function() {
$container.cycle(i);
return false;
});
});
});
</script>
<!--[if lt IE 7]>
<script src="http://www.nerkin.com/js/unitpngfix.js" type="text/javascript"></script>
<![endif]-->
</head>
----------------------------------------------------------------------------------------------------------------------
JQuery CODE STOPS
More....
MARKUP CODE STARTS
----------------------------------------------------------------------------------------------------------------------
<!-- Rotator module starts. -->
<div id="rotator">
<div id="container">
{exp:weblog:entries weblog="rotator_articles" limit="4"}
<div>
<div id="temp" class="grid_6">
<h1>{title}</h1>{rotator-excerpt}<br />
<a href="{title_permalink="rotator_articles/view"}"><img src="http://nerkin.com/sys/templates/site/img/read-more-button.png" class="more" width="114" height="32" alt="Read More link" /></a>
</div>
<div class="grid_10">
<a href="{title_permalink="rotator_articles/view"}"><img src="{rotator-graphic}" width="580" height="316" class="unitPng" /></a>
</div>
</div>
{/exp:weblog:entries}
</div>
<div id="buttonContainer"></div>
</div>
<!-- Rotator module stops. -->
----------------------------------------------------------------------------------------------------------------------
MARKUP CODE STOPS
Has anyone successfully built something like this?!! I've been beating my head into objects trying to figure this out!!!!
This is my testing site. I'm rotating out 4 Top Featured stories with associated images at the top. This is driven by the Malsup Cycle plugin for jQuery (http://malsup.com/jquery/cycle/) and it is actually working 97%. I have some key issues though and cannot seem to get a solution that will work:
1. The rotator module functions great in FF but in IE 8 a white background fills the container and I can't get it to go away. I have tried the cleartype: false trick and cleartypeNoBg trick too and it's still not working.
The only thing the cleartype trick does is shut the white box off and that would work - except that the subtle drop shadow on each of the 4 rotating PNG files then turns to an ugly fat black border and the transparency is gone. I know this has something to do with how IE 8 is swapping out the PNG's and that's where the issue is but I can't seem to fix that either. I've even installed the Unit PNG fix (http://labs.unitinteractive.com/unitpngfix.php) and nothing seems to help. I have no experience with IE8 filters and what not. I don't know how to fix filters!?
2. The second issue is that in IE8 when the fade occurs from one transition to the next, there is still a brief moment where the paragraph title & excerpt text "shifts or jumps" slightly when the fade cycle initiates. It just looks unprofessional & crappy.
3. The third issue is that I cannot figure out how to make the round blue buttons show a series of numbers like 1,2,3,4 to tell the user they can be clicked on as a sequence. Right now they are just blue buttons without numbers, although when you click each button they do jump the rotation cycle to the appropriate slide - so it does work functionally, but it's not exactly user-friendly. It should be smooth and easy, much like this: http://www.whitehouse.gov/ ....I wanted there to be little buttons with numbers in each below the READ MORE button so a user could jump from article to article without having to wait for the entire cycle to occur.
Development site: http://www.nerkin.com/
If anyone can help me figure these final tweaks out I would be super stoked. Here is code:
----------------------------------------------------------------------
JQuery CODE STARTS:
<script type="text/javascript">
$(function() {
var bc = $('#buttonContainer');
var $container = $('#container').cycle({
fx: 'fade',
speed: 2800,
timeout: 1,
pause: 1,
cleartype: 1
});
$container.children().each(function(i) {
$('<input type="image" src="http://nerkin.com/sys/templates/site/img/rotator-dot.png" value="'+(i+1)+'" />')
.appendTo(bc).click(function() {
$container.cycle(i);
return false;
});
});
});
</script>
<!--[if lt IE 7]>
<script src="http://www.nerkin.com/js/unitpngfix.js" type="text/javascript"></script>
<![endif]-->
</head>
----------------------------------------------------------------------------------------------------------------------
JQuery CODE STOPS
More....
MARKUP CODE STARTS
----------------------------------------------------------------------------------------------------------------------
<!-- Rotator module starts. -->
<div id="rotator">
<div id="container">
{exp:weblog:entries weblog="rotator_articles" limit="4"}
<div>
<div id="temp" class="grid_6">
<h1>{title}</h1>{rotator-excerpt}<br />
<a href="{title_permalink="rotator_articles/view"}"><img src="http://nerkin.com/sys/templates/site/img/read-more-button.png" class="more" width="114" height="32" alt="Read More link" /></a>
</div>
<div class="grid_10">
<a href="{title_permalink="rotator_articles/view"}"><img src="{rotator-graphic}" width="580" height="316" class="unitPng" /></a>
</div>
</div>
{/exp:weblog:entries}
</div>
<div id="buttonContainer"></div>
</div>
<!-- Rotator module stops. -->
----------------------------------------------------------------------------------------------------------------------
MARKUP CODE STOPS
Has anyone successfully built something like this?!! I've been beating my head into objects trying to figure this out!!!!
Topic Participants
graefikawalt
malsup