I've found this jQuery show submenu if parent have been clicked but when I tried to incorporate it to my pre-made HTML page, the code does not seem to worked in a sense that it shows the submenu right away and it does not toggle to hide the sub menus, I have tried to create a separate JSP file and link it to my main HTML page but it does not work
<script src="test.js"></script>
so I just added this script below to my HTML page, which does not work as well
<script>
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
</script>
I am not well versed with JS coding so I would need some guidance on how I can incorporate the codes properly, below is my code where I have added the code that I'm trying to use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function(){
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
});
</script>
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header" style="background-color:#7BD12E">
<h1 align="Left" style="color:#FFF; font-size: 18px;"><strong>Test</strong></h1>
<!-- end #header --></div>
<div id="mainContent">
<ul>
<li>Item</li>
<li>Item
<ul class="sub-menu">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Item</li>
<li>Item
<ul class="sub-menu">
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Item</li>
</ul>
<!-- end #mainContent -->
</div>
<div id="footer" style="background-color:#7BD12E">
<p style="color:#FFF">Test</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
you need to wrap the jquery in a $(document).ready():
$( document ).ready(function() {
$('.sub-menu').hide();
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
})
and i would move it to just before your closing </body> tag as well
and as per BrettL's comments, you need to add the jquery library
Related
I can't get my Flickity JS to work can I get some help. This is my HTML and JS. Please help I've watched 2 youtube videos and can't seem to get it working even though I do it exactly the same. The first part is my HTML and the second is my JS. I've tried removing my css to see if it affected it and it didn't. I'm trying to make it so it shows the images and the information on the list in a carousel using Flickity JS
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlowTow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css" type="text/css">
<link rel="stylesheet" href="css/flickity.css">
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js"></script>
<script src="./js/main.js" type=module defer></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/flickity.js/"> </script>
<script scr="js/flickity1.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="main-carousel">
<div class="ten-recent">
<ul id=fan1>
<header class="user">SiddharthToCool</header>
<li><img src=images/fantasy1.jpg alt="fantasy1"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span>
</li>
<li>New Concept</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>
<div class="ten-recent">
<ul id=fan2>
<header class="user">LonJon</header>
<li><img src=images/fantasy2.jpg alt="fantasy2"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span>
</li>
<li>Quick sketch xD</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>
<div class="ten-recent">
<ul id=fan3>
<header class="user">DrawnToLife</header>
<li><img src=images/fantasy3.jpg alt="fantasy3"></li>
<li class="heart-btn">
<span class="heart"></span>
<span class="numb"></span>
</li>
<li>Wish this was my house :c</li>
<li class="DOB">Oct 27th 2000</li>
</ul>
</div>
</div>
</body>
</html>
var elem = document.querySelector('.main-carousel');
var flkty = new Flickity( elem, {
// options
cellAlign: 'left',
contain: true
});
I followed the documentation and it works perfectly. You are probably importing the library wrong, I leave you the same code that you did using cdn
codesandbox-example
Note: I see a problem with codesandbox and you have to reload 2 times for flickity to work
This is my html for a dropdown menu. Initially, in CSS the menu is on display: none; .
<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
Home</a>
</li>
<li>
Services</a>
</li>
<li>
About</a>
</li>
<li>
Contact</a>
</li>
<li>
Partners</a>
</li>
</ul>
</div>
<!-- Load the CDN first -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- If CDN fails to load, serve up the local version -->
<script>window.jQuery || document.write('<script src="js/jquery-2.1.4.js"><\/script>');</script>
<script src="js/script.js"></script>
</body>
</html>
And this is my jQuery script:
// script.js
$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
The above jQuery does not work. However, if, inside the div I add a <p> tag with id= menuButton, it works perfectly fine. Could anyone please help me with this? I have been struggling for a while.
check this fiddle, I have corrected some issues in your markup such as making
Home</a>
to
Home
Your code work fine otherwise
There are a few problems in your code:
1. Wait for DOM
The problem is that your script is probably executed before the DOM is ready. You should trigger the script only once document is ready - i.e.:
$(document).ready(function() {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
Otherwise you are trying to add a click handler to a not-yet-existing #menuButton.
2. Fix the <a> tags
The following line of code
Home</a>
Should become:
Home
Do the same fix for other anchor tags as well.
Other than the markup issues in HTML, your code runs just fine as I have checked it via Jsfiddle https://jsfiddle.net/bryomckim/pmw7xjwf/
js
$(function () {
$( "#menuButton" ).click(function() {
$( "#dropdown" ).slideToggle();
});
});
css
#dropdown {
display: none;
}
<!doctype html>
<html>
<head>
<title>DropDown Menu</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<!-- Load the CDN first -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>DropDown Menu</h1>
<div id="menuButton" >Menu Button</div>
<div>
<ul id="dropdown">
<li>
Home</a>
</li>
<li>
Services</a>
</li>
<li>
About</a>
</li>
<li>
Contact</a>
</li>
<li>
Partners</a>
</li>
</ul>
</div>
</body>
</html>
I'm trying to combine the tree display library jstree and a re-sizable plane splitter, Splitter.js library and am having problems.
The splitter library is at http://methvin.com/splitter/ . jstree is available from http://www.jstree.com/
I'm aiming for the tree to appear on the left and the content to appear on the right.
Both libraries work on their own but when I can't figure out how to combine them. The way each positions elements seems to conflict.
What I currently have is
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="../styles/splitterStyle.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOPs jsTree</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/splitter.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>
<script>
jQuery(function($) {
$('#elContainer').jstree({core : { animation : 50 }});
// Breaks if this is added
// $("#MySplitter").splitter();
});
</script>
<script>
$().ready(function() {
// Also breaks if this is added
// $("#MySplitter").splitter();
});
</script>
</head>
<body>
<div id="MySplitter">
<div id="elContainer">
<ul>
<li id="phtml_1">treeRoot
<ul>
<li id="phtml_2">leaf node</li>
<ul>
<li id="phtml_3">another leaf</li>
</ul>
</ul>
</li>
</ul>
</div>
<div id="content">
Some content
</div>
</div>
</body>
</html>
It looks like there is a problem with splitter and later versions of jquery.
This question discusses the issue:
Splitter.js won't work with new versions of jQuery
The answer from SpYk3HH refers to using jquery layout. This works. The code below shows an example.
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="_lib/jquery-ui-latest.js"></script>
<script type="text/javascript" src="_lib/jquery.layout-latest.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('body').layout({ applyDemoStyles: true });
$('#elContainer').jstree({core : { animation : 50 }});
});
</script>
<script type="text/javascript">
jQuery(function($) {
$('#elContainer').jstree({core : { animation : 50 }});
});
</script>
</head>
<body>
<div class="ui-layout-center">Center content.</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-west">
<div id="elContainer">
<ul>
<li id="phtml_1">treeRoot
<ul>
<li id="phtml_2">leaf node</li>
<ul>
<li id="phtml_3">another leaf</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
I apologize if you've already seen this. I'm still struggling a bit with this. I just need to modify the function to load only the colTwo div from the link selected on the menu instead of the entire page.
I see the code from the jquery website:
$('#result').load('ajax/test.html #container');
But I don't understand how to make the function do this.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Title</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src ='jquery-1.9.1.min.js'></script>
<script type="text/javascript">
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#colTwo').load(page_url);
});
});
</script>
<body>
<div id="header">
<h1>My Title</h1>
</div>
<div id="content">
<div id="colOne">
<div id="menu1">
<ul id="menu">
<li>Members</li>
<li>About</li>
</ul>
</div>
<div class="margin-news">
<h2>Recent Updates</h2>
<p><strong>None At This Time</strong> </p>
</div>
</div>
<div id="colTwo"><h2>Starting Text</h2></div>
<div style="clear: both;"> </div>
</div>
</body>
</html>
Kevin B is correct:
$('#colTwo').load(page_url + ' #colTwo');
Just add the selector as a string to the URL, and don't forget the space!
I've been wanting to try out the Accordion effect on mootools but I can't get it to work, it's just like the js doesn't load at all
this is the HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>BarDiJan - We Deliver</title>
<link rel="stylesheet" href="/stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="/stylesheets/style.css" type="text/css" />
<script type="text/javascript" src="/javascripts/mootools-core-1.3-accordion.js"></script>
<script type="text/javascript" src="/javascripts/mootools-more.js"></script>
<script type="text/javascript" src="/javascripts/application.js"></script>
</head>
<body>
<div class="container">
<div id="accordion">
<h3 class="toggler">What we Do</h3>
<div class="element">
<p>We are people who deliver professional quality identity to you, we have wide range of support.
</p>
</div>
<h3 class="toggler">What we Did</h3>
<div class="element">
<p>Under Construction</p>
</div>
<h3 class="toggler">What we Offer</h3>
<div class="">
<ul>
<li>Web Design</li>
<li>Identity</li>
</ul>
</div>
</div>
</div>
</body>
</html>
This is the application.js code
windows.addEvent('domready', function() {
var accordion = new Accordion($$('h3.toggler'),$$('div.element'), {
display: 2,
opacity: false,
alwaysHide: true,
onActive: function(toggler) { toggler.setStyle('color', '#929292'); },
onBackground: function(toggler) { toggler.setStyle('color', '#000000'); }
});
});
Is there anything that I did wrong? Also I use sinatra if that matters.
Also thanks for your time. . .
You forgot to add the element class to the last element.
This is a working jsfiddle: http://jsfiddle.net/arian/YqNuh/
windows.addEvent('domready', function() {...
you make a mistake, window, not windows ;-)
so :
window.addEvent('domready', function() {...