I have designed a page with ParentTabs and ChildTabs, now on ParentTabs are displayed childTabs with other content each. How can I do that action button (continue) to go to the next child tab in order to display the other content tab.
<div id="content">
<div class="tineUl">
<ul class="mainUl">
<li class="selected"><a><span>TabOne</span></a></li>
<li><a><span>TabTwo</span></a></li>
<li><a><span>ThirdTab</span></a></li>
<li><a><span>FourthTab </span></a></li>
</ul>
</div>
<div id="subContent">
<div class="tineUl">
<ul class="subMainUl">
<li class="selected"><a><span>TabOne</span></a></li>
<li><a><span>TabTwo</span></a></li>
<li><a><span>ThirdTab</span></a></li>
<li><a><span>FourthTab </span></a></li>
</ul>
</div>
<div id="subContentChild">
<p>
SubContent Menu Zone.
</p>
<input type="submit" class="button" value="Cancel"></input>
<input type="submit" class="button" value="Continue"></input>
</div>
</div>
</div>
fiddle: http://jsfiddle.net/Ksb2W/138/
http://os.alfajango.com/easytabs/#twitter-contact choose your tabs .
Related
When this code pops up as a form it works well, but when I press "Don't have an Account.." it redirects to the Parent Directory.
Can someone help?
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
<div class="header">
<ul class="headerList">
<li id="item"> Home</li>
<li id="item"> About us</li>
<li id="item"> Contact us</li>
<li id="popup-login">
<button onclick="togglePopup()">Login/Register</button>
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<form class="form" id="login">
<h1 class="form__title">Login/Register</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
Forgotten your password?
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">Don't have an account? Create account?</a>
</p>
</form>
The problem is that by clicking on the button you are clicking on a link <a> with href="./".
The solution for this case should be: implementing javascript trigger instead of usual html-link:
<a class="form__link" href="void(0);" onclick="toggleCreateAccountPopup()" id="linkCreateAccount">Don't have an account? Create account?</a>
Here, href is voided, and JS-trigger toggleCreateAccountPopup() is called - instead of linking to parent dir.
I have a nav-pills element incorporated in my web page, which works perfectly.
The li tag will have a class of "active" if I'm on that tab and will only have a class of "test" if I'm not currently on that tab.
What I'm also trying to do is have an additional button for next and previous, so if I'm on the "Menu 1" tab and I hit next, I can go back to the "Introduction" tab. I attempted to have the button trigger the link but it doesn't work.
<div class="card">
<div class="header">
<div class="col-sm-12 text-center">
<ul class="nav nav-pills center-pills">
<li class="active" id="first" class="test"><a id="link1" class="test" href="#home">Introduction</a></li>
<li class="test">Menu 1</li>
</ul>
</div>
</div>
<div class="content">
<div class="tab-content">
<!--first tab-->
<div id="home" class="tab-pane fade in active">
<h3>Introduction</h3>
<p>Random Text </p>
<button id="next-step" class="btn btn-basic">Next</button>
</div>
<div id="menu1" class="tab-pane fade in active">
<h3>Menu1</h3>
<button id="back-step" class="btn btn-basic">Back</button>
</div>
</div>
</div>
</div>
</div>
My JavaScript looks like:
$('#back-step').click(function(){
$('link1').trigger("click");
});
$(".nav-pills a").click(function(){
if ($('#first').hasClass('active')){
$('#first').addClass('test').removeClass('active');
}
$(this).tab('show');
});
It looks like there's a typo in your JavaScript. You're not targeting the #link1 id. Try $('#link1').trigger("click"); (note the hash).
I have two forms and each form has different a tag, but when I use Javascript to use a tag different form, I can work on the a tag from the first form. How can make Javascript so that I can work on different a tag from different forms.
My codes are shown below.
Form to sell
<body>
<form class="summarybackground" name="sell" id="sell" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
Form to rent
<form class="summarybackground" name="rent" id="rent" style="height:500px;width:920px;overflow-y:hidden;" method="post">
<div class="myBox">
<nav id="cd-vertical-nav-sec">
<ul>
<li>
<a data-number="1" href="#section1" class="is-selected">
<span class="cd-dot"></span>
<span class="cd-label">Landed</span>
</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1 class="header double">Landed</h1>
</div>
</div>
</form>
</body>
This script can work on the first form's a tag only.
<script>
$('a').click(function () {
$('a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
How to make a script so that I can work on both forms?
Find your a using it's parent
<script>
$('#rent a').click(function () {
$('#rent a').removeClass('is-selected');
$(this).addClass('is-selected');
});
</script>
You can do similar thing for your next form
I have three columns of equal width of col-md-4, however the middle one has an ng-show set on it and sometimes will not be displayed. Right now when friend requests come in and the right most col-md-4 comes up, it is showing up in the middle when the middle one is still hidden. How do I still have the middle col-md-4 chatWindow take up space even when it is hidden?
<div class="row">
<div class="col-md-4 friendListWindow" ng-init="getFriends()">
Friends List
<form ng-submit='addFriend(username)' name='addFriendForm'>
<input type='text' name='username' ng-model='username' required/>
<input type='submit' ng-disabled='!addFriendForm.$valid' value='Add Friend'>
</form>
Online Friends
<ul>
<span ng-repeat='friend in friends track by $index | orderBy:"name"' ng-click='startChat(friend)'>
<li ng-if='friend.online'>
<span class='friendService'>{{friend.service}}</span>
<span class='friendName'>{{friend.name}}</span>
</li>
</span>
</ul>
</div>
<div class="col-md-4 chatWindow" ng-show="activeFriend">
<div class="activeFriendBox">Chat with {{activeFriend.name}}</div>
<div class="messages">
<div ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
<span>{{message.from}}</span>
<span>{{message.message}}</span>
<span>{{message.timestamp}}</span>
</div>
</div>
<div class="sendMessage">
<form ng-submit='sendMessage(messageText)' name='messageForm'>
<input type='text' name='message' ng-model='messageText' required/>
<input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
</form>
</div>
</div>
<div class="col-md-4 friendRequestsWindow">
<div class="friendRequests">
<ul>
<li ng-repeat='friend in friendRequests track by $index'>
<span>New friend Request from: {{friend}}</span>
<button ng-click='acceptFriendRequest(friend)'>Accept</button>
<button ng-click='ignoreFriendRequest(friend)'>Ignore</button>
</li>
</ul>
</div>
<div class="acceptedFriendRequests">
<ul>
<li ng-repeat='friend in acceptedfriendRequests track by $index'>
<span>{{friend}} accepted your friend request</span>
<button ng-click='acknowledgeFriendRequest($index)'>Acknowledge</button>
</li>
</ul>
</div>
</div>
</div>
You can use ng-show in the col content instead of the col itself
Instead of
<div class="col-md-4" ng-show="xxx">content</div>
Use
<div class="col-md-4">
<div ng-show="xxx">content</div>
</div>
I have the html code `
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>site Details</h1>
</div>
<div data-role="content">
Enter the details of site
Modify site details
</div>
</div>
<div data-role="page" id="Site entry1">
<div data-role="header">
Home
<h1>Welcome To enter the details of site</h1>
</div>
<div id="generalList"></div>
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="sitename">Site name:</label>
<input type="text" sitename="name" id="siteName" value="" />
</li>
<li data-role="fieldcontain">
<label for="siteno">Site name:</label>
<input type="text" siteno="siteno" id="siteNo" value="" />
</li>
Next
</ul>
</form>
</div>
</div>
</div>
<div data-role="page" id="Site entry2">
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="moduleNo">moduleNo:</label>
<input type="text" moduleNo="moduleNo" id="moduleNo" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
previous
Next
</div>
</div>
<div data-role="page" id="Site entry3">
<div data-role="content">
<div class="content-primary">
<form>
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="executiveNo">executiveNo:</label>
<input type="text" executiveNo="executiveNo" id="executiveNo" value="" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-b"><button id="btn_3" type="submit" data-theme="a">Submit</button></div>
</fieldset>
</li>
</ul>
</form>
</div>
</div>
<div data-role="footer">
previous
Home
</div>
</div>
<div data-role="page" id="Modify site">
<div data-role="header">
Home
<h1>List of sites </h1>
</div>
<div data-role="content">
<button id="btm_4" type="submit" data-theme="a">modify</button>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>`
I have created the list of fields from different pages with the code below
function makesite(site){
var li = '<ul data-role="listview" >';
$('body').find('[data-role="fieldcontain"]').each(function(key, value){
var title = $(this).find('label').html();
var val = $(this).find('[type="text"]').val();
li += '<li>'+title+' '+val+'</li>';
});
li +='</ul>';
$('#content').html(li).trigger('create');
$('ul').listview('refresh');}
But the problem is I need to display the List of site added with sitename on clicking modify button in page with id "modifysite". where site, site name,site no,executive no, module no are global variables.
I have tried with the code below
Function redrawsites(site){
var ul = makesite(site);
$('#content').html(ul).trigger('create');
}