I do want to hide/show About-paragraph located in the header, just under navigation bar and I can not see what I am doing wrong.
So, When I click <li class="navAbout">About</li> from top navigation bar I do want to show my about content below it; pushing down the main page content.
Please, See My Coding so far:
http://jsfiddle.net/bbmWK/
It appears, than you have broken selector. Try this:
$('.aboutConteiner').slideDown(3200);
If youu need to close about pressing close button, use this:
$('.close').click(function() {
close();
});
function close() {
var sb = $('.aboutConteiner').slideUp(3200);
$('html, body').animate({
scrollTop: '-=' + sb.data('height')
}, 3000);
}
Here is example.
Related
I'm working on an angular5 app. In that app, I need to go down to the current page based on data. ScrollToTop is working fine, I want to go down to the current page. Is there any way like scrollTop in angular5.
You can scroll to the bottom of the page with this line:
window.scrollTo(0,document.body.scrollHeight);
If you want to scroll a specific html element, try this one:
window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);
See also this demo, it can help you.
You can make it using animate and scrollTop from jQuery as following:
HTML :
Contact
<!-- set the H2 deep down in the page -->
<h2 id="contact">Contact</h2>
jQuery :
$('a[href^="#"]').on('click', function(){
var the_id = $(this).attr("href");
if (the_id === '#') {
return;
}
$('html, body').animate({
scrollTop:$(the_id).offset().top
}, 'slow');
return false;
});
I'am using this free script
http://codyhouse.co/gem/css-faq-template/
http://codyhouse.co/demo/faq-template/index.html#payments
The demo has the same problem as my website, although it's even worse on my website.
If you use the menu, everything works fine. You have some space above the header.
But if you visit the direct link http://codyhouse.co/demo/faq-template/index.html#payments not from the menu
it looks like this
As you can see, there is no space above the header "payments".
It is even worse on my page. It starts at "Can I have.." and the header is hidden. Can not find where I can adjust this when I visit the page direct from the link without it effects how it looks when I visit the section from the menu.
When user clicks on a section
//select a faq section
faqsCategories.on('click', function(event){
event.preventDefault();
var selectedHref = $(this).attr('href'),
target= $(selectedHref);
if( $(window).width() < MqM) {
faqsContainer.scrollTop(0).addClass('slide-in').children('ul').removeClass('selected').end().children(selectedHref).addClass('selected');
closeFaqsContainer.addClass('move-left');
$('body').addClass('overlay');
} else {
$('body,html').animate({ 'scrollTop': target.offset().top - 69}, 200);
}
});
Javascript code: http://codyhouse.co/demo/faq-template/js/main.js
Style: http://codyhouse.co/demo/faq-template/css/style.css
Just a quick hack, use
if(window.location.hash) {
// if url contain '#'
// scroll down a few pixle
}
EDIT:
it's hard to demenstrated this in jsfiddle, since it won't let me play with the # hash.
var url = 'http://example.com/test.html#hash';
//you can get by using window.location.href
var hash = url.split('#')[1];
// this get the 1st hash variable
if(hash) {
// if hash exist
$('html, body').animate({
scrollTop: "5000px"
}, 0);
// scroll down a little bit
}
It's seems there's a couple of problems here. For me it looks like everything happens when a scrolling event fire.
Try this:
$(document).ready(function(){
$(window).scroll();
})
Im using jQuery on my page to jump / scroll to IDs.
This works from other pages with anchors like
Jump & Scroll to ID on other page
and on the same page only with anchors like
Jump / Scroll to ID on the same page
Thats not the best solution because I have to change my nav menue but it works (I load another menue with other tags on the page).
Now im looking for a way to add an offset of -230px to the scroll / jump script, beause I have a fixed header on my page.
I think its simple but unfortunately im not a jQuery pro. How can I do this? Please Help me to add the -230 Offset to this function :)
The jQuery Code:
(function($){
var jump=function(e)
{
if (e){
e.preventDefault();
var target = $(this).attr("href");
}else{
var target = location.hash;
}
$('html,body').animate(
{
scrollTop: $(target).offset().top
},1000,function()
{
location.hash = target;
});
}
$('html, body').hide()
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
if (location.hash){
setTimeout(function(){
$('html, body').scrollTop(0).show()
jump()
}, 0);
}else{
$('html, body').show()
}
});
})(jQuery)
The responsible for saying how much your page will scroll down is scrollTop: $(target).offset().top, so, if you want to offset -230px just subtract 230 from $(target).offset().top.
But, if you do this in your current code it will not work, because you are changing the hash using location.hash = target;. When you do this, your browser will locate the hash and jump to it (without animating, just jumping).
Observe this demo: http://jsfiddle.net/pcyn2fvk/
If you click in the anchor, the page will scroll down to the content and after the scroll it will jump (this is caused by location.hash = target;).
Here is the demo without using location.hash = target;: http://jsfiddle.net/pcyn2fvk/1/
I assume you will need to change the hash, so, you can try a different approach, like this one explained by Lea Verou (http://lea.verou.me/2011/05/change-url-hash-without-page-jump/) that uses the History API instead of location.hash.
There are some other approaches, for example, you can remove the id of your target section (the one you clicked to scroll to) when you click to the anchor, then, when you change the location using location.hash, the browser will not find the clicked id, and will not jump to it, then, after that, you can reassign the id to your section.
Hope it helps!
I found another approach with anchor hashtags. This allows me to load a different page and scroll to my id with an offset.
In IE the scroll works well on all pages but all other browsers don't scroll on the smae page. If I click my link on the page wehre I want to scroll they jump to the hastags and dont use my jQuery scroll function. If I click the same link from an other URL the scroll works.
(other approach, only working from Link on Page A to Page B)
$(document).ready(function() {
$('html, body').hide();
if (window.location.hash) {
setTimeout(function() {
$('html, body').scrollTop(0).show();
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top -230
}, 1000)
}, 0);
}
else {
$('html, body').show();
}
});
I'm updating my website to something like this: axelboberg.se/en/beta_web And in the contact slide down I also want an about me div. ( When I click on About me the "slide down div" will slide down and show the about me section. And when I click on contact the contact section will be showed...) How can I make this? I'm a beginner when it comes to coding and hopefully this can be solved with a simple line of code...
--Update--
Thanks but I mean inside of the div that enters from the top, and only show about or contact at the time... Like minimalmokey did... http://minimalmonkey.com
I want the two parallel divs inside of the "slidenav" div.
It's too much code to post, see the source code of the website instead..
When I click on About me the "slide down div" will slide down and show the about me section. And when I click on contact the contact section will be showed...) How can I make this, and I'm a beginner when it comes to coding and hopefully this can be solved with a simple line of code...
Actually, this can be done with a simple line of code!
Change your "About me" link to this:
About Me
And, create a div like this:
<div id="AboutMe">This is about me!</div>
When you click the link, your browser will scroll to the AboutMe div.
JsFiddle: http://jsfiddle.net/NmrbP/11/
I think you are refering to a smooth scrolling effect. Use jQuery, here is my example code
DEMO http://jsfiddle.net/kevinPHPkevin/NmrbP/13/
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
Edited
You can hide and show using jQuery
DEMO http://jsfiddle.net/kevinPHPkevin/raS55/
$('.About').click(function(){
$('#About').show();
$('#Contact').hide();
})
$('.Contact').click(function(){
$('#Contact').show();
$('#About').hide();
})
I am kind of really stuck with this problem. Any help will great.
I am clicking on a link which expand the content and when i am cliking on a hide button, instead of taking me to the Expand link, it takes me to the bottom.I have already tried such options like onclick="fun() return false" and href=javascrpit:void(0), but not could help.
PLease refer http://jsfiddle.net/BdsyJ/ this link and click on "How do I maximize battery life" and at the bottom you will get a hide button which should take the control back to the Click it rather than placing the page at the bottom.
Thank you guys.
I changed your ReverseDisplay() method to this and it works nicely:
function ReverseDisplay(d) {
$("#" + d).toggle();
$('html, body').animate({
scrollTop: $("#" + d).prev().offset().top
}, 100);
}
here's a working example:
http://jsfiddle.net/hunter/BdsyJ/5/
In case you were wondering; YES your HTML is invalid. <li> elements should not have <div> siblings.
You're at the bottom of the page because you have hidden so much content. Two things I would update in your code:
cache the element look up so you only do it once and and
scroll the page to the top after you close it using scrollTo(0,0) or
something more complex if you need to scroll back to the exact
element you toggled.
Code:
function ReverseDisplay(d) {
var el = document.getElementById(d);
el.style.display = (el.style.display == "none")?"block":"none";
}