I always use jquery script directly to joomla's modules.
Lately, I switched from using Joomla2 to Joomla3. Somehow, scripts are not working anymore in modules. Anybody knows why?
(some script still works though)
Example:
This is what I am working on.
Intro About Info
<h1 id="intro">Intro</h1>
<p>abcd</p>
<h1 id="about">About</h1>
<p>xxxxxxxxxx</p>
<p>xxxxxxxxxx</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jump=function(e)
{
//prevent the "normal" behaviour which would be a "hard" jump
e.preventDefault();
//Get the target
var target = $(this).attr("href");
//perform animated scrolling
$('html,body').animate(
{
//get top-position of target-element and set it as scroll target
scrollTop: $(target).offset().top
//scrolldelay: 2 seconds
},600,function()
{
//attach the hash (#jumptarget) to the pageurl
location.hash = target;
});
}
$(document).ready(function()
{
$('a[href*=#]').bind("click", jump);
return false;
});
</script>
The code gives a smooth scroll on targeted menu id.
If I use above code in Joomla2 module, it works great but doesn't work in Joomla 3.
Any idea?
Mootools is loaded by default in Joomla! 2.5.x. It's an another JS library like jQuery they also use $ symbol. so we need to fix this issue using the jQuery.noConflict() method.
Try to use jQuery this way and recheck.
var $jQ = jQuery.noConflict();
// $jQ is now an alias to the jQuery function
// creating the new alias is optional.
$jQ(document).ready(function() {
$jQ( "div" ).hide();
});
I have rewritten your code here:
<script type="text/javascript">
var jump=function(e)
{
//prevent the "normal" behaviour which would be a "hard" jump
e.preventDefault();
//Get the target
var target = $jQ(this).attr("href");
//perform animated scrolling
$jQ('html,body').animate(
{
//get top-position of target-element and set it as scroll target
scrollTop: $jQ(target).offset().top
//scrolldelay: 2 seconds
},600,function()
{
//attach the hash (#jumptarget) to the pageurl
location.hash = target;
});
}
var $jQ = jQuery.noConflict();
$jQ(document).ready(function()
{
$jQ('a[href*=#]').bind("click", jump);
return false;
});
</script>
Related
I tested the one or other solution of stackoverflow but it can't resolve my problem.
Here is the side:
http://web02980.p4.imv.de/
It's a wordpress-site and I want to use a simple jQuery function to scroll from a anchor to a headline.
Here is the jQuery code http://jsfiddle.net/5phLjjce/1/
In jsfiddle it works, but not on my site.
function scroll($) {
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
}
jQuery(document).ready(function ($) {
scroll($);
});
I tested the jquery-file in the header and in the footer. I tested it in the generell jquery-file and in a extra file. Nothing want to scroll.
Thanks for help.
In your example, just replace var $root = $('html, body'); with var $root = $('.overflow');. It's just a specific thing in your HTML markup.
The idea is click on a link to go to another page (index.html) and once you are there go to an anchor div immediately after. I have tried to do this with a trigger event but not working. The scrollTo is working in the index.html but I don't get to do that automatically from a backlink.
Here's my code:
$(".goTo").click(function() {
/* If I'm in the index, it's working fine */
if($('.show').parents('html').length > 0){
$('body').animate({
scrollTop: $(".works").offset().top
}, 1500, 'easeInOutExpo');
}else{
location.href = "index.html";
$(".goTo").trigger('click');
}
});
Thanks in advance.
You should use anchor in in your href location like this : location.href = "index.html#id";
and then get the id you want to scroll to like this : var hash = window.location.hash.substring(1);
So how your code would look:
$(".goTo").click(function() {
window.location.href = "index.html#id";
}
});
// Shorthand for document ready
$(function() {
// This will get you everything behind the anchor !!
var hash = window.location.hash.substring(1);
var tag = $("#"+hash+"");
// Animation
$('html,body').animate({scrollTop: tag.offset().top},'slow');
});
Not tested, and not sure if this will work for you, but at least it shows you the course of action.
What I have is this:
$(document).ready(function(){$('a[href^="#"]').on('click',function(e){e.preventDefault();var t=$(this.hash).offset().top;$('.wrapper').animate({scrollTop:t,},1000)})});
and actually place divs everywhere as a reference such as:
<div id="about"></div>
It actually scrolls down to those reference points but I dont see the name in the url. When I scroll down and end up in the about section I want it to somehow show up like this www.site.com/#about
Any idea what I am doing wrong? The site used is a HTML document.
give a try to this
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var t = $(this.hash).offset().top;
$('.wrapper').animate({
scrollTop: t,
}, 1000, function () {
window.location.hash = target;
});
});
});
You can use Html5 History API Good tutorial for using HTML5 History API (Pushstate?)
$(document).ready(function() {
$('a[href^="#"]').on('click',function(e) {
e.preventDefault();
var t = $(this.hash).offset().top;
$('.wrapper').animate({ scrollTop:t }, 1000);
history.pushState(null, null, location.href + $(this).href); // <- not sure whether your links are relative or absolute.. do change appropriately..
})
});
I'm trying to use the animate effect on the scroll associated with hashbang links on the page.
When I use this on a regular website it works perfectly.
As soon as I try to use it on a wordpress site it doesn't animate, it just jumps to the DIV instead of scrolling.
jQ code (Tried placing it in the head, body and footer (makes no difference) :
<script type="text/javascript">
jQuery.noConflict();
jQuery(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;
});
});
});
</script>
Here are my current versions of JQuery in case there is an issue there?
jquery.js?ver=1.11.0
jquery-migrate.min.js?ver=1.2.1
Could it be the order that wordpress is enqueing the scripts?
Any ideas because I'm pulling my hair out here!
try with wrap (function($){ //your content })(jQuery);
(function($){
$(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;
});
});
});
})(jQuery);
change to this:
<script type="text/javascript">
jQuery(document).ready(function($){ // pass $ as an arg here
You need to pass $ as an argument in the ready callback and you don't need to have jQuery.noConflict(); so remove it.
Because wordpress uses jQuery instead of $ so that this wont get conflicted with other libraries which uses $ as an alias, So you can do two things
Just do as suggested above or
replace every occurance of $ with jQuery.
I'm building a site using Twitter Bootstrap, and I got the scrollspy to work, using the below javascript:
$('body').scrollspy({ target: '.navbar' })
But it stopped working for me, after I add the script to enable smooth scrolling:
<script type="text/javascript">
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('.nav-toggle').on('click', function (event) {
event.preventDefault();
$('#bs-example-navbar-collapse-1').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 70;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#bs-example-navbar-collapse-1');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
</script>
I'm thinking I must have added the scrollspy in an incorrect position. I have very little knowledge of javascript. If someone can point me the way to inserting it in the correct order/space/line, that would be great!
Thanks in advance!
You may want to use a third party plugin such as jquery.localScroll (which relies on jquery.scrollTo). It provides great smooth scrolling and is easy to implement. A lot easier than reimplementing the wheel.
https://github.com/flesler/jquery.localScroll