Develop Reference

Moving the screen scroll position after page jumps to anchor point?

I have a menu on a single webpage whose links move the page to the section with the corresponding ID. However, there is a sticky header that is covering the top part of each section, so I want to scroll slightly to compensate.
I'm trying to determine a way to scroll the page by 50px after the page moves to a section. I tried doing a .click() event listener on each link, but it appears that the page is moved after the callback is issued, negating my attempt to scroll.
My code looks like the following:
HTML:
<ul id="menu">
<li id="menu-item-1">1</li>
<li id="menu-item-2">2</li>
<li id="menu-item-3">3</li>
<li id="menu-item-4">4</li>
</ul>
JS: (the two interior lines work in the console but not in the page code itself)
$('#menu-item-1 a').click(function(){
var y = $(window).scrollTop();
$(window).scrollTop(y-50);
});
Is there a way to listen for a link action to be completed, then run my scroll code?

did you try setting a timeout, it will have a flicker effect though (unnoticeable)
also you can change your click event to handle all the a tags within li item like this
$('li > a').click(function(){
setTimeout(function(){
var y = $(window).scrollTop();
$(window).scrollTop(y-50); }, 1);
});
here is a sample fiddle for you https://jsfiddle.net/fxabnk4o/16/

As you observed:
but it appears that the page is moved after the callback is issued, negating my attempt to scroll
This happens because your events attached to anchor tag will be executed before the anchor tags default behaviour.
You are using id so you can use it to scroll also via javascript.
Here is a sample which I have tried out:
http://plnkr.co/edit/FzHYaxMCeOMTvWurtNRe?p=preview
<ul id="menu">
<li id="menu-item-1">1</li>
<li id="menu-item-2">2</li>
<li id="menu-item-3">3</li>
<li id="menu-item-4">4</li>
</ul>
function handleClick(e, scrollElemId){
e.preventDefault();
window.scrollTo(0,document.getElementById(scrollElemId).offsetTop+50);
}

How do I prevent a hash tag link from scrolling the page?

This is driving me absolutely insane. I am building a very customized slider jQuery plugin for a project. One of my requirements is that users must be able to deep link into a specific slide. So naturally all of my slides have hash tags and the navigation links have corresponding hashtags. My problem is that the default functionality of the hash tag links are firing on top of my sliding animation triggered by javascript. That is, instead of sliding to slide 4 it jumps immediately to slide 4 and then animates to slide 8. This is despite using every trick I can think of to prevent the default functionality. Here is the snippet of code in question.
$(slider.nav).bind( 'click', function(event) {
event.preventDefault();
if( !$(this).hasClass('active') ) {
var target = slider.nav.index( $(this) );
slider.animate( target );
}
});
As you can see here I have used event.preventDefault(). I have also tried returning false. No luck whatsoever. Any ideas?

It's hard to say without seeing the HTML. But if it's the way I imagine it, you don't need to keep href="#" in a link if it's not going anywhere. You can use jQuery to just get the next slide, or get slide number 7 without relying on href="#" links.
Instead, you can do something like:
<ul id="slideshow">
<li id="slide_1">Slide 1</li>
<li id="slide_2">Slide 2</li>
<li id="slide_3">Slide 3</li>
</ul>
<a class="slide_nav" data-index="1">1</a>
<a class="slide_nav" data-index="2">2</a>
<a class="slide_nav" data-index="3">3</a>
<a class="slide_nav" data-index="4">4</a>
And in the JS, do something like:
$('.slide_nav').click(function() {
var slides = $('#slideshow li'); // get all slides
var target_id = $(this).data('id') - 1; // Get the current ID and then subtract 1 (index starts at 0)
slider.animate(slides[target_id]);
});
Anyway, that's more like a pseudo-example than anything else, and I'm not sure that would work as-is, but the code should hopefully point you in a direction that would avoid using href="#" and thus avoid the problem you're having now.
Good luck.

Oh jeeze. I'm really sorry. I've wasted everyone's time.
Apparently another developer who was working on the site had added some javascript elsewhere roughly to the effect of
if( window.location.hash ) {
window.location = window.location.hash;
}
No idea why they would add such a thing. Sorry!

jquery ui tab at both top and bottom

I would like to have a Jquery UI tab with top and button menu function, is it possible to do that ?
(the content are loaded via ajax ,what i mean is the top tab and bottom tab both at the same time.)
<script type="text/javascript" charset="utf-8">
$(function() {
$( "#tabs" ).tabs({
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
},
cookie: {
// store cookie for a day, without, it would be a session cookie
expires: 1
}
});
});
</script>
<div id="tabs">
<ul id="top">
<li>top 1</li>
<li>top 2</li>
</ul>
<ul id="bottom">
<li>bottom 1</li>
<li>bottom 2</li>
</ul>
</div>
Thank you in advance!

