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();
});
Related
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.
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>
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>');
}
});
I have some jquery tabs working
http://jsfiddle.net/barrycorrigan/e8rfqw8g/
But what I cant work out is if someone clicks on a tab the title changes which is outside the tab content
This is what I tried
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tab-ct');
$ct.find('ul.tabs li.current').removeClass('current');
$ct.find('.tab-content.current').removeClass('current');
$ct.find('.tab-title.current').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
});
The HTML is
<div class="tab-ct">
<h2 id="tab1" class="tab-title current">Tab 1</h2>
<h2 id="tab2" class="tab-title">Tab 2</h2>
<h2 id="tab3" class="tab-title">Tab 3</h2>
<ul class="tabs">
<li class="tab-link current" data-tab="tab1">Tab 1</li>
<li class="tab-link" data-tab="tab2">Tab 2</li>
<li class="tab-link" data-tab="tab3">Tab 3</li>
</ul>
<div id="tab1" class="tab-content current">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus metus mauris, sed lacinia ipsum ullamcorper interdum. Suspendisse potenti. Nullam.
</div>
<div id="tab2" class="tab-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus metus mauris, sed lacinia ipsum ullamcorper interdum. Suspendisse potenti. Nullam.
</div>
<div id="tab3" class="tab-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus metus mauris, sed lacinia ipsum ullamcorper interdum. Suspendisse potenti. Nullam.
</div>
</div>
The title changes ok but now the tab content doesn't work. Maybe it has something to do with the ID's i'm not sure
Any ideas?
ID of an element must be unique.
When you use an id-selector, it will return only the first element with the given id, in your case both the h2 and .tab-content has the same id so it is returning only the h2 as it is first in the dom structure.
One possible solution in this case is to use a prefix/suffix to one of those ids. In the below solution a suffix -title is added to the h2
<div class="tab-ct">
<h2 id="next-game-title" class="tab-title current">Tab 1</h2>
<h2 id="table-title" class="tab-title">Tab 2</h2>
<h2 id="last-game-title" class="tab-title">Tab 3</h2>
<ul class="tabs">
<li class="tab-link current" data-tab="next-game">17/01/15 - 15:00</li>
<li class="tab-link" data-tab="table">Table</li>
<li class="tab-link" data-tab="last-game">Last Game</li>
</ul>
<div id="next-game" class="tab-content current">Content 1</div>
<div id="table" class="tab-content">Content 2</div>
<div id="last-game" class="tab-content">Content 3</div>
</div>
then
$(document).ready(function () {
$('ul.tabs li').click(function () {
var tab_id = $(this).attr('data-tab'),
$ct = $(this).closest('.tab-ct');
$ct.find('ul.tabs li.current').removeClass('current');
$ct.find('.tab-content.current').removeClass('current');
$ct.find('.tab-title.current').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
$("#" + tab_id + '-title').addClass('current');
});
});
Demo: Fiddle
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have few tabs each with an image in it. I can switch the tabs by clicking on the respective dots above it, or the image below.
The issue here is, when i switch the tabs by clicking the dots, the respective dot will be highlighted, but i'm unable to highlight the corresponding dot while switching tabs by clicking images.
Following the the HTML
<section class="main">
<section class="tabsblock">
<div class="wrap">
<div class="tab">
<ul class="tabs clearfix">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<!-- tabs -->
<div class="box visible">
<div class="box-text">
<h3>TAB ====== 1</h3>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.</p>
</div>
<img id="tab_1" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437" height="459" alt="" />
</div>
<!-- box -->
<div class="box">
<div class="box-text">
<h3>TAB ====== 2</h3>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.</p>
</div>
<img id="tab_2" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437" height="459" alt="" />
</div>
<!-- box -->
<div class="box">
<div class="box-text">
<h3>TAB ====== 3</h3>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit aliquet felis, quis ultrices orci condiment.</p>
</div>
<img id="tab_3" src="http://s13.postimg.org/ywlkh7hon/tabs.png" width="437" height="459" alt="" />
</div>
<!-- box -->
</div>
<!-- tab -->
</div>
<!-- wrap -->
</section>
<!-- -->
And JS
$('.tabs').delegate('li:not(.active)', 'click', function () {
$('.tabs').delegate('li:not(.active)','click',function(){$(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq($(this).index()).fadeIn(250);
});
document.getElementById('tab_1').addEventListener('click', function () {
$(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(1).fadeIn(250);
});
document.getElementById('tab_2').addEventListener('click', function () {
$(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(2).fadeIn(250);
});
document.getElementById('tab_3').addEventListener('click', function () {
$(this).addClass('active').siblings().removeClass('active').parents('.tab').find('.box').hide().eq(0).fadeIn(250);
});
Here is the fiddle demonstrating the issue.
Since you are using separate event handler for each image, You can use the following script in the respective click handlers of each image
$('.tabs li').removeClass('active').eq(1).addClass('active');
---------------------------------------^ index of the tab to be displayed.
Updated Fiddle