I am using jQuery plugin version 3.10 to use custom scrollbars. I have numerous horizontal slides and each uses its own custom scrollbar. I want to include javascript .onclick function that expands text. However, the scrollbar does not appear when I expand the text and it overflows. I am using the following code to select the headings which should have the onclick function (tag "h3", class "click"):
function toggleNext(el) {
var next=el.nextSibling;
while(next.nodeType != 1) next=next.nextSibling;
next.style.display=((next.style.display=="none") ? "block" : "none");
}
function getElementsByTagAndClassName(tag,cname) {
var tags=document.getElementsByTagName(tag);
var cEls=new Array();
for (i=0; i<tags.length; i++) {
var rE = new RegExp("(^|\s)" + cname + "(\s|$)");
if (rE.test(tags[i].className)) {
cEls.push(tags[i]);
}
}
return cEls;
}
function toggleNextByTagAndClassName(tag,cname) {
var ccn="clicker";
clickers=getElementsByTagAndClassName(tag,cname);
for (i=0; i<clickers.length; i++) {
clickers[i].className+=" "+ccn;
clickers[i].onclick=function() {toggleNext(this)}
toggleNext(clickers[i]);
}
}
window.onload=function(){toggleNextByTagAndClassName('h3','click')}
Example of HTML:
<article class="slide" id="lorem">
<div class="inner">
<h3 class="click">Lorem Ipsum</h3>
<div class="content">
<p>Sample text, is sample text, is sample text</p>
</div>
I know from previous research that I've done that I have to call the resize function from niceScroll jQuery plugin, which is as follows.
$(name-of-div).getNiceScroll().resize()
I have tried using the resize function with the name-of-div as content, however this does not yield the expected results. Please help if you can. I am not sure how to implement the two together.
Not sure if understood what's going on but I had a similar problem. Try using the resize() inside a setTimeout.
Note that the "name-of-div" must be the name of the scroll's container.
The jQuery code would looks like:
setTimeout(function(){
$('name-of-div').getNiceScroll().resize()
}, 500);
I used 500 as an example, but if your div's text expand while animate you must use a number greater then your div animation, and of course, the code must execute after all interactions
See the question below. There are two answers and both work for me. Basically, I have applied the second method(See the second answer) suggested there. Because, it works instantly and the first method doesn't seem to work instantly after the div has been resized.
Jquery Nice scroll not working
Related
I am attempting to make a slideshow out of text, wherein one piece of text fades out, and another fades in, and so on. I have it working for the most part, but there is a small issue.
When the page is first loaded, all of the pieces of text are displayed at once. Each one fades in turn, and once they have all faded once they function as I want. I have used:
(function langFade() {
var lang = $('.lang, .first');
var langIndex = -1;
function showNextLang() {
++langIndex;
lang.eq(langIndex % lang.length)
.fadeIn(1500)
.delay(2000)
.fadeOut(1500, showNextLang);
}
showNextLang();
})();
as described here, but this is causing the problem described above. I've attempted using CSS to hide all but the first piece of text when the site is loaded, but this isn't doing the trick. My suspicion is that the issue is with the HTML - it is rather different to the demo. I have created a fiddle to demonstrate what I mean.
Is there any way of fixing this, either through modifying the JavaScript, or the HTML?
Try to hide the others at first with .not(':eq(0)').hide()
(function langFade() {
var lang = $('.lang, .first'),
langIndex = -1;
lang.not(':eq(0)').hide();
function showNextLang() {
++langIndex;
lang.eq(langIndex % lang.length)
.fadeIn(1500)
.delay(2000)
.fadeOut(1500, showNextLang);
}
showNextLang();
})();
Can also use .not(':first').hide() which may be a little easier to read.
Just hide them initially. And this can be done in pure CSS. Add following class:
h2.first, h2.lang {
display: none
}
Demo: http://jsfiddle.net/XbWJS/2/
Currently, homepage text is only displayed via a click function which initiates a slide out.
What I would like to do, is to change this so that it doesn't require a click to display. I'm wanting the text to display (fade in) after about 3 seconds of the page loading.
This is what I have at present:-
$('.introbox span').replaceWith(function(){
return '\
<div class="slideOutTip '+$(this).attr('class')+'" style="'+$(this).attr('style')+'">\
\
<div class="tipVisible">\
<div class="tipIcon"><div class="plusIcon"></div></div>\
<span class="tipTitle">'+$(this).attr('title')+'</span>\
</div>\
\
<div class="slideOutContent">\
<p>'+$(this).html()+'</p>\
</div>\
</div>';
});
It is when the 'plusIcon' is clicked, that the text slides out and is visible.
The listen out for the click function is...
$('.tipVisible').bind('click',function(){
var tip = $(this).parent();
So I'm presuming this is where I need to convert the necessary to use autoload with perhaps a setDelay and FadeIn although I'm not 100%.
Please could someone advise how this can be altered to not use a click but auto display after delay? Thanks in advance.
Attempted to add code in jsfiddle if it is easier to see what I'm trying to do - thanks.
Pretty simple: make a function with what you do at .tipVisible.click and then set a window.setTimeout(yourFunction, 3000);
#Comment: Your JS is already pretty complex, I probably would reorganize and recode everything so I can just give you a hint how it could be implemented (didn't work right away when I added it in your fiddle, but I'm a bit too lazy to find the problem there).
var animate = function(obj) {
var tip = obj ? $(obj).parent() : $(".tipVisible").parent();
/* If a open/close animation is in progress, exit the function */
if (tip.is(':animated')) return false;
if (tip.find('.slideOutContent').css('display') == 'none') {
tip.trigger('slideOut');
}
else tip.trigger('slideIn');
}
window.setTimeout( animate, 3000);
$('.tipVisible').bind('click', function() {
animate(this);
});
EDIT: Well this is doing something at least, now you have to figure out what needs to be done when and how ;)
PS: You used jQuery but loaded Mootools framework... Mootools doesn't know $(document).ready()
I have a DIV with in image inside of it. There is a spot right before the image that does not fire the onclick function when clicked. The rest, including the image and the DIV fire the function when clicked. I have tried attaching the function to the image itself in addition to the DIV and this does not fix the problem. Anyone know what to do?
//this give all the divs the function
var ButtonNumber = document.querySelectorAll(".ButtonStyle");
for (var i = 0; i < ButtonNumber.length; i++) {
ButtonNumber[i].onmouseover = ChangeCursor;
ButtonNumber[i].onclick = ButtonsAddTogether;
ButtonNumber[i].onselectstart = function() {return false;}
}
This is the HTML
<div id="55" class="ButtonStyle"><img alt="1" class="Center" src="Buttons/7.png"></div>
Try setting the image and the div to have the same height. That or use an inline element rather than a block element such as an anchor tag
I have placed your code within jsfiddle: http://jsfiddle.net/BUwFP/1/
Please look at it and tell me if it works for you. I have just:
defined functions that were not defined (probably you just skipped them showing your code),
added borders to image and the div that contains it,
and everything looks fine - clicking the box etc. fires events. Do similar thing and check whether your box really is placed where you click or somehow it has been moved (probably by CSS styles or JS code). You probably already know, that you may use Firebug in Firefox, Developer Tools in Chrome or anything similar.
I have a navigation bar at the top of my eform that skips to the next and previous div (page/section) but only if that div is visible. The divs are hidden unless activated with a checkbox. so the next button on the nav bar needs to work by always taking you to the next available div.
The following code works for the first button but these nav bars display at the top of each section so the next section has a next button on it running the same function (which doesn't work) i'm struggling to exlpain myself here so please shout if i'm not making sense. Here's my code.
function showNext(){
var pages = [document.getElementById("page2"),document.getElementById("page3")];
var next = ["page2marker","page3marker"];
for (var i=0; i<pages.length; i++){
if(pages[i].style.display == "block"){
window.location.hash = next[i];
}
}
}
Can i amend this function so that it will work for all buttons. I.e by always navigating to the next available div that is visible? I think i've probably missed a trick and a whole load of info but see what you think, any ideas?
Many thanks
You can achieve this using jQuery with the jQuery.next function - http://api.jquery.com/next/.
For a set of html like this:
<nav><a class="showNext">Show Next</a></nav>
<div class="content" style="display:none">I'm hidden</div>
<div class="content">I'm Visible</div>
You could use something like:
$('.showNext').bind('click', function(e) {
e.stopPropagation();
e.preventDefault();
window.location.hash = $(this).next('.content:visible').attr('id') + 'marker';
});
I was wondering if anybody knows how I would go about detecting when the scrollbar appears inside a textarea.
I am currently using mootools for my JavaScript and I am having issues getting it to detect a scrollbar.
function has_scrollbar(elem_id)
{
const elem = document.getElementById(elem_id);
if (elem.clientHeight < elem.scrollHeight)
alert("The element has a vertical scrollbar!");
else
alert("The element doesn't have a vertical scrollbar.");
}
See this jsFiddle http://jsfiddle.net/qKNXH/
I made a jQuery "compatible" version of Tommaso Taruffis code
function resize_until_scrollbar_is_gone(selector) {
$.each($(selector), function(i, elem) {
while (elem.clientHeight < elem.scrollHeight) {
$(elem).height($(elem).height()+5);
}
});
}
It can handle multiple elements and accepts: selectors, jQuery objects, or DOM elements.
It can be called like this:
resize_until_scrollbar_is_gone('textarea');
Tommaso's solution works perfectly, even with a text area. But if the user were to type in the textarea and suddenly the textarea gave itself a scrollbar, your javascript wouldn't know or be triggered.So you might want to add something like
onKeyUp='has_scrollbar("textareaID")'
For React I've found https://github.com/andreypopp/react-textarea-autosize
import Textarea from 'react-textarea-autosize';
...
<Textarea maxRows={3} />