Setting up a Slick Carousel, containing sliders as individual elements - javascript

I want to create a carousel like this one here:
https://codepen.io/newrya/pen/eYMZdKe
The catch is, I want to make an auto play carousel using "slick" and want the above slider as individual elements instead of images. This is my initial Code. So, instead of these img elements inside div having class horizontal. I want the above slider as the elements.
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img{
width: 350px;
height: 350px;
margin-right: 100px;
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<img src="images/imags/1.jpg" class="before_after">
<img src="images/imags/2.jpg" class="before_after">
<img src="images/imags/3.jpg" class="before_after">
<img src="images/imags/4.jpg" class="before_after">
<img src="images/imags/5.jpg" class="before_after">
<img src="images/imags/6.jpg" class="before_after">
<img src="images/imags/8.jpg" class="before_after">
<img src="images/imags/9.jpg" class="before_after">
<img src="images/imags/10.jpg" class="before_after">
<img src="images/imags/11.jpg" class="before_after">
<img src="images/imags/12.jpg" class="before_after">
<img src="images/imags/13.jpg" class="before_after">
<img src="images/imags/14.jpg" class="before_after">
<img src="images/imags/15.jpg" class="before_after">
<img src="images/imags/16.jpg" class="before_after">
</div>
</section>
I copied the codepen code and replaced it with my img elements and made some changes with the css code and pasted it in my styles sheet.
This is the code:
const slider = document.querySelector('#image-slider');
const wrapper = document.querySelector('.img-wrapper');
const handle = document.querySelector('.handle');
slider.addEventListener("mousemove", sliderMouseMove);
slider.addEventListener("touchmove", sliderMouseMove);
function sliderMouseMove(event) {
if (isSliderLocked) return;
const sliderLeftX = slider.offsetLeft;
const sliderWidth = slider.clientWidth;
const sliderHandleWidth = handle.clientWidth;
let mouseX = (event.clientX || event.touches[0].clientX) - sliderLeftX;
if (mouseX < 0) mouseX = 0;
else if (mouseX > sliderWidth) mouseX = sliderWidth;
wrapper.style.width = `${((1 - mouseX/sliderWidth) * 100).toFixed(4)}%`;
handle.style.left = `calc(${((mouseX/sliderWidth) * 100).toFixed(4)}% - ${sliderHandleWidth/2}px)`;
}
let isSliderLocked = false;
slider.addEventListener("mousedown", sliderMouseDown);
slider.addEventListener("touchstart", sliderMouseDown);
slider.addEventListener("mouseup", sliderMouseUp);
slider.addEventListener("touchend", sliderMouseUp);
slider.addEventListener("mouseleave", sliderMouseLeave);
function sliderMouseDown(event) {
if (isSliderLocked) isSliderLocked = false;
sliderMouseMove(event);
}
function sliderMouseUp() {
if (!isSliderLocked) isSliderLocked = true;
}
function sliderMouseLeave() {
if (isSliderLocked) isSliderLocked = true;
}
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img {
width: 350px;
height: 350px;
margin-right: 100px;
}
.horizontal {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
:root {
--image-slider-width: min(80vw, 768px);
--image-slider-handle-width: 50px;
}
.horizontal {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
#image-slider {
position: relative;
width: var(--image-slider-width);
overflow: hidden;
border-radius: 1em;
box-shadow: -4px 5px 10px 1px gray;
cursor: col-resize;
}
#image-slider img {
display: block;
width: var(--image-slider-width);
height: auto;
max-height: 80vh;
object-fit: cover;
pointer-events: none;
user-select: none;
}
#image-slider .img-wrapper {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
overflow: hidden;
z-index: 1;
}
#image-slider .img-wrapper img {
position: absolute;
top: 0;
right: 0;
height: 100%;
filter: grayscale(100%);
transform: scale(1.2);
}
#image-slider .handle {
border: 0px solid red;
position: absolute;
top: 0;
left: calc(50% - var(--image-slider-handle-width)/2);
width: var(--image-slider-handle-width);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
z-index: 2;
}
#image-slider .handle-circle {
width: var(--image-slider-handle-width);
height: var(--image-slider-handle-width);
color: white;
border: 2px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
#image-slider .handle-line {
width: 2px;
flex-grow: 1;
background: white;
}
#media (max-width: 768px) {
:root {
--image-slider-width: 90vw;
}
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
&#171 &#187
</div>
<div class="handle-line"></div>
</div>
</div>
</section>
For some, reason, in class "handle-circle", the code after '171' is not valid(it turns green).
The second problem I am facing is, the codepen slider doesn't work when I replaced it with the img elements. The 'mousemove' event is of no use when using it in carousels. How do I change that?


I think you might have issues with the slick mouse over binding conflicting with the mouse over your image, as a workaround you could iframe it and it will work like so
$(document).ready(function() {
$('.carousel').slick({
slidesToShow: 3,
dots: true,
centerMode: true,
});
});
html,
body {
background-color: #e74c3c;
}
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
h2 {
font-family: sans-serif;
color: #fff;
}
.carousel {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide img {
width: 100%;
border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
font-size: 20px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="wrapper">
<h2>Slick Carousel Example
<h2>
<div class="carousel">
<div>
<iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div><img src="https://picsum.photos/300/200?random=4"></div>
<div><img src="https://picsum.photos/300/200?random=5"></div>
<div><img src="https://picsum.photos/300/200?random=6"></div>
</div>
</div>
not a nice solution but will give you what you want

Related

Sticky section scrolling effect HTML

In the following pen I would like to create an effect where you have to scroll (by scrolling, not with mouse movement), all the way down until the top image is revealed, until we move to the next section.
The effect I'm trying to re-create, in case the explanation is too confusing can be found on Apple's website here
As you scroll down you'll understand.
let wrapper = document.querySelector('#wrapper');
let topLayer = wrapper.querySelector('.top');
let handle = wrapper.querySelector('.handle');
wrapper.addEventListener('mousemove', e => {
handle.style.top = e.clientY + 'px';
topLayer.style.height = e.clientY + 'px';
});
});

Here is an example using the CSS position: sticky
body {
font-family: georgia;
height: 1000px;
}
img {
display: block;
margin: 0 auto;
}
.sticky {
position: sticky;
position: -webkit-sticky;
width: 100%;
top: 25vh;
justify-content: center;
align-items: center;
color: #fff;
}
.wrapper {
width: 75%;
margin: auto;
background-color: silver;
padding: 15px;
}
.wrapper {
height: 200vh;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet"/>
<div class="wrapper bg-primary">
<div class="sticky">
<img src='https://dummyimage.com/400x100.png?text=image-1' alt='' />
</div>
</div>
<br>
<div class="wrapper bg-success">
<div class="sticky">
<img src='https://dummyimage.com/400x100.png?text=image-2' alt='' />
</div>
</div>
<br>
<div class="wrapper bg-warning">
<div class="sticky">
<img src='https://dummyimage.com/400x100.png?text=image-3' alt='' />
</div>
</div>

How to get img src for image clicked on

I am attempting to get the img src for the specific image being clicked on. I am using the this function in my attempt, so I am unsure what I am doing wrong.
Does anyone see the issue?
HTML:
<div id="zoomPop" data-popup="pop2">
<div id="zoomInner">
<a class="sharePopClose" data-popup-close="pop2" href="#"><img src="/icon_close.png" alt="Close Project Image" class="xClose">
</a>
<img src="" alt="Project Enlarge" id="zoomImg">
</div>
</div>
//Project Container Zoom
$('#projectGallery').on('click', '.projectCont', function (event) {
event.stopPropagation();
$('#zoomPop').fadeIn(350);
$('body').css('overflow', 'hidden');
var currentImg = $(this).attr('src');
console.log(currentImg);
});
#zoomPop {
width: 100%;
height: 100%;
color: #FFF;
position: fixed;
z-index: 999999;
margin: 0;
padding: 0;
top: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
display: none;
}
#zoomPop {
background: rgba(0,0,0,.7);
}
#zoomInner {
position: relative;
padding: 60px 0;
margin: 0 auto;
width: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projectGallery">
<div class="projectCont">
<img src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Pic">
</div>
<div class="projectCont">
<img src="https://geology.com/google-earth/google-earth.jpg" alt="Pic">
</div>
</div>
<div id="zoomPop" data-popup="pop2">
<div id="zoomInner">
<img src="" alt="Project Enlarge" id="zoomImg">
</div>
</div>

your this refer to DOM Node <div class="projectCont">
Use a
console.log($(this).find('img').attr('src'));
or change selector for event handler to
$('#projectGallery').on('click', '.projectCont img', function (event) {

//Project Container Zoom
$('#projectGallery').on('click', '.projectCont img', function (event) {
event.stopPropagation();
$('#zoomPop').fadeIn(350);
$('body').css('overflow', 'hidden');
var currentImg = $(this).attr('src');
console.log(currentImg);
$('#zoomInner img').attr('src', currentImg);
});
#zoomPop {
width: 100%;
height: 100%;
color: #FFF;
position: fixed;
z-index: 999999;
margin: 0;
padding: 0;
top: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
display: none;
}
#zoomPop {
background: rgba(0,0,0,.7);
}
#zoomInner {
position: relative;
padding: 60px 0;
margin: 0 auto;
width: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projectGallery">
<div class="projectCont">
<img src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Pic">
</div>
<div class="projectCont">
<img src="https://geology.com/google-earth/google-earth.jpg" alt="Pic">
</div>
</div>
<div id="zoomPop" data-popup="pop2">
<div id="zoomInner">
<img src="" alt="Project Enlarge" id="zoomImg">
</div>
</div>

How to Maintain Zoom on Image while Adding a Hyperlink

I would like to add a hyperlink to the images (so that it will open a larger version of the image) within the gallery while maintaining the 'zoom' effect on the thumbnail. I attempted to add a hyperlink to the first image but the zoom was no longer running. I apologise if my explanation isn't very good, I'm new to coding languages! Any help would be great!
Here is the link where I got the gallery code if it is any use to anyone! https://codepen.io/oknoblich/pen/ELfzd
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" > < /script> <
script type = "text/javascript" >
(function() {
var documentElem = $(document),
nav = $('nav'),
lastScrollTop = 0;
documentElem.on('scroll', function() {
var currentScrollTop = $(this).scrollTop();
//scroll down
if (currentScrollTop > lastScrollTop) nav.addClass('hidden');
//scroll up
else nav.removeClass('hidden');
lastScrollTop = currentScrollTop;
});
})();
<
/script>
<!-- End of Javascript for Navigation Menu -->
<style type="text/css">#import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
width: 640px;
margin: 0 auto;
padding: 5px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.gallery>div {
position: relative;
float: left;
padding: 5px;
}
.gallery>div>img {
display: block;
width: 200px;
transition: .1s transform;
transform: translateZ(0);
/* hack */
}
.gallery>div:hover {
z-index: 1;
}
.gallery>div:hover>img {
transform: scale(1.1, 1.1);
transition: .3s transform;
}
.cf:before,
.cf:after {
display: table;
content: "";
line-height: 0;
}
.cf:after {
clear: both;
}
h1 {
margin: 40px 0;
font-size: 30px;
font-weight: 300;
text-align: center;
}
</style>
<body>
<!-- Start of Navigation Bar -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li id="current">Gallery</li>
<li>Contact</li>
</ul>
</nav>
<!-- End of Navigation Bar -->
<br />
<br />
<h1> Gallery </h1>
<!-- Stat of Gallery -->
<div class="gallery cf">
<!-- This is the image I tried to link but when I ran the code the zoom was no longer maintained. -->
<div>
<img src="Images/Optimized/Thumbnail_1.jpg" width="200" height="300" alt="" />
</div>
<div>
<img src="Images/Optimized/Thumbnail_2.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_3.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_4.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_5.jpg" width="200" height="300" alt="" /> </div>
<div>
<img src="Images/Optimized/Thumbnail_6.jpg" width="200" height="300" alt="" /> </div>
</div>

Here is the code this will work for sure and will display image in large size.
https://jsfiddle.net/fsfrkru0/
HTML & CSS
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 14px/1 'Open Sans', sans-serif;
color: #555;
background: #e5e5e5;
}
.gallery {
width: 640px;
margin: 0 auto;
padding: 5px;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.gallery>div>a {
position: relative;
float: left;
padding: 5px;
}
.gallery>div>a>img {
display: block;
width: 200px;
transition: .1s transform;
transform: translateZ(0);
/* hack */
}
.gallery>div:hover>a {
z-index: 1;
}
.gallery>div:hover>a>img {
transform: scale(1.7, 1.7);
transition: .3s transform;
}
.cf:before,
.cf:after {
display: table;
content: "";
line-height: 0;
}
.cf:after {
clear: both;
}
h1 {
margin: 40px 0;
font-size: 30px;
font-weight: 300;
text-align: center;
}
<h1>Simple CSS Image Gallery with Zoom</h1>
<div class="gallery cf">
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
<div>
<img src="http://abload.de/img/a6aawu.jpg" styles="" />
</div>
</div>
Hope this helps.

The zoom is done using css and applied to the hover event if you apply the element a class with the same rules on click event it will keep the css properties.
I didn't get the question right at first but you also need to change the CSS, .gallery>div>img means an element with class gallery immediately followed by a div immediately followed by an img, to include both img and a tags you need to remove the > ".gallery>div img"

playing fadein/fadeout slider on tab button click

I have created a Fadein/Fadeout slider. Left button and right button are working fine but I want to play slider by clicking on tab buttons.
JSfiddle
HTML
<p id="slide1_controls">
<div class="block-icon icon-s1">
<img class="block-img icon-s1" src="../_images/building_icon1.png" data-hover-image="../_images/building_icon1_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s2">
<img class="block-img icon-s2" src="../_images/building_icon2.png" data-hover-image="../_images/building_icon2_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s3">
<img class="block-img icon-s3" src="../_images/building_icon3.png" data-hover-image="../_images/building_icon3_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s4">
<img class="block-img icon-s4" src="../_images/building_icon4.png" data-hover-image="../_images/building_icon4_hover.png" data-selected="false" />
</div>
</p>
<div class="slider-text-context" id="target">
<div class="slide-01 fade-texts active">tab1</div>
<div class="slide-02 fade-texts">tab2</div>
<div class="slide-03 fade-texts">tab3</div>
<div class="slide-04 fade-texts">tab4</div>
</div>
CSS
.fade-texts {
width: 100%;
height: 259px;
left: 0px;
position: absolute;
}
.slider-btn-area {
position: absolute;
z-index: 8;
margin-left: auto;
margin-right: auto;
left: 25%;
top: 54%;
width: 50%;
}
#target > div {
display:none;
}
#target div:nth-child(1) {
display:block;
}
.tab-area {
position: absolute;
left: 25%;
top: 30%;
}
Javascript
$(".icon-s2").click(function() {
activeElem = $("#target .slide-02");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
$(".icon-s3").click(function() {
activeElem = $("#target .slide-03");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
When I press the tab it does not work to try to appear a DIV.

Your code made no sense. The way it looked was that the images had to be clicked in order to fadeIn/Out the tabs. I believe it should be the other way. I cleaned up the markup, and simplified the classes, ids, styles, etc...
Here's the DEMO
HTML
<div id="slides">
<div id="slide1" class="slide active">
<img class="img" src="http://placehold.it/150x50/000/Fff.png&text=FIRST" />
</div>
<div id="slide2" class="slide">
<img class="img" src="http://placehold.it/150X50/048/Fee.png&text=SECOND" />
</div>
<div id="slide3" class="slide">
<img class="img" src="http://placehold.it/150X50/fa8/375.png&text=THIRD" />
</div>
<div id="slide4" class="slide">
<img class="img" src="http://placehold.it/150X50/9a7/a10.png&text=FOURTH" />
</div>
</div>
<div class="tab-area" id="controls">
<div id="tab1" class="tab">1</div>
<div id="tab2" class="tab">2</div>
<div id="tab3" class="tab">3</div>
<div id="tab4" class="tab">4</div>
</div>
CSS
.slide {
display:none;
}
.active {
display: block;
}
.tab {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 10px;
outline: 1px solid black;
text-align: center;
cursor: pointer;
}
jQuery/JavaScript
$(function () {
$('.tab').on('click', function (event) {
var tabID = event.target.id;
//console.log('tabID: '+tabID);
var order = tabID.split('b').pop();
//console.log('order: '+order);
var pos = parseInt(order, 10);
var slideID = 'slide'+pos;
//console.log('slideID: '+slideID);
var act = document.getElementById(slideID);
//console.log('act: '+act.id);
$('.slide').fadeOut(0).removeClass('active');
$(act).addClass('active').fadeIn(750);
});
});

Top fixed Menubar, when linked to a certain div of the menu from another html

My problem is that i wanted to make a fixed menubar on top of the page when scrolled, that wasn't so hard, but the hard part for me is that, when i link it to a certain part from the menubar from external html the menubar shows up and it is fixed on the top of the page and it works perfectly when i scroll down, but when i scroll up, it stays there
<!DOCTYPE html>
<html>
<head>
<title>SMINT Demo</title>
<meta name = "keywords" content = "" />
<meta name = "description" content = "" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
<link href="css/demo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smint.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
(function(){
$.fn.smint = function( options ) {
// adding a class to users div
$(this).addClass('smint');
var settings = $.extend({
'scrollSpeed ' : 500
}, options);
return $('.smint a').each( function() {
if ( settings.scrollSpeed ) {
var scrollSpeed = settings.scrollSpeed;
}
///////////////////////////////////
// get initial top offset for the menu
var stickyTop = $('.smint').offset().top;
// check position and make sticky if needed
var stickyMenu = function(){
// current distance top
var scrollTop = $(window).scrollTop();
// if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
if (scrollTop > stickyTop) {
$('.smint').css({ 'position': 'fixed', 'top':0 }).addClass('fxd');
} else {
$('.smint').css({ 'position': 'absolute', 'top':stickyTop }).removeClass('fxd');
}
};
// run function
stickyMenu();
// run function every time you scroll
$(window).scroll(function() {
stickyMenu();
});
///////////////////////////////////////
$(this).on('click', function(e){
// gets the height of the users div. This is used for off-setting the scroll so th emenu doesnt overlap any content in the div they jst scrolled to
var selectorHeight = $('.smint').height();
// stops empty hrefs making the page jump when clicked
e.preventDefault();
// get id pf the button you just clicked
var id = $(this).attr('id');
// gets the distance from top of the div class that matches your button id minus the height of the nav menu. This means the nav wont initially overlap the content.
var goTo = $('div.'+ id).offset().top -selectorHeight;
// Scroll the page to the desired position!
$("html, body").animate({ scrollTop: goTo }, scrollSpeed);
});
});
};
})();
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}
</script>
<style>
* {margin: 0; padding: 0; outline: 0;}
body {
color: #f8e0b3;
font-size: 12px;
background:#f8e0b3;
}
h1, h2 {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
margin:0 0 15px 0;
}
h1 {
font-size: 36px;
letter-spacing: -2px;
line-height: 100%;
}
h1.title {
font-size: 46px;
font-weight: 700;
color: #f8e0b3;
}
h2 {
font-size: 24px;
}
p {
margin: 0 0 15px 0;
}
.menuBtn {
background: center center no-repeat transparent;
background: #f8e0b3;
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 10px;
}
.clear {
clear: both;
}
.wrap {
/*background:url(../images/bg.png) top left repeat-x;*/
width: 100%;
max-width: 1140px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0;
}
.section {
width: 100%;
max-width: 1140px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0 0 20px 0;
}
.inner {
width: 960px;
margin: 0 auto;
position: relative;
min-height: 50px;
padding:30px 0;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
padding:30px 0;
}
/* This is the selector i used for my menu, it needs to be set as position:absolute; */
.subMenu {
position: absolute;
top: 400px;
height: 50px;
z-index: 1000;
width: 100%;
max-width: 1140px;
min-width: 960px;
background: #ff0000; /*за главна категория */
}
.subMenu .inner {
padding:0;
font-weight: 400;
}
.subNavBtn {
display: block;
height: 35px;
width: 8%;
float: left;
margin: 0px 0px 0 0;
text-decoration: none;
font-size: 14px;
padding: 15px 2% 0 2%;
text-align: center;
color: #fff;
}
.end {
margin: 0;
}
/* SECTIONS */
.sTop {
min-height: 630px;
background:#f8e0b3;
color:#3d3d3d;
}
.s1 {
min-height: 500px;
background: #f8e0b3;
}
.s2 {
min-height: 500px;
background: #f8e0b3;
}
.s3 {
min-height: 500px;
background: #f8e0b3;
}
.s4 {
min-height: 500px;
background: #f8e0b3;
}
.s5 {
min-height: 500px;
background: #f8e0b3;
}
.s6 {
min-height: 500px;
background: #f8e0b3;
}
.s7 {
min-height: 500px;
background: #f8e0b3;
}
h1.border {
border-style: solid;
border-width: 10px;
border-color: #ff0000;
}
h1 {
text-align: center;
}
p.border {
border-style: solid;
border-width: 10px;
border-color: #ff0000;
}
p {
text-align: center;
}
#largeImgPanel {
text-align: center;
visibility: hidden;
position: fixed;
z-index: 100;
top: 0; left: 0; width: 100%; height: 100%;
background-color: rgba(100,100,100, 0.5);
}
#displayImage{
border-style: solid;
border-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="subMenu" >
<div class="inner">
Блузи
Ризи
Сака
Аксесоари
Якета
Панталони/Дънки
Обувки
Спортни стоки
</div>
</div>
<div class="section sTop">
<div class="inner"><img src="heading.jpg" alt="заглавие">
<h1 class="border">Област Пловдив</h1>
<p class="border">Мъжки блузи</p>
</div>
<br class="clear">
</div>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/2.jpg" width="200" height="200" name="show">
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/3.jpg" width="200" height="200" name="show">
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/4.jpg" width="200" height="200" name="show">
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/5.jpg" width="200" height="200" name="show">
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/bluzi s kus dulag rukav/6.jpg" width="200" height="200" name="show">
<div class="section s1">
<h1 class="border"><font color="black"><a name="mujkirizi">Ризи</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s2">
<h1 class="border"><font color="black"><a name="mujkisaka">Сака</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s3">
<h1 class="border"><font color="black"><a name="mujkiaksesoari"> Аксесоари</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s4">
<h1 class="border"><font color="black"><a name="mujkiiaketa"> Якета</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s5">
<h1 class="border"><font color="black"><a name="mujkipantaloni"> Панталони/Дънки</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s6">
<h1 class="border"><font color="black"><a name="mujkiobuvki"> Обувки</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div class="section s7">
<h1 class="border"><font color="black"><a name="mujkisportnistoki"> Спортни стоки</a><font></h1>
<img id="displayImage" style="cursor:pointer" onclick="showImage(this.src)" src="hm/mujko/rizi/hm (1).jpg" width="200" height="200" name="show">
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" style="height: 100%; margin: 0; padding: 0;" />
</div>
</body>
</html>

It works for me, it's fixed when i scroll down, and when i come back on the top of the page it goes where it was at the beginning, i don't get your problem, can you be more specific?

Well, to be more specific, i have the menubar that is fixed when i scroll down or up and it work perfectly when i open this specific html. This menubar contain 7 submenus and my idea is that when i use an external html with link to for example submenu 3 using (it opens this specific html and scroll down to submenu 3)but the menubar doesnt move when i scroll up , it only works(stay fixed at the top)when i scroll down

Categories

Resources