We Keep Coding

Open a div from top and bottom

Here is my fiddle: http://jsfiddle.net/2tBGE/209/
I just want to open a div with animation after a user clicked on a menu item.
For example, when clicking on the second item, clicked item and previous item should push to the top of the page and below item should push to the bottom of the page.
jQuery(document).ready(function($) {
$('ul li a').on('click', function(){
$(this).parent().next().css({
'display':'block'
})
})
});
ul{
list-style: none;
background: #eee;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.js_item{
display:none;
}
li a{
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover{
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>main menu1</li>
<div class="load_content_for_menu_1 js_item">1</div>
<li>main menu2</li>
<div class="load_content_for_menu_2 js_item">2</div>
<li>main menu3</li>
<div class="load_content_for_menu_3 js_item">3</div>
<li>main menu4</li>
<div class="load_content_for_menu_4 js_item">4</div>
<li>main menu5</li>
<div class="load_content_for_menu_5 js_item">5</div>
</ul>

Note: I've made a small edit to your html structure so that each .toggled_content <div> is the child of each <li>.
With the following jQuery methods you can achieve this.
slideToggle()
Display or hide the matched elements with a sliding motion.
toggleClass()
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
find()
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
var allContent = $("li");
allContent.find(".toggled_content").hide();
$(".toggler").on("click", function() {
var $thisParent = $(this).parent();
if (!$thisParent.hasClass('open')) {
$thisParent
.parent()
.find(".open")
.toggleClass("open")
.find(".toggled_content")
.slideToggle();
}
$thisParent
.toggleClass("open")
.find(".toggled_content")
.slideToggle();
});
ul {
list-style: none;
background: #eee;
padding: 0;
margin: 0;
}
li a {
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover {
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>
main menu1
<div class="toggled_content">1</div>
</li>
<li>
main menu2
<div class="toggled_content">2</div>
</li>
<li>
main menu3
<div class="toggled_content">3</div>
</li>
<li>
main menu4
<div class="toggled_content">4</div>
</li>
<li>
main menu5
<div class="toggled_content">5</div>
</li>
</ul>
Edit:
Or just use the jquery-ui accordion widget.
$("#accordion").accordion({
heightStyle: "fill",
active: 3
});
$("#accordion").on("accordionactivate", function(event, ui) {
const offset = ui.newHeader[0].offsetTop;
$([document.documentElement, document.body]).animate({
scrollTop: offset
}, 200);
});
body {
margin: 0;
}
.ui-accordion {
height: 200vh; /* simulate height with content */
background: #eee;
}
.ui-accordion-header {
margin: 0;
padding: 10px 15px;
font-weight: normal;
}
.ui-accordion-header:hover {
background: #9c0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div id="accordion">
<h3>main menu 1</h3>
<div>1</div>
<h3>main menu 2</h3>
<div>2</div>
<h3>main menu 3</h3>
<div>3</div>
<h3>main menu 4</h3>
<div>4</div>
</div>

This might be a little more complex than it appears, because you probably do not want any of the DIVs to be made full-screen. Rather, you want the headings of all the DIVs to remain visible, and the contents of any one content div to fill all remaining vertical space.
jQueryUI does this for you, using their accordion tabs widget. You can either include jQueryUI in your project and use their functionality, or you can examine their code and see how they did it, then modify their code to work in your own project.
To incorporate jQueryUI is simple: just add it the same way you would add jQuery, right after the call to jQuery (that is, you also need jQuery for jQueryUI to work, and the link to jQueryUI must follow the link for jQuery) See this link for a code example.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Instead of adding .css() I have added .show(). It basically does the same by adding display:block
Try adding blow
jQuery(document).ready(function($) {
$('ul li a').on('click', function() {
$('.js_item').hide('slow')
$(this).parent().next().show('slow')
})
});
ul {
list-style: none;
background: #eee;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.js_item {
display: none;
}
li a {
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover {
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="main">
<li>main menu1</li>
<div class="load_content_for_menu_1 js_item">1</div>
<li>main menu2</li>
<div class="load_content_for_menu_2 js_item">2</div>
<li>main menu3</li>
<div class="load_content_for_menu_3 js_item">3</div>
<li>main menu4</li>
<div class="load_content_for_menu_4 js_item">4</div>
<li>main menu5</li>
<div class="load_content_for_menu_5 js_item">5</div>
</ul>
Hope this helps!

jQuery: Keep hovering despite browser proposal from input element

I have a navigation given by an nested ul list like this
<ul id='mainNav'>
<li> Some Stuff!
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
<li> Hover here to login!
<ul >
<li>
<div class='login'>
<p>Login</p>
<input type='password'>
<button>Okay</button>
</div>
</li>
</ul>
</ul>
and I use jQuery to show the menu on hover
$('ul#mainNav > li').hover(function() {
$(this).addClass("showMenu");
},
function(){
$(this).removeClass("showMenu");
}
);
This works fine, except for the input box for the login. In the moment where one moves the mouse pointer from the input box to a browser proposal entry, jQuery thinks that one left the li element and removes the class showMenu so that the submenu disappears.
So when I hover over the li element the login form opens
And as soon as I hover over the browser proposal the li element dissapears except for the browser proposal
I also created a jFiddle.
How can I tell jQuery to keep hovering if I move over the browser proposal from the input element?

As a solution You can remove the class .showMenu if event.target is not input
Also blur the input when the dropdown becomes hidden
$('ul#mainNav > li').hover(function(e) {
$(this).addClass("showMenu");
},
function(e) {
if (!$(e.target).is('input')) {
$(this).removeClass("showMenu");
$('input').blur();
}
});
#mainNav>li {
border: 3px solid #08C;
background-color: #FFF;
display: inline-block;
}
#mainNav li {
margin: 0;
padding: 0;
}
#mainNav,
#mainNav ul {
list-style: none;
margin: 0;
padding: 0;
}
#mainNav li>ul {
position: absolute;
display: none;
z-index: 1;
min-width: 200px;
padding: 0px;
margin: 0px;
text-align: left;
background-color: #FFF;
box-sizing: border-box;
}
#mainNav li.showMenu>ul {
display: block
}
.login {
border: 3px solid #08C;
padding: 20px;
margin: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method>
<ul id='mainNav'>
<li> Hover here to login!
<ul>
<li>
<div class='login'>
<p>Login</p>
<input type='password'>
<button>
Okay
</button>
</div>
</li>
</ul>
</ul>
</form>
https://jsfiddle.net/dzt87zbk/

Expand a div in a grid after each row jquery

I have this, actually i want to make something like google images function, i mean if i click the wherever li, the expanded div is always below the row that containing li that i've clicked, anny suggestion ? Thanks
FIDDLE >>
<div class="container">
<ul>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li class="expanded">
<div>abc</div>
</li>
</ul>
</div>
JS
$(document).ready(function() {
$( ".container ul li" ).click(function() {
var id = $(this).attr('id');
var idNum = id.split('-');
var num = parseInt(idNum[1]);
var a = Math.ceil(num/4)*4;
//alert(a);
$('.container ul li').removeClass('active');
$(this).addClass('active');
$('.container ul li li.expanded').slideUp(400,function(){
$(this).insertAfter($('.container ul li #item-'+a)).slideDown(400);
})
});
});
CSS
body, ul {
margin: 0px;
padding: 0px;
}
.container {
width: 90%;
margin: 0 auto;
}
li {
width: 23%;
margin: 10px 1% 0 1%;
float: left;
list-style: none outside none;
}
li img {
width: 100%;
}
.expanded {
position: relative;
display: none;
background: #ccc;
z-index: 1;
width: 100%;
height: 500px;
}

If I understand your question correctly you want the expanded element to behave as follows:
Show if an li is clicked.
Hide when the same li is clicked.
Hide first then show again if it is visible and a different li is clicked.
There are many ways to achieve this.
One relatively simple approach would be to differentiate your li elements so you can identify which specific li was clicked. This can be a done in a number of ways, but in your case you could simply add a unique id to each li.
I have used numbers here for demonstration purposes - you may want to be a bit more descriptive in your code.
Next you need to modify your javascript to check which li was clicked. You can use your "expanded" variable to keep track of which li last activated the expanded element. (we can regard 0 as its inactive state)
So on each click you check if the clicked li previously toggled the expanded element. If it did, then simply close the element. if it didn't then close the element and re-open it using a callback function.
I hope this answers your question.
EDIT: The below snippet has been revised to move the expanded element to its clicked li's row. This will only work if there are 4 images per row.
$(document).ready(function() {
var expanded = 0;
$( ".container ul li" ).click(function(e) {
e.preventDefault();
var clicked = $(this).attr("id");
if (clicked == expanded){
$( ".expanded" ).slideUp("slow", function(){
$(".expanded").remove();
expanded = 0;
});
}else if (expanded == 0){
$(".container ul #"+Math.ceil(clicked/4)*4).after('<li class="expanded"><div>abc</div></li>');
$( ".expanded" ).slideDown("slow");
expanded = clicked;
}else{
$( ".expanded" ).slideUp("slow", function(){
$(".expanded").remove();
$(".container ul #"+Math.ceil(clicked/4)*4).after('<li class="expanded"><div>abc</div></li>');
$( ".expanded" ).slideDown("slow", function(){
expanded = clicked;
});
});
}
});
});
body, ul {
margin: 0px;
padding: 0px;
height:1000px;
}
.container {
width: 90%;
margin: 0 auto;
}
li {
width: 23%;
margin: 10px 1% 0 1%;
float: left;
list-style: none outside none;
}
li img {
width: 100%;
}
.expanded {
position: relative;
display: none;
background: #ccc;
z-index: 1;
width: 100%;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul>
<li id="1">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="2">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="3">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="4">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="5">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="6">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="7">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="8">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
</ul>
</div>

li.after($( ".expanded" )) is the only line of code that you need here.
$(document).ready(function() {
var expanded = false;
$( ".container ul li" ).click(function(e) {
var li =$(this);
if (expanded) {
li.after($( ".expanded" ));
$( ".expanded" ).slideUp("slow");
expanded = false;
}
else {
li.after($( ".expanded" ));
$( ".expanded" ).slideDown("slow");
expanded= true;
}
});
});
body, ul {
margin: 0px;
padding: 0px;
}
.container {
width: 90%;
margin: 0 auto;
}
li {
width: 23%;
margin: 10px 1% 0 1%;
float: left;
list-style: none outside none;
}
li img {
width: 100%;
}
.expanded {
position: relative;
display: none;
background: #ccc;
z-index: 1;
width: 100%;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li class="expanded">
<div>abc</div>
</li>
</ul>
</div>

Basically, you need to find out if same element is clicked twice (if so, just slide div up), otherwise -> slide it up (close 'previous'), and then down (re-open). Since one div is in question, referencing 'previous' doesn't have too much sense, and, actually, i am not sure how this will work with mentioned ajax... However, credits to: icktoofay (How to see if you're clicking the same element twice? Jquery), here it is:
http://jsfiddle.net/3a7pjeb9/11/
$(document).ready(function() {
var previousTarget = null;
$(".container ul li").click(function(e) {
if ($('.expanded').is(':visible') != true) {
$(".expanded").slideDown("slow");
} else {
if (this === previousTarget) {
$(".expanded").slideUp("slow");
} else {
$(".expanded").slideUp("slow");
$(".expanded").slideDown("slow");
}
}
previousTarget = this;
});
});

Is this the result you wanted ? If no, let me know, I work to a project similar to yours.
http://jsfiddle.net/3a7pjeb9/14/
$(document).ready(function() {
var expanded = false;
$( ".container ul li" ).click(function(e) {
if (expanded) {
$( ".expanded" ).slideUp("slow").children().remove();
expanded = false;
}
else {
$( ".expanded" ).slideDown("slow");
$(this).clone().appendTo('.expanded');
expanded= true;
}
});
});

How to display a div outside of multi-leveled menu when hovering on sub-level item

I have a menu comprised of HTML and CSS and I'm trying to get it so that once the user hovers over the sub level item within the menu, the div info1 will appear to the right of the menu. Ideally, I would like to do this with HTML and CSS if possible, but if there is a simpler fix with jQuery or JavaScript, that would work too. I would certainly appreciate the help.
Here's the HTML:
<body>
<div id="navigation">
<nav>
<ul class="top-level">
<li>Top-level Item
<ul class="sub-level">
<li>Sub-level Item</li>
<li>Sub-level Item</li>
<li>Sub-level Item</li>
</ul>
</li>
<li>Top-level Item
<ul class="sub-level">
<li>Sub-level Item
<li>Sub-level Item</li>
<li>Sub-level Item</li>
<li>Sub-level Item</li>
</ul>
</li>
</nav>
</div>
<div ID="info1">
<center><img src="image.jpg" border="0" height=170 width=250 ></center><br><center><table BORDER=4 CELLPADDING=6 ><tr><td><br>I want this div to display on the right side of the screen once the mouse has hovered over a sub-level menu item.<br><br></td></tr></table></center>
</div>
</body>
and here's the CSS:
#navigation
{
width: 200px;
font-size: 0.75em;
}
#navigation ul
{
margin: 0px;
padding: 0px;
}
#navigation li
{
list-style: none;
}
ul.top-level li
{
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
#navigation a
{
color: #fff;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation li:hover
{
background: #f90;
position: relative;
}
ul.sub-level
{
display: none;
}
li:hover .sub-level
{
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 200px;
top: -1px;
}
ul.sub-level li
{
border: none;
float:left;
width:200px;
}
#info1
{
font-family: "Verdana,Arial,Helvetica";
size: -1;
display: none;
}
*/ I thought this might work*/
li:hover .top-level li:hover .sub-level + #info1
{
display: block;
}
The code can be viewed at http://jsfiddle.net/brisket27/C5Pn9/7/

You can not go back or traverse the dom up with CSS. "There are no parent selectors in CSS, not even in CSS3" via CSS-Tricks
You can solve your problem with some basic jquery:
Demo: jsFiddle
$('.top-level li .sub-level li').on('mouseover', function() {
// Position #info1 off to the side of the .sub-level
$('#info1').css({
'top': $(this).parent('.sub-level').position().top,
'left': $(this).parent('.sub-level').position().left + $(this).parent('.sub-level').outerWidth(),
});
$('#info1').show();
}).on('mouseleave', function() {
$('#info1').hide();
});
The current code puts #info1 next to the sub-level. If you want #info1 always on the absolute right side of the screen, remove the position code in the js and just apply right: 0; to #info1 in CSS.

Your approach was in a correct direction. I'll try to explain why this code did not work -
*/ I thought this might work*/
li:hover .top-level li:hover .sub-level + #info1 {
display: block;
}
This is Adjacent sibling combinator, applicable to only the 'Adjacent' siblings.
In your case, div #info1 is outside the nav logic.
Your CSS rule would work if the div you want to display was placed right after the ul li's
for ex.
1) In the following example Divs #one and #two are adjacent.
<div = "one">I</div>
<div = "two">II</div>
but the one mentioned below are not.
<div = "cover">
<div = "one">I</div>
</div>
<div = "two">II</div>
2) As mentioned, here
<ul class="sub-level">
<li>Sub-level Item
</li>
</ul>
<div id="test">HERE IS A DIV</div> <!-- This div is adjacent to ul -->
and a CSS rule, will WORK!
ul.sub-level:hover + #test { /* This works because #test and ul.sub-level are adjacent*/
display: none;
}
Said that, I guess it will be easier for you to go for option like jquery to implement your logic instead of CSS.
$(document).ready(function(){
$('ul.sub-level li').mouseenter(function(){
$('#info1').show();
});
$('ul.sub-level li').mouseleave(function(){
$('#info1').hide();
});
});

Use the following snippet using jquery for the hover effect:
$(".sub-level>li").mouseenter(function() {
$("#info1").show();
}).mouseleave(function() {
$("#info1").hide();
});
To display the block on right of the screen you can use either use:
#info1 {
position: absolute; right:0;
}
or
#info1 {
float:right;
}

