I have text content with a 'wipe'-like transition, using jQuery to animate element width. This works fine when anchored to the left, as width is removed from the right side.
See fiddle for simple example: https://jsfiddle.net/4jz7e0dw/5/
You can see in the fiddle, that when aligned left (red) the text stays still and the width animation trims it back from the right. This is good.
However, I now need this to work when aligned to the right.
If I align everything right, the text stays anchored to the left of its element, and width is removed from the right (blue text block in fiddle). This results in a sliding effect rather than the static 'wipe' effect I want. This is not good.
If I align to the right but use direction: rtl; (like the green example), the 'wipe' effect works correctly, but the content of the elements is reversed. This is not good.
How can I have text right aligned and get the width to remove from the left (making the 'wipe' effect instead of a slide), without reversing the content order? Basically I need the same effect as when aligned to the left (red), but mirrored (without mirroring content elements).
I was able to get the desired effect using a flex-box display.
Here is the fiddle: https://jsfiddle.net/4jz7e0dw/11/
By using direction: rtl in combination with flex-direction: row-reverse in the child, the list keeps the original order of elements.
A simple solution would be to put all of the content into a single <li> instead of seperate ones.
<div class="container slide-right rtl">
<ul id="target3" class="slide">
<li>CLICK THIS TO DEMO</li>
</ul>
</div>
If for whatever reason you do need multiple items, another solution would be to simply reverse the order of the elements in your HTML
Try adding this
.slide {
...
unicode-bidi: plaintext;
}
I forked a fiddle: https://jsfiddle.net/am87yhp9/
Is this the effect you want to achieve?
Manipulating the Margin property, and changing the direction from rtl -> ltr.
JQ:
jQuery('.slide').click(function(){
var width = this.clientWidth;
$(this).animate({ 'width': 0, "marginRight": width}, 1500);
});
Related
I have a slider in a <div>. The slider takes an array of slides and each element has a text where there is no word-limit on the text. When I slide left or right, and the different texts are of different lengths, the height of the <div> varies, making it look ugly. I tried using a min-height or a fixed height, but those don't solve the problem, since there will either be too much empty space underneath the text, or, a text once in a while will be longer than the min-height and the size of the <div> will vary again.
What could I do now? Is there a way for me to find out what maximum height the div should have (based on what's the longest text in my array of slides) and then give my div this height? This way there would still be some empty space with the shorter texts, but at least it wouldn't be arbitrary.
Does this sound like an ok solution? I am wondering how I can measure this beforehand though? So I'm thankful for any clues!
If I understand your situation, you have a <div> element that wraps multiple "slide elements" where;
each slide element varies in height based on their text content and,
you'd like the wraping div to natually expand to fit around all slides regardless of the arbitrary height of their content
One solution to this would be to use flex-box which would allow your slides to be arranged horizontally within the wrapper div, while also ensuring that the wrapper naturally expands to fit around it's children (of arbitrary height).
To illustrate this approach, consider the following example where flex box is used to ensure the pink div correctly wraps green slides (of differing height):
#wrapper {
display:flex;
flex-direction:row;
overflow-x:scroll;
background:pink;
}
#wrapper > div {
min-width:30rem;
margin:1rem;
background:green;
}
<div id="wrapper">
<div><p>Short</p></div>
<div><p>Tallest<br>Tallest<br>Tallest<br>Tallest<br>Tallest</p></div>
<div><p>Tall<br>Tall<br>Tall</p></div>
</div>
You could try to use flex display to achieve this. Not sure if it will work with your slider tho, since tho have not posted your code.
You can find an example here
How do I set left on a div so that it always appears centered over another div despite varying in width?
jsFiddle: http://jsfiddle.net/y04nse5x/
I'm trying to get each label to align perfectly over the dot, without needing a container. I'm sure this is possible withoffsetWidth and offsetLeft, but I just can't get the math right.
The dots are placed in arbitrary locations on the page, and each dot has a mouseover event listener that will place a label over the dot. I can get the label to appear over the dot using offsetLeft but it's not centered, because the label can differ in width due to different text that depends on which dot it is appearing over.
My actual website where I'm having this problem: http://briennakh.me/world-around-you/ (hover on the menu buttons on the top right)
In your CSS, you're setting the left of the description. Let's look at what the left is equal to.
hopefully my diagram made sense, thus:
var leftValue = this.offsetLeft-(description.offsetWidth-this.offsetWidth)/2;
http://jsfiddle.net/y04nse5x/1/
You have to take account on description width and button width.
Here's a fiddle: http://jsfiddle.net/khe8j2ms/
But I would probably use additional container and style:
left: 50%;
transform: translateX(-50%);
I am trying to understand the Skrollr javascript script library, and am having difficulty understanding data values, and how they differ between absolute and relative.
I have a background image on a div (about 2x taller than the div) that I would like to scroll down as I scroll down the page. Here is what I have so far.
<div id="jumbotron" data-top="background-position: right bottom;" data-bottom="background-position: right top;" >
What are data-top and data-bottom? As near as I can figure from the documentation, data-top is the top of the div #jumbotron. What I want is that when #jumbotron is at the top of the viewport, the background position is right bottom. Then, as I scroll and the the bottom of #jumbotron reaches the top of the viewport, I want the background image to be right top. This isn't happening. What am i doing wrong?
The skrollr library will transition the CSS on an element based on its data elements. For example, if you had an element as follows:
<div id="element" data-0="opacity: 1" data-100="opacity: 0"></div>
At scroll position 0 (user has not scrolled), the opacity of the element would be 1. Once the user has scrolled 100px down the page, the element would have faded to opacity 0. You can add as many data increments as you'd like.
Regarding data-top, the readme on the skrollr repo says the following:
data-top: When the element's top is aligned with the top of the
viewport
I don't however see anything about data-bottom in the docs. I only see:
data-top-bottom: When the bottom of the element is at the top of the viewport (it's just not visible).
So you might try:
<div id="jumbotron" data-top="background-position: right bottom;" data-top-bottom="background-position: right top;" >
Just consider that the first data is your starting point, and the final data is your finishing point with as many increments along the way as you need.
Skrollr.js needs a data-attribute with two values.
The first describes the alignment to the viewport.
The second the edge (or center) of the element.
It can be a bit confusing, that both are named in the same manner (top, center or bottom).
You can further position the background with percentage values.
This way skrollr can transition between the values.
See this example.
https://jsfiddle.net/4frjantk/
<div class='section'
data-bottom-top="background-position: 50% 100%"
data-top-bottom="background-position: 50% 0%" >
</div>
PS:
The example contains a workaround for containers with 100% height as described here https://github.com/Prinzhorn/skrollr/issues/347
How do I move background images with the window upon resize? I am using a sprite, but if it is too difficult to do it that way that I can change the background image to single images. I have my code below:
html:
<nav class="topNav">
<ulstyle="list-style-type:none">
<li id="daily_sale" style="display:inline"></li>
<li id="my_account" style="display:inline"></li>
<li id="support" style="display:inline"></li>
<li id="shopping_cart" style="display:inline"></li>
</ulstyle="list-style-type:none"></nav>
I also included 2 images. The first one is what is happening at about 1200px. The second is what it looks like at 1000px. What I want to do is slide the 'account, support, shopping cart' images over so that the space between them does not change. The 'sale' image should not move. Do I need javascript or can I do this with CSS?
I think the key question is the size of <a> is zero. so you should add a div into the <a> tag.
please refer to my amendment. by the way, the you should add ul li{float:left} to let the li stand Horizontally
http://jsfiddle.net/Uh5Uh/3/
Try this CSS:
#my_account, #support, #shopping_cart{
position:fixed;
}
In your jsFiddle, I'm getting the entire image stretching horizontally as I change window width. This isn't so much to do with your spacing increasing, it's occurring because your items are all positioned absolutely (so each item's left edge will always be that distance away from each other) and the width of the item itself is widening as you change page width.
Which stops once the window width is less than 1335px.
In short: your media query is mucking with your icons. It's stretching the images (because you used % for background-size, it is sizing the background to the width of the item, which is also a %, so is also getting wider.)
http://jsfiddle.net/Uh5Uh/2/
#daily_sale a{
background: url('http://phantomsupply.com/v/vspfiles/templates/223/images/homepage/daily sale button black site.png');
background-repeat:no-repeat;
}
Basically, removing the background-size (so the image doesn't stretch) don't muck with the min- and max-widths, exchange the left properties on those three items for a right property, set the distances, and it will be fine.
You just have to set a min-width on body so that the items now don't overlap each other (since they're still positioned absolutely.) Alternatively, achieve it with floats instead of absolutely positioned elements.
If you check out this link, you will see that as you scroll down, the navigation has both affix and scrollspy functionality (From bootstrap 3)
http://codepen.io/datanity/pen/thnua
However, if you add white space at the top, the affix/scrollspy occurs in the wrong location. For example, this is with 800px of white space ontop.
http://codepen.io/datanity/pen/haKzg
Now of course here, you can adjust the affix/scrollspy code so that way it works with the 800px height ontop but, my problem is that I have no idea what space I will have on top. Sometimes it will be 2000px other times only 300px. Also, there is no way for me to know the id/class of the divs that appear ontop. Sometimes it will be 10 divs, sometimes 0, and they will always have different id/classes.
Is there a way that the affix and scrollspy can be triggered relative to the container it is in, and not a fixed px location from the top of the body?
Thanks for any help!
Tim
adding this to the top of the js fixed the issue. With this method, it does not matter how much white space or how many divs you have ontop. Your bootstrap scrollspy and affix will always be in the correct place!
$('#mynav').affix({
offset: {
top: $('#mynav').offset().top
, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
});
Add an ID to the section element (located at the top of the HTML page). I'm assuming this is the element that you're concerned about changing heights.
<section id="top-section" style="height:800px;">
</section>
Then add these lines to your JS file:
var $h = $("#top-section").height() + 280;
$("#mynav").attr("data-offset-top", $h);
This queries the rendered height of the section element, and then fixes your sidebar response height accordingly.
If you will also have an unknown amount of sections, then you should wrap the code that creates the sections in a div element. For instance, if you're using PHP to build the section area of your webpage, you should do something like this:
<div id="section-wrapper">
<?php echo "Whatever code you have here" ?>
</div>