Dual divs on the same place - javascript

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();
})

Related

Scroll to Anchor jumps back to start

Im a JS-beginner so i took this Code out of the Internet and i have some Problems with it. firstly, It always jump back to beginning of div if it scrolls up. Secondly if the browserwindow is smaller than the main wrapper, the content div jumps to the left and hide the Menu. Better to see it:
http://clan.morphium-gw2.de/nina/
Sorry for my bad english. Thanks
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('#container').animate({
'scrollTop': $target.offset().top
}, 2000, 'swing', function () {
window.location.hash = target;
});
});
});
could you try to debug and see the error it show,
print the value of target variable,and try to make a console.log(target)
let me know ;)
i found a syntax error into your script
change this :
<body onLoad="BilderVorladen('images/a1.jpg','images/a2.jpg','images/a3.jpg',,'images/a4.jpg');">
for this :
<body onLoad="BilderVorladen('images/a1.jpg','images/a2.jpg','images/a3.jpg','images/a4.jpg');">

JQuery detect if an element with particular id is visible after page scrolling

I want to create the navigation as it is shown on page http://kiskolabs.com/
I've already created sticky menu however the problem begins with marking active element in menu.
The question is:
How can I detect if page is scrolled to particular id?
Let's say I have some headers like.
<h1 id="whatisit">What is it</h1>
<h1 id="desc">Description</h1>
<h1 id="faq">FAQ</h1>
and menu
<nav>
What is it
Description
FAQ
</nav>
I want highlight menu (add class or whatever) when page scrolls to this element.
I've found already how to scroll element to particular ID in this thread but I don't know how to detect on what id the is now. The size of page is dynamic and may change during content. So absolute solution what I thought of is bad.
What I got so far for scrolling:
$("nav a").click(function (){
$("html, body").animate({ scrollTop: $($(this).attr('href')).offset().top }, 1000);
});
I've also found this solution but maybe is there better way to achieve it?
Edit
This question is not duplicate of the question suggested by moderator. Moreover, that question does not have the accepted answer. My problem is a bit more advanced.
You could use animate callback function:
$("nav a").click(function () {
$("html, body").animate({
scrollTop: $(this.href).offset().top
}, 1000, function () {
$(this).addclass('scrolled').siblings('h1').removeClass('scrolled');
});
});
During a lot of trying and finding solutions in Internet I've solved my problem.
I've used waypoints plugin which appeared very easy to use. The plugin can be downloaded here.
The html code of menu:
<nav>
....
....
<a href="#whydata" class="scrollable" >....</a>
...
</nav>
and html code of headers where page is to be scrolled:
<h2 class="scrollable" id="whatisit">...</h2>
<h2 class="scrollable" id="spec">...</h2>
Jquery code to make page scroll on particular element with #id the same as a href attribute.
$("nav a.scrollable").click(function (){
var elementClickedHref = $(this).attr('href');
$('html, body').animate({
scrollTop: $(elementClickedHref).offset().top-100
}, 2000);
return false;
});
To change color of element which is currently active after scrolling I've used waypoint plugin. The code below finds h2 which is scrollable and get it's id. Then finds which links that are scrollable too has href same as id of a element and adds active class to this id and remove active class from inactive elements.
$('h2.scrollable').waypoint(function() {
var idToCheck = '#' + $(this).attr('id');
$('a.scrollable').removeClass('active');
$('a.scrollable[href="'+idToCheck+'"]').addClass('active');
}, {
offset: '100%'
});
It works perfectly as I wanted. I hope this solution will help someone who will face such problem.

Keep clicked link in viewport when calling jQuery's slideUp function

I have the following html structure repeated multiple times on a page:
<div class="item">
<div class="header">
...
Close All Expanded
</div>
<div class="expanded">
...
</div>
</div>
And some jQuery to close all the divs with class expanded when the link is clicked:
$('.closeExpanded').click(function(e){
e.preventDefault();
$('.expanded').slideUp('slow');
});
However I want to ensure that the link you've just clicked remains in view and moves as little as possible. Currently clicking on a link halfway down the page causes the link to move up out of the viewport as divs above it are closed.
Is there a nice graceful way I can keep the link that's been clicked in the viewport?
Update:
I've tried the answers suggested so far but so far none completely work (e.g. clicking link number 30 in each of these leads to link number 30 ending up outside of the viewport)
mrtsherman's solution: http://jsfiddle.net/Qan5p/38/
Mohsen's solution: http://jsfiddle.net/Qan5p/39/
roXon's solution: http://jsfiddle.net/Qan5p/40/
You will need to modify the scrollTop property of the page to keep things in place. Fortunately, as elements are shrunk they will be triggering scroll events you can hook into.
//untested, but should look something like this
var linkPosition = null;
$('.closeExpanded').click(function(e){
e.preventDefault();
linkPosition = $(this).offset().top - $(document).scrollTop();
//in callback to slideUp clear linkPosition so that we know to stop tracking scroll events
$('.expanded').slideUp('slow', function() {
linkPosition = null;
});
});
$(document).scroll( function(){
//check to see if we should be keeping link on screen
if (linkPosition != null) {
//keep the link in position
//I'm not so sure about this bit of the code, but I think you get the idea. All you have to do
//is properly calculate the new offset to keep the link looking like it is in the same position
var newPos = $(document).scrollTop() + linkPosition;
$(document).scrollTop(newPos);
}
});
$('.closeExpanded').click(function(e){
e.preventDefault();
$('.expanded').css({
'position' : 'absolute', // make it position absolute to prevent moving
'left' : $(this).offset().left,
'top' : $(this).offset().top
}).slideUp('slow', function(){
$('.expanded').css('position', 'static');
});
});
Fiddle: http://jsfiddle.net/mohsen/Qan5p/10/
WORKING DEMO
The easiest way:
Wrap contents into dynamically generated divs.
First animate the contents,
Than animate the wrapper elements
$('.expanded').wrapInner('<div class="wrapper" />');
$('.expanded').each(function() {
$(this).height($(this).children('.wrapper').height());
});
$('.closeExpanded').click(function(e) {
e.preventDefault();
$('.wrapper').animate({height: '0px'}, 800, function() {
$('.expanded').slideUp(800);
});
});

Clicking on anchor takes me to the bottom instead of restoring the previous position

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";
}

Jquery Accordion Is not working right

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.

Categories