I would like to make a multi level menu with JavaScript.
The problem is when I display the first div with the mousover event I wish to keep the first div displayed and navigate though it to display the second div.
Can I put a mouseother event on nested divs ?
Here is what I wish to do:
function show_menu(nom_menu){
document.getElementById('ss_menu_marque').style.display='none';
document.getElementById(nom_menu).style.display='block';
}
function hide_menu(nom_menu){
document.getElementById(nom_menu).style.display='none';
}
function hide_menus_tous(){
document.getElementById('ss_menu_marque').style.display='none';
}
<a href="marque.php" onmouseover="show_menu('ss_menu_marque');">
<div id="ss_menu_marque" onmouseover="show_menu('ss_menu_marque');"
onmouseout="hide_menu('ss_menu_marque');">
<div id="ss_menu_marque2" onmouseover="show_menu('ss_menu_marque3');"
onmouseout="hide_menu('ss_menu_marque');">
</div>
</div
This is how you can do it with nested divs:
<html>
<head>
<script type="text/javascript">
function show_menu(nom_menu) {
document.getElementById(nom_menu).style.display='block';
}
function hide_menu(nom_menu){
document.getElementById(nom_menu).style.display='none';
}
</script>
</head>
<body>
<div id="ss_menu_marque_root" onmouseover="show_menu('ss_menu_marque_1');" onmouseout="hide_menu('ss_menu_marque_1');">
Menu marque 1
<div id="ss_menu_marque_1" style="display: none">
<div onmouseover="show_menu('ss_menu_marque_11');" onmouseout="hide_menu('ss_menu_marque_11');">
Menu marque 11
<div id="ss_menu_marque_11" style="display: none">
<div onmouseover="show_menu('ss_menu_marque_111');" onmouseout="hide_menu('ss_menu_marque_111');">
Menu marque 111
</div>
</div>
</div>
<div onmouseover="show_menu('ss_menu_marque_12');" onmouseout="hide_menu('ss_menu_marque_12');">
Menu marque 12
<div id="ss_menu_marque_12" style="display: none">
<div onmouseover="show_menu('ss_menu_marque_121');" onmouseout="hide_menu('ss_menu_marque_121');">
Menu marque 121
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can simply show and hide different menu levels as your mouse moves over them, while the higher level menus stay visible.
Related
im trying to reverse div with Jquery which when i click a button the divs will reverse and switch place
<div class="player1">
<div class="player1-a">
<div class="pemain p1a">
<h4>Samsudin</h4>
</div>
<div class="cock 1a">
</div>
</div>
<div class="player1-b">
<div class="pemain p1b">
<h4>Joko</h4>
</div>
<div class="cock 1b">
</div>
</div>
</div>
<button class="btn btn-light score_plus" id="score_kiri"><h1>SCORE</h1></button>
whenever this button clicked the div p1b will move to div player1-a and so do div p1a will move to div player1-b.
Here's my jquery code that the divs only move once and dont move again when i click again.
$('#score_kiri').click(function() {
$('#player_kiri').val(i++);
$('.p1a').appendTo('.player1-b');
$('.1a').appendTo('.player1-b');
$('.p1b').appendTo('.player1-a');
$('.1b').appendTo('.player1-a');
$('.p1a').append('.player1-b');
$('.1a').append('.player1-b');
$('.p1b').append('.player1-a');
$('.1b').append('.player1-a');
});
Your issue is that you have hard-coded the elements to move, rather than use relative positions. Effectively saying "make it exactly like this" rather than "move the first one to the end" (which I believe is what you're trying to do).
You can select the first one various ways, here's one:
$(".player1 > div").first()
Using .appendTo(".player1") with this will move the element to the end - so by always moving the first to the end you get your "continuously appendTo". If you have 3, then first will move to the end each time.
This is slightly different from "switching places" but has the same effect when only 2.
Updated snippet:
$("#btn").click(() =>
$(".player1 > div").first().appendTo(".player1")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player1">
<div class="player1-a">
<div class="pemain p1a">
<h4>p1a Samsudin</h4>
</div>
<div class="cock 1a">1a
</div>
</div>
<div class="player1-b">
<div class="pemain p1b">
<h4>p1b Joko</h4>
</div>
<div class="cock 1b">
1b
</div>
</div>
</div>
<button id=btn>
click me
</button>
I am trying to do select an anchor from one div to another using next() , shiblings(), parents(), parent() etc jquery functions
Here is an example of html
<div class="thumbs">
<div class="section">
<div class="wrap">
HOme
</div>
</div>
<div>
<div class="thumbs">
<div class="section">
<div class="wrap">
about
</div>
</div>
<div>
i want to get the second link.Suppose my current link is link.php and when i click th next button i want to get next link2.php link
You need to use:
$('[data-selector="ajax"].current')
.closest('.thumbs')
.next()
.find('a')
.attr("href"); // will return link2.php
The following code display columns that slide down (the .select-plan-details div) when pressing .select-plan-buy (the other columns, if open, slide up).
HTML:
<div class="select-plan-container">
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-starter">
</div>
<div class="select-plan-details select-plan-details-starter">
</div>
</div>
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-level">
</div>
<div class="select-plan-details select-plan-details-level">
</div>
</div>
<div class="select-plan-column">
<div class="select-plan-buy select-plan-buy-levels">
</div>
<div class="select-plan-details select-plan-details-levels">
</div>
</div>
</div>
JS:
jQuery(".select-plan-buy").click(function () {
jQuery('.select-plan-column .select-plan-details').slideUp();
jQuery(this).next(".select-plan-details").slideToggle();
});
Right now when I press .select-plan-buy again (when .select-plan-details is already open), it slides up and then down again (the current column). How can I do it so it slides up properly?
You could use:
jQuery('.select-plan-column .select-plan-details').not(jQuery(this).next(".select-plan-details")).slideUp();
jQuery(".select-plan-buy").click(function () {
var objDetail=$(this).next(".select-plan-details");
$('.select-plan-column .select-plan-details').not(objDetail).slideUp();
objDetail.slideDown();
});
I have a div which sits on the left hand side of the page, it has another div with content that fills the div,what i want to do is swap the inside div, with another div filled with different content after 10 seconds. and again after 10 seconds rotate back to the first div and so on..
on my main page i had php include of 'left_box.php'.. on that page the code looks like
<div class="span3 main_div">
<!-- first div -->
<div class="well sidebar-nav transfer-central">
<?php include 'includes/transfer_central.php'; ?>
</div>
<!-- second div -->
<div class="well sidebar-nav fixture-results">
<?php //include 'includes/fixture-results.php'; ?>
</div>
</div>
i have put both divs(includes) which i want to appear in the main div but currently only the first div appears.. but how after 10 seconds do i get the second div to replace the first div, inside the main div?
I looked around and just cant seem to get my head around it
JSFiddle: http://jsfiddle.net/Arj2C/
HTML:
<div id="outerdiv">
<div class="" id="1">
<!--content-->
</div>
<div class="hidden" id="2">
<!--content-->
</div>
<div class="hidden" id="3">
<!--content-->
</div>
<div class="hidden" id="4">
<!--content-->
</div>
</div>
JS (with jquery):
var next = 2;
$(function(){
setInterval(function(){
if(next == 1) $("#4").toggleClass("hidden");
$("#" + (next-1)).toggleClass("hidden");
if(++next == 5) {
//$("#4").toggleClass("hidden");
$("#" + (next-1)).toggleClass("hidden");
next = 1;
} else $("#" + (next-1)).toggleClass("hidden");
}, 10000);
});
CSS:
.hidden {
display: none;
}
Say I have many div "pages" set up like this:
<script type="text/javascript">
$('.link').on('click', function(e){
fadeOutPage();
$(this.getAttribute("href")).fadeIn(); //fade in clicked page
});
function fadeOutPage() {
$('#container>div').fadeOut(); //fade out all displayed pages
}
</script>
page 1
page 2
page 3
....
....
<div id="container">
<div id="page1">
<div class="navbar"> contents of navbar 1 </div>
<div class="pagecontents"> contents of page 1 </div>
<div class="pagefooter"> more contents for page 1 </div>
</div>
<div id="page2">
<div class="navbar"> contents of navbar 2 </div>
<div class="pagecontents"> contents of page 2 </div>
<div class="pagefooter"> more contents for page 2 </div>
</div>
<div id="page3">
<div class="navbar"> contents of navbar 3 </div>
<div class="pagecontents"> contents of page 3 </div>
<div class="pagefooter"> more contents for page 3 </div>
</div>
...
...
</div>
This works as I intend it, fade out all pages then fade in the clicked page when I click a link. But I want to delay the fade in of ".pagefooter", for let's say 1000ms, but keep ".pagefooter" inside the parent div "#pageX". Right now when I call "$(this.getAttribute("href")).fadeIn();" it will fade in "#pageX" all at the same time.
How do I override that so I can insert a settimeout(function() {('.pagefooter').fadeIn()},1000) somewhere, so that everything else except ".pagefooter" fades in normally, then ".pagefooter" fades in 1000ms afterwards?
EDIT: Here you go:
$('#page1').show().find('div').hide().filter(function () {
return !$(this).hasClass('pagefooter');
}).fadeIn().add('.pagefooter').delay(1000).fadeIn();
Here's a working demo: http://jsfiddle.net/mFjg5/1