OK so I have a jQuery interactive which is fed from a Google spreadsheet. I've created certain classes which are added if there are multiple divs in exactly the same position (.offset1, .offset2 etc.).
Ive added some css declerations which then shift those divs with those classes 20 or 40 pixels to the left or right...
$('.position4.offset1').css({'left':'+=20px;'});
$('.position4.offset2').css({'left':'+=40px;'});
$('.position4.offset3').css({'left':'+=60px;'});
No matter where I put these in my jQuery they don't seem to be applying to the actual page. I thought the extra specificity of these decelerations would get rid of any problems of it not adding.
You can see the currently confusing graphic here. Scroll down and you may see some of the dots are brighter. This is where there are overlaying divs. They have the appropriate classes but haven't shifted.
http://thetally.efinancialnews.com/tallyassets/pension-hole/index.html
Hope that makes sense. Thanks
If you want to achieve relative positioning like that, you can achieve it like so:
$('.position4.offset1').css({
left: $('.position4.offset1').position().left + 20 + 'px'
});
Having answered this, I've realised that on later versions of jQuery what you've coded should work:
$('div').css({
'left':'+=20px;',
'top':'+=50px;'
});
div {
background:red;
height:30px;
position:absolute;
width:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
Looking at your web page you have version 1.6.1 of jQuery. I would suggest either updating that to a more up to date version, or if that's more effort than it's worth, just use the first method I mentioned which does work. I've tested it using the console.
Update your jQuery version.
Documentation specifies your properties should work in 1.6 forward but I could only achieve it in 1.7.2.
As of jQuery 1.6, .css() accepts relative values similar to
.animate(). Relative values are a string starting with += or -= to
increment or decrement the current value. For example, if an element's
padding-left was 10px, .css( "padding-left", "+=15" ) would result in
a total padding-left of 25px.
Also, if you want to update just one property, you can also do:
$('.position4.offset3').css('left', '+=60px');
Related
I have some elements whose properties are altered via the jQuery animate() method like that:
$('#mySidenav').animate({"width": '-=190'});
$('#main_address').animate({"padding-left": '-=190'});
$('.oberflaeche').animate({'margin-left':'-=190'});
Additionally I have another absolute positioned element within the .oberflaeche element which needs to be extended after the content moves to the left due to the operations named above in order to still properly fit into its container.
To do so I use the css property clip-path which works fine:
clip-path: inset(0px var(--clipSize) 0px 0px);
The only problem that occurs is that I have to alter the clip-path property dynamically as the window sizes are differing. Currently I am doing that via class-based css as I am not sure if it is possible with jQuery. Because of the different approaches (jQuery vs. css) the two effects are not being displayed simultaneously - the css clip-path effect is incongruous. I already tried to cover that problem using the transition-delay property as well as a transition-timing-function but I had no luck.
So the question is: Is it possible to animate the clip-path property like it can be done with the css properties of width or padding to achieve a consistent effect? I am looking for something like
$('#dynamic_element').animate({'clip-path': 'inset(0px '+variable_pixel+' 0px 0px)'});
which I can call where I also call the other animations.
Any help is highly appreciated. Thanks in advance!
Based on georg's proposal (see: https://stackoverflow.com/a/16857838/7323120) I was able to figure it out myself. Using the animate method you can iterate over custom value ranges and adjust the respective css in the method's callback like:
$({step: 0}).animate({step: 80}, {
step: function(val) {
// val equals the current step
$('#target').css('clip-path', "inset(0px "+val+"px 0px 0px)")
}
});
I have a weird problem and i cant find a solution no matter what i tried.
I have a simple menu that toggles few divs (slide up/down), like this:
<div class="navigation">
<ul class="left">
<li>lorem1</li>
<li>lorem2</li>
<li>lorem3</li>
</ul>
</div>
and a few divs that are being toggled.Pretty simple but there is a lot of code, so i wont paste it here.
Script that makes it work is:
$('.navigation a').click(function() {
var $requested = $(this.getAttribute('href'));
$('.top-drawer').not($requested).slideUp('slow');
$requested.slideToggle('slow')
});
Once the user clicks on the link, the div slides down more than it should, flickers and then it becomes the real height (the height is should be).
Here is a Fiddle. Please be sure to have the "Result" Window at at least 1000+ px wide otherwise it wont work (the error wont be shown).
See my suggestion on this JSFIDDLE
Here an explanation of the changes in there:
The Problem
With all those floating elements inside each .top-drawer jQuery has a lot of issues calculating the height of the div because the elements will move around while sliding up and down.
Suggestion
Switching to inline-block instead. But for that to work with your CSS, particularly with the padding on each .top-drawer, you need to use box-sizing: border-box; on anything that is using padding, inline-block and width with %. If curious you can read about this HERE.
New problem
If you go the route of inline-block (best practice now). You will need to use jQuery 1.8.xx or higher. I noticed in your fiddle you use 1.7.2, which has a bug with border-box that was fixed in versions after that.
Try to understand the code you are using.
This is the way I think jQuery's slideUp(), and slideDown() works; mainly the algorithm changes the height of the element, and display after the height is equal to the height of the element or at "0".
So when you will have your element's position set to relative you will see what you're calling "flickers", specially when you have multiple element at the same position. You will also see these "flickers" when you use fadeIn(), fadeOut() etc, because the display of the element is not instantly set to "none" or anything visible in these cases, but after the animation completes.
Solution:
Set the element's position to absolute. That should solve your issue;
example.
jQuery's .width() method doesn't seem to account for scroll bars. This is problematic for me, since I'd like to set the width of some children to equal the width of their parent. I used jQuery similar to the following:
$('#contentDiv').width($('#containerDiv').width())
In this example, #contentDiv is the element I'd like to size, and I want to set it to have the width of #containerDiv, which is its parent element. My problem is that this cuts off the side of #contentDiv, as seen in this fiddle.
In my actual code, I have several elements that I'm sizing with jQuery, which all need to fit in the scrollable div, so just setting the css of #contentDiv to 100% is not an option. What's the best way of dealing with scroll bar widths of divs in jQuery?
The best solution I found while working around this solution is this:
http://chris-spittles.co.uk/?p=531
jQuery is all powerful and everything but sometimes a small dash of native JS is all you need to render pixel perfect pages... I hope you will find this solution helpful!
UPDATED:
None of the jQuery width-finding methods account for the scroll bar. In my original example, using .innerWidth(true) LOOKS like it works, but only because it returns and object, which causes width to fail and the inner contents size themselves to fit in the available space, because the example wasn't very good. However, it's possible to write a function to compute the available space in a div with a scroll bar in it, which can then be used to position the contents as you wish.
To write that function, I took advantage of the fact that, when a div is appended to a div with a scroll bar in it, it takes up the full available width (i.e. the inner width of the parent minus the width of the scroll bar).
The function looks like this:
function noScrollWidth(div){
var measureDiv = $('<div id="measureDiv">');
div.append(measureDiv);
var width = measureDiv.outerWidth();
measureDiv.remove();
return width
};
I then use this to size my content div:
$('#contentDiv').width(noScrollWidth($('#containerDiv')));
Working fiddle.
Try this:
$('#contentDiv').width($('#containerDiv')[0].clientWidth)
For more information about that solution, see this StackOverflow answer.
Another approach I'd try is setting both elements' box-sizing property to 'border-box', and see whether setting your contentDiv's width to 100% then works the way you want.
Now that fewer projects worry about crufty old browsers anymore, 'border-box' can make things easier to work with. Be sure to test multiple browsers on multiple platforms, though, because I'm not sure they all handle scrollbars the same way.
FIDDLE IS HERE (logs to console)
The situation is when the page starts out with a <H1> that has a margin-top greater than the margin found on <body>.
This causes the <body> to be pushed lower in the page yet $('body').offset().top remains set to the <body>'s margin-top. This of course causes my debug element (which highlights the position of elements) to be incorrect since the body's dummy element is now in the wrong position.
Curiously the rest of the $(elem).offset() values are correct for any descendant of <body>.
Is there a fix for this short of manually checking the margin-top of the recursively first childs of body with a while loop?
Noticing the issue on Safari 6 though I suspect I'll find it on Chrome as well.
It might work to use the offset plus the difference of the height of the html element minus the body element.
console.log("body.offset().top = "+ ($('html').offset().top + $('html').height() - $('body').height()));
Update: This solution will only work if there is not a margin-bottom on the page.
You could additionally add a clear div at the bottom of the page.
$('body').append("<div style=\"clear: all;\"> </div>");
Note that the div must have content to work.
http://jsfiddle.net/SCGdZ/7/
I found a John Resig post about how fast and awesome getBoundingClientRect is here... I wonder why it is not used for jQuery's offset()!
I shall use this method instead and hopefully it will not suffer from this same issue.
Update: Looks good! (the non integer top value is due to the somehow having style -webkit-margin-before: 0.67em;)
You can see that the body has margin=8
jQuery 1.9.0 has addressed this issue. Thanks so much, jQuery is awesome.
Find Here
a[0].style.marginTop it remains uninitialized even after declaring it in css that's why it was returning nothing.
Therefore we must take care of initializing a[0].style.marginTop
Ive done this a number of times with no problem but for some reason it is a problem on Here. The slide down will begin to work (1/3) normally and than all of a suddenly jerk and finish the animation. slideing up works fine. this is the case for slideDown(), slideToggle and .animate()
strangely if i also toggle opacity in the animate function it does not jerk but my text will briefly change color.
HTML:
<h2>Phthalate Free: </h2><div class="yamikowebsToggler">
<p>
Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products.
</p></div>
CSS: i read else were that margins can cause the jerkiness but this isnt helping
h2{color:#76DEFC; margin:0px;}
.yamikowebsToggler{margin:0px;}
p{margin:0px; color;#000000;}
JQUERY:
$(document).ready(function(){
$(".yamikowebsToggler").fadeOut(0);
$("h2").click(function()
{
$(this).next(".yamikowebsToggler").stop(true, true).animate(
{ height: 'toggle' },
{
duration: 1000,
});
})
});
I found the solution. it had nothing to do with my code but a bug in jquery. jquery has trouble getting the height if it is inherited because when it is getting the height the element is hidden. when elements are hidden they are treated with css properties of
position: absolute;
visibility: hidden;
to fix this you need to specify the height in either the animation which is not doable in my case since i have many that are toggled. the alternative is to set the height to the elements. i personally added a note in my jQuery about it and did it all in line simply adding
style="height: <height in px>;"
to the elements being toggled.
I had a similar issue when animating a division from 100% down to 0% width.
What was happening was that at the start of the animation the division got wider to like 110% for some reason.
Anyway I found the solution was to add max-width: 100%; in the CSS styles on the specific division.
Just thought I'd post that here as I came here looking for a fix to this issue. :)
Have you tried increasing your {duration: ...}? Also, you could just use the built-in jQuery function .slideToggle().
I know this is marked as answer, but would like to provide an update on this issue.
The corresponding issue ticket is here:
http://bugs.jquery.com/ticket/4541
However it's been closed by core devs, and seems like it won't be fixed unless there's a patch that has no performance flaws.
In the mean time, if you still wish to use jQuery to do this, you can either set the height or the width of the element you're trying to slideUp or slideDown. It doesn't have to be in "pixel" unit, it can be in percentage as well.