I have (in bootstrap) div in div. The div in "bottom" is a background (gradient, and smaller height than foreground DIV) and in foreground is an image + tekst. div in div with image and gradien behind
The LOGO is an image, SOME TEXT will be in same div with LOGO, and the gradient DIV is behind...
I hope You undertand what I mean... Thnks in advanced
.container-color-nospace {
background-color: #fff;
}
.preporucujemo {
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 12%, #27aae2 100%);
background: -webkit-linear-gradient(left, #ffffff 12%,#27aae2 100%);
background: linear-gradient(to right, #ffffff 12%,#27aae2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#27aae2',GradientType=1 );
}
<section class="container container-color-nospace">
<article class="preporucujemo">
<article>
<img src="img/logo_plavi.png" class="img-responsive center-block" alt="logo"> SOME TEXT
</article>
</article>
</section>
Related
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.
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 tried to place an h1 element above a div element using the css property z-index, but it's not working!
Here's my html:
<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>
The #headerblock has a black surface including some transparency.
I want the h1 to be appearing above the #headerblock. As I mentioned the z-index property isn't working. Does someone have a solution for this? Or at least a reason why it's not working?
Thanks.
Gotta have a position on the h1.
h1 {
position:relative;
z-index: 500;
}
#header{
background-image: url(img/head.jpg);
background-size: 100%;
height: 520px;
width: 100%;
top:49px;
position: absolute;
margin:0 auto;
text-align:center;
}
#headerblock{
background-color:#444444;
opacity:0.7;
filter:alpha(opacity=70);
width:100%;
position:absolute;
height:200px;
}
<div id="header">
<div id="headerblock"></div>
<h1 style="color:white">This is my header text</h1>
</div>
I have an <a> tag in html, and I want it to be ellipsis. But when I add a <div> inside the <a> tag, 'text-overflow' doesn't work.
HTML:
<div class=boxed>
<h1>text-overflow Attribute Sample</h1>
<a href="#" class="caption">
<!----><div style="width:100px;height:20px;border: 1px solid red"></div>
Each box (div element) below contains the following text:
</a>
</div>
CSS:
div.boxed {
width: 200px;
height: 200px;
border: 1px solid blue;
font: 14px Times New Roman, serif;
overflow:hidden;
'position:relative;
}
a.caption {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:block;
text-decoration:none;
float:left;
text-align:left;
}
http://jsfiddle.net/nPzsy/
After removing the <div>, the 'text-overflow' works again.
First of all, div is a block level element and a is an inline level element, so you cannot use a div inside an anchor tag b...so you should use any other inline tag (like small , span etc)
Secondly, if you have to use a div inside div, you can wrap your text in another tag like this ....
<div class=boxed>
<h1>text-overflow Attribute Sample</h1>
<div class="caption">
<!----><div style=" width:100px;height:20px;border: 1px solid red"></div>
<span class='textTrunc'>Each box (div element) below contains the following text:</span>
</div>
and css of class textTrunc:
.textTrunc{
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:block;
}
A lot of topics on this... but not getting the point how to do it.
I have my JQM Header and Footer. I want the content area to fill the 100% height in between head and foot.
Thats my code, how is it possible?
<body>
<div data-role="page" id="entryPage" data-theme="d">
<div data-role="header" id="header" data-position="fixed" data-theme="d">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" id="content" data-theme="d">
<div id="columnwrapper">
<div id="leftcolumn">
<div class="innertube">
Point 1
</div>
<div class="innertube">
Point 1
</div>
</div>
</div>
<div id="rightcolumn">
<div class="innertube">
<div id="switch1">
test
</div>
</div>
<div class="innertube">
test2
</div>
</div>
<div id="contentcolumn">
<div class="innertube">Content</div>
<div class="innertube">Content</div>
</div>
</div><!-- /content -->
<div data-role="footer" id="footer" data-position="fixed" data-theme="d">
<div id="switch2">
Expand main menu
</div>
</div><!-- /footer -->
</div><!-- /page -->
</body>
CSS:
#columnwrapper{
float: left;
width: 100%;
margin-left: -75%; /*Set left margin to -(contentcolumnWidth)*/
background-color: #C8FC98;
}
#leftcolumn{
margin: 0 40px 0 75%; /*Set margin to 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 40px; /*Width of right column*/
margin-left: -40px; /*Set left margin to -(RightColumnWidth)*/
background: yellowgreen;
}
#contentcolumn{
float: left;
width: 75%; /*Width of content column*/
background-color: blue;
}
.innertube{
margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
Actually the inner area only fills the height depending on the content... means 2 divs 2 rows, but not 100%..
Thanks
The CSS position: fixed doesn't work correctly in mobile browsers. My experience is with Android and iOS browsers and none of them impliment position: fixed properly (the exception is the iOS 5 browser but it's still in beta).
Rather than fixing an element to the screen and not moving it when the user scrolls in mobile browsers it tends to be treated like position: absolute and it moves when the page scrolls.
Also using the CSS overflow property won't allow scrolling on most mobile devices (iOS supports it but the user has to know to use two fingers while scrolling in a scrollable-div).
You can however use CSS but be aware you will need to use position: absolute or you can use JavaScript to set the heights on the elements.
Here is a jQuery Mobile solution using JavaScript to set the heights of the pseudo-page elements:
$(document).delegate('#page_name', 'pageshow', function () {
var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
$(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});
To get a flawless finish you need to take into consideration the behavior of the target device's address bar because if you want a fullscreen webpage then you have to add the height of the address bar to the height of the page.
Thanks, Jasper! That helped me a lot.
I had to mess around a lot to get this to work with multiple headers/footers, and to account for the url bar in ios. I thought I would share my solution for any one else having this issue.
This is working for me so far in ios simulator, but I would be eager to hear how it works on other devices.
/* detect device */
var ua = navigator.userAgent,
iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
ipad = ~ua.indexOf('iPad'),
ios = iphone || ipad,
android = ~ua.indexOf('Android');
$(document).delegate('#the_page', 'pageshow', function () {
var $page = $(this),
$target = $(this).find('.fullHeight'),
t_padding = parseInt($target.css('padding-top'))
+ parseInt($target.css('padding-bottom')),
w_height = (ios)? screen.height-65: $(window).height(); // "-65" is to compensate for url bar. Any better ideas?
headFootHeight = 0;
// Get total height for all headers and footers on page
$page.find('[data-role="footer"], [data-role="header"]').each(function() {
var myTotalHeight = $(this).height()
+ parseInt( $(this).css('padding-top') )
+ parseInt( $(this).css('padding-bottom') );
headFootHeight += myTotalHeight;
});
var the_height = (w_height - headFootHeight);
$page
.height(w_height)
.find('.fullHeight')
.height(the_height - t_padding);
});
This script is setting a 100% height on '.fullHeight', instead of [data-role=content] to give more flexibility, but you can just add the fullHeight class to your [data-role=content] element.
One issue I'm still having is compensating for the url bar in ios, and finding a window height that works across devices. Any ideas on that?
the CSS:
footer {
display: block;
position: fixed;
left: 0;
bottom: 0;
right: 0;
height: 50px;
background-color: #333;
overflow: hidden;
z-index:1000;
-webkit-transform: translateZ(0);
opacity:.9;
}
header{
display:block;
position: fixed;
left:0;
right:0;
top:0;
height:50px;
overflow: hidden;
}
section{
display:block;
position:fixed;
left:0;
top:50px;
bottom:50px;
right:0;
overflow-y: auto;
}
nav{
display:block;
height:100%;
-webkit-backface-visibility: hidden;
}
.body{
overflow-y: hidden;
}
.bar {
border: 1px solid #2A2A2A;
background: #111111;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image: -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image: -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image: linear-gradient(top, #3c3c3c, #111);
}
the only html needed:
<header class="bar" id="AllHead"></header>
<div data-role="content" class="content" id="home"><section><nav></nav></section></div><!-- /content -->
<footer class="bar" id="allFoot"></footer>
</div><!-- /page -->
you can then set whatever items you want inside the footer and the bottom nav bar
this will always look right, no matter what happens, also this wont flash on and off everytime you touch something. hope it helps