Setting height based on another elements height over multiple instances in jQuery - javascript

I'm using jQuery to obtain the height from one div and add that via css into another
So i have the following layout as an example:
<div class="row">
<div class="column image">
<img src="image.jpg" />
</div>
<div class="column content">
<p>Content</p>
</div>
</div>
<div class="row">
<div class="column content">
<p>Content</p>
</div>
<div class="column image">
<img src="image.jpg" />
</div>
</div>
with the following jQuery
function showHeight( element, height ) {
$( "div.image" ).css("height", height);
}
showHeight( "div", $( ".content" ).height() );
where i would take the height from ".content" & recur that height into ".image"
now obviously this works for say one instance but I'm looking to have this over multiple instances rather than write a function for each.

You can loop through the .image elements and change its height according to the prev('.content') element.
function updateHeight() {
// loop through all image elements
$( "div.image" ).each(function(){
// get `height` of the previous `.content` element
var contentHeight = $(this).prev('.content').height();
// set height
$(this).css("height", contentHeight);
});
}
//call one method to update
updateHeight();
This will only work when the .image comes after .content. I reordered the HTML like this:
<div class="row">
<div class="column content">
<p>Content</p>
</div>
<div class="column image">
<img src="image.jpg" />
</div>
</div>
<div class="row">
<div class="column content">
<p>Content</p>
</div>
<div class="column image">
<img src="image.jpg" />
</div>
</div>
UPDATE:
To find closest .content in any order, change this
var contentHeight = $(this).prev('.content').height();
to
var contentHeight = $(this).prev('.content').height() || $(this).next('.content').height();

Related

A search box that searches for a specific tag composed of nested DIVs and shows the desire content and hides other data

New to this thing. Any idea how do i sort it in a specific data. For further explanation: If i search a name of a brand the out put will be show only the desire brand in A area.
$("#search")..on("keyup", function() {
var key = this.value;
$(".tosearch").each(function() {
var $this = $(this);
$this.toggle($(this).text().indexOf(key) >= 0);
});
});
Search: <input id='search'></input>
<div class="tosearch">
<div>
<h2>A</h2>
<div> Back to the top</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/agv-logo-120x120.jpg" />AGV
<div class="tosearch">AGV</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/altamont-logo-120x120.jpg" />ALTAMONT
<div class="tosearch">ALTAMONT</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/arbor-logo-120x120.jpg" />ARBOR
<div class="tosearch">ARBOR</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/almost-logo2-120x120.jpg" />ALMOST
<div class="tosearch">ALMOST</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/alpinestars-logo-120x120.jpg" />ALPINESTARS
<div class="tosearch">ALPINESTARS</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/answer-racing-logo-120x120.jpg" />ANSWER RACING
<div class="tosearch">ANSWER RACING</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/arai-logo-120x120.jpg" />ARAI
<div class="tosearch">ARAI</div>
</div>
</div>
If I understand correctly this is what you are looking for.
I removed the .tosearch class from the container div, otherwise it would also be filtered.
Currently it filters by the start of the word. A good idea is to use toLowerCase() so the filter is case insensitive. Currently it also hides the image by calling the toggle() on parent().
$("#search").on("keyup", function() {
var key = this.value;
$(".tosearch").each(function() {
$(this).parent().toggle($(this).text().toLowerCase().startsWith(key.toLowerCase()));
});
});
Search: <input id='search'></input>
<div>
<div>
<h2>A</h2>
<div> Back to the top</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/agv-logo-120x120.jpg" />AGV
<div class="tosearch">AGV</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/altamont-logo-120x120.jpg" />ALTAMONT
<div class="tosearch">ALTAMONT</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/arbor-logo-120x120.jpg" />ARBOR
<div class="tosearch">ARBOR</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/almost-logo2-120x120.jpg" />ALMOST
<div class="tosearch">ALMOST</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/alpinestars-logo-120x120.jpg" />ALPINESTARS
<div class="tosearch">ALPINESTARS</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/answer-racing-logo-120x120.jpg" />ANSWER RACING
<div class="tosearch">ANSWER RACING</div>
</div>
<div>
<img src="//cdn.shopify.com/s/files/1/1223/6434/files/arai-logo-120x120.jpg" />ARAI
<div class="tosearch">ARAI</div>
</div>
</div>

Trying to filter non-hovered elements with jquery

