Can some please, PLEASE! help me with this problem. Okay so I have a code that at first I thought worked well but I forgot that when the default <img src="test-img-1.jpg" class="actual-img"> content is loaded the first of the three buttons below the image should take the active css state that I've specified for the active buttons to take. Now what I want is for this little code to behave like a normal slider by loading in the css hidden contents into the ".image-area" div and it works when I click on the buttons. Problems only surface when I am I trying to give the first loaded content an active state. One way I believe can fix this (I can't implement it) is to let the first immediate default content be this inline hidden div: (
<div id="image-area2">
<div class="img-area-wrapper">
<img src="test-img-2.jpg" class="actual-img">
</div>
</div>) while somehow letting the first button be set to active. I should also mention that I'm not the best with jquery. Please help me fix this someone!
Here is a fiddle to get a better understanding: http://jsfiddle.net/pyrot/84sU4/
If my way of going about this is totally absurd please let me know.
this is my code:
<script type="text/javascript">
$(document).ready(function() {
//loads default content
//$('#image-area').load($('.menu_top a:first-child').attr('href'));
$('.o-links').click(function() {
// href has to be the id of the hidden content element
var href = $(this).attr('href');
$('#image-area').fadeOut(1000, function() {
$(this).html($('#' + href).html()).fadeIn(1000);
});
return false;
});
});
$(function() {
$('.o-links').click(function(e) {
//e.preventDefault();
$('.o-links').not(this).removeClass('O_Nav_Current');
$(this).addClass('O_Nav_Current');
});
});
</script>
this is my html:
<section id="image-slider-container">
<div class="image-slider-inner">
<div id="image-area">
<div class="img-area-wrapper">
<!--currently this is the default I want to change-->
<img src="test-img-1.jpg" class="actual-img">
</div>
</div>
<div id="image-area2">
<div class="img-area-wrapper">
<!--I would like this to be the default content that when
seen the first button is set to active-->
<img src="test-img-2.jpg" class="actual-img">
</div>
</div>
<div id="image-area3">
<div class="img-area-wrapper">
<img src="test-img-3.jpg" class="actual-img">
</div>
</div>
<div class="slider-buttons">
<div class="slider-buttons-container">
</div>
</div>
</div>
</section>
and this is my css:
#image-slider-container {
width: 100%;
height: auto;
background-color: #ffffff;
padding: 5% 0px 0% 0px;
}
.image-slider-inner {
width: 100%;
height: auto;
max-width: 1040px;
margin: 0px auto;
padding: 0px 20px 0px 20px;
}
#image-area2,
#image-area3 {
width: 100%;
height: auto;
display: none;
}
#image-area {
width: 100%;
height: auto;
}
#image-area .img-area-wrapper {
width: 80%;
height: auto;
max-width: 1140px;
margin: 0px auto;
}
.actual-img {
width: 100%;
height: 100%;
}
.slider-buttons {
width: 100%;
height: auto;
max-width: 1140px;
margin-top: 0px;
}
.slider-buttons-container {
width: 100%;
height: auto;
max-width: 1140px;
margin: 10px auto 0px auto;
text-align: center;
}
.slider-buttons-container a {
border-radius: 360px;
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
background-color: #efefef;
outline: 0px;
text-decoration: none;
font-size: 12px;
box-shadow: -2px 1px 2px 0px #ADADAD;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.slider-buttons-container a:hover {
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
background-color: #DAD8D8
}
.slider-buttons-container a:active {
position: relative;
top: 2px;
}
.O_Nav_Current {
border: 1px #999999 solid !important;
background-color: #DAD8D8 !important;
}
Problems only surface when I am I trying to give the first loaded content an active state
Does this mean that you want to add a class to the first button?
$('.o-links').click(function(e) {
// ...
}).first().addClass('O_Nav_Current');
instead of using IDs for the slider's items and resetting html contents you can use classes and indexes:
CSS:
.image-area {
width: 100%;
height: auto;
display: none;
}
.image-area:first-of-type {
display: block;
}
JavaScript:
var $slides = $('.image-area'),
$btns = $('a.o-links');
$btns.on('click', function (e) {
var i = $btns.removeClass('O_Nav_Current').index(this);
$(this).addClass('O_Nav_Current');
$slides.filter(':visible').fadeOut(1000, function () {
$slides.eq(i).fadeIn(1000);
});
e.preventDefault();
}).first().addClass('O_Nav_Current');
http://jsfiddle.net/RmF57/
Related
I have a simple emoji picker and the ballon remains open as default when the page is refreshed, I can't find a way how to keep it close and only open the ballon when pressing a button.
HTML
<div class="container">
<div class="emoji-btn open"><img src='images/smileys.png' title='Smileys'>
<!--this is the div I want to keep hidden till I click the button > --> <div class="emoji-popup">
<div class="emoji-wrapper"></div>
</div>
</div>
</div>
JS
emojibtn.addEventListener("click", function (e) {
e.stopPropagation();
this.classList.toggle("open");
});
document.body.addEventListener("click", function () {
emojibtn.classList.remove("open");
});
CSS
.emoji-popup {
position: absolute;
top: -140px;
left: 10px;
height: 130px;
width: 194px;
background: #999;
border-radius: 2px;
text-align: left;
overflow-y: auto;
opacity: 0;
pointer-events: none;
transition: all 0.25s;
box-sizing: border-box;
}
.emoji-wrapper {
overflow: hidden;
padding: 10px;
box-sizing: border-box;
}
.emoji-popup .emoji-img {
margin: auto;
width: 30px;
height: 30px;
text-align: center;
border-radius: 5px;
}
.emoji-popup .emoji-img:hover {
background: rgba(0, 0, 0, 0.25);
}
You can add the property display: none; ( https://developer.mozilla.org/en-US/docs/Web/CSS/display), visibility: hidden(https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) or opacity: 0; (https://developer.mozilla.org/en-US/docs/Web/CSS/opacity). Then onClick you can add the class open with the properties display: block (if it's a div), visibility: visible or opacity: 1.
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.
I am trying to get all click over my overlay, and i dont know angular is ignoring him when i click at another element under the overlay.
I created this stackblitz to see if the problem happens in another place, but i had the similar problem.
https://stackblitz.com/edit/angular-ivy-sjkwkc?file=src%2Fapp%2Fapp.component.html
.carta {
width: 50px;
height: 100px;
position: relative;
padding: 5px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px rgba(163,161,163,1);
background-color: #fff;
}
.carta:hover {
box-shadow: 0px 0px 8px 0px rgba(163,161,163,1);
border-color: var(--preto);
cursor: pointer;
}
.carta .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
}
<div class="mao">
<div class="carta">
<div (click)="selecionaCarta($event, 'test')" class="overlay"></div>
<span class="nome ouro">Here</span>
<span class="naipe"></span>
</div>
</div>
It is because both your overlay and text is positioned absolute. In your case you want the overlay to be on top.
Adding a z-index to your overlay class should fix the issue.
E.g.
.carta .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
z-index: 10; // <<< this
}
What I am trying to do is when you click on a button that has the class ".option" it will show the div that has the id "#dialog" and then it will add the class .active to the button clicked (there maybe more than one button that shows different dialogues later one) as well as adding the class ".noScroll" to the body. When the dialogue is shown it can be closed by clicking anywhere on the "#dialog" but NOT the ".dialogPage" which is the div that is inside the "#dialog" div. If the dialogue has been closed, the class that has been added to the body and to the button shall be removed.
Here is the button that need to be clicked to show the dialog:
<a class="option" href="edit_account.php">Your Account</a>
The following HTML represents the structure of my Dialog:
<div id="dialog">
<div id="dialogPage" class="dialogPage">
<p>Edit your account here</p>
</div>
</div>
Here is the related CSS:
body {
color: #4A4A4A;
background-color: #F7F7F7;
font-family: 'arial', sans-serif;
font-size: 0.95em;
line-height: 150%;
text-align: center;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
overflow-x: hidden;
}
#dialog {
display: none;
background-color: rgba(25,30,37,0.95);
width: 100%;
position: fixed;
bottom:0; top: 0; left: 0; right: 0;
margin-top: 70px;
z-index: 900;
overflow-y: auto;
overflow-x: hidden;
}
.dialogPage {
background-color: #F7F7F7;
border: 2px solid #ffffff;
width: 900px; min-width: 900px;
padding: 20px;
margin: 50px auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
}
.noScroll {
overflow-y: hidden;
overflow-x: hidden;
}
Here is the JavaScript I am currently using, but please do not built on it as it is wrong I am sure:
$(".option, #dialog").on('click', function() {
$("#dialog").toggle(29);
$("body").toggleClass("noScroll");
if (e.target.id != 'dialogPage' && !$('#dialogPage').find(e.target).length) {
$("#dialog").hide();
}
});
Try the following:
$('.option').click(function(e) {
e.preventDefault();
$('#dialog').show();
$('body').addClass('noScroll');
$(this).addClass('active');
return false;
});
$('#dialog').click(function(e) {
$(this).hide();
$('body').removeClass('noScroll');
$('.option').removeClass('active');
});
$('#dialogPage').click(function(e) {
e.stopPropagation();
});
I didn't see any use of the .active class in your current code, so that is just a guess.
Demo: http://jsfiddle.net/verashn/2Xh7d/
I am stuck. I have a page with 3 buttons, the 3 buttons do a couple things - they change the style of a div, and they also show/hide a content div. The changing of the div style works fine, but I am having issues with the content div. If you land on the page and click the "Our Brands" tab, then click the other 2 tabs, it works fine. If you land on the page, and click "What's New" or "About Us" first, then the show/hide does not work correctly - it does not until you actually click on "Our Brands."
http://www.adriancollins.net/clients/kennys/
Any help would be appreciated, I am a designer first, a developer about 9000th.
Show/Hide Code
<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
</script>
Tab Divs
<div id="brand_button"><img src="wp-content/uploads/2012/10/brands_button.png"></div>
<div id="whatsnew_button"><img src="wp-content/uploads/2012/10/whatsnew_button.png"></div>
<div id="about_button"><img src="wp-content/uploads/2012/10/about_button.png"></div>
Content Divs
<div id="brands_content">Content...</div>
<div id="new_content">Content...</div>
<div id="about_content">Content...</div>
CSS
#brands_content
{
position: relative;
display: block;
width: 990px;
top: 10px;
height: auto;
min-height: 800px;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
border: 0px;
padding: 0px 0px 0px 0px;
z-index: 12;
}
#new_content
{
position: relative;
display: none;
width: 990px;
top: 10px;
height: auto;
min-height: 800px;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
border: 0px;
padding: 0px 0px 0px 0px;
z-index: 999;
color: #fff;
}
#about_content
{
position: relative;
display: none;
width: 990px;
top: 10px;
height: auto;
min-height: 800px;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
border: 0px;
padding: 0px 0px 0px 0px;
z-index: 999;
}
Thanks
You can change your body tag to be:
<body class="home page page-id-5 page-template page-template-home-php">
to
<body class="home page page-id-5 page-template page-template-home-php" onload="showdiv('brands_content')">
A quick solution is to call showdiv('brands_content'); after all your html is loaded, then you have effectively clicked the "Our Brands" and everything behaves as desired.
<div id="brand_button"><img src="wp-content/uploads/2012/10/brands_button.png"></div>
<div id="whatsnew_button"><img src="wp-content/uploads/2012/10/whatsnew_button.png"></div>
<div id="about_button"><img src="wp-content/uploads/2012/10/about_button.png"></div>
showdiv('brands_content');