Make div positioned fix inside bootstrap carousel - javascript

I want make div positioned fixed inside bootstrap carousel so content down the div can go under it. But nothing seems to work. Here is the link to my fiddle.
I want to makediv class="col-lg-12 col-md-12 col-sm-12 col-xs-12 fixed-div" fixed so that it wouldn't go outside screen.
Anyone can help? I really appreciate it .
Here is the link to my fiddle.

Your fiddle and your question are hard to understand. But if you want something fixed inside your slider you should try adding position:relative; to yourdiv class="item".
Then add the position:fixed to the child div inside that.
Like this,
<div class="item">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 fixed-div">content</div>
Css
.item{position:relative}
.fixed-div{position:fixed}
But fixing something inside a slider does not look good. If you want something to appear in every slide you should put that div inside every div class="item". That is easy.

Not much clear form your fiddle regarding which div you are trying to get fixed position. But the solution can be like this.
<div class="parent-div"> <!--/ Could be your slider wrapper or a single slide wrapper -->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 fixed-div">your fixed content</div>
</div>
And style this way
.parent-div{position:relative;} /*This won't let your fixed-div to go outside of this*/
.parent-div .fixed-div{position:fixed;} /*And you can positon by top,bottom,left,right property*/

Related

how to change bootstrap class col-md-10 into col-md-12 of div using css

I used thumbnail section and view section in my project. So I divided parent div into two div, first is col-md-3(that is thumbnail div) and second is col-md-9(that is view section). Now I want to hide first div and change second div into col-md-12 for small device like mobile or ipad.
Is there any way to make it with media query?
Bootstrap col system for grid has this built in.
When you specify col-md-3 you are saying "at medium screen give this col 3 blocks".
You can also do, side by side col-sm-12 to give it the entire row when on large screen and col-sm-0 to hide it when on smaller screens.
Look here for a better explanation about bootstrap grid system:
https://getbootstrap.com/docs/4.1/layout/grid/
<div class="row">
<div class="col-md-3 d-none d-sm-none d-md-block">THUMBNAIL</div>
<div class="col-md-9">Some data</div>
</div>
This will solve your issue.
For extra small and small screen thumbnail will not appear.

image in html hiding under nav bar in header

i have downloaded an html template and it has a banner after the nav bar, i am trying to replace the image banner with my image, i changed it to the same size of the image in the template and added, the html is like below:
<div class="single-creative-shop-banner parallaxBg bg-img" style="max-width:100%; height:auto;"
data-bg="assets/img/home-banner/home_shop_creative_01.jpg">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="creative-shop-banner-content">
<h2>Minimal Collection</h2>
<p class="mb-0">Unlock The Goddess In You</p>
</div>
</div>
</div>
</div>
</div>
the css is so long , not able to post in the question, my website is https://likhaa.com
the problem is when i am adding the banner image, its not properly displaying, instead some part is hiding under the navbar, and the width is also not proper. is there any code in html to fix it or can anyone help me with my code
Please remove the inline margin of 131px from the div having the class "shop-creative-banner" also remove position fixed from the div which is children of div having id "jarallax-container-0"

How can I remove an element from a ng-repeat, but keep functionality

I'm learning Angular and struggling with something. I'm using a tinder-like library that lets you swipe images left or right. I also have a heart and "X" that will do the same thing.
What's happening is when you swipe left/right, the heart and "X" are being swiped too. I need these to remain stationary. I'm not sure how to do that and still have them render and function normally.
Here's the HTML code:
<div class="ng-swippy noselect">
<div person="person" swipe-directive="swipe-directive" ng-repeat="person in peopleToShow" class="content-wrapper swipable-card">
<div class="card">
<div style="background: url({{person.thumbnail}}) no-repeat 50% 15%" class="photo-item"></div>
<div class="know-label">{{labelOk ? labelOk : "YES"}}</div>
<div class="dontknow-label">{{labelNegative ? labelNegative : "NO"}}</div>
</div>
<div class="container like-dislike">
<div class="circle x" ng-click="$parent.$parent.clickDisike()"></div>
<div class="icon-like" ng-click="$parent.$parent.clickLike()"></div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div><!-- end person-->
If I move the like-dislike container out of the person div, 2 things happen. That container does not render on screen and even if it does, it throws an error.
How can I keep them stationary and keep their functionality as it relates to the app/image they represent?
Thanks in advance.
****EDIT****
Link: http://430designs.com/xperience/black-label-app/deck.php
Try using this css for like-dislike element and place it above the person div
.like-dislike {
position : 'absolute',
top : 10px;
right : 10px;
}
I ended up just removing the $parent.$parent from my ng-click.

How to disable jquery function for thumbnail

I have two sections of thumbnails one set of thumbnails is without jumbotron container and another set of thumbnails is inside the jumbotron container.
Using hover functionality for without jumbotron container thumbnails and want to remove hover functionality for thumbnails which are inside jumbotron container.
Right now hover functionality which i m using is working on both set of thumbnails.
How i can disable hover functionality for thumbnails inside Jumbotron container.
$(document).ready(function(){
$('.thumbnail').hover(
function( ){
$(this).find('.caption').fadeOut(slow); //.fadeIn(250)
},
function( ){
$(this).find('.caption').fadeIn(slow); //.fadeOut(205)
}
);
});
Thumbnails without Jumbotron container
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<div class="caption">
Thumbnails inside jumbotron container
<div class="jumbotron">
<div class="container">
<h2>Featured Categories</h2>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
How i can disable hover functionality for thumbnails inside jumbotron container.
Any help will be really appreciated.
Thanks a lot.
Why not just add an extra class to the ones you want to use. Classes don't necessarily need to be reflective of css styling and can be used for scripting purposes also
<div class="thumbnail myHoverClass">
JS
$('.thumbnail.myHoverClass').hover(...
/* or just */
$('.myHoverClass').hover(...
If that's not practical can do
$('.thumbnail').not('.jumbotron .thumbnail').hover(...
You could try something like
if($('.thumbnail').parents().attr('class').indexOf('jumbotron') != -1)
{
//has a parent of jumbotron
}else{
//no parent named jumbotron
}
There is a difference in jQuery between parent() and parents()

Adding collapsible sidebar

So I have created my website using Bootstrap. I want to add a facebook-like collapsible sidebar. I have tried to divide my website into two columns. One for the sidebar and other for the whole website using col-md-2 and col-md-10 but the problem that was occurring was the site was being overflown towards the right side. This is what I did:
<html>
<head></head>
<body>
<div class="container">
<div class="col-md-2">...Sidebar...</div>
<div class="col-md-10">...Rest of the website...</div>
</div>
</body>
</html>
But the site was overflowing towards the right side. I tried that with many other col-* but to no avail. I also added .clearfix class to the body but still could not fix the overflowing issue.
Q1. How can I fix the overflowing issue?
Secondly, I want to make the sidebar collapsible. I thought I would do that by hiding the col-md-2 and changing the class of the website holder div to col-md-12 and reversing the thing when the user un-collapses the sidebar but the problem I know that would be occurring is that I would not be having a smooth sliding effect.
Q2. How could I make a collapsible siderbar with a smooth slide effect?
Demo of what's happening.
Q1: Have you tried adding a row after the container?
<div class="contianer">
<div class="row">
<div class="col-md-2">...Sidebar...</div>
<div class="col-md-10">...Content...</div>
</div>
</div>
Q2: You can create you sider bar off the top of the screen and animate it in using jquery to slide it down to where you want it when the menu button is clicked.

Categories