I keep getting the Error: Uncaught TypeError: ui is undefined when running this file in browser
File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bla</title>
<link rel="stylesheet" href="styles/jquery-ui.css">
<style>
#outer {
/* position: relative; */
width: 60%;
height: 700px;
background-color:cornflowerblue;
text-align: center;
margin: 0 auto;
}
li {
/* position:relative; */
margin: 0;
padding: 0;
background-color: pink;
}
.inner {
/* position: relative; */
margin: 0;
padding: 0;
background-color:darkgoldenrod;
height: 5em;
}
#sortable {
list-style-type: none;
}
p {
margin: 0;
padding: 0;
}
.tilt {
background-color:lightslategrey;
transform: rotate(5);
}
</style>
</head>
<body>
<div id="outer">
<ul id="sortable">
<!-- <li> -->
<div class="inner"><p>hello 1</p></div>
<!-- </li> -->
<li class="ui-state-default">
<div class="inner"><p>hello 2</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 2e</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 4</p></div>
</li>
</ul>
</div>
<button id="lebutton">Save</button>
<script src="scripts/jquerymin.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.min.js"></script>
<script>
$(function() {
$('#sortable').sortable();
$('#sortable').disableSelection();
$('#lebutton').on('click', function(e) {
e.preventDefault();
let childrens = $('#sortable').children();
childrens.each(function(index, elem) {
console.log(index + ": " + elem.textContent);
});
});
});
$('#sortable').sortable({
handle: function(event, ui) {
$(ui.item).addClass("tilt");
console.log('handle')
},
stop: function(event, ui) {
$(ui.item).removeClass("tilt");
console.log('stop');
},
});
</script>
</body>
</html>
I read the documentation for JQuery UI, and I thought one could select the item that is dragged in sortable by ui.item like $(ui.item)
I tried the example select statements from these places:
drag event for jquery-ui-sortable
Add and remove a class on click using jQuery?
jQuery Sortable - How to get current dragged element attribute
$('#'+ui.item[0].id).removeClass("ui-state-default"); from this answer:
https://stackoverflow.com/a/1931019/7989121
and ui.helper.addClass('red'); from this answer:
https://stackoverflow.com/a/25018112/7989121
What am I doing wrong?
According to the jQuery UI documentation handle
is not a function type, so you cannot pass event and ui to it.
Correct me if I'm wrong but I assume you want to add a class to the item that is being selected (.tilt) and then when the item is dropped in its new position, the class is removed...correct?
Remove the $("#sortable").sortable() line because you are calling this in the other function
Put your other "sortable" function inside the jQuery $(function()
Change handle to activate
Use ui.item to access the element.
$(function() {
$('#sortable').sortable({
activate: function(event, ui) {
ui.item.addClass("tilt");
},
stop: function(event, ui) {
ui.item.removeClass("tilt");
}
});
$('#sortable').disableSelection();
$('#lebutton').on('click', function(e) {
e.preventDefault();
let childrens = $('#sortable').children();
childrens.each(function(index, elem) {
console.log(index + ": " + elem.textContent);
});
});
});
#outer {
/* position: relative; */
width: 60%;
height: 700px;
background-color:cornflowerblue;
text-align: center;
margin: 0 auto;
}
li {
/* position:relative; */
margin: 0;
padding: 0;
background-color: pink;
}
.inner {
/* position: relative; */
margin: 0;
padding: 0;
background-color:darkgoldenrod;
height: 5em;
}
#sortable {
list-style-type: none;
}
p {
margin: 0;
padding: 0;
}
.tilt {
background-color:lightslategrey;
transform: rotate(5) !important;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="outer">
<ul id="sortable">
<!-- <li> -->
<div class="inner"><p>hello 1</p></div>
<!-- </li> -->
<li class="ui-state-default">
<div class="inner"><p>hello 2</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 2e</p></div>
</li>
<li class="ui-state-default">
<div class="inner"><p>hello 4</p></div>
</li>
</ul>
</div>
<button id="lebutton">Save</button>
Related
The issue I am having involves two objects which are supposed to have a function bound to them once the page loads.
One of the objects is a widget loading via a script. The widget is eventually placed in the div.
The other object is pure html, which works as expected.
I am assuming this is an issue with the order the objects are loading, but I can't seem to come to a solid conclusion since my script to build the div is in the head (so it should load first?), followed by the html, and finally the script at the bottom of my document. So if this is all true, the object should be loaded before the final $(document).ready function runs, but the bind does not seem to be applied to the generated div.
Any help would be greatly appreciated and will receive a fast response! (I promise!!!)
<script type="text/javascript" id="BROKEN_OBJECT" src="https://link.com/broken.js"></script> //(In Head)
<div>
<span /> Object to be loaded via JS
</div>
<div class="widget">
<ul class="hs">
<li>
<div>
<span /> Object loaded via HTML
</div>
</li>
</ul>
</div>
jQuery(function ($) {
$.fn.hScroll = function (amount) {
amount = amount || 120;
$(this).bind("DOMMouseScroll mousewheel", function (event) {
var oEvent = event.originalEvent,
direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
position = $(this).scrollLeft();
position += direction > 0 ? -amount : amount;
$(this).scrollLeft(position);
event.preventDefault();
})
};
});
$(document).ready(function () {
$('.hs').hScroll(60); // You can pass (optionally) scrolling amount
});
EDIT
I've created a new version of the code which includes almost everything.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script type="text/javascript" id="BROKEN_OBJECT" src="https://link.com/broken.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Events Scroll</title>
<style>
.widget {
padding: var(--gutter) 0;
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
--gutter: 20px;
padding-left: 50px;
padding-right: 50px;
}
.widget > * {
grid-column: 2 / -2;
}
.widget > .full {
grid-column: 1 / -1;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 0px;
grid-template-rows: 285px;
grid-auto-flow: column;
grid-auto-columns: 200px;
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.25 * var(--gutter));
}
.hs:before,
.hs:after {
content: '';
width: 10px;
}
ul {
list-style: none;
padding: 0;
}
.widget {
width: 100%;
height: 100%;
}
.hs > li,
.event {
transform: scale(.96);
scroll-snap-align: center;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(240, 240, 240);
border-radius: 8px;
border: solid 1px gray;
background-repeat: no-repeat;
height: 285px;
background-size: 200px 200px;
}
</style>
</head>
<body>
<div class="lwcw" data-options="id=3&format=html"></div>
<div class="widget">
<ul class="hs full no-scrollbar" id="scroll">
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
<li class="event" style="background-image: url({image_src})">
</li>
</ul>
</div>
<script>
$('.widget').on("DOMMouseScroll mousewheel", '#scroll', function (event) {
amount = 60
var oEvent = event.originalEvent,
direction = oEvent.detail ? oEvent.detail * -amount : oEvent.wheelDelta,
position = $('#scroll').scrollLeft();
position += direction > 0 ? -amount : amount;
$('#scroll').scrollLeft(position);
event.preventDefault();
});
</script>
</body>
</html>
I am trying to create collapsed navbar I did the HTML and CSS part but when I do the javascript part it gives me an uncaught reference error. My code is below I provided the HTML CSS and Javascript. I would appreciate it if someone can please help. Thank you in advance. I provided all the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="btnOpen()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li><a href="index.html">Home</a></li>
<li><a href="pages/about.html">About us</a></li>
<li><a href="pages/contact.html">How to reach me</a></li>
<li><a href="pages/portfolio.html">Portfolio</a></li>
</ul>
</nav>
<section class="sm">
<a href="#"><i class="fab fa-facebook-f" class="facebook"></i></a>
<a href="#"><i class="fab fa-twitter" class="twitter"></i></a>
<a href="#"><i class="fab fa-google" class="google"></i></a>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
</html>
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
nav {
display: flex;
position: absolute;
top: 100;
right: 0;
background-color: #e1e1e1;
width: 40vw;
height: 30vh;
}
nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-decoration: none;
color: #111;
}
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: #111;
font-style: bold;
font-weight: 600;
font-size: 15px;
font-family: Roboto;
}
function openBtn() {
document.getElementsByName("nav").style.width = "40vw";
document.getElementsByName("nav").style.height = "30vh";
}
openBtn();
function closeNav() {
document.getElementsByName("nav").style.width = "0";
document.getElementsByName("nav").style.height = "0";
}
closeNav();
I have added Id to nav and corrected js. Please review.
function btnOpen() {
document.getElementById("nav").style.width = "40vw";
document.getElementById("nav").style.height = "30vh";
}
btnOpen();
function closeNav() {
document.getElementById("nav").style.width = "0";
document.getElementById("nav").style.height = "0";
}
closeNav();
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="btnOpen()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav id='nav'>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
</html>
A couple things need to be fixed, and you don't need any external libraries to do so. First, you have a syntax error on your first div. Your onclick attribute should point to the function openBtn(), not btnOpen().
Secondly, your reference error stemmed from your two functions, openBtn() and closeNav(). When you called document.getElementsByName('nav') you cannot edit the style properties of a NodeList, which is what was being returned. Here's what I changed.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
closeNav()
By using a for-of loop, you can edit each nav element in the HTMLCollection returned by document.getElementsByTagName('nav').
Here's a working example.
const navs = document.getElementsByTagName("nav")
function openBtn() {
for (const nav of navs) {
nav.style.width = "40vw"
nav.style.height = "30vh"
}
}
openBtn()
function closeNav() {
for (const nav of navs) {
nav.style.width = "0"
nav.style.height = "0"
}
}
* {
box-sizing: border-box;
}
header {
width: 100%;
background-color: #e1e1e1;
}
header img {
width: 100px;
height: 100px;
}
header .container {
display: inline-block;
float: right;
}
.container .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #111;
margin: 6px 0;
}
nav {
display: flex;
position: absolute;
top: 100;
right: 0;
background-color: #e1e1e1;
width: 40vw;
height: 30vh;
}
nav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
text-decoration: none;
color: #111;
}
nav ul {
display: flex;
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: #111;
font-style: bold;
font-weight: 600;
font-size: 15px;
font-family: Roboto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;1,100&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>
<img src="logo/logo.png" alt="" />
<div class="container" onclick="openBtn()">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<li>Home</li>
<li>About us</li>
<li>How to reach me</li>
<li>Portfolio</li>
</ul>
</nav>
<section class="sm">
<i class="fab fa-facebook-f" class="facebook"></i>
<i class="fab fa-twitter" class="twitter"></i>
<i class="fab fa-google" class="google"></i>
</section>
<main></main>
<section></section>
<footer></footer>
</header>
</body>
<script src="js/script.js"></script>
<script
src="https://kit.fontawesome.com/dd4d991431.js"
crossorigin="anonymous"
></script>
How can I read the selected value of this menu, as if it were a dropdown list?
For a regular dropdown list like below, I use something like this to read the value:
<select id="ddl">
<option value="In" selected="selected">In</option>
<option value="Out">Out</option>
<option value="Ratio">Ratio</option>
</select>
With javascript I read the selected value:
var dropdown = document.getElementById("ddl");
var InOrOut = dropdown.options[dropdown.selectedIndex].value;
Is it possible to use something like this to read the selected value of the menu below:
function FillAll()
{
alert('I will read value');
// This is where menu value is read.
alert('Value read is');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
#wrapper {
width: 100%;
border: 1px solid black;
overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
width: 400px;
float:left; /* add this */
border: 1px solid red;
}
#second {
border: 1px solid green;
text-align: right;
overflow: hidden; /* if you don't want #second to wrap below #first */
}
.bs-example{
margin: 20px;
}
.text
{
font-size: 15pt;
font-family: Helvetica;
color: #3d718b;
}
hr{
margin: 60px 0;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="float:left;">
<ul class="nav nav-pills">
<li class="text" class="dropdown">
</b>
<ul class="dropdown-menu">
<li>Value1</li>
<li>Value2</li>
<li>Value3</li>
</ul>
</li>
</li>
</ul>
</div>
<button id="ButtonSearch" onclick="FillAll()">GO</button>
Since one can't do much to change the design of the regular dropdown list, I was thinking of using another approach, and use an html menu instead of the ddl.
Something I didn't mention is that the code to read the value would go inside the click event of a button that already exists. I didn't mention it before because I didn't know the click event would be used to read the value.
You can use getAttribute to scrape a value off of each li:
$('.dropdown-menu li').click( e => {
console.log(e.target.getAttribute('value'));
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
#wrapper {
width: 100%;
border: 1px solid black;
overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
width: 400px;
float:left; /* add this */
border: 1px solid red;
}
#second {
border: 1px solid green;
text-align: right;
overflow: hidden; /* if you don't want #second to wrap below #first */
}
.bs-example{
margin: 20px;
}
.text
{
font-size: 15pt;
font-family: Helvetica;
color: #3d718b;
}
hr{
margin: 60px 0;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="float:left;">
<ul class="nav nav-pills">
<li class="text" class="dropdown">
</b>
<ul class="dropdown-menu">
<li value="1">Value1</li>
<li value="2">Value2</li>
<li value="3">Value3</li>
</ul>
</li>
</li>
</ul>
</div>
This looks to do what you need using either jQuery or native JS.
<script>
// with jquery
$('.dropdown-menu li').click(function(el) {
console.log(el.target.textContent)
})
// native
const list = document.querySelectorAll('.dropdown-menu li');
list.forEach(el => el.addEventListener('click', function listClick() {
console.log(el.textContent);
}));
</script>
The short answer is, yes. The following code, following your example, uses an event handler which is triggered when one of the menu items are clicked. I've also included a working jsfiddle example below.
HTML
<ul class="nav nav-pills">
<li class="text" class="dropdown">
</b>
<ul class="dropdown-menu">
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
</ul>
</li>
</ul>
<div class="col-xs-12 text-danger" id="result"></div>
Javascript / jQuery
$(document).on('click', '.dropdown-menu li a', function() {
var r = $('#result');
r.empty().append('You have clicked <strong>'+$(this).text()+'</strong> in the drop-down menu.');
});
https://jsfiddle.net/Xonos/z9jfa86r/
UPDATE: I have added another answer which shows a secondary example where you can select/de-select a menu item and then click a button to determine which of the menu items are selected. The JSFiddle link is below.
HTML
<div class="col-xs-12">
<ul class="nav nav-pills">
<li class="text" class="dropdown">
</b>
<ul id="myDropdown" class="dropdown-menu">
<li>Value 1</li>
<li>Value 2</li>
<li>Value 3</li>
</ul>
</li>
</ul>
</div>
<div class="col-xs-12 text-red" id="result"> </div>
<br>
<div class="col-xs-12">
<button id="checkBtn" class="btn btn-sm btn-success pull-right">Check Selected Menu Item</button>
</div>
<div class="col-xs-12 text-orange" id="check"> </div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.text-red {
color:rgb(206, 35, 35);
}
.text-orange {
color:rgb(252, 144, 0);
}
.nav {
background-color:rgba(255,255,255,0.15);
}
.selected-item {
background-color:rgb(255,0,0);
}
Javascript / jQuery
$(document).on('click', '#myDropdown li a', function() {
var r = $('#result');
$(this).parent().parent().children().removeClass('selected-item');
if($(this).hasClass('selected-item')) {
$(this).removeClass('selected-item'); //De-select menu item.
} else {
$(this).parent().addClass('selected-item'); //Select menu item.
}
r.empty().append('You have selected <strong>'+$(this).text()+'</strong> in the drop-down menu.');
});
$(document).on('click', '#checkBtn', function() {
var selected = $('#myDropdown .selected-item');
if(selected.length > 0) { //If any of the menu items <li> have the "selected-item" class added.
$('#check').empty().append('Found a selected menu item. The value of it is: <strong>'+selected.text()+'</strong>');
} else {
$('#check').empty().append('You have not selected an item from the menu.');
}
});
https://jsfiddle.net/Xonos/74pwyL1m/
I followed a tutorial and created a simple web page. Here is the html part:
$(document).ready(function() {
//when mouse rolls over
$("li").mouseover(function() {
$(this).stop().animate({
height: '150px'
}, {
queue: false.duration: 600,
easing: 'easeOutBounce'
})
});
//when mouse went away
$("li").mouseout(function() {
$(this.stop().animate({
height: '50px'
}, {
queue: false,
duration: 600,
easing: 'easeOutBounce'
})
});
});
body {
font-family: "Lucida Grande", arial. sans-serif;
background: #f3f3f3;
}
ul {
margin: 0;
padding: 0;
}
li {
width: 100px;
height: 50px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
}
a {
color: #fff;
text-decoration: none;
}
p {
padding: 0px 5px;
}
.subtext {
padding-top: 15px;
}
.green {
background: #6AA63B;
}
.yellow {
background: yellow;
}
.red {
background: #D52100;
}
.purple {
background: #5122B4;
}
.blue {
background: #0292c0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Does this suit for title</title>
<link rel="stylesheet" href="animate-menu.css">
<script src="js/jquery.easing.1.3.js"></script>
<script src="njmt-menu.js"></script>
</head>
<body>
<p>Rollover a menu item to expand it</p>
<ul>
<li class="green">
<p>Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p>about</p>
<p class="subtext">more info</p>
</li>
<li class="red">
<p>contact</p>
<p class="subtext">get in touch</p>
</li>
<li class="blue">
<p>SBMT</p>
<p class="subtext">Send us your Mary Jane</p>
</li>
<li class="purple">
<p>TRMS</p>
<p class="subtext">LGLTY</p>
</li>
</ul>
</body>
</html>
Somewhy when I put mouse over the areas of "red","yellow" etc objects,nothing happens. All the routes to the js files are correct.
There was two errors in your code and your code was not getting jQuery.easing.js. Look here:
$(document).ready(function() {
//when mouse rolls over
$("li").mouseover(function() {
$(this).stop().animate({
height: '150px'
}, {
queue: false, //removed . and added , after queue: false
duration: 600,
easing: 'easeOutBounce'
})
});
//when mouse went away
$("li").mouseout(function() {
$(this).stop().animate({ //added ) after $(this
height: '50px'
}, {
queue: false,
duration: 600,
easing: 'easeOutBounce'
});
});
});
body { font-family: "Lucida Grande", arial. sans-serif; background: #f3f3f3; }
ul { margin: 0; padding: 0; }
li { width: 100px; height: 50px; float: left; color: #191919; text-align: center; overflow: hidden; }
a { color: #fff; text-decoration: none; }
p { padding: 0px 5px; }
.subtext { padding-top: 15px; }
.green { background: #6AA63B; }
.yellow { background: yellow; }
.red { background: #D52100; }
.purple { background: #5122B4; }
.blue { background: #0292c0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- added cdn directly for jquery.easing.js -->
<p>Rollover a menu item to expand it</p>
<ul>
<li class = "green">
<p>Home</p>
<p class="subtext">The front page</p>
</li>
<li class = "yellow">
<p>about</p>
<p class="subtext">more info</p>
</li>
<li class = "red">
<p>contact</p>
<p class="subtext">get in touch</p>
</li>
<li class = "blue">
<p>SBMT</p>
<p class="subtext">Send us your Mary Jane</p>
</li>
<li class = "purple">
<p>TRMS</p>
<p class="subtext">LGLTY</p>
</li>
</ul>
You can see working fiddle here.
Have you tried to check the console for any error messages? Seems like you mistyped "js/jquert.easing.1.3.js"
It should be "js/jquery.easing.1.3.js"
Please replace . with , from this function $("li").mouseover(function(){
Instead of:
{queue:false. duration:600, easing:'easeOutBounce'})
Should be:
{queue:false, duration:600, easing:'easeOutBounce'})
Put your script inside your body tag and you are calling jQuery script twice remove that and try again sometimes these improper initialization may be the reason
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Does this suit for title</title>
<link rel="stylesheet" href="animate-menu.css">
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="js/jquert.easing.1.3.js"></script>
<script src="njmt-menu.js"></script>
</head>
<body>
<p>Rollover a menu item to expand it</p>
<ul>
<li class="green">
<p>Home</p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p>about</p>
<p class="subtext">more info</p>
</li>
<li class="red">
<p>contact</p>
<p class="subtext">get in touch</p>
</li>
<li class="blue">
<p>SBMT</p>
<p class="subtext">Send us your Mary Jane</p>
</li>
<li class="purple">
<p>TRMS</p>
<p class="subtext">LGLTY</p>
</li>
</ul>
<script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquert.easing.1.3.js"></script>
<script src="njmt-menu.js"></script>
</body>
</html>
so I'm trying to get better at using javascript and jquery, so I tried to implement a little animation. I have 2 divs in a list under each other, and my aim is, when a mouse hovers over one of the divs, it animates it's width to stretch it out, and when the mouse leaves, the div is still stretched out, only until the mouse enters another div, in which the new div will expand, and the other will return back to it's original size. I've managed to get the divs to expand and resize when entering and leaving them with the mouse, but when trying to implement a way so that only ONE div can be expanded at any time, I can never seem to get it to work.
Here's my code so far:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<style type="text/css">
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1, .d2, .d3, .d4{
background-color: yellow;
width: 210px;
}
</style>
<script>
$(document).ready(function() {
var state = 0;
var selected = 0;
console.log(state);
$(".d1, .d2").mouseenter(function(){
state++;
selected = 1;
console.log(state);
$(this).animate({
width: '400px'
});
});
$(".d1, .d2").mouseleave(function(){
state++;
console.log(state);
if (state == 2 && selected == 1) {
$(".d1").animate({
width: '210px'
});
state = 0;
selected = 0;
}
});
});
</script>
</head>
<body>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1></br></br>
<ul>
<li><div class="d1">This is some text</div></li>
<li><div class="d2">This is some text</div></li>
</ul>
</div>
</div>
</body>
</html>
You could also simplify a bit and just add/remove an active class to the hovered div.
$(document).ready(function(){
$("ul li").hover(function(){
$("ul li").removeClass("active");
$(this).addClass("active");
});
});
li {
background-color: yellow;
padding: 10px;
margin:5px;
font-size: 18px;
position: relative;
display: block;
width: 210px;
transition: all 0.5s ease;
}
li.active {
width: 500px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>This is some text</li>
<li>This is some text</li>
</ul>
</div>
</div>
Here's a solution that answers your question: https://jsfiddle.net/d8kjLgph/
I use the data-* attribute to keep track of which element that is the "big one".
Edit: I changed your original code a little bit, hope that's ok!
$(document).ready(function() {
$(".animate").mouseenter(function(){
/*
Checking that the .animate-element the mouse enters is a "small" one
*/
if($(this).attr("data-active") != "true"){
$(".animate").attr("data-active", "false"); // Reseting all divs to "small"
$(this).attr("data-active", "true"); // Keep track of which one that's active (the big one)
$(".animate:not([data-active='true']").animate({ // Animate all that's not active to "small"
width: '210px'
}, 500);
$(this).animate({ // Animate the active one to "big"
width: '400px'
}, 500);
}
});
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.animate{
background-color: lightgreen;
width: 210px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<ul>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
<li><div class="animate">This is some text</div></li>
</ul>
</div>
</div>
You can use .data() to store state of element animation; if selected is 0, animate to 400px at mouseenter, set element having className beginning with "d" that is child of parent sibling to 210px
$(document).ready(function() {
$(".d1, .d2").data("selected", 0)
.mouseenter(function() {
if ($(this).data().selected === 0) {
$(this).animate({
width: '400px'
}).data("selected", 1)
.parent().siblings().find("[class^=d]")
.data("selected", 0)
.animate({
width: '210px'
})
}
})
});
li {
padding-top: 30px;
font-size: 20pt;
position: relative;
display: block;
}
.d1,
.d2,
.d3,
.d4 {
background-color: yellow;
width: 210px;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="fluid-container">
<div class="col-md-6 col-md-offset-3">
<h1>Animated Hover Slide</h1>
<br>
<br>
<ul>
<li>
<div class="d1">This is some text</div>
</li>
<li>
<div class="d2">This is some text</div>
</li>
</ul>
</div>
</div>