Develop Reference

Resizing function appends elements multiple times

I have a bit of code that needs to detect scrollbars on resize and load. This is straightforward enough, the issue arises when I run the append() function, it appends the elements over and over again.
Below is the jQuery I am using (the demo is here)
$.fn.hasScrollBar = function() {
return this.get(0).scrollWidth > this.width();
}
$(window).on("resize", function () {
var tableWidth = $("table").width();
var wrapper = "<div class='top-scroll'><div class='inner'></div></div>";
var instruction = "<span class='instructions'>Scroll left to see more information</span>";
// This sets the overflow message and a placeholder width to match the table
if( $('.no-overflow').hasScrollBar()){
$('.no-overflow').before(wrapper);
$('.top-scroll').before(instruction);
$('.top-scroll').children().attr("style", "width:" + tableWidth + "px;");
}
// This synchronises the scrollbars
$(".top-scroll").scroll(function(){
$(".no-overflow")
.scrollLeft($(".top-scroll").scrollLeft());
});
$(".no-overflow").scroll(function(){
$(".top-scroll")
.scrollLeft($(".no-overflow").scrollLeft());
});
}).resize();
I'd like the append to only happen once and also remove when there are no scrollbars present.

To check for scrollbars:
if ($(document).height() > $(window).height()) {
//There is a vertical scrollbar
} else {
//There is no vertical scrollbar
}
To only create one .top-scroll:
if( $('.no-overflow').hasScrollBar() && $('.top-scroll').length < 1) { // Check .top-scroll doesn't exists currently
$('.no-overflow').before(wrapper);
$('.top-scroll').before(instruction);
$('.top-scroll').children().attr("style", "width:" + tableWidth + "px;");
}
I would also put your 3 variable declarations within your if statement so they will only be set if the statement is true. Unless of course you are using them elsewhere.

Slidedown not working with newly created html

