I am currently intercepting when a user clicks a particular link with jQuery and scrolling them to an anchor on the page. Once the page has scrolled to the anchor, I then want to show a div and focus on an element in that div. The following code does this but with a problem...
// Intercept the click on the link which scrolls to the signup form
$('#section-footer-buttons a').click(function(){
// Scroll to the welcome section
location.href = '#welcome';
// Show the hidden signup form if it's not already visible
$('#signup-form').slideDown(350, function(){
// Focus on the first element on the form now the animation is complete
$('#signup-form :input:enabled:visible:first').focus();
});
// We've handled this click so return false
return false;
});
The problem is that by the time the page has scrolled up to the anchor where the signup form is, the hidden div is already visible without the nice slideDown animation. Is there a way to only begin the slideDown animation once the page has stopped scrolling? Essentially, I need a callback from when location.href has completed.
You should come at this a different way.
$('#section-footer-buttons a').click(function(){
var welcome = '#welcome',
$offset = $('[href="'+welcome+'"]').offset().top;
$('html,body').animate({
scrollTop:$offset,350
},function(){
location.href = welcome;
$('#signup-form').slideDown(350, function(){
$(this).find('input').filter(':enabled:visible').first().focus();
});
});
return false;
});
Making use of the .animate() callback function like this should hopefully give you what you're looking for.
Related
This question already has an answer here:
On page load, if URL hash matches one of the values in the array, scroll to the element with the matching data-load-id attribute
(1 answer)
Closed 4 years ago.
I have a toggle function that scrolls the page to a section and opens a tab, based on a click on the left side nav (based the id of the link):
<script>
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container3").hide();
//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$(".trigger3").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
return false; //Prevent the browser jump to the link anchor
}).first().click()
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#over_left a").click(function(){
var id = $(this).attr("href");
$(id).addClass("active").next().show("slow");
})
});
</script>
Instead of the click being the trigger, I'd like the same loaded URL be the trigger. So, if https://www.sea.edu/sea_research/climate_change#news would also scroll to the News tab and open it (change the class to active) just like the link on the page does. It can be the same tab ID each time - for now only one tab on each page needs to have this treatment.
I don't know what to search for, but something like:
$("URL#news").onload{function()
Try this one
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('#what').offset().top
}, 'slow');
});
JS FIDDLE LINK
I use disqus in my news site for comments, i put disqus div as display:none, i want that the user have to do click in a button for show and hide this div.
I did a script in jQuery doing toggle in this button, and I can hide and show the div, but when it shows, does not focus on the div, but this is where the button.
This is not useful since pressing the button should take the user to the section where comment, but does not.
script:
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot").click(function(){
$('.disqus_thread').toggle('swing');
});
});
.gn-icon-bubble is the button and as you know, .disqus-thread is the div's class; #foot is my anchor, are in the main page's footer, but still don't works.
I've tried using anchors, but gives the same, still focus comments. I really appreciate your help.
Use Event Delegation for dynamically change element ,use preventDefault to stop default action
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot");
$(document).on("click", ".gn-icon-bubble[href=#foot]" , function(event){
// event.preventDefault(); If you want to stop default anchor tag click action
$('.disqus_thread').toggle('swing');
});
});
Try this:
$('.gn-icon-bubble').click(function() {
$('.disqus_thread').toggle('swing',function() {
$('#foot').focus();
});
return false;
});
The following code is normally wrapped in an if statement to check if the browser is on a mobile device and if so then when you click on the main menu link it stops the href, hides the current nav bar links, then adds a new one. This allows for the drop menu to stay dropped and you can click on the main menu link again so that the href works. The problem is that you can only do this one time. After the first click and the javascript:void(0) is run and the links are updated I cannot stop the href from going to its original location. I need the javascript:void(0) to run on the first click of link each time and on the second click of the link redirect you to the respective page.
$(document).ready(function(){
$('.mobile-device > a').click(function(){
$(this).attr('href', 'javascript:void(0)');
});
});
$(document).ready(function(){
$('.mobile-device > a').click(function(){
$('.testing-a').css('display','block');
$('.testing-this').css('display','none')
});
});
Use preventDefault() in such scenario.
Example ::
$('.mobile-device > a').click(function(evt){
evt.preventDefault();
$(this).attr('href', 'javascript:void(0)');
});
I have a link when its clicked a div containing form elements are added to the page.
The problem is when the list become longer. when i add an element to the end of the page, the page focus back to the top making the user to scroll back to the end of the page. How can I prevent it? I tried to use $(this).focus(); but it didn't work.
$("a[id^=link_add_section_]").live('click',function() { // create a section
var sectionId = $(this).attr('id');
var sectionIdSplit = sectionId.split('_');
addSection(sectionIdSplit[3],'groupby');
$(this).focus();
alert(1);
});
Add an id to your anchor
Something
Bind a click event and prevent default
$("#myAnchor").click(function(event){
event.preventDefault();
return false;
});
If you have "new_div_1" as id of the newly adding div and to move focus to the newly added div, you can do
$("body").animate({ scrollTop: $('#new_div_1').offset().top }, 1000);
try to scroll the window to the place of that div:
window.scrollTo(0,$("#MY_DIV").offset().top);
I have this jquery code that dynamically loads an html page into a div when a user clicks on a link in a list.
Is there a way to disable one of the links if the user is already viewing the page it links to? Right now the loading animation is triggered every time the link is clicked even if the requested link is already showing.
I need the event to not trigger if the page it calls and loads is already displayed.
$('#navigation a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide("slide",{direction:"up"},1000,loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show("slide",{direction:"down"},1000);
}
return false;
});
You can add a custom class which will disable your clicked link. Like:
$('#navigation a').click(function(){
......
$(this).addClass('disabled');
....
}
But you would obivously need to somehow remove that class from other previously added links (so you won't disable whole menu after few clicks. So you could make some reset like:
$('#navigation a').click(function(){
......
$('#navigation a').removeClass('disabled');
$(this).addClass('disabled');
....
}
This is just a simple logic. I believe it can be optimized or written in different way.
Edit: Css class probably won't make it in this case. I am not sure, if you can use disable() on anchor tag. Or you can just execute different logic like using preventDefault on this link, but then you still need to keep track of disabled elements this way so you can enable them once another one is clicked.