GNP 4 Module ver. 3.3.8 horizontale-slider not working!

dear guys,

i am a webdesigner (not a programmer). i have built a esotheric portal. i have installed your great module and i have modified it a little bit. now i have a problem. if i am going at the beginning or the end of the first horizontale slider alias Futured News (TOP) | position feature-a, i get to see the pagination buttons. but if i try to click on it, the slider does not slide.

can you help me. i do not know, how i can get it to run. maybe i have an javascript problem!

the second "bug" is, if i make the screen smaller (responsive), the slider images are not displaying very nice. there are overviews at the start and end image. please take a look to my attachments.

best regards

Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.

Hi

i'm not able to tell why its not working. Must be a conflict with other module used on this page. Please disable all other modules and see if this one works. Than start publishing module after module till this one will break again. The last published will be to blame and I'll know where to look.

hi teitbit, ok. i will test it. but one question. i have changed the pagination buttons. it could not be, i made a css mistake. because if i hover them, i can not see any link in the left corner of my browser. the button is clickable, that is all.

king regards

Hi

No, this css change should not be a problem here. Please let me know about the test result.

Hi

No, this css change should not be a problem here. Please let me know about the test result.

hello teibite,

i have disabled all modules in the frontpage, only the news_pro_4 modules are running. the result is the same as before. i have bought another template with the gantry framework too and it runs like a chame. if i change the slidermodus to "normal", the slider below works fine. i think there is a problem with js. all other js features are switched off!

best regards

Hi

Unfortunatelly I do not see where this problem may be comming from. I believe the script for this particular style may be outdated. Please send me an access to ftp so I'll redirect it to programmers asking for a fix.

good morning teibite,

your answer sounds good. i will send you the ftp account on pm.

king regards

Hi

FTP access passed to programmers. Will let You know as soon as I'll know somehting.

Hi

Thanks to Dziudek it's working now. Here is a code he added to this view's js:

Code: Select all

window.addEvent("load", function(){
    $$('.nspMainPortalMode5').each(function(module){
        var id = module.getProperty('id');
        var $G = $Gavick[id];
        var current_offset = 0;
        var arts = module.getElements('.nspArt');
        var auto_anim = module.hasClass('autoanim');
        var anim_speed = $G['animation_speed'];
        var anim_interval = $G['animation_interval'];
        var animation = false;
        var scrollWrap = module.getElement('.nspArts');
        var scroller = new Fx.Scroll(scrollWrap, {duration: anim_speed, wheelStops: false});
        var dimensions = scrollWrap.getSize();
        var startItem = 0;
        var sizeWrap = scrollWrap.getCoordinates();
        var rtl_mode = module.getProperty('data-direction') == 'rtl' ? true : false;

        module.getElement('.nspArtsScroll').setStyle('width', (arts[arts.length-1].getSize().x * arts.length) + 10);

        var offset = module.getElement('.nspArt').getSize().x;
        var size = module.getElement('.nspArts').getSize().x;
        var scrollSize = (arts[arts.length-1].getSize().x * arts.length);
        var amountInView = Math.floor(size / offset);
        var totalAmount = module.getElements('.nspArt').length;

        // reset
        scrollWrap.getElement('.nspArtsScroll').setStyle('margin-left', '0');
        current_art = amountInView;

        if(totalAmount > amountInView) {
            if(module.getElement('.nspPrev')) {
                module.getElement('.nspPrev').addEvent('click', function() {
                    animation = true;
                    if(rtl_mode) {
                        if(current_offset >= 0) {
                            current_offset = scrollSize - size;
                        } else {
                            current_offset += offset;
                        }
                    } else {
                        if(current_offset <= 0) {
                            current_offset = scrollSize - size;
                        } else {
                            current_offset -= offset;
                        }   
                    }

                    scrollWrap.getElement('.nspArtsScroll').setStyle('margin-left', -1 * current_offset);
                });
            }

            if(module.getElement('.nspNext')) {
                module.getElement('.nspNext').addEvent('click', function() {
                    animation = true;
                    if(rtl_mode) {
                        if(current_offset <= scrollSize - size) {
                            current_offset -= offset;
                        } else {
                            current_offset = 0;
                        }
                    } else {
                        if(current_offset <= scrollSize - size) {
                            current_offset += offset;
                        } else {
                            current_offset = 0;
                        }
                    }

                    scrollWrap.getElement('.nspArtsScroll').setStyle('margin-left', -1 * current_offset);
                });
            }

            if(auto_anim){
                (function(){
                    if(!animation) module.getElement('.nspNext').fireEvent("click");
                    else animation = false;
                }).periodical($G['animation_interval'] / 2);
            }
        }
    });
});


a tu jak powinien wygladac poprawiony plik z css:

Code: Select all

