Scroll to a class on button click - HTML - javascript

I have a HTML page with a frame having lot of lines and a button "Next". On clicking Next Button, I should be able to navigate to a paragraph having orange color. All the paragraphs having orange color will be of same class.
That means, on page load I should be able to navigate to 3rd paragraph. On another click I should go to 6th paragraph and so on..
I tried to use document.getelementsbyclassname(). But I was not able to write logic to navigate to that particular location. Please help me out.

You can do this , like this
Working DEMO
$("p:first").addClass("active");
$(document).on("click","#ip",function(){
if($("p.orange:last").hasClass("active")){
var topVal = $("p:first").offset().top;
$("html body").animate({
scrollTop:topVal
},500,function(){
$("p").removeClass("active");
$("p:first").addClass("active");
});
}
else{
var nextElem = $("p.active").nextAll("p.orange:first");
var topVal = nextElem.offset().top;
//alert(topVal);
$("html body").animate({
scrollTop:topVal
},500,function(){
$("p").removeClass("active");
nextElem.addClass("active");
});
}
});

You can try this. First, create a variable called, lets's say, number which stores which paragraph we currently need to scroll to. Like 1st, 2nd, etc. When the page loads, it's value will be 1.
var number=1;
The next step is to add ids to all the orange paragraph. The first paragraph gets id orange1, the second one gets id orange2 and so on. You can either do this manually or if there are too many paragraphs you can try adding it by looping or something like that.
Now assuming the Next button has an id called 'button' you can add this code:
$('#button').click(function() {
$('html, body').animate({
scrollTop: $('#orange'+number).offset().top
}, 1000);
number++;
});
Now, whenever you click on the Next button, the page should scroll to the correct paragraph. Hope this helps.

Related

Scrolling first occurence to top position inside div