I have an image gallery. Basically I am trying to go for something that lets the hovered image maintain its styling properties but the background (non-hovered images, I should say) filter to grayscale.
This is my first project and I am trying to push myself. I am making some mistakes but learning from each one. Your help is appreciated.
HTML:
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="images/martial-arts-banner/boxing.png">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="images/martial-arts-banner/kickboxing.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="images/martial-arts-banner/muaythai.png">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="images/martial-arts-banner/wrestling.png">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>
JQUERY:
$(document).ready(function() {
$(".disciplines img").hover(function(){
var images = $(".disciplines img");
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).next().find('h3').slideToggle();
if (images.not(".active-image") {
$(images).css("filter", blur("20px"));
}
});
You have to do it like below:-
$(document).ready(function() {
$("#image-gallery img").hover(function(){ // on hover of image
$(this).toggleClass("active-image");
$(this).css("cursor", "pointer");
$(this).parent().css({"filter": ""}); //remove it's parent filter css
$('img').not($(this)).parent().css({"filter":'blur(5px)'}); //add filter css to all othe images parent-div apart from thr current clicked-one
}, function () { //when hover-out
$('.disciplines').css({"filter": ""}); //remove filter css from all div
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="image-gallery">
<div class="container">
<div id="imageboxing" class="disciplines">
<img src="https://ae01.alicdn.com/kf/HTB1dizJKFXXXXa_XFXXq6xXFXXXs/Closed-Type-Boxing-Helmet-Head-Protector-For-Taekwondo-Karate-Tai-MMA-Muay-Thai-Kickboxing-Competition-Training.jpg_50x50.jpg">
<div class="imagetext">
<h3>BOXING</h3>
</div>
</div>
<div id="imagekb" class="disciplines">
<img src="http://www.days-gym.com/wp-content/uploads/2015/11/days-gym-website-logo.png">
<div class="imagetext">
<h3>KICKBOXING</h3>
</div>
</div>
<div id="muaythai" class="disciplines">
<img src="https://i.pinimg.com/favicons/50x/ded1fa7e09a93f576a8dc1060fbf82f7e63076e47a08abd0cf27887f.png?ca1416448b5d5bfb6c7465ba2cb5e0d4">
<div class="imagetext">
<h3>MUAYTHAI</h3>
</div>
</div>
<div id="wrestling" class="disciplines">
<img src="https://iawrestle.files.wordpress.com/2017/06/screen-shot-2017-06-14-at-10-35-09-am.png?w=50&h=50&crop=1">
<div class="imagetext">
<h3>WRESTLING</h3>
</div>
</div>
<div class="clear"></div>
</div>
</section>

Applying behavior to specific div within elements with same class

I am trying to hide div with class="input" only when hidden-span is equal to i-am-secret.
I've tried different approaches using .each(function) or .next() but could not get my head around it. In order to illustrate the example I've added the code bellow.
Please note that I can not add any id's or classes and the order of the rows may vary.
(function($) {
$('.basket__item-row').each(function() {
if ($('.hidden-span').is(":contains('i-am-secret')")) {
$(this).next().hide();
}
});
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am extra div
<span class="hidden-span">i-am-secret</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
<span class="hidden-span">another class</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
I would do a traversal this way...
$('.hidden-span') // Target all the hidden spans.
.filter(function () { // Filter all the span that contains the text.
return $(this).text().indexOf("i-am-secret") !== false;
})
.closest(".image") // Get the parent `.image`.
.next(".input") // Get the `.input` which is its sibling.
.hide(); // Hide it.
(function($) {
$('.hidden-span').filter(function () {
return $(this).text().indexOf("i-am-secret") !== false;
}).closest(".image").next(".input").hide();
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am extra div
<span class="hidden-span">i-am-secret</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
Please correct the syntax errors. It should be class="basket__item-row".

Dragging item gets hidden when overflow-y is used

I created a Fiddle to demonstrate the problem (also can be run inside this question, below).
I have a sidebar of playing card images that I want to drag into a main area. The sidebar holds a lot of cards so I want it to be scrollable. However, when I give it a scroll feature, then when I drag a card, it gets hidden when I drag it out of the sidebar.
var app = angular.module('myApp', ['ngDraggable']);
app.controller('ctrl', function ($scope) {
});
#gallery-container {
overflow-y: scroll;
}
.card {
width: 100%;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://rawgit.com/fatlinesofcode/ngDraggable/master/ngDraggable.js"></script>
<div ng-app="myApp">
<div ng-controller="ctrl">
<div class="row">
<div class="col-xs-3">
<div id="gallery-container">
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<img ng-drag="true" ng-drag-data="hi" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" class="card" src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="">
</div>
</div>
</div>
</div>
<div class="col-xs-9">
<h2> Drop Area </h2>
</div>
</div>
</div>
</div>
When I comment out overflow, like
/*overflow-y: scroll;*/
in the CSS, it now works.
How can I both have a scrolling sidebar and drag items out of it?
To drag objects between zones with scrolled or hidden overflows, you need a to create clone div between the drag div and the drop div using the ng-drag-clone
<div ng-drag-clone="">
<img ng-src="{{clonedData .link}}" width="100px">
</div>
check my Fiddle
I've tried to update your code, but quickly to demonstrate the point:
I noticed you did not create any way for the drop zone to render or store the data being passed.
I created a cards array and a cardsDrop array to store the data.
I also implemented onDropComplete function to push the card object into cardsDrop
$scope.onDropComplete = function (data, evt) {
var index = $scope.cards.indexOf(data);
if (index == -1) $scope.cardsDrop.push(data);
}
and a onDragComplete function to remove a card from the original deck (for some applications, this is optional... sometimes you want a list to drag from that does not remove options):
$scope.onDragComplete = function (data, evt) {
console.log("133", "$scope", "onDragSuccess1", "", evt);
var index = $scope.cards.indexOf(data);
if (index > -1) {
$scope.cards.splice(index, 1);
}
and I used ng-repeat to render each deck in the drag zone
<div class="row" ng-repeat="card in cards">
<img src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" alt="" vertical-scroll="false" ng-drag="true" ng-drag-data="card" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true" width="100px">
</div>
and drop zones:
<div style="min-height: 300px;" class="col-xs-5" ng-drop="true" ng-scroll="false" ng-drag-move="true" ng-drop-success="onDropComplete($data,$event)">
<draggableClone></draggableClone>
<h2> Drop Area </h2>
<div ng-repeat="card in cardsDrop" ng-drag-success="onDragComplete($data,$event)" class="card">
<img src="http://www.download32.com/images/screen/vector_playing_cards-467278.png" class="card" alt="" width="100px">
</div>
</div>
In addition, I have added some styling to the ng-drag and ng-drop.
The ngDraggable library you're using does not support adding the element to a parent element (like document.body) once you start dragging. You need that, otherwise the element can never leave the sidebar and keep on being visible. That's how CSS works.
What you could do is use another library that supports adding the draggable element to another element, like jQuery UI:
app.directive('draggable', function() {
return function($scope, $element, $attrs) {
$element.draggable({
appendTo: 'body',
stop: function(event, ui) {
// Handle new position
}
});
};
});
There are probably AngularJS wrappers for Jquery UI out there that do this for you in a more declarative style, or other ngDraggable alternatives that support this.

Use Kendo UI Flip Effects / Combined Effects for multiple items on the same page

I need to use kendo ui to display between 6-60 items. Each using the flip effect here http://demos.telerik.com/kendo-ui/fx/combined
The products will be loaded from the database with the unique id like this:
<div class="row">
<div class="col-md-4 product-container">
<div id="productID1" class="productID">
<div class="product">
<div id="product-back1" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front1" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID2" class="productID">
<div class="product">
<div id="product-back2" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front2" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 product-container">
<div id="productID3" class="productID">
<div class="product">
<div id="product-back3" class="product-desc">
<p>BACK</p>
</div>
<div id="product-front3" class="product-image">
<p>FRONT</p>
</div>
</div>
</div>
</div>
The problem is I need multiple panels on the page how can I make each "front" and "back" click unique.
var el = kendo.fx($('div[id^=productID]')),
flip = el.flip("horizontal", $('div[id^=product-front]'), $('div[id^=product-back]')),
zoom = el.zoomIn().startValue(1).endValue(1);
flip.add(zoom).duration(200);
$('div[id^=product-front]').click(function () {
flip.stop().play();
});
$('div[id^=product-back]').click(function () {
flip.stop().reverse();
});
I've tried loading each item into an array but have not found a good way to assure the correct item will be flipped.
Since every div[id^=product-front] is a child of div[id^=productID], you can find the children of that and use it.
replace flip.stop().play(); with
kendo.fx($(this)).flip("horizontal", $(this).children()[0], $(this).children()[1]).stop().play();

Categories