Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I have a website with metro style them. I have multiply tile in it, and show horizontal scroll bar and it use with mouse wheel.
#wrapper {
margin: 0px;
padding: 90px 0px 1px;
position: relative;
z-index: 0;
}
#centerWrapper {
position: relative;
margin: 0px auto 15px;
padding: 0px 25px 0px 0px;
}
#tileContainer {
position: relative;
margin-top: 30px;
}
<div id="wrapper">
<div id="centerWrapper">
<div id="tileContainer" style="overflow: hidden">
//Tiles
</div>
</div>
</div>
//show scroll bar
<div class="scrollTools" style="position: absolute; display: block; opacity: 0;">
<div class="draggerContainer">
<div class="dragger" style="position: absolute; width: 1113px; left: 0px;" oncontextmenu="return false;">
<div class="dragger_bar" style="position: relative;"></div>
</div>
<div class="draggerRail"></div>
</div>
</div>
But i don't want to use horizontal scroll bar, I want created a custom scroll bar like metro style, that use scroll when mouse enter in tiles, and hide when mouse leave.
I set overflow: hidden; for tileContainer to be displayed scroll bar of browser.
Does anyone have a nice plugin and a solution?
Here is the Demo. mouse over on the text and you will see the result. if you want only vertical scroll you can use overflow-x:hidden;
to change the default style of scroll you can use ::-webkit-scrollbar styles
you can write something like this:
#tileContainer::-webkit-scrollbar
{
width: 9px;
height: 9px;
}
#tileContainer::-webkit-scrollbar-track
{
background: #ececec;
}
#tileContainer::-webkit-scrollbar-thumb
{
background: #bebebe;
}
if you want to display the scroll only on mouseenter you can use this code:
$('#tileContainer').on('mouseenter',
function(){
$(this).css("overflow","auto");
}).on('mouseleave',
function(){
$(this).css("overflow","hidden");
});
Related
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 2 years ago.
Improve this question
I'm going to make a progress bar.
When it's 0%, you can't see anything. From 1%, I would like to put a flag on the progress bar and let you know how far it has progressed. At 100 percent, this flag disappears. This flag is in image form and I don't know how to code it. Progress is received in JavaScript. Should I write position:relative, position:absolute in the div container?
.progressbar {
width: 100%;
border: 1px solid black;
border-radius: 5px;
height: 24px;
}
.icon {
width: 24px;
height: 24px;
position: absolute;
right: -12px;
opacity: .5;
}
.progress {
width: 50%;
background-color: green;
position: relative;
height: 24px;
}
<div class="progressbar">
<div class="progress">
<img class="icon" src="https://loremicon.com/ngon/128/128/811932708408/jpg">
</div>
</div>
Here's the gist. Style as you please.
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
I am creating a website and have designed the header
The Red and Blue is an image
The Yellow is a navigation bar
The circle is a logo
My issue is that I am unable to put the logo in div of the image and the nav div at the same time. Is this even possible or should I consider a new design. Perhaps I am looking at this incorrectly.
Your question is about having the same image on both the nav and that div.
Pen here!
You can do it easily with background-image and set the same image aswell.
background-image: url(http://s.glbimg.com/jo/g1/f/original/2016/05/02/palestinian-gaza-daily_life_mohammed_abed_afp.jpg);
background-size: cover;
backgroud-position: center center;
This can be achieved using pure CSS. This is a possible approach to get what you want:
#one {
height: 100px;
background-color: blue;
}
#two {
position: relative;
width: 50px;
height: 50px;
background-color: red;
border-radius: 100px;
transform: translateY(40px);
margin: 0 auto;
z-index: 1;
}
#three {
position: relative;
height: 30px;
background-color: yellow;
bottom: -20px;
}
<div id="one">
<div id="two">
</div>
<div id="three">
</div>
</div>
Replace divs with any block element and it should work too. Otherwise, you'll need to set display: block.
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 6 years ago.
Improve this question
I want to make a croping tool for images using html5, css3 and javascript (jQuery). I am having trouble in making the following: add a grey, alpha=0.5 overlay div/span/whatever over the image i want to crop with a hole div/span/whatever in the middle that shows the image's true colors. I want to be able to move this hole inside the grey mask, so event listeners will be set on this hole. Is this doable with html5 and css3? I don't care about the js code, that i will do on my own.
Thank you very much
Take a look at this example:
Then you just have to move the .hole position with jquery event (drag) or whatever.
body {
margin: 0;
padding: 0;
}
.hole {
position: absolute;
left: 20px;
top: 10px;
width: 100px;
height: 100px;
box-shadow: 0 0 0 99999px rgba(0, 0, 0, .8);
border-radius: 3rem;
}
<img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Fox_Head.jpg" alt="" style="width: 30%;">
<div class="hole"></div>
how about this:
wrapper with position:relative and overflow:hidden
image
absolute positioned rectangle with very large box-shadow and background transparent
$( function() {
$( ".mask" ).draggable();
} );
body{padding:4px;}
.wrap{width:300px;margin:auto;position:relative;overflow:hidden}
.wrap img{width:100%;display:block}
.mask{
outline:1px solid white;
cursor:move;
position:absolute;
top:20px;
left:100px;
width:80px;
height:80px;
box-shadow:0 0 0 900000px rgba(0,0,0,0.75)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div class="wrap">
<div class="mask"></div>
<img src="https://www.fillmurray.com/460/300">
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have to get this feature in my web page,i.e.on the left trapezoid a google map will be there and on the right trapezoid another background will be there ,how to do that,
plz help
you can use an overlay with a linear-gradient as background : DEMO
Basic CSS:
#overlay {
position:absolute;
z-index:1;
top:0;
left:0;
bottom:0;
right:0;
background:linear-gradient(
to bottom right,
transparent 49.5%,
rgba(255,0,0,0.5) 50%
)
;
pointer-events:none;/* avoid click being catched*/
}
Just a little hint for you, which should help you getting what you want.
Try something like this:
#trapezoid {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
this is from the page
http://css-tricks.com/examples/ShapesOfCSS/
You can do something like this:
<div id="container">
<div id="triangle-topleft"></div>
</div>
and
#container {
height: 100px;
width: 100px;
overflow: hidden;
background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;
}
DEMO
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have problem with position of element in Chrome.
Site: http://isedo.pl/projekty/gladness/
Navigation to slider with team running down. But when click on link in header and other link on site presses the element at a good place.
In Firefox is OK.
#edit
slider + navigate code: http://pastebin.com/ckPUeBaG
css:
#teamSlider{
margin: 20px 0 0 0;
float: left;
}
#snav{
float: right;
width: 35px;
height: 250px;
background: #818181;
margin: 20px 0 0 0;
}
#snavl{
background: url('../images/cnav_left.png') no-repeat top left;
height: 48px;
width: 35px;
cursor: pointer;
}
#snavr{
background: url('../images/cnav_right.png') no-repeat top left;
height: 48px;
width: 35px;
cursor: pointer;
}
.teamSlider is too big. It has a width of 3800px. This doesn't leave any room for .snav. I would make a container and then set the position of .snav absolutely.