I have a Carousel made from bootstrap and this is the script to run it.
<script>
!function ($)
{
$(function()
{
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
I tried adding a different effect on the navigation bars I got so that when I click the navigation, it will slide up into the section in that page. I added this script.
<script>
$('a').click(function()
{
$('html, body').animate(
{
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
</script>
when I added the script, the left and right buttons in the carousel stopped working. I really don't know if it had a conflict with the second script. I spent around half an hour looking for the error and finally found out that the second script conflicted with the carousel script.
Is there an error in the scripts? How do I fix it?
My guess is that
$('a').click(function() { /* ... */ })
conflicts with the click event handler set up by carousel(). You could add a class on your navigation links (or use whatever nav class is already there), and use a more specific selector in this second script.
Oh.
Figured it out just now.
Added li in $('a').click(function()
Now it looks like $('li a').click(function()
It doesn't conflict now :))
Related
I am currently trying to create a script that makes fading transition from page to page when clicking a anchorlink. I have already made the script, but it does not seem to work.
My code look like this:
$("body").load(function() {
$(this).fadeIn(200);
});
$("a").click(function() {
$link = $(this).attr("href");
$("body").fadeOut(200);
window.location.replace($link);
});
It does not seem to make the fadeIn and fadeOut transitions. It is still the normal pageload.
First hide the body of the page on page load then
you need to place the redirecting line in the complete function of fadeOut
Try this code:
$(document).ready(function() {
$('body').hide().fadeIn(200);
$("a").click(function(e) {
e.preventDefault();
$link = $(this).attr("href");
$("body").fadeOut(200,function(){
window.location = $link;
});
});
});
You need to hide the element initially, either with .hide() or with CSS display:none;.
$(document).ready(function() {
$('body').hide().fadeIn(200);
});
You have to use setTimeout to time the window.location.replace() to execute after the current body has faded like :
$("a").click(function() {
$link = $(this).attr("href");
$("body").fadeOut(200);
setTimeout(function(){
window.location.replace($link);
},200);
return false;
});
Remember to return false at then end of the function else the default action of the link click i.e. redirection precedes any other action associated with the anchor.
But, sincerely, this will give you a smooth fading effect from the current page but not a smooth effect on the redirected page unless it's implemented by you.
This is four years later, but just in case someone needs it. I agree with Roko about the flickering, so I initially hid the body with CSS instead of putting .hide() before the fade in effect:
body {
display: none;
}
Also some have mentioned using .fadeOut(), but it doesn't work on Chrome. I switched to .show() and .hide() which seems to work great. It also animates all of the elements as it fades, which produces a need transition without a hefty jQuery plugin.
$(document).ready(function() {
$('body').show(500);
$("a").click(function() {
$link = $(this).attr("href");
setTimeout(function(){
window.location.replace($link);
},1000);
$("body").hide(500);
return false;
});
});
Lastly, I'm using this on a page that contains click-to-scroll navigation like most one-pagers, as well as opening new tabs with target="_blank", so I changed $("a") to $(".transition-link") and added class="transition-link" to the links I want to navigate from.
I have an problem with my JavaScript and I'm not sure how to deal with it.
So I'm using this script:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('nav a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 700);
return false;
});
});
The script is making a smooth scroll on my page which I think is really cool, so I don't want to delete it.
But my problem is, that I also have a simple gallery slider on my page, but the JavaScript will effect that gallery slider. It scrolls to the top when clicking on a link in href. The code for the gallery slider is:
<div id="images">
<img id="billede1" src="http://i.imgur.com/dL3io.jpg" />
<img id="billede2" src="http://i.imgur.com/qASVX.jpg" />
<img id="billede3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="billede4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
1
2
3
4
</div>
The thing is, I really like the simple code and I'm trying to be better, so I don't want to use some advanced code which I don't understand.
Is is somehow possible to disable the JavaScript not to be working in my div? Or maybe called it something else than the "href"?
I think my "href" is the problem.
So.. Here it is in fiddle:
http://jsfiddle.net/62dsqLff/
and you can see the problem.
Really thanks. I appreciate it :-)
Let me share a fiddle for you JSFIDDLE on this demo I am given new class called .nav for your navbar anchor tags. Then rewrite the script like below.
$('a.nav').click(function () {
alert( $($(this).attr('href')).offset().top);
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 700);
// return false;
});
Use an id for that anchor, instead of a vague "nav a" which will trigger on any a inside your nav element. Also prevent default action if you are using an a as a button. The right way to create your "return top" script, is to target a button. Instead of nav a, create a button, give it an id, and target that id.
So I am in the middle of coding a navigation bar for the side of my website and I am creating it so that you click on a li, inside of it is an a tag with no href attribute so that it acts like a button (I don't use # since it jumps to the top of the page and I don't want that)it has a drop down section come out underneath it pushing the other tabs down. What I've found online is
$('li').click(function() {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
or
$('li').click(function() {
$(this).addClass('active').siblings().removeClass('active')
});
(and other variations of this)
However after I tested this out several times, either by adding multiple classes to each li or attempting to change the class active to an id and I've had no luck.
EDIT: It seems like the code works perfectly in other testing websites (codepen/jsfiddle) but it doesn't seem to work in my own browser when I open up the VisualStudio emulator (opens in the actual browser window)
Here's my code that contains this navigation bar: http://codepen.io/PorototypeX/pen/sjDBL
This might help :
$("ul.navbar > li").click(function () {
$("li[.active]").removeClass('active');
$(this).addClass('active');
});
Actually your code is fine, but it seems you are using JQuery, and it's not a native part of JS it self, it utilizes JS. So first you need to load JQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Then try this code, it's the same but a different variation of what you have done:
$(".navbar > li").click(function () {
$(".navbar").children("li").removeClass("active");
$(this).addClass('active');;
});
JS Fiddle
jQuery not added in the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Demo: CodePen
Another problem could be that the code is not in a dom ready handler
jQuery(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
})
Demo: Fiddle
I figured out what was wrong with my jquery. Although the code would work perfectly on outside sources such as codepen and jsfiddle, the only way that it will work on a local server is to have this code instead:
$(document).ready(function () {
$("ul.navbar > li").click(function () {
$(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
The $(document).ready(function() { remaining code goes here... }) allows it to run locally.
I'm using jQuery mCustomScrollbar script to scroll the content element in one column with id="scroll_box". I also have couple of images (in other column) who has anchor links to elements in "scroll_box". The links has that syntax: http://www.example.com/index.php?id=17#c33.
I'm using that script for moving after click to anchor:
function scrollTo(hash) {
location.hash = "#" + hash;
}
That piece of code working fine but only when I disable mCustomScrollbar script - so I don't have "good looking" and working scroller. When it's turned on the scroller looks and working ok, but anchor links didn't work...
My mCustomScrollbar code:
(function($){
$(window).load(function(){
$("#scroll_box").mCustomScrollbar({
callbacks:{
onScroll:function(){
onScrollCallback();
},
onTotalScroll:function(){
onTotalScrollCallback();
},
onTotalScrollOffset:40,
onTotalScrollBack:function(){
onTotalScrollBackCallback();
},
onTotalScrollBackOffset:20
}
});
});
})(jQuery);
Is it possible to conect that two script into one working?
Actually the plugin have a lot of crazy issues! that make me drop it!; i just customize my self scroll bar and delete this plugin from my project for same reason.
But i fixed the scroll to anchor by using this solution:
$(document).ready(function() {
$("a").click(function() {
if($(this).attr('href') == "#top"){
//this bit is for wordpress, where top is default: .entry-title
var elID=".entry-title";
$(".jsoverflow").mCustomScrollbar("scrollTo",elID);
}else{
if ($(this).attr('href').indexOf("#") >= 0){
//this bit is for any other anchor
$(".jsoverflow").mCustomScrollbar("scrollTo",$(this).attr('href'));
}
}
});
});
It's worked for me 100% and i get it from Get-Hub.
Having some problems with the jQuery .animate functionality.
I have implemented a 'Back to top' link on my website here: http://www.unforgivengamers.com/
It is supposed to get you back to the top of the page once you click it.
Here is my jQuery code:
<script type="text/javascript">
jQuery.noConflict();
jQuery('a[href=#top]').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
});
</script>
The problem: the animation is not smooth! I want it to scroll slowly, not instant.
Like this: http://designwoop.com/labs/smooth%20scroll/smooth-scroll.html
Am I missing something out here?
I'm using jQuery 1.8.3
You should put your code within document ready handler, the animation is not even performed on your page, the anchor is on the bottom of the page and your code without document ready on the top of the page.
jQuery(document).ready(function(){
jQuery('a[href=#top]').click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
});
})