Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Im working with Lightbox2 plugin http://lokeshdhakar.com/projects/lightbox2/. I need:
always show nav arrows
arrows show on left and right side of browser, like float: left, right (not on image)
close button show on browser top right position
Please help me, how to do that options. Thank you
To always show the nav arrows, you will have to change their opacity to 1 (it is 0 by default).
Here:
.lb-nav a.lb-prev, .lb-nav a.lb-next {
opacity: 1;
}
Then to keep them on the side of the browser window you can change change the position property to fixed and then change the individual arrows accordingly, like this:
.lb-nav a.lb-next {
position: fixed;
right: 0;
top: 0;
}
.lb-nav a.lb-prev {
position: fixed;
left: 0;
top: 0;
}
and finally you can move the entire bottom block by messing around with the positioning like this:
.lb-dataContainer {
left: 50%;
position: absolute;
top: -45px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Keep in mind, these solutions are far from perfect. This is a quick and dirty way to move elements around.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
I have a modal that I resized and looks like this at zoom 80% of my browser:
My problem is when I increase or decrease my browser zoom, my modal does not adjust automatically with my browser zoom and it becomes like this :
Here is my CSS code :
.resizeModal {
width: 99vw;
right: 500px;
position: relative;
}
Is there anyway to automatically center my interface whether I increase or decrease my browser zoom?
Try using the margin auto to automatically center:
.resizeModal {
width: 99vw;
right: 500px;
position: relative;
margin: auto;
}
If the first method doesn't work for you, you can combine it with position absolute and all borders to 0 as follows:
position: absolute; /* Position the element absolutely */
.resizeModal {
width: 99vw;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Hope this helps!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am working on a theme which has a dynamic menu when we scroll it goes hide. I want to fix it on the top just like w3school website. Any idea?
Is it a good option to use a plugin like Sticky menu
Here is the website link
https://spaceunlimited.in/
CSS
.ehf-header #masthead {
z-index: 30;
position: relative;
}
When using the following for masthead you can keep the brown borders on the side.
#masthead {
z-index: 30;
position: fixed;
background: whitesmoke;
top: 0;
left: 20px;
max-width: calc(100% - 40px);
}
Add this css
.ehf-header .headroom--unpinned{
position:fixed !important;
top:0px;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have two divs: divA and divB. I want to position divB below divA at all times using CSS/Sass. Even if divA moves around divB should be positioned below divA. The divs should appear at the same place as the page scrolls so they can't be positioned static. The two divs cannot have the same parent div as divB is part of another div defined in material library.
So the HTML structure is like this:
<divA></divA>
<md-tab-group> <!-- uneditable code by user below this -->
<divB></divB>
<divC></divC>
</md-tab-group>
CSS:
#divA {
width: 100%;
position: fixed;
z-index: 700;
transition: transform 0.2s ease-in-out;
}
#divB {
position: fixed;
width: 100%;
z-index: 600;
background-color: white;
transform: translateY(64px);
transition: transform 0.2s ease-in-out;
}
.navdown {
transform: translateY(-64px);
}
I append the class navdown to divA when the user scrolls down for some distance. I want the divB to be still placed below divA without adding any script to divB as I am unable to do so in a proper way in Angular 2.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I´m using this tumblr theme:
http://flataura.tumblr.com/
And I want the slide menu at the right of the text "Flaty" that opens when you click on it, to be always opened. Is there any solution for this?
Here is the javascript of that slide:
http://static.tumblr.com/ssdtkch/gT6nanpl7/pageslide.js
Thanks!
Seeing from a comment that you are familiar enough to edit the CSS. Add this to the bottom of your CSS and it should show the menu AND hide the button that animates the show/hide:
body {
margin-left: 281px;
}
div#side {
display: block !important;
left: 0;
right: auto;
position: fixed;
top: 0;
height: 100%;
z-index: 1000000;
overflow-y: scroll;
width: 280px;
background-color: rgba(33,63,82, 0.93);
border-right: 1px solid #213f52;
}
a.open-sidebar.nav-button {
display: none;
}
Yes, there are ways to do this. But since it doesn't seem like you're very familiar with websites, the solution is too complicated via StackOverflow. Let me know if you would like to get in contact, and I can walk you through this.
In a nutshell, the #side element contains that left bit, but is always hidden. The #pageslide element is what gets shown, and as soon as you click the first time, the contents of #side get cloned into #pageslide. Then, jQuery (Javascript) is used to animate the transition, introducing a margin to your entire body element.
All of this can be overridden, but it is several steps. If you know a web developer, that information above should get them started. Otherwise, let me know if you want to get in contact.
Good luck!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Hello I have been task to create an image animation that allows the images to move from left to right and then down.
when the images moves down it would have to be overflow hidden as it will go beyond a background image.
The images would be looping continuously, going from left to right and down again. There is a similar example online how to move/slide an image from left to right.
However, this only slides from left to right and then stop. there is also only one image in animation.
Why not just use css?
Here's a fiddle
div {
width: 100px;
height: 100px;
background: red;
position :relative;
animation: mymove 5s infinite;
}
/* Standard syntax */
#keyframes mymove{
0% {top: 0px; left: 0px;}
25% {top: 0px; left: 100px;}
50% {top: 0px; left: 0px;}
75% {top: 50px; left: 0px;}
100% {top: 100px; left: 0px;}
}
I would consider using CSS animations. Is it dynamic in any way? At the end of the keyframe you could simply use overflow: hidden.
Try using the jQuery function animate() as in this example: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_ani_right
Simply, find the element you want to be moving by jQuery, call animate on him with the right parameter to 0, then after that call animate again with bottom 0 then place the element again on the beginning without animation and this whole loop infinitely.
I am not sure this will work, just a draft:
$(document).ready(function(){
var element = $("something");
while (true) {
element.animate({right:"0"});
element.animate({bottom:"0"});
element.css("right", "auto").css("bottom", "auto").css("left", "0").css("top", "0");
}
});