I have a html structure with a lot of rows and columns.
Now I want that all columns in the same row have the same height.
I have make a script that doing equalHeight. But this script put the same height on all the columns. Below you find the html and the script.
What I'm doing wrong? Thank you for helping me!
<div class="row">
<div class="column">
</div><!-- /column -->
<div class="column">
</div><!-- /column -->
</div><!-- /row -->
<div class="row">
<div class="column">
</div><!-- /column -->
<div class="column">
</div><!-- /column -->
<div class="column">
</div><!-- /column -->
</div><!-- /row -->
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).outerHeight();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
};
equalHeight($('.row .column'));
Take this script http://jsfiddle.net/mmSeU/2/
function equalHeight(group) {
$(group).each(function(i,eachrow) {
tallest = 0;
$(eachrow).children('.column').each(function(j,eachcolumn) {
thisHeight = $(eachcolumn).outerHeight();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
$(eachrow).children('.column').height(tallest);
});};equalHeight($('.row'));
Related
i want to make a slider with a filter, fullscreen, and grid view
i made the first two with this code and it's working well but when i start to make grid button the stuff got missy
<section class="work-gallery">
<h2>
<span>our</span><br />
work gallery
</h2>
<div class="filters">
<span class="filter" data-filter="filter1">El Capitan</span>
<span class="filter" data-filter="filter2">Half Dome</span>
<span class="filter" data-filter="filter3">Taft Point</span>
</div>
<div class="galler swiper">
<div class="swiper-wrapper galler-wrapper">
<div class="swiper-slide galler-slide" data-filter="filter1">
<img src="/asset/img/event.jpg" alt="">
</div>
<div class="swiper-slide galler-slide" data-filter="filter2">
<img src="/asset/img/header.jpeg" alt="">
</div>
<div class="swiper-slide galler-slide" data-filter="filter3">
<img src="/asset/img/services.png" alt="">
</div>
<div class="swiper-slide galler-slide" data-filter="filter1">Slide 4</div>
<div class="swiper-slide galler-slide" data-filter="filter2">Slide 5</div>
</div>
<div class="fulscreen">
i'm full
</div>
</div>
</section>
and that's my jq code
jQuery(document).ready(function(){
var swipergaller = new Swiper('.galler', {
slidesPerView: 1,
slidesPerGroup: 1,
});
// Filter spans
var filters = document.querySelectorAll('.filter');
for (var i = 0; i < filters.length; i++) {
filters[i].addEventListener('click', function() {
var filterValue = this.getAttribute('data-filter');
swipergaller.params.filter = filterValue;
swipergaller.update();
showSlidesFromSelectedFilter(filterValue);
removeActiveClass();
this.classList.add('active');
});
}
function removeActiveClass() {
for (var i = 0; i < filters.length; i++) {
filters[i].classList.remove('active');
}
}
function showSlidesFromSelectedFilter(filterValue) {
var slides = document.querySelectorAll('.galler-slide');
for (var i = 0; i < slides.length; i++) {
if (slides[i].getAttribute('data-filter') === filterValue) {
slides[i].style.display = "block";
} else {
slides[i].style.display = "none";
}
}
}
});
$(document).ready(function(){
$('.fulscreen').click(function(){
$('.galler-wrapper').toggleClass('imbig');
$('.filters').toggleClass('filtergobig');
})
});
now i need to add a new button that when i click on it shows all selected slides from filter as gird and as i said i'm using swiper js
How to sort divs by a specific date or by two dates
Example:
if i taped 27-09-2018 I posted from 27-09-2018
this my code
1-I created a function who compared between date and input
2-after compare i display the chosen date
function sortDescending(a, b) {
var date1 = $("#datepick").val();
date1 = new Date(date1[0], date1[1] - 1, date1[2]);
var date2 = $(b).find(".year").text();
date2 = date2.split('-');
date2 = new Date(date2[2], date2[1] - 1, date2[0]);
return date1 >= date2;
};
$('#datepick').click(function () {
console.log("tt");
$('#all_elements .element').sort(sortDescending).appendTo('#all_elements');
});
<input type="date" id="datepick"/>
<div id="all_elements">
<!-- one element -->
<div class="element">
<div class="display-number">02</div>
<div class="year">20-10-2011</div>
</div><!-- element -->
<!-- one element -->
<div class="element">
<div class="display-number">03</div>
<div class="year">22-09-2011</div>
</div><!-- element -->
<!-- one element -->
<div class="element">
<div class="display-number">01</div>
<div class="year">01-12-2011</div>
</div><!-- element -->
<!-- one element -->
<div class="element">
<div class="display-number">04</div>
<div class="year">01-06-2011</div>
</div><!-- element -->
<!-- one element -->
<div class="element">
<div class="display-number">05</div>
<div class="year">29-09-2019</div>
</div><!-- element -->
</div> <!--all_elements--
I am trying to get a boolean that will let me know if a parent element has a child element. Some of the constraints are:
There can be x number of these "boxes"
Check and see for any of the boxes have a footer element
If the box does not have a footer element, add a class
<div class="data-trend">
<header></header>
<div class="main"></div>
<footer></footer>
</div>
<div class="data-trend">
<header></header>
<div class="main"></div>
<footer></footer>
</div>
<div class="data-trend">
<header></header>
<div class="main">
<span class="glyphicons"><span>
<!-- On the glyphicons I would add class if there is no footer -->
</div>
<!-- notice no footer -->
</div>
Moved the above comment into an actual answer:
var elems = document.querySelectorAll('.data-trend'),
len = elems.length,
i = -1
while(++i < len) {
if(!elems[i].querySelector('footer')) elems[i].classList.add('no-footer')
}
.no-footer { border: 3px solid blue; }
<div class="data-trend">
<header>Testing</header>
<div class="main"></div>
<footer>Footer</footer>
</div>
<div class="data-trend">
<header>Testing</header>
<div class="main"></div>
<footer>Footer</footer>
</div>
<div class="data-trend">
<header>Testing</header>
<div class="main">
<span class="glyphicons"><span>
</div>
</div>
If you're doing a lot of this in vanilla, it makes sense to define a forEach helper function for yourself
function forEach(elems, fn){
var len = elems.length,
i = -1
while(++i < len) {
fn(elems[i])
}
}
I'm trying to achieve smooth scrolling with jQuery and smoothscroll.js. I have done a lot of research as to why I'm getting this error in dev tools but I can't seem to figure it out:
TypeError: $(...).offset(...) is undefined
This is my code:
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top - headerH + 'px'
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
});
This is the html:
<body class="onepage" data-spy="scroll" data-target=".navigation">
<div id="load"></div>
<!-- START PAGE WRAP -->
<div class="page-wrap">
<!-- START HOME SECTION -->
<div id="home" class="home-parallax">
<div class="home-text-wrapper">
<div class="home-logo-text">
Welcome to Jarvis
</div>
<div id="home-slider" class="flexslider">
<ul class="slides styled-list">
<li class="home-slide"><p class="home-slide-content">We are <span class="highlight">Creative</span> Nerds</p></li>
<li class="home-slide"><p class="home-slide-content">We are <span class="highlight">crazy</span> Coders</p></li>
<li class="home-slide"><p class="home-slide-content">We <span class="highlight">love</span> Pizzas</p></li>
</ul>
</div><!-- END FLEXSLIDER -->
</div><!-- END HOME TEXT WRAPPER -->
</div><!-- END HOME SECTION -->
<!-- START NAVIGATION -->
<nav class="light sticky-nav navigation">
<!-- START CONTAINER -->
<div class="container clearfix">
<div class="four columns">
<!-- START LOGO -->
<div class="logo large">
<img src="images/logo.png" title="logo" alt="Logo"/>
</div>
<!-- END LOGO -->
</div><!-- END FOUR COLUMNS -->
<div class="twelve columns">
<!-- START NAVIGATION MENU ITEMS -->
<ul class="main-menu large nav" id="nav">
<li>Home</li>
<li>About</li>
</ul>
<!-- END NAVIGATION MENU ITEMS -->
</div><!-- END TWELVE COLUMNS -->
</div><!-- END CONTAINER -->
</nav>
<!-- END NAVIGATION -->
<!-- START ABOUT US SECTION -->
<div id="about" class="page">
<div class="container">
<div class="row">
<div class="sixteen columns">
<!-- START TITLE -->
<div class="title">
<h1>About Jarvis</h1>
<div class="subtitle">
<p>we are utmost <span class="highlight">Creative Agency</span> located in Melbourne, Australia. Praesent rhoncus nunc <span class="highlight">vitae metus</span> condimentum viverra.</p>
</div><!-- END SUBTITLE -->
</div><!-- END TITLE -->
</div><!-- END SIXTEEN COLUMNS -->
</div><!-- END ROW -->
</div><!-- END CONTAINER -->
Please check element is exist or not before got top property of offset() function:
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
var destinateEle = $($(this).attr("href"));
if (destinateEle.length == 0) {
return;
}
$("html, body").animate({
scrollTop: destinateEle.offset().top - headerH
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
});
After read you update HTML, I have to change js to remove "index.html".
Jquery('index.html#your-id') will always return empty element.
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
var queryIDArr = $(this).attr("href").split('#');
if (queryIDArr.length < 2) return;
var queryID = queryIDArr[1];
var destinateEle = $('#' + queryID);
if (destinateEle.length == 0) {
return;
}
$("html, body").animate({
scrollTop: destinateEle.offset().top - headerH
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
});
I want to continuously fade 2 pieces of content in and out of the same position. Currently the fade in fade out works but the content is below the other content and they are both viewable when the document loads.
To put it simply the content will keep switching between #fade1 and #fade2.
HTML:
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="opactiy:0">test</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->
JS:
$(document).ready(function () {
// runs fade code for homepage content
fadeThem();
}
// fades content in and out on homepage
function fadeThem() {
$("#fade1").fadeOut(3000, function() {
$("#fade2").fadeIn(2000, fadeThem());
$("#fade2").fadeOut(2000, fadeThem());
$("#fade1").fadeIn(2000, fadeThem());
});
}
Why don't you put your code in : $( window ).load(function() {} ;
Something like this :
$( window ).load(function() {
// -- Snipped -- //
$(".right-image-crm").addClass('right-image-up');
$(".left-image-crm").addClass("left-image-up");
$(".center-image-crm").addClass("center-image-up");
$(".loader").fadeOut(1000,function(){
}
});
Working Code (JS Fiddle): http://jsfiddle.net/nfdebmen/4/
You can have any Number of PlaceHolders in this code. I have made 4.
var _toggle = {
totalNodes: null,
lastNode: 0,
duration: 1000,
init: function () {
_toggle.totalNodes = $(".toggle").length;
_toggle.next();
},
next: function () {
var nextNode = _toggle.lastNode + 1;
if (nextNode >= _toggle.totalNodes) {
nextNode = 0;
}
//
$(".toggle:eq(" + _toggle.lastNode + ")").fadeOut(_toggle.duration, function () {
$(".toggle:eq(" + nextNode + ")").fadeIn(_toggle.duration);
_toggle.next();
});
_toggle.lastNode = nextNode;
}
}
$(document).ready(function () {
_toggle.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p class = "toggle active">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p class = "toggle" style = "display: none;">test</p>
<p class = "toggle" style = "display: none;">Ahsan</p>
<p class = "toggle" style = "display: none;">http://aboutahsan.com</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->
Try using .fadeToggle()
$(document).ready(function() {
var p = $("p[id^=fade]");
function fadeThem() {
return p.fadeToggle(3000, function() {
fadeThem()
});
}
fadeThem();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="display:none">test</p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- text slider -->