jQuery left and right button scroll - javascript

I've been trying to figure this out for a couple days now and can't seem to make any headway. I am trying to do a simple left and right scroll using images as the scrollers but I can't seem to get it to work. Here is my code: http://jsfiddle.net/7GrTM/1/
HTML
<div class="outerwrapper">
<div class="innerwrapper">
<div class="productsbox">
<img class="box_image" src="images/productsbox1.png" style="width:222px" alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox2.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox3.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox4.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox5.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox6.png" style='width:221px' alt="this"/>
</div>
</div>
</div>
<div class="productspace">
<img src="images/arrowleft.png" id="#left" alt="left"/>
<img src="images/arrowright.png" id="#right" style="padding-left: 10px;" alt="right"/>
</div>
JS
$(function () {
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$("#outerwrapper").stop().animate({ scrollLeft: dir + '422' }, 1000);
});
});
CSS
.spacer {
width: 20px;
height: 319px;
display: inline-block;
}
.outerwrapper {
margin: 0px auto;
width: 1050px;
height: 323px;
display: inline-block;
overflow: hidden;
}
.innerwrapper {
width: 1600px;
height: 322px;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
Any help will be appreciative.


Your IDs are wrong, you have named them #left and #right, not simply left and right. In your JSfiddle you have managed to set this as the id: #left1 and #right1.
Solution: Change the ID's to say left and right, so you will have:
<div class="productspace">
<img src="images/arrowleft.png" id="left" alt="left"/>
<img src="images/arrowright.png" id="right" style="padding-left: 10px;" alt="right"/>
</div>
You are also trying to access your div with class outerwrapper as a id, not as a class. Either change outerwrapper to be an ID so <div id="outerwrapper"> or change the jquery to look for the class: $(".outerwrapper") (the prior solution is in my mind superior, so change div id).

Related

Load More Button with jQuery

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>

How to get link from an element and add to all elements of parent element using JavaScript

I have many divs with a class and every div contains diferent elements including a link.
what I want is to get the link and add it to all Elments of parent div such as img, headline etc. (using JavaScript)
Ex:
.myClass{
background-color:red;
display:inline-block;
width:150px;
overflow:hidden;
}
<div class="myClass">
<div></div>
<div></div>
<div><h1>test</h1></div>
<div><img src="https://scx1.b-cdn.net/csz/news/800/2019/2-nature.jpg" alt="">
Link1
</div>
</div>
<div class="myClass">
<div></div>
<div></div>
<div><h1>test</h1></div>
<div><img src="https://scx1.b-cdn.net/csz/news/800/2019/2-nature.jpg" alt="">
Link2
</div>
</div>

This is the fastest
Note I use function where I want to get at this or $(this)
$(function() { // on page load
$(".ecs-event").on("click", function() { // click any ecs-event container
location = $(this).find("a[rel=bookmark]").attr("href"); // find the bookmark
})
});
.myClass {
background-color: red;
display: inline-block;
width: 150px;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ecs-events compact compact-1">
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">6</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/12/01-03-hannover-schulparty-1-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Hannover Schulparty – abgesagt!</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">7</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/10/001-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Eno und Sero el Mero – abgesagt</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
</div>
Plain JS
window.addEventListener("load", () => { // on page load
[...document.querySelectorAll(".ecs-event")].forEach(div => { // find all ecs-event
div.addEventListener("click", function(e) { // add a click handler
location = this.querySelector("a[rel=bookmark]").getAttribute("href"); // find the bookmark
})
})
});
.myClass {
background-color: red;
display: inline-block;
width: 150px;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ecs-events compact compact-1">
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">6</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/12/01-03-hannover-schulparty-1-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Hannover Schulparty – abgesagt!</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">7</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/10/001-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Eno und Sero el Mero – abgesagt</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
</div>

icon to center on click

I have icons over image as shown below.
index.php
<div class="container-fluid" >
<h1 id="service" data-animate="fadeInLeft" data-delay="200">Our Services</h1>
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 service_img" id="services_img">
<p class="service_p" id="p" style="padding-bottom: 2px;"></p>
<h1 class="service_head" id="desc"></h1>
<section class="customer-logos slider" style="top: 35%;padding-left: 50px;" id="service_images">
<div class="slide">
<img class="image_service contrast" id="image_service_1" src="images/services_icons/drafting.png" alt="drafting" onclick="desc1()">
<div class="head_service" style="color:white;margin-left: -10px;">Drafting Services</div>
</div>
<div class="slide"><img class="image_service" id="image_service_2" src="images/services_icons/Emerging market penetration.png" alt="Emerging market penetration" onclick="desc2()">
<div class="head_service" style="color:white;margin-left: -15px;">Emerging market<br><span id="penetrate" style="margin-left: 15px;">penetration</span></div>
</div>
<div class="slide"><img class="image_service" id="image_service_3" src="images/services_icons/Engineering analytics.png" alt="Engineering analytics" onclick="desc3()">
<div class="head_service" id="engg_analytics" style="color:white;margin-left: -15px;">Engineering Analytics</div>
</div>
<div class="slide"><img class="image_service" id="image_service_4" src="images/services_icons/Industrial IoT.png" alt="Industrial IoT" onclick="desc4()">
<div class="head_service" style="color:white;margin-left: -5px;">Industrial IoT</div>
</div>
<div class="slide"><img class="image_service" id="image_service_5" src="images/services_icons/Life cycle.png" alt="Life cycle" onclick="desc5()">
<div class="head_service" style="color:white;margin-left: -2px;">Life Cycle</div>
</div>
text.css
.bg-img {
position: relative;
width: 100%;
height: 100%;
background-size: cover;
}
.bg-img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-image: linear-gradient(to bottom right, #002f4b, #dc4225);*/
opacity: .6;
}
text.js
$('#image_service').click(function() {
$('#image_service').animate({
'marginTop' : "-=30px" //moves up
});
});
I need a solution for this:
When i click on the icon it should be moved to center. I am able to move icon but it is not getting out exactly what i need.
Thank you in Advance!!

A simple jquery code need to be implemented on the icon click.
CSS:
.iconOne { position:relative }
.iconOne.centered { top:-100px; }
jS:
$(".iconOne").click(function(e) {
$(this).addClass("centered");
});
Comment if this is what you want like.
Thanks

Swipe.js strange result with Media Queries

Im having an issue while using media queries with "Swipe".
If i open my website in "tablet" mode, the swipe works in Mobile and Tablet forms, Desktop wont.
BUT, if i save my files again in the text editor and open them in Desktop mode, they work, but not in Mobile and Tablet.
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
-ms-touch-action: none;/*pan-y on desktop*/
touch-action: none; /*pan-y on desktop*/
}
.swipe-wrap{
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
<div id="slidepassos" class="swipe slidepassos">
<div class="swipe-wrap">
<div class="mySlides">
<div class="passo-um">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 1:</h2>
<img src="img/passoumilu.svg" class="passoumilu">
<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-dois">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 2:</h2>
<img src="img/passodoisilu.svg" class="passoumilu">
<p>Now your coach gets the results of your efforts and publish them in the box page on Crossagenda.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-tres">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 3:</h2>
<img src="img/passotresilu.svg" class="passoumilu">
<p>Remember, get up your energy levels and while you're at it, check your WOD results and progress in Crossagenda.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-quatro">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 4:</h2>
<img src="img/passoquatroilu.svg" class="passoumilu">
<p>Chat with your colleagues in our app or poke them in your next class ;)</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.mySwipe = Swipe(document.getElementById('slidepassos'));
</script>

Attach click event for div

Good day, I want to attach click method to div, by BIND method.
My code of attaching is
$("#brend_list > #mCSB_1 > .mCSB_container > div > a").bind('click',function(){
id=$(this).attr('id');
ttl=$(this).parent().children("span").html();
state=$(this).hasClass("checked");
if(state) {$(this).removeClass("checked");
$("#"+id+"_filter").remove();
}
else{$(this).addClass("checked");
$("#filters").append(" <div style='display:inline-block;' id='"+id+"_filter' class='filter_brands' onclick='brend_uncheck(\""+id+"\"); $(this).remove();'><span>"+ttl+"</span><b>x</b></div> ");
}});
My div structure is
<div id="brend_list" class="mCustomScrollbar _mCS_1">
<div class="mCustomScrollBox mCS-light" id="mCSB_1" style="position:relative; height:100%; overflow:hidden; max-width:100%;">
<div class="mCSB_container" style="position: relative; top: 0px;">
<div><a id="filt_brend001"></a><span>Loreal Paris</span></div><!-- this <a> -->
<div><a id="filt_brend002"></a><span>Laura Mercier</span></div>
...........
</div>
<div class="mCSB_scrollTools" style="position: absolute; display: block;">
<div class="mCSB_draggerContainer"><div class="mCSB_dragger" style="position: absolute; height: 110px; top: 0px;" oncontextmenu="return false;">
<div class="mCSB_dragger_bar" style="position: relative; line-height: 110px;">
</div>
</div>
<div class="mCSB_draggerRail">
</div>
</div>
</div>
</div>
</div>
But it doesn't attach.

You should either change
$("#brend_list > #mCSB_1 > .mCSB_container > div > a")
to
$("#brend_list > #mCSB_1 > .mCSB_container > div > a + span")
A fiddle with above is here.
or, change the HTML from
<div><a id="filt_brend001"></a><span>Loreal Paris</span></div>
to
<div><a id="filt_brend001"><span>Loreal Paris</span></a></div>
Fiddle with above in action is here.

Categories

Resources