Flexcroll and innerHTML - javascript

I'm trying to get content from a set of hidden (display:none) divs to display on a main "display" div using innerHTML. That part has no problem. However, flexcroll does not seem to load the moment I change the content of the "display" div using innerHTML, even after calling the updateScrollBars method.
Here is the code in question:
function switchdis(IDS) {
caredet = document.getElementById('caredet');
carednew = document.getElementById(IDS).innerHTML;
caredet.innerHTML = carednew;
fleXenv.updateScrollBars();
}
I'm not too sure what is the problem. It seems to me like the function is called (I can scroll using the mousewheel) but the scrollbar is not appearing at all. For the record, my custom scrollbar works fine on other pages. On another page, I used the method of hiding and unhiding divs to change content within the page; the updateScrollBars() method works there when I call it after unhiding a div.
But somehow with innerHTML it doesn't seem to work. Does anyone know why?

I solved this issue.
Realised I was updated the innerHTML of the div with flexcroll applied. If anyone is having similar problems, DO NOT DO THAT. Instead, create another div within the flexcroll master div and change the innerHTML of that div.
Additionally, remember to update your flexcroll scrollbars and optionally shift the scroll position to the top every time the innerHTML of that inner div is changed.

Related

jQuery .detach() not working when trying to change element position along the DOM with scrolling

I'm trying to make a div element with certain content move (Jump) between an specific area that has some duplicates inside an article while scrolling.
The div #hotswapdiv should be inserted inside each <div id="div_identifier">
</div> while scrolling the page, by moving from the previous #div_identifier to the next #div_identifier.
It's like teleporting the #hotswapdiv between the elements with the same ID while scrolling.
JSFIDDLE:
https://jsfiddle.net/2n8k8g4L/7/
But for some reason it's not working.
Reference: https://api.jquery.com/detach/
Any ideas?
you can only use one #div_identifier because it is an id ,
i think class="div_identifier" and .div_identifier will fix your issue

strange CSS / Javascript behavior when hovering over TEXTAREA or A objects

I have a strange problem in my web-app (php) that I noticed recently.
1 month ago it worked just fine.
When I hover above a certain < TEXTAREA > or over 2 buttons (add, exit),
in a DIV, the DIV gets filled with its background color, making the INPUT, TEXTAREA and 2 buttons invisible.
This DIV is practically a window with 2 inputs and an OK and exit button,
that I hide and show, as a "window" thing would be in Windows.
The moment I hover any other button in the page (so I do a mouseOver), the DIV
shows up again, and it starts working the proper way.
So the problem is when i hover on the TEXTAREA and the 2 buttons, the DIV gets gray.
thanks!
i hope it's not a Chrome bug, in Firefox it seems to work,
but again in Opera it doesn't. So strange.
took at look at your site in Chrome and was able to replicate your problem easily.
by using the "Element Inspector" i removed overflow:hidden from .my_links_header_container and could no longer replicate the problem.
i tested it several times by reloading the page.
on page load, the problem existed, but immediately. after i removed the overflow:hidden, it 100% did not occur again.
on a side note, you have an inline style="display:block" on your .add_link_table, which is not really a table element but a div. that's redundant because a div is a block element by nature -- perhaps it was a table element previously?
i also noticed several elements whose natural display was overridden by your CSS. i think part of this problem is related to flip-flopping your elements and displays.
Seems to be a webkit issue.
This may not be a good solution, but give it a try
I am modifying you addLink method (use plain javascript or jquery selectors as you like, Ive kept the original code as it is)
function addLink()
{
var addLinkTable = $("#add_link_table");
if(document.getElementById('add_link_table').style.display=='block')
{
document.getElementById('add_link_table').style.display = 'none';
}else{
addLinkTable.css("visibility","hidden");
document.getElementById('add_link_table').style.display ='block';
setTimeout(showTable,10);
function showTable(){
addLinkTable.css("visibility","visible");
}
}
document.getElementById('link_name').focus();
}
Try it out with by switching visibility or opacity or height

How could a make Fluidbox.js work with tabs

I try to use the Fluidbox script with the bootstrap tab plugin. When I click on a tab, new images appear. They are in a container and the opacity goes from 0 to 1.
By default the first container opacity is set to 1.
Fluidbox works well with that container but not with the other. I suspect that it has a link with opacity change. Any ideas?
Page with the problem: http://urlgone.com/2d0035/
It seems Fluidbox does not work on any images that are set to display none. And in your case inside of a parent element that is set to display none.
The way you get around this is to get fluidbox to fire before the image or element is hidden. I was using easytabs, so I placed it's call inside of a window load function which gave fluidbox enough time to fire before easytabs hid the photos.
$(window).load(function() {
$("#tab-full-container").easytabs();
});

jQuery scrolling doesn't show up

I'm writting a dynamic page using jQuery and I have a problem. I'm for example adding to my html file div's using append() function like this:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'></div>");
I will be creating different amount of that div's base on datebase so that's why I use this variable i to assign different id's for each div.
My problem is that even if I'm creating that div's in body and when I look at code they are in it, if I check body's height it is 0 (width is ok, something like 1200).
Main problem with that is when there are too many div's they are beyond screen but there is no scroll bar. It's something like div's aren't in body although in code they are in.
Could you propose me any solution for that? Or what am I doing wrong? My line of thought is that I'm using $(document).ready so html file is creating a page, but see empty body so height = 0 and all my div's are beyond body. What do you think about that?
Take care of positioning; position:fixed removes your divs from normal flow ->
Fixed positioned elements are removed from the normal flow. The
document and other elements behave like the fixed positioned element
does not exist.
as W3C says
An empty <div> does not have a height. Thus you could add as many as you want to the page and it will never get any longer. For the scroll-bar to appear you need to either set a height to the <div> with CSS like this:
.diamond_div{
height:100px;
}
Or add some content to the <div> so you would have something like this instead:
$("body").append("<div id ='dd_"+i.toString()+"' class='diamond_div'>hello</div>");
Then your <div> would have height and once there are enough on the page to go beyond the height of the browser, the scroll-bar will then appear.
Following on from your comments. Setting the position to "fixed" removes the element from the workflow and thus will not extend the length of the page in the normal way.

How can I auto-scroll as content is added to a div?

I have a div of fixed dimensions into which some JavaScript functions will be placing text over time. When the amount of text exceeds the height of the box, a scrollbar appears thanks to overflow:scroll.
The new problem is that the view into the div stays at the same place as more content appears. What I mean to say is that it stays scrolled wherever it is as more content appears beneath, hidden unless you manually scroll down. I want to make it automatically scroll to the bottom as new content appears so that the user naturally sees what appeared most recently instead of what's oldest.
Ideas?
You can use scrollTop method after each text addition:
$("div").scrollTop($("div").children().height());
Use inner block to get the true height.
DEMO: http://jsfiddle.net/eyY5k/1/
I found this approach to work for my needs:
var realHeight = $("#history")[0].scrollHeight;
$("#history").scrollTop(realHeight);
Do note this uses jquery.

Categories