I have created a tree view by using li and ul format (not using TreeView control). I want to expand all nodes using JavaScript. Please help me.
My CSS for tree view is as below:
#sitemap, #sitemap ul, #sitemap li
{
margin: 0;
padding: 0;
list-style: none;
}
#sitemap
{
background: url(../content/images/line1.gif) repeat-y;
}
#sitemap li
{
line-height: 20px;
margin-top: 1px;
position: relative;
width: 100%;
}
/* IE leaves a blank space where span is added so this is to avoid that */#sitemap li
{
float: left;
display: inline;
}
#sitemap li a
{
padding-left: 3px;
}
#sitemap li a.but
{
padding: 1px;
border: solid 1px #c0c0c0;
color: #080808;
font-size: 7pt;
margin: 2px;
font-weight: normal;
background-color: #efefef;
}
#sitemap li a.butGroup
{
padding: 2px;
border: solid 1px #888;
color: #080808;
font-size: 7pt;
margin: 2px;
background-color: #efefef;
font-weight: bold;
}
#sitemap li span
{
float: left;
position: absolute;
top: 5px;
left: 5px;
width: 13px;
height: 13px;
cursor: auto;
font-size: 0;
}
#sitemap li span, #sitemap li span.collapsed
{
background: url(../content/images/collapsed.gif) no-repeat 0 0;
}
#sitemap li span.expanded
{
background: url(../content/images/expanded.gif) no-repeat 0 0;
}
#sitemap li span.dot
{
background: url(../content/images/line2.gif) no-repeat -5px -5px;
}
#sitemap li ul
{
margin-left: 25px;
display: block;
clear: both;
background: #fff url(../content/images/line1.gif) repeat-y;
}
#sitemap li li
{
background: url(../content/images/line2.gif) no-repeat 0 0;
}
#sitemap, #sitemap ul
{
min-height: 1%;
}
#sitemap:after, #sitemap ul:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#sitemap, #sitemap ul
{
display: block;
}
#sitemap ul
{
display: none;
}
#sitemap li div.butHolder
{
clear: both;
margin: 10px 3px 3px 30px;
}
#sitemap li input[type=text]
{
width: 25px;
padding: 2px;
height: 14px;
border: solid 1px #888;
text-align: center;
}
div.LinkGroup
{
width: 95%;
margin-left: 20px;
text-align: left;
border: solid 1px #efefef;
background-color: #fcfcfc;
}
div.LinkGroup div
{
padding: 2px 1px 2px 1px;
font-size: 8pt;
}
div.TR
{
width: 100%;
margin-left: 20px;
text-align: left;
clear: both;
}
div.TR div.TH, div.TR div.TD
{
float: none;
min-width: 50px;
white-space: nowrap;
padding: 3px;
}
JavaScript:
$(document).ready
(function () {
if ($("#sitemap").length > 0) {
$("#sitemap").find("li").each
(
function () {
var $span = $("<span></span>");
$(this).toggleClass("expanded");
if ($(this).find("ul:first").length > 0) {
$(this).find("ul:first").css("display", "none");
$span.attr("class", "collapsed");
//
//if more link clicks of "Manage Links" page functionality than show it expanded.
//or delete the element show parent menu expanded
//
if (jQuery.trim($(this).find("ul:first").css("content")).indexOf('expanded') > -1) {
$span.removeAttr("class");
$span.attr("class", "expanded");
$(this).find("ul:first").css("display", "block");
}
$span.click(function () {
$(this).toggleClass("expanded");
$(this).parent("li").find("ul:first").slideToggle("normal");
}
)
$(this).append($span);
}
else {
$span.removeAttr("class");
$span.attr("class", "dot");
$(this).append($span);
}
}
)
}
}
)
////HtML STructure
<ul id="sitemap">
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' id='module_1' class='module' moduleid='1' />
Start Configurations</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_1' class='child' id='menu_1' moduleid='1' parent='0'
checked='checked' />
Customer Registration</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_9' class='child' id='menu_9' moduleid='1' parent='0'
checked='checked' />
Configure Project</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_10' class='child' id='menu_10' moduleid='1' parent='9'
checked='checked' />
Search Customer</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_12' class='child' id='menu_12' moduleid='1' parent='9'
checked='checked' />
Test</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_13' class='child' id='menu_13' moduleid='1' parent='12'
checked='checked' />
Test_Child</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_14' class='child' id='menu_14' moduleid='1' parent='12'
checked='checked' />
Test_Child2</div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' id='module_2' class='module' moduleid='2' />
Edit Configuration</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_3' class='child' id='menu_3' moduleid='2' parent='0'
checked='checked' />
Edit Configuration</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_11' class='child' id='menu_11' moduleid='2' parent='0'
checked='checked' />
Edit Customer Deatils</div>
</div>
</li>
</ul>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' id='module_3' class='module' moduleid='3' />
Administration</div>
</div>
<ul style='display: none;'>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_4' class='child' id='menu_4' moduleid='3' parent='0'
checked='checked' />
Project Stage</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_5' class='child' id='menu_5' moduleid='3' parent='0'
checked='checked' />
Module Management</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_6' class='child' id='menu_6' moduleid='3' parent='0'
checked='checked' />
Question Management</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_7' class='child' id='menu_7' moduleid='3' parent='0'
checked='checked' />
Access Group</div>
</div>
</li>
<li>
<div class='TR'>
<div class='TH'>
<input type='checkbox' name='menu_8' class='child' id='menu_8' moduleid='3' parent='0'
checked='checked' />
User Creation</div>
</div>
</li>
</ul>
</li>
</ul>
//Expanding
<script type="text/javascript">
function fun1() {
if ($("#sitemap").length > 0) {
$("#sitemap").find("li").each
(
function () {
var $span = $("<span></span>");
//$(this).toggleClass("expanded");
if ($(this).find("ul:first").length > 0) {
$span.removeAttr("class");
$span.attr("class", "expanded");
$(this).find("ul:first").css("display", "block");
$(this).append($span);
}
}
)
}
}
</script>
//Collapsing
<script type="text/javascript">
function fun() {
if ($("#sitemap").length > 0) {
$("#sitemap").find("li").each
(
function () {
var $span = $("<span></span>");
if ($(this).find("ul:first").length > 0) {
$(this).find("ul:first").css("display", "none");
$span.attr("class", "collapsed");
$(this).append($span);
}
}
)
}
}
</script>
Related
Created shopping cart using html classes and added functionalities to them using javascript and now i wanted to save the cart details like product name, price,total to phpmysql database
I have written the code in php for connecting my shopping cart with database but its not working
--html page
<html>
<head>
<title>Fruits & Vegetables</title>
<link rel="stylesheet"type="text/css"href="FVc.css">
</head>
<body>
<Style>body {background-image: url('image1.jpg');background-repeat: no-repeat;backgroung-attachment:fixed;background-size:cover;}</style><div class="container">
<div class="screen-togo">
<h2>To Go Menu</h2>
<ul class="menu-items">
<!-- Menu Item 1 -->
<li class="menu-item">
<img src="potato.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">potato</p>
<p class="g-price">RS 30</p>
</div>
<button
class="add-button"
data-title="potato"
data-price="30">Add to Cart</button>
</li>
<!-- Menu Item 2 -->
<li class="menu-item">
<img src="onion.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">onion</p>
<p class="g-price">RS 40</p>
</div>
<button
class="add-button"
data-title="onion"
data-price="40">Add to Cart</button>
</li>
<!-- Menu Item 3 -->
<li class="menu-item">
<img src="capsicum.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">capsicum</p>
<p class="g-price">RS 20</p>
</div>
<button
class="add-button"
data-title="capsicum"
data-price="20">Add to Cart</button>
</li>
<!-- Menu Item 4 -->
<li class="menu-item">
<img src="brinjal.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">brinjal</p>
<p class="g-price">RS 15</p>
</div>
<button
class="add-button"
data-title="brinjal"
data-price="15"
>Add to Cart</button>
</li>
<!-- Menu Item 5 -->
<li class="menu-item">
<img src="tomato.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">tomato</p>
<p class="g-price">RS 50</p>
</div>
<button
class="add-button"
data-title="tomato"
data-price="50">Add to Cart</button>
</li>
<!-- Menu Item 6 -->
<li class="menu-item">
<img src="apple.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">apple</p>
<p class="g-price">RS 200</p>
</div>
<button
class="add-button"
data-title="apple"
data-price="200">Add to Cart</button>
</li>
<!-- Menu Item 7 -->
<li class="menu-item">
<img src="banana.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">banana</p>
<p class="g-price">RS 120</p>
</div>
<button
class="add-button"
data-title="banana"
data-price="120">Add to Cart</button>
</li>
<!-- Menu Item 8 -->
<li class="menu-item">
<img src="pomegrenate.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">pomegrenate</p>
<p class="g-price">RS 300</p>
</div>
<button
class="add-button"
data-title="pomegrenate"
data-price="300">Add to Cart</button>
</li>
<!-- Menu Item 9 -->
<li class="menu-item">
<img src="guava.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">guava</p>
<p class="g-price">RS 80</p>
</div>
<button
class="add-button"
data-title="guava"
data-price=" 80">Add to Cart</button>
</li>
<!-- Menu Item 10 -->
<li class="menu-item">
<img src="mango.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">mango</p>
<p class="g-price">RS 60</p>
</div>
<button
class="add-button"
data-title="mango"
data-price="60">Add to Cart</button>
</li>
<!-- Menu Item 11 -->
<li class="menu-item">
<img src="grapes.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">grapes</p>
<p class="g-price">RS 40</p>
</div>
<button
class="add-button"
data-title="grapes"
data-price="40">Add to Cart</button>
</li>
<!-- Menu Item 12 -->
<li class="menu-item">
<img src="papapya.jpg" class="menu-image">
<div class="menu-item-dets">
<p class="menu-item-heading">papapya</p>
<p class="g-price">RS 55</p>
</div>
<button
class="add-button"
data-title="papapya"
data-price="55">Add to Cart</button>
</li>
</div>
<div class="screen-cart">
<h2>Your Cart</h2>
<!-- Cart Items -->
<ul class="cart-items">
</ul>
<div class="cart-math">
<p>Add items to cart</p>
</div>
<b>Back</b>
<button style="background-color:#87CEFA" align =right>OrderNow</button>
</div>
</div>
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js></script>
<script src="Fruits.js"></script>
</body>
</html>
--css code
body {
background-image: url('../img/background.webp');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
font-family: "Poppins", sans-serif;
}
h2, .g-price {
font-size: 32px;
font-weight: 700;
margin-bottom: 50px;
}
.g-price {
margin: 8px 0;
}
.container {
width: 90%;
max-width: 780px;
margin: 0 auto;
padding: 70px 0;
display: flex;
justify-content: space-between;
}
#media (max-width: 950px) {
.container {
display: block;
}
}
.screen-togo, .screen-cart {
width: 375px;
max-height: 750px;
overflow: scroll;
border-radius: 25px;
background: white;
padding-top: 30px;
padding-left: 30px;
margin: 20px;
box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.1);
}
ul {
padding: 0;
list-style: none;
}
.menu-item {
background: #E4F0FD;
border-radius: 20px 0 0 20px;
margin: 30px 0;
padding-top: 15px;
padding-right: 30px;
padding-bottom: 10px;
position: relative;
}
.menu-item:nth-child(2n) {
background: #FBE4F0;
}
.menu-item:nth-child(3n) {
background: #F7F7FE;
}
.menu-item:nth-child(4n) {
background: #E4FDF1;
}
.menu-item img {
width: 150px;
position: absolute;
top: -20px;
left: -20px;
}
.menu-item .add-button {
position: absolute;
border: none;
background: #6B00F5;
padding: 6px 20px 4px;
border-radius: 20px;
color: white;
font-weight: 700;
font-size: 16px;
bottom: -10px;
left: 150px;
transition: all 0.3s;
}
.menu-item .add-button:hover {
background: #5815AE;
}
.menu-item-dets {
margin-left: 150px;
padding-bottom: 15px;
}
.menu-item-heading {
font-size: 18px;
margin: 10px 0 12px;
}
.screen-cart {
padding-right: 30px;
}
#keyframes fadeIn {
from {
opacity: 0;
transform: translate(10px);
}
to {
opacity: 1;
transform: translate(0);
}
}
.cart-item {
display: flex;
align-items: flex-start;
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 1px solid #D7D7F9;
animation: fadeIn 0.3s;
}
.cart-item:last-child {
border-bottom: 5px solid #D7D7F9;
}
.cart-item img {
width: 30px;
}
.cart-item .g-price {
font-size: 24px;
}
.cart-item-dets {
margin-left: 15px;
width: 100%;
}
.cart-item-heading {
margin: 10px 0;
}
.cart-math-item {
margin: 5px 0;
font-weight: 700;
}
.cart-math-item span {
display: inline-block;
text-align: right;
}
.cart-math-item .cart-math-header {
width: 50%;
}
.cart-math-item .g-price {
width: 40%;
}
--javascript code
let subtotal = 0;
const calculateTax = subtotal => {
const tax = subtotal * 0.13;
const formattedTax = tax.toFixed(2);
return formattedTax;
};
const calculateTotal = subtotal => {
const tax = calculateTax(subtotal);
const total = parseFloat(subtotal) + parseFloat(tax);
const formattedTotal = total.toFixed(2);
return formattedTotal;
};
const getImgLink = title => {
let imgLink;
switch (title) {
case 'potato':
imgLink = 'potato.jpg';
break;
case 'onion':
imgLink = 'onion.jpg';
break;
case 'capsicum':
imgLink = 'capsicum.jpg';
break;
case 'brinjal':
imgLink = 'brinjal.jpg';
break;
case 'tomato':
imgLink = 'tomato.jpg';
break;
case 'apple':
imgLink = 'apple.jpg';
break;
case 'banana':
imgLink = 'banana.jpg';
break;
case 'mango':
imgLink = 'mango.jpg';
break;
case 'pomegrenate':
imgLink = 'pomegrenate.jpg';
break;
case 'guava':
imgLink = 'guava.jpg';
break;
case 'grapes':
imgLink = 'grapes.jpg';
break;
case 'papapya':
imgLink = 'papapya.jpg';
break;
default:
imgLink = 'potato.jpg';}
return imgLink;
};
$('.add-button').on('click', function () {
const title = $(this).data('title');
const price = $(this).data('price');
const imgLink = getImgLink(title);
const element = `
<li name=cart class="cart-item">
<img src="${imgLink}" alt="${title}">
<div class="cart-item-dets">
<p class="cart-item-heading">${title}</p>
<p class="g-price">Rs${price}</p>
</div>
</li>
`;
$('.cart-items').append(element);
subtotal = subtotal + price;
const formattedSubtotal = subtotal.toFixed(2);
const tax = calculateTax(subtotal);
const total = calculateTotal(subtotal);
$('.cart-math').html(`
<p class="cart-math-item">
<span class="cart-math-header">Subtotal:</span>
<span class="g-price subtotal">${formattedSubtotal}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Tax:</span>
<span class="g-price tax">${tax}</span>
</p>
<p class="cart-math-item">
<span class="cart-math-header">Total:</span>
<span class="g-price total">Rs${total}</span>
</p>
`);
});
--php code
<?php
session_start();
$host="localhost";
$user="root";
$password="abc";
$db_name="gsd";
$con = mysqli_connect($host, $user, $password, $db_name);
$LoginId=$_SESSION['id'];
$Category=$_GET['id'];
$TotalAmt = "10";
$NoItem = "2";
echo $LoginId;
echo $Category;
if($_POST['OrderNow'])
{
echo "T";
echo $s="insert into MyOrder(LoginId,Category,TotalAmt,NoItem)values('$LoginId','$Category','$TotalAmt','$NoItem')";
echo"Order Placed Successfull";
header('Refresh:50; URL=http://localhost/consumer_dashboard.php');
if (mysqli_query($con,$s)){
echo"data inserted";
}
else{
echo"error";}
}
?>
Use an AJAX request to send the cart data to the server.
You'll need to do some JSON encoding/decoding in your JS and PHP on the data.
Should be enough to get you started.
I compose a part of the code of my project here to report the problem I am facing. I need to keep the js function to work the links that I put in the top bar.
$(function () {
function setFlatTheme() {
$("body").toggleClass("flat-theme");
$("#rad-color-opts").toggleClass("hide");
$(".rad-chk-pin input[type=checkbox]").prop("checked", true);
}
setFlatTheme();
$(document).on("click", function (e) {
e.preventDefault();
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
}
});
$("li.rad-dropdown > a.rad-menu-item").on("click", function (e) {
e.preventDefault();
e.stopPropagation();
$(".rad-dropmenu-item").removeClass("active");
$(this).next(".rad-dropmenu-item").toggleClass("active");
});
});
.links > li {
list-style: none;
position: relative;
margin: 10px;
display: inline-block;
}
.rad-dropmenu-item.active {
display: block;
-webkit-animation: flipInX 1s ease;
}
.rad-notification-body {
color: black;
vertical-align: middle;
margin-left: 30px;
}
.rad-logo-container {
width: 225px;
text-align: center;
height: 50px;
float: left;
transition: all 0.2s ease-in-out;
}
.rad-menu-item {
position: relative;
padding: 0 5px;
line-height: 30px;
height: 30px;
color: #89949B;
z-index: 5;
display: inline-block;
}
.rad-dropmenu-item {
position: absolute;
right: -6px;
top: 45px;
min-width: 250px;
background: white;
border: 1px solid #BDBDBD;
border-top: 5px solid #515d6e;
border-radius: 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
display: none;
}
.rad-chk-pin span {
display: inline-block;
position: relative;
height: 20px;
width: 40px;
border-radius: 4px;
background: crimson;
border: 1px solid #f6f6f6;
}
.rad-chk-pin span:after {
content: "";
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 4px;
top: -1px;
left: 0px;
box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.2s ease;
}
.rad-chk-pin input {
display: none;
}
.rad-chk-pin input:checked + span {
background: #23AE89;
}
.rad-chk-pin input:checked + span:after {
left: 19px;
}
.rad-color-swatch {
display: table;
width: 90px;
height: 25px;
border-radius: 4px;
}
.rad-color-swatch .colors {
width: 25px;
height: 25px;
display: table-cell;
cursor: pointer;
}
.rad-color-swatch .colors input[type=radio] {
display: none;
}
.rad-color-swatch .colors:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.rad-color-swatch .colors:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.rad-sidebar.rad-nav-min {
width: 65px !important;
}
#media screen and (max-width: 850px) {
.rad-navigation {
height: 100px;
}
.rad-logo-container.rad-nav-min + .rad-logo-hidden {
display: none;
}
.rad-logo-container {
display: block;
float: none;
width: 100%;
border-bottom: 1px solid #F2F2F2;
}
.rad-top-nav-container {
display: block;
float: none;
height: 50px;
background: white;
}
.rad-sidebar.rad-nav-min {
transform: translate3d(-200px, 0, 0);
}
}
.flat-theme .rad-navigation .rad-top-nav-container .links > li > a {
border-radius: 50%;
width: 32px;
height: 32px;
background: #f6f6f6;
display: inline-block;
line-height: 32px;
}
.rad-bg-purple {
background: rebeccapurple;
}
.rad-bg-twitter {
background: #55acee;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.3/jquery.slimscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<body>
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container rad-nav-min">
<span class="letra">xxxxxxxxxxxxxx xxxxxxxxxxxx </span>
<i class="fa fa-bars acertobar"></i>
</div>
xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx
<div class="rad-top-nav-container">
<ul class="pull-right links">
<li class="rad-dropdown no-color">
<a class="rad-menu-item" id="verificar" href="#"><img class="rad-list-img sm-img acerto" src="<?php echo $_SESSION['image'] ?>" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="https://gestao.centropadreangelo.pt"><i class="fa fa-edit"></i> Perfil</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</li>
<li class="rad-dropdown"><a id="verificar" class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header">Definições</li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="rad-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="rad-notification-body">
<div class="lg-text">Mudar para tema plano</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson rad-option-selected">
<input type="radio" checked name="color" value="crimson" />
</label>
<label class="colors rad-bg-teal">
<input type="radio" name="color" value="teal" />
</label>
<label class="colors rad-bg-purple">
<input type="radio" name="color" value="purple">
</label>
<label class="colors rad-bg-orange">
<input type="radio" name="color" value="orange" />
</label>
<label class="colors rad-bg-twitter">
<input type="radio" name="color" value="twitter" />
</label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Escolha uma cor</div>
<div class="sm-text">Torne-o colorido</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<span class="letra1">xxxxx xxxxxxx xxxxxxxx</span>
</li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt" class="inbox">
<i class="fa fa-home acerto"><span class="icon-bg"></span></i>
<span class="rad-sidebar-item">HOME</span>
</a>
</li>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt/xxx.php" class="inbox">
<i class="fa fa-user">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">INSCRIÇÃO</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
<form class="steps" id="inscricao" accept-charset="UTF-8" enctype="multipart/form-data" novalidate="">
<label for="validade" Style="margin-top: 10%;">Data de Validade </label>
<input id="validade" name="validade" type="date" >
</form>
</main>
</body>
But when you put this function, you stop opening the calendar in the input with the date type. If you remove the function, the calendar of the input already works. But when I remove the function, I’m unable to close the links on the top bar.
Can you help solve this problem?
You can shift the preventDefault() inside the if condition. So that the click default action is prevented only if the menu is opened. As per your current code, what happens is that It is capturing all click events on document and then preventing the event trigger always. So the datepicker is not able to catch the click event on calender and the calender never opens. With the following modification, now the click event will only get prevented when the menu is open.
$(function () {
$(document).on("click", function (e) {
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
e.preventDefault();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container rad-nav-min">
<span class="letra">xxxxxxxxxxxxxx xxxxxxxxxxxx </span>
<i class="fa fa-bars acertobar"></i>
</div>
xxxxxxxxxx xxxxxxxxxx xxxxxxxxxxxx
<div class="rad-top-nav-container">
<ul class="pull-right links">
<li class="rad-dropdown no-color">
<a class="rad-menu-item" id="verificar" href="#"><img class="rad-list-img sm-img acerto" src="<?php echo $_SESSION['image'] ?>" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="https://gestao.centropadreangelo.pt"><i class="fa fa-edit"></i> Perfil</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</li>
<li class="rad-dropdown"><a id="verificar" class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header">Definições</li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="rad-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="rad-notification-body">
<div class="lg-text">Mudar para tema plano</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson rad-option-selected">
<input type="radio" checked name="color" value="crimson" />
</label>
<label class="colors rad-bg-teal">
<input type="radio" name="color" value="teal" />
</label>
<label class="colors rad-bg-purple">
<input type="radio" name="color" value="purple">
</label>
<label class="colors rad-bg-orange">
<input type="radio" name="color" value="orange" />
</label>
<label class="colors rad-bg-twitter">
<input type="radio" name="color" value="twitter" />
</label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Escolha uma cor</div>
<div class="sm-text">Torne-o colorido</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<span class="letra1">xxxxx xxxxxxx xxxxxxxx</span>
</li>
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt" class="inbox">
<i class="fa fa-home acerto"><span class="icon-bg"></span></i>
<span class="rad-sidebar-item">HOME</span>
</a>
</li>
<li>
<a href="https://xxxxxxxxxxxxxxxxxxxxxxxxxx.pt/xxx.php" class="inbox">
<i class="fa fa-user">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">INSCRIÇÃO</span>
</a>
</li>
<li>
<a href="#" class="inbox">
<i class="fa fa-power-off">
<span class="icon-bg"></span>
</i>
<span class="rad-sidebar-item">Terminar Sessão</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
<div class="hs_firstname field hs-form-field">
<label for="validade">Data de Validade <span style="color: red;">*</span></label>
<input id="validade" name="validade" required="required" type="date" value="<?php echo $validade; ?>" placeholder="" data-rule-required="true" data-msg-required="Campo obrigatório" >
<span class="error1" style="display: none;">
<i class="error-log fa fa-exclamation-triangle"></i>
</span>
</div>
</main>
</body>
$(document).on("click", function (e) {
e.preventDefault(); //<-- THIS HERE
When you click anywhere on the document, that click will be caught and the default action (like opening the date picker) will be prevented.
I suggest that instead of calling the .on() function on the entire document you limit it only to the part where your links are i.e.
$(".rad-navigation").on("click", ....
(this selects the .rad-navigation class)
This a part of the entire project. The primary requirement is to load the <div> upon link click. I'm able to achieve it using the jquery script. The loads perfectly and other sibling div hided, but it scrolls to the top of the page. My page has many two sections with <div> loading in them. Is there a possibility to modify the jquery to set page scroll the loaded <div> onclick. I tried to use focus() and event.preventdefault(). But I'm not able to get it to work.
Here is the design of the page. WEBPAGE DESIGN.
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("fast");
});
});
#header {
background-color:#A4E2F4;
color:Black;
text-align:center;
padding:20px;
}
input, textarea{
background-color:#B7F9EB;
color: Black;
}
textarea {
border-radius: 6px;
border: 1px solid Black;
outline: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline-block;
}
ul2 {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #9B9A9A;
display: inline-block;
}
li1 {
float: left;
border-right: 1px solid #bbb;
}
li1 a {
display: block;
color: white;
text-align: center;
padding: 12px 16px;
text-decoration: none;
}
li1 a:hover {
background-color: #111;
color: white;
}
#section {
width:auto;
height:auto;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
float:center;
padding:30px;
}
#section2 {
width:auto;
height:auto;
font-family: Arial, Helvetica, sans-serif;
font-size:18px;
float:center;
padding:30px;
background-color:#eeeeee;
}
/* Vertical nav bar */
vl {
list-style-type: none;
line-height:30px;
float: left;
height:auto;
width: 200px;
background-color: #EEEEEE;
padding: 10px;
}
li2 a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li2 a:hover {
background-color: #555;
color: white;
}
li3 a {
display: block;
color: #000;
padding: auto;
width: auto;
text-decoration: none;
}
li3 a:hover {
color: blue;
}
/* End of nav bar */
#footer {
Width:auto;
background-color:#F2F2F2;
color:Black;
clear:both;
text-align:center;
padding:4px;
}
<TABLE>
<center>
<ul>
<li1><a href="#" name="div100" >MAIN1</a></li1>
<li1><a href="#" name="div200" >MAIN2</a></li1>
</UL>
<UL2>
<div id="div100" style="display:none" align="left">
<li1><a href="#" name="div1" >SUBMAIN1</a></li1>
<li1><a href="#" name="div3" >SUBMAIN2</a></li1>
<li1><a href="#" name="div5" >SUBMAIN3</a></li1>
</div>
<div id="div200" style="display:none" align="left">
<li1><a href="#" name="div9" >SUBMAIN4</a></li1>
<li1><a href="#" name="div10" >SUBMAIN5</a></li1>
<li1><a href="#" name="div11" >SUBMAIN6</a></li1>
</UL2>
</center>
<center>
<!-- Second Link Container -->
<div id="div1" style="display:none" align="left">
<div id="section">
</div>
<div id="section2">
<Center><B>SOME LINK LIST<h6><i>(Click on links below)</i></h6> </Center></B>
<li3><a href="#" name="l1" >1. link1</a></li3>
<li3><a href="#" name="l2" >2. link2</a></li3>
<li3><a href="#" name="l3" >3. Link3</a></li3>
<li3><a href="#" name="l4" >4. link4</a></li3>
</div>
</div>
<div id="div2" style="display:none" align="left">
<div id="section">
</div>
<div id="section2">
<Center><B>SOME LINK LIST<h6><i>(Click on links below)</i></h6> </Center></B>
<li3><a href="#" name="m1" >1. link1</a></li3>
<li3><a href="#" name="m2" >2. link2</a></li3>
<li3><a href="#" name="m3" >3. Link3</a></li3>
<li3><a href="#" name="m4" >4. link4</a></li3>
</div>
</div>
</center>
<!-- Bootstrap Modal Div -->
<!-- modals goes here-->
<!-- Main Container -->
<center>
<div id="section">
<div id = "l1" style="display:none" align="left">
<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport"> Football</label>
<label>
<input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport"> Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
<button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button>
</div><!-- closing blank div -->
<div id = "l2" style="display:none" align="left">
<form>
<h3>Select your favorite sports:</h3>
<label>
<input type="checkbox" value="football" name="sport"> Football</label>
<label>
<input type="checkbox" value="baseball" name="sport"> Baseball</label>
<label>
<input type="checkbox" value="cricket" name="sport"> Cricket</label>
<label>
<input type="checkbox" value="boxing" name="sport"> Boxing</label>
<label>
<input type="checkbox" value="racing" name="sport"> Racing</label>
<label>
<input type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<button type="button">Get Values</button>
</form>
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button>
<button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button>
</div><!-- closing blank div -->
<!--- Code goes on -->
Add $(this).scrollTop($("#" + divName);
to your function.
var elem = $("#"+divname);
$('html, body').animate({
scrollTop: elem.offset().top;
}, 800);
$().ready(function() {
// Case : 1
$("li.products").hover(function() {
$(this).parents(".cotnainer-fluid").next().toggleClass("show");
//$("#category-list").css("opacity","1 !important");
});
})
div.banner {
width: 100%;
height: 379px;
}
div.banner>.row {
padding: 0 35px;
}
/* .menu{
background: transparent;
opacity: 0.5;
} */
.menu {
margin-right: 0;
margin-left: 0;
}
#menu-items {
background: #121212;
opacity: 0.7;
}
#menu-items {
padding: 22px;
margin: 0 25px;
text-align: center;
border-radius: 0 0 4px 4px;
}
ul#menu-items li {
list-style: none;
display: inline;
color: #939598;
font: normal 12px/16px Gotham-Medium;
}
ul#menu-items li a {
padding-bottom: 20px;
}
ul#menu-items li>a:hover {
color: #fff;
border-bottom: 4px solid #76bd1c;
}
li.item {
padding: 25px;
}
li.search {
margin-left: 145px;
}
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
/*
margin-top: -380px;
*/
background-color: #f7f6f5;
position: relative;
top: -380px;
z-index: -1;
display: none;
}
.show {
display: block;
}
/* li.products:hover #category-list{
display: block;
} */
#category-list ul li {
list-style: none;
display: inline-block;
}
.category-menu {
padding-top: 80px;
}
.category-menu {
font: normal 12px/16px Gotham-Medium;
color: #603913;
}
#category-menu-items {
margin-top: 5px;
}
#category-menu-items li {
text-align: center;
}
.padding-left60 {
padding-left: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<srcipt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<div class="cotnainer-fluid" style="margin-top: 40px;">
<div class="banner">
<div class="row menu">
<ul id="menu-items">
<li class="item">HOME
</li>
<li class="item">ABOUT US
</li>
<li class="item products dropdown">PRODUCTS
</li>
<li class="item">STORE
</li>
<li class="item">CONTACT
</li>
<li class="item">LOGIN
</li>
<li class="item search"><i class="search-icon-header" style="font-size: 16px;"></i>
</li>
<li class="item basket"><i class="glyphicon glyphicon-shopping-cart" style="font-size: 16px;"></i>
</li>
</ul>
</div>
<h1 class="page-title">Some Title</h1>
</div>
</div>
<!-- End Nav items -->
<div id="category-list">
<div class="row category-menu">
<ul id="category-menu-items">
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biopesticides.png" alt="">
</p>
<p>BIOPESTIDES</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-nutrients.png" alt="">
</p>
<p>NUTRIENTS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biofertilizers.png" alt="">
</p>
<p>BIOFERTILIZERS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-seeds.png" alt="">
</p>
<p>SEEDS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-garden_Acc.png" alt="">
</p>
<p>GARDEN ACCESSORIES</p>
</a>
</li>
</ul>
</div>
</div>
I have a list of items in navbar, now on hovering on one of the list items i want to display a hidden div which contains another list of items which should be clickable.
In the above code, When I hover on PRODUCTS link; a div shows up. Now, I want to click on items in this div!!!!
I guess I need to check for hasClass('show'), and if so then i should be able to hover and click on the div items.
Any suggestions or help on how to move forward with this?
Priority of ID selector is higher than class selector.
Ref.
//Make sure this style is overwrite the style of #category-list
#category-list.show{
display: block;
}
Replace the style with the below one and try and adjust the position using top of category list
<style>
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
background-color: #f7f6f5;
position: absolute;
/*top: -380px;*/
z-index: -1;
display: none;
}
#category-list ul li {
list-style: none;
display: inline-block;
}
.show {
display: block !important;
}
Did some work in that jsfiddle.
// Show sub-menu with jQuery
$("ul#menu-items li.products a, ul#menu-items li.products").hover(function(){
console.log("show sub menu");
$("#category-list").show();
});
// Hide sub-menu with jQuery
$("body *").not("#menu-items, li.products, li.products a, #category-list, #category-list *, #category-menu-items, div.categories").hover(function(){
console.log($(this)); // Log the elements that triggers hide of sub menu
$("#category-list").hide();
});
Don't know the pure CSS sub-menu technique yet.
https://jsfiddle.net/mantisse_fr/p1eupdo3/1/
Hi I'm designing a website with JQuery for the first time. I am using Twitter-Bootstrap for a dropdown login box and I can't get the JQuery script right to make the box stay open when you click on the text area. I've tried everything and I am familiar with java script. I placed the following:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"</script>
at the top of the header as well as before the closing body bracket, and the following in front of the closing body tag as well...
<script>$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});</script>
here is the HTML
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-info">
<li>Phone: 703-518-4325</li>
<li>Email: info#urbanare.com</li>
</ul>
<ul class="nav pull-right" id="top-buttons">
<li id="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="fa fa-sign-in"></i>Log in<strong class="caret"></strong></a></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 15px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
email: <input id="user_username" style="margin-bottom: 15px;" type="text" name="email" size="30" />
password: <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div></li>
<li class="divider"></li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
</ul>
</div>
</div>
</div>
</div>
and the CSS
#top-bar {
width: 100%;
min-height: 35px;
max-height: 35px;
font-size: 13px;
line-height: 35px;
background-color: #f1f3f6;
position: relative;
z-index: 1020;
}
#top-buttons{
line-height:10px !important;
}
#top-bar a {
color: #74777c;
}
#top-bar a:hover,
#top-bar a:focus {
color: #f58220;
text-decoration: none;
}
#dashboard-top-bar {
width: 100%;
min-height: 45px;
font-size: 13px;
line-height: 35px;
background-color: #f1f3f6;
position: relative;
z-index: 1020;
}
#dashboard-top-bar a {
color: #74777c;
}
#dashboard-top-bar a:hover,
#dashboard-top-bar a:focus {
color: #f58220;
text-decoration: none;
}
#top-info,
#top-buttons {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#top-info,
#top-buttons li {
display: inline-block;
margin-left: 25px;
}
#top-buttons {
float: right;
}
#top-buttons .divider {
position: relative;
border-left: 1px solid #74777c;
width: 1px;
height: 22px;
overflow: hidden;
margin-bottom: -6px;
}
You don't need any jquery to do this. include bootstrap.js and bootstrap.css then
Try this code.
Ex:- JS FIDDLE
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-info">
<li>Phone: 703-518-4325</li>
<li>Email: info#urbanare.com</li>
</ul>
<ul class="nav pull-right" id="top-buttons">
<li class="dropdown">
<i class="fa fa-sign-in"></i>Log in<strong class="caret"></strong></a>
<ul id="login-dp" class="dropdown-menu">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
email: <input id="user_username" style="margin-bottom: 15px;" type="text" name="email" size="30" />
password: <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</ul>
</li>
<li class="divider"></li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
</ul>
</div>
</div>
</div>
</div>