I am developing phonegap application . I want to add native slide page transition while switching the pages. I am not using jquery mobile. Instead of that I am using the bootstrap . But the problem is there is nothing for page transitions in the bootstrap. so is there any way in jquery or javascript using which it can be implemented in the application.I have searched a lot but all the example are only for the div transitions .
You can use a CSS library called Animate.css (http://daneden.github.io/animate.css/). You can add animation classes to the pages & slide then in left & right. I had some time so made a working demo of how it will work -
WORKING DEMO - http://codepen.io/nitishdhar/pen/FIzst
So basically I have created a page structure & on click on page links, I am assigning them the required class for the slide effect. This also handles next & previous page handling so if you move from 1st page to 2nd, the slide would be from right to left & if you go from 2nd to 1st the slide would be left to right.
HTML Structure
<ul class="nav navbar-nav">
<li><a class="page-link" href="#" data-page="1">Page 1</a></li>
<li><a class="page-link" href="#" data-page="2">Page 2</a></li>
<li><a class="page-link" href="#" data-page="3">Page 3</a></li>
</ul>
<div class="container">
<div class="page active" id="page-1" data-page="1">
<h1>Page 1</h1>
<p>
Next »
</p>
</div>
<div class="page" id="page-2" data-page="2">
<h1>Page 2</h1>
<p>
« Prev
Next »
</p>
</div>
<div class="page" id="page-3" data-page="3">
<h1>Page 3</h1>
<p>
« Prev
</p>
</div>
</div> <!-- /container -->
jQuery Code
$(document).ready(function(){
$('.page-link').click(function(){
var goToPage = $(this).data('page');
var nextPage = $('#page-' + goToPage);
var currPage = $('.page.active');
if(goToPage > currPage.data('page')) {
currPage.addClass('animated slideOutLeft');
nextPage.addClass('active animated slideInRight');
} else if(goToPage < currPage.data('page')) {
currPage.addClass('animated slideOutRight');
nextPage.addClass('active animated slideInLeft');
}
currPage.removeClass('active animated slideInRight slideInLeft slideOutRight slideOutLeft');
});
});
Related
I am trying to display the content of the selected side navigation item, but somehow my data-toggle ="tab" is not working. I have searched it on several forums, made changes accordingly but still could not get it to work. As was suggested, I included the jquery link before the bootstrap link and I am using Bootstrap v3.3.7 (http://getbootstrap.com).
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
The part of the code is as follows:
<script>
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
<div class="container">
<div class="row">
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<li>Events<span class="caret"></span>
<ul class="collapse list-unstyled" id="eventSubmenu">
<li > Link1 </li>
<li > Link2 </li>
</ul>
</li>
As you can see in the image the data-toggle does not change its color, in short it is not considered as a keyword
I have the following tab structure in the form of a form with a submit button on the second tab. Is it possible for the tabs to auto-change upon a certain condition?
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
It's pretty hard to answer this without knowing what condition you want or seeing any code apart from the HTML structure (and without any CSS).
I'm assuming clicking on the anchors will change tabs, so what you need to do is add ids to them:
<li><a data-toggle="tab" href="#menu1" id="tab1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2" id="tab2">Menu 2</a></li>
and then if you're using jQuery do something like:
if(/*whatever condition you want*/){
$('#tab2').click();
}
otherwise:
if(/*whatever condition you want*/){
document.getElementById('tab2').click();
}
What you're looking for is called a multi-step form or a form wizard.
There are multiple examples on google on how to achieve such a solution and many many many JavaScript and jQuery modules/libraries which provide such functionality.
one sample can be found at this JSFiddle by JQ Purfect using bootstrap wizard:
http://jsfiddle.net/JQPurfect/nGnbJ/2/
$(document).ready(function () {
$('#rootwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $percent = ($current / $total) * 100;
$('.bar').text($percent.toFixed(0) + '%');
$('#rootwizard').find('.bar').css({
width: $percent + '%'
});
}
});
window.prettyPrint && prettyPrint()
});
Or follow this one: https://www.npmjs.com/package/jquery-simple-wizard
You can use the bootstrap tabs javascript reference to manipulate tabs to do something based on a condition. You can see the javascript reference at http://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp. If you are trying to show your tab then you should be able to just use something like the following:
$('.nav-tabs a[href="#menu2"]').tab('show')
Not knowing what condition you want to toggle the tab on I made a fiddle to show you with just a click function but you can use whatever fucntion you want to show the tab.
Here is a fiddle Fiddle
I am using Foundation 5 to create a Drop-Down Navigation. The Navigation is creating with ng-repeat, the input comming from a JSON file.
Basically all is working fine, but when I have three levels on my bar and i want to open the last level, I want to click on the second level that the menu is not disappears when the mouse is leaving. In the standard code from foundation this is working fine, but why it is not working with ng-repeat ?
I have created a Plunker - First my Navigation Menu and afterwards the Standard Menu from Foundation, where you can click on a sublevel and the menu doesn't appear when the mouse is leaving.
https://plnkr.co/edit/gZCtMrMRXOD0DnjMqId5?p=preview
This is my Code:
<section class="top-bar-section">
<ul class="left">
<li class=""></li>
<!-- Start Navigation 1. Level -->
<li ng-class="{'has-dropdown':navigation.type === 'Sub', 'nav_button':navigation.type === 'Main'}" ng-repeat="navigation in nav.links">
<a ng-if="navigation.type == 'Main'" href="{{navigation.link1}}" class="">{{navigation.name}}</a>
<a ng-if="navigation.type == 'Sub'" href="#" class="">{{navigation.name}}</a>
<!-- Start Navigation 2. Level -->
<ul ng-if="navigation.type == 'Sub'" class="dropdown">
<li ng-class="{'has-dropdown':subitem.type === 'Sub', 'nav_button':subitem.type === 'Main'}" ng-repeat="subitem in navigation.subitems">
<a ng-if="subitem.type == 'Main'" href="{{subitem.link1}}" class="">{{subitem.name2}}</a>
<a ng-if="subitem.type == 'Sub'" href="#" class="">{{subitem.name2}}</a>
<!-- Start Navigation 3. Level -->
<ul ng-if="subitem.type == 'Sub'" class="dropdown">
<li ng-repeat="subitem in subitem.subitems2">{{subitem.name3}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
Strange is, when I set the option 'data-options="is_hover: false"', its working - but the Hover effect is necessary in my Case.
Anybody has a Suggestion for me to solve that ?
Does anybody know how to set up Snap.js in jQuery Mobile? I'm trying to migrate from the jQuery Mobile panel widget which has major scroll issues.
http://jsfiddle.net/frank_o/vZBzD/3/
HTML:
<div data-role="page">
<header data-role="header" data-position="fixed" data-tap-toggle="false">
<a id="open-panel">Open panel</a>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
</header>
<div data-role="content" id="content" class="snap-content">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
JS:
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
if (document.getElementById('open-panel')) {
addEvent(document.getElementById('open-panel'), 'click', function () {
snapper.open('left');
});
}
});
I don't understand what's the problem? You had a JavaScript error with click event binding, I just changed it to jQuery like binding.
Working example: http://jsfiddle.net/Gajotres/as8P4/
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
$(document).on('click', '#open-panel',function () {
snapper.open('left');
});
});
As per snap js, you don't need to place the snap js html content inside the jQuery mobile page content html.
You can break the page in two parts cleanly, the snap nav section & the actual jQuery mobile html structure.
Working Demo
http://codepen.io/nitishdhar/pen/pIJkr
I have used jQuery + jQuery Mobile 1.4.2(JS) + jQuery Mobile 1.4.2(CSS) + Snap JS + Snap CSS as resources in the codepen, you can check them in specific JS & CSS sections settings button.
Code Structure - Different Menu on Both Sides
<body>
<!-- Snap Js Code Comes Here -->
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right">
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
</ul>
</div>
</div>
<!-- Snap Js Code Ends Here -->
<!-- Jquery Mobile Code Comes Here -->
<div data-role="page" id="content">
<div data-role="header" data-position="fixed">
<h4>© Test App</h4>
</div>
<div role="main" class="ui-content">
Some Page Content
</div>
<div data-role="footer" data-position="fixed">
<h4>© Test App</h4>
</div>
</div>
</body>
Now apply some CSS as per your requirement of design, but you might need the z-index -
#content {
background: #BFC7D8;
z-index: 1;
}
Now initiate the snap nav -
var snapper = new Snap({
element: document.getElementById('content')
});
This should work fine now.
Alternate Example with same Menu on both sides
Also, if you want to show the same menu on both sides, just remove the menu items from the snap-drawer-right div & only keep menu items in the left one like this -
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
Now Add this to your CSS -
/* Show "Left" drawer for the "Right" drawer in the demo */
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
}
/* Hide the actual "Right" drawer in the demo */
.snapjs-right .snap-drawer-right {
display: none;
}
Working Demo - http://codepen.io/nitishdhar/pen/LliBa
I am really stuck on this. I have a dropdown menu called "Example" that contains 2 submenus "submenu1" and "submenu2". When either of the 2 is clicked, it will contain an image thumb which will be displayed in lightbox style. But as of now both thumbs are displayed and this is not what I want because the final web page will contain hundreds of images. Is there a way to make the images appear only when one sub-menu is clicked, according to the code below. Thanks
<!DOCTYPE html>
<head>
</head>
<body>
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">CATEGORIES</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle"
>BAPTISM
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
BOY CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".boy" tabindex="-1">Clothing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
GIRL CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".girl" tabindex="-1">Clothing</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</nav>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- gallery starts here -->
<li class="item-thumbs span3 boy"><!-- Fancybox - Gallery Enabled
- Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="boy"
title="" href="_include/img/work/full/boy_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/boy_clothing.jpg" alt="">
</li>
<li class="item-thumbs span3 girl">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="girl"
title="" href="_include/img/work/full/girl_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/girl_clothing.jpg"
alt="">
</li>
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</body>
</html>
WOW I can't believe I found the solution after so many days by adding just a simple word. Didn't have to mess with javascript at all. Actually in the external .js file of the website I was told by a code developer to add the following: filter: '.foobar' See the final result below $container.isotope({
// options
animationEngine: 'best-available',
itemSelector : '.item-thumbs',
filter: '.foobar',
layoutMode : 'fitRows'
});
Here is what I would do:
I try and keep the logic simple, then you can just use something similar on your site :)
(Please S.O. Correct me if I am wrong here!)
CSS:
Give your submenus an ID
JavaScript:
// 2 event listeners that will run a function when the submenu is clicked:
var sub_menu_1 = document.getElementById( "submenu1" );
sub_menu_1.addEventListener("click", DISPLAY_menu_1 , false);
var sub_menu_2 = document.getElementById( "submenu2" );
sub_menu_2.addEventListener("click", DISPLAY_menu_1 , false);
function DISPLAY_menu_1 () {
// Do whatever CSS you need here, I simply make the entire DIV 'visible':
sub_menu_1.style.visibility = 'visible';
// For good measures, lets make submenu2 'invisible':
sub_menu_2.style.visibility = 'hidden';
}
function DISPLAY_menu_2 () {
// Same in Reverse
sub_menu_2.style.visibility = 'visible';
sub_menu_1.style.visibility = 'hidden';
}
EDIT:
Whew! This took a while.. Sorry about that!
Check out this example:
I basically made 3 versions for you to try out.
Simply click the Edit this Pen button to check the code!
Example