how to make simple slider of image in javascript

how to make simple slider of image in javascript - javascript

i am try to make just simple slider of images
images in img tag not a background image
all images have display:none only first li have active class active class is display:block
click on button add active class to only next one li and remove active from pre li
i try but it active class add with all next li tag on click on button
var btn_next = document.getElementById('next-btn');
btn_next.onclick = function() {
if ($('#main_chagen li').hasClass('acitve') === true) {
$('#main_chagen li.acitve').removeClass('acitve')
$('#main_chagen li').next().addClass('acitve');
} else {
}
}
.main_chagen {
width: 100%;
float: left;
position: relative;
}
#main_chagen img {
width: 100%;
height: 26rem;
object-fit: cover;
}
#next-btn,
#pre-btn {
position: absolute;
top: 15rem;
padding: 5px 20px;
}
#next-btn {
right: 0;
}
#pre-btn {
left: 0;
}
#main_chagen li {
display: none;
}
.img_acitve {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<ul id="main_chagen">
<li class="acitve">
<img src="1.jpg">
</li>
<li>
<img src="2.jpg">
</li>
<li>
<img src="3.jpg">
</li>
<li>
<img src="4.jpg">
</li>
<li>
<img src="5.jpg">
</li>
</ul>
<button id="next-btn">next</button>
<button id="pre-btn">pre</button>
</div>

Here is a working example.
You will need to study it a bit
$(function() {
$('button').on("click", function() {
var $cur = $('#main_chagen li.active'); // possibly active
var max = $('#main_chagen li').length; // max number of LIs
var dir = this.id.indexOf("next") === 0 ? 1:-1; // which button
var idx = $cur.length === 0 ? 0 : $cur.index()+dir; // find the index of what we want to show
if (idx >= max) idx = 0; // are we at end or beginning
if (idx < 0) idx = max-1;
$('#main_chagen li').removeClass("active").eq(idx).addClass("active");
})
$("#next-btn").click(); // show the first
});
.main_chagen {
width: 100%;
float: left;
position: relative;
}
#main_chagen img {
width: 100%;
height: 26rem;
object-fit: cover;
}
#next-btn,
#pre-btn {
position: absolute;
top: 15rem;
padding: 5px 20px;
}
#next-btn {
right: 0;
}
#pre-btn {
left: 0;
}
#main_chagen li {
display: none;
}
li.active {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<ul id="main_chagen">
<li>
<img src="https://via.placeholder.com/150/0000FF/808080?text=1">
</li>
<li>
<img src="https://via.placeholder.com/150/0000FF/080808?text=2">
</li>
<li>
<img src="https://via.placeholder.com/150/FF00FF/808080?text=3">
</li>
<li>
<img src="https://via.placeholder.com/150/00FFFF/808080?text=4">
</li>
<li>
<img src="https://via.placeholder.com/150/AABBFF/808080?text=5">
</li>
</ul>
<button id="next-btn">next</button>
<button id="pre-btn">pre</button>
</div>

Related

Navbar not changing background colour when scrolling

Tried a few different JavaScript options and I am hoping it is something really simple that I am missing.
Several attempts and Google searches as to how exactly I do this seems to lead me on a road to nowhere for every different solution so far.
Any suggestions as to how to fix this would be apppreciated.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementsByClassName(".navbar").style.backgroundColor = "transparent";
} else {
document.getElementsByClassName(".navbar").style.backgroundColor = "black";
}
}
ul {
padding: 0;
margin: 0;
}
ul li {
list-style-type: none;
}
.hero-img {
filter: brightness(30%);
background-size: cover;
}
.hero-image-overlay {
width: 50%;
margin: 0 auto;
padding: 1rem 0;
}
.navbar {
padding: 0;
background-color: transparent;
position: fixed;
top: 0;
width: 100%;
}
.navbar ul {
display: flex;
position: relative;
}
.navbar ul li {
padding: .5rem 0;
color: white;
padding: 1rem;
width: 100%;
}
ul a {
display: inline-block;
}
.nav-img {
width: 175px;
}
.header-li:hover,
.header-li:focus {
color: orangered;
transition: all .3s;
}
.header-li {
display: none;
}
.news-posts {
max-width: 1250px;
columns: 500px 2;
margin: 0 auto;
}
<html>
<body>
<!-- start of Header area -->
<header>
<div class="hero-image">
<img class="hero-img" src="img/lower-height-team-photo.jpg" alt="team-photo">
</div>
<nav class="navbar">
<ul class="header-ul">
<a href="#">
<li class="img-li"><img src="img/imageedit_3_3953793469.png" alt="" class="nav-img"></li>
</a>
<a href="#">
<li class="header-li">About Us</li>
</a>
<a href="#">
<li class="header-li">Team</li>
</a>
<a href="#">
<li class="header-li">Fixtures/Results</li>
</a>
<a href="#">
<li class="header-li">News</li>
</a>
<a href="#">
<li class="header-li">Contact</li>
</a>
</ul>
<i class="fa fa-bars fa-2x"></i></>
</nav>
</header>
</body>
</html>
Many thanks to any solutions you can offer.

