hi I tried to show the div (blue one) on mouseenter but only then, when ul has class hidden.
I have done it but how i dont know how can i bind again function which will show the blue div on mouseenter ..
To test it hover on the white li, then click the violet button and try to hover white li again - in the last step should show blue li but ii wont :(
this is my fiddle
fiddle
$(document).ready(function(e){
$('li').each( function() {
var elem_number = $(this).index();
$(this).html(elem_number + 1);
});
$('.left-panel-toggle').on('click', function () {
if($('ul').hasClass('hidden')) {
$('ul').animate({width:'150px'}, 200).addClass('visible').removeClass('hidden');
$('li').animate({height:'100px',width:'150px'}, 200);
$('li').unbind("mouseenter");
} else {
$('ul').animate({width:'35px'}, 200).addClass('hidden').removeClass('visible');
$('li').animate({height:'30px', width:'30px'}, 200);
}
});
$( "li" ).bind('mouseenter',function(e) {
if($('ul').attr('class') == 'hidden') {
$('.tooltip').show().animate({'left':'36px','opacity':'1'},100);
var tooltip_height = $('.tooltip').height();
var tooltip_width = $('.tooltip').width();
var viewHeightY = $(window).height();
var li_position = $(this).position();
var li_height = $(this).height();
var li_width = $(this).width();
var tooltip_position = $('.tooltip').position();
var tt = tooltip_position.top + tooltip_height
if(li_position.top < tooltip_height/2) {
$('.tooltip').css({'top':li_position.top - li_position.top, 'left':li_position.left + li_width + 15});
}
if(li_position.top > tooltip_height/2) {
$('.tooltip').css({'top':li_position.top - tooltip_height/2, 'left':li_position.left + li_width + 15});
}
if((viewHeightY - li_position.top) < tooltip_height/2) {
$('.tooltip').css({'top':li_position.top -((li_position.top + tooltip_height)-viewHeightY), 'left':li_position.left + li_width + 15});
}
}
// $('img.x').attr('src', $(this.img).val('src'));
e.preventDefault();
});
$( "ul" ).bind('mouseleave', function() {
$('.tooltip').animate({'left':'56px','opacity':'0'},60);
});
});
Related
I have a list where are li with triger id. I need, when you click on li you scroll down the page to the container with the same id. I have this script, but, when I click on liyou scroll on the top page.
(function($) {
$(function() {
var lop = "<ol>";
$('.boxes-section .box-section-item .btText h2 strong').each(function() {
let uid = "ID-"+Math.floor(Math.random() * Math.floor(99999));
lop+="<li data-trigger='"+uid+"'>"+$(this).text()+"</li>";
$(this).attr('id', uid);
});
lop+="</ol>";
$('.listofparticipants').html(lop).show();
$(".listofparticipants ol li").click(function() {
var extraspace = $('header#header').height()+$('#wpadminbar').height()+$('#wpfront-notification-bar').height();
extraspace = extraspace+40;
$('html, body').delay(2000).animate({scrollTop: $("#"+$(this).attr('data-trigger')).offset().top-extraspace }, 1000);
});
});
})(jQuery);
You can try this
$(function() {
let lop = "<ol>";
$('.boxes-section .box-section-item .btText h2 strong').each(function() {
let uid = "ID-"+Math.floor(Math.random() * Math.floor(99999));
lop += "<li data-trigger='"+uid+"'>"+$(this).text()+"</li>";
$(this).attr('id', uid);
});
lop += "</ol>";
$('.listofparticipants').html(lop).show();
$(document).on("click", ".listofparticipants ol li", function() {
var extraspace = $('header#header').height() + $('#wpadminbar').height() + $('#wpfront-notification-bar').height();
extraspace = extraspace + 40;
$('html, body').delay(2000).animate({scrollTop: $("#" + $(this).attr('data-trigger')).offset().top - extraspace}, 1000);
});
});
I've been designing a web infographic with some animations within the page. So I added some JavaScript code in order to trigger the animations as the user reaches them on screen.
My question is how to add many div names in a JavaScript sentence?
The name of the div is "box_info_a", I just need to add some more, but have no idea how.
This is the code:
$(function()
var $window = $(window),
win_height_padded = $window.height() * 1.1,
isTouch = Modernizr.touch;
if (isTouch) {
$('.revealOnScroll').addClass('box_info_a');
}
$window.on('scroll', revealOnScroll);
function revealOnScroll() {
var scrolled = $window.scrollTop(),
win_height_padded = $window.height() * 1.1;
// Showed...
$(".revealOnScroll:not(.box_info_a)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function() {
$this.addClass('box_info_a ' + $this.data('animation'));
}, parseInt($this.data('timeout'), 10));
} else {
$this.addClass('box_info_a ' + $this.data('animation'));
}
}
}); // Close Showed...
// Hidden...
$(".revealOnScroll.box_info_a").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('box_info_a lightSpeedIn')
}
});
}
revealOnScroll();
});
Just do this:
$(document).ready(function () {
$('#trigger').click(function () {
$('#target').addClass("oneClassToAdd anotherClassToAdd");
});
});
All you have to do is put two classes in the parentheses.
I am trying to change font awesome '+' icon to '-' icon when list is expanded could any one help me.
jQuery:
var $ul = $('ul');
$ul.find('li[Catparent-id]').each(function() {
$ul.find('li[Catparent-id=' + $(this).attr('Catli-id') + ']').wrapAll('<ul />').parent().appendTo(this)
});
var $expandBtns = $('.expandBtn');
var $span;
//counting childs
$expandBtns.each(function() {
$span = $(this).find('span#count');
var $subList = $(this).siblings('ul').find('li')
if ($subList.length > 0) {
$span.append(' ' + $subList.length);
} else {
$span.css('display', 'none');
}
});
//Collapse and Expand
$('#orgCat ul').hide('li');
$expandBtns.on('click', function() {
var $subList = $(this).siblings('ul');
$(this).parent('li').siblings('li').find('ul').hide('slow');
if ($subList.is(':visible')) {
$subList.hide('slow');
} else {
$subList.show('slow');
}
});
For HTML and CSS JSFIDDLE
This is what you need
var plusClass = "fa-plus-circle";
var minusClass = "fa-minus-circle";
//Collapse and Expand
$('#orgCat ul').hide('li');
$expandBtns.on('click', function() {
var $subList = $(this).siblings('ul');
$(this).parent('li').siblings('li').find('ul').hide('slow');
//reset icons since you close other children
$(this).parent('li').siblings('li').find('i').
removeClass(minusClass).addClass(plusClass);
if ($subList.is(':visible')) {
$subList.hide('slow');
$(this).find("i:first").addClass(plusClass).removeClass(minusClass);
$(this).removeClass("blue");
} else {
$subList.show('slow');
$(this).find("i:first").removeClass(plusClass).addClass(minusClass);
$(this).addClass("blue");
}
});
Fiddle ==> https://jsfiddle.net/8aaq0j4c/2/
Fiddle with color change ==> https://jsfiddle.net/8aaq0j4c/3/
I have the following div
<div class="npwfu-inspiration">
<div class="npwfu-inspiration-inner">
<h1>Looking for inspiration?</h1>
<p>Pick a category to see examples of what you can create with Spark.</p>
<ul class="inspiration-category-list"></ul>
</div>
</div>
<div class="div2"></div>
I need to take out the inspiration-category-list list ul and drop it into another div with a CSS transition. So it slides down and locks to position 80px from the top in div2.
How can I do this using JQUERY?
why you do not use drag effect instead of css transition?
if you would like you can add draggable effect to every element that you want to move it
you can use dragable.js from link below
then in javascript code you should set $(".inspiration-category-list").draggable ()
then instead of using css transition just drag it and drop it in any div element
/*--------------------------------------------------------------
Draggable
alternative to jQuery UI’s draggable
based on comments from: http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
usage example: $('.post-thumbnail, article header').draggable();
--------------------------------------------------------------*/
(function ($) {
if (!jQuery().draggable) {
$.fn.draggable = function () {
var _fixMobileEvent = function (e) {
if (e.originalEvent && e.originalEvent.targetTouches && e.originalEvent.targetTouches[0]) {
var t = e.originalEvent.targetTouches[0];
e.pageX = t.clientX;
e.pageY = t.clientY;
return true;
} else {
return false;
}
};
this
.css('cursor', 'move')
.on('mousedown touchstart', function (e) {
_fixMobileEvent(e);
var $dragged = $(this);
var startOffset = $dragged.offset();
var x = startOffset.left - e.pageX,
y = startOffset.top - e.pageY,
z = $dragged.css('z-index');
if (!$.fn.draggable.stack) {
$.fn.draggable.stack = 999;
}
stack = $.fn.draggable.stack;
var firstMove = true;
var $preventClick = null;
$(window)
.on('mousemove.draggable touchmove.draggable', function (e) {
_fixMobileEvent(e);
//$("#log").text("x: " + e.pageX + "; y: " + e.pageY);
if (firstMove) {
firstMove = false;
$dragged
.css({
'z-index': stack, 'transform': 'scale(1.1)', 'transition': 'transform .3s',
'bottom': 'auto', 'right': 'auto'
});
/*.find('a').one('click.draggable', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
$("#log").text("link: click prevented " + stack);
});*/
var $target = $(e.target);
if ($target.is('a')) {
$preventClick = $target;
$target.one('click.draggable', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
//$("#log").text("link: click prevented " + stack);
});
} else if ($dragged.is('a')) {
$preventClick = $dragged;
$dragged.one('click.draggable', function (e) {
e.preventDefault();
e.stopImmediatePropagation();
//$("#log").text("dragged: click prevented " + stack);
});
}
}
$dragged.offset({
left: x + e.pageX,
top: y + e.pageY
});
e.preventDefault();
})
.one('mouseup touchend touchcancel', function () {
$(this).off('mousemove.draggable touchmove.draggable');
$dragged.css({ 'z-index': z, 'transform': 'scale(1)' })
$.fn.draggable.stack++;
if (_fixMobileEvent(e)) {
if ($preventClick) $preventClick.off('click.draggable');
var endOffset = $dragged.offset();
//$("#log").text("left :" + startOffset.left + "; top: " + startOffset.top
// + "; newLeft: " + endOffset.left + "; newTop: " + endOffset.top);
if (Math.abs(endOffset.left - startOffset.left) <= 3
&& Math.abs(endOffset.top - startOffset.top) <= 3) {
if ($preventClick) {
$preventClick[0].click();
} else {
var $target = $(e.target);
if ($target.is('a')) {
e.target.click();
} else if ($dragged.is('a')) {
$dragged[0].click();
}
}
}
}
});
e.preventDefault();
});
return this;
};
}
})(jQuery);
Can someone please put me out of my misery and 'fix' or 'solve' my issue: as you can see via my JSfiddle link
http://jsfiddle.net/SJkmh/312/
jQuery(document).ready(function ($) {
var h = $("#main-menu").height() * 1.25;
$(".scroll").click(function (event) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - h
}, 300);
});
I can't seem to get it to work - all I want to do is change the colour of the link text to identify what section of the page the user is on. please help me?
Thanks in advance
UPDATE : Select menu item on scroll
[UPDATED] jsFiddle : http://jsfiddle.net/thecbuilder/Qtjx6/2/
added js
$(window).scroll(function () {
// Get container scroll position
var topHeight = $(this).scrollTop() + h + 10;
var onTopId;
$(".testx").each(function () {
var curTop = $(this).offset().top;
var curBottom = curTop + $(this).height();
if (curTop < fromTop && curBottom > topHeight) {
onTopId = $(this).attr("id");
}
});
$selLink.removeClass("selected");
$selLink = $("a[href=#"+onTopId+"]").addClass("selected");
});
This should do the task : http://jsfiddle.net/thecbuilder/Qtjx6/
js
var $selLink = $("ul li a");
$(function(){
$("ul li a").click(function(){
$selLink.removeClass("selected");
$selLink = $(this);
$selLink.addClass("selected");
});
});
css
.selected{
color : #4B85C3;
}
You are checking the offset of the links not the content sections. Working fiddle:
http://jsfiddle.net/SJkmh/315/
$(document).scroll(function () {
var h = $("#main-menu").height() * 1.5;
var link1 = $("#home").offset().top;
var link2 = $("#about").offset().top;
var link3 = $("#work").offset().top;
var selectedColor = "#4B85C3";
var defaultColor = "#2e375b";
var top = $(this).scrollTop() - h;
$("#main-menu li a").css('color', defaultColor);
if (top <= link1) {
$("#link1").css('color', selectedColor);
} else if (top <= link2) {
$("#link2").css('color', selectedColor);
} else {
$("#link3").css('color', selectedColor);
}
});
The way to do this would be to reset the color of all the links, and then set the color of the $(this) to the new color
jQuery(document).ready(function ($) {
var h = $("#main-menu").height() * 1.25;
$(".scroll").click(function (event) {
$('a.scroll').css({"color": "#2e375b"});
$(this).css({"color": "#4B85C3"});
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - h
}, 300);
});
});
JSFiddle