I have two consecutive divs in a HTML page
First div contains child span which is relative in position. That's why it comes over second div.
I have a click event associate with both divs.
When I click the part of the span which comes over second div, it triggers the first div's click event but I want here to trigger second div's click event.
Is there any way to achieve this.
function div1Clicked() {
alert('div 1 clicked');
}
function div2Clicked() {
alert('div 2 clicked');
}
#div1 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
}
#div1 span {
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
}
#div2 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
}
<div onclick="div1Clicked()" id="div1">
<span>
</span>
</div>
<div onclick="div2Clicked()" id="div2">
<div>
</div>
</div>
If you don't need any hover state on the child span, you can do it like this. Keep in mind this differs a bit from your html but it can be converted to your html/css easy, I just don't have the time to do it at this moment.
What you do is add :after on the two divs with a higher z-index, that will overlay the span and work as trigger areas for you javascript. Don't mind my "strange looking css" it's BEM. You can use your javascript triggers and it will work well. You can use alert() instead of console.log() if you are not familiar with devtools in your browser of choice.
DEMO
<div class="block">
<div class="block__column block__column--left js-action-1"></div>
<div class="block__column block__column--right js-action-2"></div>
<div class="block__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, voluptas!</div>
</div>
.block {
display: flex;
position: relative;
}
.block__column {
width: 50%;
height: 20rem;
position: relative;
}
.block__column:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.block__column:hover {
cursor: pointer;
}
.block__column--left {
background-color: deepskyblue;
}
.block__column--right {
background-color: deeppink;
}
.block__description {
position: absolute;
top: 50%;
left: 2rem;
right: 2rem;
background-color: white;
}
$('.js-action-1').on('click', function() {
console.log('clicked the left column');
});
$('.js-action-2').on('click', function() {
console.log('clicked the right column');
});
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div onclick="div1Clicked()" id="div1" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
">
<span style="
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
">
</span>
</div>
<div onclick="div2Clicked()" id="div2" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
">
<div>
</div></div>
<script>
function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}
function div2Clicked(){
alert('div 2 clicked');
}
</script>
</body></html>
Click the span element if trigger the event parent elemnet(div1) event, so does not get the correct output. But You get the output some check the condition.Please refer below snippets
function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}
As the span lies in div1, when it gets clicked, it will fire div1 click event only, even if it is overlapping the div2. So instead if you could use on click event of the green span, it might help. It will still fire div1 click event.
<html><head></head>
<body>
<div onclick="div1Clicked()" id="div1" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
">
<span style="
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
" onclick="spanClicked()">
</span>
</div>
<div onclick="div2Clicked()" id="div2" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
">
<div>
</div></div>
<script>
function div1Clicked(){
alert('div 1 clicked');
}
function spanClicked(){
alert('span clicked');
}
function div2Clicked(){
alert('div 2 clicked');
}
</script>
</body></html>
If click-events on the span are not necessary, you could apply pointer-events: none to the span which will ignore clicks on the span altogether.
function div1Clicked() {
alert('div 1 clicked');
}
function div2Clicked() {
alert('div 2 clicked');
}
#div1 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
}
#div1 span {
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
pointer-events: none; /*This will make the span click-through*/
}
#div2 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
}
<body>
<div onclick="div1Clicked()" id="div1">
<span></span>
</div>
<div onclick="div2Clicked()" id="div2">
<div>
</div>
</div>
You can do like below Snippet...
$('.first,.second').click(function(){
alert($(this).attr('class'))
})
.first{
width:200px;
height:300px;
background-color:red;
display:inline-block;
float:left;
position:relative;
}
span{
position:absolute;
left: 30%;
top: 30%;
}
.first:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.second:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
}
.second{
width:200px;
height:300px;
background-color:green;
display:inline-block;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="first">
</div>
<div class='second'>
</div>
<span>Hello World....</span>
</body>
Related
Add onclick event listener to container div.
I tried the following, and as you can see, the event does not seem to be registered. How can I add the listener to this div?
The div id I want is "engineersContainer."
document.getElementById("engineersContainer").addEventListener("click", function(e) {
console.log("It was clicked");
alert("It was clicked");
});
.barContainer {
margin: 2px;
border: 2px solid black;
border-radius: 20px;
width: 200px;
//width:-moz-fit-content;
//width: fit-content;
padding: 5px;
overflow: hidden;
position: relative;
background: #34e8eb;
z-index: -1;
}
.containerHeader:before {
content:"";
background: skyblue;
position: absolute;
inset: 0;
z-index: -1;
height:45px
}
<div id="engineersContainer" class="barContainer">
<div id="engineerList" class="containerHeader" style="font-size:1.5em; text-align:center">Current Engineer </div>
<div> Engineer's Name</div>
<div id="clickText" style="padding-bottom: 10px; font-size:0.75em; text-align:center "> (Click to See All Permits) </div>
</div>
Remove the -1 z-index, otherwise it will be under the rest of the page
Add the event listener in the page load event
See second example for a workaround
window.addEventListener("load", function() {
document.getElementById("engineersContainer")
.addEventListener("click", function(e) {
console.log("It was clicked");
});
});
.barContainer {
margin: 2px;
border: 2px solid black;
border-radius: 20px;
width: 200px;
//width:-moz-fit-content;
//width: fit-content;
padding: 5px;
overflow: hidden;
position: relative;
background: #34e8eb;
/* z-index: -1 */
}
.containerHeader:before {
content: "";
background: skyblue;
position: absolute;
inset: 0;
z-index: -1;
height: 45px
}
.containerHeader {
font-size: 1.5em;
text-align: center
}
#clickText {
padding-bottom: 10px;
font-size: 0.75em;
text-align: center
}
<div id="engineersContainer" class="barContainer">
<div id="engineerList" class="containerHeader">Current Engineer </div>
<div> Engineer's Name</div>
<div id="clickText"> (Click to See All Permits) </div>
</div>
Otherwise add another div on top of it
window.addEventListener("load", function() {
document.getElementById("engineersContainerClick").addEventListener("click", function(e) {
console.log("It was clicked");
});
});
.barContainer {
margin: 2px;
border: 2px solid black;
border-radius: 20px;
width: 200px;
//width:-moz-fit-content;
//width: fit-content;
padding: 5px;
overflow: hidden;
position: relative;
background: #34e8eb;
z-index: -1
}
#engineersContainerClick {
margin: 2px;
border-radius: 20px;
width: 200px;
height:70px;
padding: 5px;
border:none;
overflow: hidden;
position: absolute;top:0;
background-color: transparent;
z-index:999;
}
.containerHeader:before {
content: "";
background: skyblue;
position: absolute;
inset: 0;
z-index: -1;
height: 45px
}
.containerHeader {
font-size: 1.5em;
text-align: center
}
#clickText {
padding-bottom: 10px;
font-size: 0.75em;
text-align: center
}
<div id="engineersContainer" class="barContainer">
<div id="engineerList" class="containerHeader">Current Engineer </div>
<div> Engineer's Name</div>
<div id="clickText"> (Click to See All Permits) </div>
</div>
<div id="engineersContainerClick" class="barContainer">
You need to remove the z-index: -1 in your CSS.
Any user clicks are not making contact with the element, but with the document above the element.
Working Example:
document.getElementById("engineersContainer").addEventListener("click", function(e) {
console.log("It was clicked");
alert("It was clicked");
});
.barContainer {
margin: 2px;
border: 2px solid black;
border-radius: 20px;
width: 200px;
/* width:-moz-fit-content; */
/* width: fit-content; */
padding: 5px;
overflow: hidden;
position: relative;
background: #34e8eb;
}
.containerHeader:before {
content:"";
background: skyblue;
position: absolute;
inset: 0;
z-index: -1;
height:45px
}
<div id="engineersContainer" class="barContainer">
<div id="engineerList" class="containerHeader" style="font-size:1.5em; text-align:center">Current Engineer </div>
<div> Engineer's Name</div>
<div id="clickText" style="padding-bottom: 10px; font-size:0.75em; text-align:center "> (Click to See All Permits) </div>
</div>
document.getElementById("engineersContainer").onclick=function(){
console.log("your event");
}
.barContainer {
margin: 2px;
border: 2px solid black;
border-radius: 20px;
width: 200px;
//width:-moz-fit-content;
//width: fit-content;
padding: 5px;
overflow: hidden;
position: relative;
background: #34e8eb;
}
.containerHeader:before {
content:"";
background: skyblue;
position: absolute;
inset: 0;
z-index: -1;
height:45px
}
<body>
<div id="engineersContainer" class="barContainer">
<div id="engineerList" class="containerHeader" style="font-size:1.5em; text-align:center">Current Engineer </div>
<div> Engineer's Name</div>
<div id="clickText" style="padding-bottom: 10px; font-size:0.75em; text-align:center "> (Click to See All Permits) </div>
</div>
</body>
ng-js -->
document.getElementById("engineersContainer").onclick=function(){
console.log("your event");
}
<div id="engineersContainer"> Here is the Engineers Container
</div>
I would use an anonymous function for this. You must call the script after your div has been created, as Javascript is read top to bottom and will not have a reference if it is run before the div has been placed.
Beware that if you have a listener on the container div, it will impact your ability to introduce any clickable options within the divs child elements such as buttons later on. Could this cause you problems in the future? If so rethink the design possibly to save you some trouble later. Also, the negative Z index needs to be removed as it is being drawn beneath the layer that Javascript detects the clicks. Sorry for the edits I'm new to StackO.
Maybe some of you can help me solve this problem.
I have this code and I made like an extension for the product that will show product description when click on product. But the on click function isn't working (can't close description).
Thanks!
$('.product').on('click', function(){
$('.product .productExtension').css("display","none");
$(this).children(".productExtension").css("display","block");
});
function close(){
$('.productExtension').css("display","none");
}
.product{
position: relative;
width: 80px; height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center; font-family: Arial;
}
.product > .productExtension{
position: fixed;
top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 300px; height: 200px;
padding: 20px;
background: red;
text-align: left;
display: none;
}
.product > .productExtension > .closeProductExtension{
position: absolute;
top: -40px; left: 0;
width: 20px; height: 20px;
margin: 10px;
border: none;
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
<div class="closeProductExtension" onclick="close()">Close</div>
</div>
</div>
Now I know it wasn't fully part of the question, and I took a bit of liberty with the styling, but there is absolutely no need to hide all different productExtension classes upon each close. It would be far lighter to read the properties detailed inside your product div, and render them to a modal.
It does have an overly complex way of closing the modal ( just some liberties at work there, I am sorry for that one :) )
The answer that is currently accepted both details the reason why you cannot use close (could be window.close), I just thought the offer a different perspective when you have more than one product how to transfer the data between a modal and your DOM as you describe it now. I think it has its advantages
window.addEventListener( 'load', function() {
document.querySelectorAll('.product').forEach( product => {
product.addEventListener('click', handleProductClicked, false );
} );
document.querySelectorAll('[data-action]').forEach( action => {
action.addEventListener('click', handleAction );
} );
function handleAction( e ) {
const owner = e.currentTarget;
const action = owner.getAttribute('data-action');
const selector = owner.getAttribute('data-target');
const target = document.querySelector( selector );
if (action === 'hide') {
if ( !target.classList.contains('hidden') ) {
target.classList.add('hidden');
}
}
}
function showModal( title, content, owner ) {
const modal = document.querySelector('#modal');
if ( modal.classList.contains('hidden') ) {
modal.classList.remove( 'hidden' );
}
modal.querySelector('[data-for=title]').innerText = title;
modal.querySelector('[data-for=content]').innerHTML = content;
}
function handleProductClicked( e ) {
const productContainer = e.currentTarget;
const name = productContainer.querySelector('.productName').innerText;
const description = productContainer.querySelector('.productExtension').innerHTML;
showModal( name, description, productContainer );
}
} );
.hidden {
display: none;
visibility: hidden;
}
.productExtension {
display: none;
visibility: hidden;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
border: solid #a0a0a0 1px;
box-shadow: 5px 3px 5px #777;
background-color: #cfcfcf;
}
.modal > .title {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
height: 20px;
font-size: 0.9em;
background-color: blue;
border-bottom: solid #fff 1px;
}
.modal > .title > .controls {
position: absolute;
right: 0px;
top: 0px;
width: 20px;
height: 18px;
background-color: #efefef;
border: solid #a0a0a0 1px;
text-align: center;
text-transform: small-caps;
}
.controls:hover {
font-weight: bold;
cursor: pointer;
}
.modal > .title > [data-for] {
padding: 3px;
color: #fff;
font-weight: 800;
}
.modal > .content {
position: absolute;
left: 0px;
right: 0px;
top: 21px;
bottom: 0px;
padding: 5px;
border: inset #666 1px;
}
.product {
position: relative;
width: 80px;
height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center;
font-family: Arial;
}
<div class="modal hidden" id="modal">
<div class="title">
<span data-for="title"></span>
<div class="controls">
<span data-action="hide" data-target="#modal">X</span>
</div>
</div>
<div class="content" data-for="content">
</div>
</div>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
</div>
</div>
<div class="product">
<div class="productName">Blue Hoodie</div>
<div class="productPrice">14.75$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in blue color</div>
</div>
</div>
This is happening because both functions trigger. The first trigger because you are clicking on an item that is inside the DIV “product” and the second because you’ve passed the function to the onClick. You should take out the “productExtension” div from “product” to make it works.
As mentioned in other comments, you have two click handler in the parent and child. The parent div is intercepting all click events. Try this for your requirement.
$(".product").on("click", function(e) {
$(".product .productExtension").css("display", "none");
$(this)
.children(".productExtension")
.css("display", "block");
if (e.target.classList.contains('closeProductExtension')) {
$(".productExtension").css("display", "none");
}
});
You have several problems. The first is that you trigger the open event as well. To solve this you can use stop propagation. The second is that you are using the method name "close" which is already used in JS.
$('.product').on('click', function() {
$('.product .productExtension').css("display", "none");
$(this).children(".productExtension").css("display", "block");
});
function closeE(event) {
event.stopPropagation();
$('.productExtension').css("display", "none");
}
.product {
position: relative;
width: 80px;
height: 160px;
padding: 20px;
border: solid 1px grey;
text-align: center;
font-family: Arial;
}
.product>.productExtension {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
padding: 20px;
background: red;
text-align: left;
display: none;
}
.product>.productExtension>.closeProductExtension {
position: absolute;
top: -40px;
left: 0;
width: 20px;
height: 20px;
margin: 10px;
border: 1px solid black;
background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<div class="productName">Red Hoodie</div>
<div class="productPrice">14.72$</div>
<div class="productExtension">
<div class="productDescription">This hoodie is in red color</div>
<div class="closeProductExtension" onclick="closeE(event)">Close</div>
</div>
</div>
How to change display from none to block using JavaScript/Polymer.
I tried many things but I can't figure out why it is not working.
My current code:
<link rel="import" href="/bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<dom-module id="navigatie-element">
<template>
<style type="text/css">
#header {
height: 50px;
background-color: #D8434A;
margin-left: -8px;
margin-top: -8px;
margin-bottom: 9px;
border-bottom: 2px solid white;
}
#header img {
margin-top: 2px;
margin-left: 10px;
width: 218px;
height: 46px;
}
#navbar {
background-color: #D8434A;
width: 214px;
height: 100%;
position: fixed;
margin-left: -8px;
margin-top: -8px;
}
#navbar ul {
margin-left: -40px;
margin-top: -33px;
}
#navbar ul li {
display: absolute;
width: 200px;
height: 40px;
margin-top: 6px;
padding-top: 8px;
}
#navbar ul li a {
text-decoration: none;
display: block;
background-color: white;
color: white;
position: absolute;
width: 200;
background-color: #D8434A;
text-align: left;
padding-left: 10px;
border-bottom: 2px solid white;
border-right: 4px solid orange;
line-height: 50px;
}
#navbar ul li a:hover{
background-color: #FFFA75;
}
#navbar ul li img {
height: 30px;
width: 30px;
margin-right: 10px;
margin-bottom: -9px;
}
#input-field label{
position: relative;
left: 500px;
top: 100px;
}
#input-field paper-input{
position: relative;
left: 520px;
top: 90px;
}
#input-field paper-button{
position: relative;
left: 550px;
top: 90px;
}
#input-field h1{
position: relative;
left: 635px;
top: 50px;
}
#input-field2{
display: none;
}
#input-field2 label{
position: relative;
left: 500px;
top: 100px;
}
#input-field2 paper-input{
position: relative;
left: 520px;
top: 90px;
}
#input-field2 paper-button{
position: relative;
left: 550px;
top: 90px;
}
</style>
<div id="header">
<img src="afbeeldingen/header_naam.png">
</div>
<div id="navbar">
<ul>
<li><img src="afbeeldingen/menu_bestellen.png">Bestellen</li>
<li><img src="afbeeldingen/menu_bestellingen.png">Bestellingen</li>
<li><img src="afbeeldingen/menu_serveren.png">Serveren</li>
<li><img src="afbeeldingen/menu_afrekenen.png">Afrekenen</li>
</u>
</div>
<div id="input-field">
<h1>Afrekenen</h1>
<table>
<tr>
<td><label>Tafelnummer:</label></td>
<td><paper-input class="test" label=""></paper-input></td>
<td><paper-button on-click="bevestigen" raised>Bevestigen</paper-button></td>
</tr>
</table>
</div>
<div id="input-field2">
<table>
<tr>
<td><label>Betaalmethode:</label></td>
<td><paper-button on-click="contant" raised>Contant</paper-button></td>
<td><paper-button on-click="pin" raised>PIN</paper-button></td>
</tr>
</table>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'navigatie-element',
bevestigen: function() {
if (document.getElementById("input-field2").style.display == "block")
{
document.getElementById('input-field2').style.display = 'none';
}
else
{
document.getElementById('input-field2').style.display = 'block';
}
}
});
class NavigatieElement extends Polymer.Element{
static get is() { return 'navigatie-element';}
}
window.customElements.define(NavigatieElement.is, NavigatieElement);
</script>
If I add alert("test"); for example inside the script tag it's working well, so there is nothing wrong with the button.
The problem is the JavaScript I have added to it.
I want to display the div after clicking on bevestigen
It should change from block to none
You should read about the concepts of Shadow DOM, for example on the Polymer site, here.
The important thing to note here is that you are inside your element called navigatie-element, you can't use the document as a "scope" to query elements in (or in fact you could, but you would query in the top level document, not inside your element).
From what I understand you are interested in your local shadow DOM, so you could try to replace
if (document.getElementById("input-field2").style.display == "block")
{
document.getElementById('input-field2').style.display = 'none';
}
else
{
document.getElementById('input-field2').style.display = 'block';
}
with:
if (this.shadowRoot.getElementById("input-field2").style.display == "block")
{
this.shadowRoot.getElementById('input-field2').style.display = 'none';
}
else
{
this.shadowRoot.getElementById('input-field2').style.display = 'block';
}
I have a container with two columns, one of which holds a sidebar.
JSFiddle
The sidebar is fixed, and when it gets near the bottom I used jQuery to alter the bottom to have it roughly stay at the bottom of the container.
How can I make it so it stops moving perfectly when it hits the bottom of the container (outlined in red)? It would have to work for a sidebar of any height.
HTML
<div class="container">
<div class="col-left">
<div class="sidebar">
fixed sidebar
</div>
</div>
<div class="col-right">
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
</div>
<footer>Footer</footer>
CSS
.container {
outline: 1px solid red;
position: relative;
}
.col-left {
width: 58%;
display: inline-block;
outline: 1px solid black;
vertical-align: top;
height: 100%;
}
.col-right {
width: 40%;
display: inline-block;
outline: 1px solid black;
vertical-align: top;
}
.sidebar {
position: fixed;
top: 50px;
left: 50px;
height: 200px;
width: 100px;
background: #fff;
}
footer {
background: #000;
width: 100%;
height: 300px;
margin-top: 100px;
color: #fff;
}
jQuery (Doubt it'll be of use I think it needs to be rethought)
jQuery(window).scroll(function(){
var scrollBottom = jQuery(document).height() - jQuery(this).scrollTop() - jQuery(this).height();
console.log(scrollBottom);
if (scrollBottom < 300){
jQuery('.sidebar').css('bottom', Math.abs(scrollBottom - 420));
jQuery('.sidebar').css('top', 'auto');
} else {
jQuery('.sidebar').css('bottom', 'auto');
jQuery('.sidebar').css('top', '50px');
}
Here's a jQuery solution whipped up by calculating heights of the relevant elements, and factoring in the current scroll position of the page. When the sidebar would normally move outside of its container, a .lock class is added to it that unfixes it with CSS.
Working example below:
var $sidebar = $('.sidebar');
var $container = $('.container');
var sideBottom = $sidebar.offset().top + $sidebar.height();
var contBottom = $container.offset().top + $container.height();
$(window).scroll(function() {
if (window.scrollY + sideBottom > contBottom) {
$sidebar.addClass('lock');
} else if ($sidebar.hasClass('lock')) {
$sidebar.removeClass('lock');
}
});
body {
background: #eee;
margin: 0;
}
.container {
outline: 1px solid red;
position: relative;
}
.col-left {
width: 58%;
display: inline-block;
outline: 1px solid black;
vertical-align: top;
height: 100%;
}
.col-right {
width: 40%;
display: inline-block;
outline: 1px solid black;
vertical-align: top;
}
.sidebar {
position: fixed;
top: 50px;
left: 50px;
height: 140px;
width: 100px;
background: #fff;
}
.sidebar.lock {
position: absolute;
bottom: 0;
top: auto;
}
footer {
background: #000;
width: 100%;
height: 400px;
margin-top: 100px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-left">
<div class="sidebar">
fixed sidebar
</div>
</div>
<div class="col-right">
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
</div>
<footer>Footer</footer>
Try this once it might help you.
.sidebar{
position: -webkit-sticky;
position: sticky;
top: 0;
}
I am trying to show a specific Paragraph when a specific div is clicked upon. I cannot get the jQuery to function the way I would like it to.
I want that if the ".Virus" div is clicked on, it shows the contents "v", if ".screenRepair" div is clicked on then it shows the ".screenInfo" contents
Any help would be appreciated.
HTML:
<div class="outerService">
<div class="service">
<div class="virus" style="width: 230px; height: 208px;">
<center>
<h3 style="width:200px; text-align:center">Computer Virus</h3>
<img src="images/Services/virus.jpg" alt="virus" height="140px"/>
</center>
</div>
<div class="information">
<p class="v">This is information</p>
<p class="screenInfo">hello</p>
</div>
<div class="screenRepair" style="width: 230px;">
<center>
<h3 style="width:auto; text-align:center">Screen Replacement</h3>
<img src="images/Services/smashedScreen.jpg" alt="BrokenScreen" height="140px"/>
</center>
</div>
</div>
</div>
CSS:
.outerService {
width: 90%;
margin-left: auto;
margin-right: auto;
height: auto;
border: 1px solid blue;
}
.service {
display: table;
height: auto;
max-width: 1044px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
}
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width: 250px;
height: 208px;
float: left;
max-height: auto;
text-align: center;
margin-left: 10px;
border: 1px solid #000;
}
#vInfo {
float: none;
width: 50%;
text-align: justify;
border: 1px solid #000;
display: none;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.information {
margin-left: 10px;
border: 3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
display: none;
}
.information p {
text-align: justify;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
jQuery
$(document).ready(function () {
$(".virus").click(function () {
$(".information .v").show();
});
});
With your current CSS you can try something like this:
$(document).ready(function() {
var $info = $( '.information' );
$(".virus").click(function() {
$info.show().find( 'p:not(.v)' ).hide().siblings().show();
});
$(".screenRepair").click(function() {
$info.show().find( 'p:not(.screenInfo)' ).hide().siblings().show();
});
});
Or you can slightly change your CSS and try to hide every P within .information instead of hiding .information itself.
Hope this helps.
change information div properties in your css (remove display:none)
.information {
margin-left: 10px;
border:3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
}
and add this lines to your css
.information .v {
display:none;
}
.screenInfo{
display: none;
}
Use Toggle if you want to show and hide div
Try something like this:
jQuery(document).ready(function(){
jQuery('#virus').live('click', function(event) {
jQuery('#information').toggle('show');
});
});
its working here is the JS Fiddle
$(document).ready(function() {
$(".virus").click(function() {
$(".information").show().find('p').show().next('.screenInfo').hide();
});
$(".screenRepair").click(function() {
$(".information").show().find('p').show().prev('.v').hide();
});
});
JSFiddle
Try something like this:
$(".service img").click(function () {
$(".information .v").toggle($(this).closest('div').hasClass('virus'));
$(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});
.hasClass() returns boolean true/false.
.toggle(true) results to show the hidden object while .toggle(false) results in hiding the object.
As suggested in the comments you need to hide all the infos rather than .information div. otherwise you need to show this one before showing any other info div.
Some other edits can be done like:
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width: 250px;
height: 208px;
float: left;
max-height: auto;
text-align: center;
margin-left: 10px;
border: 1px solid #000;
display: none; /*<-----add this to hide the info divs.*/
}
.information {
margin-left: 10px;
border: 3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
display: none;
}
and then you can add one more line:
$(".service img").click(function () {
$(".information").show(); //<----show it before showing any other div.
$(".information .v").toggle($(this).closest('div').hasClass('virus'));
$(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});
May be you want to look into this:
$(".service > div:not(.information)").click(function () {
$(".information").hide().show(); //<----show it before showing any other div.
$(".information .v").toggle($(this).hasClass('virus'));
$(".information .screenInfo").toggle($(this).hasClass('screenRepair'));
});
Try this
$(document).ready(function () {
$(".virus").click(function() {
$(".information").show();
$(".v").show();
$(".screenInfo").hide();
});
$(".screenRepair").click(function() {
$(".information").show();
$(".screenInfo").show();
$(".v").hide();
});
});
see in live
$(document).ready(function() {
$('.virus').click(function() {
$('.information').show();
$('.v').show();
});
});
.information {display:none;} .information p{display:none;}