I want to scroll the div to top position.I have problem with get the href value.now 'a' returns undefined in console.log(a);
function myFunction()
{
var a=$(this).attr('href');
console.log(a);
$('html, body').animate({scrollTop: $('#'+a).offset().top-40}, 500);
}
#consulting,#segments,#partner,#insights{min-height:100vh;}
.secMenu{position:fixed;
}
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions</li>
<li class="test2">Segments</li>
<li class="test3">Our Partners</li>
<li class="test4">Perspectives</li>
</ul>
</div>
</div> <!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>
I've made an alternative to what you used, but it does the same thing. I removed the function you used and used jQuery instead. Hope my answer works for you:
$('.nav li a').on('click', function(e) {
e.preventDefault();
var a = $(this).attr('href');
$('html, body').animate({
scrollTop: $(a).offset().top
}, 500);
});
#consulting,
#segments,
#partner,
#insights {
min-height: 100vh;
}
.secMenu {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row secMenu">
<div class="col-md-9 col-sm-12 menu">
<ul class="nav navMenu">
<li class="test1">Consulting & Solutions
</li>
<li class="test2">Segments
</li>
<li class="test3">Our Partners
</li>
<li class="test4">Perspectives
</li>
</ul>
</div>
</div>
<!--End of second menu -->
<div class="row">
<div id="consulting">
div1
</div>
<div id="segments">
div11
</div>
<div id="partner">
div111
</div>
<div id="insights">
div1111
</div>
</div>
</div>
To see it in action you can hit the Run code snippet button above or you can see a fiddle here.
Because this is bind to the global object by default (in browser it's window).
You can try pass this to myFunction() like this: myFunction(this). And in myFunction definition: function myFunction(target) {...}, target now refers to the anchor element.
Related
I'm trying to change the activeTest class of section tag on click, and remove the class that from the section he was, and put on the section I expect to;
I tried the parent() and sibling().
$(document).ready(function() {
$("#test123 .links").click(function(e) {
if (!$(".conteudo-projetoPesquisa").hasClass('active')) {
$(".conteudo-projetoPesquisa.active").removeClass("active");
$(".conteudo-projetoPesquisa.active").siblings().addClass("active");
}
});
});
.conteudo-projetoPesquisa {
display: none;
}
.conteudo-projetoPesquisa.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="test123" class="row center-xs around-md">
<li class="col-xs-12 col-md-4">
institucional
</li>
<li class="col-xs-12 col-md-4 maioresMelhor">
Maiores e Melhores
</li>
<li class="col-xs-12 col-md-4 faleConosco">
Fale Conosco
</li>
</ul>
<section class="conteudo-projetoPesquisa container active">1
</section>
<section class="conteudo-projetoPesquisa container">2
</section>
<section class="conteudo-projetoPesquisa container">3
</section>
Using Your Code
If your order of links is always the same as the sections you can use the index of the clicked link to determine which section to make visible.
Using index on $("#test123 .links") allows you to query for the index of the clicked link.
Using eq on the collection of $(".conteudo-projetoPesquisa") using the previously determined index will select the section in the same index the clicked link is in.
$(document).ready(function() {
$("#test123 .links").click(function(e) {
var index = $("#test123 .links").index(this);
$(".conteudo-projetoPesquisa").removeClass('active');
$(".conteudo-projetoPesquisa").eq(index).addClass('active');
});
});
.conteudo-projetoPesquisa {
display: none;
}
.conteudo-projetoPesquisa.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="test123" class="row center-xs around-md">
<li class="col-xs-12 col-md-4">
institucional
</li>
<li class="col-xs-12 col-md-4 maioresMelhor">
Maiores e Melhores
</li>
<li class="col-xs-12 col-md-4 faleConosco">
Fale Conosco
</li>
</ul>
<section class="conteudo-projetoPesquisa container active">1
</section>
<section class="conteudo-projetoPesquisa container">2
</section>
<section class="conteudo-projetoPesquisa container">3
</section>
Alternative using Data Attributes
However, if you have any control over it, it would be better to "pair" the elements. If you for example can populate a data attribute to assign the matching section number to the link itself than the order is not important.
<a href="#!" class="links" data-section-id="1">...
<a href="#!" class="links" data-section-id="2">...
Then you can assign the same value to each section and therefore "pair" the elements.
<section class="conteudo-projetoPesquisa container active" data-section-id="1">...
<section class="conteudo-projetoPesquisa container active" data-section-id="2">...
Then you can use the following code:
$(document).ready(function() {
$("#test123 .links").click(function(e) {
var sectionId = $(this).data('sectionId');
$(".conteudo-projetoPesquisa").removeClass('active');
$(".conteudo-projetoPesquisa[data-section-id=" + sectionId + "]").addClass('active');
});
});
.conteudo-projetoPesquisa {
display: none;
}
.conteudo-projetoPesquisa.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="test123" class="row center-xs around-md">
<li class="col-xs-12 col-md-4">
institucional
</li>
<li class="col-xs-12 col-md-4 maioresMelhor">
Maiores e Melhores
</li>
<li class="col-xs-12 col-md-4 faleConosco">
Fale Conosco
</li>
</ul>
<section class="conteudo-projetoPesquisa container active" data-section-id="1">1
</section>
<section class="conteudo-projetoPesquisa container" data-section-id="2">2
</section>
<section class="conteudo-projetoPesquisa container" data-section-id="3">3
</section>
To connect links and tabs you should use data-attr
Something like this
$('[data-tab-trigger]').click(function(){
if($(this).is('.active')){
return false;
}
var $wrap = $(this).parents('.tab-wrap');
$('[data-tab-trigger]',$wrap).removeClass('active');
$(this,$wrap).addClass('active');
$('[data-tab-section]',$wrap).removeClass('active');
$('[data-tab-section="'+$(this).data('tab-trigger')+'"]',$wrap).addClass('active');
})
.hide-tab{
display:none;
padding:20px;
background:#333;
color:#fff;
}
.hide-tab.active{
display:block;
}
.tab-wrap{
margin:20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-wrap">
<div data-tab-trigger="1">show first tab</div>
<div data-tab-trigger="2">show second tab</div>
<div class="hide-tab" data-tab-section="2">
second tab
</div>
<div class="hide-tab" data-tab-section="1">
first tab
</div>
</div>
<div class="tab-wrap">
<div data-tab-trigger="1">show first tab</div>
<div data-tab-trigger="2">show second tab</div>
<div class="hide-tab" data-tab-section="2">
second tab
</div>
<div class="hide-tab" data-tab-section="1">
first tab
</div>
</div>
I have my page built up like a navigation bar and below that i have in-page tabs, which are showing different content, but i can't get it to show only one of them at load.
<div class="tabs">
<div class="row">
<div class="container">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified tab-links">
<li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
<li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>
and now i want the page to show "tab1" when it's loading the first time, how do i do that?
my JS:
<script>
jQuery(document).ready(function () {
jQuery('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tab' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});`enter code here`
});
</script>
Using JQuery:
$(document).ready(function () {
$(".tab-pane").removeClass('active');
$("#tab1").addClass('active');
});
If you tab HTML is like this
<div class="tabs-container">
<div class="tab-content">
<div id="tab1" class="tab-pane">
<div class="wrapper wrapper-content animated fadeInDown">
</div>
</div>
<div id="previewTemplate" class="tab-pane">
<div class="wrapper wrapper-content animated fadeInDown">
</div>
</div>
</div>
try this:
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
e.preventDefault();
// Show/Hide Tabs
var parentLi = $(this).parent();
jQuery('.tabs .tab-links li').not(parentLi).hide();
// Change/remove current tab to active
//jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs">
<div class="row">
<div class="container">
<div class="col-sm-12">
<ul class="nav nav-pills nav-justified tab-links">
<li class="active"><a id="tab1" class="pillsnavigation" href="#tab1">Adressbuch</a></li>
<li><a class="pillsnavigation" href="#tab2">Neuer Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>
I am trying to create my custom full width menu using a simple hover function but my problem is as soon the mouse move out of the menu the subdiv also hides.
Can you help me with my code?
Here's my nav
HTML
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
JS
$('#open-block-menu').hover(function() {
$('.top-block').slideDown();
}, function() {
$('.top-block').slideUp();
});
Instead of hover method, you could use mouseenter and mouseleave as below, so every-time when mouseenters it show below menus and on mouse pointer leave below menu hides again.
$('#open-block-menu').on("mouseenter",function() {
$('.top-block').slideDown();
});
$('.top-block').on("mouseleave",function() {
$(this).slideUp();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
</li>
</ul>
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
Try to change ur markup like this:
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" id="open-block-menu">
ONLINE STORE
<div class="top-block">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>HELLO WORLD</h1>
</div>
</div>
</div>
</div>
</li>
</ul>
I have got code like this:
<div class="row menu-container">
<div class="col-lg-4 col-sm-10">
<h4 class="menu-title">Item<span class="menu-bold">1</span></h4>
<ul id="menu-1" class="menu">
<li id="menu-item-222"><span>Subitem1</span></li>
<li id="menu-item-223"><span>Subitem2</span></li>
<li id="menu-item-224"><span>Subitem3</span></li>
</ul>
</div>
<div class="col-lg-4 col-sm-10">
<h4 class="menu-title">Item<span class="menu-bold">2</span></h4>
<ul id="menu-2" class="menu">
<li id="menu-item-237"><span>Subitem1</span></li>
<li id="menu-item-239"><span>Subitem2</span></li>
<li id="menu-item-241"><span>Subitem3</span></li>
</ul>
</div>
</div>
$("h4.menu-title").mouseenter(function() {
$(this).siblings("ul").toggle();
}).mouseleave(function() {
$(this).siblings("ul").toggle();
});
I want to mouseenter Item 1 and then show up subitems, but when I want to go through subitems they disappear. Is it possible to do keep it displayed while I am on them?
Full example on: https://jsfiddle.net/pfjsxj58/
The issue is because the mouseout is called when you leave the h4 to select an option in the ul. Instead, attach the events to the parent div element which is holding both the h4 and the ul:
<div class="col-lg-4 col-sm-10 item-group">
<h4 class="menu-title">Item<span class="menu-bold">1</span></h4>
<ul id="menu-1" class="menu">
<li id="menu-item-222"><span>Subitem1</span></li>
<li id="menu-item-223"><span>Subitem2</span></li>
<li id="menu-item-224"><span>Subitem3</span></li>
</ul>
</div>
<div class="col-lg-4 col-sm-10 item-group">
<h4 class="menu-title">Item<span class="menu-bold">2</span></h4>
<ul id="menu-2" class="menu">
<li id="menu-item-237"><span>Subitem1</span></li>
<li id="menu-item-239"><span>Subitem2</span></li>
<li id="menu-item-241"><span>Subitem3</span></li>
</ul>
</div>
$(".item-group").mouseenter(function() {
$(this).find("ul").toggle();
}).mouseleave(function() {
$(this).find("ul").toggle();
});
Updated fiddle
Yes you can, you have to modify your HTML and make your subitems childs of the item witch show your options.
In that way, your element keep the focus, and you can click on subitems
i try to add jQuery script that will toggle my footer columns, my problem is how I can make to stop toggling all items. Now when someone click on H4 tags all H4 tags are toggle together.
HTML:
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>About Us</li>
<li>Customer Service</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns</li>
<li>Secure Shopping</li>
<li>International Shipping</li>
</ul>
</div>
</div>
</div>
</div>
</div>
jQuery SCRIPT
jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
jQuery('.footer h4').on("click", function(){
if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle(); }
else {
jQuery(this).find('span').addClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle();
}
});
You could also try the following code:
jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
jQuery('.footer-cols h4').on("click", function(){
if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parent().next().slideToggle();
}
else {
jQuery(this).find('span').addClass('opened').parent().next().slideToggle();
}
});
The problem with your selector is that with
parents('.footer-cols')
You basically select
<div class="row footer-cols"></div>
element on top. Thus
find('.footer-cols-content')
selects all child elements in it resulting all of them to slideToggle()
on the click handler change .parents('.footer-cols') for .parents('.col-sm-4')
You will need to add content to the span to give the user something to click
This one changes the plus/minus and hides other content
$(function() {
$(".footer-cols").find("h4").on("click", function() {
var $content = $(this).parent().find(".footer-cols-content");
var $span = $(this).find("span");
if ($span.length==0) $(this).append('<span class="toggle" />');
$(".footer-cols-content").not($content).hide();
$content.slideToggle();
$span.text($span.text() == "-" ? "+" : "-");
});
});
To add the span on the fly:
if ($span.length==0) {
$span=$('<span class="toggle" />');
$(this).append($span);
}
$(function() {
$(".footer-cols").find("h4").on("click", function() {
var $content = $(this).parent().find(".footer-cols-content");
var $span = $(this).find("span");
if ($span.length==0) {
$span=$('<span class="toggle" />');
$(this).append($span);
}
$(".footer-cols-content").not($content).hide();
$content.slideToggle();
$span.text($span.text() == "-" ? "+" : "-");
});
});
.footer-cols-content {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information </h4>
<div class="footer-cols-content">
<ul>
<li>About Us
</li>
<li>Customer Service
</li>
<li>Privacy Policy
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us <span class="toggle">+</span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns
</li>
<li>Secure Shopping
</li>
<li>International Shipping
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I am not sure why are you appending span class but If I am not worng only slide toggle should do the work that you intend to do.
jQuery('.footer-cols h4').on("click", function(){
$(this).find('span').toggleClass('opened').end().next().slideToggle();
});
jQuery('.footer-cols h4').on("click", function(){
$(this).find('span').toggleClass('opened').end().next().slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row footer-cols">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<h4>Information<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>About Us</li>
<li>Customer Service</li>
<li>Privacy Policy</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<h4>Why buy from us<span class="toggle"></span></h4>
<div class="footer-cols-content">
<ul>
<li>Shipping & Returns</li>
<li>Secure Shopping</li>
<li>International Shipping</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The above code will work only when the footer-cols-content div is always next to h4. To avoid as such you can use parent().
jQuery('.footer h4').on("click", function(){
$(this).parent().find('footer-cols-content').slideToggle();
});