nospam2k

Forum Replies Created

Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter nospam2k

    (@nospam2k)

    Thanks!

    Thread Starter nospam2k

    (@nospam2k)

    Is it possible that you could make that an option turned off by default? I need this “feature” for the way that I’ve made several of my templates. Calling a display-post from within a display-post is a really clean way to show posts within posts!

    <div id="tab-carousel" class="tabbable"><!-- Only required for left/right tabs -->
<ul class="nav-tabs">
	<li class="active"><a href="#tab1" data-toggle="tab">Welcome</a></li>
	<li><a href="#tab2" data-toggle="tab">Series</a></li>
	<li><a href="#tab3" data-toggle="tab">Sermon</a></li>
	<li><a href="#tab4" data-toggle="tab">Conference</a></li>
</ul>
<div style="clear:both;"></div>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">[display-posts category="tab1" include_content="true" wrapper="div"]</div>
<div id="tab2" class="tab-pane fade">[display-posts category="tab2" include_content="true" wrapper="div"]</div>
<div id="tab3" class="tab-pane fade">[display-posts category="tab3" include_content="true" wrapper="div"]</div>
<div id="tab4" class="tab-pane fade">[display-posts category="tab4" include_content="true" wrapper="div"]</div>
</div>
</div>

    I can then just make posts with the category tab1, tab2, tab3, tab4 and even add tabs very simply without having a ton of garbled code in one post. ( Ex. https://www.thedoorfellowship.com )

    I will try and think of ways to track previous posts that can trigger a break on a race condition and offer it as a suggestion.

    Just off the top of my head, passing an array of already processed include_content posts.

    Thread Starter nospam2k

    (@nospam2k)

    UPDATE:

    Ok the problem is definitely 2.4. 2.3 is fine. I’m confused about this call.

    /**
 * Turn off display posts shortcode
 * If display full post content, any uses of [display-posts] are disabled
 *
 * @param array $out, returned shortcode values
 * @param array $pairs, list of supported attributes and their defaults
 * @param array $atts, original shortcode attributes
 * @return array $out
 */
function be_display_posts_off( $out, $pairs, $atts ) {
	$out['display_posts_off'] = true;
	return $out;
}

    You seem to be passing $out $pairs and $atts yet you only use $out. I think there is a problem here.

    What is happening is every time a display-posts is called that include_content is enabled, the_content is read but then the display_posts_off becomes true so any subsequent display-posts never gets rejected.

    Not sure why this is but this disables nested display-posts calls with include content.

    For now, I just set this to 

    $out[display_posts_off] = false;

    For those interested in a work-around.

    After just a quick brainstorm. I found the exact problem. The line I gave above says ‘blog’ is the name of the sidebar. It’s not. That line should read ‘sidebar-blog’. This is the correct fix for the home.php. So

    if ( ! is_active_sidebar( 'blog' ) ) $col_width = 'span12';

    should be:

    if ( ! is_active_sidebar( 'sidebar-blog' ) ) $col_width = 'span12';

    That worked for me.

    This is not a permanent solution but what I did as a work around (which will break on the next update) is to change the home.php as follows:

    if ( ! is_active_sidebar( 'blog' ) ) $col_width = 'span12';

    change to:

    if ( ! is_active_sidebar( 'blog' ) ) $col_width = 'span9';

    The problem is the template doesn’t seem to know that the blog sidebar is active. Put you widgets in the blog side bar and this should work.

    NOTE: This is specific to the home.php file for the home page. If you are having similar issues with other pages, look at page.php for similar issue. span12 = width 100% so there is no room for the sidebar. You probably didn’t notice it but the sidebar gets wrapped underneath the blogs. Hope this helps.

    Thread Starter nospam2k

    (@nospam2k)

    Ok, I messed with techryan’s link and stripped away the fat and left what little I understood and “normalized” some of the code to make it generic. I’ll include the html below. Hope it helps.

    <html>
<head>

<script src="https://code.jquery.com/jquery-1.11.0.js"></script>

<script type="text/javascript">
$(function(){
var speed = 50;
var delay = 300;
var mheight = $("#marquee").attr("height");
var kjoer;
 $("<div></div>").addClass("alternate").height(mheight).css("position", "relative").css("overflow", "hidden").appendTo("body");
 $("<div></div>").addClass("scroller").css({"position": "absolute", "top": "0px"}).appendTo(".alternate");
 $("#marquee").hide().children().appendTo("div.scroller");
 var dim = $(".scroller").clone().appendTo(".alternate").height();
 $(".scroller:eq(1)").css("top", dim);

function scroll(){
$(".scroller").each(function(){
  var a = parseInt($(this).css("top"));
  $(this).css("top", a-1);
  if (a<(0-dim)) tick($(this));
});
};

function tick(obj){
  obj.css("top", dim);
};

function wait(){
  kjoer = setInterval(scroll, speed);
}
var go = setTimeout(wait,delay)
  $(".scroller").hover(function(){clearTimeout(go); clearInterval(kjoer);}
  ,function(){kjoer = setInterval(scroll, speed);})
});

</script>
</head>
<body>
<h2>Header</h2>
<div height="900" id="marquee">
  <div class="article">Test1</div>
  <div class="article">Test2</div>
  <div class="article">Test3</div>
  <div class="article">Test4</div>
  <div class="article">Test5</div>
  <div class="article">Test6</div>
  <div class="article">Test7</div>
  <div class="article">Test8</div>
  <div class="article">Test9</div>
  <div class="article">Test10</div>
</div>
</body>
</html>
    Thread Starter nospam2k

    (@nospam2k)

    WPyogi. Sorry for that. Thanks for fixing.

    Thread Starter nospam2k

    (@nospam2k)

    A couple of additional notes to the above. I noticed that I had to make the “active” option for the 2nd tab because the loop starts with “tab+1”.

    Notice the 6000 at the end of the <script> portion. That is the rotation time in ms (1000ms = 1s).

    IN Twitter bootstrap us 2.3.2 as the bootstrap css version and click Include ALL Bootstrap Javascript libraries and Place Javascript in HEAD. Everything else should be unchecked.

    It’s also possible to mess with the fade time by adding:

    .fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}

    and changing the 0.15s to some other number but I like the default. I haven’t tried this yet so there may be other css changes so YMMV.

    Thread Starter nospam2k

    (@nospam2k)

    I was able to work around this by the following:
    (NOTE: I’m not trying to discourage from using WP UI-Tabs… Perhaps this will help with a solution?)
    This works VERY nicely, very smooth fade with auto rotate!

    1. Install the following plugins:
    WordPress Twitter Bootstrap CSS
    Display Posts Shortcode

    2. Made a post with this code:

    <script>