.nspMainPortalMode5 {
    position: relative;
    overflow: hidden;
    margin: 0 -15px;
}
.nspMainPortalMode5 .nspArtsScroll {
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    width: 20000px;
}
.nspMainPortalMode5 .nspArts {
    width: 100%
}
.nspMainPortalMode5 .nspImages {
    padding: 0 28px
}
.nspMainPortalMode5 .nspArts,
.nspMainPortalMode5 .nspArt {
    overflow: hidden
}
.nspMainPortalMode5 .nspArt {
    float: left;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
}
.nspMainPortalMode5 .nspArt img {
    background: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0!important;
}
.nspMainPortalMode5 .nspArt .nspImageGallery a {
    display: block;
    border: 1px solid #ddd;
    border-radius: 3px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.nspMainPortalMode5 .nspArt .nspImageGallery {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.nspMainPortalMode5 .nspArt .nspImageGallery img {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.nspMainPortalMode5 .nspArt:hover {
    cursor: pointer
}
.nspMainPortalMode5 .nspArt:hover .nspHeader a {
    color: #fb5a29
}
.nspMainPortalMode5 .nspArt:hover .nspImageGallery img {
    -webkit-transform: scale(1.25) rotate(-7deg);
    -moz-transform: scale(1.25) rotate(-7deg);
    -ms-transform: scale(1.25) rotate(-7deg);
    -o-transform: scale(1.25) rotate(-7deg);
    transform: scale(1.25) rotate(-7deg);
}
.nspMainPortalMode5 .nspHeader {
    width: 100%;
    padding: 0;
    margin: 10px 0 0 0!important;
    color: #535353;
    font-size: 12px;
    font-weight: 400;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
    text-transform: uppercase;
}
.nspMainPortalMode5 .nspHeader a {
    color: #535353
}
.nspMainPortalMode5 .nspHeader a:active,
.nspMainPortalMode5 .nspHeader a:focus,
.nspMainPortalMode5 .nspHeader a:hover {
    color: #fb5a29
}
.nspMainPortalMode5 .nspArt {
    padding: 0
}
.nspMainPortalMode5 .nspArt > div {
    padding: 0;
    position: relative;
}
.nspMainPortalMode5 .nspArt > div > div {
    padding: 0
}
.nspMainPortalMode5 .nspPrev,
.nspMainPortalMode5 .nspNext {
    height: 16px;
    width: 16px;
    display: block;
    background: transparent url('../images/nsp_portal_mode_5_interface.png') no-repeat 0 0;
    text-indent: -999em;
    margin-top: -8px;
    cursor: pointer;
}
.nspMainPortalMode5 .nspPrev {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
}
.nspMainPortalMode5 .nspNext {
    background-position: -16px 0;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
}
.nspMainPortalMode5 .nspPrev:hover {
    background-position: 0 -16px
}
.nspMainPortalMode5 .nspNext:hover {
    background-position: -16px -16px
}
.nspMainPortalMode5 .nspPrev::selection,
.nspMainPortalMode5 .nspNext::selection {
    background: transparent!important
}
.nspMainPortalMode5 .nspPrev::-moz-selection,
.nspMainPortalMode5 .nspNext::-moz-selection {
    background: transparent!important
}
.nspMainPortalMode5 .nspPrev::-webkit-selection,
.nspMainPortalMode5 .nspNext::-webkit-selection {
    background: transparent!important
}
/* make element unvisible */
.nspMainPortalMode5 .unvisible {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}
/* font-size classes */
.nspFs80 {
    font-size: 80%
}
.nspFs90 {
    font-size: 90%
}
.nspFs100 {
    font-size: 100%
}
.nspFs110 {
    font-size: 110%
}
.nspFs120 {
    font-size: 120%
}
.nspFs130 {
    font-size: 130%
}
.nspFs140 {
    font-size: 140%
}
.nspFs150 {
    font-size: 150%
}
.nspFs160 {
    font-size: 160%
}
.nspFs170 {
    font-size: 170%
}
.nspFs180 {
    font-size: 180%
}
.nspFs190 {
    font-size: 190%
}
.nspFs200 {
    font-size: 200%
}


hey teilbite,

that's the best message this month. thank you very much. it runs like a chame.

one question: it is possible to integrate this change in an offical release of the news module. i need the same slider in other 2.5 websites, too. i am sorry, but i am not a programmer, so i do not know where i have to put in the new snippet. i am sure, i am not the only user, who has this problem!

most thx to Dziudek. i have to say the support is highly recommanded. hands up.

best wishes

Hi

I believe Dziudek will add this fix to module's package, but I cannot tell when, so meanwhile simply replace the module files via ftp so same code will be used.

hi teitbite,

how are you, hope good. dear man, i have written to you at the beginning of this thread, i need the same slider in another template. in these template is another problem, the slider does not work in this mode . it would be great, if you could take a look at the page. i'll send you a pm.

best wishes
dark

Hi

I've checked settings and indeed this style is not working. Please send me an access to ftp and I'll try to figure out why and fix it.

Hi

I've figured it out Module was ok, but it only shows articles with images since it's a gallery style, but settings which image to use was wrong. I've discovered it during dumps. Here is how setting should looks like with regular joomla articles and images set for full content: