I know there are lots of same examples, but their code don't work. Please Help! So I have arrow Image at the bottom of container block. The content of container are flex( if it is important to know?!) And when i click on arrow, it should move down by next container.
$("#arrow").click(function() {
var $target = $('.container.active').next('.container');
if ($target.length == 0)
$target = $('.container:first');
$('html, body').animate({
scrollTop: $target.offset().top
}, 'slow');
$('.active').removeClass('active');
$target.addClass('active');
});
.container {
height: 100%;
margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
///not important content
<button class="next">
<img src="arrow.png" id="arrow" alt="down">click
</button>
</div>
<div class="container second" id="second">
<div class="arrow">
<img src="arrowup.png" alt="up">
</div>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>
You can simply use anchor tag and pass id of div you want to focus. Below is an example for that.
.container {
height: 100%;
margin: 0px;
}
.second, .first{
border : 1px solid black;
height : 500px;
width:100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
<!-- not important content -->
<a href="#second">
<img src="arrow.png" id="arrow" alt="down">click
</a>
</div>
<div class="container second" id="second">
<a class="arrow" href="#first">
<img src="arrowup.png" alt="up">
</a>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>
https://jsfiddle.net/w7duthsa/ Try this. U should be careful where arrow event fires. It is in icon. u have to click to icon to run. Button doesn't down.
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().parent().next().offset().top);
return false; // prevent anchor
});
If u want to give up down to button then give arrow id to button and use function below https://jsfiddle.net/w7duthsa/1/
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
return false; // prevent anchor
});
Related
I recently approached to javascript and jQuery; I would like to create a load more button for the image grid on my website, the grid have 4 column and right now 16 images with a hover overlay effect and with a tag . I tried to follow many tutorials, I can't find and understand the mistake I made.
The code has been corrected in the following anwers
$(function() {
$(".Box-Hidden").slice(0, 8).show();
$("#loadMoreCont").on('click', function(e) {
e.preventDefault();
$(".Box-Hidden:hidden").slice(0, 2).slideDown();
if ($(".Box-Hidden:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
.GridContent {
width: 100%;
height: auto;
}
.Portfolio {
width: 95%;
height: auto;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 5px;
padding-top: 4%;
}
.Box-Hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="GridContent">
<div class="Portfolio">
<!-----image 1 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp1">
<div class="GridItemsCont">
<img src="#" class="gridimg">
<div class="infos infocolor1">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 2 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="#">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----total 16 images----->
</div>
</div>
<div class="loadMoreCont">
Load More
<img class="loadImg" src="images/arrow.png">
</div>
Some issues in your code are that the classes and ID's are mixed up in the JS. In particular the loadMore button and how many items you're choosing to show via "slice". It would also help to use a more general or "semantic" friendly name for your containers instead of Box-Hidden because it's not always hidden and it's purpose is more like a card block, so naming it something like "card" might be best. The example below shows the Load More button and then disappears after displaying the rest of the cards.
// slice is choosing the first 2 instances of "Box-hidden" and showing them
$(".Box-Hidden").slice(0, 2).show();
// if there are Box-Hidden set to display:none (hidden) then show the loadMore button
if ($(".Box-Hidden:hidden").length != 0) {
$("#loadMore").show();
}
$("#loadMore").on('click', function(e) {
e.preventDefault();
$(".Box-Hidden:hidden").slice(0, 2).slideDown();
// if there are no more hidden Box-Hidden's then hide the loadMore button
if ($(".Box-Hidden:hidden").length == 0) {
$("#loadMore").fadeOut('slow');
}
// This is not related to the show more, this just brings you back up the page
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
.GridContent {
width: 100%;
height: auto;
}
.Portfolio {
width: 95%;
height: auto;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 5px;
padding-top: 4%;
}
.Box-Hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="GridContent">
<div class="Portfolio">
<!-----image A ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=1">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image B ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=2">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 1 ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp1">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=3" class="gridimg">
<div class="infos infocolor1">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 2 ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=4">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----total 16 images----->
</div>
</div>
<div class="loadMoreCont">
Load More
<img class="loadImg" src="images/arrow.png">
</div>
When you use
$("#loadMoreCont").on(...)
it is supposed you have a html tag having the id with that name:
<div id="loadMoreCont">
...
</div>
When you use
$(".loadMoreCont").on(...)
it is supposed you have a html tag having the class with that name:
<div class="loadMoreCont">
...
</div>
Update
$(function () {
$(".Box-Hidden").slice (0, 2).show(); // showing 2 initial images
$(".loadMoreCont").on('click', function (e) {
e.preventDefault();
$(".Box-Hidden:hidden").slice(0,2).slideDown(); // adding 2 images on load more click
if ($(".Box-Hidden:hidden"). length == 0){
$("#load").fadeOut ('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
Your code seems work fine. I commented out some interesting lines.
Hope this helps.
your #loadMoreCont JS file on line 4 is targeted at an ID (#).
but on your html loadMoreCont as a class (.)
The question is: " I would like to create a load more button for the image grid on my website, the grid have 4 column and right now 16 images with a hover overlay effect and with a tag . I tried to follow many tutorials, I can't find and understand the mistake I made"
Here the updated code after the kind correction of the users #Kurohige and #WkL
HTML
<div class="GridContent">
<div class="Portfolio">
<!-----image 1 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp1">
<div class="GridItemsCont">
<img src="#" class="gridimg">
<div class="infos infocolor1">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 2 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="#">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----total 16 images----->
</div>
</div>
<div class="loadMoreCont">
Load More
<img class="loadImg" src="images/arrow.png">
</div>`
CSS
.GridContent {
width: 100%;
height: auto;
}
.Portfolio {
width: 95%;
height: auto;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 5px;
padding-top: 4%;
}
.Box-Hidden {
display: none;
}
JQUERY
<script>
$(function () {
$(".Box-Hidden").slice (0, 8).show();
$(".loadMoreCont").on('click', function (e) {
e.preventDefault();
$(".Box-Hidden:hidden"). slice(0,2).slideDown();
if ($(".Box-Hidden:hidden"). length == 0){
$("#load").fadeOut ('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
</script>
<script src="jQuery/jquery-3.4.1.js"></script>
I want an error handling script. If the image is not found, delete(or invisible) the failed loaded tag. I would appreciate any help!
HTML DOM:
<div class="swiper-slide" data-index="2" style="width: 145px; margin-right: 10px;">
<div class="swiper-slide-inside ">
<div class="align-vertical">
<img src="images/product_images/gallery_images/0690-05-bx_3.jpg" alt="Mobile" data-magnifier-src="images/product_images/popup_images/0690-05-bx_3.jpg">
</div>
</div>
</div>
JS:
document.querySelectorAll(".swiper-slide .img-responsive")[0].addEventListener("error", myFunction);
function myFunction() {
console.log('Image not found.');
document.querySelectorAll('.swiper-slide')[0].style.visbility = "hidden";
}
There are a couple of issues
img tag doesn't have the class you are using in your selector
you are trying to hide first swiper-slide, rather than parent swiper-slide
Demo
document.querySelectorAll(".swiper-slide img")[0].addEventListener("error", myFunction);
function myFunction(event) {
console.log('Image not found.');
//use document.querySelector('.swiper-slide').style.display = "none" if there is only one such element and discard below line
event.target.parentNode.parentNode.parentNode.style.display = "none";
}
<div class="swiper-slide" data-index="2" style="width: 145px; margin-right: 10px;">
<div class="swiper-slide-inside ">
<div class="align-vertical">
<img src="images/product_images/gallery_images/0690-05-bx_3.jpg" alt="Mobile" data-magnifier-src="images/product_images/popup_images/0690-05-bx_3.jpg">
</div>
</div>
</div>
So the problem is, I want to make my nav fixed when the header disappeared.
everything works fine but the problem is that after the navbar got fixed the article goes under it. and I want to fix that but i want the padding or margin to be added when the navbar is fixed.
my code:
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script>
var num = 120; //number of pixels before modifying styles
$(window).bind('scroll', function() {
if ($(window).scrollTop() > num) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
}
});
</script>
Html
<div id="headwrapper">
<header>
<img src="Logo.png">
<h1>IT TECH</h1>
</header>
</div>
<nav>
<div id="selector"></div>
<a class="link1" href="home.htm">
<p>Home</p>
</a>
<a class="link2" href="talen.htm">
<p>Programmeertalen</p>
</a>
<a class="link3" href="computer.htm">
<p>Computers</p>
</a>
<a class="link4" href="richting.htm">
<p>Richtingen</p>
</a>
<a class="link5" href="contact.htm">
<p>Contact</p>
</a>
</nav>
<div id="element">
<div id="slider">
<div title="Banaan" id="foto1">
<h1>Welcome to</h1><img src="Logo.png">
<h1>IT TECH</h1></div>
<div title="Peren" id="foto2"></div>
<div title="Kiwi's" id="foto3"></div>
<div title="Aardbeien" id="foto4"></div>
</div>
</div>
<article></article>
so i want to add a class which gives the slider a margin or the element a padding.
I am not the pro with javascript so I am happy it works so far :)
Have your script set the padding on the body equal to the (current) height of the nav when the user scrolls down to it (or causes the nav to be at the top by resizing the window.)
$(window).bind('scroll resize', function() {
var $nav = $('nav'),
$body = $('body');
$nav.removeClass('fixed');
$body.css('padding-top',0);
if ($(window).scrollTop() > $nav.offset().top) {
$nav.addClass('fixed');
$body.css('padding-top',$nav.outerHeight());
}
});
html, body {margin:0;}
nav {display:block; background:#eee; width:100%;}
nav.fixed {position:fixed; top:0;}
nav a {display:inline-block; padding:10px;}
#foto1 img {width:100%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="headwrapper">
<header>
<img src="https://placekitten.com/50/50">
<h1>IT TECH</h1>
</header>
</div>
<nav>
<div id="selector"></div>
<a class="link1" href="home.htm">
<p>Home</p>
</a>
<a class="link2" href="talen.htm">
<p>Programmeertalen</p>
</a>
<a class="link3" href="computer.htm">
<p>Computers</p>
</a>
<a class="link4" href="richting.htm">
<p>Richtingen</p>
</a>
<a class="link5" href="contact.htm">
<p>Contact</p>
</a>
</nav>
<div id="element">
<div id="slider">
<div title="Banaan" id="foto1">
<h1>Welcome to</h1><img src="https://placekitten.com/50/50">
<h1>IT TECH</h1></div>
<div title="Peren" id="foto2"></div>
<div title="Kiwi's" id="foto3"></div>
<div title="Aardbeien" id="foto4"></div>
</div>
</div>
<article></article>
You can use the general sibling selector to select the article. It would look like this:
.fixed ~ #slider {}
It's important to note that the general sibling will only select items AFTER the first element. Your selector cannot traverse back up the DOM.
i have a problem that when i'm clicking my thumb-units it reloads the page it had to open but it is opening for 0.5 sec and then the thumb units returns again, what's wrong?
$( document ).ready(function() {
workSlider();
});
function workSlider() {
$('.thumb-unit').click(function() {
$('.work-slider').css('left' , '-100%');
$('.work-container').show();
});
$('.work-return').click(function() {
$('.work-slider').css('left' , '0%');
$('.work-container').hide(800);
});
}
here's my html, it should show the work container
<section class="alt-section section-work">
<div class="work-slider">
<div class="thumb-wrap">
<div class="thumb-container">
{% for project in site.data.settings.projects %}
<a href="" class="thumb-unit" style="background-image: url(/assets/img/work/{{project.folder}}/thumb.jpg);">
<div class="thumb-overlay">
<strong>{{ project.name }}</strong>
<div class="zoom-icon"></div>
</div>
</a>
{% endfor %}
</div>
</div>
<div class="work-wrap">
<div class="work-container">
<div class="work-return">{% include icons/icon-back.html %}</div>
<h4 color="black">Hey dude</h4>
<div style="width: 600px; height: 500px; background: #ccc;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/Y9dhSgnRl0s" frameborder="0" allowfullscreen></iframe>
</div>
<p>welcome to my world</p>
<div style="width: 600px; height: 500px; background: #ccc;"></div>
<p>welcome to my world</p>
<div style="width: 600px; height: 500px; background: #ccc;"></div>
<p>welcome to my world</p>
</div>
</div>
</div>
</section>
I think your page might be reloading on click because your not preventing the default behavior of your link.
Try this:
$('.thumb-unit').click(function(e) {
e.preventDefault();
$('.work-slider').css('left' , '-100%');
$('.work-container').show();
});
$('.work-return').click(function(e) {
e.preventDefault();
$('.work-slider').css('left' , '0%');
$('.work-container').hide(800);
});
This may be off base but since the .thumb-unit is an anchor tag, I believe you have to prevent the default event which is navigation, and with an empty href attribute should be to reload the page. Try this:
$('.thumb-unit').click(function(evt) {
evt.preventDefault();
$('.work-slider').css('left' , '-100%');
$('.work-container').show();
});
Since .work-return is a div, it is not necessary to add the same snippet to it since there is no default event that you need to prevent.
I am using the following script to show a different background depending on the state of the div.
When it is not expanded it shows the "plus (+)" sign, while when is expanded it does not have background image (does not shows anything).
The problem there is that only work once, and I dont know why.
Here's the code:
EDIT (added HTML)!
HTML:
<body>
<section>
<div class="wrapper wf">
<ul id="Parks" class="just">
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_vital" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_vital" class="nav-toggle"></div>
<div id="therapy_vital" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
<!--------------- PRODUCT -->
<li class="mix" href="#therapy_natur" >
<div class="meta name">
<div class="img_wrapper">
<img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/>
</div>
<div class="titles">
<h2>TITLE</h2>
</div>
</div>
<!-- Expand -->
<div href="#therapy_natur" class="nav-toggle"></div>
<div id="therapy_natur" style="display:none">
<article class="ac-small">
SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br>
</article>
</div>
</li>
</ul>
</div>
</section>
</body>
JS:
$(document).ready(function() {
$('.meta').click(function() {
$(this).css('background', 'none');
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$('.meta').click(function() {
$(this).css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
});
$(collapse_content_selector).toggle(function() {});
});
});
(The .mix value makes the Div expands, and the .meta class switch to different background).
Any clue?
EDIT2 (Live example)
http://anubisfiles.com/test/test.html
(Due I am not really familiar with jsFiddle, I prefer to show you it hosted on a website).
Thanks!
Use on function to bind events,
$('element').on('click', function() {
});
$('.mix').click(function() {
var collapse_content_selector = $(this).attr('href');
var toggle = $(this);
$(this).find('.meta').css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent');
$(collapse_content_selector).toggle(function() {});
});
Try this