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()
Related
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.
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"
Background/skill: I am starting to test out using bootstrap 4 (first time using bootstrap) for a custom Wordpress theme. I have the basic understanding of HTML and CSS, but with the newer CSS and with any jQuery or javascript, I am fairly clueless and usually just hacking code I find online to try and make it work for me, with little understanding of how/why it works if I succeed.
Missing out a bunch of page header info link links to scripts and stuff which I do understand may eventually affect any suggested method, and just to keep it simple. For now I have the following HTML so far:
<div id="page" class="site">
<div id="header" class="container-fluid">
<div id="masthead" class="site-header row row-eq-height">
<div id="logo" class="col-sm-4 col-md-6 col-lg-3"></div>
<!--logo-->
<div id="fruits" class="align-self-center d-none d-md-block col-md-3 col-lg-6"></div>
<!--fruits-->
<div id="social" class="d-none d-md-block col-md-3 col-lg-3"></div>
<!--social-->
</div>
<!-- #masthead -->
</div>
<!--header-->
<div id="jumbotron" class="row">
<div id="notice" class="align-self-center col-md-3"></div>
</div>
<!--jumbotron-->
<div id="content" class="site-content"></div>
<!-- #content -->
<div id="footer" class="container-fluid">
<footer id="colophon" class="row"></footer>
<!-- #colophon -->
</div>
<!--footer-->
</div>
<!-- #page -->
The jumbotron has a background image and a div (#notice) inside it which will float to the left with some text inside. I want the div to take up all remaining viewport space after the header. I have managed to get the jumbotron div be the height of the viewport minus the header using the following CSS:
height:calc(100vh - 155px);
But this only works if I know the height of the header is 155px. In reality, it changes at different screen widths and depending on content.
Is there a way to set the CSS to use a calculation for the dynamic header?
If not, do I need to use some kind of jquery or javascript? If so, I would be very grateful for some fairly detailed instructions.
Note: I do not want the #jumbotron to be the height of the page and sit behind the header div as a solution because the background image display is important.
Thank you in advance :)
Since you can't know easily the height of the header in every device because it is a percentage of the height... And because it depends on a big bunch of CSS rules form BootStrap and your Wordpress theme... You will just measure it to deduct the remaining space.
<script>
$(document).ready(function(){
function adjustJumbotronHeight(){
var headerHeight = $("#header").outerHeight();
var viewportHeight = $(window).innerHeight();
var remains = viewportHeight - headerHeight;
$("#jumbotron").css({"height":remains});
}
// On page load
adjustJumbotronHeight();
// On resize (or mobile orientation change)
$(window).on("resize",function(){
adjustJumbotronHeight();
});
});
</script>
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*/
I'm using the fullPage.js plugin to develop a project. The plugin works fine, but I have one question:
I have some sliders within a section so as to create vertical scrolling. However, within one slider I have different links that I also want to trigger vertical scrolling in the same way as the plugin does. Here's how my structure looks like:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide">
Example
...
</div>
<div class="slide" id="example"> Slide 3 </div>
</div>
</div>
So, just like I click on the arrows and the different sliders appear, is it possible to click on a link and then a specific slider to appear? The idea is that the Slide 3 will contain content that will change depending on the link that is clicked.