My exact question is related to using skrollr js like plugin.
I have features section with image and its features.Features are in list-items div and image is in another div.These two divisions are col-sm-6 side by side.
What I exactly trying to do is just to fix the position the image division exactly at center after it is scrolled into view-port center.So that if someone scroll-down to view the image, it should remain fixed after its center touches view-port center.While image remains fixed, list items should be scrolled.
Image position will become again static and scrolled with content after last list-items goes out of the view-port. So any suggestion...
Here is the code
<div class='container'>
<div class='row'>
<div class='col-sm-6'>
<ul class='featuresnav'>
<li>Graphically Rich</li>
<li>Fully Adaptable</li>
<li>Colors used</li>
<li>UI/UX Compatible</li>
<li>Awesome coding</li>
</ul>
</div>
<div class='col-sm-6'>
<img src='images/mobile_tablet.png' alt="display image"/>
</div>
</div> <!--row ends-->
</div> <!--container ends-->
$(document).ready(function(){
$(window).scroll(function(){
if(($(window).scrollTop())>($('#content').offset().top+$('#content').innerHeight())) {
$('#divv').css({'position':'fixed','top':$(window).outerHeight()/2});
}
else{
$('#divv').css({'position':'relative'});
}
})
})
#content-initial{
margin-top:1500px;
}
#divv{
width:100px;
height:100px;
background:green;
}
#content{position:relative;}
#somemorecontent{
height:1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-initial"></div>
<div id="content">
<ul>
<li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</div>
<div id="divv"></div>
<div id="somemorecontent"></div>
Related
I have a banner in my page. I managing the design with bootstrap. The image with the id ”mybanner” is created dynamically from the code. So there are times that my code may not have at all the image element.
I would like to specify a minimum height for the div id ” myhorizontalbanner” so if there is not present at all the image element to display as banner the div id ” myhorizontalbanner” colored with red color.
My code when the image is there
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
<img id="mybanner" src="images/mybannerimage.jpg" class="img-fluid" /> <!--This Image
element is comming dynamically-->
</div>
</div>
</div>
My code when I dont have image
<div class="row">
<div class="col-12 bg-red-banner">
<div class="row" id="myhorizontalbanner">
</div>
</div>
Have you tried with min-height ?
For example:
#myhorizontalbanner {
min-height: 150px;
}
In the employee section of a Wordpress site, I'm trying to have the bio slide open in the correct position when you click on each employee photo.
It's working well when the row is full width (4 columns) and in mobile (1 column) but in the 2 column layout (480px to 882px), position().left is returning 0, so the negative margin isn't being properly applied and the bio goes offscreen.
I can't for the life of me figure out why this is... Any help is greatly appreciated!
The site in question: http://contractor-marketing.website/
The HTML (simplified):
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
</div>
The JS:
jQuery('.column').each(function(s, el) {
jQuery(this).find('.bio-full').eq(0).css('margin-left',-(jQuery(el).position().left));
});
Check my example below. Although I took a different approach, it essentially does what you want, and it even animates the element transition.
NOTE: This animation will happen EACH time you press the animate button. You must prevent such animation from happening more than once (if that is the behavior you are looking for). Also, change the $('#animate') selector and click event to the event of your choice.
$('#animate').click(function() {
$(".bio-full").animate({
left: "+=300",
}, 1000, function() {
// Animation complete.
});
});
body{
padding:0;
margin:0;
}
.bio-full{
background-color: red;
display:hidden;
position:relative;
width:300px;
left:-300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="animate">Animate</button>
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
</div>
I hope this helps!
Cheers!
I am creating a web page with 3 vertical templates. I used bootstrap grids and the grids are fixed but I want to strech them .Is there any way to do in Angular js and bootstrap.
Here is my code:
<body ng-controller="MenuController as menuCtrl">
<div class="row no-gutter">
<div class=" col-lg-3 mainmenu">
<h1> main menu </h1>
</div>
<div class="col-lg-3 secondmenu">
<h1> second menu </h1>
</div>
<div class="col-lg-6 thirdmenu">
<h1> detailed view </h1>
</div>
</div>
</body>
here is my css file is:
.row.no-gutter [class*='col-']:not(:first-child),.row.no-gutter [class*='col-']:not(:last-child) {
padding-right:0;
padding-left:0;
}
/* only for column content visible */
.col-lg-1>div {
background-color:#ddd;
}
Let me first present my code sample:
<div id="StartScroll"></div>
Many divs and content here !
<div id="EndScroll"></div>
My question is that how can i make a scroll bar which starts to scroll from div with id StartScroll and end scroling at div with id EndScroll .
Note that there is content before StartScroll and after EndScroll but i want the scroll bar should not be allow to go outside StartScroll and EndScroll .
How can i make this? Maybe with jQuery ?
Thanks in advance!
overflow-y: scroll could be the solution
http://jsfiddle.net/ds3nqbkz/2/
<div id="StartScroll" style="overflow-y: scroll">
Many divs and content here !<br />
Many divs and content here !<br />
Many divs and content here !<br />
</div>
Wrap the content within the startScroll and endScroll division blocks within a div and assign the following style:
overflow-y: auto;
height: 200px; (or any specific height you wish to)
Try this:
Check here
.makescroll {
height:150px
overflow-y:scroll;
}
<div class="makescroll">
<div id="StartScroll"></div>
<div id="EndScroll"></div>
</div>
You then to wrap your content in single div and give it fixed height and make overflow-y : auto or scroll.
overflow-auto :- Will show scroll only if your content is more than height. Else it will be remove.
overflow-scroll :- Will always show scroll, in case content is less it will show disabled scroll.
You can use any of below approach to apply it. Examples have scroll you can change to auto if needed.
#fixed{
height:150px;
overflow-y:scroll;
}
<div id="StartScroll"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
#
<div id="StartScroll" inlineStyle="height:150px;overflow-y:scroll;"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
##############################################################################################
fixedStyle{
height:150px;
overflow-y:scroll;
}
<div id="StartScroll" class="fixedStyle"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
##################################################################################
documentById("fixed").style = "height:150px;overflow-y:scroll;";
<div id= "StartScroll"></div>
<div id="fixed">
// other content ere
</div>
<div id="EndScroll"></div>
</div>
I have three sections with a default logo...left,middle and right..on mouse over all sections are changing one by one with their own respective logo.
When I mouse-over the left section it has changed with its logo but the problem is when I mouse-over that logo on left section its turned into the default section ( means left section vanished along with its logo)that I don't want.
I need the mouse effect will be Off when i mouse-over the left section logo, same thing will be applicable on the other two section..
The Html :
<div id="container">
<div class="logo">
<img src="http://wphooper.com/svg/examples/circle_filled_with_pattern.svg">
</div>
<div class="main" id="left">
<div class="dot1-top">
<img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt="">
</div>
<div class="showhide">
<div class="main1 hide" style="background-image:url(http://bestwallpaperhd.com/wp-content/uploads/2012/12/vector-art-background.jpg)"></div>
</div>
</div>
<div class="main" id="middle">
<div class="dot2-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide2">
<div class="main2 hide2" style="background-image:url(http://www.vectorfree.com/media/vectors/yellow-background-red-swirl.jpg)">
</div>
</div>
</div>
<div class="main" id="right">
<div class="dot3-top"><img src="http://www.subblue.com/assets/0000/2881/circle-guide_square.gif" width="53" height="52" alt=""></div>
<div class="showhide3">
<div class="main3 hide3" style="background-image:url(http://hdwallpaper2013.com/wp-content/uploads/2012/12/Windows-7-Background-HD-Wallpaper-1080x675.jpg)">
</div>
</div>
</div>
</div>
And Here's the jsfiddle
You need to add a hover effect on the class logo-middle.
e.g.
$(".logo-middle").hover(function mouseIsOverImage() {
/* keep the image */
}, function mouseIsOffImage() {
/* make the image what it was before */
});
By the way, you also should adjust your hover functions to clear the animation queue. If you quickly mouse over and off of the sections several times you'll see that there are many animations that get queued up and then all continue run until they're done. $.clearQueue() should do the trick.
I'm not sure if this is what you need but I did a little cleanup to your markup and CSS and came up with this solution for the hover effects
$('.bg').hide();
$('.main').hover(function (){
$(this).siblings('.main').find('.bg').stop().fadeOut();
$(this).find('.bg').stop().fadeIn();
$('#logo img').attr('src',$(this).data('logo'));
}, function () {});
$('#container').mouseleave(function(){
$('#logo img').attr('src',$(this).data('logo'));
$('.main .bg').stop().fadeOut();
});
You can check the updated fiddle here