After I clicked on link, which navigate to another page I have to scroll the first (the earliest) alarm occurrence (which is marked as a red text) at the top of "tbody" div. Each row have id='tab_content' and a table data class = 'td_list_row_center'. When alarm occurs, tds are changing color from black to red and a name class = 'td_list_row_center font-red".
I've tried to handle red occurrence and if it was found, scroll at the top inside "tbody" div. The second row should be with black font (non-alarm)
<script>
function scrollToFirstRedAlarmOccurence(red_occurrence) {
$('tbody').animate({
scrollTop: red_occurrence.offset().top
}, 2000);
}
var red_occurrence = document.getElementsByClassName("td_list_row_center font-red");
if(red_occurrence)
scrollToFirstRedAlarmOccurence(red_occurrence);
else
null
</script>
After clicking on the link and table shows, nothing happens (like script doesn't work). I expect it to scroll to the first red occurrence from a huge dataset. After I scroll the table up I would see another later red occurrencies. Below actual and expected results as pics:
[Actual res.] -> https://ibb.co/1zn4ty9
[Expected res.] -> https://ibb.co/Jy6FrL6
Parameters for 'getElementsByClassName' are incorrect. Use them as following.
<script>
function scrollToFirstRedAlarmOccurence(red_occurrence) {
// make jQuery object for first element
$('tbody').animate({
scrollTop: $(red_occurrence[0]).offset().top,
}, 2000);
}
setTimeout(() => {
// select "font-red" classed elements
var red_occurrence = document.getElementsByClassName("font-red"); // you can use jQuery selector too
if(red_occurrence.length) { // check for array length
scrollToFirstRedAlarmOccurence(red_occurrence);
}
}, 1000); // wait for DOM to render
</script>
Basically, you can debug your code to check if they are getting correct values. I have made some correction which would work for your case.

scrollTop duplicating values each time function is called

I have 2 divs that each time one of them is clicked it scrolls down to a common content div called .nbm_specs. The first time you click it scrolls correctly, however any subsequent clicks make the scrolling go crazy and it keeps scrolling up by a small amount each time.
It is acting like it is stacking the offset top each time you click on it.
I have established the scroll in a function that I then call in each .on CLICK function.
//hidel all at start
$(".prostar,.X10,.x20,.x23,.x30,.x46,.xstar").fadeOut(0);
//Scrol when clicekd
function SpecScrol(){
$('html, body').animate({
scrollTop: $(".nbm_specs").offset().top -80}, 1500);
}
//NAVIGATION SECTION FOR MODELS
$("#prostar").on('click', function() {
$(".prostar").fadeIn(0);
$(".X10").fadeOut(0);
SpecScrol();
});
$("#X10").on('click', function() {
$(".X10").fadeIn(0);
$(".prostar").fadeOut(0);
SpecScrol();
});
Thanks in advance
SOLVED.
The issue was that there are multiple .nbm_specs div and the code wasn't sure which to go to and getting all confused. Fixed this by creating a blank div just above the .nbm_specs div with a unique id.

jquery, time out another jquery function if a user clicks a div?

I have the following script which fades in multiple divs called 'noti_box'. If a user closes these divs then another div 'advert' fades in in its place.
<script>
$(document).ready(function(){
var animations = [];
$('.noti_box').each(function(i) {
animations.push(
$(this).hide().delay(i * 1000).fadeIn(1500).promise()
);
});
$.when.apply($, animations).done(function () {
time=setInterval(function(){
if ( $('.noti_box:visible').length === 0 ) {
$(".advert").fadeIn("slow");
} },200);
});
});
</script>
this works fine, basically what happens here is my last function is stuck on a loop, where the 'advert' div fades in when 'noti_box' is not visible on the page.
However, now I want a user to click a div called 'icons' and if they do, then this should re-fade in the 'noti_box' divs and fade out the 'advert' div using this code:
<script>
$('.icons').click(function(){
$('.advert').fadeOut('fast');
$('.noti_box).fadeIn('fast');
});
</script>
The problem I have here is the 'advert' div fades in and out again in the blink of an eye, without fading in my 'noti_box' div. This is because my first javascript function is still on a loop and preventing my second script from executing.
So what I need to do, I think is set a time out interval for my first script when a user clicks my div 'icon' and then clear the time out interval once the script has executed and the 'noti_box' divs are once again showing.
Can someone please show me how I would be able to do this as I am brand new to jquery. Thanks
function notiBox(ele){
this.ele=ele;
this.ele.hide().fadeIn('slow');
console.log("I have been born! "+ele);
}
notiBox.prototype={
constructor:notiBox,
advert:function(){
var ele=this.ele;
this.ele.fadeOut('fast',function(){ele.next('.advert').fadeIn('slow');});
},
fadeBack:function(){
var ele=this.ele;
this.ele.next('.advert').fadeOut('slow',function(){ele.fadeIn('slow');});
},
}
$(document).ready(function(){
var timeIn=1;
$('.noti-box').each(function(){
var self=this;
this.timer=setInterval(function(){self.notiBox=new notiBox($(self));clearInterval(self.timer);},1000*timeIn);
timeIn++;
});
$('.icon').click(function(){
$('.noti-box').notiBox.fadeBack();
});
});
Right the above is a 'OOP' based approach to your problem. The only problem you might have with this is that your advert divs are not next to the box div. Sorry I guess your DOM elements and layout. Also my methods my not be correct because it's been so long since I've written something like that. I'll do some tests. In the mean time, could you put up some HTML? So that I can adjust my code :d

How can I add a page indicator to this jquery div carosel I made?

I put together this quick carousel that I'm using to cycle through different divs that contain graphs and other various data. I would like to have something indicating which "page" or div you are currently viewing.
Here is an example of what I'm currently doing to iterate through the divs.
http://jsfiddle.net/d6nZP/64/
My plan is to have a row of dots that have either a active or none active state depending on which page is indicated in the row. But even a basic page counter would work at this point.
Any help would be greatly appreciated, Thanks!
here is a simple pager for your carousel, enjoy it ;)
http://jsfiddle.net/d6nZP/65/
Created something you can use http://jsfiddle.net/BadBoyBill/8yHmy/
$("div[id^=marquee]:gt(0)").hide();
function startTimer(){
i = setInterval(rotate, 2000);
return i;
}
var intID = startTimer();
function stopTimer(){
clearInterval(intID);
}
function rotate(){
reference = $("div[id^=marquee]:visible").hide().next("div[id^=marquee]");
reference.length ? $(reference).fadeIn() : $("div[id^=marquee]:first").fadeIn() ;
dot = $(".indicator-on[id^=indicator]").removeClass("indicator-on").next("a[id^=indicator]").addClass("indicator-on");
dot.length ? $(dot).addClass("indicator-on") : $("a[id^=indicator]:first").addClass("indicator-on");
}
$("div[id^=marquee]").each(function(){
$("#indicators").append("<a href='#' id='indicator' class='indicator'></a>");
$(".indicator:first").addClass("indicator-on");
});
$("a[id^=indicator]").click(function(e){
var index = $("a[id^=indicator]").index(this);
//alert(index);
$("div[id=marquee]").hide();
$("div[id=marquee]").eq(index).show();
$("a[id=indicator]").removeClass("indicator-on");
$("a[id=indicator]").eq(index).addClass("indicator-on");
stopTimer();
intID = startTimer();
e.preventDefault();
});
$("a[id=indicator], div[id=marquee]").mouseenter(function(){
stopTimer();
//alert("mouseenter");
}).mouseleave(function(){
stopTimer();
intID = startTimer();
//alert("mouseexit");
});
The easiest way to do this would be to put something in the content divs themselves that acts as a counter, i.e. in the first div put "1/3", in the next "2/3", etc. That method, of course, would have the disadvantage of not being very responsive to change. A better option is to keep a separate variable that keeps track of which element is visible, then when the "next" button is clicked, the variable is incremented, then a check is run to see if that index exists. If not, you loop back the beginning. The opposite, of course, with the previous button.

Clicking on anchor takes me to the bottom instead of restoring the previous position

I am kind of really stuck with this problem. Any help will great.
I am clicking on a link which expand the content and when i am cliking on a hide button, instead of taking me to the Expand link, it takes me to the bottom.I have already tried such options like onclick="fun() return false" and href=javascrpit:void(0), but not could help.
PLease refer http://jsfiddle.net/BdsyJ/ this link and click on "How do I maximize battery life" and at the bottom you will get a hide button which should take the control back to the Click it rather than placing the page at the bottom.
Thank you guys.
I changed your ReverseDisplay() method to this and it works nicely:
function ReverseDisplay(d) {
$("#" + d).toggle();
$('html, body').animate({
scrollTop: $("#" + d).prev().offset().top
}, 100);
}
here's a working example:
http://jsfiddle.net/hunter/BdsyJ/5/
In case you were wondering; YES your HTML is invalid. <li> elements should not have <div> siblings.
You're at the bottom of the page because you have hidden so much content. Two things I would update in your code:
cache the element look up so you only do it once and and
scroll the page to the top after you close it using scrollTo(0,0) or
something more complex if you need to scroll back to the exact
element you toggled.
Code:
function ReverseDisplay(d) {
var el = document.getElementById(d);
el.style.display = (el.style.display == "none")?"block":"none";
}

Categories