Firstly, remove . sign when getting element by class name, it should be
document.getElementsByClassName("navbar")
and not
document.getElementsByClassName(".navbar")
Also, take a note that getElementsByClassName returns an array so, in order to set a background color to work, it should be something like this:
document.getElementsByClassName(".navbar")[0].style.backgroundColor = "black";
This is complete javascript code
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementsByClassName("navbar")[0].style.backgroundColor = "transparent";
} else {
document.getElementsByClassName("navbar")[0].style.backgroundColor = "black";
}
}
// Do not forget to call the function
scrollFunction();
Also remove display: none in header-li class

How to close hamburger nav on click of the <a> tags?

As the title states, I am wanting my hamburger navbar to close when I click on the tags I have tried many ways for the last couple hours but am unable to solve my problem?
I Have tried setting the hide() property with jquery but no luck think it may be because i am pretty new to JS and am just wanting to get my website finished.
const menuBtn = document.querySelector(".menu-btn");
const mobileContent = document.querySelector(".mobile-content");
const mobileItem = document.querySelector(".mobile-item");
const mobileItems = document.querySelectorAll(".mobile-items");
// Set Initial State Of Menu
let showMenu = false;
menuBtn.addEventListener("click", toggleMenu);
function toggleMenu() {
if (!showMenu) {
menuBtn.classList.add("close");
mobileContent.classList.add("show");
mobileItem.classList.add("show");
mobileItems.forEach(item => item.classList.add("show"));
// Set Menu State
showMenu = true;
} else {
menuBtn.classList.remove("close");
mobileContent.classList.remove("show");
mobileItem.classList.remove("show");
mobileItems.forEach(item => item.classList.remove("show"));
// Set Menu State
showMenu = false;
}
}
.mobile-nav {
display: block;
position: fixed;
width: 100%;
top: 0;
z-index: 3;
}
.mobile-nav .menu-btn {
position: absolute;
z-index: 3;
right: 20px;
top: 20px;
cursor: pointer;
}
.mobile-nav .menu-btn .btn-line {
width: 28px;
height: 3px;
margin: 0 0 5px 0;
background: #333;
}
.mobile-content {
position: fixed;
top: 0;
width: 100%;
opacity: 0.9;
visibility: hidden;
}
.mobile-content.show {
visibility: visible;
}
.mobile-content .mobile-item {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
float: right;
width: 100%;
height: 100vh;
overflow: hidden;
margin: 0;
padding: 0;
background: blue;
list-style: none;
transform: translate3d(0, -100%, 0);
}
.mobile-content .mobile-link {
display: inline-block;
position: relative;
font-size: 2rem;
padding: 1rem 0;
font-weight: bold;
color: #333;
text-decoration: none;
}
<!-- Mobile Nav -->
<div class="mobile-nav">
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<h2>MATTY</h2>
<nav class="mobile-content">
<ul class="mobile-item">
<li class="mobile-items">
<a href="#about-me" class="mobile-link">
ABOUT
</a>
</li>
<li class="mobile-items">
<a href="#the-portfolio" class="mobile-link">
PORTFOLIO
</a>
</li>
<li class="mobile-items">
<a href="#" class="mobile-link">
BLOG
</a>
</li>
<li class="mobile-items">
<a href="#contact-me" class="mobile-link">
CONTACT
</a>
</li>
</ul>
</nav>
</div>

