Related
Struggling to add css opacity transition with js. When clicking on a tab, the js loop hides all content and only shows the content with the corresponding id. Im trying to get the loop to add the transition as well. The tabcontent class is the CSS in question.
<li>
<a style="left: 9.6%" href="javascript:switchTab('tb_1', 'content_1', 'icon_1');" id="tb_1" class="tabmenu active">FIT GUIDE<span class='mobileshow' id='icon_1'>-<span></a>
<section id="content_1" class="tabcontent">
<p class='lorem'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui</p>
</section>
</li>
<li>
<a style="left: 39%;" href="javascript:switchTab('tb_2', 'content_2', 'icon_2');" id="tb_2" class="tabmenu">CARE <span class='mobileshow' id='icon_2'>+</span></a>
<section id="content_2" class="tabcontent" style="display:none; opacity: 0;">
<p class='lorem'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui</p>
</section>
</li>
<li>
<a style="left: 60.6%" href="javascript:switchTab('tb_3', 'content_3', 'icon_3');" id="tb_3" class="tabmenu">MATERIALS <span class='mobileshow' id='icon_3'>+</span></a>
<section id="content_3" class="tabcontent" style="display:none; opacity: 0;">
<div class='materials-content'>
<ul class='materials-stats'>
<li class='material-item'>50%<span class='subtext'>cashmere</span></li>
<li class='material-item'>46%<span class='subtext right'>wool</span></li>
<li class='material-item'>4%<span class='subtext'>modal</span></li>
</ul>
<div class='border-bot'></div>
<p class='lorem'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui</p>
</div>
</section>
</li>
</ul>
function switchTab(tab_id, tab_content, icon_id) {
// select tab content
let content = document.getElementsByClassName("tabcontent");
for (let i = 0; i < content.length; i++) {
// hide tab content
content[i].style.opacity = '0';
content[i].style.display = 'none';
}
//document.getElementById(tab_content).style.display = 'block';
//document.getElementById(tab_content).classList.add("showme");
document.getElementById(tab_content).style.cssText = "opacity: 1; display: block;"
}
.tabcontent {
max-width: 750px;
margin-top: 45px;
position: relative;
transition: opacity 1s ease-in-out;
padding: 20px 0;
top: 0;
}
It is not possible to animate opacity and display at the same time. You would probably want to set display: block first, and then change the opacity. Or the other way around if you want to hide the block.
I think you might want to have a look at #keyframes. Here's a link to documentation about it. https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes
It will look something like this:
#keyframes yourAnimation {
from {
transform: opacity(0);
}
to {
transform: opacity(1);
}
}
Have a class named animation and apply the keyframes to that. Then add the class to the HTMLElement you want to be animated using JS. This will cause the CSS animation to occur.
CSS for this part will be looking something like this:
.animation {
animation: yourAnimation;
}
It seems like the JS part you can manage, but if you need more help let me know!
I got a simple html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<script type="text/javascript" src="https://externalsite.com/script.js" async=true>
</script>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>
</body>
</html>
A js file (hosted on an external site) modify the code in this way.
It displays a div in the center of the page with two buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<script type="text/javascript" src="https://externalsite.com/script.js" async=true>
</script>
</head>
<body>
<div class="qc-cmp-ui-container qc-cmp-showing">
<div class="qc-cmp-ui qc-cmp-showing" id="qcCmpUi">
<img class="qc-cmp-publisher-logo" src="http://www.xxx.it/logo.png" onerror="window.__cmpui("hideLogo",event)">
<div class="qc-cmp-ui-content">
<h1 class="qc-cmp-title"> title </h1>
<span>
<p class="qc-cmp-main-messaging"> bla bla bla. </p>
<span>
<div class="qc-cmp-buttons qc-cmp-primary-buttons" id="qcCmpButtons"><button class="qc-cmp-button qc-cmp-secondary-button">Non Accetto</button> <button class="qc-cmp-button" onclick="window.__cmpui("setAndSaveAllConsent",!0)"> Accetto </button> </div>
</span>
</span>
</div>
<div class="qc-cmp-alt-buttons"> <a id="qc-cmp-purpose-button" class="qc-cmp-alt-action qc-cmp-center-bottom" onclick="window.__cmpui("updateConsentUi",2)"> Mostra tutte le finalità di utilizzo </a> </div>
</div>
</div>
</body>
</html>
My goal is to hide the div with qc-cmp-ui-container class
I tried adding jQuery
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM completamente caricato e analizzato");
$('.qc-cmp-ui-container').hide();
});
But the div is always visible.
How can I hide it?
You are trying to hide the div before he's actually created. DOMContentLoaded event fires when the DOM is loaded, but not when the DOMContent is changed.
Try to wait the div to be created and after that hide it.
var interval = setInterval(function(){
if($('.qc-cmp-ui-container').length) {
$('.qc-cmp-ui-container').hide();
clearInterval(interval);
}
}, 150);
I'm using bx-slider. I was tasked at adding a "Read More" button for one of the slides, which should expand the slide height. The problem is that the BX-slider won't recalculate the height when I run the readmore.js function. Is there a way to call the adaptive height function at the same time that I click the "Read More" function from a different plugin?
Thank you
$(document).ready(function() {
$('.bxslider').bxSlider({
adaptiveHeight: true,
pagerCustom: '#bx-pager'
});
});
$('.readmore').readmore();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>
<ul class="bxslider">
<li>
<div class="readmore">
<h3>Slide with "Read More" Button. </h3>
<p>First click on the "Read More" button. I'd like the adaptive height to kick in at this point. If you click either arrow arrow, and return back to this slide, the height is adjusted. But then if you click the close button, the height also does not adjust.</p>
<p>Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero. Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero.</p>
</div>
</li>
<li>
<h3>Other Slide</h3>
<p>
Praesent vulputate metus volutpat nibh ornare, vitae suscipit lacus vehicula. Aenean accumsan ornare placerat. Curabitur ullamcorper vehicula nisi quis pellentesque. Mauris viverra massa non mattis convallis. Nunc accumsan libero sagittis quam consectetur
pulvinar. Quisque euismod lacinia magna id sagittis. Aenean tempor est placerat hendrerit pellentesque. Praesent id vehicula odio, eget condimentum dolor. In vehicula lacinia efficitur. Vivamus nec iaculis ante, sit amet facilisis dui. Nunc imperdiet,
dolor nec posuere vulputate, metus mi lobortis ligula, nec posuere diam nunc eu dolor. Donec non rhoncus justo. Vestibulum sagittis quis leo quis hendrerit. Phasellus quis arcu quis ligula luctus dapibus. Suspendisse gravida elementum arcu ut luctus.
</p>
</li>
</ul>
Use
bxSlider API - onSliderResize callback
Readmore API - afterToggle callback
bxSlider can get non-responsive to events that indirectly resizes it's dimensions. You can "wake" it up by directly resizing .bx-viewport.
function bxAdjust(idx) {
$('.bx-viewport').height("0").height('100%');
}
Use that simple function as the callback for both onSliderResize and afterToggle. Working Snippet below.
SNIPPET
$(document).ready(function() {
var bx = $('.bxslider').bxSlider({
adaptiveHeight: true,
pagerCustom: '#bx-pager',
onSliderResize: bxAdjust
});
});
function bxAdjust(idx) {
$('.bx-viewport').height("0").height('100%');
}
$('.readmore').readmore({
afterToggle: rmAdjust
});
function rmAdjust(tgr, ele, exp) {
bxAdjust();
if (exp) {
tgr = 'Close';
} else {
tgr = 'Read More';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>
<ul class="bxslider">
<li>
<div class="readmore">
<h3>Slide with "Read More" Button. </h3>
<p>First click on the "Read More" button. I'd like the adaptive height to kick in at this point. If you click either arrow arrow, and return back to this slide, the height is adjusted. But then if you click the close button, the height also does not
adjust.
</p>
<p>Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem
vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero. Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis,
neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur
nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero.</p>
</div>
</li>
<li>
<h3>Other Slide</h3>
<p>
Praesent vulputate metus volutpat nibh ornare, vitae suscipit lacus vehicula. Aenean accumsan ornare placerat. Curabitur ullamcorper vehicula nisi quis pellentesque. Mauris viverra massa non mattis convallis. Nunc accumsan libero sagittis quam consectetur
pulvinar. Quisque euismod lacinia magna id sagittis. Aenean tempor est placerat hendrerit pellentesque. Praesent id vehicula odio, eget condimentum dolor. In vehicula lacinia efficitur. Vivamus nec iaculis ante, sit amet facilisis dui. Nunc imperdiet,
dolor nec posuere vulputate, metus mi lobortis ligula, nec posuere diam nunc eu dolor. Donec non rhoncus justo. Vestibulum sagittis quis leo quis hendrerit. Phasellus quis arcu quis ligula luctus dapibus. Suspendisse gravida elementum arcu ut luctus.
</p>
</li>
</ul>
I just want to scroll the div ( overflow scroll ) by only the bar in right hand side not on mouse roll, touch.
body
{
height:1000px
}
.news_list {
display: block;
overflow-y: scroll;
height: 200px;
width:200px;
margin:auto;
border:solid 1px;
}
<body><div class="news_list">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</body>
Prevent mousewheel event default action using event.preventDefault() or by returning false return false;
$('.news_list').on('mousewheel', function(e) {
e.preventDefault();
});
body {
height: 1000px
}
.news_list {
display: block;
overflow-y: scroll;
height: 200px;
width: 200px;
margin: auto;
border: solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="news_list">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</body>
demo
$(".news_list").bind("mousewheel", function () {
return false;
});
Cancel the mousewheel on the div with class news_list
I have got a task to do tabbed menu.I have four three tabs.I want to change the color of background while selecting it.How can I do this?I want to make the background of selected tab as red.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
Simply add the following to your CSS:
.ui-state-active a {
background-color: #ff0000;
}
DEMO: http://jsfiddle.net/6hjVh/
$("#tabs").on("click", "a:not(.current)", function ( event ) {
$(".current", event.delegateTarget).removeClass("current");
$(this).addClass("current");
});
and then add the .current in your css and style it.
The purpose of JQuery UI is to create your own theme to handle the default behaviours. Using a different background-color for the selected tab is one of those behaviours. You just need to use the theme roller and select the desired color on Clickable: active state section.
Unless you want to handle something more specific in your JQuery UI style you will only need to generate a theme.
ThemeRoller
jQuery code
$('#tabs ul').on('click', 'li:not(.current)', function() {
$(this).addClass('current').siblings('li').removeClass('current');
});
CSS code:
.current{ background: red; }
ul li {float: left; padding: 5px; list-style: none;}
Demo
$("#tabs").tabs({
create: function(event, ui){
$(this).tabs("option", "active", indexOf tab);
}
});