One of my ng-views has a next structure
<div class="container-fluid wrapper">
<aside ng-if="asideMenu">
<div ng-include src="'html/partials/stats/aside.html'"></div>
</aside>
<section>
<div ng-include src="'html/partials/stats/grid.html'"></div>
<div ng-include src="'html/partials/stats/tabs.html'"></div>
</section>
where I have a grid and tabs as a major content and if user wants he can open aside bar. The function to open aside bar is
$scope.asideMenu = false;
$scope.aside = function () {
getTree();
var section = document.getElementsByTagName("section");
var aside = document.getElementsByTagName("aside");
$scope.asideMenu = !$scope.asideMenu;
if ($scope.asideMenu == true) {
$(section).animate({
'width': '84%'
}, 500, function () {
$(aside).animate({
'width': '15%'
});
});
}
else {
$(aside).animate({
'width': '0%'
}, 1000, function () {
$(section).animate({
'width': '100%'
});
});
}
};
So currently I'm using jQuery animation to open aside menu and shrink major content.
The question is simple, what is the best way to replace jQuery animation to Angular & CSS animation (without any additional dependencies and libs)??
This is simple example of my page
Related
I am trying to implement an ajax-loaded tooltip which should contain an HTML table.
At first the tooltip displays a "loading..." text while the ajax call is performed, and then when the HTML data is received, it is used as the tooltip content.
The problem is that the tooltip position seems to be calculated only at the beginning, when the "loading..." is displayed, and not again when the tooltip content changes.
The tooltips are initialized with the following code:
$('.my_tooltip').each(function() {
var $this = $(this),
tooltip_url = $this.data('tooltip-url'),
cache_id = tooltip_url || '',
opts = $.extend({}, {
content: function(done) {
if(tooltip.cache[cache_id]) {
return tooltip.cache[cache_id];
}
if(tooltip_url) {
Ajax.get($this.data('tooltip-url'), {}, {
dataType: 'html',
success: function(data) {
tooltip.cache[cache_id] = data;
done(tooltip.cache[cache_id]);
},
error: function() {
done('Error while loading data!');
}
});
return 'Loading...';
}
return $this.attr('title');
},
items: $this,
tooltipClass: $this.data('tooltip-class') || ('age-tooltip' + (!tooltip_id && !tooltip_url ? '-auto' : ''))
}, options);
$this.tooltip(opts);
});
Here is the tooltip while loading, at this time the tooltip does fit the viewport.
And here is how it looks after loading, as you see the tooltip did not automatically reposition, so you can see less than half of it.
In this case, if it had moved over the tooltip-ed element, it would be fully visible, however even if I let the tooltip disappear and then move the mouse again to hover, having it loaded from the local tooltip cache, it won't reposition.
I have looked into the position property for the tooltip, however if possible I'd like to avoid the need to manually specify it, and let the plugin handle it automatically.
Is there a way to have the tooltip positioned where the most of it will be visible after the ajax loading?
EDIT:
I tried #Stphane's solution, with the position {my: 'left top+15', at: 'left bottom', of: this, collision: 'flipfit'} however its not positioned correctly, seems to ignore the top/bottom part and instead takes the certer, as shown here:
Looking in the console, I see
Error: no such method 'instance' for tooltip widget instance
which I guess might be due to the fact that we are still using jQuery UI version 1.10.4
You can leverage using property (being a callback/hook) documented on jQuery UI position method
When specified, the actual property setting is delegated to this callback.
The cleaner approach
… is to use the tooltip instance getter to apply the right position as soon as possible:
var tooltip = {cache: []},
posSetter = function () {
// 1.10.4 code
$('.ui-tooltip').position({
// 1.12.1
// this.tooltip('instance').bindings.filter('.ui-tooltip').position({
// Put the values that fit your need
my: 'left top+15', at: 'left bottom', of: this, collision: "flip fit"
})
;
};
$('.my_tooltip').each(function() {
var $this = $(this),
ownPosSetter = posSetter.bind($this),
tooltip_url = $this.data('tooltip-url'),
cache_id = tooltip_url || '',
opts = $.extend({}, {
content: function(done) {
if (tooltip.cache[cache_id]) {
return tooltip.cache[cache_id];
}
if (tooltip_url) {
setTimeout(() => {
let content = "<div style='height:200px;width:300px'>Content Loaded!</div>";
tooltip.cache[cache_id] = content;
done(content);
setTimeout(ownPosSetter, 100);
}, 2000);
return 'Loading...';
}
return $this.attr('title');
},
items: $this,
tooltipClass: 'age-tooltip-auto'
}, {position: {using: ownPosSetter}});
$this.tooltip(opts);
});
div.contents {
min-height: 50px;
margin-top: 10px;
border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js">
<!--
< link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" / >
< script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" >
-->
</script>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents my_tooltip" title="Some content" data-tooltip-url="//somewhere.com">Has tooltip</div>
<div class="contents my_tooltip" title="Some content" data-tooltip-url="//somewhereelse.com">Has tooltip</div>
<div class="contents" id="log"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
<div class="contents"></div>
I am attempting to create my very first jQuery post slider.
The slider has previous and next buttons which offset the top position of the div containing all the post items. ie. increments or decrements the top position value by the '.post-item' height.
I am facing difficulty with a conditional statement to disable the previous and next buttons based on the value of the CSS top property of the div. For example, disable previous button if top position <= 0
I am new to programming and I was hoping to learn by others examples pertaining to my situation, to better grasp the concepts. Any help and guidance on how to best achieve this would be a huge help for me. At the bottom of the post I have included my rather embarrassing progress on one of my attempts.
JavaScript Source
(function ($) {
$(document).ready(function () {
$('.prev-btn').click(function () {
$(".posts-body").animate({
top: "+=142"
}, {"duration": 400, "easing": "easeOutBack"});
});
$('.next-btn').click(function () {
$(".posts-body").animate({
top: "-=142"
}, {"duration": 400, "easing": "easeOutBack"});
});
});
})(jQuery);
HTML Markup
<div class="buttons">
<span class="prev-btn ">Up</span>
<span class="next-btn ">Down</span>
</div>
<div class="post-slider">
<div class="posts-body">
<div class="post-item">
<h1>Placeholder Text</h1>
</div>
<div class="post-item">
<h1>Placeholder Text</h1>
</div>
<div class="post-item">
<h1>Placeholder Text</h1>
</div>
<div class="post-item">
<h1>Placeholder Text</h1>
</div>
</div>
</div>
Failed Attempt
(function ($) {
$(document).ready(function () {
$('.prev-btn').click(function () {
var selector = document.querySelector(".posts-body");
var offset = selector.offsetTop;
if (selector.css("top") > 0) {
$(".posts-body").animate({
top: "+=142"
}, {"duration": 400, "easing": "easeOutBack"});
}
console.log(offset);
});
$('.next-btn').click(function () {
var selector = document.querySelector(".posts-body");
var offset = selector.offsetTop;
$(".posts-body").animate({
top: "-=142"
}, {"duration": 400, "easing": "easeOutBack"});
console.log(offset);
});
});
})(jQuery);
Thanking you very much for your time and help.
I have managed to find a solution, I am sure the example posted below is full of bad programming techniques(learning something new everyday), however my original question to use an if statement on clicking a button to check div position has been solved.
Note:
The jQuery css() Method returns a string, which was being compared to an integer in the previous example.
JavaScript Source (Solved)
(function ($) {
$(document).ready(function () {
$('.up-btn').click(function () {
var a = parseInt($(".posts-body").css("top"));
if (a === 0) {
$(".posts-body").css("top", "0");
} else {
$(".posts-body").animate({
top: "+=142"
}, {"duration": 400, "easing": "easeOutBack"});
}
});
$('.down-btn').click(function () {
var a = parseInt($(".posts-body").css("top"));
var b = Math.abs(a);
var c = parseInt($(".posts-body").css("height"));
var d = c - (3 * 142);
if (b >= d) {
$(".posts-body").css("top", "d");
} else {
$(".posts-body").animate({
top: "-=142"
}, {"duration": 400, "easing": "easeOutBack"});
}
});
});
})(jQuery);
Sources
CSS-Tricks Link: Check div position with jQuery if/else
I want to Change Positioning of HTML div Via Javascript in my existing Script
Currently This My Existing Javascript is generating in front end.
<div class="navbar navbar-inverse affix" id="SubMenu" style="top: 72px;">
But i want to make positioning to top:8px
JavaScript is as Below.
// Sub-navbar affix on scroll
// ------------------------------------------------------------------------
if ($('#SubMenu').length) {
$('#SubMenu').affix({
offset: {
top: function() {
return $('#SubMenu').parent().offset().top - $('#navbar-main-container').outerHeight();
},
}
}).css('top', $('#navbar-main-container').outerHeight());
// Update values on window resize
$(window).resize(function() {
theTop = $('#SubMenu').parent().offset().top - $('#navbar-main-container').outerHeight();
$('#SubMenu').data('bs.affix').options.offset = {
top: theTop
};
});
$('#SubMenu').on('affixed.bs.affix', function() {
$('a.navbar-brand.scrollTop span').text($('#destination-the-title').val());
});
$('#SubMenu').on('affixed-top.bs.affix', function() {
setTimeout(function() {
$('a.navbar-brand.scrollTop span').text('');
}, 600)
});
}
Since you are using jQuery just use the following line of code.
$("#SubMenu").css("top","8px");
To be more precise
instead if this part
.css('top', $('#navbar-main-container').outerHeight());
add .css("top","8px");
SCENARIO
I want to hide all elements, then show one one specific element after that, from the set which had just been hidden. This has to happen in 3D.
PROBLEM
After hiding, only the last element works, and I don't get any errors whatsoever.
The following works, when I use "hide()";
$(document).on('click', '.navigation_but', function(){
var nav = $(this).attr('data-nav');
$(".article_sd").hide();
$('.'+nav+'').velocity("transition.flipXIn");
});
But this doesn't work, I don't know what im doing wrong.
$(document).on('click', '.navigation_but', function(){
var nav = $(this).attr('data-nav');
$(".article_sd").velocity("transition.flipXOut");
$('.'+nav+'').velocity("transition.flipXIn");
});
Markup is as follows.
HTML
<header>
<nav class="navigation_but" data-nav="article_sd_first">First</nav>
<nav class="navigation_but" data-nav="article_sd_second">Second</nav>
<nav class="navigation_but" data-nav="article_sd_third">Third</nav>
<nav class="navigation_but" data-nav="article_sd_fourth">Fourth</nav>
</header>
<section>
<article class="article_sd article_sd_first" style="background-color:rgba(0,85,0,1)"></article>
<article class="article_sd article_sd_second" style="background-color: rgba(255,255,153,1)"></article>
<article class="article_sd article_sd_third" style="background-color: rgba(153,102,204,1)"></article>
<article class="article_sd article_sd_fourth" style="background-color: rgba(51,51,102,1)"></article>
</section>
And some CSS
<style>
.article_sd { height:100px;}
</style>
or if possible put this fancy effects in place as seen from this demo;
https://codyhouse.co/demo/page-scroll-effects/opacity.html
$.Velocity
.RegisterEffect("rotation", {
defaultDuration: 1,
calls: [
[ { opacity: '0', rotateX: '90', translateY: '-100%'}, 1]
]
});
$.Velocity
.RegisterEffect("rotation.scroll", {
defaultDuration: 1,
calls: [
[ { opacity: '0', rotateX: '90', translateY: '0'}, 1]
]
});
I think problem is in here
$(document).on('click', '.navigation_but', function(){
var nav = $(this).attr('data-nav');
$(".article_sd").velocity("transition.flipXOut");
$('.'+nav+'').velocity("transition.flipXIn");
});
variable nav element is still animating when second velocity function is called. We don't want that to be so.
There is two at least two options you could try i think.
1) Stop earlier animation before starting new one. $('.'+nav+'').velocity('stop').velocity("transition.flipXIn");
2) Animate second animation AFTER first one using velocity/jquery style callback.
$(".article_sd").velocity("transition.flipXOut", function () {
$('.' + nav).velocity('transition.flipXIn');
});
Let me know if this was helpful.
I'm creating a one page website that acts as a form of book. when the "down" div is clicked, i want the current content div to fadeOut & for the next content div to be shown. I've got it working.. but to a certain extent. Also, I need to use a if statement with length to determine when the user has reached the last div, so that i can remove the down div.
Right now, it isn't working exactly how I want it too. Also I think I need to use next, length etc. Here's a quick example of what I'm working with
HTML
<div class="content>
<h1> page one </h1>
</div>
<div class="content hidden-content>
<h1> page two </h1>
<div>
<div class="content hidden-content>
<h1> last page </h1>
</div>
<div class="hover-wrap>
<div class="down"></div>
</div>
jQuery
$(".hover-wrap").hover(function(){
if (!$(".down").hasClass('animated')) {
$(".down").dequeue().stop().animate({ bottom: "0px" }, 500);
}
}, function() {
$(".down").addClass('animated').animate({ bottom: "-75px" }, 500, "linear", function() {
$(".down").removeClass('animated').dequeue();
});
});
var btnNode = $(".down"),
btnWrap = $(".hover-wrap"),
contentNode = $(".content"),
nextContentNode = contentNode.next(".content"),
endNode = $(".credit"),
fadeInSpeed = 500;
btnNode.on("click", function(){
contentNode.hide();
if (nextContentNode.length){
nextContentNode.fadeIn(fadeInSpeed);
} else {
contentNode.hide();
endNode.fadeIn();
btnWrap.fadeOut();
}
});
Heres a codepen which makes things a little clearer! thanks!
http://codepen.io/Mctowlie/pen/qxdyE
Is it what you want : http://codepen.io/OxyDesign/pen/rykLI ?
JS
$(document).ready(function(){
var btnNode = $(".down"),
btnWrap = $(".hover-wrap"),
pages = $('[data-page]'),
pagesLgth = pages.length,
fadeInSpeed = 500;
btnWrap.hover(function() {
if (!btnNode.hasClass('animated')) {
btnNode.dequeue().stop().animate({
bottom: "0px"
}, 500);
}
}, function() {
btnNode.addClass('animated').animate({
bottom: "-75px"
}, 500, "linear", function() {
btnNode.removeClass('animated').dequeue();
});
});
btnNode.on("click", function(e) {
e.preventDefault();
var currentPage = pages.filter('.active');
currentPage.hide().removeClass('active');
if(currentPage.data('page') < pagesLgth){
currentPage.next('[data-page]').fadeIn(fadeInSpeed).addClass('active');
}else{
$('[data-page="1"]').fadeIn(fadeInSpeed).addClass('active');
}
});
});