Good afternoon guys,
I have the following problem I have a navigation tab on the same screen that reference the four section in html. These sections gain display block or display none according to the active tab, and each tab has a different content that is already loaded in the background via ajax, until the ai everything works the problem is when I navigate between tabs have boxes with different sizes of Height, apparently the cycle of digestion of Angularjs takes to recognize this resizing and the scroll of the page is locked until it detects the new height, somebody has any idea of how I can proceed to solve this, I am using IONIC FRAMEWORK.
Below is an image that shows how the content boxes are, remembering that only one is visible at a time, and when I looked at the page I noticed that the locking occurs in the style =" transform: translate3d (0px, 0px, 0px) Scale (1);
After a few attempts I left this bug aside and went to other functions and when making a correction in the directive that controls the tabs I noticed that I could recalculate the scroll size as soon as a new tab was loaded added the following line click function:
$ionicScrollDelegate.resize(); //Fix box resize bug when trasition between tabs
The function go be so:
$timeout(function () {
childElem = angular.element(document.querySelector(".child")).prop('children');
if(childElem.length){
for (var i = 0; i < childElem.length; i++) {
angular.element(childElem[i]).on('click', function (e) {
var tab = angular.element(e.path ? e.path[0] : e.target).prop('id').replace(/tab/g, "");
$rootScope.$emit('aba_ativa_feed', tab); // informa a view feed qual a aba ativa
for (var i = 0; i < tabs.length; i++) {
if(i == tab - 1) {
ativos[i] = true;
} else {
ativos[i] = false;
angular.element(document.querySelector("#tab-nav-block-id-".concat(i+1))).addClass('ng-hide');
}
}
angular.element(document.querySelector("#tab-nav-block-id-".concat(tab))).removeClass('ng-hide');
$ionicScrollDelegate.scrollTo(0, blocksScrollPosition[tab - 1], true);
scope.active = ativos;
scope.$apply();
$ionicScrollDelegate.resize(); //Fix box resize bug when trasition between tabs
})
}
}
}, 200)
for more details look here
Related
Do you know when you scroll down a website and the content appears gradually from top, bottom, left or right? The problem I have is when you enter the website, let's say you want to animate a big title in the header and you still didn't scroll, so this title won't appear but I want it to appear without having to wait the user to scroll.
The content I have for the scrolling funcion is this one:
window.onscroll = function(){
let elements = $('.scroll-content');
let screenSize = window.innerHeight;
for(var i = 0; i < elements.length; i++) {
var element = elements[i];
if(element.getBoundingClientRect().top < screenSize) {
element.classList.add('visible');
}
}
}
The rest is done with styles on css. Of course this only works for scrolling so how can I achieve that?
I've made a game website that has horizontal and vertical scrolling but I want the website to stop or disable scrolling down the page at the "second arrows" but be able to scroll up the page.
basically I've already tried "overflow-y:hidden" but i still want to beable to scroll back up the page
https://codepen.io/54x1/full/qBBdXGP
check out my codepen to see my design
code for where i want it:
var BotOfWin1 = $(window).scrollTop() + $(window).outerHeight();
var BotOfObj1 = $('.main-rules').position().top + $('.main-rules').outerHeight();
if (BotOfWin1 > BotOfObj1)
{
$('.game-section').css({"display": "block"});
} else {
$('.game-section').css({"display": "none"});
}
I don't know your motivation for disabling scrolling below the second arrows (can the user navigate there other than scolling?). So I'll just go with the assumtion, that you simply want to prevent the user from ever getting there.
Just use display: none in CSS to not display the content.
What I would do is:
Do not display the second page element on pageload
.content-second {
display: none;
}
On scrolling, check if the page has been scrolled to the very right. If so: display second page element.
var win = $(window);
var contentWidth = $('.content-first').width();
win.on('scroll', function () {
var scrolledRight = win.scrollLeft() + win.width() >= contentWidth;
if (scrolledRight) {
$('.content-second').addClass('show');
}
});
See this pen for a simplified example.
I'm fairly new to jQuery and I'm currently working on a slideshow.
The slideshow consists of a number of headers that plays automatically and shows an image that belongs to a specific header. The moment you hover over a title as a user, the slideshow stops playing automaticly and you have the control over the view.
The problem I encounter is that sometimes after mouseout(); the slideshow shows the wrong image. I would like the slideshow to continue from where it left off.
I have tried several things including this example: Stop loop on hover
Which is basically what I am looking for. Unfortunately I'm not yet skilled enough to apply this myself in jQuery or understand this particular code. I know I have to keep track of the loop in some way...
All help and tips are welcome, thanks!
var autoPlay = 0;
$(function() {
myCarousel();
$(".indexTitle").mouseenter(pauseCarousel);
$(".indexTitle").mouseout(playCarousel);
});
function myCarousel() {
var x = $(".indexTitle");
var n = $(".indexImage");
for (i = 0; i < x.length; i++) {
$(x[i]).removeClass("redStroke");
$(n[i]).removeClass("showIndexImage");
}
autoPlay++;
if (autoPlay > x.length && n.length) {
autoPlay = 1
}
$(x[autoPlay - 1]).addClass("redStroke");
$(n[autoPlay - 1]).addClass("showIndexImage");
myTimeOut = setTimeout(myCarousel, 2000); // Change image every 2.5 seconds
}
function pauseCarousel() {
console.log("Enter = Pause");
clearTimeout(myTimeOut);
$(".indexTitle").removeClass("redStroke");
$(".indexTitle").removeClass("showIndexImage");
};
function playCarousel() {
console.log("Exit = Play");
setTimeout(myTimeOut);
myCarousel();
};
My Fiddle: https://jsfiddle.net/L_03k/830adhfp/35/
I have looked around to see if this has been covered, but no dice.
I'm building a website using HTML5, CSS3 (+ animations), bootstrap, Vanilla JS and jQuery. The behavior I'm looking to induce for the site is one where a user visits a landing page and the scroll bar is situated at the top. Then, upon scrolling down past a certain point, a completely different screen takes over.
Here's the (maybe) tricky part:
I want for a visitor to be able to scroll all the way up on this 2nd screen as high as the scrollbar can go. Only once the scroll bar is at the top and they try try to scroll up past the top of the current window, that the original, first screen comes back in to play (while still persisting the progress they made on the 2nd screen if they decide to scroll back down).
Negative scrollTop/browser/window heights to trigger an event in which a user can navigate between pages using a maxed out up-top scrollbar? (& should I use a framework?) Much appreciated!
You could duplicate elements while scrolling,
I made a plunker to give you an idea
jQDocument.on("scroll", () => {
if(jQDocument.scrollTop() < 200) {
//Duplicate elements on top while scrolling up
let topScreen = detectTopScreen()
let indexTopScreen = getIndex(topScreen)
let screenIndexToDuplicate
if(indexTopScreen > 0) {
screenIndexToDuplicate = indexTopScreen - 1
} else {
screenIndexToDuplicate = maxIndex
}
let screenToPrepend = originalLoopDiv.children().eq(screenIndexToDuplicate).clone()
loopDiv.prepend(screenToPrepend)
if(loopDiv.children().length > 6) {
loopDiv.children().eq(loopDiv.children().length - 1).remove()
}
}
if(jQDocument.scrollTop() + jQWindow.outerHeight() > jQBody.outerHeight() - 200) {
//Duplicate elements on bottom while scrolling down
let bottomScreen = detectBottomScreen()
let indexBottomScreen = getIndex(bottomScreen)
let screenIndexToDuplicate
if(indexBottomScreen < maxIndex) {
screenIndexToDuplicate = indexBottomScreen + 1
} else {
screenIndexToDuplicate = 0
}
let screenToAppend = originalLoopDiv.children().eq(screenIndexToDuplicate).clone()
loopDiv.append(screenToAppend)
if(loopDiv.children().length > 6) {
loopDiv.children().eq(0).remove()
}
}
})
I have 2 divs on my webpage. first div is "#pattern" (red one), and second on is "#projets".(blue one)
when use scrolls for the first time, the window scrolls automaticaly to the the second div "#projets". I'm using jquery scroll-To plugin.
it works nice, even if when the users scroll with a large amount of scroll there could be on offset from the "#projets" div... If someone has an idea to correct this would be nice, but that's not my main trouble...
Now i'm trying to scroll back to the top of the page ("#pattern" div) as soon as "#pattern" div reappears when scrolling, the red one. so basically it should be as soon as the offset from the top of my screen of my div "#projets" is supperior to 1.
I've tried so many solutions without results, using flags, multiple conditions... it can be the same kind of thing as on this page, but user should be abble to scroll freely inside the page, not scrolling from hash to hash :
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
here is my html :
<div id="pattern"></div>
<div id="projets"></div>
my css :
#pattern {
height:300px;
width: 100%;
background-color:red
}
#projets {
height:800px;
width: 100%;
background-color:blue
}
and my jquery :
var flag=0 ;
$(window).on('scroll',function(){
var top_projets_position = $("#projets").offset().top - $(window).scrollTop();
if((flag==0) && $(window).scrollTop()>1){
$(window).scrollTo('#projets', 500);
flag=1;
}
if($(window).scrollTop()==0){
flag=0;
}
});
here is jsfiddle :
http://jsfiddle.net/jdf9q0sv/
hope someone can help me with this, I can't figure out what I'm doing wrong, maybe a wrong method ! thanks
It looks like you need to track 3 things:
The scroll direction occurs.
The area you are currently viewing.
If scroll animation is currently happening (we need to wait until it's done, or problems will occur).
http://jsfiddle.net/vx69t5Lt/
var prev_scroll = 0; // <-- to determine direction of scrolling
var current_view ="#pattern"; // <-- to determine what element we are viewing
var allowed = true; // <-- to prevent scrolling confusion during animation
var top_projets_position = $("#projets").offset().top + 1;
$(window).on('scroll',function(){
var current_scroll = $(window).scrollTop();
if(current_scroll < top_projets_position && current_view=="#projets" && current_scroll < prev_scroll){
scrollToTarget("#pattern");
}
if($(window).height() + current_scroll > top_projets_position && current_view=="#pattern" && current_scroll > prev_scroll){
scrollToTarget("#projets");
}
prev_scroll = current_scroll;
});
function scrollToTarget(selector){
if(allowed){
allowed = false;
$(window).scrollTo(selector, {
'duration':500,
'onAfter': function(){ allowed = true; current_view = selector;}
});
}
}
This is just a quick solution based on your original code. A better solution would be to do something more Object Oriented (OOP) and track values in an object. Perhaps take an array of elements on object creation, grab all the boundaries and use the boundaries in your scroll handler to determine when to scroll to the next div.