We Keep Coding

Clicking a Bootstrap Nav Tab won't scroll to Tab Pane - jQuery / Bootstrap

I have some Bootstrap vertical tabs that I'm struggling with what I felt like would be a simple operation.
Goal:
On the click of Tab, I want to smooth-scroll to the corresponding pane.
What's Actually Happening:
On click of the tab, the browser animates to the tab, not the tab pane. I've tried passing in the paneId instead of the ID, but that doesn't work at all. Any idea where I'm going wrong?
Codepen:
Here's a Codepen: Codepen!
jQuery:
$("#tabs .nav-link").click(function (e) { //on click of nav tav, perform this:
var id = $(e.target).prop("id"); //Grab ID of .nav-link clicked
var paneId = id.replace("tab", "pane"); //Replace "tab" with "pane" and assign new var
function navigateToElement(id) {
$("html, body").animate(
{
scrollTop: $("#" + id).offset().top
},
300
);
}
navigateToElement(id); //Tried with "paneId" instead of "id" to scroll to the pane, but doesn't work
});
Any idea where I'm going wrong?

This line:
var paneId = id.replace("tab", "pane"); //Replace "tab" with "pane" and assign new var
Is creating a variable like: v-pills-profile-pane and there isn't a div on the page with that id. I did see a div with id="v-pills-profile". Change that last line to this and it should work:
var paneId = id.replace("-tab", "");

I just realized that it doesn't matter what pane I scroll to, as bootstrap will display the panes under #panes. As long as I can scroll to that, I'm good. This code worked:
$("#tabs .nav-link").click(function (e) {
var target = $("#panes");
$([document.documentElement, document.body]).animate(
{
scrollTop: $(target).offset().top - 20, // added a bit of offset
},
350
);
});

Toggle between displaying different html

When page loads I am doing some changes to the html of a element, I have a toggle button for this element but I have problems to make it work correctly.
What I am trying to do is followin:
When page is loaded the modified html will be displayed.
When user click on the toggle button I want the original html to be displayed with full text with slide effect.
When user click on the toggle button again I want it to display the modified html with slide effect.
I have almost made it to work, it looks like this
JSFiddle
Here is the code:
$(window).ready(function() {
var string = $('#object-full-description').html();
var place = string.indexOf('.', 800);
if (place >= 0)
{
$('#object-full-description').html(string.substring(0, place + 1));
}
$('#full-description-toggle').click(function() {
if ($('.toggled').length > 0) {
$('#object-full-description').slideToggle('slow', function() {
$('#full-description-toggle').removeClass('toggled');
place = string.indexOf('.', 800);
if (place >= 0) {
$('#object-full-description').html(string.substring(0, place + 1));
}
});
} else {
$('#object-full-description').slideToggle('slow', function() {
$('#full-description-toggle').addClass('toggled');
$('#object-full-description').html(string);
});
}
});
});
I would appreciate any kind of help!

See http://jsfiddle.net/dM7Vd/16/
Looks like you just need to add
$('#object-full-description').slideToggle('slow');
at the end of your function. You're hiding it but not re-showing it.

How do I reset the slider to slide 1 onLeave?

I'm using the latest version (2.1.8) of fullPage.js in order to create a dashboard, which automatically slides vertically and horizontally by updating the window.location.
See jsfiddle.
The issue I'm facing is that when we come back around to section 2, the slider is still on the final slide position and has to slide back to slide 1, before progressing forward through the slides.
I've tried following the instructions of Issue #129 ,which looks to have worked for someone using version 1.7.2:
Make scrollSlider function public
Change the name of the calls to the function
Apply onLeave event code:
onLeave: function(index, nextIndex, direction){
//getting the section by the index
var section = $('.section').eq((index - 1));
//if the section we are leaving has slides...
if (section.find('.slides').length) {
//moving to slide 0
$.fn.fullpage.scrollSlider(section, 0);
}
}
However, this has no affect on the behaviour.
Is anybody able to suggest a method to ensure the slider is always put back to the default slide when moving to the next section using the latest version of fullPage.js?
All the best,
AshBestos

