Iam new to css and html5.
I`m using bxslider and would like to have controls (arrow nav) outside the slider div. I made it according to http://bxslider.com/examples/custom-next-prev-selectors but I do not like it.
How to replace "onward" with an arrow image (jpg)?
How can I move my arrow image to the edge of the slider? I don't want it in the center but aside the slider.
http://www.pulik.edl.pl/WWWMG/foto.html
Why you don't use the controls of the own bxslider and change its css?
Then with left/right you can work around to make the controls to be on the edge of the slider.
Else, if you really want to use the custom controls, make a container around the controls and the slider. Then you can easily do the trick, if the container was made properly.
To move the direction controls outside of the content, you'll need to override the bxslider css in your own css file:
.bx-prev {
margin-left: -70px;
}
.bx-next {
margin-right: -70px;
}
This might cause a further issue where the controls are outside ALL of your content and not even visible. In that case you should wrap the whole slider control inside another div that has left and right padding.
Related
What is alternative of DIV in NativeScript?
How to use block inline with content inside?
Within Browser the behaviour div is determined by display CSS attribute.
For example, by default it's block and vertical which is similar to StackLayout with orientation set to vertical. When you make it inline, that's more like a horizontal layout, so again could be StackLayout with orientation set to horizontal.
There is again flex, we also have an equivalent in NativeScript, the FlexboxLayout. If you set position to absolute on div, it can be compared to AbsoluteLayout in NativeScript.
There is also GridLayout, WrapLayout, and DockLayout in NativeScript that serves various purposes.
So the alternative for div here totally depends on what kind of UI / layout you are looking for / how exactly you have styled the div on web.
If you are beginner, https://www.nslayouts.com/ is a good start to know all about NativeScript layouts.
I want to create a click event that will have two photos on opposite corners of the screen move towards each other, once they collide, they move back in the direction they came from.
I am having trouble placing an image on the top right corner. I tried using "float: right" but when I tried that, my function does not work.
To place the images on the top right corner you should use absolute positioning:
.class {
position: absolute;
right: 0;
}
Also do you really need javascript to animate this?
It would be better and more performatic to do it with some CSS. Checkout this fiddle I made: https://jsfiddle.net/jv5et9L0/
In the fiddle I use absolute positioning to put the elements where I want, and then, through Javascript, I add apply the transform() property on my CSS. The animation occurs because I have set the transition property on the .item class.
I'm trying to position an element at the bottom of my mobile page using kendo ui mobile. I have a tabstrip at the bottom, and I don't want it to be footer styling, so unfortunately data-role="footer" won't cut it. I'vetried setting style="bottom:-1em;" but that doesn't work, it places the div where it was before -1em.
For the bottom style to work, you should either use position: fixed or absolute. Position fixed should position it according to viewport, regardless of the element's container. However position: fixed is rather buggy on mobile platforms.
Position: absolute on the other hand will position your element according to its positioned container, so in order to use it, you can place your element in the footer. The absolute position will remove the element from the page flow, so it won't affect the positioning of the TabStrip you have there. The footer doesn't have overflow: hidden, so the element can be positioned outside of it and over the content if you want.
I am looking to make a "10 foot" useable site for TV. Ideally it would have a full screen background image a small header where the nav will be placed and under it a container for the content. I would like for the container itself to have a scroll bar, as oppose to the browser having the scroll bar, since this would lose my top header.
Basically top header should be fixed, an image for a background, and a container that scrolls inside itself. I have tried finding templates or a starting point online for this with very poor results. The best i have found so far is http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
This is almost what I need except the container overflows the screen so the scroll bar is in the browser. Also this article was written in 2010, maybe there is a better way to achieve this now?
You can use CSS to style the div.
div.scroll {
background-color:#00FFFF;
width:100px;
height:100px;
overflow-y:scroll;
}
Then... all you have to do is position that div as you want.
I have a div element which acts as a global contianer for my webpage, I also have a div element inside this which I use as a curtain i.e. when it is activated it covers the whole page in a dark semi transparent layer (just like a lightbox) so the page is essentially deactivated and a warning dialog or picture box, etc, etc can be displayed on top.
I can achieve this efect and functionality easily with javascript but I wanted to know whether it could be achieved purely with css animations?
<div id='globalCon'>
<div id='curtain' class='enabled'></div>
<div id='contentA'></div>
<div id='contentB'></div>
...
</div>
so when curtain is not active it should have opacity 0 and prefferably be display:none; to keep it out of the way. Then when it is activated it should have display:block and opacity animate to 0.8. Then when it is deactivated, opacity should animate back to 0 and then it should be set back to display:none;
Like I say, I can do this easily with javascript, I just want to know if and how it can be done with css only?
You can use:
animation-fill-mode: none/backwards/forwards/both;
The ‘animation-fill-mode’ property defines what values are applied by
the animation outside the time it is executing
From the Spec.