1. REGISTRATION REQUIREMENTS:

    Register with your xenforo.com Username then start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Fixed Template nflj_showcase_node_list_items incorrect markup

Discussion in 'Showcase Resolved Bug Reports' started by MagnusB, Oct 11, 2013.

  1. MagnusB

    MagnusB Member Showcase

    I think this template is causing some issues on my site, for one reason or another, as I can't find another sane reason for it (yet).

    The template uses <ol>, but the child elements are only divs, there are no li being used at all. I think this causes bxslider to not being able to figure out where the elements and and bugs out on the final slide. At any rate, according to the standard you have to use li as child of a ol or ul, and other markups within the li tag (I think, unless this changed in html5).

    I haven't looked too far into this yet, but I think it would be better to change this template around a bit, and create a new <ol> inside the parent. I am hoping to take a more detailed look at this over the weekend and see if I can work out something that solves it.
     
  2. MagnusB

    MagnusB Member Showcase

    Alright, I took a closer look at it just now. 2 beers and very loud music usually helps with troubleshooting.

    Anyway, my issue was:
    The slider could not calculate the "pages" it needed, and would add one extra. When I navigated to the extra page, the slider "locked", meaning I could no longer scroll through it. I narrowed it down to incorrect markup in my template, so I had to do the following:
    Code:
        </xen:if>   
        <div class="sliderNodeListItems">
            <xen:foreach loop="$items" value="$item">
                <div class="slide">
    
    Changed to:
    Code:
        </xen:if>   
        <li>
        <ol class="sliderNodeListItems">
            <xen:foreach loop="$items" value="$item">
                <li class="slide">
    
    Basically I changed the trigger class for the bxslider function to an ol, and towards the end of the template:
    Code:
                </div>   
            </xen:foreach>
        </div>
    Changed to:
    Code:
                </li>   
            </xen:foreach>
        </ol></li>    
    Basically I set it up to using proper list formatting (I also changed some of the earlier html to comply with list formatting, which also seemed to solve some of my styling issues). I can provide my entire template, but I changed it quite allot around (changed some of the config for the slider etc), so it will change the behaviour a little bit.
     
  3. MagnusB

    MagnusB Member Showcase

    My full template change, if anyone wants to do the same:
    HTML:
    <ol class="section sectionMain nodeList showcaseNodeListItemsBlock">
    
        <xen:if is="{$moduleTitle}">
            <li class="nodeInfo categoryNodeInfo categoryStrip">
                <h3 class="nodeTitle">
                    <a href="{xen:link showcase}">{$moduleTitle}</a>
                </h3>
            </li>
        </xen:if>   
        <li>
        <ol class="sliderNodeListItems">
            <xen:foreach loop="$items" value="$item">
                <li class="slide">
                    <div class="showcaseItemContainer">
                        <div class="showcaseItemThumb">
                            <a href="{xen:link showcase, $item}">
                                <xen:if is="{$item.cover_image.thumbnailUrl}">
                                    <img class="showcaseItemThumbnail" src="{$item.cover_image.thumbnailUrl}" />
                                    <span class="zoom-icon"><img width="16" height="16" border="0" alt="{$item.category_name}" src="styles/default/nflj/showcase/category_images/{$item.category_image}" /></span>
                                <xen:else />
                                    <img class="showcaseItemThumbnail" src="styles/default/nflj/showcase/category_images/{xen:if '{$item.category_image}', '{$item.category_image}', 'no_image.png'}" />
                                </xen:if>                           
                            </a>
                        </div>
                        <xen:if is="{$showTitle} || {$showDescription} || {$showRating}">   
                            <div class="showcaseItemInfo">
                                <xen:if is="{$showTitle}">
                                    <div class="showcaseItemTitle">
                                        <a class="{xen:if '{$showDescription}', '', 'Tooltip'}" title="{xen:if '{$item.description}', '{$item.description}', '{xen:helper snippet, $item.message, 250}'}" data-tipclass="showcaseItemTooltip" href="{xen:link showcase, $item}">{xen:helper wordtrim, $item.item_name, 60}</a>
                                    </div>
                                </xen:if>
                                <xen:if is="{$showDescription}">
                                    <div class="showcaseItemMessage">{xen:if '{$item.description}', '{$item.description}', '{xen:helper snippet, $item.message, 250}'}</div>
                                </xen:if>   
                                <xen:if is="{$showRating}">                           
                                    <div class="showcaseItemRating">                                   
                                        <div class="pairsJustified">
                                            <div class="rating">
                                                <dl>
                                                    <dt>
                                                        <span class="ratings" title="{xen:number $item.rating, 2}">
                                                            <span class="star {xen:if '{$item.rating} >= 1', 'Full'}{xen:if '{$item.rating} >= 0.5 AND {$item.rating} < 1', 'Half'}"></span
                                                            ><span class="star {xen:if '{$item.rating} >= 2', 'Full'}{xen:if '{$item.rating} >= 1.5 AND {$item.rating} < 2', 'Half'}"></span
                                                            ><span class="star {xen:if '{$item.rating} >= 3', 'Full'}{xen:if '{$item.rating} >= 2.5 AND {$item.rating} < 3', 'Half'}"></span
                                                            ><span class="star {xen:if '{$item.rating} >= 4', 'Full'}{xen:if '{$item.rating} >= 3.5 AND {$item.rating} < 4', 'Half'}"></span
                                                            ><span class="star {xen:if '{$item.rating} >= 5', 'Full'}{xen:if '{$item.rating} >= 4.5 AND {$item.rating} < 5', 'Half'}"></span>
                                                        </span>                                       
                                                    </dt>
                                                    <dd><span class="Hint">{xen:number $item.view_count} {xen:phrase nflj_showcase_views_lowercase}</span></dd>
                                                </dl>
                                            </div>   
                                        </div>
                                    </div>
                                </xen:if>                           
                            </div>
                        </xen:if>   
                    </div>
                </li>   
            </xen:foreach>
        </ol></li>   
    </ol>
    If you have customized it, and want to keep those changes, the method I used is fairly simply. Basically, each direct children of a ol or ul tag has to be a li tag. This means I changed the direct child divs to li. Within a li tag you can use whatever markup you want.

    I also did another thing, as li are only allowed as childs of ol, you cannot use additional li inside a li tag. So where the bx slider part starts you have to create another ol, so I changed the trigger class for the bxslider script to be another ol.
     
  4. Bob

    Bob Developer Staff Member

    What changes did you make to the BX Slider js? I've made a lot of changes with it due to conflicts with XenPorta and Jaxel using BX Slider as well.
     
    MagnusB likes this.
  5. MagnusB

    MagnusB Member Showcase

    I don't think I did any changes to the core js, just the function starting it. I was experimenting with some stuff, I don't remember it, I think I kept changing the slide length and similar. I just had huge problems with getting bxslider load properly on the node list, which I think was due to the slider class was not contained within a ol or ul tag, and it couldn't find the last child. The slider would always stop scrolling on the last page of bx slider. I did not look at the js, but I think it is using :last-page pseudo selector to find the end of a list, which was hard to do when the ol tag was not closed at the last child.

    My above changes ended up solving it, working (almost) flawlessly, and it also solved some styling issues I was experiencing for some unknown reason.
     
    Bob likes this.
  6. Bob

    Bob Developer Staff Member

    cool cool... I'll mess around with your tweaks then :D I take it this solved the LOCKING issue(s) as well?
     
    MagnusB likes this.
  7. MagnusB

    MagnusB Member Showcase

    Yup, now it is scrolling like there is no tomorrow :D
     
    Bob likes this.
  8. Bob

    Bob Developer Staff Member

    Super! Thank you!
     
    MagnusB likes this.
  9. MagnusB

    MagnusB Member Showcase

    lol, I just noticed my icon hack is in the template above. If anyone reading this thinking of copy pasting my template, I strongly suggest removing this line:
    Code:
    <span class="zoom-icon"><img width="16" height="16" border="0" alt="{$item.category_name}" src="styles/default/nflj/showcase/category_images/{$item.category_image}" /></span>
    It will most likely insert an image below each thumbnail you do not want there.
     
    Bob likes this.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.