This is probably one of the weirdest things I've seen... I have a list of elements and each contains an icon image and a hidden pop-up box. When the user hovers over the icon, the popup box is display above (jQuery's hover). This works fine in all browsers and IE8/9, but IE7 has an issue. There's a 'gap' between the icon and the popup box. If I set a background color and the popup box's container is touching the row of icons, I can keep the popup box displayed on the screen as the user moves their mouse through it to make a selection.
However, I don't want a background color displayed, and when it's not, the popup box will disappear when the user moves their mouse anywhere in that gap. In other words, the popup displays in the correct position, but the user can't make a selection because there's no way to get to the popup without hovering over the gap.
Here's some HTML and CSS:
<div class="icon-nav">
<ul>
<li>
<div class="popup-wrapper">
Air Quality
<div class="popup-container">
<div class="popup-content"></div>
</div>
</div>
</li>
<li>
<div class="popup-wrapper">
Public Health
<div class="popup-container">
<div class="popup-content"></div>
</div>
</div>
</li>
Etc....
</ul>
</div>
CSS:
.icon-nav { position: absolute; top: 388px; z-index: 999; width: 100%; } /* Positioned relative to a wrapper element. */
.icon-nav ul { display: block; width: 968px; margin: 0 auto; position: relative; }
.icon-nav ul li { float: left; }
.icon-nav ul li .popup-wrapper {}
.icon-nav ul li .popup-container { position: absolute; bottom: 0px; padding-bottom: 35px; z-index: 9999; width: 100%; display:none; left: 0px; }
.icon-nav ul li .popup-content { width: 900px; height: 260px; background-color: #fff; margin: 0 auto; padding:30px; }
.icon-nav ul li a { width:121px; height: 115px; overflow: hidden; }
jQuery:
$('.icon-nav li .popup-wrapper').hover(
function(){
$('a',this).addClass('hover')
var name = $('a', this).attr('rel');
var popup = $('.popup-container', this);
$(popup).css({'display':'block'});
// More Code...
},function(){
$('a',this).removeClass('hover');
$('.popup-container', this).css({'display':'none'});
}
);
TIA!!!
Create a 1pixel square transparent png, and use that as your elements background.
Just a quick something to try:
Set the css rule
background-color: transparent
on the div that contains the gap (I guess that'd be .popup-container).
Related
I have this image appended to a div JSFiddle
and my Div is inside a modal. I'v tried to display by default the bottom left quarter (like filling the div) and to allow the user to scroll horizontally and vertically to see the rest of the image but it seems that I have some blue areas and I cannot scroll till the end of the image.
imgUrl = "nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg"
$('.img-wrapper').append($('<img id="theImg">').attr({
'src': 'https://' + imgUrl ,
'alt': 'test image'
})
)
.img-wrapper {
overflow: hidden;
height: 400px;
background-color: blue;
position: relative;
overflow-x:auto;
overflow-y:auto;
}
.img-wrapper > img {
display: inline-block;
height: 150%;
width: 150%;
position: relative;
top: -50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="img-wrapper">
</div>
Is there a way to display, when the modal is open, just the bottom left quarter of the image and allow the user to scroll XY to see the rest of it?
I'm new in HTML programming so please be gentle :)
https://jsfiddle.net/2mLbhmuL/61/
CSS:
.img-wrapper {
overflow: auto; /* adds scrollbars */
height: 400px;
background-color: blue;
position: relative;
}
.img-wrapper > img {
height: 200%; /* probably looks neater if auto */
width: 200%; /* double width image to show only first quarter */
vertical-align: bottom; /* moves image to true text bottom */
}
JQuery
Add the following ScrollTop(9999) to the end of your existing JQ to jump the div to the bottom.
.scrollTop(99999)
It's a bit nasty hard-coding a large number but it saves getting a handle to the element (which would allow you to use its real height).
Note:
The vertical-align: bottom is needed for the image to display without showing your blue area underneath. The reason for that is an image is naturally positioned on the baseline of text, so the blue area you were seeing is the space for hanging letters.
The solution is quite simple:
Don't use display: inline-block; as it will place the image will be placed inline and with some margin down. Instead use display: block
The top: -50%; is also moving the picture 50% up leaving it's original position blank
You make this simple:
.img-wrapper {
height: 400px;
width:400px;
background-color: blue;
position: relative;
overflow-x:auto;
overflow-y:auto;
}
.img-wrapper > img {
position: relative;
}
<div id="myDiv" class="img-wrapper">
<img src="https://nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg" id="theImg"/>
</div>
Try this: (Assumption - You will adjust for your image size and containing div size as required)
html
<div id="myDiv" class="img-wrapper">
<img src="http://nerdist.com/wp-content/uploads/2018/02/year-or-the-tank-girl-header.jpg">
</div>
JS:
var d = $('#myDiv');
d.scrollTop(d.prop("scrollHeight"));
CSS:
.img-wrapper {
height: 400px;
background-color: blue;
position: relative;
overflow-x:auto;
overflow-y:auto;
}
.img-wrapper > img {
display: inline-block;
position: relative;
border:1px solid red
}
I have 2 div, one in the front and one in the back. The front will popup only when the button was pushed. If the front div isn't displayed, the background div can be scrolled. In the contrary, if the front div is displayed, the background div scroll will be disable. But the front div can still be scrolled.
I have tried using css by applying no-scroll css to the background div.
.no-scroll {
position: fixed;
overflow: hidden
}
But every time I applied no-scroll class to the element, it will bounced back top the top.
I also followed
this article
But it disable the entire window scroll and also the font div too. Any suggestion?
I think you should wrap both divs in a container and the toggle class on that. Something like this
var btn = document.querySelector('button'),
wrapper = document.querySelector('.wrapper');
btn.addEventListener('click', function(){
wrapper.classList.toggle('modal-is-visible');
});
html, body { height: 100% }
.wrapper {
height: 500px;
overflow: scroll;
border: solid 2px black;
padding: 2rem;
}
.lower_div {
background: red;
width: 100%;
height: 600px;
position: relative;
}
.modal {
display: none;
height: 20px;
width: 100%;
position: absolute;
z-index: 2;
background: tomato;
}
.modal-is-visible .modal { display: block;}
.modal-is-visible.wrapper { overflow: hidden; }
<button>
toggle
</button>
<div class="wrapper">
<div class="lower_div">
<div class="modal">
</div>
</div>
</div>
You could try adding an event listener on your background div on the event "blur" to trigger a style change so it puts your "overflow: hidden" style on the block.
You could also use a z-index to prevent the background div from coming back to front, just put a higher z-index to the front div and it should be good.
So I want to hide a div for user settings, which shows when the user clicks on a little cog icon. What is the best way for me to go about this?
I made a couple of very basic pics to show what I'm after:
Closed:
Open:
Once the user clicks the icon (the red dot) then I want the hidden div to push the content to its right over. I had a look at the CSS checkbox hack, but that requires the user to click directly on the icon (the red dot) again to close the hidden div. I would like to have it so the user can click anywhere else on the page to close the div.
Anyone know how to do this with pure js?
Any help is greatly appreciated, thanks!
You can try tabindex="-1" in order to use :focus.
This way you can achieve it with pure CSS.
#wrapper {
display: flex;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}
#sidebar, #main, #hidden:focus {
padding: 10px;
}
#sidebar {
background: #A8D4AF;
}
#main {
flex-grow: 1;
background: #96A7B1;
}
#hidden {
width: 0;
background: #008DD2;
}
#hidden:before {
content: '';
display: block;
background: red;
border-radius: 50%;
position: relative;
left: -40px; top: 40px; /* Position of the dot*/
width: 20px; height: 20px; /* Size of the dot */
margin-bottom: -20px; /* Same as height */
}
#hidden:focus:before {
display: none;
}
#hidden:focus {
width: auto;
}
<div id="wrapper">
<div id="sidebar">
Test content
</div>
<div id="hidden" tabindex="-1">
Hidden stuff
</div>
<div id="main">
Lorem ipsum dolor
</div>
</div>
I'm trying to make animation when opening image kinda like is here: http://arzbhatia.com/ in portfolio section.
This is what I've already done, but it's not working properly.
Here is jFiddle of what I've done: jFiddle
The div is showing in the same place, no matter which image I click. If I remove position:absoulte from #test_div it seem to add div after image, moving rest of them to the bottom.
I did change your fiddle, and created rows. Try it like this:
http://fiddle.jshell.net/MYXcf/4/
You have to put another div named description into all you li.
Like this :
<div id="gallery">
<ul>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
<li class="image_item">
<img class="gal_images" src="http://goo.gl/rpys4M">
<div class="description"></div>
</li>
</ul>
</div>
And some css to style this up :
ul {
list-style-type: none;
}
#gallery {
height: 500px;
margin: 0 auto;
width: 500px;
margin-top: 100px;
}
.click_images {
vertical-align: top;
display: block;
position: relative;
}
.gal_images {
height: 220px;
width: 220px;
float: left;
font-size: 40px;
color: #fff;
margin: 5px;
}
.image_item {
width: 220px;
float: left;
}
#test_div {
position: absolute;
top: auto;
height: 200px;
width:100%;
background: #000;
overflow: hidden;
}
.description {
display: none;
}
And the jQuery, will toggle if the description is already opened or not, if its opened, it'll hide, else it'll open.
var opened = false;
$('.image_item').click(function () {
if (!opened) {
opened = true;
$(this).find('.description').slideDown('500').append('hahaha');
} else {
opened = false;
$(this).find('.description').slideUp('500');
}
});
You'll find a fiddle here: http://jsfiddle.net/fm9L4/
The div is in the same place because the images are being floated out of their parent (the LI). This is visible in the Chrome Dev Tools if you hover over the list elements.
The fix is to not float anything and to make the LIs display:inline-block so that they occupy space in the dom. You also need to add some Javascript to increase the height of the LI to accommodate #test_div when it gets added because it's positioning is absolute.
Full code here: http://fiddle.jshell.net/MYXcf/3/
Updated code here: http://fiddle.jshell.net/MYXcf/5/
I'm currently building a website for myself and having some trouble styling it. By default the re are pagination buttons underneath the slider and a previous and next arrow. I managed to remove the pagination buttons, but am unable to position the next and previous button on top of the slider, these buttons should be vertical centered with the height of the containing images. I'm also having trouble with the height of the slider. The height should be the height of the images. The green part on my website is to much height.
I hope someone can help me!
Thanks a lot for in the advance!
http://test.epicconcepts.nl
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
#slides .slidesjs-container {
margin-bottom:0px;
}
.slidesjs-pagination {
display: none;
}
.slidesjs-previous.slidesjs-navigation {
/* Styles for the Previous nav button */
width: 32px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
z-index: 99;
background-image: url("..//img/prev.png");
}
.slidesjs-next.slidesjs-navigation {
/* Styles for the Next nav button */
width: 32px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
z-index: 99;
background-image: url("..//img/next.png");
}
.slidesjs-control {
background: orange;
max-height: 0px;
}
.slidesjs-container {
width: 100%;
background: green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 700,
autoHeight: true
});
});
</script>
I guess you since removed the slidesjs code from that URL, but I was having the exact same problem 10 minutes ago, so this is how I fixed it:
<div id="slides" class="slides">
<img src="images/1.jpg">
<img src="images/2.jpg">
<a href="#" class="slidesjs-previous slidesjs-navigation slides-button left">
<img src="images/arrow-left.png" /></a>
</div>
I just put 2 images and one navigation button for the sake of simplicity.
Then the CSS:
.slides { position: relative; } /* so the buttons are placed absolutety within this div */
.slides-button {
position: absolute;
top: 120px; /* the exact position over the slides, from slide's (0,0) */
}
Remember, the navigation buttons have to be <a class="slidesjs-previous slidesjs-navigation"> directly inside <div id="slides"> or they won't work, don't put Divs in the middle.