cannot load ajax content on superslides jquery plugin

i am quite a newbie to jquery,
Actually i am using Superslides plugin Superslides
for background and using a div in front to load some other page using ajax.
Now the problem is that when i load the page eg. clients page with jquery ajax method it loads fine but then the main page navigation stops working. I mean List items which lets users move to next slide dosen't work.
Maybe the list items in clients page is conflicting with the main page list items as i have been using Li to navigate main page from back slide to next slide.
here is my code
This is how i set up click binding with Li navigation
the jquery code for slide
$(document).ready(function () {
$('.mainMenuListItem').click(function () {
var currentThumbSel = $(this).attr("data-id");
$('.slides-pagination a:nth-child(' + currentThumbSel + ')').click();
});
});
</script>
and the html navigation code is
<div id="mainMenuStrip">
<ul id="mainMenuList">
<li class="mainMenuListItem" id="homeMenuListItem" data-id="1">HOME |</li>
<li class="mainMenuListItem" data-id="2">ABOUT |</li>
<li class="mainMenuListItem" id="clientsMenuListItem" data-id="3">CLIENTS |</li>
<li class="mainMenuListItem" data-id="4">HOW WE WORK | </li>
<li class="mainMenuListItem" data-id="5">OUR PROJECTS |</li>
<li class="mainMenuListItem" data-id="6">DOWNLOAD TOOLS |</li>
<li class="mainMenuListItem" data-id="7">CONTACT</li>
</ul>
</div>
And now the clients page code is
<style>
#clientsList {
list-style-type: none;
width: 810px;
height: 460px;
margin: 0px;
padding: 0px;
}
#clientsList li {
float: left;
height: 150px;
margin-left: 4px;
margin-top: 7px;
width: 265px;
background-color: black;
cursor: pointer;
}
body {
margin: 0px;
}
.overlayClient {
position: absolute;
height: 150px;
width: 265px;
z-index: 2;
background-color: red;
opacity: 0.7;
display: none;
}
.informationZoom {
color: white;
font-family: verdana;
font-size: 51px;
margin-left: 115px;
float: left;
font-weight: bold;
margin-top: 38px;
}
</style>
<script>
$(document).ready(function() {
//$('#clientsList>li').mouseenter(function() {
// $(this).find(".overlayClient").fadeIn(500);
//});
});
$(document).ready(function () {
//$('#clientsList>li').mouseleave(function () {
// $(this).find(".overlayClient").fadeOut(500);
//});
});
</script>
<ul id="clientsList">
<li>
<div class="overlayClient"><span class="informationZoom">+</span></div>
<img src="images/clients/eaSports.jpg" />
</li>
<li>
<div class="overlayClient"><span class="informationZoom">+</span></div>
<img src="images/clients/eaSports.jpg" />
</li>
<li>
<div class="overlayClient"><span class="informationZoom">+</span></div>
<img src="images/clients/eaSports.jpg" />
</li>
<li>
<div class="overlayClient"><span class="informationZoom">+</span></div>
<img src="images/clients/eaSports.jpg" />
</li>
And here is the Ajax Load method
<script>
$(document).ready(function () {
$('#clientsMenuListItem').click(function () {
$('#clientsAjaxContainer').load('clients.html');
});
});
</script>
you can see that clients page also contains li, maybe some clash with Li??
Please help me on this.
thanks.

It seems like your Jquery is clashing, try load jquery on main site and dont use it inside the child page.
thanks