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.

Nested tabs do not stay on tab when reload page

On my nav-tabs settings tab I have a nested nav-tabs in a vertical list .tabbable tabs-left When I reload my page only my parent .nav-tabs remember which tab was used.
Question: When I am in my settings tab and I have clicked on a nested
tab how can I make sure when I reload page that both stay on the
correct tab?
CODEPEN DEMO
This script seems to only work for the parent navtabs not nested ones also.
<script type="text/javascript">
$(function() {
//for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
$('a[data-toggle="tab"]').on('click', function (e) {
//save the latest tab; use cookies if you like 'em better:
localStorage.setItem('lastTab', $(e.target).attr('href'));
});
//go to the latest tab, if it exists:
var lastTab = localStorage.getItem('lastTab');
if (lastTab) {
$('a[href="'+lastTab+'"]').click();
}
});
</script>
HTML
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px;">
<div role="tabpanel" class="tab-pane" id="home"></div>
<div role="tabpanel" class="tab-pane" id="profile"></div>
<div role="tabpanel" class="tab-pane" id="messages"></div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="row">
<div class="col-sm-3">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li>Edit Profile</li>
<li>Edit Avatar</li>
<li class="">Privileges</li>
</ul>
</div>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div class="tab-pane" id="a">
Lorem ipsum dolor sit amet, charetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.
</div>
<div class="tab-pane" id="b">
Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<div class="tab-pane" id="c">
Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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();
});