I am a bit confused about what you want to achieve, but if you are trying to make similiar layout as I am in jQuery UI tabs - how to change tab position ,then if you dont mind having the tabs layout of fixed height, then you can simply move the tabs by css as I did here http://jsfiddle.net/L6QjK/2/
If you DO mind the fixed height, my only idea so far is to create layout with one control panel, than add some <div> looking as control panel and move some tabs after initialization from the code by usinge something like this:
$("#yourFakeControlPanel").append($(".ui-tabs-nav").find("#yourTab"));
$(".ui-tabs-nav").find("#yourTab").remove();
This was working when all the tabs were static, but I have ran to some errors, when adding new tabs dynamicaly, so consider this as a hint not as an exact answer

I think i have finaly found your answer. Look to my post, I have written there how to make tabs on the top and bottom same time jQuery UI tabs - how to change tab position
and if zou find this helpful, mark this as an answer to lead others to the right sollution

navigation with javascript

so i am a begginer and i really need help
so i wrote this function down here;
the objective was to take as parameters an element name , a div tag selector and a php file address,
function navigation($nav,$container,$link)
{
$($nav).click(function(){
$($container).slideUp(500,function(e){
$(this).append("<span>");
$(this).load($link);
});
});
{
$($container).ajaxComplete(function(){
$(this).slideDown(500);
});
}
{
$($container).slideUp(500);
}
}
the usage is simple
navigation("#home",".content","home.php");
navigation("#about",".content","about.php");
navigation("#store",".content","right.php");
the html is just a few <div> one with class=".content" tag and <a> links called #home #about #store the pages in php are just plain html inside them;
now the problem is when i click the link it works but i can find how to make he active link unclickable after it becomes active
and i was about to do a sublist with the same function trying to load a little div under the navigation links that contain links but i cant find how to do
any one of pro's have any idea ???

I can help but it's going to be quite a rewrite.
Firstly, give all your navigation items a class. Inside the nav items (I don't know if they're div, li elements or whatever, put an <a> tag with the src set to the page you want the navigation to load. When done it might look something like below:
<ul id="navigation">
<li class="nav">
<a src="home.php">HOME</a>
</li>
<li class="nav">
<a src="about.php">ABOUT</a>
</li>
<li class="nav">
<a src="right.php">RIGHT</a>
</li>
</ul>
Then use jQuery's onload functionality to bind the click event onload, rather than calling your navigation function 3 times. You grab the src from the child <a> tag of the li clicked.
$(function()
{
$('.nav').click(function()
{
if($(this).hasClass('active'))
{
return false;
}
$(this).siblings('li').removeClass('active');
$(this).addClass('active');
$('.content').slideUp(500).load($(this).children('a').attr('src'),
null,
function(){$(this).slideDown(500);}
);
return false;
});
});
Note the return false; is important to prevent the default action of the link (i.e. sending the user to the other page).

There's several approaches to making a link unclickable. One would be to let the click-event unbind itself:
$('nav')click(function(){
//Your code goes here
$(this).unbind('click');
});
Another would be to manipulate its CSS to hide the element (set display to none).
As for the second part of your question, i don't really get what you want to do. If you want to have a popout under the link, that activates on hover, you can see here how that could be achieved by using an <ul> and its :hover event
http://jsfiddle.net/D3AP2/

Javascript / JQuery: refresh tab in parent

I have a (parent) window containing JQuery tabs:
<div id="tabs">
<ul class="tabHeader">
<li><a href="?ctrl=doSomething" title="#tabs-something">
Awesome function</a></li>
<li><a href="?ctrl=showSettings" title="#tabs-showSettings">
Settings</a></li>
</ul>
</div>
Within #tabs-showSettings, I require in certain cases a new window, which I open using the following code:
window.open('?control=showSetting&server='+server,
'serverSettings','width=400');
That works fine. But within this window, I require a function to submit the entered data (works correctly), refresh the div within the parent (fails) and close the child window (works). That's what I tried:
// #1: the following would refresh the div within the child ;(
parent.$('div#tabs-showSettings').load('?control=showSettings');
// #2: the following doesn't seem to have any effect
window.opener.$('div#tabs-showSettings').load('?control=showSettings');
Please tell me what I'm doing wrong. Many, many thanks!
Solution:
$("div#tabs-showSettings", window.opener.document).load(
"?control=showSettings", function(){
window.close();
});

Try parent as the context:
$("div#tables-showSettings", window.opener.document)
.load("?control=showSettings");
Update:
Some of the comments following suggested the need to have the window close after the updates are done - that should be handled in the callback:
$("div#tables-showSettings", window.opener.document)
.load("?control=showSettings", function() { window.close(); });