Bootstrap: collapsed text conflicts with footer - javascript

Hi I have this page, built upon Bootstrap, and the thing is that if you click the "See Wikipedia" button, the content will flush the whole page, however the page height does not change and the footer is overwritten in a very funny ugly way. Is it possible to change this? I have tried to set some overflow but it does not help much.

You can do this small changes :
Change
<div id="debate-title" class="container">
By
<div id="debate-title" class="container col-xs-6 ">
Change
<footer class="site-footer">
By
<footer class="site-footer col-xs-12">

Related

wowjs animate css not working wowjs not adding animated class to html element

if you go here site here and check with developer tools you will see this line
<!--Single portfolio item one-->
<section class="single-items center-block parallax m-0" id="home" style="background: url(innovative/img/single-portfolio1.jpg)">
<div class="container">
<div class="row">
<div class="col-md-12 center-col">
<div class="area-heading text-center wow fadeInUp" data-wow-delay="0.8s">
<h3 class="area-title text-capitalize alt-font text-white mb-2 font-weight-100 ">
Nuestro <strong>loren ipsun</strong>loren ipsun</h3>
<p class="text-white font-weight-300"> loren ipsun</p>
loren ipsun
</div>
</div>
</div>
</div>
</section>
lacks the * animated * class, tried :
manually setting animated css, bootstrap css, and animated js, wow js , did not work....
stripped down all the css and js and just left basic html with animate css and js and wow js, nothing happened
what could be happening ? , this template have bootstrap and animate css in one bundle js css file
wasted between 2, 4 hours debugging console and found not the culprit of this error
What i am trying is:
to enable the wow animate js css effect like this site site here
if you check with developer tools this last site you will see that will be adding animated class to wow fadein class.. however that is not happening in the first one... and do not know why!
what could be causing this?
It seems to me that you forgot to initiate the wow.js as told in the documentation, so you just need to add the initiation code to it. And a quick fix would be to add:
<script type="text/javascript">
new WOW().init();
</script>
Below <!-- custom script --> line in your code (or anywhere before </body> tag).

How to PUSH Fixed Sidebar up when as Footer is scrolled into view - No 3rd party libraries, please

I saw a possible solution to this HERE, but I'm hoping I can do this without adding a third-party plugin to my evergrowing list of included libraries.
I have a simple Bootstrap 4 layout, a main col-8 section, a secon col-4 sidebar, and underneath a footer:
<div class="container-fluid">
<div class="row row-eq-height m-0 p-0 h-100">
<div class="col-12 col-lg-7 col-xl-8 order-2 order-lg-1 py-3">MAIN CONTENT</div>
<div class="col-12 col-lg-5 offset-lg-7 col-xl-4 offset-xl-8 order-1 order-lg-2 p-0 fixed-side">SIDEBAR</div>
</div>
</div>
<footer class="container-fluid container-footer pt-4 pb-1"></footer>
What I want to do is allow the user to scroll through the MAIN Column, while the FIXED-SIDE sidebar stays fixed (class fixed-side sets position:fixed, top: inherit, z-index: 0). When the footer comes into view, I want to offset the top value by however many pixels the footer is seen.
I have tested in developer tools that this would probably be the easiest way to manipulate the top value of the FIXED-SIDE sidebar. I just do not know how to target the "in-window" height of an element.
I'm looking to accomplish this in javascript or jQuery, instead of importing a new script and calling that script.
Consider using position: sticky; - it could help to achieve your 'fixed position' sidebar, but still allow scrolling in your main <div>.
https://css-tricks.com/position-sticky-2/

How to Bootstrap these elements

This may seem weird, I want to create a header as simple as this of Stack Overflow so I've been struggling writing the right codes.
<template name="DashboardLayout">
<hr>
<div class="row">
<div col-md-8 col-md-offset-9><center><input type="text" name="search" placeholder="Search.."></center> </div>
<div col-md-4 ><center><label>Profile</label></center> </div>
<div col-md-4 ><center><label>Settings</label></center> </div>
<div col-md-4 ><center><label>Videos</label></center> </div>
<div col-md-4 ><center><div class="dropdown">
<div class="dropbtn">Dropdown</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></center> </div>
</div>
<hr>
</template>
How can I achieve this using Bootstrap?
What are you asking for ? to give you the full HTML CSS and JS is needed ?
Check this link in Bootstrap the default example es basically what you want.
Logo, links (text or icon links), search bar and dropdown.
All responsive.
Then just play around the styles to get a better copy of this.
What you can do is add some custom classes for existing tags and write your own styles for corresponding classes.
or If you need simple customised version of this you can use this to build it easier
or this one https://work.smarchal.com/twbscolor/
read this if you want even mature look for your nav bar http://blog.jetstrap.com/2013/07/less-like-bootstrap/

Bootstrap 4: switch between cols on mobile

I've built a standard layout with a sidebar using Bootstrap's grid system (EDIT: I'm using Bootstrap 4 but could still switch). It looks like this:
<div class="row">
<div class="col-md-3">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
On mobile, the red area would be above the green one. I need to be able to switch between them in a way that is more convenient than scrolling, for example a switch button:
Also note the different oder of elements in the green area.
Is there a smart way to do this? Or do I have to alter the dom with JavaScript? Thanks in advance :)
You can use jQuery to toggle one of the BS4 flexbox utility classes. For example, apply the flex-last on the first (col-md-3) column.
To switch the order on mobile using a button, toggle the flex-last class...
$('#btnToggle').click(function(){
$('.col-md-3').toggleClass('flex-last');
})
EDIT: To show only one at a time (switch the visibility of the 2 divs using a button) toggle the hidden-sm-down class instead...
$('#btnToggle').click(function(){
$('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})
Demo
In Bootstrap 4, column order can be toggled using CSS only, but this switches the cols based on screen width, and therefore is not triggered by the button.
<div class="row">
<div class="col-md-3 flex-last flex-md-unordered">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Update
As of Bootstrap 4 Beta 3, the ordering classes are named order-*, such as order-1, order-md-2, etc..
Bootstrap 4 uses Flexbox, which means you could utilise the order in which things are displayed.
As usual, you can specify how it's displayed on different viewports using classes like order-last and order-sm-unordered.
flexbox/order documentation

Why does text disappear when the page is loaded? (Wordpress, CSS, HTML, JS issue)

I probably would be downvoded, cause I do not even know how to describe the problem.
I have a website (on Wordpress, template was bought and modified a bit thus I am not much into it yet and do not know all staff about it).
On the left side there is menu and on the right side some "test" text.
<div class="row">
<!-- Navigation Start -->
<div class="col-lg-10 col-md-10 col-sm-8 col-xs-6">
<div class="navigation">
<div class="mmm_fullwidth_container" style="width:1841px;left: -128.859375px;right:auto;"></div>
<!-- navigation here -->
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
test
</div>
</div>
So, everything is simple. Text on right side. However, if I open the website (http://moneyti.co/) the text on right side is seen, but then disappear. There is some *.js or something that creates this effect. The result of *.js (I am not able to say which JS does this, unfortunately) is mmm_fullwidth_container element inside the "navigation" part. This element has the following CSS:
element.style {
width: 1841px;
left: -128.859375px;
right: auto;
}
As a result "text on right part" is somehow "under" this mmm_fullwidth_container.
Even if it is *.js that hides the element, I am not able to make it visible by changing CSS dynamically in browser. The element with text "test" is present in HTML markup, but I am not really able to understand why this text disappears. Why is the text not seen on the screen?

Categories

Resources