Hi I hope someone can help with this. I'm building a wordpress plugin. I just have basic knowledge of php and i managed to build the whole plugin except pagination. I have tried so many code using javascript but none is working for me. Here is the image. I want to divide the items with pagination
Thank you in advance!
A good approach will be to think about the pages like tabs. Then the page link will behave like buttons that show/hide based on the page link clicked.
Here's an example using jQuery
// Add an event listener for when the page link is clicked
$('.page-link').on('click', function(){
// Save the page number that was clicked
var pageNum = $(this).data('page-id')
// Hide any open 'pages'
$('.page-content').hide();
// Find and show the selected page
$('[data-page=' + pageNum + ']'').show();
});
For this to work, you'd need a HTML structure a bit like this
<!-- The Page Link -->
<div>
<ul>
<li class="page-link" data-page-id="1">Page 1</li>
<li class="page-link" data-page-id="2">Page 2</li>
<li class="page-link" data-page-id="3">Page 3</li>
</ul>
<!-- The Page Content -->
<div class="page-content" data-page="1" style="display: none;">
Page 1 content
</div>
<div class="page-content" data-page="2" style="display: none;">
Page 2 content
</div>
<div class="page-content" data-page="3" style="display: none;">
Page 3 content
</div>
</div>
Here is a super basic jsfiddle
Related
I am using this code and it works on my Wordpress and Elementor site great:
https://codepen.io/mooku/pen/BQZQwO
<div class="tabs-container">
<nav class="tabs">
<ul>
<li class="active" data-tab="tab-1">Sports</li>
<li data-tab="tab-2">Monogram</li>
<li data-tab="tab-3">Holiday</li>
</ul>
<div id="tab-1" class="tab-content current">
[product_category category="sports" per_page="9" columns="4" orderby="date" order="desc" operator="AND"]
</div>
<div id="tab-2" class="tab-content">
[product_category category="monograms" per_page="9" columns="4" orderby="date" order="desc" operator="AND"]
</div>
<div id="tab-3" class="tab-content">
[product_category category="holiday" per_page="9" columns="4" orderby="date" order="desc" operator="AND"]
</div>
$(document).on('click', 'li', function(){
$('li').removeClass('active');
$('ul').toggleClass('expanded');
$(this).addClass('active');
var tab_id = $(this).attr('data-tab');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$('#'+tab_id).addClass('current');
});
I put shortcodes in each tab so I can show my Woocommerce products by category. For some reason however when viewing it in mobile view as a condensed drop down, when I click on a product within a tab, the entire tab's content disappears, the dropdown menu expands, and is covered by content below it briefly before proceeding to the clicked products page. Everything is working besides that annoying error. I should note I did a test where I took out the shortcode and just put up links, and upon clicking those everything works fine, so the shortcodes are definitely to blame. Any way to fix this?
Before Clicking
After Clicking
I'm using bootstrap tab shortcodes on my Wordpress site. I want to link from another page to tab2. Can anyone advise how this is done?
My page code (chopped a bit):
[bootstrap_tab name="TAB1" link="tab1-slug" active="active"]
TAB 1 Content
[/bootstrap_tab]
[bootstrap_tab name="TAB2" link="tab2-slug"]
More content
[/bootstrap_tab]
[bootstrap_tab name="TAB3" link="tab3-slug"]
Yep. Even more content.
[/bootstrap_tab]
[bootstrap_tab name="TAB4" link="tab4-slug"]
Yep. Even more content.
[/bootstrap_tab]
[end_bootstrap_tab]
The code it produces:
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="tabs active">
<a data-toggle="tab" href="#tab1-slug">TAB1</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab2-slug">TAB2</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab3-slug">TAB3</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab4-slug">TAB4</a>
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div id="tab1-slug" class="tab-pane active">
<p></p>
<h2>header</h2>
<p><strong>bold</strong></p>
<p>content</p>
<p></p>
</div>
<div id="tab2-slug" class="tab-pane ">
<p></p>
<h2>TAB2</h2>
<p><strong>These are usually two day</strong></p>
</div>
<div id="tab3-slug" class="tab-pane ">
<p></p>
<h2>TAB3</h2>
<p>1 to 2 day events</p><p></p>
</div>
<div id="tab4-slug" class="tab-pane ">
<p>
<h2>TAB4</h2>
<p><strong>5 to 10 day courses</strong></p>
</div>
</div>
Though not in WordPress, this seems to be the definitive solution to linking to Bootstrap tabs:
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
That being said, I wrote a WordPress plugin that will do this. Activate the plugin, then you'll be able to use the tab's href as the hash.
If your tab looks like this:
<li>Profile</li>
You can link to it and activate/open it using a link like this:
Link to my tab
The plugin will also allow you to link directly to content on the tabs, using a sort of a two-step link:
Step 1 Activate the proper tab
Step 2 Scroll to the content on the tab.
It does this using only a single hash in the URL.
For example: http://www.example.com/mypage/#content
This will take you to "mypage" and the HTML element with id="content", whether it's on an active/inactive Bootstrap tab or just on the page somewhere.
Hope this helps:
Here's the plugin on GitHub: https://github.com/marinersmuseum/WP-Tab-Anchors/blob/master/wp-tab-anchors.zip
Supposing that jQuery is being loaded and that the link URL is something like
http://example.com/page-with-tabs/?tab=NUMBER
We print some conditional script at the footer:
add_action( 'wp_footer', 'active_tab_so_19576232' );
function active_tab_so_19576232()
{
# Query var not set in URL, bail out
if( !isset( $_GET['tab'] ) )
return;
# Change the active tab
$tab = '#tab'. $_GET['tab'] .'-slug';
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('div.tab-pane.active').removeClass('active');
$('<?php echo $tab; ?>').addClass('active');
});
</script>
<?php
}
Should be a plugin, but you can drop the code in your theme functions.php.
hi i have master page and menu like this
<ul id="ulhotel" runat="server">
<li class="userprof active"><a href="AddAdminDetail.aspx">
<p class="activenav">
<span class="entypo activenav">+</span>User Profile</p>
</a></li>
<li class="hoteldetails"><a href="AddHotelDetails.aspx">
<p>
<span class="entypo">j</span>Hotel Details</p>
</a></li>
<li class="hoteldirectory"><a href="AddHotelDirectory.aspx">
<p>
<span class="entypo">l</span>Hotel Directory</p>
</a></li>
<li class="appconfig"><a href="Appconfiguration.aspx">
<p>
<span class="entypo">#</span>App Configurate</p>
</a></li>
<li class="featoffers"><a href="OfferDashboard.aspx">
<p>
<span class="entypo">C</span>Offer Dashboard</p>
</a></li>
</ul>
now right now User Profile Is seleted now when i Click HotelDetail link I want to change it same as User Profile
i am trying this but its not working
$('#ulhotel li').click(function()
Thanks in advance.
You have
AddAdminDetail.aspx
AddHotelDetails.aspx
AddHotelDirectory.aspx
Appconfiguration.aspx
OfferDashboard.aspx
five different pages so you can also add active class to appropriate li tag on related page.
Comment Response
$('#ulhotel li').on('click',function(e)
and then set cookies for clicked li now when page redirected use that previously set cookies and add active class to appropriate li.
It is due to when you click link each time master page is loading.
you have to use script to change class in AddHotelDetails.aspx page to active related li.
In AddHotelDetails.aspx page you can use
$(document).ready(function(){
$('#ulhotel li').removeClass("active");
$('#ulhotel li.hoteldetails').addClass("active");
});
Hope this help you.
I need to create an Accordion Ajax control that in the first Pane has a list of records
(for example Users).
When the web users clic on one of them, the other Panes have to be populated with details of this user.
For example, if I clic in the first record, Pane2 will be populated with LifeDetails, Pane3 with HomeDetails, Pane4 with JobDetails and so on.
Anyone has idea of how realize this?
Thanks a lot.
Luigi
I would try to solve this using http://docs.jquery.com/UI/Accordion and http://pjax.heroku.com/ ...
Something along the lines of
<div id="accordion">
<h3>pane1</h3>
<div>
<ul id="persons">
<li>Person 1</li>
<li>Person 2</li>
<li>Person 3</li>
</ul>
</div>
<h3>Life Details</h3>
<div>
Some content here
</div>
<h3>Home Details</h3>
<div>
Some content here
</div>
<h3>Job Details </h3>
<div>
Some content here
</div>
</div>
For the markup. Then your JavaScript should be something like
<script src="jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.pjax.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#accordion").accordion();
$('.persons').pjax('#accordion');
});
</script>
And in your aspx you check for the HTTP_X_PJAX header (see xhr.setRequestHeader('X-PJAX', 'true')), and if it's present, you render just the <div id="accordion"> for the selected item (without the Masterpage, just the div), if it's not present you render the whole page (with Masterpage).
I have 4 JQuery Tabs in an ASP.Net MVC 3 appication. All tabs display correct content when tabs are clicked. However, I want to display Login/Registration content when a user clicks the Login/Registration link at the top of the UI page. The login/reg should display underneath the 4 tabs with none of the tab content. So the tabs need to remain visible. Although, none of them would be selected.
The problem is, both the tab content and the login/registration content shows at the same time. I need only the login/reg content that is unrelated to the tabs to display. I also need all tabs to be unselected. Any help is appreciated!
<script type="text/javascript">
$(function () {
$('#tabs').tabs();
});
</script>
<div id="menu" style=" background-color:White; width:1024px; height:auto; float:left;">
<!-- Must have class= info to prevent flash of just content on refresh -->
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style=" position:relative; border:0px;" >
<ul class="ui-tabs-nav">
<li><a href="#tabs-1" >Home</a></li>
<li><a href="#tabs-2" >Statistics</a></li>
<li><a href="#tabs-3" >Topo Maps</a></li>
<li><a href="#tabs-4" >FAQs</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Home/Home") </div>
<div id="tabs-2" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Statistics/Statistics")</div>
<div id="tabs-3" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Maps/Maps")</div>
<div id="tabs-4" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Home/FAQs")</div>
</div>
</div>
Here you have an example http://jsfiddle.net/YnZRa/1/
Steps
Add a new tab with <li
style="display:none;">Tab 4</li>
Add the content in a new div
Edit the script with this
//Edit the script this way to show the content with a click in a link
$(document).ready(function(){
var $tabs = $( "#tabs" ).tabs();
$('.goto').click(function() { // bind click event to link
$tabs.tabs('select', 3); // switch to fourth tab
return false;
});
});
Hope it works!! :)
If I understand your question correctly, you'd like to collapse your tab content when a user is trying to login/register.
First things first, you must set the tabs options to be collapsable. So, edit your tabs calls to reflect this
$('#tabs').tabs({ collapsible: true });
From here, you can attach an event handler to your login/registration click event. You'll want to do two things, 1) get the currently selected tab index and 2) fire the tab select event to collapse your tabs. It might look something like this:
$('.login').click(function () {
var tabIdx = $( "#tabs" ).tabs( "option", "selected" );
$("#tabs").tabs( "select" , tabIdx); //collapse the currently selected tab
// continue with your login/registration click event
});