I am trying to make my slider slide to the next 3 slides in my carousel.How it should work is the first 3 images should show, and then when you click the next arrow the next 3 images should show.
I am not sure where I am going wrong. Basically the opacity of the last 3 pictures should be 0 until you click next then the opacity becomes 1 for the next 3 pictures.
This is what I have done so far:
HTML:
<section>
<div class="immigration-service">
<h1>Cross-border financial and immigration services</h1>
<div class="carousel">
<ul>
<li>
<img
class="slide"
src="images/British citizenship and Immigration.jpg"
alt="British citizenship and Immigration Image"
/>
</li>
<li>
<img
class="slide"
src="images/Australian Migration.jpg"
alt="Australian Migration Image"
/>
</li>
<li>
<img
class="slide"
src="images/Citizenship by investment.jpg"
alt="Citizenship by investment Image"
/>
</li>
<li>
<img
class="slide-2"
src="images/British citizenship and Immigration.jpg"
alt="British citizenship and Immigration Image"
/>
</li>
<li>
<img
class="slide-2"
src="images/Australian Migration.jpg"
alt="Australian Migration Image"
/>
</li>
<li>
<img
class="slide-2"
src="images/Citizenship by investment.jpg"
alt="Citizenship by investment Image"
/>
</li>
</ul>
<button class="button prev" data-carousel-button="prev">
<
</button>
<button class="button next" data-carousel-button="next">
>
</button>
</div>
</div>
</section>
CSS:
.immigration-service
{
margin-top: 34vh;
}
.immigration-service h1
{
padding-top: 113px;
text-align: center;
}
.immigration-service ul
{
display: flex;
margin:0;
padding:0;
overflow:hidden;
}
.immigration-service li
{
display: block;
list-style-type: none;
}
.button {
display: flex;
font-size: 60px;
align-items: center; justify-content: center;
color: #115577;
width: 30px;
height: 50px;
border: 0px;
}
button.prev {
position: absolute;
left: 0;
top: 106vw;
}
button.next {
position: absolute;
right: 55vw;
top: 106vw;
}
Javascript:
let images = document.querySelectorAll('ul li');
let index = 0;
window.show = function(increase) {
index = index + increase;
index = Math.min(Math.max(index,0), images.length-1);
images[index].scrollIntoView({behavior: 'smooth'});
}
Related
I want to make a made this thumbnail scroll bar for woocommerce But it is not working correct and I can't get it to work. This is for woocommerce product gallery so I can't really make changes to the html thats why there are ol
Is it also possible to have te scrollbar scroll to the item that is clicked?
$(document).ready(function() {
var scrollTo = 0;
$('.flex-control-nav').on('click', "img", function() {
var activeItem = $('li.active');
var selectedItem = $(this).parent()
var activeIndex = $('li').index(activeItem);
var selectedIndex = $('li').index(selectedItem);
scrollTo = $('.flex-control-nav li').scrollLeft() -selectedItem.position().left + ($('.flex-control-nav').width() / 2) - (selectedItem.width() / 2);
$('.flex-control-nav').css('transform', 'translateX(' + scrollTo + 'px)');
activeItem.removeClass('active');
selectedItem.addClass('active');
});
});
.flex-control-thumbs li {
display: flex;
overflow-x: visible;
flex: 1 0 40%;
}
ol>li {
padding: 2px;
}
li {
width: 50px;
margin: 0;
cursor: pointer;
height: 100px;
}
img{
background: blue;
}
ol{
list-style: none;
}
.flex-control-thumbs {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
margin: 0 50px;
}
ul {
margin: 25px -2px 0;
max-width: 68%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<ol class="flex-control-nav flex-control-thumbs">
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
<li>
<img src="" alt="img" class="" draggable="false">
</li>
</ol>
I have hundreds of html-based journal articles that contain html snippets like the example below to reference images:
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe"><!-- named anchor --></a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png">
<div class="long-desc" />
<a target="xrefwindow" href="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" id="ID0ELD">https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png</a>
<div class="permissions">
<p class="copyright" />
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</a>
</div>
On document ready, using JavaScript and CSS3 how can I show the thumbnail image contained in the first 'a' tag, along with the contents of the 'long-desc' and 'permissions' divs beneath... and then when the thumbnail is clicked, open the image in the second (daughter) 'a' tag in a modal that fills the screen (and has a close button)?
Check this out. You can edit styles as you need for your purpose. It is just a sketch.
document.addEventListener('DOMContentLoaded', function() {
let thumbnail = document.querySelector('.thumbnail');
let close = document.querySelector('.modal-close');
let overlay = document.querySelector('.overlay');
thumbnail.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.add('visible')
});
close.addEventListener('click', function(e) {
e.preventDefault();
overlay.classList.remove('visible')
});
});
.thumbnail-image {
border: 3px solid #BBB;
border-radius: 4px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.overlay.visible{
display:block;
}
.modal-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.modal-image {
height: calc(100vh / 1.28);
width: 100vh;
margin: auto;
}
.modal-image>img {
max-width: 100%;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
border: 2px solid #444;
background: #bbb;
cursor: pointer;
}
<div class="fig panel" style="display: float; clear: both">
<a id="de8adf66-3683-c412-3cd6-45bc686a4ebe">
<!-- named anchor -->
</a>
<h5 class="label">Innovation attributes</h5>
<div class="caption">
<p class="first" id="e5a7d435-9a86-3b8e-8a85-5835cdfa4a67">
<i>Adams, 2003.</i>
</p>
</div>
<a id="ID0EHD" href="#" class="thumbnail">
<img class="thumbnail-image" src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe-300x235.png" alt="show full image" title="show full image" />
</a>
<div class="long-desc">
<div class="permissions">
<p class="copyright">
<span class="generated">Copyright</span>
</p>
<div class="license">
<p class="first" id="ID0ESD" />
</div>
</div>
</div>
<div class="overlay">
<div class="modal-wrapper">
<div class="modal-image">
<img src="https://journal.emergentpublications.com/wp-content/uploads/2015/11/de8adf66-3683-c412-3cd6-45bc686a4ebe.png" alt="full image" title="full image" />
</div>
<div class="modal-close">X</div>
</div>
</div>
</div>
would you know, how to create notifications which are displayed under the notification bell without using fixed position? I would like to have something clean and resposive if possible. Thank you very much
const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")
bell.addEventListener("click", () => {
alertBtn.style.color =
"white";
notifications.innerHTML += ` <div class="member">
<li>
<span>Notifaction 1</span>
</li> </div> <div class="member">
<li>
<span>Notifaction 2</span>
</li> </div>`;
});
.member {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
background-color: darkgrey;
}
#notifications {
position: fixed;
width: 50%;
top: 70px;
right: 0px;
}
<header>
<div class="header">
<div class="logo">
<h1>YourApp™</h1>
</div>
<div class="userProfile">
<div class="bell">
<img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
<p class="active-alert">●</p>
<ul id="notifications"></ul>
</div>
<div class="user">
<img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
<p>Member 1</p>
</div>
</div>
</div>
</header>
See below. Changes documented in the source code. Hope this helps.
const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")
bell.addEventListener("click", () => {
/* alertBtn.style.color = "white"; Removed */
/* Hide button */
alertBtn.style.display = "none";
notifications.innerHTML += ` <div class="member">
<li>
<span>Notifaction 1</span>
</li> </div> <div class="member">
<li>
<span>Notifaction 2</span>
</li> </div>`;
});
.member {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
background-color: darkgrey;
}
#notifications {
/* position: fixed; Removed */
width: 50%;
/* top: 70px; Removed */
/* right: 0px; Removed */
padding: 0; /* Added */
margin-top: 0 /* Added */
}
/* Added */
.bell {
display: flex;
flex-direction: column;
}
<header>
<div class="header">
<div class="logo">
<h1>YourApp™</h1>
</div>
<div class="userProfile">
<div class="bell">
<img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
<p class="active-alert">●</p>
<ul id="notifications"></ul>
</div>
<div class="user">
<img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
<p>Member 1</p>
</div>
</div>
</div>
</header>
I have an absolute div that is behind my footer. When I hover over another element (#snapchat) I want that absolute div to scroll up from behind the footer and stop above it where it can be seen. How would I do this?
.snapcode-footer {
position: absolute;
padding-top: 20px;
text-align: center;
left: 0;
right: 0;
}
.sub-sub-footer {
position: relative;
z-index: 1;
background-color: #F7F7F7;
padding-top: 35px;
padding-bottom: 20px;
}
.sub-footer {
position: relative;
z-index: 1;
background-color: #edeeef;
margin-top: 0px;
}
<div class="snapcode-footer">
<img src="https://wumbo.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
<div class="sub-sub-footer">
<ul class="social-footer">
<li id="twitter"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter #wumbo"/></li>
<li id="snapchat"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #wumbo"/></li>
<li id="insta"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram #wumbo"/></li>
<li id="facebook"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook #wumbo"/></li>
</ul>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-5-footer">
<div class="footer-img">
<img src="https://www.wumbo.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
<div/>
</div>
</div>
I'm re-positioned your div.snapcode footer and applied a css property to
#snapchat:hover ~ .snapcode-footer . hopes this will help you :)
.snapcode-footer {
position: absolute;
padding-top: 90px;
text-align: center;
left: 0;
right: 0;
}
.sub-sub-footer {
position: relative;
z-index: 1;
background-color: #F7F7F7;
padding-top: 35px;
padding-bottom: 20px;
}
.sub-footer {
position: relative;
z-index: 1;
background-color: #edeeef;
margin-top: 0px;
}
#snapchat:hover ~ .snapcode-footer{
z-index:999;
color:green;
position:relative;
margin-bottom:100px;
margin-left:50px;
}
<div class="sub-sub-footer">
<ul class="social-footer">
<li id="twitter"><img src="/wp-content/uploads/2016/11/Twitter-color.png" alt="Follow us on Twitter #hullandspar"/></li>
<li id="snapchat"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #hullandspar"/></li>
<div class="snapcode-footer">
<img src="https://hullandspar.com/wp-content/uploads/2016/11/snapcode.png" width="250px" height="auto" alt="Scan to add us on Snapchat!">
</div>
<li id="insta"><img src="/wp-content/uploads/2016/11/Instagram-color.png" alt="Follow us on Instagram #hullandspar"/></li>
<li id="facebook"><img src="/wp-content/uploads/2016/11/Facebook-color.png" alt="Follow us on Facebook #hullandspar"/></li>
</ul>
</div>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-5-footer">
<div class="footer-img">
<img src="https://www.hullandspar.com/wp-content/uploads/2016/11/HullSpar_Slogan.png" alt="Made For The Modern Seafarer™"/>
</div>
</div>
</div>
I'd suggest giving snapcode-footer an id to make it easier to control.
<div class="snapcode-footer" id="snapcode">
<script>
var hover = 0;
</script>
Then you make a script on #snapchat
<li id="snapchat"onmouseenter="hover = 1" onmouseout="hover = 0"><img src="/wp-content/uploads/2016/11/Snapchat-color.png" alt="Follow us on Snapchat #hullandspar"/></li>
Lastly, you make a script for if the mouse is hovering over the #snapchat element to increase height or to stay in one place
<script>
setInterval("if(hover == 1){snapcode.top--}");
setInterval("if(hover == 0){snapcode.top = 0}");
</script>
$().ready(function() {
// Case : 1
$("li.products").hover(function() {
$(this).parents(".cotnainer-fluid").next().toggleClass("show");
//$("#category-list").css("opacity","1 !important");
});
})
div.banner {
width: 100%;
height: 379px;
}
div.banner>.row {
padding: 0 35px;
}
/* .menu{
background: transparent;
opacity: 0.5;
} */
.menu {
margin-right: 0;
margin-left: 0;
}
#menu-items {
background: #121212;
opacity: 0.7;
}
#menu-items {
padding: 22px;
margin: 0 25px;
text-align: center;
border-radius: 0 0 4px 4px;
}
ul#menu-items li {
list-style: none;
display: inline;
color: #939598;
font: normal 12px/16px Gotham-Medium;
}
ul#menu-items li a {
padding-bottom: 20px;
}
ul#menu-items li>a:hover {
color: #fff;
border-bottom: 4px solid #76bd1c;
}
li.item {
padding: 25px;
}
li.search {
margin-left: 145px;
}
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
/*
margin-top: -380px;
*/
background-color: #f7f6f5;
position: relative;
top: -380px;
z-index: -1;
display: none;
}
.show {
display: block;
}
/* li.products:hover #category-list{
display: block;
} */
#category-list ul li {
list-style: none;
display: inline-block;
}
.category-menu {
padding-top: 80px;
}
.category-menu {
font: normal 12px/16px Gotham-Medium;
color: #603913;
}
#category-menu-items {
margin-top: 5px;
}
#category-menu-items li {
text-align: center;
}
.padding-left60 {
padding-left: 60px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<srcipt src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<div class="cotnainer-fluid" style="margin-top: 40px;">
<div class="banner">
<div class="row menu">
<ul id="menu-items">
<li class="item">HOME
</li>
<li class="item">ABOUT US
</li>
<li class="item products dropdown">PRODUCTS
</li>
<li class="item">STORE
</li>
<li class="item">CONTACT
</li>
<li class="item">LOGIN
</li>
<li class="item search"><i class="search-icon-header" style="font-size: 16px;"></i>
</li>
<li class="item basket"><i class="glyphicon glyphicon-shopping-cart" style="font-size: 16px;"></i>
</li>
</ul>
</div>
<h1 class="page-title">Some Title</h1>
</div>
</div>
<!-- End Nav items -->
<div id="category-list">
<div class="row category-menu">
<ul id="category-menu-items">
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biopesticides.png" alt="">
</p>
<p>BIOPESTIDES</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-nutrients.png" alt="">
</p>
<p>NUTRIENTS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-biofertilizers.png" alt="">
</p>
<p>BIOFERTILIZERS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-seeds.png" alt="">
</p>
<p>SEEDS</p>
</a>
</li>
<li class="padding-left60">
<a href="">
<p>
<img src="../image/bioorgo-garden_Acc.png" alt="">
</p>
<p>GARDEN ACCESSORIES</p>
</a>
</li>
</ul>
</div>
</div>
I have a list of items in navbar, now on hovering on one of the list items i want to display a hidden div which contains another list of items which should be clickable.
In the above code, When I hover on PRODUCTS link; a div shows up. Now, I want to click on items in this div!!!!
I guess I need to check for hasClass('show'), and if so then i should be able to hover and click on the div items.
Any suggestions or help on how to move forward with this?
Priority of ID selector is higher than class selector.
Ref.
//Make sure this style is overwrite the style of #category-list
#category-list.show{
display: block;
}
Replace the style with the below one and try and adjust the position using top of category list
<style>
#category-list {
width: 900px;
height: 180px;
margin: 0 auto;
background-color: #f7f6f5;
position: absolute;
/*top: -380px;*/
z-index: -1;
display: none;
}
#category-list ul li {
list-style: none;
display: inline-block;
}
.show {
display: block !important;
}
Did some work in that jsfiddle.
// Show sub-menu with jQuery
$("ul#menu-items li.products a, ul#menu-items li.products").hover(function(){
console.log("show sub menu");
$("#category-list").show();
});
// Hide sub-menu with jQuery
$("body *").not("#menu-items, li.products, li.products a, #category-list, #category-list *, #category-menu-items, div.categories").hover(function(){
console.log($(this)); // Log the elements that triggers hide of sub menu
$("#category-list").hide();
});
Don't know the pure CSS sub-menu technique yet.
https://jsfiddle.net/mantisse_fr/p1eupdo3/1/