This question already has answers here:
"All but not" jQuery selector
(7 answers)
Closed 8 years ago.
i am noob at this one so I wanted to ask you if you maybe know how to select all elements except one.
Here is 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:1 seconds
}, 1000, function () {
//attach the hash (#jumptarget) to the pageurl
location.hash = target;
});
}
$(document).ready(function () {
$('a[href*=#]').bind("click", jump);
return false;
});
</script>
<!-- // end of smooth scrolling -->
And I want to do same effect on all links except #myCarousel . Question is how to do that and where needs to be included :not selector in script.
Thanks in advance.
you could use .not(), like:
$('a[href*=#]').not('#myCarousel').bind("click", jump);
You can use :not in the selector itself.
$('a[href*=#]:not(#myCarousel)').bind("click", jump);
Related
This question already has answers here:
How do I find out with jQuery if an element is being animated?
(5 answers)
Closed 1 year ago.
I have a navbar which navigates to some block. When I click several times on button , after scrolling me to correct div, when I try to scroll up by myself , the scroll event form navigation bar scrolls me to the div as much time as I have clicked to nav item.
function goToByScroll(id) {
closeSidebar();
const elem = $("body").find(`[data-el=${id}]`);
$('html, body').animate({
scrollTop: $(elem).offset().top
}, 600);
return false;
}
$("#mySidenav > a, #mySidenavMob > a, a").click(function (e) {
// e.preventDefault();
const dataAtrr = $(this).attr("data-id");
if (dataAtrr) goToByScroll(dataAtrr);
});
How should I avoid that ?
one of decisioun was to add timeout for me but I'm not sure that it is correct way
function goToByScroll(id, link) {
closeSidebar();
link.css("pointer-events", "none");
setTimeout(() => {
link.css("pointer-events", "all");
}, 650)
const elem = $("body").find(`[data-el=${id}]`);
$('html, body').animate({
scrollTop: $(elem).offset().top
}, 600);
return false;
}
In my site when URL is something like this: www.example.com/question/#comment23
i want to scroll to this and i use this code:
if (window.location.hash) {
var elem = $(window.location.hash);
var elemId = $(elem).attr('id')
var top = $('#' + elemId).offset().top - 60;
var moreCmntElm = $('#' + elemId).closest('.comment-wrp').siblings('.create-comment-wrp').children('.moreCommnets');
$('html, body').animate({
scrollTop: top
}, 1600, 'easeInOutQuart')
if (moreCmntElm.css('display') == "none") {
moreCmntElmFunc(moreCmntElm.children('button')[0])
}
}
But its possible the comment is hidden display:none (like stackoverflow when a question has a lot of comment), in this case i want the show more comment button event to be trigger.
This function show other comments:
function moreCmntElmFunc($this) {
$this.closest('.other-user-comments-wrp').children().show('blind', 'fast');
$this.css('display', 'none');
$this.parent().css('display', 'none');
}
But code work properly and other comments are displayed.
My problem is i get an error and else other JS operation doesn't work.
$this.closest(...).children is not a function
Since children() is a jQuery function and moreCmntElm.children('button')[0] returns underlying DOM element and they can't execute the jQuery function. Thus you are getting the error
Use .eq()
moreCmntElmFunc(moreCmntElm.children('button').eq(0)); //.first() can also be used
instead of
moreCmntElmFunc(moreCmntElm.children('button')[0]);
I am new to web development and I am in a little trouble. I am using the following jQuery function in order to scroll the page for specific divs with internal links.
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top-30
}, 1000);
}
});
The problem is that the function works also on other elements with internal links that should not have the scroll effect (accordion elements). The only way I can prevent this from happening is to write the same function for all the links that I want to apply the function to ("#link1", "#link2", "#link3", "#link4", ... , "#linkn").
I tried to use an array with the links and to use each value of the array in the function but I don't know how to write the loop.
Can you please help me?
$('a[href^="#"]')
This selector is saying "get all a tags that start with href=#". So the best idea would be to change this selector, to instead go by class names.
You could for example do this:
link
And js:
$('.autoscrollLink').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top-30
}, 1000);
}
});
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>
I have a container with three divs of content inside of it. I am using javascript to navigate from left to right across the divs with the navigation tools referenced as an unordered list. Instead I would like to make those divs fixed and just move the entire container from left to right using the same navigation buttons.
Here is the javascript I tried. In order for this to work, I tried to change
var $anchor = $(this) to var $anchor = $(the name of the container div), but that doesn't work. Could someone help me out with this? Thanks
<script type="text/javascript">
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
});
</script>
Thanks...I found my answer though!
http://jsfiddle.net/pXy2C/
$(document).ready(function(){
$("#right").click(function(){
$("#contents").animate({left:'-200px'},500);
$("#container").animate({'margin-left':'200px'},500);
});
$("#left").click(function(){
$("#contents").animate({left:'0px'},500);
$("#container").animate({'margin-left':'0px'},500);
});
});