Develop Reference

On new page, scrolling down to a specific div automatically

Quite simple,
I would like on click, to arrive to a specific section on a new page.
Usually www.mydomain.com/page1/#section should work, #section being the ID of the section.
However, the menu I'm using is breaking this. Si I'm trying to see if it's possible to do this by Jquery, using Hash. ( When url have this hash example www.myd0main.com/page/#contact - do this)
SO far I tried the following:
<script>
jQuery(document).ready(function() {
if (window.location.hash.split('-')[0] == '#contact') {
$('#contact').addClass('hashed');
}
});
</script>
Withotu any sucess.
Do you guys have any turnaround / idea to make this work ?
It will be lovely !
Thank you !

Perhaps
if (window.location.hash == '#contact') {
// Scroll to #contact
$(document).scrollTop($("#contact").offset().top);
}

Hiding Section/Slide Arrows on Pages - Fullpage.js

I'm working on a website using fullpage.js:
https://github.com/alvarotrigo/fullPage.js/
The first problem I had is that I need to hide the arrows once it falls into the last section and/or slide. ie. if you're on the far right slide, my hope is it will hide the right arrow. Top section, top arrow is hidden, etc.
I've tried quite a bit to make it work, I'm still learning javascript so forgive me if I'm way off, but I was hoping this was close:
function hideArrowUp() {
if(index == 1){
$('.arrowUp').hide();
}
else {
$('.arrowUp').show();
}
}
function hideArrowDown(anchorlink) {
if(index == 3){
$('.arrowDown').hide();
}
else {
$('.arrowDown').show();
}
}
And I was hope to prevent horizontal slides from repeating/rolling-over, not sure if that's an easy one.
Please and thanks!

Now You can to this with javascript options.
When u call the full page function on a div. Just set the option control arrow to false.
//call full page function with options.
$('#fullpage').fullpage({
anchors:['anchor-1','anchor-2'],
controlArrows: false,
});
Regards
Alex

Just use the plugin callbacks such as afterLoad or onLeave to remove the arrow by using javascript or by adding a class.
You can also use the class of type fp-viewing-xxxx added to your body element to apply one or another style.
Take a look at the demo page of fullpage.js. In that case you can inspect the DOM and see how the body gets the class fp-viewing-4thpage applied when reaching the last section. That's because it is using the anchor 4thpage as you can see in the URL (#4thpage).
Therefore you can do something like the following in your CSS stylesheet:
.fp-viewing-4thpage .myArrow{
display:none;
}
Remember the demo page and many others examples are available in the downloaded files.

jQuery show function flashing briefly

I am very new to web development and jQuery. I'm trying to add my first jQuery method to my code in Ruby on Rails. I have a css class
.list-group-item{
display: none;
}
and a JS function
$(document).ready(function(){
$(".list-group").click(function(){
$(".list-group-item").show();
});
});
I tested it with an alert, the alert appeared. When I try to run this, the list group briefly flashed then goes away immediately. I am sure it is a simple mistake. I have tried adding return false before the document function, no change. Thanks for acknowledging my noob question :)

Is .list-group-item a link? If so, it sounds like the page is reloading as you don't have return false. Need something like:
$(document).ready(function(){
$(".list-group").click(function(){
$(".list-group-item").show();
return false;
});
});
What this does is stop the link from doing anything else after it shows the links with list-group-item class.

You need to put the return false; after the show() function...assuming the list item is a link. return false; prevents the default behaviour of the selector. So if it's a link, it'll prevent the link from functioning - or being fired.
$(document).ready(function(){
$(".list-group").click(function(){
$(".list-group-item").show();
return false; // add this here
});
});

Hide/show a icon depending upon the location.search?

Let us say i have a page http://www.abc.com/xyz.html and i am going to access this page in two ways
simple as it is
I will append some stuff to the url e.g. http://www.abc.com/xyz.html?nohome by just putting the value ?nohome manually in the code.
Now i will add some javascript code something like this
$(document).ready(function () {
if (location.search=="?value=nohome") {
// wanna hide a button in this current page
}
else {
// just show the original page.
}
});
Any help will be appreciated.

As you are using jQuery to catch the DOM-ready event, I guess a jQuery solution to your problem would be fine, even though the question isn't tagged jQuery:
You can use .hide() to hide and element:
$(document).ready(function () {
if (location.search=="?value=nohome")
{
$("#idOfElementToHide").hide();
}
// Got rid of the else statement, since you didn't want to do anything on else
});

Prevent/stop auto anchor link from occurring

I need to prevent the automatic scroll-to behavior in the browser when using link.html#idX and <div id="idX"/>.
The problem I am trying to solve is where I'm trying to do a custom scroll-to functionality on page load by detecting the anchor in the url, but so far have not been able to prevent the automatic scrolling functionality (specifically in Firefox).
Any ideas? I have tried preventDefault() on the $(window).load() handler, which did not seem to work.
Let me reiterate this is for links that are not clicked within the page that scrolls; it is for links that scroll on page load. Think of clicking on a link from another website with an #anchor in the link. What prevents that autoscroll to the id?
Everyone understand I'm not looking for a workaround; I need to know if (and how) it's possible to prevent autoscrolling to #anchors on page load.
NOTE
This isn't really an answer to the question, just a simple race-condition-style kluge.
Use jQuery's scrollTo plugin to scroll back to the top of the page, then reanimate the scroll using something custom. If the browser/computer is quick enough, there's no "flash" on the page.
I feel dirty just suggesting this...
$(document).ready(function(){
// fix the url#id scrollto "effect" (that can't be
// aborted apparently in FF), by scrolling back
// to the top of the page.
$.scrollTo('body',0);
otherAnimateStuffHappensNow();
});
Credit goes to wombleton for pointing it out. Thanks!

This seems the only option I can see with ids:
$(document).ready(function() {
$.scrollTo('0px');
});
It doesn't automatically scroll to classes.
So if you identify your divs with unique classes you will lose a bit of speed with looking up elements but gain the behaviour you're after.
(Thanks, by the way, for pointing out the scroll-to-id feature! Never knew it existed.)
EDIT:

I know this is an old thread but i found something without the need to scroll. Run this first before any other scripts. It puts an anchor before the first element on the page that prevents the scroll because it is on top of the page.
function getAnchor(sUrl)
{
if( typeof sUrl == 'string' )
{
var i = sUrl.indexOf( '#' );
if( i >= 0 )
{ return sUrl.substr( i+1 ).replace(/ /g, ''); }
}
return '';
};
var s = getAnchor(window.location.href);
if( s.length > 0 )
{ $('<a name="'+s+'"/>').insertBefore($('body').first()); }
Cheers!
Erwin Haantjes

Scroll first to top (fast, no effects pls), and then call your scroll function. (I know its not so pretty)
or just use a prefix

This worked well for me:
1- put this on your css file
a[name] { position: absolute; top: 0px }
2- put this on your document.ready bind right before you start animating (if you're animating at all)
$("a[name]").css("position","relative");
Might need tweaking depending on your stylesheet/code but you get the idea.
Credit to: http://cssbeauty.com/skillshare/discussion/1882/disable-anchor-jump/