I had to remove some of your CSS as it was not working in the snippet.
Recommend you use element.classList.toggle() as below.
Note how much simpler the code becomes.
EDIT: Clicking any a tag will now close menu
document.addEventListener("click", (e) => {
if(e.target.matches('.menu-btn')
|| e.target.matches('.btn-line')
|| e.target.matches('a')) {
toggleMenu();
}
});
function toggleMenu() {
document.querySelector('.mobile-content').classList.toggle('hide');
}
.btn-line {
display: block;
width: 50px;
margin: 5px;
border: 2px solid black;
}
.mobile-nav {
display: block;
width: 100%;
z-index: 3;
}
.mobile-content {
position: fixed;
width: 100%;
opacity: 0.9;
}
.hide {
display: none;
}
<!-- Mobile Nav -->
<div class="mobile-nav">
<div class="menu-btn">
<span class="btn-line"></span>
<span class="btn-line"></span>
<span class="btn-line"></span>
</div>
<a href="#home">
<h2>MATTY</h2>
</a>
<nav class="mobile-content hide">
<ul class="mobile-item">
<li class="mobile-items">
<a href="#about-me" class="mobile-link">
ABOUT
</a>
</li>
<li class="mobile-items">
<a href="#the-portfolio" class="mobile-link">
PORTFOLIO
</a>
</li>
<li class="mobile-items">
<a href="#" class="mobile-link">
BLOG
</a>
</li>
<li class="mobile-items">
<a href="#contact-me" class="mobile-link">
CONTACT
</a>
</li>
</ul>
</nav>
</div>

#MPB A good way to dabble into some simple JQuery language is a way to fix your problem. A quick and easy way to make a good Hamburger Navigation menue is with the toggleClass(); function in JQuery. Just make a #keyframes-animation within an un-set class and toggleClass(); will switch between the two seamlessly. I do this all the time, comment if you'd like me to forward the code to you for you to use.

Why Ternary Operator doesn't work with using 'hasClass'?

I'm making my own slide plugin using jQuery for practice. The problem is, I don't know why but some reason ternary operator doesn't work. The slider only responses when user clicks prev button which registered as a condition from the code.
I expected it should move to right side when user presses next button, but next button is totally broken.
I could just make 2 different trigger buttons and use multiple if statements for solving this problem, but I want to merge it on single line by using ternary operator and minifise my code as much as I can.
How would I solve this problem?
Code block:
(function($) {
$.fn.sliderModule = function(options) {
const defaults = {
myGallery: $(this)
};
var settings = $.extend({
myItems: null,
trigger: null,
current: null
}, defaults, options);
$(settings.trigger).on('click', function() {
if (!(defaults.myGallery.is(':animated'))) {
var movement = settings.trigger.hasClass('prev') ? -1 : 1
defaults.myGallery.animate({left: "+=" + (100 / settings.current) * movement + '%'}); // It doesn't respond the `next` button.
};
});
};
})(jQuery);
$(function() {
$('#slide-list').sliderModule({
myItems: '#img-slider',
trigger: $('#buttons').find('#button'),
current: 4
});
})
li {
list-style-type: none;
}
#slide-container {
position: relative !important;
width: 1170px;
margin: 0 auto;
overflow: hidden;
height: auto;
}
#slide-list {
margin: 0 auto;
position: relative;
display: flex;
width: 1170px;
}
#buttons {
width: 1170px;
margin: 0 auto;
display: flex;
justify-content: center;
}
#buttons li {
margin: 0 20px;
}
.slide-l-quarter {
flex-shrink: 0;
position: relative;
white-space: nowrap;
width: calc(100% / 4);
}
.slide-l-quarter img {
width: 100%;
height: auto;
}
<div id="slide-container">
<ul id="slide-list">
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/PVsHlX9.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/WfWhNnU.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/eqHdnNs.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/0jziABY.jpg" alt="">
</li>
</ul>
</div>
<ul id="buttons">
<li id="button" class="prev">Prev</li>
<li id="button" class="next">Next</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

