Is there a way to move scrollbar position on initialisation when using slimscroll? I found it's possible to do this using jQuery on native scrollbar with "scrollTop", but don't see how would I be able to do it using slimscroll. Here is a fiddle. http://jsfiddle.net/c8d3ohue/
Basically I want the first div to be scrolled down on init, like in this picture.
My code:
<div class="slimScroll" style="overflow-y:auto;height:200px;width:250px">
<div class="child-height-1" style="height:50%;overflow:hidden;position:relative">
<div class="child-content" style="height:300px;background-color:lightgreen">asd</div>
</div>
<div class="child-height-2" style="height:50%;overflow:hidden;position:relative">
<div class="child-content" style="height:300px;background-color:lightyellow">asd</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-scroll/1.3.2/slimscroll.min.js"></script>
<script>
$(function () {
new slimScroll($('.child-height-1')[0]);
new slimScroll($('.child-height-2')[0]);
});
</script>
If you use jquery.slimscroll.min.js instead of slimscroll.min.js, you can do this like this.
For your same HTML above, in the document ready you can do like this,
var itemContainer1 = $(".child-height-1");
itemContainer1.slimScroll({
height: '200px',
start: 'bottom',
alwaysVisible: true
});
var itemContainer2 = $(".child-height-2");
itemContainer2.slimScroll({
height: '200px',
start: 'top',
alwaysVisible: true
});
See a fiddle,
http://jsfiddle.net/anjanasilva/uypabr6o/
How it looks,
Hope this helps.
Related
<html>
<body>
<div class="hdd">
<div class="hdd_Left">
A
</div>
<div class="hdd_Center">
B
</div>
<div class="hdd_Right">
C
</div>
</div>
</body>
</html>
I want to use call a variable
<script>
$(".hdd").each(function() {
$(this).fadeTo(500,1);
$(this).getElementsByClassName("hdd_Left").animate({'margin-right': '100px'},"slow"); //doesn't work
}
</script>
$(this).getElementsByClassName("hdd_Left").animate({'margin-right': '100px'},"slow");
This line doesn't work.
Thank you
You should actually write. Do not mix Vanilla JS and Jquery.
$(this).find(".hdd_Left").animate({'margin-right': '100px'},"slow");
The problem you are facing is that there is no getElementByBlassName method call on that object.
Actual error when calling getElementByBlassName
Instead, you need to use something like:
$(document).ready(function(){
$(".hdd").each(function() {
$(this).fadeTo(500,1);
var childrenItems = $(this).children(".hdd_Left");
childrenItems.animate({'margin-right': '100px'},"slow"); //works fine
})
});
Since the above code works 100% but didn't do much on my screen, I have added an additional method to show you another way of doing it in jquery, but with some animations on all child items:
$(document).ready(function(){
$('.hdd > div').each(function () {
$(this).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
})
});
I'm developing an wordpress theme and I'm using Isotope or Masonry for the masonry layout. Also I'm using Visual Composer to insert custom elements that i mapped to Visual Composer. I have a container which has no styles and all these items have a div with a class "overlay" that's absolutely positioned and has 100% width and height. It's purpose is to position the white box ( class "content" ) inside of it. Isotope has been giving me a hard time in a previous wordpress theme.. I have no idea why. Here's the image.
Here's the markup for an item:
<div class="masonry-item">
<img/>
<div class="overlay">
<div class="content">
<!-- Just some text here
</div>
</div>
</div>
ANY suggestions are more than welcome, because I can't seem to get it to work in ANY way. Most of the layout methods just end up overlapping all of the items in the most top left corner of the container. Yes, I've tried using ImagesLoaded.js, and it hasn't made a difference.
Masonry JS:
$(".masonry-grid").isotope({
itemSelector: '.masonry-item'
});
.masonry-item CSS:
.masonry-item {
position: relative;
margin-bottom: 30px;
}
It would seem that if they ALL have equal width like 50% it will work flawlessly. Like Deepak Thomas noted in the comments. But as soon as i put a random style for each element, like 30, 40, 50, 60, 70% width it starts to break. In some cases it would put elements next to each other, most of the time leaving a gap between them if they are not in the first row, and the other times it would just stack them one on top of another even though the two items can clearly be put side to side and still have room to spare.
EDIT: Tried removing the image. No difference.
Thanks in advance!
try this :
var $post_masonry = $('.masonry-grid');
$(document).ready(function () {
if ($post_masonry.length) {
$post_masonry.isotope({
itemSelector: '.masonry-item',
layoutMode: 'masonry',
percentPosition: true,
masonry: {
columnWidth: '.masonry-item'
}
});
}
});
Recommended to use imagesloaded.pkgd.min.js to apply isotope when images already loaded.
var $post_masonry = $('.masonry-grid');
$(document).ready(function () {
if ($post_masonry.length) {
var $masonry = $post_masonry.imagesLoaded(function() {
$masonry.isotope({
itemSelector: '.masonry-item',
layoutMode: 'masonry',
percentPosition: true,
masonry: {
columnWidth: '.masonry-item'
}
});
});
}
});
if ($post_masonry.length) --> is optional. Usually applied with dynamic ajax.
From the code you shared, it seems masonry does not provide default sizes to its items.
For every masonry-item, give an additional class
E.g:
.half { width: 50% }
.full { width: 100% }
.pad { padding: 15px }
And use this on the items as you find them apt.
E.g:
<div class="masonry-item half">
<div class="pad">
<img src="xyz" />
<div class="overlay">
<div class="content">I'm the overlay content</div>
</div>
</div>
</div>
That should solve it.
The problem is that the first masonry item is being taken as the columnWidth option for isotope. So just make sure that the first time is the smallest one of your columns.
I'm setting up a one page website, I want to vertically center a containing div within a div with 100% viewport height, currently I have -
function vertmiddle() {
var height = $('.vertmiddle').height();
var windowheight = $(window).height();
var vertmiddle = ((windowheight) - (height)) / 2;
vertmiddle = parseInt(vertmiddle) + 'px';
$(".vertmiddle").css('margin-top',vertmiddle);
}
$(document).ready(function() {
vertmiddle();
$(window).bind('resize', vertmiddle);
});
Edit, Here is an example of the HTLM I'm using as well -
<section id="community" class="full">
<div class="container">
<div class="vertmiddle">
content
</div>
</div>
</section>
It's working fine but all of my containing divs are getting the same margin amount because they all use the same class and it's just using the first div on the pages height.
How can I set it up so each containing div has the correct margin. I can probably make this work with unique classes and just repeat the script but I'm sure there's a cleaner way to do it.
Sorry if I'm unclear I'm new posting here.
thanks
Use this
function vertmiddle() {
$('.vertmiddle').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : -$(this).width()/2,
'margin-top' : -$(this).height()/2
});
}
Or may be you try this
$('.vertmiddle').css({
position:'absolute',
left: ($(window).width() - $('.vertmiddle').outerWidth())/2,
top: ($(window).height() - $('.vertmiddle').outerHeight())/2
});
Here is a solution that works, but you will need to add id attributes to your HTML. I have found trying to call jQuery methods that measure window objects using classes to be very buggy, where the same methods used on ids never give me any problems. Anyway, here is one approach...
<section id="community" class="full">
<div id="container" class="container">
<div id="content" class="vertmiddle">
content
</div>
</div>
</section>
function vertMiddle(){
var element_height = $('#content').height();
var element_offset = (window.innerHeight - element_height) / 2;
$('#content').css('margin-top', element_offset +'px');
}
$(document).ready( function(){
vertMiddle();
$(window).on('resize', vertMiddle);
});
Here is a working JSFiddle example
I am looking to dynamically change the image shown in the jQuery Dialog. I am trying to pass the ‘image path’ as parameter which will be used to change the image shown in the jQuery dialog. Please! Check my code below.
By default, it will show ‘images/firstImage.jpg’ in the jQuery Dialog. Now, I am trying to change it to ‘images/secondImage.jpg’ through jQuery Dialog parameter.
<link href="jquery/jquery-ui.css" rel="stylesheet" />
<script src="jquery/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
$(function () {
// this initializes the dialog (and uses some common options that I do)
$("#dialog").dialog(
{
autoOpen: false,
modal: true,
show: "blind",
hide: "blind",
width: "50%",
height: "auto",
resizable: false,
position: 'center',
overflow: "hidden",
});
});
function OpenGallary(photoSrc) {
$("#dialog").dialog("open").data("param", photoSrc);
}
</script>
<body>
<a onclick="OpenGallary('images/secondImage.jpg')">Click ME</a>
<div id="dialog" title="Photo Gallary">
<div id="aa" style="width: 800px;">
hello this is my world.
</div>
<p>
<img src="images/firstImage.jpg" />
</p>
</div>
</body>
Your function OpenGallary (I think you mean Gallery, but I digress) is just setting the data attribute on the dialog div, which is not going to affect the image tag.
The OpenGallary function can be changed to something like:
function OpenGallary(photoSrc) {
// Change the src attribute directly on the img in the dialog:
$("#dialog img").attr("src", photoSrc);
// Now that the dialog html is updated, open the dialog:
$("#dialog").dialog("open");
}
Depending on what you're trying to do, you may want to select the img directly with an id on the tag - the selector used above is just for working with the existing html.
I am trying to use the .click function with the overlay from jQuery tools, but it is not working.
HTML:
<p id="click">Clikc here:</p>
<div class="pop">
<div>
<p>some text here</p>
</div>
</div>
jQuery function:
$( "#click" ).click(function(){
$( ".pop" ).overlay({
top: 10,
mask: {color:'#595959',loadSpeed: 1000,opacity: 0.5},
closeOnClick: false,
api: true
});
I have already added the (document).ready at the top. I want the overlay to pop up when the user clicks the text.
You need to separate the code to 2 operations, 1. Define the overlay, 2. programarically launch the overlay. See this demo
jQuery(function () {
$("#click").click(function () {
$(".pop").overlay().load();
});
$(".pop").overlay({
top: 10,
mask: {
color: '#595959',
loadSpeed: 1000,
opacity: 0.5
},
closeOnClick: false,
api: true
});
})
Demo: Fiddle
I have found the problem. The problem is in the jQuery tools version 1.2.5, it seems as if the overlay is not a method and also in the 1.2.6. What I had to do is use the version 1.2.7 and it worked. I loaded it right after my original jQuery.
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src=""http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js""></script>