I have a full-display revolution-slider with afew of layers on a Webpage. Any time I resize the height of the viewport, the layers moving from the left Side to the center. How can I stop this behavior?
This is my code:
`
<div class="rev-slider-mask"></div>
<!-- main text layer -->
<div class="tp-caption tp-resizeme sliderMainText"
id="slide-layer-01"
data-frames='[{"delay":200,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[-100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":500,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
data-type="text"
data-whitespace="nowrap"
data-x="['left','left','left','left']" data-hoffset="['70','20','50','30']"
data-y="['middle','middle','middle','middle']" data-voffset="['50','100','85','120']"
data-width="auto"
data-height="auto"
data-fontsize="['70','60','60','40']"
data-lineheight="['80','80','80','50']"
data-letterspacing="['0','0','0','0']"
data-responsive="off"
data-responsive_offset="off"
data-paddingtop="['0','0','0','0']"
data-paddingbottom="['15','8','8','8']"
data-paddingright="['0','0','0','0']"
data-paddingleft="['0','0','0','0']"
style="text-shadow: 0 0 20px rgba(0,0,0,0.3); font-weight: 700; color:#fff;">Some Text to show!
</div>
<!-- btn layer -->
<div class="tp-caption tp-resizeme btn_1"
data-actions='[{"event":"click","action":"scrollbelow","offset":"3130px","delay":"","speed":"300","ease":"Linear.easeNone"}]'
id="slide-layer-03"
data-x="['left','left','left','left']" data-hoffset="['70','20','50','30']"
data-y="['middle','middle','middle','middle']" data-voffset="['260','310','282','225']"
data-whitespace="nowrap"
data-type="button"
data-responsive="off"
data-responsive_offset="off"
data-frames='[{"delay":1200,"speed":1000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[-100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
data-textAlign="['center','center','center','center']" style="line-height: 1; padding: 10px 15px; font-size: 16px;font-weight: 600;">Button_Text
</div>
</li>
`
I have searched for parallax-parameters, but I couldn't find any useful ones.
I'm trying to achieve this in Vue. I have got the offsettop value of the container in which my image is getting rendered, now based on some cordinates I thought I'll dynamically append divs of certain sizes over the image, and that they remain fixed on the image when I scroll down or up,i.e if I scroll down the boxes also get shifted with the image to top.Any help is deeply appreciated
I would probably approach this by wrapping the image in a container with relative positioning, have the boxes inside it below the image, and give them absolute positioning.
Then you can adjust their size, and position relative to the container.
Something like this...
new Vue({
el: "#app",
data: {},
methods: {}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<!-- PAGE CONTAINER (tall, to demonstrate scrolling behaviour)-->
<div style="height:150vh; width:150vw; padding:100px;">
<!-- IMAGE CONTAINER (height and width of desired image size, relative positioning)-->
<div style="height: 50px; width:250px; position:relative;">
<!-- IMAGE (full height and width, absolute positioning, left 0, top 0)-->
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/250px-Stack_Overflow_logo.svg.png" alt="stackOverflowLogo" style="height:100%; width:100%; position:absolute;">
<!-- BOXES (absolute positioning, height and width relative to image container,
top/bottom for vertical positioning relative to image container,
left/right for horizontal positioning relative to image container)-->
<!-- BOX 1 OVER IMAGE (over logo)-->
<div style="position:absolute; left:0; top:0; height:100%; width:17%; border: 1px solid red;"></div>
<!-- 'BOX' 2 OVER IMAGE (underline "stack")-->
<div style="position:absolute; left:19%; bottom: -3px; height:0px; width:25%; border: 5px solid green;"></div>
<!-- BOX 3 OVER IMAGE (outline "overflow")-->
<div style="position:absolute; right:0; top: 15%; height:70%; width:50%; border: 2px solid blue;">
<!-- BOX 4 OVER IMAGE (inside BOX 3)-->
<div style="position:absolute; left:73%; top: 53%; height:8px; width:4px; background: orange; border-radius:5px;"></div>
</div>
</div>
</div>
</div>
If you are using a Vue framework like Quasar or Vuetify, I believe you can just use the image as the container though.
In Quasar would be done like so:
<q-img :src="backEndImage" style="position:relative" :height="imageHeight" :width="imageWidth" >
<div style="position:absolute; left:0; top: 0; height:100%; width:17%; border: 2px solid red;"/>
<div style="position:absolute; right:0; top: 10%; height:80%; width:50%; border: 2px solid blue;"/>
<div style="position:absolute; left:19%; bottom: 0; height:0px; width:25%; border: 4px solid green;"/>
</q-img>
A little nicer than having to render and position the container appropriately around the image.
I am using Materialize CSS and I'm trying to center a div. I'm trying to get the white boxes to center on mobile and desktop to the center of the page. All the white boxes are in the same div called root.
index.html
<body>
<div class="container">
<div id="mainContent" class="row">
<div id="root" class="col s12 xl l6"></div>
</div>
</div>
</body>
styles.css
#mainContent {
background-color: blue;
margin: auto;
display: block;
}
#root {
margin: 0 auto;
position: relative;
}
On mobile, it centers the white boxes correctly.
On desktop the boxes are on the left side.
If I add margin-left to .root{} then it's not centered on the mobile version.
I think the best way is to use grid offsets on the columns:
<body>
<div class="container">
<div id="mainContent" class="row">
<div class="col s12 l6 offset-l3"></div>
</div>
</div>
</body>
Adding the class offset-l3 will add an offset of 3 columns on the left for screen sizes l and xl. With 12 total columns and the content being 6 columns an offset of 3 will result in the content being centered.
The style.css can be updated to only set the background-color:
#mainContent {
background-color: blue;
}
I added a wrapper to index.html like so
<div id="mainContent" class="row">
<div class="valign-wrapper">
<div id="root" class="col s12 xl l6"></div>
</div>
</div>
Now the white boxes are centered in the middle on both smaller resoultion displays and bigger.
I would like to have a Twitch player with chat on my site. I need it to be responsive. I am working with Bootstrap.
I have this code
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-1 nopadding">
<div id="player">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" style="border: 0px; top:0px;" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="col-md-2 nopadding">
<div id="chat">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout=" style="border: 0px;"></iframe>
</div>
</div>
</div>
<div class="col-md-offset-1"></div>
</div>
CSS:
.nopadding {
padding: 0 !important; }
I am using this CSS to remove the padding from grid, I need to have player and chat next to each other, without padding.
The problem is that the chat is to small, exactly the height is too small. I can set the height in css, but this height won't change with the player's height. How can I fix that?
You can do this by setting the chat wrapper to absolute and then setting the iframe inside of it to have a width and height of 100% and position the chat-wrapper to left of 50% and give the row that it is all wrapped in a class and a position of relatve. Then at smaller screens you can position the chat wrapper to relative and left of 0 so that it will stack below the player when you get to mobile widths. Here is the markup I used. Also in the example I use col-sm but you can change it to col-md I just used sm because its easier to view in the fiddle demo.
Here is a fiddle demo drag the output screen larger and smaller to see the results at different screen sizes Fiddle Demo
Html:
<div class="container-fluid">
<div class="row player-section">
<div class="col-sm-6 no-padding">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="player" src="https://player.twitch.tv/?volume=1&channel=example&autoplay=false" allowfullscreen></iframe>
</div>
</div>
<div class="chat-wrapper">
<iframe class="chat" src="https://www.twitch.tv/example/chat?popout="></iframe>
</div>
</div>
</div>
Css:
.no-padding{
padding:0;
}
iframe{
border:none;
}
.player-section{
position:relative;
}
.chat-wrapper{
position:absolute;
left:50%;top:0;right:0;bottom:0;
}
.chat-wrapper iframe{
width:100%;
height:100%;
}
#media screen and (max-width:767px){
.chat-wrapper{position:relative;height:300px;left:0;}
}
Another option is to create you own custom aspect ratios, as described in this blog.
If for example you want to show a pdf (A4 size) in your webpage, you can add the following to your style sheet:
.embed-responsive-210by297 {
padding-bottom: 141.42%;
}
Now you can add your custom stylesheet to your iframe:
<div class="embed-responsive embed-responsive-210by297">
<iframe src="..."></iframe>
</div>
By customising the aspect ratio of the different iframes, you can align the heights of all iframes to match mutually. Another advantage is that you follow the bootstrap philosophy.
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)