Bootstrap collapse after set height - javascript

What I'm trying to achieve is relatively simple after a set height I'm looking to collapse a div using Bootstrap default attributes. Below I have written the javascript to trigger after a set height but what I'm unsure on is how to trigger the collapse with the id of #more.
function testScroll(ev) {
if (window.pageYOffset > 1100) alert('User has scrolled at least 400 px!');
}
<div id="more" class="collapse">test</div>

You can use the collapse function as defined in the bootstrap docs, by providing it the element id. You can also read more about it here.
function testScroll(ev){
if(window.pageYOffset>1100) {
alert('User has scrolled at least 400 px!');
$('more').collapse('hide');
} else {
alert('User has not scrolled at least 400 px!');
$('more').collapse('show');
}
}
<div id="more" class="collapse">test</div>

If I understand you don't know how to select and change the class of the item #more
var collapse = function() {
// select the element that has the id #more
var element = document.getElementById('more');
// now you can, for exemple change its class
// that's where you can apply a different css class to collapse the div
element.setAttribute('class','anotherClass');
}

Related

Making on-scroll style changes using vanilla js

I want remove .bg-light from nav element at 400px and more scrolls
<nav id="my-nav" class="bg-light navbar text-info"> change my background color</nav>
I know it's an easy task with jQuery but is it possible to do it with vanilla js?
Thanks for spending time on my question I will be glad to see opinion
First, we start by grabbing the "nav" element using the ID.
Then setting our Y-axis's offset.
Attach a listener to the window object.
On scroll, compare the current position to our desired offset.
const navBar = document.getElementById("my-nav");
const offset = 400;
window.addEventListener("scroll", () => {
if (window.scrollY >= offset){
navBar.classList.remove("bg-light")
} else {
navBar.classList.add("bg-light")
}
})
Yes, its possible with Vanilla JavaScript, use the "scroll" event handler to get the info. As the users moves through the site it will return the Y axis position in pixels. By using an if statement remove or add the bg-light class, like so:
let nav = document.getElementById("my-nav");
window.addEventListener("scroll", (e) => {
if(this.scrollY > 400){ nav.classList.remove('bg-light') }
else{
nav.classList.add('bg-light')
}
});
*{padding:5px}
html{height:3000px;font-size:20px}
.bg-light{background-color: #F8F8F8!important; color:black!important;}
.navbar{position:fixed;background-color:blue; color:white;}
<nav id="my-nav" class="bg-light navbar text-info"> Change my background color at scrollY 400px</nav>

two column equal height layout using bootstrap

I have two column layout, left side only one image column and right side content etc. right now both are same height if rotate screen then it is not equal height but i refresh page(rotate screen) then both column do have equal height. i am trying to equal height without refresh page at rotate screen.
$(function(){
$balancer = function() {
$('.main-box').each(function(){
if($('.cola',this).height()>$('.colb',this).height()){
$('.colb',this).height($('.cola',this).height())
} else {
$('.cola',this).height($('.colb',this).height())
}
});
}
$balancer();
$(window).load($balancer());
$(window).resize($balancer());
});
html
<div class="main-box">
<div class="cola"></div>
<div class="colb"></div>
</div>
You can hook into the DeviceOrientation change event.
window.addEventListener("deviceorientation", function (e) {
//DO stuff here.
}, false);
Which should trigger when you go from horizontal to vertical and back again.
your jquery selector seems wrong.
$('.main-box').each....
You need to select the inner divs not the wrapper.
$('.main-box > div').each....
if( $(this).height() > $(this).siblings().height() ) {
$(this).siblings().height( $(this).height() );
} else {
$(this).height( $(this).siblings().height() )
}
Possible duplicate of : How can I make Bootstrap columns all the same height?
And there is another link which can help you: http://getbootstrap.com.vn/examples/equal-height-columns/

Javascript Collapsible Menu (hide the other elements)

I have the following working Javascript function:
function collapsible(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display = "block";
}
return false;
} else {
return true;
}
}
When I use the following in html code it displays or hides the "element" div:
<li>Element</li>
Thats working fine. But the problem is, that I want to use the function for multiple links, and then the other elements, that were clicked before, stay, open.
How can I reprogram the code, so that only one div stays open and the other gets closed if i click on another link?
Thanks beforehand!
If you could use jQuery and more importantly jQueryUI accordion I think it would accomplish exactly what you're looking for.
However, without using those two, here is how I would structure it. Like mentioned above, I would use classes to modify the styles of the divs you want shown or hidden. Then the js code can just toggle those classes on each of your elements. The slightly more difficult part (without jquery) is modifying class values since in your final application you may have lots of classes on each div. This is just a very crude example to get you going.
Working JSFiddle Example
Sample DOM
<div >
<li>Element1</li>
<div id='elem1' class='myelem visible'>
Element 1 contents
</div>
</div>
<div >
<li>Element2</li>
<div id='elem2' class='myelem'>
Element 2 contents
</div>
</div>
<div >
<li>Element3</li>
<div id='elem3' class='myelem'>
Element 3 contents
</div>
</div>
Sample JS
window['collapsible'] = function(zap) {
if (document.getElementById)
{
var visDivs = document.getElementsByClassName('visible');
for(var i = 0; i < visDivs.length; i++)
{
visDivs[i].className = visDivs[i].className.replace('visible','');
}
document.getElementById(zap).className += " visible";
return false;
}
else
return true;
}
Sample CSS:
.myelem {
display: none;
}
.visible {
display: block;
}
The way to go is to create a class(or maybe two), like collapsible and active or open that has this style(display: block or none) and then you working adding or removing the class.
The logic would be:
Links that has the class collapsible when clicked would add the active or open class which would give the behavior that remains opens(or active) by css.
If you want to hide others elements you would look for the elements with the class collapsible and then remove the active(or open) class if has any.
Here is my solution: http://jsfiddle.net/g5oc0uoq/
$('.content').hide();
$('.listelement').on('click', function(){
if(!($(this).children('.content').is(':visible'))){
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
show() and hide() can be used instead of slideUp() and slideDown() if you have performance issues.

Change Toggle(); from Display:none to Visibility:hidden

This code is working successfully on the project that I am working on. The problem with this is that the elements that this code affects are positioned absolutely. When .field-name-field-pin-point it clicked the element .group dealer is hidden, but the .field-name-field-pin-point moves off of the page. Ideally, I would like the visibility to be set at none upon page load, but it would probably be easier to do that part in CSS. Here is what I am currently using:
jQuery(document).ready(function () {
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').toggle();
});
});
There will be more nodes that will be positioned differently so the full class name I provided is necessary. The markup (generally speaking) is as follows:
<div class="node-202">
<div class="group-dealer">...</div>
<div class="field-name-field-pin-point">...</div>
</div>
I am basically creating points on a map that when clicked, bring up a small window with more information about that location.
Here is a reference to my last post if you are looking for more information: Toggle Class Visibility by Clicking on another Class
I suggest your best approach is to add a css rule and just toggle a class on the elements
CSS
.group-dealer.hidden{ visibility:hidden}
JS
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').addClass('hidden');/* use toggleClass if more appropriate*/
})
Just toggle the visibility then
jQuery(document).ready(function () {
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').css('visibility', function(_,vis) {
return vis == 'hidden' ? 'visible' : 'hidden';
});
});
});
Try:
$('.node-202 .field-name-field-pin-point').click(function () {
if ($(this).siblings().css('visibility') == 'visible') {
$(this).siblings().css('visibility', 'hidden');
} else {
$(this).siblings().css('visibility', 'visible');
}
});
DEMO here.