There is no problem with using ternary operators. But you made some mistakes along the way.
IDs must be unique
You cannot have this in your HTML:
<li id="button" class="prev">Prev</li>
<li id="button" class="next">Next</li>
If you need multiple elements to have the same selector, use a class instead:
<li class="button prev">Prev</li>
<li class="button next">Next</li>
settings.trigger selects both buttons
When you do this:
settings.trigger.hasClass('prev')
You're refering to both buttons. You only want the one clicked by the user:
$(this).hasClass('prev')
Fixed version
(function($) {
$.fn.sliderModule = function(options) {
const defaults = {
myGallery: $(this)
};
var settings = $.extend({
myItems: null,
trigger: null,
current: null
}, defaults, options);
$(settings.trigger).on('click', function() {
if (!(defaults.myGallery.is(':animated'))) {
var movement = $(this).hasClass('prev') ? -1 : 1;
defaults.myGallery.animate({left: "+=" + (100 / settings.current) * movement + '%'});
};
});
};
})(jQuery);
$(function() {
$('#slide-list').sliderModule({
myItems: '#img-slider',
trigger: $('#buttons').find('.button'),
current: 4
});
})
li {
list-style-type: none;
}
#slide-container {
position: relative !important;
width: 1170px;
margin: 0 auto;
overflow: hidden;
height: auto;
}
#slide-list {
margin: 0 auto;
position: relative;
display: flex;
width: 1170px;
}
#buttons {
width: 1170px;
margin: 0 auto;
display: flex;
justify-content: center;
}
#buttons li {
margin: 0 20px;
}
.slide-l-quarter {
flex-shrink: 0;
position: relative;
white-space: nowrap;
width: calc(100% / 4);
}
.slide-l-quarter img {
width: 100%;
height: auto;
}
<div id="slide-container">
<ul id="slide-list">
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/PVsHlX9.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/WfWhNnU.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/eqHdnNs.jpg" alt="">
</li>
<li class="slide-l-quarter" id="image-slider">
<img src="https://i.imgur.com/0jziABY.jpg" alt="">
</li>
</ul>
</div>
<ul id="buttons">
<li class="button prev">Prev</li>
<li class="button next">Next</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Javascript Drop Down Menu not working

I am trying to make a drop down menu with Javascript (no JQuery). In my HTML, I have an unordered list that contains two list items, each containing an anchor and an unordered list with more list items inside.
I am not concerned about the menus looking pretty, just that the Javascript works. Right now, I am trying to get it to set up event listeners through a
while loop so that when the top level list items are moused over, the class of the lower list itemsnwill change from one in which the CSS is set to display:none; to a class that has display:block; to make them appear.
I only have two tabs here, but that is because I shortened it from a list of ten tabs. I also don't care about any further submenus.
JS Fiddle: https://jsfiddle.net/xL5pukd5/
HTML:
<header>
<!-- <ul> <li><a></a><ul> <li><a></a></li> -->
<!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor -->
<nav id="dd-menu-container">
<ul id="dd-menu">
<li class="dd-menu-tab">
Link 1
<ul class="dd-submenu">
<li class="dd-submenu-tab">
SubLink1a</li>
<li class="dd-submenu-tab">
Sublink1b</li>
</ul>
</li>
<li class="dd-menu-tab">
Link2
<ul class="dd-submenu">
<li class="dd-submenu-tab">
Sublimn2a</li>
<li class="dd-submenu-tab">
Sublink2b</li>
<li class="dd-submenu-tab">
Sublink2c</li>
</ul>
</li>
</nav>
</header>
JavaScript:
getTabs = function(elementClass) {
var tabs = document.getElementsByClassName(elementClass);
return tabs
};
getSubmenus = function(elementClass) {
var submenus = document.getElemenetsByClassName(elementClass);
return submenus;
};
window.onload = function {
var tabs = getTabs("dd-menu-tab");
var submenus = getSubmenus("dd-submenu");
var tabNumber = tabs.length - 1;
var currentTab = 0;
while (currentTab <= tabNumber) {
tabs[currentTab].onmouseover = function {
submenus[currentTab].className = "dd-submenu-onmouseover"
};
tabs[currentTab].onmouseout = function {
submenus[curenetTab].className = "dd-submenu"
};
currentTab += 1;
}
};
CSS:
.dd-submenu {
display: none;
}
.dd-submenu-onmouseover {
display: block;
}
I've tried using other prewritten drop down menu methods, but I couldn't get them to work, so I tried to create my own. Thanks in advance to any help :)

