Im creating a background animation and i'm having issue when for some reason there is a link anchor in the site content. The animation still works but it cuts the site header section and it wont allow you to scroll back to the top of the site.
Not sure I explained this properly but it is much easier to see it working here:
Example of the animation working ok on the index page
Example of the animation causing the header to be cut off
How can i fix this behavior? (I have absolutely no idea)
EDIT. FIXED IT BY ADDING position FIXED. Thx all.
Ok I found it is due to container-fluid class applied to the div having animation-container id.
please replace following statement :
<div id="animation-container" class="container-fluid">
by
<div id="animation-container" class="">
In your viewtopic.php page.
Related
I'm having difficulty getting a navbar and a slider to work together. The problem is when it is in mobile view. If you click on the menu icon the menu item slide in from the side but the top ones are appearing stacked underneath the slideshow.
Here is a sample of it posted on my domain test page. http://ecfleming.com/test/index.html
I have tried using a z-index in the CSS as well as few other things. I suspect it might be something in the JavaScript, but I can not figure out what. Does anyone have any ideas of what I can try to fix this?
For a quick fix, you can add .cycle-slideshow { z-index:-1 }
Try not to hard code the height value of div id="header"
Fix the mobile view by removing the height 185px.
I've added the AOS on scroll javascript to my website. I know that the script is working properly but for some reason the animation that I've added to the logo with the purple background (below the yoga photo) is animating before it's visible in the viewport. I assume this might have something to do with the fact that the height of the top portion of the page is created dynamically based on the viewport, but I'm not totally sure what the issue is.
Here's a link to the website: http://awaken1.thecustompixel.com/
If you scroll down to the bottom of the page you can see the script is working properly with the three-column section. Any ideas on how to fix this? Thanks!
I see that you removed AOS animation from this logo, if you could add it once again I could check why it's not working. But I think that setting data-aos-offset="0" on this element might resolve your problem.
I am having a very odd issue and also finding it difficult to implement smooth scrolling on my single page website.
You can view my site HERE
Firstly, Is the strange anchor issue, when I click the link in the hamburger menu, the link appears in my address bar (which I would like to get rid of at some point) but when I scroll down the page it just keep being stuck on that div only I cannot scroll the page freely.
Secondly, I can't seem to implement any smooth scrolling techniques which I find on the net so far and I would really appreciate a little hint as to what I am doing wrong. I have tried to put name="" and rel="" into the <li> and <a> elements (adjusting the smooth scroll code accordingly but still nothing.
Please find reference HERE
I am a bit of a newbie with javascript so maybe i am not doing something simple here.
Thanks in advance!
Terry
After speaking to some other students I found that the issues is due to the html and body CSS. I needed them to both have height auto and min-hight 100%.
Although this still does resolve the issue with the revealOnScroll. I need to tweak this code I think as it isn't able to then calculate the offset().top
Im trying to recreate the script that rdio (http://rdio.com) has created for their player footer. when you click on footer, a panel slides up nicely and to reveal more content. another example is by teehan lax; the top dropdown http://www.teehanlax.com/ but theirs doesn't support firefox properly.
I came across this snippet, http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm
But its not clean as rdio's or teehan.
any thoughts on library they might using?
We're just using basic CSS transitions, and adding and removing classes. The z-index of the bottom bar is set such that it appears in front of everything else, and the class changes control how the content is changed.
You can accomplish the same height changes with jQuery quite easily, as described here: https://stackoverflow.com/a/4965097/1309238
I'm using a jQuery plugin called jCarousel Lite to create a vertical scrolling Twitter ticker. Everything works fine, except for the fact that some tweets aren't shown completely. They're cut off before the last line of text. I can't seem to figure out what is causing the problem and it seems to occur more or less randomly too.
The page at http://www.reekx.nl/ shows the Twitter ticker in action (bottom right, titled 'Reekx op Twitter').
Is anybody able to tell me what's going wrong here and how I can fix it?
The Carousel sets a height for the elements, and at the same time you have overflow:hidden in your CSS.
This bascily means you are telling the DIV that it should be 104px heigh, and all overflowing content should be hidden.
Ill try to find if you can disable a fixed height in carousel mean while :)
Could you try playing with the "fit" option?
You can try playing with the options, which can be found here: http://jquery.malsup.com/cycle/options.html
But the 2 which is relevant should be:
$('#stwitterThing').cycle({
fit: 1,
height: auto
});