Remove class using jquery on a certain condition for propery alignment of submenus

I need to remove a certain css class from .nav, so that it comes up properly. Right now its behaviour is unexpected based on different screen sizes.
Fiddle example
Demo View
You will notice that the drop-down sub-menus don't show up properly. I want the dropdown to show on right side of dropdown, when it has enough space on the right, and on the left side of dropdown, when it has less space based on the <div class="main-wrapper"> width, which is 1000px wide.
I tried to fix it with following code but it is not working properly:
$(document).ready(function(){
$(".nav").on("mouseenter", " > li", function(){
/*if dropdown is likely to go out of parent nav then right align it :) */
if (($(this).offset().left) + 200 > $('.menu-wrapper').width()) {
$(this).find(".dropdown").addClass("dropdown-last");
}
if($(this).hasClass("has-panel")){
// $(this).find(".dropdown").removeClass("dropdown-last");
//alert('has class');
}
else
{
//alert('has no class');
}
});
/* if dropdnw*/
$(".dropdown").each(function(){
var $this = $(this);
if($this.find(".dd-panel").length > 0){
$this.addClass('has-panel');
}
if($this.find(".dd-panel").length = 1){
$(".dropdown").css( "min-height", "80px" );
}
});
});
On debug, it shows the following as a div class dropdown has-panel dropdown-last if it div with has class has-panel and one which doesnt have mega menu for it show class as dropdown dropdown-last. I was trying to check using jQuery, to see if the element has the class or not. If it has the class has-panel, then do nothing and if it doesn't have the class has-panel, then I need to remove the class dropdown-last from the same element which is not working with following code:
if($(this).hasClass("has-panel")){
// $(this).find(".dropdown").removeClass("dropdown-last");
alert('has class');
}
else
{
//alert('has no class');
}
remove $(window).load(function(){} and it will work
Solved using code
if( $(this).find(".dropdown").hasClass("has-panel")){
// $(this).find(".dropdown").removeClass("dropdown-last");
//alert('has class');
}
else
{
//alert('has no class');
$(this).find(".dropdown").removeClass("dropdown-last");
}

Categories