There are multiple issues with your script, including typos are said in the comment and wrong use of a closure variable in a loop.
But you really don't need js to fix this, you can use the :hover css selector to do it like
html,
body {
margin: 0;
padding: 0;
}
nav {
display: block;
padding: 0px;
margin: 0;
top: 0;
left: 0;
width: 100%;
background-color: beige;
}
.dd-menu-tab-anchor {
display: inline-block;
color: white;
}
.dd-menu {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.dd-menu-tab {
float: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: auto;
padding-right: auto;
width: 9%;
text-align: center;
}
.dd-submenu {
display: none;
}
.dd-menu-tab:hover .dd-submenu {
display: block;
}
li {
list-style-type: none;
background-color: #3300FF;
border: 2px;
border-color: white;
}
a {
text-align: center;
}
<header>
<!-- <ul> <li><a></a><ul> <li><a></a></li> -->
<!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor -->
<nav id="dd-menu-container">
<ul id="dd-menu">
<li id="dd-menu-tab1" class="dd-menu-tab">
Link 1
<ul id="dd-submenu1" class="dd-submenu">
<li id="dd-submenu1-tab1" class="dd-submenu-tab">
SubLink1a
</li>
<li id="dd-submenu1-tab2" class="dd-submenu-tab">
Sublink1b
</li>
</ul>
</li>
<li id="dd-menu-tab2" class="dd-menu-tab">
Link2
<ul id="dd-submenu2" class="dd-submenu">
<li id="dd-submenu2-tab1" class="dd-submenu-tab">
Sublimn2a
</li>
<li id="dd-submenu2-tab2" class="dd-submenu-tab">
Sublink2b
</li>
<li id="dd-submenu2-tab3" class="dd-submenu-tab">
Sublink2c
</li>
</ul>
</li>
</nav>
</header>
<div>
<h1 id="site title">Website.com</h1>
</div>
<body>
<p>First paragraph sample text</p>
<p>Second paragraph sample text</p>
<p>Third paragraph sample text</p>
</body>
<footer>
<p>
References
</p>
<!-- <script src="file.js" type="text/javascript"></script> -->
</footer>
</html>
If you still want to continue using your logic
getTabs = function(elementClass) {
var tabs = document.getElementsByClassName(elementClass);
console.log(tabs);
return tabs
};
getSubmenus = function(elementClass) {
var submenus = document.getElementsByClassName(elementClass);
console.log(submenus);
return submenus;
};
window.onload = function() {
var tabs = getTabs("dd-menu-tab");
var submenus = getSubmenus("dd-submenu");
var tabNumber = tabs.length - 1;
var currentTab = 0;
[].forEach.call(tabs, function(el, idx) {
var submenu = submenus[idx];
el.addEventListener('mouseenter', function() {
submenu.className = "dd-submenu-onmouseover"
});
el.addEventListener('mouseleave', function() {
submenu.className = "dd-submenu"
});
})
};
html,
body {
margin: 0;
padding: 0;
}
nav {
display: block;
padding: 0px;
margin: 0;
top: 0;
left: 0;
width: 100%;
background-color: beige;
}
.dd-menu-tab-anchor {
display: inline-block;
color: white;
}
.dd-menu {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.dd-menu-tab {
float: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: auto;
padding-right: auto;
width: 9%;
text-align: center;
}
.dd-submenu {
display: none;
}
.dd-submenu-onmouseover {
display: block;
}
li {
list-style-type: none;
background-color: #3300FF;
border: 2px;
border-color: white;
}
a {
text-align: center;
}
<header>
<!-- <ul> <li><a></a><ul> <li><a></a></li> -->
<!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor -->
<nav id="dd-menu-container">
<ul id="dd-menu">
<li id="dd-menu-tab1" class="dd-menu-tab">
Link 1
<ul id="dd-submenu1" class="dd-submenu">
<li id="dd-submenu1-tab1" class="dd-submenu-tab">
SubLink1a
</li>
<li id="dd-submenu1-tab2" class="dd-submenu-tab">
Sublink1b
</li>
</ul>
</li>
<li id="dd-menu-tab2" class="dd-menu-tab">
Link2
<ul id="dd-submenu2" class="dd-submenu">
<li id="dd-submenu2-tab1" class="dd-submenu-tab">
Sublimn2a
</li>
<li id="dd-submenu2-tab2" class="dd-submenu-tab">
Sublink2b
</li>
<li id="dd-submenu2-tab3" class="dd-submenu-tab">
Sublink2c
</li>
</ul>
</li>
</nav>
</header>
<div>
<h1 id="site title">Website.com</h1>
</div>
<body>
<p>First paragraph sample text</p>
<p>Second paragraph sample text</p>
<p>Third paragraph sample text</p>
</body>
<footer>
<p>
References
</p>
</footer>
Demo: Fiddle

getTabs = function(elementClass) {
var tabs = document.getElementsByClassName(elementClass);
console.log(tabs);
return tabs
};
getSubmenus = function(elementClass) {
var submenus = document.getElemenetsByClassName(elementClass);
console.log(submenus);
return submenus;
};
window.onload = function {
var tabs = getTabs("dd-menu-tab");
var submenus = getSubmenus("dd-submenu");
var tabNumber = tabs.length - 1;
var currentTab = 0;
while (currentTab <= tabNumber) {
tabs[currentTab].onmouseover = function {
submenus[currentTab].className = "dd-submenu-onmouseover"
};
tabs[currentTab].onmouseout = function {
submenus[curenetTab].className = "dd-submenu"
};
currentTab += 1;
}
};
html,
body {
margin: 0;
padding: 0;
}
nav {
display: block;
padding: 0px;
margin: 0;
top: 0;
left: 0;
width: 100%;
background-color: beige;
}
.dd-menu-tab-anchor {
display: inline-block;
color: white;
}
.dd-menu {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.dd-menu-tab {
float: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: auto;
padding-right: auto;
width: 9%;
text-align: center;
}
.dd-submenu {
display: none;
}
.dd-menu-tab:hover .dd-submenu {
position:absolute;
display: block;
}
li {
list-style-type: none;
background-color: #3300FF;
border: 2px;
border-color: white;
}
a {
text-align: center;
}
<header>
<!-- <ul> <li><a></a><ul> <li><a></a></li> -->
<!-- dd-menu dd-menu-tab dd-menu-tab-anchor dd-submenu dd-submenu-tab dd-submenu-tab-anchor -->
<nav id="dd-menu-container">
<ul id="dd-menu">
<li id="dd-menu-tab1" class="dd-menu-tab">
Link 1
<ul id="dd-submenu1" class="dd-submenu">
<li id="dd-submenu1-tab1" class="dd-submenu-tab">
SubLink1a</li>
<li id="dd-submenu1-tab2" class="dd-submenu-tab">
Sublink1b</li>
</ul>
</li>
<li id="dd-menu-tab2" class="dd-menu-tab">
Link2
<ul id="dd-submenu2" class="dd-submenu">
<li id="dd-submenu2-tab1" class="dd-submenu-tab">
Sublimn2a</li>
<li id="dd-submenu2-tab2" class="dd-submenu-tab">
Sublink2b</li>
<li id="dd-submenu2-tab3" class="dd-submenu-tab">
Sublink2c</li>
</ul>
</li>
</nav>
</header>
<div>
<h1 id="site title">Website.com</h1>
</div>
<body>
<p>First paragraph sample text</p>
<p>Second paragraph sample text</p>
<p>Third paragraph sample text</p>
</body>
<footer>
<p>
References
</p>
<!-- <script src="file.js" type="text/javascript"></script> -->
</footer>
</html>

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;
}
});
});

We Keep Coding

JavaScript is the programming language of the Web.

how to make simple slider of image in javascript - javascript

Related

Navbar not changing background colour when scrolling

How to close hamburger nav on click of the <a> tags?

Why Ternary Operator doesn't work with using 'hasClass'?

Javascript Drop Down Menu not working

Expand a div in a grid after each row jquery

Categories

Resources