Only Mouse wheel Scroll to another id
-
hii ,
With this plugin is that possible to put only mouse scroll to id Function , If ye how to do that plugin word fine with clickable anchor tag or menu tag but I don’t want this two function I am trying to make my first page in section n by mouse wheel he jumps to an another section I read your articles but I don’t understand properly I guess coz when I insert in my website mouse wheel get stopped working
-
Hi,
I cannot see your page (merakifilms.in) because it appears in maintenance mode for me.
- This reply was modified 8 years, 2 months ago by malihu.
Hey Sorry You Can Check it now i just Removed maintenance Mode
Hey Please Give Me a Reply as soon as possible It’s Urgent because Project is on Hold. if Possible Please Give Me your email id so that i can Give You admin rights.so you can check By login into my admin Panel. and give me the solution as soon as possible.
thanks.
1)It’s better to use this script as mentioned here.
2)The plugin is not enabled on your bullet links (they’re handled by another script). You need to give the bullets links the class
ps2id
.3)All your sections (except the 2nd one which is
section-2
) aresection-1
. You need to change them tosection-1
,section-2
,section-3
,section-4
etc.4)Your bullet links URL is not correct. They currently are
#home-section-1
,#home-section-2
etc. They need to be#section-1
,#section-1
etc.I’m out of my working place for the weekend, so I can’t do any real work until Monday.
hey i tried as you said but it’s not working
Check You this new page in that i am just working on your method https://merakifilms.in/home-2/- This reply was modified 8 years, 2 months ago by siddy24.
You need to place the code at the bottom of your HTML code (right before the closing body tag) as mentioned in the tutorial.
After you do this, you need to add your links (either in your menu or as bullets) that point to your sections (currently you don’t have any links with URL/href value
#section-1
,#section-2
etc.).
You can simply add the bullets like you had in your main page that’ll point to your sections.https://merakifilms.in/home-2/ check it out still not done. if Possible just Give me the Structure of Html . coz i tried both url=”#section-2″ and href=”#section-2″ both.
my current html structure is this way<section url=”#section-1″ id=”section-1″ class=”_mPS2id-t”>
<div class=”fullwd”>
first
</div>
</section>and css is :
.fullwd {
height: 100vh;
padding-top: 20%;
padding-bottom: 30%;
}The href/URL is for your links (not your sections). You currently don’t have any links that will scroll the page when clicked. You need to have the links in order for the plugin to do its thing automatically.
This is what you need to do:
1)Your page sections should be:
<section id="section-1"> <!-- section 1 content here... --> </section> <section id="section-2"> <!-- section 2 content here... --> </section> <section id="section-3"> <!-- section 3 content here... --> </section> <!-- and so on... -->
The section elements don’t need the class
_mPS2id-t
(it’s added by the plugin automatically) or a URL attribute, so remove them.2)Insert the links in your HTML:
<ul id="sections-links"> <li><a href="#section-1" rel="m_PageScroll2id">Section 1</a></li> <li><a href="#section-2" rel="m_PageScroll2id">Section 2</a></li> <li><a href="#section-3" rel="m_PageScroll2id">Section 3</a></li> <!-- and so on... --> </ul>
If you don’t want them to be visible, hide them with CSS:
#sections-links{ display: none; }
3)In line 643 you have
<script src="jquery.malihu.PageScroll2id.min.js"></script>
. Remove it as the plugin is already included by WordPress.4)You have included the script from the tutorial 4 times. Leave only one and remove the rest.
In addition:
I have a working demo where you can see the markup and code:
https://manos.malihu.gr/repository/page-scroll-to-id/demo/ps2id-mousewheel-keyboard-example.htmlCheck : https://merakifilms.in I implement it as you said. It’s working now but the only problame is Bullet is Not coming I tried to add Class=”_mPS2id-t” by reading your article but still Nothing is happening. can you suggest anything in that too.
thanksRemove
_mPS2id-t
class is not needed (it’s added automatically by the plugin).I get a console error in your page on line 780. You also have 2 scripts at the bottom (it should be only one). Remove the scripts at the bottom and copy/paste the following:
<script> (function($){ $(window).on("load",function(){ if(!$(document).data("mPS2id")){ console.log("Error: 'Page scroll to id' plugin not present or activated. Please run the code after plugin is loaded."); return; } $(document).data("mPS2idExtend",{ selector:"._mPS2id-h", currentSelector:function(){ return this.index($(".mPS2id-highlight-first").length ? $(".mPS2id-highlight-first") : $(".mPS2id-highlight")); }, input:{y:null,x:null}, i:null, time:null }).on("scrollSection",function(e,dlt,i){ var d=$(this).data("mPS2idExtend"), sel=$(d.selector); if(!$("html,body").is(":animated")){ if(!i) i=d.currentSelector.call(sel); if(!(i===0 && dlt>0) && !(i===sel.length-1 && dlt<0)) sel.eq(i-dlt).trigger("click.mPS2id"); } }).on("mousewheel DOMMouseScroll",function(e){ //mousewheel if($($(this).data("mPS2idExtend").selector).length) e.preventDefault(); $(this).trigger("scrollSection",((e.originalEvent.detail<0 || e.originalEvent.wheelDelta>0) ? 1 : -1)); }).on("keydown",function(e){ //keyboard var code=e.keyCode ? e.keyCode : e.which, keys=$(this).data("mPS2id").layout==="horizontal" ? [37,39] : [38,40]; if(code===keys[0] || code===keys[1]){ if($($(this).data("mPS2idExtend").selector).length) e.preventDefault(); $(this).trigger("scrollSection",(code===keys[0] ? 1 : -1)); } }).on("pointerdown touchstart",function(e){ //touch (optional) var o=e.originalEvent, d=$(this).data("mPS2idExtend"); if(o.pointerType==="touch" || e.type==="touchstart"){ var y=o.screenY || o.changedTouches[0].screenY; d.input.y=y; if($(this).data("mPS2id").layout==="horizontal"){ var x=o.screenX || o.changedTouches[0].screenX; d.input.x=x; } d.time=o.timeStamp; d.i=d.currentSelector.call($(d.selector)); } }).on("touchmove",function(e){ if($("html,body").is(":animated")) e.preventDefault(); }).on("pointerup touchend",function(e){ var o=e.originalEvent; if(o.pointerType==="touch" || e.type==="touchend"){ var y=o.screenY || o.changedTouches[0].screenY, d=$(this).data("mPS2idExtend"), diff=d.input.y-y, time=o.timeStamp-d.time, i=d.currentSelector.call($(d.selector)); if($(this).data("mPS2id").layout==="horizontal"){ var x=o.screenX || o.changedTouches[0].screenX, diff=d.input.x-x; } if(Math.abs(diff)<2) return; var _switch=function(){ return time<200 && i===d.i; }; $(this).trigger("scrollSection",[(diff>0 && _switch() ? -1 : diff<0 && _switch() ? 1 : 0),(_switch() ? d.i : i)]); } }); //still inside window load we add the function that auto-generates the bullets $("body").append("<div id='sections-bullets' />").find($(document).data("mPS2idExtend").selector).each(function(){ $("#sections-bullets").append("<a href='"+$(this).attr("href")+"' class='section-bullet' rel='m_PageScroll2id'></a>"); }); }); })(jQuery); </script>
hii i just did the changes you suggested . but still it’s not working
It does work ??
You just need to style the bullets however you want in your CSS. For example:#sections-bullets { position: fixed; right: 2em; height: auto; top: 50%; transform: translateY(-50%); } .section-bullet { display: block; position: relative; width: 9px; height: 9px; border-radius: 100%; background: #caa981; margin: 12px auto; opacity: .6; } .section-bullet.mPS2id-highlight, .section-bullet:hover { opacity: 1; }
hey, Everything is working now , thanks a lot for your help without you and your plugin I won’t be able to achieve that.
this plugin is now gonna one of my favourite plugin .You provided Premium Support with your free Plugin Thanks a lot once again.You’re welcome!
Creating a page that scrolls sections by mouse-wheel is a bit advanced (as it depends on the theme/template layout and markup) so I try to provide as much support as possible.
Thanks for your comments and rating ??hii once again i want one small change in one page scrolling you can check the website front page https://www.merakifilms.in/
which is one page scroll with mouse wheel but in last section of page scroll when i scroll the mouse in last section it goes to first section again i just don’t want this in last section if i use mouse scroll in up side it should not go to the first section it’s stay on last section only and if scroll down then goes to second last section tell me how to do that what changes should i do i this your code<script>
(function($){
$(window).on(“load”,function(){if(!$(document).data(“mPS2id”)){
console.log(“Error: ‘Page scroll to id’ plugin not present or activated. Please run the code after plugin is loaded.”);
return;
}$(document).data(“mPS2idExtend”,{
selector:”._mPS2id-h”,
currentSelector:function(){
return this.index($(“.mPS2id-highlight-first”).length ? $(“.mPS2id-highlight-first”) : $(“.mPS2id-highlight”));
},
input:{y:null,x:null},
i:null,
time:null
}).on(“scrollSection”,function(e,dlt,i){
var d=$(this).data(“mPS2idExtend”),
sel=$(d.selector);
if(!$(“html,body”).is(“:animated”)){
if(!i) i=d.currentSelector.call(sel);
if(!(i===0 && dlt>0) && !(i===sel.length-1 && dlt<0)) sel.eq(i-dlt).trigger(“click.mPS2id”);
}
}).on(“mousewheel DOMMouseScroll”,function(e){ //mousewheel
if($($(this).data(“mPS2idExtend”).selector).length) e.preventDefault();
$(this).trigger(“scrollSection”,((e.originalEvent.detail<0 || e.originalEvent.wheelDelta>0) ? 1 : -1));
}).on(“keydown”,function(e){ //keyboard
var code=e.keyCode ? e.keyCode : e.which,
keys=$(this).data(“mPS2id”).layout===”horizontal” ? [37,39] : [38,40];
if(code===keys[0] || code===keys[1]){
if($($(this).data(“mPS2idExtend”).selector).length) e.preventDefault();
$(this).trigger(“scrollSection”,(code===keys[0] ? 1 : -1));
}
}).on(“pointerdown touchstart”,function(e){ //touch (optional)
var o=e.originalEvent,
d=$(this).data(“mPS2idExtend”);
if(o.pointerType===”touch” || e.type===”touchstart”){
var y=o.screenY || o.changedTouches[0].screenY;
d.input.y=y;
if($(this).data(“mPS2id”).layout===”horizontal”){
var x=o.screenX || o.changedTouches[0].screenX;
d.input.x=x;
}
d.time=o.timeStamp;
d.i=d.currentSelector.call($(d.selector));
}
}).on(“touchmove”,function(e){
if($(“html,body”).is(“:animated”)) e.preventDefault();
}).on(“pointerup touchend”,function(e){
var o=e.originalEvent;
if(o.pointerType===”touch” || e.type===”touchend”){
var y=o.screenY || o.changedTouches[0].screenY,
d=$(this).data(“mPS2idExtend”),
diff=d.input.y-y,
time=o.timeStamp-d.time,
i=d.currentSelector.call($(d.selector));
if($(this).data(“mPS2id”).layout===”horizontal”){
var x=o.screenX || o.changedTouches[0].screenX,
diff=d.input.x-x;
}
if(Math.abs(diff)<2) return;
var _switch=function(){
return time<200 && i===d.i;
};
$(this).trigger(“scrollSection”,[(diff>0 && _switch() ? -1 : diff<0 && _switch() ? 1 : 0),(_switch() ? d.i : i)]);
}
});//still inside window load we add the function that auto-generates the bullets
$(“body”).append(“<div id=’sections-bullets’ />”).find($(document).data(“mPS2idExtend”).selector).each(function(){
$(“#sections-bullets”).append(““);
});});
})(jQuery);
</script>
- The topic ‘Only Mouse wheel Scroll to another id’ is closed to new replies.