I'm using bootstrap 2 to build a wordpress theme with a collapsable menu, and everything works fine, however the open item doesn't close when I click a new item in the menu. any idea?
The php can be disregarded :) Thanks.
PS: When I tested with pure html it worked just fine
<div class="accordion-group">
<div class="accordion-heading"><?=$catItem->name;?></div>
<div id="<?=$catItem->slug;?>" class="accordion-body collapse">
<div class="accordion-inner">
<div id="<?=$generalActiveMenu;?>1" class="accordion">
<? $subCategory = new $Category();
$subCategory->getCategoryList($catItem->term_id); /* get sub category of each product */
foreach($subCategory->catList as $key => $subCatItem) {
?><div class="accordion-group">
<div class="accordion-heading">
<?=$subCatItem->name;?>
</div>
<div id="<?=$subCatItem->slug;?>" class="accordion-body collapse">
<? if(get_posts('category_name='.$subCatItem->slug)) {
?><div class="accordion-inner">
<ul class="nav nav-list">
<? $Post->postCat = $subCatItem->term_id;
$Post->getPostList();
foreach ($Post->postList as $key => $postItem) {
?><li id="<?=$postItem->post_name;?>"><?=$postItem->post_title;?></li><?
} ?>
</ul>
</div><?
} ?>
</div>
</div><?
}
?>
</div>
</div>
</div>
</div>
I may be wrong but you could try:
$('#myAccordianTab').collapse({
toggle: true
})
Take a look at this link for more info:
http://getbootstrap.com/2.3.2/javascript.html#collapse
This should help you build up correctly and and explains the toggle(or collapsing) function
Related
how can i integrate load more button that loads next 10 posts from custom query ?
I've tried with bunch of plugins, css and js ways, but can't seem to load it.
How would you load more posts on load click?
Any tip is very much appreaciated
<div class="container">
<div class="row featured-akcije">
#foreach(get_field('actions') as $action)
#php($query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)))
#php($query->the_post())
<div class="col-md-4 col-xl-3 action">
<div class="box-shadow-posts hoverPic">
<div class="row">
<div class="col-12 col-md-12">
<div class="row">
<div class="col-4 col-md-6 col-xl-6">
<div class="action-img">
<img src="{{ get_the_post_thumbnail_url() }}" class="img-fluid">
<p class="action">action</p>
</div>
</div>
<div class="col-8 col-md-6 pl-md-0">
<div class="row info-action">
<div class="col-md-12"><h2 class="title">
{{ the_title() }}
</h2></div>
<div class="col-md-12 price-info">
<div class="divider">
</div>
<?php if( get_field('price_off') ): ?>
<p class="price">price from <?php the_field('price_from'); ?>e</p>
<?php endif; ?>
<p class="detail"><a href="{{ the_permalink() }}"><span class="nav-border"></span><span>detail <i
class="fas fa-arrow-right"></i></span></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#php(wp_reset_postdata())
#endforeach
</div>
</div>
I implemented load more functionality for custom query like this:
Create wp ajax endpoint which is called be javascript on load more button click
Endpoint gets offset which post to load? For example from 11 to 20 and returns html with rendered posts
Javascript appends return html to html of the page in proper place
How to create endpoint? Here are examples for creating endpoint and calling it from javascript: https://codex.wordpress.org/AJAX_in_Plugins In endpoint you should call fetching posts like this: $query = new WP_Query(array('post_type' => 'condo', 'p' => $action['akcions']->ID)) with proper offset passed in params, render html template and return it.
I am trying to add some animation to the mobile navigation to drop down slowly rather than have the page jumping. I am using the foundationpress theme. I can't seem to make it work with data-animate. This is my code snippet:
<div class="title-bar" data-responsive-toggle="site-navigation">
<button class="menu-icon" data-toggle="panel" type="button" data-toggle="mobile-menu"></button>
<div class="title-bar-title">
<div class="mini-logo">
<img class="mini-logo-img" src="/wp-content/uploads/2016/11/coc-logo.png" alt="Mountain View" style="width:4rem;height:auto;">
</div>
<!--<?php bloginfo( 'name' ); ?>-->
</div>
</div>
<!--<nav id="site-navigation" class="main-navigation nav-area" role="navigation" style="width:100%" >-->
<div class="top-bar-left">
<ul class="menu">
<li class="co-logo-top"></li>
<!--<li class="home"><?php bloginfo( 'name' ); ?></li>-->
</ul>
</div>
<div class="top-bar-right" >
<?php foundationpress_top_bar_r(); ?>
<?php if ( ! get_theme_mod( 'wpt_mobile_menu_layout' ) || get_theme_mod( 'wpt_mobile_menu_layout' ) === 'topbar' ) : ?>
<?php get_template_part( 'template-parts/mobile-top-bar' ); ?>
<?php endif; ?>
</div>
</nav>
I'm not seeing the actual '#mobile-menu' component in your code snippet, so not 100% sure what's happening here, but the thing to be aware of is that you need to have the data-animate attribute on the same element as you have your data-toggler attribute (which in this case is the thing being toggled, or '#mobile-menu'). See the example here: http://foundation.zurb.com/sites/docs/toggler.html#toggle-with-animation
have you tried triggering it with jquery/js? see this thread: https://github.com/olefredrik/FoundationPress/issues/772.
also check that you have added the data-toggler attribute to the element
I am working on an acceptence test to see if I can go from homepage to categories however no matter what I try I does see the link but I can't click it.
<?php
$I = new AcceptanceTester($scenario);
$I->wantTo('I click category');
$I->amOnPage('/');
$I->seeLink('Categories', '/categories');
$I->click('category');
?>
The HTML:
<div class="col s12 m4">
<a href="/categories" >
<div class="card">
<div class="card-content">
<div class="teal-text center-align" name="category">
Categories
</div>
</div>
</div>
</a>
</div>
</div>
I don't know if Codeception is looking for the 'name' attribute of html tag. Rather than this, you should try other ways of use of click method: http://codeception.com/docs/03-AcceptanceTests#Click
Also you can try this:
$I->click(['name' => 'category']);
I am using codeigniter and am trying to set up a bootstrap 2 column layout using in my controller:
$data['form'] = $this->load->view('sellers/form7','',TRUE);
$data['data1'] = $this->load->view('sellers/lorem','',TRUE);
$this->load->view('sellers/twocolumnlayout', $data);
my layout view is :
<div class="container-fluid">
<div class="row-fluid">
<div class="span5">
<?php echo $form ?>
</div>
<div class="span2">
</div>
<div class="span5">
<?php echo $text1 ?>
</div>
</div>
</div>
Unfortunately my columns are overlapping (Please see attached pic). Can anyone show me how to fix this?
I am trying to use Bootstrap Tabs in my wordpress project. I can see the tabs in the browser window but the tabs are not switching.
Here is the code I am using. The tabs are basically the example from the Bootstrap docs which are repeated in many places in stackoverflow. However in my Wordpress project they still don't switch.
function jrtrs_add_bootstrap(){
$src = plugin_dir_url( __FILE__ ) . 'css/bootstrap.min.css';
wp_register_style('trs_bootstrap-style', $src);
wp_enqueue_style('trs_bootstrap-style');
}
// Add js scripts
function jrtrs_add_scripts(){
wp_enqueue_script('jquery');
wp_enqueue_script('nav-tabs', plugin_dir_url( __FILE__ ) . 'js/bootstrap-tab.js', array('jquery'));
wp_enqueue_script( 'tracking-settings-ajax-request', plugin_dir_url( __FILE__ ) . 'js/tracking-settings.js', array('jquery'));
}
add_action('wp_print_scripts', 'jrtrs_add_scripts');
add_shortcode('ms_betfair_plugin', 'jrtrs_display_form');
function jrtrs_display_form() {
jrtrs_add_bootstrap();
$htmlStr = <<<EOD
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
<li>Green</li>
<li>Blue</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Reeeeeeeeed</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
<h1>Green</h1>
<p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
<h1>Blue</h1>
<p>blue blue blue blue blue</p>
</div>
</div>
</div>
EOD;
return $htmlStr;
}
... and the JavaScript ....
jQuery(document).ready(function () {
jQuery('#tabs a').click(function (e) {
//alert("tab clicked");
e.preventDefault();
jQuery(this).tab('show');
})
});
I think you are misunderstanding something. You should not have to write any jQuery at all to make the bootstrap tabs work. It should work as soon as you drop in the html.
My best guess is that there is a javascript error.
As a trouble-shooting task, I would recommend downloading and including the full bootstrap.js rather than just bootstrap-tab.js.