Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Rotating Header on HomepageRotating Header on Homepage
Previous
 
Next
New Post
5/16/2013 4:40 PM
 
I'll start out by saying I'm new to DotNetNuke and a beginner with JavaScript/JQuery. I hope this is the correct forum for my question. We have two sites and before my arrival a third party vendor implemented a rotating header one. I am attempting to get that rotating header working on the other. 
The code in skin.css is: 

#home_rotator { width: 955px; height:369px; overflow: hidden; border-bottom: 1px solid #846c40; position: relative; z-index: 0; }
#home_rotator .boat { width: 5000px; height: 369px; overflow: hidden; }
#home_rotator .boat img { float: left; }
#home_rotator .nav { position: absolute; bottom: 23px; left: 42px; list-style-type: none; margin: 0; padding: 0; z-index: 99; }
#home_rotator .nav li { height:11px; overflow: hidden; background: transparent url(nav_dots.png) no-repeat 0 0; cursor: pointer; text-indent: -200px; float: left; margin-right: 8px; padding: 0; position: relative; }
#home_rotator .nav .prev { width: 6px; }
#home_rotator .nav .off { width: 7px; background-position: -6px 0; }
#home_rotator .nav .on { width: 7px; background-position: -13px 0; }
#home_rotator .nav .next { width: 6px; background-position: -20px 0; }

I have this in the HTML module:

<div id="home_rotator">
    <div class="boat">
<img alt="" width="960" height="385" src="/portals/0/Images/homebanner3.jpg" />
<img alt="" width="960" height="385" src="/portals/0/Images/homebanner2.jpg" />
<img alt="" width="960" height="385" src="/portals/0/Images/homebanner.jpg" />
    </div>
    <ul class="nav">
        <li class="prev">Previous</li>
        <li class="next">Next</li>
    </ul>
</div>

In the header of the pane/module I have:
<script type="text/javascript" src="rotator.js"></script>

<script type="text/javascript">
    // <![CDATA[
    jQuery(document).ready(function () {
    (function () { ItemRotator('home_rotator'); })();
    });
    // ]]>
</script>

The images are not rotating. I’m not sure if I should be placing the JavaScript code in the pane/module header or in the \Portals\_default\Skins\Greytness2\Home.ascx. I’ve tried both and neither works. The skin.css and the rotator.js are in the \Portals\_default\Skins\Greytness2 directory.

Please Advise!

Thanks, Pat
 
New Post
5/16/2013 9:42 PM
 
Hi Pat,

I suppose maybe your "src" of the script file is not correct. May I know where you located the script file? Is is under a specific module or somewhere else?

NovaSoftware ---a professional outsourcing company in China .
* More than 6 years' offshore experience in DNN
* Successfully developed 30+ websites , 250+ DNN modules, 50+ sets of Skins/Containers.
* Demo Site:http://dotnetnuke.novasoftware.com/
 
New Post
5/17/2013 2:22 AM
 
Hi Pat,

I suppose you are missing the ItemRotator() defination.

Thanks,
Sunil Kumar [ DNN Developer, Mindfire Solutions,India ]
 
New Post
5/17/2013 10:40 AM
 

Eileen, The skin.css and the rotator.js are in the \Portals\_default\Skins\Greytness2 directory.

Sunil, Here is the function that is in rotator.js:

function ItemRotator(sContainerId, bDisableAutoRotate) {
var oBoat = jQuery('#' + sContainerId + ' .boat');
var oNav = jQuery('#' + sContainerId + ' .nav');
var _bRotating = !bDisableAutoRotate;
var _bAnimating = false;
var _iCurrentIndex = 0;
var _oItems = [];
var _iJoustWidth = jQuery('#' + sContainerId).width();
jQuery.each(oBoat.find('img'), function (_iIndex) {
var _oCurrItem = jQuery(this);

if (_oCurrItem.parent().get(0).nodeName.toLowerCase() == 'a') {
var _sHref = _oCurrItem.parent().attr('href');
_oCurrItem.click(function () {
window.location.href = _sHref;
}).css('cursor', 'pointer');
}

_oItems.push(_oCurrItem);

if (_iIndex > 0) {
_oCurrItem.css({ display: 'none' });
} else {
_oVisibleItem = _oCurrItem;
}
});
if (_bRotating) {
var _iRotatingInterval = setInterval(function () {
if (_bRotating) {
__NavigateTo((_iCurrentIndex + 1 >= _oItems.length) ? 0 : _iCurrentIndex + 1, false, false);
} else {
clearInterval(_iRotatingInterval);
}
}, 8000);
}
if (oNav.length) {
var _oNavClicker = jQuery(document.createElement('li')).addClass('prev').text('Previous').click(function () {
__NavigateTo(_iCurrentIndex - 1, true, true);
});
oNav.html('').append(_oNavClicker);
jQuery.each(_oItems, function (__iIndex, __oItem) {
_oNavClicker = jQuery(document.createElement('li')).addClass('off').click(function () {
__NavigateTo(__iIndex, true, (__iIndex < _iCurrentIndex));
});
if (__iIndex == 0)
_oNavClicker.addClass('on');
oNav.append(_oNavClicker);
});
_oNavClicker = jQuery(document.createElement('li')).addClass('next').text('Next').click(function () {
__NavigateTo(_iCurrentIndex + 1, true);
});
oNav.append(_oNavClicker);
}

function __NavigateTo(_iNewIndex, _bStopRotate, _bPrev) {
_bRotating = !_bStopRotate;
if (!_bRotating)
clearInterval(_iRotatingInterval);

if (!_bAnimating && _iNewIndex >= 0 && _iNewIndex < _oItems.length && _iNewIndex != _iCurrentIndex) {
_bAnimating = true;
var _iPrevIndex = _iCurrentIndex;
_iCurrentIndex = _iNewIndex;

jQuery.each(oNav.children(), function (__iNavIndex) {
if (__iNavIndex == _iCurrentIndex + 1)
jQuery(this).addClass('on');
else
jQuery(this).removeClass('on');
});

if (!_bPrev) {
//Next
oBoat.stop(true).append(_oItems[_iCurrentIndex].css({ display: 'block' })).animate({ 'margin-left': '-' + _iJoustWidth + 'px' }, { duration: 800, complete: function () {
_oItems[_iPrevIndex].css({ display: 'none' });
jQuery(this).css('margin-left', 0);
_bAnimating = false;
}
});
} else {
//Prev
oBoat.stop(true).css('margin-left', '-' + _iJoustWidth + 'px').prepend(_oItems[_iCurrentIndex].css({ display: 'block' })).animate({ 'margin-left': 0 }, { duration: 800, complete: function () {
_oItems[_iPrevIndex].css({ display: 'none' });
_bAnimating = false;
}
});
}
}
}
}

 
New Post
5/17/2013 1:47 PM
 
I was able to get it working by adding the full path to the javascript file source. Thanks!
 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Rotating Header on HomepageRotating Header on Homepage


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out