.black {
background-color: black;
width: 500px;
height: 500px;
}
.red {
background-color: red;
width: 200px;
height: 200px;
}
<a href="#">
<div class="black">
<div class="red"></div>
</div>
</a>
I'm trying to make the whole div "black" clickable with an hyperlink, but without the div "red" area with any success. I don't know if I should solve it with css or JS, or simply just HTML5
UPDATED
I forgot to wrap the target with jquery object.. sorry
if you want to prevent a child element from triggering an event then can do this via jquery
$('a').click( function(e) {
if($(e.target).is('.black')) {
console.log('whatever..');
// or do whatever you want
} else {
e.preventDefault();
}
});
as for the cursor you can do this via css
.red {
cursor: default;
}
Might be worth exploring a different approach here, in terms of structuring.
Remove .mr-red from .mr-black
Wrap .mr-red and .mr-black in .mr-brown
Position .mr-red absolute and place accordingly within .mr-brown, overlaying .mr-black
.mr-brown {
position: relative;
height: auto;
width: auto;
display: block;
}
.mr-black {
background-color: black;
width: 500px;
height: 500px;
}
.mr-red {
background-color: red;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
<div class="mr-brown">
<a href="#">
<div class="mr-black"></div>
</a>
<div class="mr-red"></div>
</div>
I would separate them completely and use absolute positioning to put the red square in the right place.
.wrapper {
position: relative;
}
.wrapper a {
display: inline-block;
}
.black {
background-color: black;
width: 500px;
height: 500px;
}
.red {
background-color: red;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
<div class="wrapper">
<a href="#">
<div class="black">
</div>
</a>
<div class="red"></div>
</div>
You can use event.stopPropagation:
HTML
<a href="#">
<div class="black">
<div class="red"></div>
</div>
</a>
JS
$(".black").click(function(e) {
alert("black");
});
$(".red").click(function(e) {
e.stopPropagation();
});
CSS
.black {
background-color: black;
width: 500px;
height: 500px;
}
.red {
background-color: red;
width: 200px;
height: 200px;
}
EXAMPLE FIDDLE
const clickableBox = document.querySelector(".black")
const anchor = document.querySelector("a")
anchor.addEventListener("click", (e) =>
e.target !== clickableBox && e.preventDefault())
https://jsfiddle.net/korwx3qv/4/
That is so interest issue. Please, take a look here:
<a href="#">
<div class="black">
<div class="red"></div>
</div>
</a>
.black {
background-color: black;
width: 500px;
height: 500px;
}
.red {
background-color: red;
width: 200px;
height: 200px;
cursor: default;
}
$('a').click( function(e) {
if($(e.target).is('.black')) {
alert('.black');
}
});
And demo here: https://jsfiddle.net/kkz6y7uo/2/
Hope it would help you :)
Related
I want to create a script in which i want to increase the margin-top of the image on scrolling down the page and vice-versa, but i cant understand where to put the event listener.
So,That when scrolling down the page, the image moves with the scroll and stops before the green div.
document.getElementById("body").addEventListener("scroll", myFunction);
function myFunction()
{
console.log('scrolled');
}
#body{
width:100%;
height:3000px;
}
#yellowdiv
{
width:100%;
height:1000px;
background-color: yellow;
}
#image
{
width:50%;
height:500px;
border: 10px solid black;
}
#bluediv
{
width:100%;
height:1000px;
background-color: blue;
}
#pinkdiv
{
width:100%;
height:1000px;
background-color: pink;
}
#greendiv
{
width:100%;
height:1000px;
background-color: green;
}
<div id="body">
<div id="yellowdiv">
<img id="image"src="#">
</div>
<div id="bluediv">
</div>
<div id="pinkdiv">
</div>
<div id="greendiv">
</div>
</div>
P.S - new to JS
Thanks in Advance.
You are trying to attach the event handler to the #body div but you are not scrolling the div, you are scrolling the window.
If you want to attach a scroll-event handler to the div, it must be scrollable. Below you can find an example with a wrapper div #scrollable and the event handler is attached to it.
document.getElementById("scrollable").addEventListener("scroll", myFunction);
function myFunction() {
console.log('scrolled');
}
#scrollable {
height: 100px;
overflow-y: auto;
}
#body {
width: 100%;
height: 3000px;
}
#yellowdiv {
width: 100%;
height: 1000px;
background-color: yellow;
}
#image {
width: 50%;
height: 500px;
border: 10px solid black;
}
#bluediv {
width: 100%;
height: 1000px;
background-color: blue;
}
#pinkdiv {
width: 100%;
height: 1000px;
background-color: pink;
}
#greendiv {
width: 100%;
height: 1000px;
background-color: green;
}
<div id="scrollable">
<div id="body">
<div id="yellowdiv">
<img id="image" src="#">
</div>
<div id="bluediv">
</div>
<div id="pinkdiv">
</div>
<div id="greendiv">
</div>
</div>
</div>
I'm trying to make a popup slide up when clicking on the link.
I've prepared an example with elements around the popup under this LINK
There are 2 blocks (block and footer}:
<div id="block">
Some content inside the block.
</div>
<div id="Popup">
<div class="Container">
<div id="tmp"> Popup!
<span id="close">X</span>
</div>
</div>
</div>
<div id="footer">
<span id="FooterLink">Link</span>
</div>
Between them as you can see there is my hidden popup, which I would like to show just above the footer block. When pressing a link in in the footer area, the popup should slowly slide up above the footer overflowing the block above the footer. My popup should have dynamic height because of different content inside depending of a language is chosen by the user. Sorry for my english, hopefully someone can help me with this. I found an example here LINK how should this work (except the clients button is my footer and I can have only popup with absolute position or z-index so I can't really use this example).
The rest of the code:
CSS:
#block {
height: 150px;
color: #FFF;
background-color: #505050;
text-align: center;
}
#Popup {
display: none;
position:absolute;
z-index: 100;
background-color: red;
width: 100%;
min-height: 60px;
}
#close {
width: 20px;
margin-left: 100px;
cursor: pointer;
}
#footer {
height: 50px;
background-color: blue;
color: white;
text-align: center;
}
#FooterLink {
cursor: pointer;
}
JS:
$('#FooterLink').click(function () {
$('#Popup').slideToggle();
});
$('#close').click(function () {
$('#Popup').slideToggle();
});
There's many ways you could accomplish this. What I did was to wrap your footer and popup elements under one wrapping div. This helps in placing and animating their positions in relation to each other. I also wrapped the entire box in one div and called it box.
The footer-container is given a height equal to the and footer element. When you click on the button, bottom with the value of the element's height is applied and since the popup is positioned absolutely, it will animate upwards.
Removing bottom: 60px hides the element again.
This implementation allows for a dynamic height of the popup element as well.
Fiddle
$('#FooterLink').click(function() {
$('#Popup').animate({
top: -$("#Popup").height()
});
});
$('#close').click(function() {
$('#Popup').animate({
top: 0
});
});
#test {
display: inline-block;
}
#block {
height: 150px;
color: #FFF;
background-color: #505050;
text-align: center;
}
#Popup {
position: absolute;
z-index: 0;
background-color: red;
width: 100%;
min-height: 60px;
}
#close {
width: 20px;
margin-left: 100px;
cursor: pointer;
}
#footer-container {
position: relative;
height: 60px;
}
#footer {
position: relative;
z-index: 100;
height: 60px;
background-color: blue;
color: white;
text-align: center;
}
#FooterLink {
cursor: pointer;
}
#box {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="block">
Some content inside the block.
</div>
<div id="footer-container">
<div id="Popup">
<div class="Container">
<div id="tmp">Popup!
<span id="close">X</span>
</div>
</div>
</div>
<div id="footer">
<span id="FooterLink">Link</span>
</div>
</div>
You simple need to change you css #Popup position to relative
Try this solution
$('#FooterLink').click(function () {
$('#Popup').show(2000);
});
$('#close').click(function () {
$('#Popup').hide(2000);
});
#block {
height: 150px;
color: #FFF;
background-color: #505050;
text-align: center;
}
#Popup {
display: none;
position:relative;
z-index: 100;
background-color: red;
width: 100%;
min-height: 60px;
}
#close {
width: 20px;
margin-left: 100px;
cursor: pointer;
}
#footer {
height: 50px;
background-color: blue;
color: white;
text-align: center;
}
#FooterLink {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block">
Some content inside the block.
</div>
<div id="Popup">
<div class="Container">
<div id="tmp"> Popup!
<span id="close">X</span>
</div>
</div>
</div>
<div id="footer">
<span id="FooterLink">Link</span>
</div>
I don't know how to explain this, but maybe in this case picture tells story instead of me:
Shortly if you cannot see it. I'm trying to place logo inside multiple areas (header, body, content) like a global image.
Is that possible with CSS, JavaScript, HTML, PHP?
And if it is, any guides or tips?
You can place your logo inside of the nav (in this case) section. The logo must be absolutely positioned, so that it doesn't mess up with other element's alignment, and your nav section must be relatively positioned, so the logo gets placed in relation to the nav container (even if it's absolute!).
You didn't provide any HTML/dimensions, so we're pretty much left to guess, but here's how it would look, picking arbitrary dimensions.
.nav {
position: relative;
height: 100px;
}
/* .logo is a child of .nav */
.logo {
position: absolute;
top: -50px;
height: 200px;
width: 200px;
left: 0;
}
Take a look:
body {
color: #fff;
text-align: center;
}
.header {
height: 100px;
background: red;
}
.nav {
position: relative;
height: 70px;
background: blue;
}
.logo {
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: -50px;
}
.body {
height: 250px;
background: purple;
}
.footer {
height: 100px;
background: lightblue;
}
<div class="header"> Header </div>
<div class="nav">
<img src="http://www.udavinci.com/wp-content/uploads/2014/09/stackoverflow.png" class="logo"/>
Nav
</div>
<div class="body"> Body </div>
<div class="footer"> My Feet </div>
Alternatively, you may also place your logo outside of everything but inside of the body tag, and just use position: absolute, and tweak it's position (top, left, etc..), according to the dimensions of the relevant elements.
You can put your logo in header and position with :
.your-logo-class {
position: relative;
top: 100px; // Adjust this value
}
You could do it like this:
body { margin: 0; padding: 0; background-color: black;}
#top { background-color: red; width: 100%; height: 100px; }
#nav { background-color: blue; width: 100%; height: 50px; }
#content { background-color: green; width: 400px; height: 500px; margin: 0 auto;}
#footer { background-color: purple; width: 100%; height: 50px; }
<body>
<div id="top">
</div>
<div id="nav">
<img src="images/logo.png" style="padding: 10px;">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
Or you could add position: absolute; to the img style="" and then play around with the margin/padding.
Hmm, a logo is basically an <img> tag, you can place them where ever you like, just give all those <img> tags a class and style it the way you want.
Well i have the following: http://jsfiddle.net/a9VDa/12/
I am trying to make the jquery tree fill the remaining contents of the div "a" but also include a scroll if there isn't enough space.
<div class="a">
<div class="b"></div>
<div class="c" id="tree"></div>
</div>
My suggested solution: http://jsfiddle.net/Bt2sL/2/
Without orange part scrolling.
HTML
<div class="b"></div>
<div class="a">
<div class="c" id="tree"></div>
</div>
CSS
.a {
height: 60px;
background-color: red;
height: auto;
overflow: scroll;
height: 200px; // adjust this to your need
}
.b {
height: 22px;
background-color: coral;
}
.c {
background-color: lightblue;
}
Can you just make div b fixed and add some padding to a with overflow scroll set?
.a {
height: 60px;
background-color: gray;
position: relative;
overflow: scroll;
padding-top: 22px;
}
.b {
position: fixed;
top: 0;
height: 22px;
background-color: coral;
}
.c {
background-color: lightblue;
height: auto;
overflow: scroll;
}
Here is my tricky problem. I'm trying to do this:
http://www.hostingpics.net/viewer.php?id=767312test.gif
(More clear than an explication I think).
My structure :
<header></header>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img1.png"/></div>
</div>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img2.png"/></div>
</div>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img3.png"/></div>
</div>
<footer></footer>
Important informations :
"Header" is fix
"Content" fit to the screen less the height of header
Every "section" are the same but with different content
When the image comes to an end, the "content" div is unfixed.
I am using "section" for implementing a next and previous button in the header (with anchors).
My problem is the scrolling part. I am really lost when I try to fix the "content" div. I don't know how to fix everything except the scroll of the image in the active "img" div when the active "content" div hits the header. (Everyone follows? Look here : http://www.hostingpics.net/viewer.php?id=767312test.gif
For the scrolling part in the "img" div, I was thinking use a sort of "overflow:scroll" but the scrollbar is really awful.
I don't know if it's enough clear. If there is any problem I can complete my problem. I am not very comfortable with complex structures in html with JS.
Thanks for your help!
This is pretty close to what you're asking for (using CSS only).
This relies on the fact that the backgrounds are solid colors. It uses various specifically-defined height properties as well that match some padding properties.
The .top-bar and .bottom-bar elements can probably be changed to pseudo elements if you don't want the extra HTML.
HTML:
<header>Header</header>
<div class="top-bar"></div>
<div class="bottom-bar"></div>
<div class="section">
<div class="text">Section 1 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/100/1000"/></div>
</div>
</div>
<div class="section">
<div class="text">Section 2 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/200/2000"/></div>
</div>
</div>
<div class="section">
<div class="text">Section 3 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/300/3000"/></div>
</div>
</div>
<footer>Footer</footer>
CSS:
body {
margin: 0;
padding: 100px 0 0;
}
header {
background-color: red;
height: 100px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
footer {
background-color: blue;
height: 100px;
}
.section {
min-height: 400px;
}
.text {
background-color: aqua;
height: 50px;
}
.content {
background-color: green;
min-height: 100%;
padding: 40px 0;
position: relative;
}
.img {
background-color: yellow;
min-height: 70%;
margin: 0 auto;
padding: 40px 0;
text-align: center;
width: 80%;
}
.img > img {
vertical-align: middle;
}
.top-bar, .bottom-bar {
background-color: green;
height: 40px;
position: fixed;
width: 100%;
z-index: 5;
}
.top-bar {
top: 100px;
}
.bottom-bar {
bottom: 0;
}
footer, .text {
position: relative;
z-index: 6;
}
JSFiddle here.
For an almost completely correct solution, here is one with some jQuery involved.
New CSS:
body {
margin: 0;
padding: 100px 0 0;
}
header {
background-color: red;
height: 100px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
footer {
background-color: blue;
height: 100px;
}
.section {
min-height: 400px;
}
.text {
background-color: aqua;
height: 50px;
}
.content {
background-color: green;
min-height: 100%;
padding: 40px 0;
position: relative;
}
.img {
background-color: yellow;
min-height: 70%;
margin: 0 auto;
padding: 40px 0;
text-align: center;
width: 80%;
}
.img > img {
vertical-align: middle;
}
.top-bar, .bottom-bar {
background-color: green;
height: 40px;
position: fixed;
width: 100%;
}
.top-bar {
top: 100px;
z-index: 5;
}
.bottom-bar {
bottom: 0;
z-index: 7;
}
footer, .text {
position: relative;
z-index: 8;
}
.img-fix {
bottom: 40px;
height: 400px;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 6;
}
jQuery:
$(document).ready(function(){
$(".content").each(function(){
$(this).append($(this).html());
$(this).find(".img + .img").wrap("<div class='img-fix'></div>");
});
$(window).resize(function() {
resizeImgFix();
});
resizeImgFix();
});
function resizeImgFix() {
$(".img-fix").height($(window).height() - $("header").height() - $(".top-bar").height() - $(".bottom-bar").height());
$(".img-fix").each(function(){
$(this).scrollTop($(this).prop("scrollHeight"));
});
}
JSFiddle here.
Note: It duplicates the .img element and its children. This could be memory intensive depending. However, it does make it work as intended without any visual lag or artifacts.