We Keep Coding

scroll to function show #id in url javascript

I am using jquery.scrollTo.js to scroll to blocks in one page onclick.
Html Code:
<ul>
<li>About</li>
<li>Products</li>
</ul>
<div id="about" class="item">
<a name="about"></a>
About content
</div>
<div id="product" class="item">
<a name="product"></a>
Products content
</div>
Internal Script:
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
});
</script>
Please refer http://jsfiddle.net/8up4A/ to just view the code in jquery.scrollTo.js . I am trying to show the id name along with the url like http://www.test.com/index.html#about.
If i removed return false in internal script the id displays in url but the scrolling not working correctly. How to achieve this without affecting the scrolling effect. Any Help? Thanks.

$(document).ready(function() {
$('a.panel').click(function() {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
var currentString = $(this).attr('href');
var newString = currentString.substr(1);
$("html,body").animate({
scrollTop: $('a[name="'+newString+'"]').offset().top
}, 2000);
});
});
And you can remove the scrollTo.js plugin, you don't need it.

JS are crashing after jquery load function

I tried to load my content with the jQuery load function into index.html's content area. I succeeded with that, but my Javascript isn't working. I want to call it on each click of my menu's elements. Is it possible?
click here to see the page
menu:
<div id="nav" class="section group">
<div id="menu" class="col span_9_of_12">
<ul id="navmenu">
<li>Hakkımda</li>
<li>Portfolyo</li>
<li>İletişim</li>
<li>Fotoğraflar</li>
</ul>
</div>
load function:
$(document).ready(function() {
$('#content').load($('#navmenu li a:last').attr('href'));
var hash = window.location.hash.substr(1);
var href = $('#navmenu li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#navmenu li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('slow',loadContent);
$('#load').remove();
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('slow',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('slow');
}
return false;
});
});

UPDATE: My original answer no longer applies. OP changed the page implementation and question completely since I answered.
But as I stated in a comment below, The easytabs documentation states that the tab element and the panel divs must all be inside the container div.
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'>Hakkımda</li>
<li class='tab'>Portfolyo</li>
<li class='tab'>Fotoğraflar</li>
<li class='tab'>İletişim</li>
</ul>
<div id="hakkimda">
...
</div>
<div id="portfolyo">
...
</div>
<div id="iletisim">
...
</div>
<div id="fotograflar">
...
</div>
</div>

Rather than adding script inline, do this
$( "#jqc_content" ).load( "content/aboutme.html", function() {
carouselfn(); // call your carousel invocation function here
});
From documentation
Callback Function
If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed

I fixed it finally. It's all about the html structure.

jQuery scroll not positioning well

I´m trying to make a scrolling effect on the page, the scroll makes a smooth effect but it miss the real position of the items, and start to bug after a few position clicks.
For example if you click on the last item it goes there, but after that if you click on the third the scroll goes to top (?). so I think i´m missing something here. anybody knows how to correct the problem?
this is my markup:
<div id="sidebar" class="clearfix">
<ul>
<li>
Muscles - Girls Crazy Go!
</li>
<li>
Tokyo Youth sports
</li>
<li>
Harajuku Interviews
</li>
<li>
Tokyo Youth
</li>
</ul>
</div>
Div to scroll example:
<div class="cinematography_box clearfix" id="two">
<div class="cinematography_item">
<img src="img/cinematography.jpg" alt="cinematography" width="700" height="397">
</div>
<div class="cinematography_info">
</div>
</div>
and my script:
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('#main').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
I´m trying to do this without a plugin so if there is a solution with this code it would be better!

What you want to use here is .position() , not .offset() :
$(".scroll").click(function(event){
event.preventDefault();
var scroll_to = $('#' + $(this).data('scroll-to')).position().top;
$('#main').animate({ scrollTop:scroll_to }, 500);
});
You can quick-try it in the Google Chrome Console by typing :
$(".scroll").off("click");
$(".scroll").click(function(event){
event.preventDefault();
var scroll_to = $('#' + $(this).data('scroll-to')).position().top;
$('#main').animate({ scrollTop:scroll_to }, 500);
});
Then hit enter. It'll kill your listener and attach this new one.
Notice it's a little bit off because of your 12px margin-top on #gallery.cinematography. Either drop it or add 12 to scroll_to
JQuery's Doc is pretty self-explanatory, but feel free to ask if there's something you don't understand.

