How can I compress my jQuery useful? I want to add a function to show an element when I hover another one. The function below is exactly what I want, but I want it more dynamic. Maybe with an data attribute?
var item_first = $('.item_first');
var item_second = $('.item_second');
var item_third = $('.item_third');
var item_fourth = $('.item_fourth');
var image_first = $('.image_first');
var image_second = $('.image_second');
var image_third = $('.image_third');
var image_fourth = $('.image_fourth');
$(document).ready(function () {
item_first.hover(function () {
image_first.addClass('active');
}, function () {
image_first.removeClass('active');
});
item_second.hover(function () {
image_second.addClass('active');
}, function () {
image_second.removeClass('active');
});
item_third.hover(function () {
image_third.addClass('active');
}, function () {
image_third.removeClass('active');
});
item_fourth.hover(function () {
image_fourth.addClass('active');
}, function () {
image_fourth.removeClass('active');
});
});
https://jsfiddle.net/gt5kw00q/
Sorry for my bad English. I try to write so that you understand it.
I would write the code like below.
$('img') will select all your images and apply the code to them on hover.
$('img').hover(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
});
Based on your fiddle, try this approach
$( ".left__item" ).hover( function(){
$(".right__image").eq( $(this).index() ).addClass( "active" );
}, function(){
$(".right__image").eq( $(this).index() ).removeClass( "active" );
})
Demo
$(document).ready(function() {
$(".left__item").hover(function() {
$(".right__image").eq($(this).index()).addClass("active");
}, function() {
$(".right__image").eq($(this).index()).removeClass("active");
})
});
.right__image {
display: none;
}
.right__image.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<ul class="left__inner">
<li class="left__item item_first active">
Werte
</li>
<li class="left__item item_second">
Team
</li>
<li class="left__item item_third">
Arbeitsweise
</li>
<li class="left__item item_fourth">
Standort
</li>
</ul>
</div>
<div class="right">
<div class="right__inner">
<div class="right__image image_first">
IMAGE 1 HERE
</div>
<div class="right__image image_second">
IMAGE 2 HERE
</div>
<div class="right__image image_third">
IMAGE 3 HERE
</div>
<div class="right__image image_fourth">
IMAGE 4 HERE
</div>
</div>
</div>
Give your elements a class name and a data attribute with the target(id):
<div class="myHoverElement" id="ele1" data-targetid="image_1"></div>
<div class="myHoverElement" id="ele2" data-targetid="image_2"></div>
<img id="image_1">
<img id="image_2">
You can then bind a hover event to all those elements at once:
$('.myHoverElement').hover(
function() { $('#' + $(this).data('targetid')).addClass('active') },
function() { $('#' + $(this).data('targetid')).removeClass('active') }
);
$(this) is a reference to the currently hovered element.
Please find working solution below, enjoy :)
var items = {
item_first: 'image_first',
item_second: 'image_second',
item_third: 'image_third',
item_fourth: 'image_fourth'
}
$(document).ready(function() {
function addClass(key) {
$('.' + items[key]).addClass('active');
}
function removeClass(key) {
$('.' + items[key]).removeClass('active');
}
for (var key in items) {
$('.' + key).hover(addClass.bind(null, key), removeClass.bind(null, key))
}
});
.right__image {
display: none;
}
.right__image.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<ul class="left__inner">
<li class="left__item item_first active">
Werte
</li>
<li class="left__item item_second">
Team
</li>
<li class="left__item item_third">
Arbeitsweise
</li>
<li class="left__item item_fourth">
Standort
</li>
</ul>
</div>
<div class="right">
<div class="right__inner">
<div class="right__image image_first active">
IMAGE 1 HERE
</div>
<div class="right__image image_second">
IMAGE 2 HERE
</div>
<div class="right__image image_third">
IMAGE 3 HERE
</div>
<div class="right__image image_fourth">
IMAGE 4 HERE
</div>
</div>
</div>
Related
I am working on tab
There are 5 tabs
About Us
Our Work
Our Team
News & Events
Contact us
and inside each of them there are content and links, images.
What i am trying to achieve here whenever i click the link inside the tab Our Team content,
It should open the Contact us Tab content.
Here is the code i am using currently, It has some custom js and jquery 2.2.0 used.
Please check the code, i haven't put css here.
The live link of this example is Live Demo
Please help me
// TABS
var tabs = $('.container_tabs');
$('.tabs-content > div', tabs).each(function (i) {
if (i != 0) $(this).hide(0);
});
tabs.on('click', '.tabs a', function (e) {
e.preventDefault();
var tabId = $(this).attr('href');
$('.tabs a', tabs).removeClass();
$(this).addClass('active');
$('.tabs-content > div', tabs).hide(0);
$(tabId).show();
});
// var tabs1 = $('.container_tabs1');
// $('.tabs-content > div', tabs1).each(function (i) {
// if (i != 0) $(this).hide(0);
// });
// tabs1.on('click', '.tabs a', function (e) {
//
// e.preventDefault();
//
// var tabId = $(this).attr('href');
//
//
// $('.tabs a', tabs1).removeClass();
// $(this).addClass('active');
//
// $('.tabs-content > div', tabs1).hide(0);
// $(tabId).show();
//
// });
(function ($) {
jQuery.fn.lightTabs = function (options) {
var createTabs = function () {
tabs = this;
i = 0;
showPage = function (tabs, i) {
$(tabs).children("div").children("div").hide();
$(tabs).children("div").children("div").eq(i).show();
$(tabs).children("ul").children("li").removeClass("active");
$(tabs).children("ul").children("li").eq(i).addClass("active");
};
showPage(tabs, 0);
$(tabs).children("ul").children("li").each(function (index, element) {
$(element).attr("data-page", i);
i++;
});
$(tabs).children("ul").children("li").click(function () {
showPage($(this).parent().parent(), parseInt($(this).attr("data-page")));
});
};
return this.each(createTabs);
};
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30">
<li class="" data-page="0">About Us</li>
<li data-page="1">Our Work</li>
<li data-page="2">Our Team</li>
<li data-page="3">Our Partners</li>
<li data-page="4" class="active">Work With Us</li>
<li data-page="5">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" style="display: none;">
Content 1
</div>
<div class="content" style="display: none;">
Content 2
</div>
<div class="content" style="display: none;">
Content 3
</div>
<div class="content" style="display: none;">
Content 4
</div>
<div class="content" style="display: none;">
<h3>Contact us Content</h3>
</div>
</div>
</div>
If I understand you correctly, you want to be able to switch tabs by links that are inside your tab contents too. In that case you should create a function for switching tabs, instead of a click event in you menu. here is an example:
edit #1:
I removed all onclicks and bind switchTab function to all elements that have switch-tab class.
edit #2:
As requested, you can pass initial tab number from url ?tab=x codepen
// set tab from url
// sample url: http://mywebsite.com/my-route?tab=2
$(document).ready(function() {
var url = new URL(window.location.href);
var tabNumber = url.searchParams.get('tab');
if (tabNumber)
switchTab(tabNumber);
});
// change tab by clicking an element with "switch-tab" class
$('.switch-tab').on('click', function(e) {
var tabNumber = e.target.getAttribute('data-tab');
switchTab(tabNumber);
});
// change tab by passing tab number
function switchTab(tabNumber) {
$('#tabs li').removeClass('active');
$('#tabs li[data-tab=' + tabNumber + ']').addClass('active');
$('.content').css('display', 'none');
$('.content[data-content=' + tabNumber + ']').css('display', 'block');
}
<style>
#tabs li.active {
font-weight: bold;
}
.content {
display: none;
}
.content.visible {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
<ul class="cw-30" id="tabs">
<li data-tab="0" class="switch-tab">About Us</li>
<li data-tab="1" class="switch-tab">Our Work</li>
<li data-tab="2" class="switch-tab">Our Team</li>
<li data-tab="3" class="switch-tab">Our Partners</li>
<li data-tab="4" class="switch-tab active">Work With Us</li>
<li data-tab="5" class="switch-tab">Contact us</li>
</ul>
<div class="cw-70">
<div class="content" data-content="1">
<p>Content 1</p>
</div>
<div class="content" data-content="2">
<p>Content 2</p>
</div>
<div class="content" data-content="3">
<p>Content 3</p>
</div>
<div class="content visible" data-content="4">
<p>Content 4</p>
go to contact us
</div>
<div class="content" data-content="5">
<h3>Contact us Content</h3>
</div>
</div>
</div>
I want to show only a particular div by calling a function though onclick event .At a time I just want to show a single div and rest all divs should not show in my web page. I have tried this through using display css property.I just want a single function which can handle this .I can do this question by making more than one function.
<html>
<head>
</head>
<body>
<ul>
<li>1</li><!-- show div1-->
<li>2</li><!-- show div2-->
<li>3</li><!-- show div3-->
</ul>
<div id="first">content 1</div>
<div id="second">content2</div>
<div id="third">content3</div>
</body>
</html>
How about this:
Each div needs the same class so you can find and hide them all at once.
The function needs to know the id of the div to show, so pass in the id.
See changes below:
<html>
<head>
</head>
<body>
<ul id="controls">
<li>1</li><!-- show div1-->
<li>2</li><!-- show div2-->
<li>3</li><!-- show div3-->
</ul>
<div id="first" class="content">content 1</div>
<div id="second" class="content">content2</div>
<div id="third" class="content">content3</div>
<script>
$("#controls a").click(function() {
someFunction($(this).attr("data-target"));
});
function someFunction(divId) {
$(".content").hide();
$("#" + divId).show();
}
</script>
</body>
</html>
Note: You need a reference to jQuery for the $ syntax to work.
FYI, you could do this with just CSS:
.panel {display: none}
.panel:target {display: block}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class='panel' id="first">content 1</div>
<div class='panel' id="second">content2</div>
<div class='panel' id="third">content3</div>
I think this is what you want:
<ul>
<li id="li_1">1
</li>
<li id="li_2">2
</li>
<li id="li_3">3
</li>
</ul>
<div class='panel' id="li_1_panel">content 1</div>
<div class='panel' id="li_2_panel">content2</div>
<div class='panel' id="li_3_panel">content3</div>
.panel {
display: none;
}
var panelID = "";
for (i = 1; i <= 3; i++) {
alert('#li_' + i);
$('#li_' + i).on('click', function () {
panelID = "#" + $(this).attr("id") + "_panel";
alert(panelID);
$(panelID).toggle();
});
}
Edit
Also, if you did not want to rely on a rigid naming scheme, you could use a hash.
<ul>
<li id="zeus">1
</li>
<li id="athena">2
</li>
<li id="hades">3
</li>
</ul>
<div class='panel' id="isis">content 1</div>
<div class='panel' id="thor">content 2</div>
<div class='panel' id="aphrodite">content 3</div>
var panelID = "";
var li_to_panel = {
"zeus": "isis",
"athena": "thor",
"hades": "aphrodite"
};
$.each(li_to_panel, function(key, value){
alert(key);
liID = "#" + key;
$(liID).on('click', function () {
panelID = "#" + li_to_panel[$(this).attr('id')];
alert(panelID);
$(panelID).toggle();
});
});
I am trying to show the .list-menu div show on click and then hide on click when the .hamburger anchor is clicked. Right now nothing is happening.
$('document').ready(function() {
$(".list-menu").hide();
$( ".hamburger" ).click(function() {
$( ".list-menu" ).show() {
});
$( ".hamburger" ).click(function() {
$( ".list-menu" ).hide() {
});
});
});
<div class="logo">
<div class="about-me-button">
<img src="/img/menu.svg" alt="hamburger menu">
</div>
<div class="list-menu">
<ul>
<li>About Me</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</div>
</div>
There is a function named .toggle() that "display or hide the matched elements" and you need only 1 .click() event.
$('document').ready(function() {
$(".list-menu").hide();
$(".hamburger").click(function() {
$(".list-menu").toggle();
});
});
$('document').ready(function() {
$(".list-menu").hide();
$(".hamburger").click(function() {
$(".list-menu").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo">
<div class="about-me-button">
<a href="#" class="hamburger">
<img src="/img/menu.svg" alt="hamburger menu">
</a>
</div>
<div class="list-menu">
<ul>
<li>About Me
</li>
<li>Resume
</li>
<li>Contact
</li>
</ul>
</div>
</div>
$(function() {
$(".list-menu").hide();
$( ".hamburger" ).click(function() {
$( ".list-menu" ).toggle();
});
});
I think the easiest way would be is the use jquery .toggle() method.
$(".list-menu").hide();
//toggle way
$(".hamburger").click(function () {
$(".list-menu").toggle();
});
or if you would like to go an alternative route you can try something like this
//jquery alternative to toggle
var toggle = false;
$(".hamburger").click(function () {
if (!toggle) {
$(".list-menu").show();
toggle = true
} else {
$(".list-menu").hide();
toggle = false
}
});
I created a fiddle so that you can see how both would work.
https://jsfiddle.net/maenucze/
I have got myself stuck on something which seems possible, I just havent been able to figure it out for 2 days!
I have this in my .js file:
Mousetrap.bind('right', function() { $('li.active').next().click(); });
Mousetrap.bind('left', function() { $('li.active').prev().click(); });
Above is binding the keyboard right/left to move through all LI in a UL on keypress .
I then have this in my HTML; which is two UL's.
At the moment, when I hit the last item in the first UL, it stops. I am trying to get it to jump to the next LI in the following UL.
I have tried to figure out how to use nextAll() - Multiple list traversal but to no avail, anyone have any ideas?
<div class="item active">
<ul class="thumbnails">
<li class="trigger active" data-target="0" data-fieldclass="data1">
<p class="image"><img src="images/sias-duplessis.jpg" alt="Sias Du Plessis"></p>
<p>#siasduplessis</p>
<p>#RedFury</p>
</li>
<li class="trigger" data-target="1" data-fieldclass="data2">
<p class="image"><img src="images/lance-witten.jpg" alt="Lance Witten"></p>
<p>#LanceTheWitten</p>
<p>#pegasus</p>
</li>
<li class="trigger" data-target="2" data-fieldclass="data3">
<p class="image"><img src="images/sasha.jpg" alt="Sasha Martinengo"></p>
<p>#F1sasha</p>
<p>#BallztotheWallz</p>
</li>
<li class="trigger" data-target="3" data-fieldclass="data4">
<p class="image"><img src="images/sipho.jpg" alt="Comrade Sipho"></p>
<p>#comradesipho</p>
<p>#badexample</p>
</li>
<li class="trigger" data-target="4" data-fieldclass="data5">
<p class="image"><img src="images/carl-wastie.jpg" alt="Carl Wastie"></p>
<p>#carlwastie</p>
<p>#FrickinHORSome</p>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="trigger" data-target="5" data-fieldclass="data6">
<p class="image"><img src="images/craig-stack.jpg" alt="Craig Stack"></p>
<p>#Craig_Stack</p>
<p>#eldiablo</p>
</li>
<li class="trigger" data-target="6" data-fieldclass="data7">
<p class="image"><img src="images/cale-pisarra.jpg" alt="Cale Pisarra"></p>
<p>#calepissarra</p>
<p>#thedirtyseagull</p>
</li>
<li class="trigger" data-target="7" data-fieldclass="data8">
<p class="image"><img src="images/mr-cpt.jpg" alt="Mr Cape Town"></p>
<p>#MrCPT</p>
<p>#goodoak</p>
</li>
<li class="trigger" data-target="8" data-fieldclass="data9">
<p class="image"><img src="images/life-is-savage.jpg" alt="Life Is Savage"></p>
<p>#LifeisSavage</p>
<p>#whoyourdaddy</p>
</li>
<li class="trigger" data-target="9" data-fieldclass="data10">
<p class="image"><img src="images/brent-graham.jpg" alt="Brent Graham"></p>
<p>#BrentGraham</p>
<p>#thefalcon</p>
</li>
</ul>
You can use this methods
function NextClick()
{
var li = $('ul.thumbnails li.active');
var index = $("ul.thumbnails li").index(li);
$("ul.thumbnails li").eq(index + 1).click();
}
function PrevClick()
{
var li = $('ul.thumbnails li.active');
var index = $("ul.thumbnails li").index(li);
if(index > 0)
$("ul.thumbnails li").eq(index - 1).click();
}
See working example in JsFiddle.
Mousetrap.bind('right', function() { if($('li.active').next().hasClass("trigger"))$('li.active').next().click();
else $('li.active').closest(".item").next().find(".trigger").first().click()
});
Mousetrap.bind('left', function() { if($('li.active').prev().hasClass("trigger"))$('li.active').prev().click();
else $('li.active').closest(".item").prev().find(".trigger").last().click()
});
DEMO
You can try Chuck Norris Code too
How about:
Mousetrap.bind('right', function() {
if ($('li.active').is(':last-child'))
obj = $('li.active').parents('ul').next('ul').find('li').first();
else obj = $('li.active').next();
obj.click();
});
you can refer to "data-target" attribute as your reference.
you might also have a missing ending on your markup.
Mousetrap.bind('right', function() {
new_active_li = $('ul li[data-target^="' + (parseInt($('ul li.active').attr('data-target')) + 1) +'"]');
$('ul li').removeClass('active');
new_active_li.addClass('active');
new_active_li.click();
});
Mousetrap.bind('left', function() {
new_active_li = $('ul li[data-target^="' + (parseInt($('ul li.active').attr('data-target')) - 1) +'"]');
$('ul li').removeClass('active');
new_active_li.addClass('active');
new_active_li.click();
});
just a simple test will do the trick like
var test = $("ul li.last").next().html();
if(test == 'undefined'){
// jump to next list
var nextList = $("li.active").parent().parent().next().find("ul");
}else{
// the normal code
}
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3"href="">3</a></li>
<li><a class="4" href="">4</a></li>
</ul>
</div>
What would the code be so when I hover over an <a> it will display the <h2>? So .3 would display .1?
This is what I've tried so far:
<script type="text/javascript">
$(document).ready(function() {
$("#side a").hover(
function() {
$(this).children('.h2').show();
},
function() {
$(this).children('h2').hide();
}
);
});
</script>
This is an example for your test case, you should improve it for your live app.
JSFiddle link: click here
$(document).ready(function(){
$("#side h2").hide();
$("#side ul li a").mouseover(function() {
if($(this).hasClass("3")) {
$("#side h2.1").show();
} else if($(this).hasClass("4")) {
$("#side h2.2").show();
}
}).mouseout(function() {
if($(this).hasClass("3")) {
$("#side h2.1").hide();
} else if($(this).hasClass("4")) {
$("#side h2.2").hide();
}
});
})
JSFiddle link: click here
<style>
.1{
display: none;
}
</style>
<script>
document.querySelector('.3').onmouseover = function(){
document.querySelector('.1').style.display = 'block';
};
document.querySelector('.3').onmouseout = function(){
document.querySelector('.1').style.display = 'none';
};
</script>
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3" href="">3</a></li>
<li><a class="4" href="">4</a></li>
</ul>
</div>
Instead of document.querySelector('.3') you can use document.getElementsByClassName('3')[0]
You are gonna use eq()
If I understood it right, you need your first item from your ul, open the first header. the second item, open the second header, etc.
eq() Get the supplied index that identifies the position of this element in the set.
Here is the Fiddle
HTML
<div id="side">
<h2 class="1">1</h2>
<h2 class="2">2</h2>
<ul>
<li><a class="3" href="#">3</a></li>
<li><a class="4" href="#">4</a></li>
</ul>
</div>
jQuery
$(document).ready(function(){
$('#side a').on('click', function(){
var index = $('#side a').index(this);
// alert(index);
alert($('#side h2').eq(index).html());
});
});
NOTE: Difference between eq and :nth-child
EIDT: as you ask for hover, you can do this.
$(document).ready(function(){
$('#side a').on('hover', function(){
var index = $('#side a').index(this);
// alert(index);
// alert($('#side h2').eq(index).html());
$('#side h2').eq(index).toggle();
});
});
<div id="side">
<h2 class="one">What Have You Tried?</h2>
<h2 class="two">2</h2>
<ul>
<li><a class="three"href="">3</a></li>
<li><a class="four" href="">4</a></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#side a").hover(
function() {
$("#side").find('.one').show();
},
function() {
$("#side").find('.one').hide();
}
);
});
</script>
http://jsfiddle.net/VdFxf/1/