Newbie in JS / jQuery here.
First problem: When page is loading or it is refreshing whole sub-sub menus are blinked for like 0.5sec so they can "hide". I have put the script firstly on the end of "body" tag, but after this blink I've put it in "head" so is there any way to make it actually hide, like really hide, to not be shown when page is on load?
Second problem is when I'm clicking on either blue or green square menu is not sliding smoothly. It's like a bounce effect. Is it because of "hide"? And last problem is with slideDown function. Where shall I use slideUp to make it go back to the position where it hides?
jQuery(document).ready(function($)
{
$(".raid ul").hide();
$(".raid").hide();
$(".wod").one("click", function()
{
$(".wod ul li").slideDown(200);
});
$(".mop").one("click", function()
{
$(".mop ul li").slideDown(200);
});
$(".hfc").click(function()
{
$(".hfc").addClass('x');
$(".hfc ul").slideToggle(200);
});
$(".soo").click(function()
{
$(".soo ul").slideToggle(200);
});
});
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#progress
{
padding: 0;
float: left;
width: 200px;
height: inherit;
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
box-shadow: 2px 2px 2px 0px black;
background-repeat: no-repeat;
}
h1
{
margin-top: 8px;
border-bottom: 4px solid #00c99a;
padding-bottom: 4px;
}
.expansion
{
text-align-last: center;
width: inherit;
height: 108px;
}
.expansion:first-child
{
margin-top: -20px;
}
.mop, .wod
{
width: inherit;
height: inherit;
}
.wod > ul
{
margin-top: 90px;
}
.mop > ul
{
margin-top: 90px;
}
.wod
{
border-bottom: 5px solid black;
background-color: blue;
}
.mop
{
border-bottom: 5px solid black;
background-color: green;
}
.raid > ul
{
padding-bottom: 10px;
}
h3
{
font-size: 20px;
padding: 10px 0 10px 0;
}
.nhm
{
display: inline-block;
text-align: center;
padding: 4px 20px 1px 20px;
border: 2px solid white;
border-radius: 50px;
cursor: default;
color: white;
font-weight: 300;
}
.hfc-progress, .soo-progress,
{
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
cursor: default;
color: white;
}
.hfc, .soo
{
color: limegreen;
background-color: rgba(37, 65, 23, 0.5);
}
.hfc:hover, .soo:hover
{
cursor: pointer;
color: greenyellow;
}
.x
{
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="progress"><h1>Progress</h1>
<div id="expansion">
<ul>
<li class="expansion wod"><br />
<ul>
<li class="raid hfc"><h3>Hellfire Citadel ↓</h3>
<ul>
<li class="hfc-progress">Hellfire Assault
<ul>
<li class="nhm hfcn">N</li>
<li class="nhm hfch">H</li>
<li class="nhm hfcm">M</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="expansion mop"><br />
<ul>
<li class="raid soo"><h3>Siege of Orgrimmar↓</h3>
<ul>
<li class="soo-progress">Immerseus
<ul>
<li class="nhm soon">N</li>
<li class="nhm sooh">H</li>
<li class="nhm soom">M</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
If you really want the elements hidden, use CSS. The CSS can have properties like
.raid ul {
display: none;
}
.raid {
display: none;
}
instead of calling the hide() function in jQuery. This way, if you include the CSS in the head section and keep your JS in the bottom, the blink would not happen (because the browser would keep them hidden by default)
Related
I want to make an adaptive menu. The problem now is that in the desktop version, when you click on a menu item and its sub-items, it closes, and should only work while I am hovering over it. And in the mobile version with an adaptive less than 520px, it also closes when you click on a sub-menu item, and this is bad.
I need hover to work only in desktop version. Also I need a menu to not get closed after the click on the sub-items.
That also goes for mobile version.
$('.drop__down-menu').on('click', function(){
$(this).children('.drop__down-list').slideToggle();
});
.header__menu-inner {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.menu__header {
max-width: 750px;
}
.menu__header li {
display: inline-block;
}
.menu__header li + li {
margin-left: 30px;
}
.menu__header a {
font-size: 15px;
line-height: 42px;
text-transform: uppercase;
font-weight: 500;
color: #333;
}
.menu__header a:hover {
color: blue;
}
.drop__down-menu {
position: relative;
padding-bottom: 20px;
margin-top: 20px;
}
.drop__down-list {
display: none;
position: absolute;
top: 61px;
left: 0;
width: 270px;
background-color: #fff;
padding: 20px;
border-top: 1px solid blue;
color: #fff;
font-size: 15px;
box-shadow: 0px 5px 40px 0px rgba(82, 85, 90, 0.2);
border-top: 1px solid blue;
z-index: 2;
}
.drop__down-list li {
width: 100%;
}
.drop__down-list li + li {
margin-left: 0;
}
.drop__down-list li a {
display: block;
line-height: 44px;
padding: 0 10px;
text-transform: capitalize;
}
.drop__down-list li a:hover {
color: #fff;
background-color: blue;
}
.drop__down-menu:hover .drop__down-list {
display: block;
}
#media (max-width: 520px) {
.header__user-nav + .header__user-nav {
margin-left: 5px;
}
.menu__header {
margin-left: auto;
}
.menu__header a {
line-height: 30px;
}
.menu__header-btn {
width: 30px;
}
.menu__header-btn span {
height: 4px;
}
.menu__header-btn span + span {
margin-top: 3px;
}
.menu__header-list {
left: 0;
top: 56px;
}
.menu__header-list li {
display: block;
border-bottom: 1px solid #0c0c0c;
}
.menu__header-list li a {
display: block;
}
.menu__header li + li {
margin-left: 0;
}
.drop__down-list {
width: 100%;
}
.header__menu-inner {
min-height: 55px;
}
.drop__down-list {
padding: 0 12px;
top: 40px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrap">
<div class="content">
<header class="header">
<div class="header__menu-inner">
<nav class="menu__header">
<div class="menu__header-btn">
<span></span>
<span></span>
<span></span>
</div>
<ul class="menu__header-list">
<li class="drop__down-menu">
Home
<ul class="drop__down-list">
<li>Home One Multi User</li>
<li>Home Two Single User</li>
<li>Home Three Product</li>
</ul>
</li>
<li class="drop__down-menu">
All products
<ul class="drop__down-list">
<li>Recent Items</li>
<li>Popular Items</li>
<li>Featured Items</li>
</ul>
</li>
<li class="drop__down-menu">
Wordpress
<ul class="drop__down-list">
<li>Popular Items</li>
<li>Admin Templates</li>
<li>Blog / Magazine / News</li>
</ul>
</li>
<li>Festures</li>
<li class="drop__down-menu link__mega-menu">
<a class="drop__down-link" href="#">Pages</a>
</li>
</ul>
</nav>
</div>
</header>
</div>
</div>
<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I hope this answer helps you!
#media (min-width: 520px){
.drop__down-menu:hover .drop__down-list {
display: block;
}
I think you should adapt CSS style for mobile first.
then add #media (min-width: x) for large devices not inversely
I am working on a E-learning shiny web application which lets students learn R functions easily. The user should be able to drag and drop grids into the blanks provided to answer a particular question syntactically. I have written the HTML file, including the styling and javascript in it. I have used the includeHTML("index.html") function to include the HTML file to the ui.R part of the application. Now, I need to implement communication between the ui.R and server.R in such a way that when the user drags and drops all the grids in the desired blanks and clicks the "Submit" button, the concatenated version of the function needs to go to the server side, R interpreter needs to evaluate the statement and then send back the output which needs to be displayed to the user. How do I send the concatenated message from webpage to server.R? Evaluate the function? And how do I send back the output back to the web page?
Example: Q. Write a function in R for sum of two digits:
sum, diff, mean, median, etc
1,2,3,4,5...
( ) . , / : " ' { } [ ] ( )
My HTML, CSS and Javascript file is as follows:
E-learning 'R' The function for sum of any two digits in 'R' syntax is:
span { width: 50px; display: inline-block; height: 20px; background: #ffffff; }
body {
font: 13px Verdana;
background-color: grey;
}
ul.numbers {
list-style: none;
padding: 10px;
background: grey;
}
ul.symbols {
list-style: none;
padding: 10px;
background: grey;
}
ul.functions {
list-style: none;
padding: 10px;
background: grey;
}
ul.numbers li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #FFF706;
}
ul.symbols li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #18FC7A;
}
ul.functions li {
display: inline-block;
margin: 0 10px;
padding: 10px;
background: #FF99F7;
}
p {
padding: 10px;
color: black;
background-color: #0680FF;
}
answer span{
width: 100px;
}
.quiz-wrapper {
position: relative;
display: block;
width: 510px;
height: 450px;
}
.quiz-wrapper p.question-description {
background: #19286C;
color: white;
padding: 25px 20px;
}
.quiz-wrapper ul.options {
position: relative;
display: inline-block;
vertical-align: top;
width: 165px;
list-style: none;
border: 1px solid #19286C;
text-align: center;
padding: 0;
margin: 0;
}
.quiz-wrapper ul.options li {
border: 1px solid transparent;
padding: 6px 8px;
}
.quiz-wrapper ul.options li.title {
background: #19286C;
color: white;
}
.quiz-wrapper ul.options li.option {
display: block;
position: relative;
z-index: 50;
font-size: 13px;
}
.quiz-wrapper .answers {
display: inline-block;
width: 335px;
font-size: 13px;
line-height: 20px;
}
.quiz-wrapper .answers .target {
display: inline-block;
width: 110px;
background: lightblue;
margin: 0 3px;
text-align: center;
}
.quiz-wrapper button[type="submit"] {
display: block;
position: relative;
margin: 10px auto;
padding: 10px;
background: #19286C;
border: none;
color: white;
font-size: 16px;
}
.lightbox-bg {
display: none;
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.status {
display: none;
position: absolute;
z-index: 110;
text-align: center;
width: 80%;
top: 220px;
left: 47px;
}
.status p {
background: white;
padding: 30px;
}
<body>
<ul class="numbers">
<li class="number" data-target="wrong1">0</li>
<li class="number" data-target="wrong2">1</li>
<li class="number" data-target="right3">2</li>
<li class="number" data-target="right5">3</li>
<li class="number" data-target="wrong3">4</li>
<li class="number" data-target="wrong4">5</li>
<li class="number" data-target="wrong5">6</li>
<li class="number" data-target="wrong6">7</li>
<li class="number" data-target="wrong7">8</li>
<li class="number" data-target="wrong8">9</li>
</ul>
<ul class="functions">
<li class="function" data-target="right1">sum</li>
<li class="function" data-target="wrong9">median</li>
<li class="function" data-target="wrong10">mean</li>
<li class="function" data-target="wrong11">sqrt</li>
<li class="function" data-target="wrong12">log</li>
<li class="function" data-target="wrong13">min</li>
<li class="function" data-target="wrong14">max</li>
<li class="function" data-target="wrong15">abs</li>
<li class="function" data-target="wrong16">round</li>
<li class="function" data-target="wrong17">add</li>
</ul>
<ul class="symbols">
<li class="symbol" data-target="right2">(</li>
<li class="symbol" data-target="right6">)</li>
<li class="symbol" data-target="right4">,</li>
<li class="symbol" data-target="wrong18">.</li>
<li class="symbol" data-target="wrong19">/</li>
<li class="symbol" data-target="wrong20">?</li>
<li class="symbol" data-target="wrong21">+</li>
<li class="symbol" data-target="wrong22">=</li>
<li class="symbol" data-target="wrong23">-</li>
<li class="symbol" data-target="wrong24">*</li>
</ul>
<p id="answer">Message is: <span id = "display"></span> </p>
<script>
$(document).ready(function() {
$("span").droppable({
accept: "ul > li",
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
var dragedElement = ui.draggable.text();
$(this).addClass("ui-state-highlight");
$(this).html(dragedElement);
$(this).addClass('matched');
}
});
$("ul li").draggable({
helper:"clone",
revert: "invalid"
});
})
</script>
ui.R:
library(shiny)
shinyUI(fluidPage(
includeHTML("index.html")
))
server.R:
library(shiny)
shinyServer(function(input, output) {
observeEvent(input$res){
eval(res);
print(res);
}
})
I am using this example on my application.
https://codepen.io/kushalpandya/pen/IAhin/
Button is appearing perfectly on the screen. I place div section and all css acordingly. Now when I click on arrow button don't know why options are not showing.
My Split button is not working.
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>
Did I placed <Script> tag correctly.
also you need to add css! check this:
$(function() {
var splitBtn = $('.x-split-button');
$('button.x-button-drop').on('click', function() {
if (!splitBtn.hasClass('open'))
splitBtn.addClass('open');
});
$('.x-split-button').click(function(event) {
event.stopPropagation();
});
$('html').on('click', function() {
if (splitBtn.hasClass('open'))
splitBtn.removeClass('open');
});
});
.container {
text-align: center;
}
.container > h2 {
text-align: center;
}
.x-split-button {
position: relative;
display: inline-block;
text-align: left;
margin-top: 20px;
}
.x-button {
position: relative;
margin: 0;
height: 30px;
float: left;
outline: none;
line-height: 27px;
background: #F2F2F2;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button:hover {
cursor: pointer;
background: #E0E0E0;
}
.x-button:active {
background: #D3D3D3;
}
.x-button.x-button-drop {
border-left: 0;
height: 30px;
}
.open > .x-button-drop-menu {
display: block;
}
.x-button-drop-menu {
position: absolute;
top: 27px;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #F2F2F2;
background-clip: padding-box;
border: 1px solid #E0E0E0;
box-shadow: 1px 1px 2px #E0E0E0;
}
.x-button-drop-menu li a {
display: block;
padding: 3px 20px;
clear: both;
font-family: arial;
color: #444;
text-decoration: none;
}
.x-button-drop-menu li a:hover {
background: #D3D3D3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerButton">
<span class="x-split-button">
<button class="x-button x-button-main">❖ Action</button>
<button class="x-button x-button-drop">▼</button>
<ul class="x-button-drop-menu">
<li>
Item - 1
</li>
<li>
Item - 2
</li>
<li>
Long Item - 3
</li>
</ul>
</span>
</div>
How to use animation while appending new element using jQuery? I went through couple of answers here but the same method does not work for me. I used show('show') and fadeIn('slow') but it does not seem that animates the new element.
$(document).ready(function() {
$('#add-item').click(add);
function add() {
var newItem = $('#new-item-text');
var span = $('<span>', {
class: 'remove',
click: remove
});
var li = $('<li>', {
class: 'todo-item',
text: newItem.val(),
append: span,
click: completed
});
if (newItem.val()) {
$('ul.todo-list').append(li, $('li.todo-new')).fadeIn('slow');
newItem.val('');
}
}
});
.todo-list {
list-style: none;
padding: 0px;
}
.todo-item {
border: 2px solid #444;
margin-top: -2px;
padding: 10px;
cursor: pointer;
display: block;
background-color: #ffffff;
}
.todo-new {
display: block;
margin-top: 10px;
}
.todo-new input[type='text'] {
width: 260px;
height: 22px;
border: 2px solid #444;
}
.todo-new a {
font-size: 1.5em;
color: black;
text-decoration: none;
background-color: #ffffff;
border: 2px solid #444;
display: block;
width: 24px;
float: right;
text-align: center;
}
.todo-new a:hover {
background-color: #0EB0dd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class='todo-list'>
<li class='todo-item'>4L 2% Milk
<span class='remove'></span>
</li>
<li class='todo-item'>Butter, Unsalted
<span class='remove'></span>
</li>
<li class='todo-new'>
<input id='new-item-text' type='text' />
<a id='add-item' href='#'>+</a>
</li>
</ul>
To animate, you should start by hiding the elements, for instance by setting:
display: none;
Then fadeIn() will animate and set display: block;
I have used JavaScript to create 3 clickable drop-down menu button in a webpage. when I click one button, script is works well. I can see the following menu is displayed. When I another button, the following menu is displayed. however, the previous menu is still there.
Here is my script. Hope someone can help me. Thank you!
<script type="text/javascript" >
$(document).ready(function() {
$(".account").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false
});
//Mouse click on my account link
$(".account").mouseup(function() {
return false
});
//Document Click
$(document).mouseup(function() {
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
// CSS
.dropdown
{
color:#000;
margin: 0px 22px 0 0;
width: 300px;
height: 30px;
text-align:center;
}
.submenu
{
background:#FFF ;
position: absolute;
top: 118px;
left: 515px;
z-index: 100;
width: 250px;
display: none;
border-radius: 6px;
border: outset 2px #0066FF;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
}
.dropdown li a
{
color:#555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
margin-top:-5px;
}
.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 18px;
line-height: 10px;
color: #000;
border: ridge 2px #0066FF;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 0px;
height: 20px;
width: 300px;
margin: 0px 0 0 0px;
text-align:center;
text-decoration: none;
background: url(images-new/arrow.png) 275px 9px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
// html
<div class="dropdown">
<a class="account" >My Account</a>
<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li >Settings</li>
<li >Send Feedback</li>
</ul>
</div>
</div>
My personal recommendation is to do this with with a combination of JS & CSS.
You should use an active class to hide and show your elements:
//JS
$('.menu a').on('click', function({
$('.menu a').removeClass('active');
$(this).addClass('active');
});
// CSS
.active .submenu {
display: block;
}