Attach click event for div - javascript

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.

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>

Hide a div that is currently opened and show the div thats clicked,and vice versa

I basically want to create a product listing page using jquery, just like this page: https://losangeles.sharegrid.com/browse/
Here is my code:
$(function(){
$('.link').click(function(){
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('#'+id).show();
});
});
.container {
width: 100%;
height: auto;
}
.eighty-percent {
width: 80%;
margin: 0 auto;
}
.categories {
width: 20%;
float: left;
ul {
li {
ul {
display: none;
}
}
}
}
.products-list {
width: 80%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="eighty-percent">
<div class="categories left">
<ul>
<li>
<a href="#" class="link" id="main-category" rel="main1">
main-category-one
</a>
<ul>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list" id="main-sub1">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub2">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub3">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub4">
<h1>sub category one</h1>
</div>
</div>
</div>
</div>
Now the problem I am having is as you can see, I cannot make the div that is currently opened make hidden when I click on the other sub category links. I hope my snippet will make clear what I am trying to achieve
All changes and details are commented within the source.
FIDDLE
SNIPPET
$(function() {
$('.link').click(function(event) {
/*
Added to prevent <a>nchor links
from jumping. Note the `event`
parameter above as well.
*/
event.preventDefault();
$(this).next('ul').toggle();
var id = $(this).attr("rel");
/*
Added a class (i.e. `sub`), to
each #main-sub* so all of them will
be targeted to hide by the .hide()
method.
*/
$('.sub').hide();
$('#' + id).show();
});
});
.container {
width: 100%;
height: auto;
}
/*
Added to prevent the right
column from wrapping under
the left column.
*/
.subList {
height: 100vw;
display: none;
}
.categories {
width: 50%;
float: left;
}
.products-list {
width: 50%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!--Removed .eighty-percent because it
hindered layout in demo only,
adding it or removing it shouln't
affect functionality in your production version.-->
<div class="categories left">
<ul>
<li>
main-category-one
<!--Added a class (i.e. subList)
in order to style it easier,
see CSS for why styling was needed -->
<ul class="subList">
<!--Changed each <a>nchor id as a
unique one. You should never have more
than one of the same id on a page.-->
<li>sub-cat-one
</li>
<li>sub-cat-two
</li>
<li>sub-cat-three
</li>
<li>sub-cat-four
</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list sub" id="main-sub1">
<h2>sub category one</h2>
</div>
<div class="products-list sub" id="main-sub2">
<h2>sub category two</h2>
</div>
<div class="products-list sub" id="main-sub3">
<h2>sub category three</h2>
</div>
<div class="products-list sub" id="main-sub4">
<h2>sub category four</h2>
</div>
</div>
</div>
As far as I understood, you want to hide the main div when another was clicked.
This would achieve it:
$(function() {
$('.link').click(function() {
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('div[id^="main"]').hide(); // added line
$('#' + id).show();
});
});

Anchor Tag inside a div Not working

I would like to have an anchor to a like inside my div.I set style="z-index: 1000;" to parent div. but it doesn't work :
<?php
<!-- Image -->
<div class="content" style="cursor: pointer;" >
<div class="mask_wrap" style="z-index: 1000;">
<a href="{{base_url()}}offers/{{$o->url}}"> // start my anchor
<div class="mask_cont" >
<!-- info BOTTOM -->
<div class="item_more">
<div style="margin:0 70px"> #if($moment )
<div class="cat5" style="cursor:unset">پیشنهاد از لحظه خرید</div>
#endif
<div class="mantaghe">{{$o->zone}}</div>
<div class="buyi"> {{$o->current_users}} خرید </div>
</div>
</div>
</div>
</a> //end my anchor
z-index need position and by default the position is set to static and for this the z-index wouldn't work. So, you may apply position relative or absolute or fixed:
<div class="mask_wrap" style="z-index: 1000;position: relative">
Add this to your style
.mask_wrap {
position:relative;
}
.mask_wrap a:after{
content:"";
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}

jQuery left and right button scroll

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).

How can I use the jQuery Zoomy plugin in catalog product_list Prestashop

I want to make like here http://www.templatemonster.com/prestashop-themes.php. I add this script sunsean.com/zoomi/zoomi.js in header and then change product_list
<div class="center_block">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
<img class="zoomi" src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
</a>
<h3>
<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.name|escape:'htmlall':'UTF-8'}">{$product.name|escape:'htmlall':'UTF-8'|truncate:35:'...'}
</a>
</h3>
<p class="product_desc">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" title="{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}" >{$product.description_short|strip_tags:'UTF-8'|truncate:360:'...'}
</a>
</p>
</div>
But it doesn't work. Here what I have:
<img class="zoomi" width="124" height="124" alt="" src="http://kids.int/img/p/1/5/15-home_default.jpg" style="position: relative; z-index: 8;">
<img class="zoom2" src="http://kids.int/img/p/1/5/15-home_default.jpg" style="position: absolute; z-index: 20; display: block; left: 1127px; top: 581px;">

Categories

Resources