jQuery(function() {
    var tabCarousel = setInterval(function() {
        var starter = 1;
        var tabs = jQuery('#tab-carousel .nav-tabs > li'),
            active = tabs.filter('.active'),
            next = active.next('li'),
            toClick = next.length ? next.find('a') : tabs.eq(0).find('a');
        toClick.trigger('click');
    }, 6000);
});
</script>

<div id="tab-carousel" class="tabbable"> <!-- Only required for left/right tabs --></p>
    <ul class="nav-tabs">
        <li class=""><a href="#tab1">Title</a>
        <li class="active"><a href="#tab2">Title2</a>
        <li class=""><a href="#tab3">Freedom</a>

    <div class="tab-content">
        <div class="tab-pane fade" id="tab1">
            [display-posts category="video" include_content="true" wrapper="div"]
        </div>
        <div class="tab-pane fade in active" id="tab2">
            [display-posts category="revival" include_content="true" wrapper="div"]
        </div>
        <div class="tab-pane fade" id="tab3">
            [display-posts category="freedom" include_content="true" wrapper="div"]
        </div>
    </div>
</div>

    3. Used the followingy css combined from wpui-dark theme and bootstrap:

    /******* Tabs ********/
.tab-pane {
    background: #222;
    background: -moz-linear-gradient(top, #444, #181818);
    background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#181818));
    background: -webkit-linear-gradient(top, #444, #181818);
    background: -o-linear-gradient(top, #444, #181818);
    text-shadow: 0 1px 0 #FFFFFF;
    color: #DDD;
    text-shadow: 0 1px 0 #000;
    border-top: 1px solid #666;
    padding: 10px;
}

.nav-tabs {
    border-bottom: 1px solid #000;
    background: #444;
    background: -moz-linear-gradient(top, #151515, #333);
    background: -webkit-gradient(linear, left top, left bottom, from(#151515), to(#333));
    background: -webkit-linear-gradient(top, #151515, #333);
    background: -o-linear-gradient(top, #151515, #333);
    padding-top: 10px;
    padding-left: 10px;
    -moz-box-shadow: 0 1px 0 #666 inset;
    border: 1px solid #000;
    margin: 0em;
    list-style: none;
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    padding: 0px !important;
    border: 0px !important;
}

.nav-tabs>li,
.nav-tabs>li:hover {
    background: #555;
    background: -moz-linear-gradient(top, #555, #777);
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#777));
    background: -webkit-linear-gradient(top, #555, #777);
    background: -o-linear-gradient(top, #555, #777);
    border-bottom: 1px solid #666;
    margin-right: 3px;
    bottom: -1px;
    outline: 0;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
    display: inline-block;
    vertical-align: bottom;
    margin-left: 0px;
    zoom: 1;
    font-size: 12px;
    font-weight: bold;
    top: auto;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}

.nav-tabs>li.active {
    background: #222;
    background: -moz-linear-gradient(top, #555, #444);
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#444));
    background: -webkit-linear-gradient(top, #555, #444);
    background: -o-linear-gradient(top, #555, #444);
    border: 1px solid #444;
    border-bottom: 0px !important;
    box-shadow: 0 1px 0 #666 inset;
    margin-right: 3px;
    position: relative;
    bottom: -1px;
    outline: 0;
    display: inline-block;
    vertical-align: bottom;
    margin-left: 0px;
    zoom: 1;
    font-size: 12px;
    font-weight: bold;
    top: auto;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}

.nav-tabs>li.active a ,
.nav-tabs>li.active a:hover {
    color: #FFF;
    background: #222;
    background: -moz-linear-gradient(top, #555, #444);
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#444));
    background: -webkit-linear-gradient(top, #555, #444);
    background: -o-linear-gradient(top, #555, #444);
    text-shadow: 0 1px 0 #000;
    outline: none;
    text-decoration: none;
    border-bottom: none;
    padding: 0.5em 1em;
    float: left;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    border: none;
}

.nav-tabs>li.active a:hover {
    cursor: pointer;
}

.nav-tabs>li>a,
.nab-tabs>li>a:hover {
    background: #555;
    background: -moz-linear-gradient(top, #555, #777);
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#777));
    background: -webkit-linear-gradient(top, #555, #777);
    background: -o-linear-gradient(top, #555, #777);
    outline: none;
    color: #CCC;
    text-shadow: 0 1px 0 #000;
    text-decoration: none;
    border-bottom: none;
    padding: 0.5em 1em;
    float: left;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    border: none;
}

    4. Create posts containing the content you desire to show using a unique catagory for each tab as defined in the tabs post itself.

    5. You can then place a display-posts shortcode in a text widget, page, another post… whatevery you desire!

    Hope this helps as I spent hours working through all this.

    Thread Starter nospam2k

    (@nospam2k)

    donmhico – I didn’t go to you because I could see from the code it wasn’t your fault. Boot Store kills the ability to register so you can’t use Boot Store to run a blog and an e-Commerce together. There is nothing wrong with your plugin. I ended up using a different template with your plug-in.

    I also want to mention that if I show the Carousel on the Front Page, regardless of what I change, it displays all posts, even ones that the are not checked “Add to carousel of carousel template”.

    Ok, I cannot figure out this carousel for nothing.

    1. I’ve checked “hide Carousel in front page” in Appearance>Boot Store.
    2. I’ve created a page called “Carousel”. It’s blank and I’m using
    “Carousel Full-width Template, No Sidebar”.
    3. I’ve made a post Title=Test Text=Test checked “Add to carousel of
    carousel template”

    The result when I display the page is nothing. I’ve tried checking “Add to carousel of carousel template” for the page I created called “Carousel” but still nothing”. Is there any documentation on an example of the Carousel?

Viewing 12 replies - 1 through 12 (of 12 total)