I have received a task to add functionality to a HTML page (JSP). The page is just from designers/frontend devs so in some places I need to change a href to button or input but it makes a mess and all the design is changed. Here is a piece of code:
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
<nav>
<ul class="nav nav-pills nav-inline" id="addchild">
<li>
<a href="#" id="add">
<i class="glyphicon glyphicon-plus"></i>
</a>
</li>
<li>
Add Child / Student
</li>
</ul>
<ul class="nav nav-pills" id="parentinfo">
<li>
<a href="#" class="listItem" id="edit">
<span class="editicon">Edit</span>
</a>
</li>
<li>
<a href="#" class="listItem" id="edittext">
<span class="parentInfo">Parent Info</span>
</a>
</li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li>
Upgrade Package
</li>
<li>
Wow Catalog
</li>
</ul>
</nav>
I want it to be like the below, without changing appearance:
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
<nav>
<ul class="nav nav-pills nav-inline" id="addchild">
<li>
<a href="/register/studentSignup" type="submit" id="add">
<i class="glyphicon glyphicon-plus"></i>
</a>
</li>
<li>
Add Child / Student
</li>
</ul>
<ul class="nav nav-pills" id="parentinfo">
<li>
<input type="submit" class="listItem" name="action" value="editParentInfo" id="edit" />
<span class="editicon">Edit</span>
</li>
<li>
<input type="submit" class="listItem" name="action" value="editParentInfo" id="editParent" />
<span class="parentInfo">Parent Info</span>
</li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li>
Upgrade Package
</li>
<li>
Wow Catalog
</li>
</ul>
<input type="hidden" name="parentID" path="parentID" value="${parentInfo.parentID}">
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
</nav>
You should not change the design given to you. Adding/changing visible elements in HTML changes the layout.
Also doing that modifications you not only bring a mess to the design but add errors to the HTML code.
The anchor tag doesn't have type="submit" attribute. This attribute is available in buttons and input elements.
Modifying href attribute on links makes URL visible on hover. It's not intended behavior imposed by the designer. Probably he/she should give you directions how to proceed with the code to not change the design. In this case onclick and onsubmit events could be handled with javascript functions to submit a form.
Here the example show you could submit a form with validations.
Note: The code only works with Edit button.
JSFiddle
HTML:
<form id="editForm" onsubmit="return doValidate();">
<div class="col-md-3 col-sm-5 col-sx-12" id="leftmenu">
<nav>
<ul class="nav nav-pills nav-inline" id="addchild">
<li>
<a href="#" id="add">
<i class="glyphicon glyphicon-plus"></i>
</a>
</li>
<li>
Add Child / Student
</li>
</ul>
<ul class="nav nav-pills" id="parentinfo">
<li>
<a href="#" class="listItem" id="edit" onclick="doSubmit()">
<span class="editicon">Edit</span>
</a>
<input type="hidden" name="param" value="editParentInfo"/>
</li>
<li>
<a href="#" class="listItem" id="edittext">
<span class="parentInfo">Parent Info</span>
</a>
</li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li>
Upgrade Package
</li>
<li>
Wow Catalog
</li>
</ul>
</nav>
</div>
</form>
JavaScript:
function doSubmit() {
alert("The form is submitting");
var form = document.getElementById("editForm");
form.action="/register/studentSignup";
form.method="post";
submitForm(form);
}
function doValidate() {
var form = document.getElementById("editForm");
alert("The form is being submitted\n"+"action="+form.action+", param="+form.param.value);
return false;
}
function submitForm(form) {
//get the form element's document to create the input control with
//(this way will work across windows in IE8)
var button = form.ownerDocument.createElement('input');
//make sure it can't be seen/disrupts layout (even momentarily)
button.style.display = 'none';
//make it such that it will invoke submit if clicked
button.type = 'submit';
//append it and click it
form.appendChild(button).click();
//if it was prevented, make sure we don't get a build up of buttons
form.removeChild(button);
}
References:
Should jQuery's $(form).submit(); not trigger onSubmit within the form tag?
What are the allowed tags inside a <li>?
Related
I use Bootstrap 4.5.0 and am trying to use this Bootstrap form-wizard (version 1.4.2).
To navigate through the different tabs, the JS should add a class="active" attribute to the current step's <li>-element. Instead - for some reason that I haven't been able to figure out - it adds the attribute to the <li>-element's child element <a>.
This results in the nav-pills not being styled right and the previous/next buttons not working properly.
I manually added/removed the required attributes using Chrome browser's developer tools and confirmed that apparently, everything would work out fine, if the class="active" attribute got attached to the <li>-element.
Any ideas why the class is added to the wrong element and how to prevent it?
Here's my HTML mark-up:
<div id="rootWizard">
<div class="form-bootstrapWizard">
<ul class="bootstrapWizard form-wizard">
<li data-target="#step1" class="active">
<a href="#tab1" data-toggle="tab">
<span class="step">1</span>
<span class="title">Title of Step 1</span>
</a>
</li>
<li data-target="#step2">
<a href="#tab2" data-toggle="tab">
<span class="step">2</span>
<span class="title">Title of Step 2</span>
</a>
</li>
<li data-target="#step3">
<a href="#tab3" data-toggle="tab">
<span class="step">3</span>
<span class="title">Title of Step 3</span>
</a>
</li>
<li data-target="#step4">
<a href="#tab4" data-toggle="tab">
<span class="step">4</span>
<span class="title">Title of Step 4</span>
</a>
</li>
<li data-target="#step5">
<a href="#tab5" data-toggle="tab">
<span class="step">5</span>
<span class="title">Title of Step 5</span>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
This is how I initialize the wizard within the document.ready()-function:
$('#rootWizard').bootstrapWizard({
tabClass: 'bootstrapWizard'
});
In my application, the navbar has upto 2 levels of submenu. My requirement is to change few features of a menu when either it is selected or any of its submenu (of any level) is selected. I have been given this code that does it in an ineffective way till date (ie) writing one function for every in navbar which will make all of its specific CSS/image changes. But I would like to find an effective way (mostly one method) which will perform all the CSS changes when required data is provided as input.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 wrapper zeroPadding">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="firstEmptyDiv">
<div class="toggleBtnDiv" (click)="toggleBtn()">
<i class="fa fa-bars toggleButton" aria-hidden="true"></i>
</div>
</li>
<li>
<a routerLink="/dashboard" routerLinkActive="active">
<img class="iconImg" id="iconImg" src="/assets/images/dashboard_icon.svg" alt="Dashboard menu icon" />
<br>
<span class="textWrap" *ngIf="buttonColor">Dashboard</span>
</a>
</li>
<li class="nav nav-stacked" *ngIf="this.hasCompanyStructureAccess">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="borderColor"
[style.background-color]="color">
<img class="iconImg" id="iconImg" [src]="imgSrc" alt="Company structure menu icon" />
<span [style.color]="routerText" *ngIf="buttonColor" class="textWrap overflow-wrap">Company Structure</span>
<span [style.color]="caretColor" class="caret"></span>
</button>
<ul class="dropdown-menu slide">
<li *ngIf="this.dataService.hasViewLocationAccess">
<a routerLink="/location" routerLinkActive="active">Location</a>
</li>
<li *ngIf="this.dataService.hasViewBranchAccess">
<a routerLink="/branch" routerLinkActive="active">Branch</a>
<li *ngIf="this.dataService.hasViewRoleAccess">
<a routerLink="/role" routerLinkActive="active">Role</a>
</li>
<li *ngIf="this.dataService.hasViewDepartmentAccess">
<a routerLink="/department" routerLinkActive="active">Department</a>
</li>
<li *ngIf="this.dataService.hasViewDesignationAccess">
<a routerLink="/designation" routerLinkActive="active">Designation</a>
</li>
<li *ngIf="!needToShowFlag">
<a routerLink="ACL" (click)="ACL()" routerLinkActive="active">ACL</a>
</li>
</ul>
</div>
</li>
<li class="nav nav-stacked">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="leaveModuleborderColor"
[style.background-color]="leaveModulecolor">
<img class="iconImg" [style.padding]="iconImgPadding" id="iconImg" [src]="leaveModuleSrc" alt="Leave menu icon" />
<span class="textWrap" [style.color]="leaveRouterText" *ngIf="buttonColor">Leave</span>
<span [style.color]="caretColorLeave" class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="submenuList" (click)="openSecondList()" (mouseover)="openSecondList()" [style.display]="submenuListDisplay">
<a class="test" tabindex="-1" id="leaveManagementlist">Configuration<span class="caret"></span>
</a>
<ul class="dropdown-menu" *ngIf="openSecondListFlag">
<li *ngIf="this.dataService.hasViewGeneralConfigurationAccess">
<a tabindex="-1" routerLink="generalconfiguration" (click)="generalConfiguration()" routerLinkActive="active">General Configuration</a>
</li>
<li *ngIf="this.dataService.hasViewListLeaveAllocationAccess">
<a tabindex="-1" (click)="listLeaveAllocation()" routerLinkActive="active">Modify Leave Allocation</a>
</li>
</ul>
</li>
<li class="applyLeaveTab">
<a (click)="applyLeave()">Apply Leave</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11" id="content">
<router-outlet></router-outlet>
</div>
In this code excerpt, when I select a submenu say 'Location', then its main menu 'Company Structure' should be changed with the following CSS values.
1) A different image should be loaded for this menu
2) background color to be changed
3) Color of caret symbol to be changed
4) A different colored border-left to be included
5) Background color of 'Location' submenu should be changed.
Similar CSS change should happen when clicking on 2 level submenu too like 'General configuration' in the example.
Any suggestions to come up with an effective way to meet this requirement is welcome. Thank you!
My website has a menu that hides/unhides basedon if a button is clicked or not. My goal, is to have a password box that will show the links in the menu if the password is correct, and keep them hidden if it is false. Security isn't the biggest item on my list just yet, I would just like to see it work. Also, I would like it to show the links without having to reload the whole page. Can this be done?
here is some of the html code for the menu:
<a id="menu-toggle" href="#" class="btn btn-light btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
<x <font size="2"><font FACE="american typewriter">Title</font> </font></x>
</li>
<li>
<a href="#about" onclick = $("#menu-close").click(); >Hello.</a>
</li>
<li>
<a href="Link1" onclick = $("#menu-close").click(); >hi.</a>
</li>
<li>
<a href="link2" onclick = $("#menu-close").click(); >Math</a>
</ul>
</nav>
something like this? http://jsfiddle.net/swm53ran/341/ (the password is "CORRECT" for demo purposes
javascript:
function submit() {
var pw = document.getElementById('password').value;
var menu = document.getElementById('menu');
if(pw == 'CORRECT') {
menu.className = "";
}
else {
menu.className = "hide";
}
};
html:
<input type="text" id="password"/>
<br/>
<button id="submit" onclick="submit()">Submit</button>
<br/>
<br/>
<ul class="sidebar-nav hide" id="menu">
<li class="sidebar-brand">
Title
</li>
<li>
<a href="#about" >Hello.</a>
</li>
<li>
hi.
</li>
<li>
Math
</li>
</ul>
css:
.hide(
display:none;
)
Here's the fiddle
I am trying to achieve something very simple when a listed item is clicked a new class has to be added to it, there are two identical menus, change of class needs to happen in both the menus even if the click occurs in single menu.
In the fiddle #e8e8e8 color is added to any listed item with class 'zm-active', currently it's on home and works for single menu, I want it to work on both the menus even if click happens on single menu.
Code:
JS:
$(document).ready(function() {
$('.zetta-menu li').on('click', changeClass);
});
function changeClass() {
$('.zetta-menu li').removeClass('zm-active');
$(this).addClass('zm-active');
}
HTML:
<nav id="fixedbar">
<ul onClick="" class="zetta-menu zm-response-switch zm-effect-slide-top">
<li class="zm-active zm-content-full">
<a href="#header-single-1">
Home
</a>
</li>
<li>
<a href="#about-10">
About
</a>
</li>
<li>
<a href="#services-18">
Services
</a>
</li>
<li>
<a href="#portfolio-19">
Portfolio
</a>
</li>
<li>
<a href="#team-19">
Team
</a>
</li>
<li>
<a href="#pricing-17">
Pricing
</a>
</li>
<li>
<a href="#blog-19">
Blog
</a>
</li>
<li>
<a href="#contact-1">
Contact
</a>
</li>
</ul><!-- /.zetta-menu -->
</nav><!-- /#fixedbar -->
<nav class="navbar navbar-single-1 center" role="navigation">
<div class="navbar-inner center">
<ul onClick="" class="zetta-menu zm-response-switch zm-effect-slide-top">
<li class="zm-active zm-content-full">
<a href="#header-single-1">
Home
</a>
</li>
<li>
<a href="#about-10">
About
</a>
</li>
<li>
<a href="#services-18">
Services
</a>
</li>
<li>
<a href="#portfolio-19">
Portfolio
</a>
</li>
<li>
<a href="#team-19">
Team
</a>
</li>
<li>
<a href="#pricing-17">
Pricing
</a>
</li>
<li>
<a href="#blog-19">
Blog
</a>
</li>
<li>
<a href="#contact-1">
Contact
</a>
</li>
</ul><!-- /.zetta-menu -->
</div><!-- /.navbar-inner -->
</nav><!-- /.navbar-single-1 -->
I am not very through in javascript/jquery, any help would be appreciated.
Is there something the links have in common? Of yourse! The href attribute (at least in your example).
So, you grab the href attribute of the link you clicked, by this attribute value you grab all links having the same href, and then you grab their parents (LI) in order to add class to them.
$(document).ready(function() {
$('.zetta-menu li a').click(function () {
var itemsToChange = $('li a[href="'+$(this).attr('href')+'"]').parent(),
allItems = $('.zetta-menu li');
allItems.removeClass('zm-active');
itemsToChange.addClass('zm-active');
});
});
JS Fiddle demo
I have a sidebar on my new website that toggles sections open and closed, and it does this.
However in any browser, only when the JS script is present, I can no longer actually click the inside links.
Also, there are no errors in the console.
Please can you help me, i'm out of ideas :)
Here is the JS,
(function($) {
"use strict";
$.fn.tree = function() {
return this.each(function() {
var btn = $(this).children("a").first();
var menu = $(this).children("ul").first();
var isActive = $(this).hasClass('active');
//initialize already active menus
if (isActive) {
menu.show();
btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
}
//Slide open or close the menu on link click
btn.click(function(e) {
e.preventDefault();
if (isActive) {
//Slide up to close menu
menu.slideUp();
isActive = false;
btn.children(".fa-angle-down").first().removeClass("fa-angle-down").addClass("fa-angle-left");
btn.parent("li").removeClass("active");
} else {
//Slide down to open menu
menu.slideDown();
isActive = true;
btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
btn.parent("li").addClass("active");
}
});
/* Add margins to submenu elements to give it a tree look */
menu.find("li > a").each(function() {
var pad = parseInt($(this).css("margin-left")) + 10;
$(this).css({"margin-left": pad + "px"});
});
});
};
}(jQuery));
$('<i class="fa fa-angle-left pull-right"></i>').appendTo('.nav-left > li > a');
/* Sidebar tree view */
$(".sidebar .nav-left li").tree();
And this is the HTML:
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side sidebar-offcanvas">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="/img/avatar3.png" class="img-circle" alt="User Image" />
</div>
<div class="pull-left info">
<p>Hello, <span class="insert_usrdata_name"></span></p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<!-- /.search form -->
<ul class="nav-left">
<li>
<a title="Go to dashboard" class="icon-0" href="/index">Home</a>
</li>
<li>
<a title="Files" class="icon-1" href="/files">Files</a>
<ul>
<li>
<a title="File Manager" class="visibility-on" href="/files/file-manager">File Manager</a>
</li>
<li>
<a title="File Manager 2" class="visibility-on" href="/files/manager-2" target="_blank">File Manager 2</a>
</li>
<li>
<a title="Backups" class="visibility-on" href="/files/backups">Backups</a>
</li>
<li>
<a title="Error Logs" class="visibility-on" href="/files/error-logs">Error Logs</a>
</li>
<li>
<a title="FTP Details" class="visibility-on" href="/files/ftp-access">FTP Details</a>
</li>
<li>
<a title="FTP Accounts" class="visibility-on" href="/files/ftp-accounts">FTP Accounts</a>
</li>
<li>
<a title="FTP Login History" class="visibility-on" href="/files/ftp-login-history">FTP Login History</a>
</li>
</ul>
</li>
<li class="active">
<a title="Accounts" class="icon-2" href="/accounts">Accounts</a>
<ul>
<li>
<a title="Getting Started" class="visibility-on" href="/accounts/start">Getting Started</a>
</li>
<li class="active">
<a title="Account Details" class="visibility-on" href="/accounts/details">Account Details</a>
</li>
<li>
<a title="Change Password" class="visibility-on" href="/accounts/change-password">Change Password</a>
</li>
<li>
<a title="Change Language" class="visibility-on" href="/accounts/change-language">Change Language</a>
</li>
<li>
<a title="Change Theme" class="visibility-on" href="/accounts/change-theme">Change Theme</a>
</li>
</ul>
</li>
<li>
<a title="Emails" class="icon-3" href="/emails">Emails</a>
<ul>
<li>
<a title="Webmail" class="visibility-on" href="/emails/webmail">Webmail</a>
</li>
<li>
<a title="Email Accounts" class="visibility-on" href="/emails/manage">Email Accounts</a>
</li>
<li>
<a title="Forwarders" class="visibility-on" href="/emails/forwarders">Forwarders</a>
</li>
<li>
<a title="Sent Mail Logs" class="visibility-on" href="/emails/sent-mail-logs">Sent Mail Logs</a>
</li>
<li>
<a title="Mail Service Control" class="visibility-on" href="/emails/mail-service-control">Mail Service Control</a>
</li>
<li>
<a title="Edit MX Record" class="visibility-on" href="/emails/mx">Edit MX Record</a>
</li>
</ul>
</li>
<li>
<a title="Domains" class="icon-4" href="/domains">Domains</a>
<ul>
<li>
<a title="Subdomains" class="visibility-on" href="/domains/subdomains">Subdomains</a>
</li>
<li>
<a title="Parked Domains" class="visibility-on" href="/domains/parked">Parked Domains</a>
</li>
<li>
<a title="New Domain" class="visibility-on" href="/domains/addon">New Domain</a>
</li>
<li>
<a title="Redirects" class="visibility-on" href="/domains/redirects">Redirects</a>
</li>
</ul>
</li>
<li>
<a title="Website" class="icon-5" href="/website">Website</a>
<ul>
<li>
<a title="Statistics" class="visibility-on" href="/website/stats">Statistics</a>
</li>
<li>
<a title="Latest Visitors" class="visibility-on" href="/website/latest-visitor-report">Latest Visitors</a>
</li>
<li>
<a title="Error Pages" class="visibility-on" href="/website/error-pages">Error Pages</a>
</li>
<li>
<a title="Analyze Website" class="visibility-on" href="http://hosting.1pagerank.com/msdhosting.co.uk" target="_blank">Analyze Website</a>
</li>
<li>
<a title="Import Website" class="visibility-on" href="/website/import">Import Website</a>
</li>
<li>
<a title="Import Database" class="visibility-on" href="/website/database-import">Import Database</a>
</li>
<li>
<a title="Website Templates" class="visibility-on" href="/website/website-templates">Website Templates</a>
</li>
<li>
<a title="Script Installer" class="visibility-on" href="/website/auto-installer">Script Installer</a>
</li>
<li>
<a title="Website Builder" class="visibility-on" href="/website/builder" target="_blank">Website Builder</a>
</li>
<li>
<a title="Zyro Builder" class="visibility-on" href="/website/zyro-builder" target="_blank">Zyro Builder</a>
</li>
</ul>
</li>
<li>
<a title="Advanced" class="icon-6" href="/advanced">Advanced</a>
<ul>
<li>
<a title="DNS Zone Editor" class="visibility-on" href="/advanced/dns-zone-editor">DNS Zone Editor</a>
</li>
<li>
<a title="PHP Configuration" class="visibility-on" href="/advanced/phpinfo">PHP Configuration</a>
</li>
<li>
<a title="PHP Version" class="visibility-on" href="/advanced/php-configuration">PHP Version</a>
</li>
<li>
<a title="SSH Console" class="visibility-on" href="/advanced/ssh-console">SSH Console</a>
</li>
<li>
<a title="MySQL Databases" class="visibility-on" href="/advanced/mysql-databases">MySQL Databases</a>
</li>
<li>
<a title="phpMyAdmin" class="visibility-on" href="/advanced/phpmyadmin">phpMyAdmin</a>
</li>
<li>
<a title="Cron Jobs" class="visibility-on" href="/advanced/cronjobs">Cron Jobs</a>
</li>
<li>
<a title="Cron Output" class="visibility-on" href="/advanced/cron-output">Cron Output</a>
</li>
</ul>
</li>
<li>
<a title="Other" class="icon-7" href="/other">Other</a>
<ul>
<li>
<a title="Password Protect Directories" class="visibility-on" href="/other/password-protect-dirs">Password Protect Directories</a>
</li>
<li>
<a title="IP Deny Manager" class="visibility-on" href="/other/ip-deny">IP Deny Manager</a>
</li>
<li>
<a title="Hotlink Protection" class="visibility-on" href="/other/hotlink-protection">Hotlink Protection</a>
</li>
<li>
<a title="Folder Index Manager" class="visibility-on" href="/other/folder-index-manager">Folder Index Manager</a>
</li>
<li>
<a title="Fix File Ownership" class="visibility-on" href="/other/fix-file-ownership">Fix File Ownership</a>
</li>
<li>
<a title="Reset Account" class="visibility-on" href="/other/reload-account">Reset Account</a>
</li>
</ul>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
Thanks for you're time, I would post a link to the real thing, but it seems that is not praised on here...
Within your loop you're setting e.preventDefault() on each link's click event, preventing the click from doing anything:
var btn = $(this).children("a").first();
...
btn.click(function(e) {
e.preventDefault();
...
}
You're calling this on every single a element within your .nav-left list. I don't really know what your desired result is, but if you remove that the links will now function as normal, but the page will change and your click function will have no effect on the new page.
Edit: From comments:
Would you be able to adapt it so that when a parent <a> that doesn't have a <ul> inside is clicked, the link works, and when the parent <a> does have a <ul>, the e.preventDefault(); is enforced on the parent <a>?
Yes, simply add a check around the click function to see whether the a element has a ul element next to it:
if (btn.next('ul').length) {
btn.click(function(e) {
...
}
}