I had the same problem. Solved with a copy from function scrollSlider().
Named it function scrollDefault() and set this function public.
In my jquery.fullPage.custom.js
$.fn.fullpage.scrollDefault = function(section, slide){
if(typeof slide != 'undefined'){
var slides = section.find('.slides');
var destiny = slides.find('[data-anchor="'+slide+'"]');
if(!destiny.length){
destiny = slides.find('.slide').eq(slide);
}
if(destiny.length){
landscapeScroll(slides, destiny);
}
}
};
The setTimeout is a quick & dirty solution to hide the scroll animation. So when you click on another section and go back you see the first slide.
In my $(document).ready(function() {
onLeave: function(index, nextIndex, direction){
setTimeout(function(){
var section = $('.section').eq((index - 1));
if (section.find('.slides').length) {
$.fn.fullpage.scrollDefault(section, 0);
}
}, 500);
}

How to set scroll position of WebPage Containing Iframe at top when that page is open

We have a ASPX page containing an iframe. Iframe used to store content of page.
Our problem is suppose we have an data (Editable Rows) on one page with scrollbar. If we click on upper part of page row then The new page open correctly i.e. it is open & scrollbar position at top.
But when we click lower part Row then The page which we open have scroll position at bottom.
How can we make that scroll position to top?
Till now we have tried ,
window.onload = function () {
$('html').scrollTop(0);
&
var myIframe = parent.document.getElementById("Content");
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(0, 0);
};
&
document.body.scrollTop = document.documentElement.scrollTop = 0;
But no luck. please help.

This Code works for me..
$(document).ready(function () {
var Ifr = parent.document.getElementById("Content");
Ifr.onload = function () {
parent.scrollTo(0, 0);
};
});

building a Jquery Tool slider like yahoo.com slider details

Hi im trying to achieve a "news slider" like the one you can see in yahoo.com... I almost have the 100% of the code.. (if you want to compare them here is my code http://jsfiddle.net/PcAwU/1/)
what is missing in my code , (forget about design) is that , In my slider you have to clic on each item, i tried to replace Onclick for Hover on the javascript, it worked, but the fisrt image on the gallery stop working, so when you just open the slider, you see a missing image.
Other point.. also very important, in yahoo.com after "x seconds" the slider goes to the next item, and so on ... all the Thumnails are gruped 4 by for 4, (in mine 5 by 5, thats ok) ... after pass all the 4 items, it go to the next bloc..
HOW CAN I ACHIEVE THAT!!. I really looked into the API, everything, really im lost, i hope someone can help me. cause im really lost in here.
Thanks
Here is the script
$(function() {
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });
$(".items img").click(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }
// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $(this).attr("src").replace("_t", "");
// get handle to element that wraps the image and make it semi-transparent
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
// the large image from www.flickr.com
var img = new Image();
// call this function after it's loaded
img.onload = function() {
// make wrapper fully visible
wrap.fadeTo("fast", 1);
// change the image
wrap.find("img").attr("src", url);
};
// begin loading the image from www.flickr.com
img.src = url;
// activate item
$(".items img").removeClass("active");
$(this).addClass("active");
// when page loads simulate a "click" on the first image
}).filter(":first").click();
// provide scrollable API for the action buttons
window.api = root.data("scrollable");
});
function toggle(el){
if(el.className!="play")
{
el.className="play";
el.src='images/play.png';
api.pause();
}
else if(el.className=="play")
{
el.className="pause";
el.src='images/pause.png';
api.play();
}
return false;
}

To fix the hover problem you need to make some quick changes: Change the click to a on(..) similar to just hover(..) just the new standard.
$(".items img").on("hover",function() {
....
Then You need to update the bottom click event to mouse over to simulate a hover effect. Trigger is a comman function to use to trigger some event.
}).filter(":first").trigger("mouseover");
jSFiddle: http://jsfiddle.net/PcAwU/2/
Now to have a play feature, you need a counter/ and a set interval like so:
var count = 1;
setInterval(function(){
count++; // add to the counter
if($(".items img").eq(count).length != 0){ // eq(.. select by index [0],[1]..
$(".items img").eq(count).trigger("mouseover");
} else count = 0; //reset counter
},1000);
This will go show new images every 1 second (1000 = 1sec), you can change this and manipulate it to your liking.
jSFiddle: http://jsfiddle.net/PcAwU/3/
If you want to hover the active image, you need to do so with the css() or the addClass() functions. But You have done this already, All we have to do is a simple css change:
.scrollable .active {
....
border-bottom:3px solid skyblue;
Here is the new update jSFilde: http://jsfiddle.net/PcAwU/4/