The top offset you're using is from the element #main and you want it from the .scroll element with the same id as the hash. Change the code in:
HTML:
<ul>
<li>
Muscles - Girls Crazy Go!
</li>
<li>
Tokyo Youth sports
</li>
...
jQuery:
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
var scroll_to = $('#' + $(this).data('scroll-to')).offset().top;
$('#main').animate({ scrollTop:scroll_to }, 500);
});
});

Try it
$(document).ready(function() {
$(".scroll").click(function(event){
event.preventDefault();
var obj = $.browser.webkit ? $('body') : $('html');
obj.animate({ scrollTop: $('#sidebar').offset().top }, 750, function (){
//callback function if any
});
});
});

Trigger div on pageload

I have been trying to set the scroll of my page to a certain div. Kindly let me know how can i do that. Following is my code in which each each option in li moves to certain div . I tried this $("#header3").click(); in doucument.ready function but it didnot work.
Kindly help!
<ul id="navigation">
<LI><A class="home selected-lice"href="#header">Home</A></LI>
<LI>Partners</LI>
<LI><A class="about" href="#header5">About Us</A></LI>
<LI><A class="contact" href="#header6">Contact Us</A></LI>
</ul><!-- end of #navigation -->

Alternatively you can use this to scroll to specific element on page load with animation:
$(function(){
$('html, body').animate({ scrollTop: $("#header1").offset().top });
});

check this link:
http://css-tricks.com/snippets/jquery/smooth-scrolling/
or try to overwrite the usual anchor behavior with some scrolling. Like this:
$(function(){
$('a[href^=#]').click(function(e){
var name = $(this).attr('href').substr(1);
var pos = $('a[name='+name+']').offset();
$('body').animate({ scrollTop: pos.top });
e.preventDefault();
});
});

Apply to function to multiple elements

HTML:
<div class="container-fluid">
<div class="sidebar">
<ul class="pills">
<li id="l1"><a id="link1">Lesson 1</a></li> <hr>
<li id="l2"><a href="#" >Lesson 2</a></li> <hr>
<li id="l3"><a href="#" >Lesson 3</a></li> <hr>
</ul>
<div class="span16" id="target">
</div>
Javascript:
$('#l1').click(function(){
$('#target').fadeOut('fast', function(){
$('#target').load("lesson/lesson1.html", function(){
$('#target').fadeIn('slow');
});
});
});
I have 5 links within my webpage, I was wondering if there was anyway to make this one piece of code instead of copy + pasting it multiple times.

$('a.AjaxLink').click(function(){
var url = this.href;
$('#target').fadeOut('fast')
.load(url, function(){ $(this).stop(true, false).fadeIn('slow'); });
});
return false;
});
This code handles the click event for all <a>s with a class of AjaxLink.
In the click handler, it grabs the href, fades out your #target, and performs the AJAX load.
When the AJAX load finishes, it stops the animation (in case the AJAX was faster than the fade), then fades it back in.
Finally, it tells the browser not to take the default action (navigating to the page) by returning false.

Use class instead of id. Select elements using class.
Also you can use .each() method

You could do this with a new jQuery method. Given this HTML:
<a class="hello" href="#">Hello</a>
<a class="goodbye" href="#">Goodbye</a>
<div id="target"></div>
You'd use this code:
jQuery.fn.switchTarget = function( target, href ) {
var $target = $(target);
this.bind( 'click', function(e) {
e.preventDefault();
$target.fadeOut('fast', function() {
$target.load( href, function() {
$target.fadeIn('slow');
});
});
});
return this;
};
$('.hello').switchTarget( '#target', 'hello.html' );
$('.goodbye').switchTarget( '#target', 'goodbye.html' );