I'm doing a javascript vertical submenu, I'm using yui tools but the submenu is duplicated, I don't know what part of code is wrong.
YAHOO.util.Event.onContentReady("menu_vertical", function() {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/
build/menu/assets/skins/sam/menu.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/
container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/menu/
menu-min.js"></script>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1
</li>
<li class="yuimenuitem">MENU2
</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1
</li>
<li class="yuimenuitem">SUBMENU2
</li>
<li class="yuimenuitem">SUBMENU3
</li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4
</li>
</ul>
In your JSFiddle you linked, your href and src tags have spaces in the path and these link and script tags must not be embedded inside of a script since they are raw HTML. Here is an updated JSFiddle, but you still have issues.
You are attempting to reference plain http over an https connection, this is not safe, and JSFiddle and Stackoverflow will not allow you to do such a thing.
Other than that, your code looks fine. The Menu Family: Multi-tiered Menu From Markup example that I found using Google may be a good place to check if your code is correct. Here is the "clean page" of that example.
YAHOO.util.Event.onContentReady("menu_vertical", function () {
var elMenu = new YAHOO.widget.Menu("menu_vertical", {
width: '550px'
});
elMenu.render();
elMenu.show();
});
<script src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>
<link href="http://yui.yahooapis.com/2.3.0/build/menu/assets/skins/sam/menu.css" rel="stylesheet"/>
<div id="menu_vertical" class="yuimenu">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenuitem">MENU1</li>
<li class="yuimenuitem">MENU2</li>
<li class="yuimenuitem">MENU3
<div id="consectetuer" class="yuimenu">
<div class="bd">
<ul>
<li class="yuimenuitem">SUBMENU1</li>
<li class="yuimenuitem">SUBMENU2</li>
<li class="yuimenuitem">SUBMENU3 </li>
</ul>
</div>
</div>
</li>
<li class="yuimenuitem">MENU4</li>
</ul>
</div>
</div>
Related
I'm creating some web pages for an escape game. They mostly serve to gather responses and check if they are correct. In this case, it is a letter to put in the right order. The sorting script was taken from Codepen, then I've modified some JavaScript to monitor the if/else condition. If it is wrong, you loose a life. The code does that is the answer is wrong, it deletes one of the four images representing the life.
I've searched everywhere how to build a life system, so I tried some theories I've made in my mind, but I'don't have a good understanding of JavaScript yet to achieve what I want to do.
$(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
function checkOrd() {
var life = document.getElementById('life');
var items = $('#sortable li').map(function() {
return $.trim($(this).attr('id'));
}).get();
var itsort = $('#sortable li').map(function() {
return $.trim($(this).attr('id'));
}).get();
<!-- console.log(items); -->
<!-- console.log(itsort); -->
itsort.sort();
if (JSON.stringify(items) == JSON.stringify(itsort))
alert("Right order!");
else
life.parentNode.removeChild(life);
};
<DOCTYPE! html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<img id="life" src="life.png"><img id="life" src="life.png"><img id="life" src="life.png"><img class="life" src="life.png"> </div>
<div class="Lettre">
<ul id="sortable">
<li class="intro">INTRO TEXT</li>
</br>
<li class="partie" id="3">TEXT </li>
<li class="partie" id="2">TEXT </li>
<li class="partie" id="4">TEXT </li>
<li class="partie" id="1">TEXT </li>
<li class="outro" id="5">ENDING TEXT</li>
</ul>
</div>
<div class="confirmbutton" style="display: flex !important;justify-content: center !important">
<button id="confirm" onclick="checkOrd();">Confirmer</button>
</div>
</html>
Is there a better way to handle this? If I work like that, I still haven't found a way to report the remaining life in the next pages.
This is basically how you can do it:
function removeLife(){
$(".life").last().remove();
}
function countLives(){
return $(".life").length;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
#lives{
padding:0;
}
.life{
display: inline;
}
</style>
<body>
<ul id="lives">
<li class="life">Life 1</li>
<li class="life">Life 2</li>
<li class="life">Life 3</li>
<li class="life">Life 4</li>
</ul>
<button onclick="removeLife()">Remove a life</button>
<button onclick="alert(countLives())">Get remaining lives</button>
</body>
</html>
You can then check how many lives are left with something like
function countLives(){
return $(".life").length;
}
I'm looking for a way to create a dynamic episodes list in html css javascript that understand in which episode the user is and add the "active" class to the li element of the list.
Let me show you an exemple :
what i want
Thanks you :)
This might help. Call the method changeEpisode when the video ends.
document.getElementById("video").addEventListener("ended", changeEpisode, false);
function changeEpisode()
{
var elem = $("#episode_list li.active");
$(elem).removeClass("active");
$(elem).next().addClass("active");
$("#video").attr("src",$(elem).next().data("src"));
}
<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<video height="200px" width="200px" controls autoplay src="https://www.w3schools.com/tags/movie.mp4" id="video"></video>
<ul class="list-group" id="episode_list">
<li class="list-group-item active" data-src="https://www.w3schools.com/tags/movie.mp4">Episode 1</li>
<li class="list-group-item" data-src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4">Episode 2</li>
<li class="list-group-item" data-src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4">Episode 3</li>
</ul>
I have the following dropdown list as a part of my project:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="rem">CS 520</li>
<li class="rem">CS 530</li>
<li class="rem">CS 571</li>
<li class="rem">CS 575</li>
</ul>
</div>
When i click on any of the li, i want to popup (not alert) a box containing textarea (to submit comments) and SUBMIT, CANCEL and RESET buttons.
I am unable to figure this out using JavaScript (or jQuery). Is there any way this can be achieved? I can find people giving examples where they do the similar problem with an alert, but I need to do it with a simple popup box.
There is somewhat similar problem's solution on this link ; But the JS code is too complex I guess. Thanks
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Check this and modify the code for list
Check this code and correct accordingly, If will click on any li popup dialog will open.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h3>Header</h3>
</div>
<div data-role="content">
<!-- content -->
<ul data-role="listview" id="list">
<li data-role="list-divider">Group 1</li>
<li data-icon="false">List 1a</li>
<li data-icon="false">List 1b</li>
<li data-role="list-divider">Group 2</li>
<li data-icon="false">List 2a</li>
</ul><!-- /content -->
</div>
<!-- popup-menu -->
<div data-role="popup" id="popup-menu">
<ul data-role="listview" style="min-width:210px;">
<li data-role="divider">Choose an action</li>
<li><a id="details" href="#">View details</a></li>
<li><a id="share" href="#">Share</a></li>
</ul>
</div><!-- /popup-menu -->
</div>
<script>
var currentId = 0;
var baseURL = "person.php?id=";
$('#page').on('pageinit', function(){
$('#list li a').click(function(e){
e.preventDefault();
currentId = $(this).attr("data-id");
$("#popup-menu").popup("open", {transition:"slideup"} );
});
});
$('#popup-menu').on('popupbeforeposition', function(){
$("#details").attr("href", baseURL + currentId);
});
</script>
</body>
</html>
For more support and help , go through by giving this link in jsFidle Click Here 1 or check here Link 2
Check these links to open your popup and how it workd
This my jQuery code for displaying a dropdown menu on hovering over an image. Imgbtn_Dsp is the id of the image and nav_menu is the id of the list, but it's not working.
<html>
<head>
<title>Dropdownlist Hover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script>
$('#Imgbtn_Dsp').mouseover(function() {
$('#nav_menu').slideDown();
});
</script>
</head>
<body>
<form id="form1">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
<div>
</form>
</body>
</html>
Get rid of div and modify ul like this if you want to work it properly ;)
<ul id="nav_menu" style="display: none">
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
Modify your script like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function (){
$('#nav_menu').hide();
$('#Imgbtn_Dsp').mouseover(function () {
$('#nav_menu').slideDown();
});
$('#Imgbtn_Dsp').mouseleave(function () {
$('#nav_menu').slideUp();
});
});
</script>
You can see the cod in action in this jsfiddle.
it could be done without jquery. all you have to do is define parent container of image and list set some css.
<div class="parentDIV">
<img src="~/Image/Display.png" / id="Imgbtn_Dsp">
<div id="nav_menu">
<ul>
<li id="l1">AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
</div>
</div>
now define some css:-
.parentDIV{position:relative}
#nav_menu{position:absolute;
left:0;top:99%;display:none;}
.parentDIV:hover #nav_menu{display:block}
hopefully you will find it useful
I have created an expand / collapse menu on a site I created in Wordpress
http://www.ogormanconstruction.co.uk/
Once you click on any of the li's the URL changes but the page does not seem to refresh to display the correct content
I'm not too familiar with javascript so I was wondering how I could make this effect work
<script type='text/javascript' src="/wp-content/themes/child/scripts/jquery-1.6.2.min.js"></script>
<script type='text/javascript' src="/wp-content/themes/child/scripts/jMaster.js"></script>
<script type='text/javascript' src="/wp-content/themes/child/scripts/supersleight.plugin.js"></script>
<script type="text/javascript" src="/wp-content/themes/child/scripts/hashchange.js"></script>
<script type="text/javascript" src="/wp-content/themes/child/scripts/actions.js"></script>
<script type="text/javascript" src="/wp-content/themes/child/scripts/tinyscroll.js"></script>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
</head>
<body <?php body_class(); ?>>
<div id="header">
<ul id="nav">
<li class="clearfix">
<div class="clearfix">
<div id="menuNav">Menu</div>
<ul class='clearfix'><li><strong>O'Gorman Construction Ltd</strong><ul class='clearfix'><li><a href='/about-us'>About Us</a><li><a href='/contact'>Contact</a></li></li><li><a href='/work'>Work</a></li><li><a href='/recruitment'>Recruitment</a></li></ul></li><li><strong>Services</strong><ul class='clearfix'><li><a href='/site-logistics'>Labour Supply</a></li><li><a href='/waste-management'>Drainage</a></li><li><a href='/security-services'>Fencing</a></li><li><a href='/traffic-management'>Demolition</a></li></ul></li><li><strong> </strong><ul><li><a href='/multi-service-gangs'>Ground Works</a></li><li><a href='/facilities-accomodation'>Multiservice Gangs</a></li><li><a href='/small-works-maintenance'>Engineering</a></li><li><a href='/catering-services'>Water Treatment</a></li></ul></li></ul>
</div>
</div>
</li>
</ul>
</div>
<h2>Work</h2>
<div class="leftCol">
<div class="rightCol gallery">
<ul id="homeGallery">
<li id="prevControl">Previous</li>
<li id="galleryItems">
<ul>
<li>
<div class="galleryImage"><img src='/wp-content/themes/child/images/1.jpg' /></div>
<div class="galleryText"><div class="leftCol noborder" style="text-align: left;"><strong>Project I</strong></div></div>
</li>
<li>
<div class="galleryImage"><img src='/wp-content/themes/child/images/2.jpg' /></div>
<div class="galleryText"><div class="leftCol noborder" style="text-align: left;"><strong>Project II</strong></div></div>
</li>
<li>
<div class="galleryImage"><img src='/wp-content/themes/child/images/4.jpg' /></div>
<div class="galleryText"><div class="leftCol noborder" style="text-align: left;"><strong>Project III</strong></div></div>
</li>
</ul>
</li>
<li id="nextControl">Next</li>
<li id="copyright">© O'Gorman Construction Ltd</li>
</ul>
</div>
</div>
<div id="main">
It looks like it has to with $(window).hashchange(); which you are calling in the
$(document).ready(function ()
I think it is causing all of the links in your page to add a hash rather than redirect to another url.
For example, if you hover over the "Work" link, you can see the url it's supposed to go to in the bottom left corner:
http://www.ogormanconstruction.co.uk/work
But when you click on it, all that happens is the url is changed to:
http://www.ogormanconstruction.co.uk/#/work
which doesn't actually redirect you.
Is hashchange part of Wordpress, or is something you'ved added?