I am trying to replace the calendar icon which is on right side of header,based on item we selected from the menu elements.
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
});
});
Please check full code here
You can do it like this
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
classI= $(this).find("i").attr('class');
$("#chicon i").attr("class",classI+" pull-right");
});
});
Here is working example http://codepen.io/anon/pen/ALWRww
You can write it like this:
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var text = $(this).attr('class');
var icon = $(this).find('i').attr('class');
var newClass = icon + ' pull-right';
$("#title").text(text);
$('#chicon i').removeClass();
$('#chicon i').addClass(newClass);
});
});
This will change your icon and text
$(document).ready(function() {
var oldicon = "fa fa-calendar-check-o";
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
var newicon = $(this).find("i").attr("class");
$("#chicon i").removeClass(oldicon).addClass(newicon);
oldicon = newicon;
});
});
I have done minor change script as below:
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
var icon_class=$(this).find('i').attr('class');
$("#chicon").find('i').attr('class',icon_class+' pull-right');
});
});
Related
I am changing the structure of one of my projects and I am unable to figure out why my new code is not adding a class to my element.
The original code is this
(function($)
{
var $nav = $('#nav');
var $nav_a = $nav.find('a');
$nav_a.each(function()
{
var $this = $(this),
id = $this.attr('href'),
$section = $(id);
$section.scrollex(
{
mode: 'middle',
enter: function()
{
$nav_a.removeClass('active');
$this.addClass('active');
}
});
});
})(jQuery);
My new code is this
$("#nav").find("a").each(function(){
var $this = $(this),
id = $this.attr('href'),
$section = $(id);
$section.scrollex({
mode: "middle",
enter: function()
{
$("#nav").find("a").removeClass("active");
$(this).addClass("active");
}
})
});
The new code fails to add the class active to the elements in #nav but the original code works fine. What am I doing wrong in my new code?
You need to point to the correct this
Update from
$(this).addClass("active");
to
$this.addClass("active");
The problem with your code is that you assigned $(this) to $this, thus when you later use $(this) you are actually using $$(this).
Replace the variable in the following line:
$(this).addClass("active");
to
$this.addClass("active");
I'm trying to make a sidebar that when clicked it (aside li) slides down the section paragraph (section p) with the same class.
var $asideGet = $('aside li').click(function(){
$(this).each(function(){
$(this).attr('class');
});
});
var $sectionGet = $('section p').click(function(){
$(this).each(function(){
$(this).attr('class');
});
});
if($asideGet == $sectionGet){
$asideGet.click(function(){
$sectionGet.slideToggle();
});
};
I reviwed the code and got something like this:
Oops... But when I click the aside li, it slides down all the section p, and I just want to slide down the section p with the same class as aside li does.
var $sectionP = $('section p');
$sectionP.hide();
var $asideLi = $('aside li');
function comparing(){
$asideLi.click(function(){
$(this).each(function(){
var $asideClass = $(this).attr('class');
if($sectionP.hasClass($asideClass)){
$sectionP.slideToggle();
};
}); //each function
}); //click function
};
I want if a user hovers over .userNames, .details should slide out after a little delay and also wants .details show hide() when the mouse leaves .userNames, after a little delay too. This is working. Now I want .details to stay if the mouse enters it but it still disappears.
Obsv: A good example of this is Facebook's user names when a mouse hovers them.
HTML code:
<div class = 'posts'>
<p class = 'userNames'> Yax </p>
<div class = 'details'>
<p> Full Name </p>
<p> Birthday </p>
<p> Age </p>
</div>
</div>
jQuery:
$(document).ready(function(){
$('.details').hide();
$(document).on('mouseenter', ".userNames", function () {
var $this = $(this);
$.data($this, 'timer', setTimeout(function(){
$this.parents('.posts').find('.details').slideDown(100);
},900));
});
$(document).on('mouseleave', ".userNames", function () {
var $this = $(this);
$this.parents('.posts').find('.details').delay(800).hide(100);
});
$(document).on('mouseenter', ".details", function () {
var $this = $(this);
var $dataTime = $this.parents('.posts').find('.userNames');
clearTimeout($.data($dataTime, 'timer'));
});
$(document).on('mouseleave', ".details", function () {
var $this = $(this);
$this.hide();
});
});
Thank you in advance.
Try
$(document).ready(function () {
$('.details').hide();
$(document).on('mouseenter', ".userNames", function () {
var $this = $(this),
$post = $this.closest('.posts');
$post.data('timer', setTimeout(function () {
$post.find('.details').stop(true, true).slideDown(100);
}, 900));
});
$(document).on('mouseleave', ".userNames", function () {
var $this = $(this),
$post = $this.closest('.posts');
clearTimeout($post.data('timer'));
$post.data('timer', setTimeout(function () {
$post.find('.details').stop(true, true).delay(800).hide(100);
}, 900));
});
$(document).on('mouseenter', ".details", function () {
var $this = $(this),
$post = $this.closest('.posts');
clearTimeout($post.data('timer'));
$this.stop(true, true)
});
$(document).on('mouseleave', ".details", function () {
var $this = $(this);
$this.hide();
});
});
Demo: Fiddle
Here is a solution that works and simplifies your jQuery a lot:
$(document).ready(function(){
$('.details').hide();
$('.userNames').mouseenter(function () {
$('.details').delay(900).slideDown(100);
});
$('.userNames').mouseleave(function () {
$('.details').delay(800).hide(100);
});
$('.details').mouseenter(function () {
$(this).stop(true, true);
});
$('.details').mouseleave(function () {
$(this).hide(100);
});
});
Try it here.
I have two similar functions performing a responsive menu toggle via a handle on the page, see the code:
//responsive main navigation
$(function() {
var pull = $('#pull');
menu = $('.main-nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle('fast');
});
});
//responsive blog navigation
$(function() {
var toggle = $('#toggle-handle');
sidebar = $('.blog-sidebar-wrap');
sidebarHeight = sidebar.height();
$(toggle).on('click', function(e) {
e.preventDefault();
sidebar.slideToggle('fast');
});
});
My question is how can I write this so that I'm not repeating the same kind of procedure (function). Do i set up a single function and pass in the parameters? Help mostly appreciated, jQuery/Javascript beginner here!
Try
//a function that creates a slide based menu
function slideMenu(ctrl, target){
ctrl.on('click', function(e) {
e.preventDefault();
target.slideToggle('fast');
});
}
//responsive main navigation
$(function() {
var pull = $('#pull');
menu = $('.main-nav ul');
menuHeight = menu.height();
slideMenu(pull, menu)
});
//responsive blog navigation
$(function() {
var toggle = $('#toggle-handle');
sidebar = $('.blog-sidebar-wrap');
sidebarHeight = sidebar.height();
slideMenu(toggle, sidebar)
});
$(function() {
effectdemo("#pull",'.main-nav ul');
effectdemo('#toggle-handle','.blog-sidebar-wrap');
});
function effectdemo(starter,sliderconatiner)
{
var toggle = $(starter);
sidebar = $(sliderconatiner);
sidebarHeight = sidebar.height();
$(toggle).on('click', function(e) {
e.preventDefault();
sidebar.slideToggle('fast');
});
}
I am trying to write a JQuery If Statement.. What I am trying to achieve is basically to highlight the appropriate link (a) when the certain div (infotab) is clicked. They are all hidden as you can see, but when clicked, become visible in a nice fade. I want to highlight the item that was clicked. (Change the background color to whatever I want, such as red in the code below.)
The code I have below works, but incorrectly. It highlights all of the a's in that div. I just want the one highlighted that was clicked. Thanks for your help you guys are great.
$(document).ready(function () {
$('#infotab_two_s, #infotab_three_s, #infotab_four_s, #infotab_five_s').hide();
});
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$("subnav_holster li a").css({
"color": "red"
});
});
});
Grab the li that was clicked and access that element's a:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
var clicked = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
clicked.find('a').css({
"color": "red"
});
});
});
You should cache this and then highlight it:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s',
$this = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$('.subnav_holster li a').css({
"background-color": "white" // reset all to default color
});
$this.find('a').css({
"background-color": "red" // set highlight to this element only
});
});
});