Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I'm looking for alternatives to Supersized. I'm currently using version 3.0 to show some rotating background images and found two problems on Internet Explorer.
The transicion is far from smooth, and is very slow. On Chrome and Firefox this works ok.
Some times, the background images are vertically enlarged and deformed.
Does anyone knows an alternative, or a tweak to fix those problems?.
Use any slider and float it behind the content of the page using z-index. I like Nivo Slider when I'm just sliding images, and bxSlider when I need to slide a div or ul with arbitrary content.
The element you're applying z-index to must be position: relative; or position: absolute. One thing to note about position: absolute; is that it will position the element with respect to the first parent element that is position: relative; or position: absolute. That may sound confusing, so how about an example:
Put your slider inside <body> and wrap it in a div:
<body>
<div class="container">
<!-- Your slider divs/imgs/ul -->
</div>
<div class="rest-of-page">
...
</div>
</body>
Then some css:
/* Position .container relative to body (not really needed, just an example) */
body { position: relative; }
/* Float slider behind content of page, expanding to width/height of document
* and use z-index of -1 to place it behind actual page content. */
.container {
position: absolute;
top: 0%;
left: 50%;
width: 100%;
height: 100%;
z-index: -1;
}
/* Float the actual page content above slider using z-index of 0 */
.rest-of-page { position: relative; z-index: 0; }
And that should do it. Normally you have to define a width for your slider images, but with some fiddling I think you can get it working. In my own projects I've been centering the slider to the page, not taking up the entire background, so your mileage may vary.
I'm not sure if this can give what you need. But you can take a look at SuperBGImage. Actually it's inspired by supersized but with some convenient improvements
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 1 year ago.
Improve this question
So I'm developing a web page and the top section of this page has a tiny column in the right side, and to the left of it an image which is occupying the rest of the section and causing my problem.
The issue is that the image extends beyond the device's screen size missing up the layout of the page. Now I don't want to resize it to fit, but rather crop the extra width from the image according the screen size, so that it look the same but you can't horizontally scroll through the page which is what I'm experiencing right now.
I don't really know if that makes sense but if you have any idea on how to solve this please write it here and I will try it.
To crop the image without resizing it you have to apply overflow: hidden; to the parent element.
To counter the padding of the parent element you have to set a negative margin that equals the padding of the parent.
div {
padding: 20px;
overflow: hidden;
}
img {
margin: -20px;
}
/* for demonstration purpose only */
div {
border: 1px solid red;
}
img {
display: block;
}
<div>
<img src="https://via.placeholder.com/900x200.jpg">
</div>
You change your img tag for a div with background of the img (I suppose you have img tag, you didn't specify). The div then won't exceed the boundaries regardless the img inside it.
<div id="img"></div>
<style>
#img {
background: url("your img");
}
</style>
// Use this instead of <img src="your img">
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 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 9 years ago.
Improve this question
so I know how to make text appear on hover with CSS when there's only one image. however...
I want to make a page where there's three images of the same dimensions lined up like:
x | x | x
and hovering over one image makes a text blurb about that image appear, while the other two images disappear. do I need javascript/jQuery to do this or is it possible to do in CSS alone?
also, this is a bit more complicated and not necessary for the project, but would it be possible to have the image that is being hovered shift to the left (for the second and third images) while the text appears? and/or is it possible to have a transition function so that the text looks like it's rolling out from behind a screen or something to that effect?
those last parts are totally optional and might not even be doable, really I'm just trying to figure out how to get individual divs to appear on hover while the other images disappear. thanks!
Yes, that's possible with CSS alone.
There are many ways to achieve this but the general idea is to have a parent element for each image (x in your question) containing the image and the caption that you want to appear over the image. You can then use CSS to make the caption overlay and/or transition in to position when hovering.
A quick example would be: (see demo code).
<div class="image-wrapper">
<img src="http://placehold.it/180x120/eeeeee">
<div class="caption">
Your caption text here.
</div>
</div>
<div class="image-wrapper">
<img src="http://placehold.it/180x120/eeeeee">
<div class="caption">
Your caption text here.
</div>
</div>
<div class="image-wrapper">
<img src="http://placehold.it/180x120/eeeeee">
<div class="caption">
Your caption text here.
</div>
</div>
CSS
.image-wrapper {
position: relative;
width: 180px;
float: left;
margin-right: 10px;
}
.image-wrapper:last-child {
margin-right: 0;
}
.image-wrapper .caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: none;
background: rgba(0,0,0, 0.6);
color: #fff;
padding: 0.5rem;
}
.image-wrapper:hover .caption {
display: block;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Hi im looking for a way so that if my mouse moves to the far left or right of the screen an action will be performed is there a way to do this with html css jquery etc? Like im trying to get my navbar to show when my mouse is reaches the left end of the screen. any help would be much appreciated
See here http://api.jquery.com/mousemove/
Based on the examples, you can then use pageX and pageY to determine position of the mouse. You could probably have something like this:
$("body").on("mousemove",function(event) {
if (event.pageX < 50) {
// do something
}
});
No need to make it overly complicated. Just position your menu as a transparent layer, key hover to expand and show the menu links.
#menu { overflow: hidden;
background-color: transparent;
width: 20px;
height: 100%;
position: absolute; top: 0px; left: 0px; }
#menu:hover { width: auto; background-color: red; height: 100% }
.link { margin-left: 20px; display: block; }
<div id="menu">
<a class="link" href="#">LINK</a>
<a class="link" href="#">LINK</a>
<a class="link" href="#">LINK</a>
</div>
Here is a fiddle showing how it will work. http://jsfiddle.net/6cgZZ/
If you want to lock the menu in place, then you will probably want to use JS to trigger a mouseover event, but I would still use a transparent element to use as a trigger. In that case, using DOM you can dynamicly alter the menu's properties, like visibility, width, etc.