We Keep Coding

How to Filter for data-rel Value on Load with jQuery

The filter on my website needs to have a default value on load.
My main JS script uses this, in case it's useful for the solution:
window.addEventListener('DOMContentLoaded', event => { //code to be loaded }
The filter has no default, but I want to set it to one of the data-rel values by default so that the page loads with the content already filtered with my defined default.
I looked around for a while at other similar problems but couldn't find a solution to my exact problem.
In a separate filter JS file, I'm using this code as a base:
JS:
$(function(){
var selectedClass = "$('*[data-rel="web"]');";
$(".filter").click(function(){
selectedClass = $(this).attr("data-rel");
$(".work").fadeTo(100, 0.1);
$(".portfolio-item").not("."+selectedClass).fadeOut().removeClass('scale');
setTimeout(function(){
$("."+selectedClass).fadeIn().addClass('scale').sort();
$(".work").fadeTo(300, 1);
}, 300);
});
});
HTML:
<section class="no-padding" id="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Portfolio</h2>
<h3 class="section-subheading text-muted">A showcase of my work.</h3>
<div class="tabs">
<button class="btn filter" id="filt" href="" data-rel="all">ALL</button>
<button class="btn filter" id="filt" data-rel="web">Web Design</button>
<button class="btn filter" id="filt" data-rel="graphics">Graphic Design</button>
<button class="btn filter" id="filt" data-rel="branding">Branding</button>
<button class="btn filter" id="filt" data-rel="photography">Photography</button>
<button class="btn filter" id="filt" data-rel="motion">Motion Graphics</button>
</div>
<br>
</div>
<div class="work">
<!--div class="row"-->
<div class="col-md-4 portfolio-item web scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 1
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item graphics scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 2
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item branding scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 3
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<!--/div-->
<!-- /.row -->
<!-- Projects Row -->
<!--div class="row"-->
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="img/portfolio/fullsize/1.jpg">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 4
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 5
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item motion scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 6
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<!--/div-->
<!-- Projects Row -->
<!--div class="row"-->
<div class="col-md-4 portfolio-item photography scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 7
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item graphics scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 8
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-4 portfolio-item web scale tile all">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name 9
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!--/div--> <!--WORK-->
<!-- /.row -->
<hr>
</div>
</div>
</section>
For this example, I would set "web" as the default (of course, "all" isn't the default, but appears that way as the code just shows all items on the page before a filter is clicked anyway).
I tried making selectedClass = $(.filter).attr("data-rel", "web"); or simply selectedClass = "web";, and various other variants such as $(.filter).attr({"data-rel": "web"}); but none of that works. I believe I'm missing something in regards to how the click function is interacting with the data-rel selection.
I also tried adding this after the initial declaration of selectedClass:
$(".portfolio-item").not("." + "selectedClass").removeClass('scale');
setTimeout(function () {
$("." + selectedClass).addClass('scale').sort();
$(".work");
}, 1)
The idea being to copy what is done when a button is clicked but get rid of the fading and make it as instantaneous as possible. I also tried wrapping that part in $(document).ready(function(){}.
But none of that did anything.
I'd appreciate it if someone could please explain to me what I'm doing wrong so that the default filter is "web" when the page loads.

loop through divs and move hrefs to another div

I am trying to loop through divs take the href from one div and move it to the href of another div, and then repeat this for all the following divs.
I have it working so far as it does it for the first div but then it places that href link in all the others.
see https://jsfiddle.net/grmaw27y/5/
html:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="image">
<a href="#" class="">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
</a>
</div>
</div>
<div class="col-md-8">
<h2>Google</h2>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ipsum eget odio maximus posuere. Fusce dapibus id urna quis eleifend. Nam lacinia consequat lectus, at ultricies purus elementum non.</p>
<p>https://www.google.ie/</p>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="image">
<a href="">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
</a>
</div>
</div>
<div class="col-md-8">
<h2>Yahoo</h2>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>https://ie.yahoo.com/</p>
</div>
</div>
</div>
</div>
js:
$('.entry').each(function() {
var href = $('.entry p a').attr('href');
$('.image a').attr('href', href);
});

Try this:
$('.entry').each(function(i,element) {
var href = $(element).find('p a').attr('href');
$(element).parent().prev().find('.image a').attr('href', href);
});
Working example:
https://jsfiddle.net/grmaw27y/6/
So what was wrong with your code?
Your expression to find the href var href = $('.entry p a').attr('href'); and assign href $('.image a').attr('href', href);, were working on class selectors. which return array of all matches. In every pass they were matching the same two elements.
To fix this we use the element object in loop, you specify exactly what you want to read and write.

You need to use traversal functions to select elements relative to each target:
$('.entry').each(function() {
var href = $('p a', this).attr('href');
$(this).closest('.row').find('.image a').attr('href', href);
});
https://jsfiddle.net/gbc22h0f/

You can loop over the container and find the relevant elements INSIDE each of the containers:
$('.container').each(function() {
var href = $(this).find('div.entry a').attr('href');
$(this).find('div.image a').attr('href', href);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="image">
<a href="#" class="">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
</a>
</div>
</div>
<div class="col-md-8">
<h2>Google</h2>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sit amet ipsum eget odio maximus posuere. Fusce dapibus id urna quis eleifend. Nam lacinia consequat lectus, at ultricies purus elementum non.</p>
<p>https://www.google.ie/</p>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="image">
<a href="">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=230%C3%97230&w=230&h=230" />
</a>
</div>
</div>
<div class="col-md-8">
<h2>Yahoo</h2>
<div class="entry">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>https://ie.yahoo.com/</p>
</div>
</div>
</div>
</div>

Clicking a button to display 5 more divs but only a max of 20 divs total should be shown?

I'm trying to have my JS code allow a user to click the "Show 5 More" button to display 5 more "content-section" divs, and disable the button when a total of 20 'content-section' divs are displayed. I'm unsure why my code is not working? I do not have the code for a max of 20 divs, I'm unsure where to place that.
HTML
<div class="content-section news-preview clearfix">
<div class="title">Title of News Article</div>
<div class="clearfix">
<div class="image-container">
<img src="images/news_sample208x135.jpg" width="208" height="135">
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dui luctus lectus eget libero volupat, a tempor velit malesuada. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vivamus mattis egestas lorem a sodales.</p>
</div>
</div> <a class="article-link">http://www.lintothenewsarticle.com/news/article/title-of-news-article</a>
Show 5 More
JS
function showPreview () {
if($('#show-more').on('click', function () {
$('.content-section').append();
});
}

Codepen example here.
I would wrap all of the content-section divs inside of a div that you can append to. Also add a show more button as such:
<div class="articles">
<div class="content-section news-preview clearfix">
<div class="title">Title of News Article</div>
<div class="clearfix">
<div class="image-container">
<img src="images/news_sample208x135.jpg" width="208" height="135">
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dui luctus lectus eget libero volupat, a tempor velit malesuada. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vivamus mattis egestas lorem a sodales.</p>
</div>
</div>
<a class="article-link">http://www.lintothenewsarticle.com/news/article/title-of-news-article</a>
</div>
<a id="show-more" href="javascript:;">Show More</a>
In your Javascript, you check if the "Read More" button has been clicked. Then you check if there are less than 20 .content-section divs inside of <div class="articles">. If so then you can append what you want (change the content inside of the append() statement to whatever you want to append, just be sure that you follow the scheme where each article is wrapped in a div with a class of content-section.
$('#show-more').click(function(){
if($('.articles > .content-section').length<20){
$('.articles').append('<div class="content-section">a</div>');
}
});

Hide multiple divs until individual links are mouseover then show each

I have the following HTML code...
<div class="circles">
<ul>
<li><a id="links" href="#" class="first links">Supply
Chain</a></li>
<li><a id="links" href="#" class="links">Quality
Control</a></li>
<li><a id="links" href="#" class="links">Manufacturing
</a></li>
<li><a id="links" href="#" class="links">Material
Handling</a></li>
</ul>
</div>
<div id="supply" class="circletext">
<h2 style="text-align: center;">OUR CAPABILITIES</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>
</div>
<div id="quality" class="circletext">
<h2 style="text-align: center;">Quality Control</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>
</div>
<div id="manufacturing" class="circletext">
<h2 style="text-align: center;">Manufacturing</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>
</div>
<div id="material" class="circletext">
<h2 style="text-align: center;">Material Handling</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>
</div>
I need to have the divs that have the class .circletext to be hidden to start. Then I need anytime one of the links #links to be hovered that its corresponding div shows. So if the first Supply Chain link is hovered then the div id #supply shows up.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.circletext').hide();
});
jQuery(document).ready(function() {
jQuery('#links').hover(function() {
jQuery(this).find('.circletext').show();
},
function() {
jQuery('.circletext').hide();
});
});
</script>
I know I need to add some specific ids or classes. Just some help would be great (and if they could have some fade in fade out effect too).

use this code ........
jQuery(document).ready(function(){
jQuery('.circletext1').hide();
jQuery('.circletext2').hide();
jQuery('.circletext3').hide();
jQuery('.circletext4').hide();
jQuery('#links1').hover(function() {
jQuery('.circletext1').show();
jQuery('.circletext2').hide();
jQuery('.circletext3').hide();
jQuery('.circletext4').hide();
});
jQuery('#links2').hover(function() {
jQuery('.circletext2').show();
jQuery('.circletext1').hide();
jQuery('.circletext3').hide();
jQuery('.circletext4').hide();
});
jQuery('#links3').hover(function() {
jQuery('.circletext3').show();
jQuery('.circletext1').hide();
jQuery('.circletext2').hide();
jQuery('.circletext4').hide();
});
jQuery('#links4').hover(function() {
jQuery('.circletext4').show();
jQuery('.circletext1').hide();
jQuery('.circletext2').hide();
jQuery('.circletext3').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="circles">
<ul>
<li><a id="links1" href="#" class="first links">Supply
Chain</a></li>
<li><a id="links2" href="#" class="links">Quality
Control</a></li>
<li><a id="links3" href="#" class="links">Manufacturing
</a></li>
<li><a id="links4" href="#" class="links">Material
Handling</a></li>
</ul>
</div>
<div id="supply" class="circletext1">
<h2 style="text-align: center;">OUR CAPABILITIES</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>
</div>
<div id="quality" class="circletext2">
<h2 style="text-align: center;">Quality Control</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>
</div>
<div id="manufacturing" class="circletext3">
<h2 style="text-align: center;">Manufacturing</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>
</div>
<div id="material" class="circletext4">
<h2 style="text-align: center;">Material Handling</h2>
<p style="text-align: center;">Lorem ipsum dolor sit amet, conset adipiscing elit. Mauris et sem nunc. <a>
Click here to read more about our capabilities</a> or select a service below.</p>
</div>

Check The JSFiddle :- enter link description here
jQuery('.circletext').hide();
$( ".links" ).hover( function() {
if(this.id == 'links1'){
$("#quality").hide();
$("#manufacturing").hide();
$("#material").hide();
$("#supply").show();
}
if(this.id == 'links2'){
$("#supply").hide();
$("#manufacturing").hide();
$("#material").hide();
$("#quality").show();
}
if(this.id == 'links3'){
$("#supply").hide();
$("#material").hide();
$("#quality").hide();
$("#manufacturing").show();
}
if(this.id == 'links4'){
$("#supply").hide();
$("#manufacturing").hide();
$("#quality").hide();
$("#material").show();
}
});

inside your doc ready handler put this:
$(document).on('hover', '#links', function(){ //or mouseover?
//do something
$('#supply').show();
});
EDIT:
not sure if the on.'hover' fires...
you could alternatively try:
$(document).on('mouseenter', '#links', function () {
$("#supply").show();
}).on('mouseleave', '#links', function () {
$("#supply").hide();
});

jQuery carousel slider with fade animation

I've created an infinite carousel slider with fade in and fade out effects for text. So, I have 5 pictures, their width equal to the screen width, which slide to the right after the text above them has faded, then a different text above the next image fades in.
Currently, I have a class for the text from all images, and when I fade in and out, they all fade in and out, even though I can see only one image.
I want to apply the fade effects only to the text on the current image, but I don't know how to select that in javascript and what classes should I use.
I was thinking that for each text element I should give a class named something like "content1", "content2" etc. , but how do I know to which class I apply that effect?
JavaScript:
$(document).ready(function() {
var auto_slide_seconds = 4000;
init();
setInterval(function(){slide("right");}, auto_slide_seconds);
});
function init() {
var img = $('.homepage-img')
content = $('.slider-content')
img.width($(window).width())
$("li").width($(window).width())
img.height($('.slider-list').height())
content.height($('.slider-list').height())
}
function slide(where){
if(where === 'left') {
switchLeft();
}
fadeOutContent(where);
}
function fadeOutContent(where) {
$('.slider-content').animate(
{ 'opacity': 0 },
1000,
function(){ animateSlider(where) }
);
}
function animateSlider(where) {
var itemWidth = $('.slider-list li').outerWidth();
if(where === 'right'){
itemWidth = -itemWidth;
}
$('.slider-list').animate(
{ 'margin-left' : "+=" + itemWidth },
1000,
function(){ fadeInContent(where) }
);
}
function fadeInContent(where) {
if(where === 'right') {
switchRight()
}
$('.slider-content').animate({
'opacity': 1
}, 1000);
}
function switchLeft() {
$('.slider-list li:first').before($('.slider-list li:last'));
$('.slider-list').css({'margin-left': - $('.slider-list li').outerWidth()});
}
function switchRight() {
$('.slider-list li:last').after($('.slider-list li:first'));
$('.slider-list').css({'margin-left': 0});
}
HTML:
<ul class="slider-list">
<li><img class="homepage-img"src="images/homepage.jpg">
<div class="slider-content content1">
<h1>Crowdfunding romanesc</h1>
<div class="slider-details">
<div class="description">
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida
nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
bibendum auctor, nisi elit consequat.</p>
</div>
<div class="slider-actions">
Creeaza cont
<p>sau vezi video</p>
<img src="images/arrow.png">
</div>
</div>
</div>
</li><!--
--><li><img class="homepage-img"src="images/image1.jpg">
<div class="slider-content content2">
<h1>Crowdfunding englezesc</h1>
<div class="slider-details">
<div class="description">
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida
nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
bibendum auctor, nisi elit consequat.</p>
</div>
<div class="slider-actions">
Creeaza cont
<p>sau vezi video</p>
<img src="images/arrow.png">
</div>
</div>
</div>
</li><!--
--><li><img class="homepage-img"src="images/image2.jpg">
<div class="slider-content content3">
<h1>Crowdfunding frantuzesc</h1>
<div class="slider-details">
<div class="description">
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida
nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
bibendum auctor, nisi elit consequat.</p>
</div>
<div class="slider-actions">
Creeaza cont
<p>sau vezi video</p>
<img src="images/arrow.png">
</div>
</div>
</div>
</li><!--
--><li><img class="homepage-img"src="images/image3.jpg">
<div class="slider-content content4">
<h1>Crowdfunding german</h1>
<div class="slider-details">
<div class="description">
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida
nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
bibendum auctor, nisi elit consequat.</p>
</div>
<div class="slider-actions">
Creeaza cont
<p>sau vezi video</p>
<img src="images/arrow.png">
</div>
</div>
</div>
</li><!--
--><li>
<img class="homepage-img"src="images/image4.jpg">
<div class="slider-content content5">
<h1>Crowdfunding american</h1>
<div class="slider-details">
<div class="description">
<p>This is Photoshop's version of Lorem Ipsum. Proin gravida
nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
bibendum auctor, nisi elit consequat.</p>
</div>
<div class="slider-actions">
Creeaza cont
<p>sau vezi video</p>
<img src="images/arrow.png">
</div>
</div>
</div>
</li>
</ul>

What I usually do, is keep a variable index that represents the current slide of the carousel:
var index = 0;
function slide(where){
if(where === 'left') {
switchLeft();
index--;
} else {
index++;
}
showCurrentTitle();
fadeOutContent(where);
}
function showCurrentTitle = function() {
$('.slider-content h1').hide().eq(index).show(); //you might want to cache the selector and use animations instead of hide and show
}