<div id="usu" ></div>
Then I have script that is supposed to add content to that:
<script>
var haelisaanro = 10
function haelisaa() {
$.getJSON("/json/index_oikea.aspx?usu=1", function (data) {
var items = [];
items.push("<div id='rivit" + haelisaanro + "' >");
$.each(data, function (key, val) {
items.push("<div class=\"col-md-12 column nlnyR \"><table><tr><td><div class=\"ot\"><span class=\"glyphicon glyphicon-play\"><\/span><\/div><\/td><td><a href='" + key + "'>" + val + "</a><\/td><\/tr><\/table><\/div>");
});
items.push("</div>");
$("#usu").append(items.join(""));
$('#rivit' + haelisaanro).hide();
$('#rivit' + +haelisaanro).slideDown("slow", function () {
// Animation complete.
});
});
haelisaanro += 10;
}
</script>
I have this on pageload too:
<script>
$(document).ready(function() {
$( "#oikear" ).load( "/index_oikea.aspx", function() {
$( "#oikear2" ).load( "/index_oikea2.aspx", function() {
//alert('lahataanTop of thing hit top of viewport.');
});
});
});
</script>
index_oikea.aspx is loaded to #oikear div. Loaded content has <div id="usu" ></div> in the middle of loded content index_oikea.aspx.
It does fill that are "usu" with data, but there is no slidedown animation on it.
I tryed to add height attribute css to id='rivit'. It seemed like it needs the height to work, but I could not manage to make it work with right height size.
I think the main reason this is not working is that browser can not calculate the height of dynamicly added content somehow...?
If I changethe code... Add this style:
<style>
.dplno{display: none;}
</style>
change to this:
items.push("<div class=\"col-md-12 column nlnyR dplno \"><table><tr><td><div class=\"ot\"><span class=\"glyphicon glyphicon-play\"><\/span><\/div><\/td><td><a href='" + key + "'>" + val + "</a><\/td><\/tr><\/table><\/div>");
and change this:
$( '.dplno' ).slideDown( "slow", function() {
Now every div line is sliding out, but every line is sliding one by one. I needed to slide all those lines at onece.

You are concatenating with + + sign, that may be problem
$('#rivit' + +haelisaanro).slideDown("slow", function () {
// Animation complete.
});
Thus it may be forming wrong id.
Change to this:
$('#rivit'+haelisaanro).slideDown("slow", function () {
// Animation complete.
});

You are hiding the div before applying slideDown. That might be causing your issue.
You should first define animation and then hide the div.
$('#rivit' + +haelisaanro).slideDown("slow", function () {
// Animation complete.
});
$('#rivit' + haelisaanro).hide();

Small issue with Sliding DIV code Javascript

Having a slight issue with some code I've written for a simple sliding div on a clients site.
The code should find the height of the div (as the length differs per page), and then set the div to a height of 100px. The issue at the moment is that the full length of the div is visible for half a second before javascript resizes it. Can anyone help me modify my code so that the div's full length is not visible to the user without clicking more info?
Here is the JS:
function heightGet(){
var moreinfoHeight = document.getElementById("moreinfo").clientHeight;
var moreinfo = document.getElementById("moreinfo");
moreinfo.style.height = moreinfoHeight + "px";
moreinfo.style.visibility = "visible";
document.getElementById("moreinfo_button").href="javascript:heightMore(" + moreinfoHeight + ");";
document.getElementById("moreinfo_button").innerHTML="More Info";
heightLess(moreinfoHeight);
}
function heightMore(val){
var moreinfo = document.getElementById("moreinfo");
document.getElementById("moreinfo_button").href="javascript:heightLess(" + val + ");";
document.getElementById("moreinfo_button").innerHTML="Less Info";
moreinfo.style.height = val + "px";
alert(div.height);
/*setTimeout( function() {
// here add the code (or call a function) to be executed after pause
moreinfo.style.height = "100%";
}, 500 );*/
}
function heightLess(val){
var moreinfo = document.getElementById("moreinfo");
document.getElementById("moreinfo_button").href="javascript:heightMore(" + val + ");";
document.getElementById("moreinfo_button").innerHTML="More Info";
moreinfo.style.height = "100px";
}
heightGet is triggered on page load, heightMore is triggered on a button press for more info, and the opposite for heightLess

If I was you, I would add class with {height: 100px} or style to the container "moreinfo", and remove it in the heightMore function and add in the heightLess function. you don't have to search real height of the container if I understood you right.
function heightGet(){
document.getElementById("moreinfo_button").href="javascript:heightMore(" + moreinfoHeight + ");";
document.getElementById("moreinfo_button").innerHTML="More Info";
}
function heightMore(val){
var moreinfo = document.getElementById("moreinfo");
moreinfo.className = '';
}
function heightLess(val){
var moreinfo = document.getElementById("moreinfo");
moreinfo.className = 'shortview';
}
and here is css part
.shortview{
height: 100px;
}
hope it helps

javascript setting height

I am trying to do very simple thing, setting the height of div depends on what the height is.
So when the site load the height is 45px, after clicking in button height is 100px. After the next click I want my height back to 45px. I am using jQuery, the code is below:
http://codepen.io/zlyfenek/pen/pAcaw
Thanks for any help, as I am new to jQuery.

You can use .toggleClass() function of jQuery.
$(function(){
$('.yourButton').click(function(){
$('.yourDiv').toggleClass('big');
});
});
demo: http://jsfiddle.net/FYyU6/
Note:
Your big css class should come after your small class Order Matters.

change $("button").one to $("button").on

You should just have a class that sets the height to 100px, and then toggle it when you click on the button:
.opened { height: 100px; }
$("button").on("click", function() {
$(".con_b").toggleClass("opened");
})

function showHeight(ele, h) {
$("div").text("The height for the " + ele +
" is " + h + "px.");
}
// use .on instead of .one, .one will online listen for a click one time,
// so your second click will not be seen
$("button").on('click', function () {
if ($(".con_b").height() == 45)
{
$(".con_b").height(100);
}
else
{
// show height and change height should be two different actions
$('.con_b').height(45);
showHeight(".con_b",$(".con_b").height());
}
});

function showHeight(ele, h) {
$("div").text("The height for the " + ele +
" is " + h + "px.");
}
$("button").on('click', function () {
if ($(".con_b").height() == 45)
{
$(".con_b").height(100);
}
else
{
$(".con_b").height(45);
}
its $("button").on not $("button").one

How to change vertical scroll bars in horizontal site

What's happening right now
I've created a single-page horizontal scrolling site that shows a single section at a time. Each section has a different amount of content and different heights. Currently the scroll the vertical scroll bar accommodates for the longest section in the site. Which is totally expected.
What I am trying to do
I want the vertical scroll bars to be relative the current visible section. So there would not be excessive vertical scrolling on a short section. I hope this makes sense, I've seen it before but can't find an example online.
What I've tried, but didn't work
$("ul#nav li a").click(function() {
$("ul#nav li a").removeClass("active");
$(this).addClass("active");
// Get the height of the element and set max-height
var section_id = $(this).attr("href")
section_id = $('div' + section_id).height();
$("body").attr('style', 'height: ' + section_id + 'px !important; max-height: ' + section_id + 'px !important;');
});

I think you'd have to change the css on the elements that are not within the current view frame to be display:none.
edit
Maybe a better choice would be to wrap them in a div that has
overflow-y: scroll
and the height on that div would be your max height. Then when they moved into focus, you could change the CSS properties as needed to display it normally.

This ended up working for me. I'm sure there's a better way, but this got the job done for now! Basically I created an object that stores each sections hash and height then reference those to resize each section to the height of the active section. Of note it seemed that when I reset the height of the sections I also had to set the width again too.
$("ul#nav li a").click(function() {
$("ul#nav li a").removeClass("active");
$(this).addClass("active");
var section_key = $(this).attr("href")
changeSectionH(section_key)
});
var sections = {};
$("div.section").each(function(index) {
var section_id = '#' + $(this).attr("id");
var section_h = $(section_id).height();
sections[section_id] = section_h;
});
function changeSectionH(key){
var windowWidth = $(window).width();
$("div.section").attr('style', 'height: ' + sections[key] + 'px !important; max-height: ' + sections[key] + 'px !important; width: ' + windowWidth + 'px; overflow-y:hidden;');
}