Check out my fiddle to see what I'm working with:
http://jsfiddle.net/ETKYj/7/
It expands the height until the end of the duration, tripling the size of the page. I want the words to animate the distance of the init/load height of the page for the entire duration.
EDIT: I took the overflow suggestion and it works in fiddle, but if you notice, the words aren't falling at a the duration (slower because the page is shorter), they still fall as if the page is 3 times longer (and they are falling at different rates, which they shouldn't be) They should all behave like "first" falling in unison
Will
body {
overflow: hidden;
}
do what you're trying to achieve?
The following also might do, if you want to do that effect only in a part of the page:
#wordframe {
overflow: hidden;
width: 100%;
height: 100%;
}
.word {
color: #000;
font-size: 200%;
font-family: Gloria Hallelujah;
}
<div id="wordframe">
<div class="word" cue="5">first</div>
<div class="word" cue="10">second</div>
<div class="word" cue="20">third</div>
<div class="word" cue="20">fourth</div>
<div class="word" cue="30">fifth</div>
<div class="word" cue="35">sixth</div>
<div class="word" cue="40">seventh</div>
</div>
Related
I want to switch between two slides by using a scroll and I want to have an indicator
to show which of the two slides that are being shown.
Building the scroll part was not very difficult and has been done.
My problem is:
How can I extract the idx value from the for loop to know which one of the to slides that is being shown?
This so that I can present which slide I am on with the indicators.
Scrolling
This is the code for scrolling between the two images.
HTML
<div class="container_large">
<div v-for="(i,idx) in this.slider_header " class="scroll" :key="idx" >
<div :style="{height:'82px', width:'100%'}" v-if="idx==0" >
Slide 1
</div>
<div v-if="idx==1" :style="{height:'92px', width:'100%'}" >
Slide 2
</div>
</div>
</div>
CSS
.container_large{
width: 100%;
/* width: 90%; */
display: flex;
overflow-x: scroll;
margin-left: 0%;
height: 99px;
position: absolute;
margin-top: 27%;
z-index: 2;
}
.scroll{
min-width:388px;
position: relative;
margin-top: 0%;
border-radius: 8px;
display: flex;
height: 92px;
z-index: 1;
margin-left: 2%;
object-fit: cover;
}
Indicators
This code is for the indicators to show which of the two images that are being shown at the moment.
<div :style="{height:'15px', position:'absolute',marginTop:'51%',borderRadius:'8px',zIndex:'3', width:'30px',marginLeft:'43%',backgroundColor:'grey'}">
<div id="slide1" :style="{borderRadius:'50%',height:'13px',marginLeft:'8%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
<div id="slide2" :style="{borderRadius:'50%',height:'13px',marginLeft:'51%',marginTop:'1.5%', width:'13px', zIndex:'4',backgroundColor:'white'}">
</div>
</div>
I would like to add v-if="idx==0" and v-if="idx==1" to id="slide1" and id="slide2" respectively to show which one of them that is being seen but
since they fall outside of the for loop this doesn't work.
Question
How can I catch the idx value or solve this in some other way to present which slide that I am on?
Ok so I think you have too much v-if inside your v-for.
There is no need to create all of your slides with to then only render one of them with series of conditions.
Have you considered something like this?
<div class="container_large">
<div
class="slide"
:style="slides[activeSlide].style">
{{slides[activeSlide].text}}
</div>
</div>
I have two divs that i transition between using transition-group, which works as it should - however, the content below the divs transitioning, is "jumping" depending on the height of the divs.
What I want it that jumping being prevented, and instead it animates somehow, so I get a nice smooth transition when switching between elements without it "pushing" down to content with a "jump"..
Hope it makes sense :)
I've setup an example on codesandbox here: https://codesandbox.io/s/reverent-stallman-8ixhp?file=/src/components/HelloWorld.vue
The template looks like:
<div class="hello">
<button #click="groupShowOne">Show first {{ gShowFirst }}</button>
<button #click="groupShowTwo">Show second {{ gShowSecond }}</button>
<transition-group name="fade-group" tag="div" mode="out-in" appear>
<div
class="group-element"
v-if="gShowFirst"
style="background-color: yellow"
>
<h3>This is a headline</h3>
<p>This is a text</p>
</div>
<div
class="group-element"
v-if="gShowSecond"
style="background-color: red"
>
<h3>
This is a headline <br />This is a headline <br />This is a headline
This is a headline This is a headline This is a headline
</h3>
<p>
This is a text This is a text This is a text This is a text This is a
text v This is a text v <br />This is a text This is a text This is a
text This is a text This is a text v This is a text v <br />This is a
text This is a text This is a text This is a text This is a text v
This is a text v
</p>
</div>
</transition-group>
<div style="background-color: blue; min-height: 500px; color: #FFF">
Prevent this div from jumping<br />
</div>
</div>
The animation looks:
<style scoped>
.group-element {
width: 100%;
min-height: 100px;
max-height: 20000px;
transition: all 0.5s;
}
.fade-group-enter,
.fade-group-leave-to {
opacity: 1;
}
.fade-group-leave-active {
opacity: 0;
position: absolute;
}
</style>
Try this
Setting the transition property in the passive div:
.ele {
background-color: blue;
min-height: 500px;
color: #fff;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
Let it do some animation
eleStyle() {
return {
transform: this.gShowSecond ? "translate3d(0, 100px, 0)" : "none",
};
},
The div:
<div class="ele" :style="eleStyle">Prevent this div from jumping<br /></div>
What you can try:
Vue has a *-move class for group transitions. However, the transition-group has to be applied to all the elements including the one that has the v-move class, to work.
Here's the article link if you need it for more details: https://vuejs.org/guide/built-ins/transition-group.html#move-transitions
(*-move basically animates items from their original position to their new position, making it smooth, rather than jumpy)
You could still work with what you have and dynamically bind a separate CSS transition for the blue box when showSecond or showFirst equate to a certain value.
Why is colorbox not auto-adjusting the width? Instead it is showing a
horizontal scrollbar.
This is the div that is shown inside the model.
<div style="width:900px">
<div style="float:left;width:640px;height:640px;text-
align:center;background-color:#666;">
<img src="xyz.gif" alt="#" />
</div>
<div style="float:left;background-color:#eee;min-width:260px">
Show buttons here that must show
</div>
</div>
How can I make sure that my colorbox model auto-expands to show 900px div
and no scrollbar?
The div is 708px witdth. Where is it getting this value from?
Another problem:
The height is sometimes 34px, sometimes 600px+ even if I click the same link.
This is wrapping divs from firebug:
<div id="colorbox" class="" style="padding-bottom: 42px; padding-right: 42px; display: block; position: absolute; width: 708px; height: 542px; top: 0px; left: 337px;">
<div id="cboxWrapper" style="height: 584px; width: 750px;">
<div id="cboxMiddleLeft" style="float: left; height: 542px;"></div>
<div id="cboxContent" style="float: left; width: 708px; height: 542px;">
<div id="cboxLoadedContent" style="display: block; width: 708px; overflow: auto; height: 522px;">
Somehow the width of the parent divs are getting calculated.
You're specifying a width of 640px.... change that to min-width and then it would be allowed to grow.
By default, the plugin sizes itself to the dimensions of the digital asset you are displaying with it. But this can be overriden.
Consult the plug-in doc-o and pay special attention to the Dimensions section (height, width, etc.) and consider specifying a value of 100%.
ColoBox docs
I'm experimenting with Dojo, so far it's very cool except for the fact that I can't seem to be able set the width of a TabContainer. I have the following code
<div id="tabs" dojoType="dijit.layout.TabContainer" doLayout="false">
<div id="javaTab" class="myTab" dojoType="dijit.layout.ContentPane" title="Java">
<h1>Hello I'm the Java Tab</h1>
</div>
<div id="rubyTab" class="myTab" dojoType="dijit.layout.ContentPane" title="Ruby">
<h1>Hello I'm the Ruby Tab</h1>
</div>
</div>
This are the CSS:
#tabs {
width: 100%;
height: 100%;
}
.myTab {
height: 600px;
width: 100%;
padding: 0 !important;
}
If I put a menu bar inside the the tabs then I find that their width is larger than my screen so I don't see the complete bar.
So is there a way to set the width of the generated "tab bar"?
Thanks guys!
Yup Peller is right, you can't set the size on each contentPane, but what you can do is to modify the width of the whole thing (tabContainer)
Hey guys, my first question here on stack overflow. Trying to get something pretty simple to work, I'm sure I'm missing something quite obvious. Still getting used to the "standard" css, too many years working with non-functional ones! Heh.
So, sample of what I'm doing:
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
<div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
In essence: The first div is a container, that I would like to automatically overflow as content is added. Inside of that container, I have a popup menu, which I have simplified here. The popup menu appears (as it should) directly under "hello".
My problem, however, is that instead of the popup menu "coming out" of the parent, as would be expected by the absolute position, it is actually causing a scrollbar to appear on the parent.
I know that if I take otu the "position: relative" it works, but then it no longer appars where I want it (directly under the previous element).
What am I missing here?
EDIT: Sample here: http://marcos.metx.net/OverflowTest.htm
first of all - Inline styling is a big no no.
It is best to include a style sheet and apply it to individual div's via the "id" or "class" attributes.
Please read up on standards compliant css at w3schools
The problem is your overflow property.
auto - "If overflow is clipped, a scroll-bar should be added to see the rest of the content"
What you are looking for is "overflow: visible;"
Using position: absolute instead of relative on that middle div will solve your problem. This gives you (with an added border color on the inner-most div):
alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png
And here is the updated source code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: absolute; z-index: 99999">
<div style="z-index: 99999; overflow-y: hidden; position: absolute;
overflow: hidden; height: 200px; left: 0; auto: 0;
border: 1px solid red">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For more on this, see Absolutely positioned box inside a box with overflow: auto or hidden.