Placing a clickable element inside a clickable container element - javascript

I'm trying to make the #header div clickable by wrapping a link element around it, but I cannot do it when it already has another image link inside the div. How would I fix this?
#header {
border: 1px solid red;
background-color: red;
}
img {
width: 50px;
height: 50px;
}
<a href = 'index.php'>
<div id = 'header'>
<a href = 'profile.php?username=$username'>
<img src = 'https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
</a>
</div>
</a>
Now while the image link works just fine, the #wrapper div is not clickable.

#header {
border: 1px solid red;
background-color: red;
position: relative; /* establish nearest positioned ancestor for abs. positioning */
height: 50px;
}
#header a:first-child {
display: block;
height: 100%;
}
#header a:last-child {
position: absolute; /* image now independently clickable */
top: 0; /* position image anywhere you want inside #header */
left: 0;
}
img {
width: 50px;
height: 50px;
}
<div id='header'>
<a href='index.php'></a>
<a href='profile.php?username=$username'>
<img src='https://www.iscattered.com/uploads/1590Chocolate_chip_cookies.jpg'>
</a>
</div>
NOTES:
If you wrap a hyperlink inside another hyperlink, how is the browser supposed to know which link to execute?
Instead, make the #header element entirely clickable, and absolutely position the image.
Now the image can be clicked separately and positioned anywhere inside the #header element.

Related

Scroll full image inside div

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
}

Absolutely Positioned elements Affecting Another elements on delete

I have more than one div that is positioned absolute and dynamically created by clicking on a button. Once clicked, they are placed in a container that is positioned relative, and I have a button on each div that when clicking on it, will delete the div, the problem is when deleting the div, it will affect the others positions.
function create() {
var $home = $('<div class="cabine"></div>');
$("#container").append($home);
}
.cabine { /*class that all div's share*/
position: absolute;
top:5%;
left:10%;
width:135px;
height:135px;
float:left;
background: red;
}
#container { /* Where the div's are placed*/
position: relative;
background-image: url(wall.jpg);
background-color: #FFFFFF;
border: 1px solid #000;
width: 100%;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="create()">Create Cabine</button>
<div id="container"></div>
In html you have #container instead of .container.

Internet Explorer cursor: auto

I have a wrapper div that contains all of my content. I want this wrapper div to have a cursor: pointer because it's clickable, but I don't want the content inside the wrapper to have that cursor pointer:
So I set the wrapper to cursor: pointer, and the content div to cursor: auto, and it works fine...in everything except Internet Explorer (I'm using IE11). The problem in IE is that cursor: auto doesn't reset the cursor to its default state for each element, but instead sets it to the parent's cursor setting. (see cursor:auto behaviour in IE 8 and 9). So in IE, I always see a pointer and it makes it seem like the whole page is clickable.
The problem with the solution in the answer I linked to is that even if I set the content area to have cursor: default, which turns the pointer cursor to a normal cursor, when I hover over text I don't get a text cursor, rather a normal, default one. Is there any obvious solution to this problem aside from specifying each element manually inside the content div to have its default cursor? In other words:
.wrapper {
cursor: pointer;
}
.content {
cursor: default;
}
.content p, .content h1, .content h2.... {
cursor: text;
}
.content a {
cursor: pointer;
}
etc.....
Just change your layout like this, see fiddle https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/45/
html
<div class="wrapper">
<a href="#">
<div class="left">
</div>
</a>
<div class="middle">
</div>
<a href="#">
<div class="right">
</div>
</a>
</div>
CSS
.wrapper {
width: 100%;
height: 100vh;
}
.left,
.right {
width: 150px;
height: 100%;
float: left;
background-color: blue;
}
.middle {
width: calc(100% - 300px);
height: 100%;
float: left;
background-color: gray;
}
you can use the * selector:
.content > * {
cursor: default;
}

Should I use CSS, javascript or both to make this fixed element expand the parent element?

I know that a an element with position:fixed acts like its parent element with position:relative (Or no position specified) doesn't exist, and that's my concern. I've seen the very same question being asked here on StackOverflow, but not the very same problem.
I have a wrapper, an element with relative position, and an element with a fixed position inside the relative element. The element with fixed position should expand the element with relative position as you scroll the page, but what's happening is that when you scroll the page, the element with fixed position will go out of the main container, instead of expanding. How can I make the main element push the container element bellow, instead of getting an offset?
Fiddle
http://jsfiddle.net/T2PL5/515/
Here my code:
CSS
body {
background: #ccc;
}
.wrapper {
margin: 0 auto;
height: 600px;
width: 650px;
background: green;
}
.sidebar {
background-color: #ddd;
float: left;
width: 300px;
height: 350px;
position: relative;
}
.main {
background-color: yellow;
width: 200px;
height: 100px;
position: fixed;
margin: auto;
}
HTML
<div class="wrapper">wrapper
<div class="sidebar"> Sidebar
<div class="main">main</div>
</div>
</div>

IE7: Can't display popup box when hovering over transparent background

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).

Categories