I'm learning jquery and I'm trying to make a tab.
I can't realize why this doesn't work
Here I have my HTML
<div class="tab-panels">
<ul class="tabs">
<li rel="panel1"class="active">All</li>
<li rel="panel2">Animals</li>
<li rel="panel3">People</li>
<li rel="panel4">Landscape</li>
</ul>
<div id="panel1" class="panel active">
<img src="images/tab1.jpg"/>
<img src="images/tab2.jpg"/>
</div>
<div id="panel2" class="panel">
<img src="images/tab3.jpg"/>
<img src="images/tab4.jpg"/>
</div>
<div id="panel3" class="panel">
<img src="images/tab5.jpg"/>
<img src="images/tab6.jpg"/>
</div>
<div id="panel4" class="panel">
<img src="images/tab7.jpg"/>
<img src="images/tab8.jpg"/>
</div>
</div>
And here is my jquery
$(function(){
$('.tab-panels .tabs li').on('click', function({
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
var panelToShow = $(this).attr('rel');
$panel.find('.panel.active').show(300, showNextPanel);
function showNextPanel(){
$(this).removeClass('active');
$('#'+panelToShow).slideDown(300, function(){
$(this).addClass('active');
});
});
}));
I made this code from a video that I watched, for this person the code worked perfectly, so I don't understand why it doesn't work for me.
Your forget to initialize it
try like this
$(function() {
$( ".tab-panels" ).tabs();
});
Syntax errors at .on('click', function({ , close of js });}));
Try to call .hide() on .panel before displaying .panel.active ; substitute .slideDown() for .show()
$(function(){
$(".tab-panels .tabs li").on("click", function(e) {
$(this).siblings().add(".panel").removeClass("active");
$(".panel").hide();
$(this).addClass("active");
var panelToShow = $(this).attr("rel");
$("#" + panelToShow).addClass("active")
.slideDown(300);
})
});
jsfiddle http://jsfiddle.net/nLu4Lpoy/
Seem like you misspelled the code(Assuming you have working css code for styling). See indicators shown below :
$(function () {
$('.tab-panels .tabs li').on('click', function () { //<------ here
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
var panelToShow = $(this).attr('rel');
$panel.find('.panel.active').show(300, showNextPanel);
function showNextPanel() {
$(this).removeClass('active');
$('#' + panelToShow).slideDown(300, function () {
$(this).addClass('active');
});
} //<------ here
});
}); //<------ here(must close dom ready function)
You had syntax errors in your jQuery, try this:
$(function(){
$('.tab-panels .tabs li').on('click', function(e){
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
var panelToShow = $(this).attr('rel');
$panel.find('.panel.active').show(300, showNextPanel);
function showNextPanel(){
$(this).removeClass('active');
$('#'+panelToShow).slideDown(300, function(){
$(this).addClass('active');
});
};
});
});
Quick JS Fiddle
Your first click function was not set up properly and the end wasn't closed right. You can usually solve something like this easier by keeping functions spaced out well, grouping your variables, etc..
Related
Thanks to #mplungjan for helping me complete my first query which can be found here: Remove div with button click using JavaScript
The code works as intended however when we tried to get the slideDown() function to work it looks a bit... laggy and then just pops up without the animation being completed as intended.
Would like some support to see how can this be fixed.
Find below working code:
$(function() {
var $original = $('#ValuWrapper'),
$crossButton = $('#cross'),
$content = $("#content");
$content.on("click", ".cross", function() {
if ($(this).is("#cross")) return false;
var $cross = $(this);
$(this).next().slideUp(400, function() {
$(this).remove();
$cross.remove();
});
});
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
.hide() // if sliding
.attr("id",$original.attr("id")+$content.find("button.cross").length)
.slideDown("slow") // does not slide much so remove if you do not like it
);
});
});
#content { height:100%}
#cross { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content">
<button type="button" class="buttonImgTop cross" id="cross">X</button>
<div id="ValuWrapper">
...content comes here... <br/>
</div>
</div>
<button type="button" class="buttonImg" id="repeat">Add</button>
Kindly use below updated code for animation.
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
// if sliding
.attr("id",$original.attr("id")+$content.find("button.cross").length).hide());
// does not slide much so remove if you do not like it
$("#"+$original.attr("id")+$content.find("button.cross").length).slideDown("slow");//change
});
and remove #content { height:100%;}
When you clone the $original you should reset its height so jQuery knows what height its got to animate to.
E.G: $original.css('height', $(this).height())
See demo:
$(function() {
var $original = $('#ValuWrapper'),
$crossButton = $('#cross'),
$content = $("#content");
$content.on("click", ".cross", function() {
if ($(this).is("#cross")) return false;
var $cross = $(this);
$(this).next().slideUp(400, function() {
$(this).remove();
$cross.remove();
});
});
$("#repeat").on("click", function() {
$content.append($crossButton.clone(true).removeAttr("id"));
$content.append(
$original.clone(true)
.css('height', $(this).height())//set height
.hide() .attr("id",$original.attr("id")+$content.find("button.cross").length)
.slideDown("slow")
);
});
});
#content { height:100%;}
#cross { display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content">
<button type="button" class="buttonImgTop cross" id="cross">X</button>
<div id="ValuWrapper">
...content comes here...
</div>
</div>
<button type="button" class="buttonImg" id="repeat">Add</button>
My HTML is structured as below. I would like to give the clicked <a> element the class "active".
Although the debugger stops on the click() line, the code within the function is not being triggered.
$('#dropdownRow > div > a').on('click', function(e) {
$('#dropdownRow a.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
})
.active { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="dropdownRow">
<div class="col-xs-3">
XXX
</div>
<div class="col-xs-3">
YYY
</div>
<div class="col-xs-3">
ZZZ
</div>
</div>
It's possible you do not have the jQuery firing at the right time. I suggest wrapping it in a $(document).ready
https://learn.jquery.com/using-jquery-core/document-ready/
$( document ).ready(function() {
// Add your code
$('#dropdownRow > div > a').on('click', function(e) {
$('#dropdownRow a.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
// End code
});
I have an issue using jquery. I have a content that have to become visible when I click on ul li in navigation.
But I'm missing something, when I click, nothing happens. I am not sure why this happens. Please take a look at the provided fiddle near the bottom
Here is the code:
$(document).ready(function(){
$("ul.topnav > li.one").click(function() {
$('.content').hide(500).fadeOut(400);
if ($(this).next().is(':hidden') == true) {
$(this).next().show(400).fadeIn(500);
}
});
$('.content').hide();
});
<ul class="topnav">
<li class="one">test</li>
<li>second</li>
</ul>
<div class="content">Some content here</div>
Here is a fiddle http://jsfiddle.net/2pBge/
Here you go
http://jsfiddle.net/Mc92M/1/
$(document).ready(function(){
$("li.one").on("click", function() {
$('.content').fadeOut(400);
if ($('.content').is(':hidden')) {
$('.content').fadeIn(500);
}
});
$('.content').hide();
});
When you used .next() it is targeting the second li, not content div so nothing shows or hides. I also removed the .hide and .show as you already have fade in/out
If you really want to use the .next() then you would have to do
$(document).ready(function(){
$(".topnav").on("click", function(e) {
if( $(e.target).parent().is('li.one') ) {
$(this).next().toggle();
}
});
$('.content').hide();
});
First of all, your event isn't firing. Just set up a click listener for ul.topnav and delegate the event:
$("ul.topnav").on("click", "li.one", function() { ... });
Then, delete the rest of that nonsense and just use .toggle():
$('.content').toggle();
Working DEMO
$(document).ready(function(){
$("ul.topnav").on("click", "li.one", function() {
console.log('clicked!');
$('.content').toggle();
});
$('.content').hide();
});
I am trying to use localStorage in jQuery to remember active menu item. But it doesn't seem to work.
This is menu -
<ul class="mainnav ">
<li class="active" title="Ranger Dashboard" rel="tooltip" data-placement="bottom"></li>
<li rel="tooltip" data-placement="bottom" title="Upload a Funcard"></li>
</ul>
jQuery-
<script type="text/javascript">
$(function () {
$('.mainnav li').click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
var activeIndex = $(this).index();
localStorage.setItem('mySelectValue', activeIndex);
});
});
</script>
<script type="text/javascript">
$(window).load(function () {
var activeIndex = localStorage.getItem('mySelectValue');
$('.mainnav> li:eq("' + activeIndex + '")').addClass('active');
});
</script>
What went wrong with this jQuery code? Please help.
Are you making sure that you're resetting all the menu items on window.load?:
$(window).load(function () {
$('.mainnav li').removeClass('active');
// etc
});
Working demo.
The quotes surround the literal string parts of the selector, which is then joined to the variable with the plus sign.
$('.mainnav> li:eq(' + activeIndex + ')').addClass('active');
I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.
The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).
HTML :
<ul class="menu">
<li class="home"><span class="displace"></span></li>
<li class="credits"><span class="displace"></span></li>
<li class="idea"><span class="displace"></span></li>
</ul>
<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>
JS / jQuery :
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
$(function stay() {
$('menu').click(function stay() {
$('menu').removeClass('selected');
$(this).addClass('selected');
});
});
Demo: http://jsfiddle.net/anKT3/159/
I've tried creating a function to change the class, but I've not had any luck.
Change your stay() function to be as follows:
$(function stay() {
$('.menu li a').click(function stay() {
$('.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});
Here is JS fiddle
$(function stay() {
$('ul.menu li a').click(function () {
$('ul.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});