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');
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.
I am trying to achieve toggle option using jQuery. I have two styles (sub-menu-icon and sub-menu-mobile). On clicking on "sub-menu-icon" class div, i want to toggle "sub-menu-mobile" class div to toggle from left to right and right to left.
$(document).ready(function() {
$('.sub-menu-icon').toggle(function() {
$(".sub-menu-mobile").css("width", "200px");
});
});
.sub-menu-icon {
width: 30px;
height: 30px;
border: 1px solid #2B383E;
background-color: #4390ce;
display: block;
float: right;
}
.sub-menu-mobile {
min-width: 0px;
height: 100%;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-icon">
Icon
</div>
<div class="sub-menu-mobile">
Rights side Menu
</div>
You want to use a click handler on the menu, then toggle a class that toggles the width. You also need to re-arrange the HTML elements and add position: relative; to the menu so the menu will show up above the sidebar.
$('.sub-menu-icon').on('click',function() {
$(".sub-menu-mobile").toggleClass('width');
});
.sub-menu-icon {
width: 30px;
height: 30px;
border: 1px solid #2B383E;
background-color: #4390ce;
display: block;
float: right;
position: relative;
}
.sub-menu-mobile {
min-width: 0px;
height: 100%;
background-color: #cccccc;
position: absolute;
top: 0px;
right: 0px;
}
.width {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-menu-mobile">
Rights side Menu
</div>
<div class="sub-menu-icon">
icon
</div>
there seems to be a thread with a case very similar to yours. Check this out!
Toggle Between two Divs
Here I am trying to create some new Divs. When I press the save button, it fetch the data from text area and create a new div in top of the Add Button. That works Perfectly. Then I create some more divs, the Add Button reach the bottom of the page. And My need is, the Add Button should stop when it reaches the bottom of the page. I don't want to scroll my page. I just need the Created divs should scroll. Not the whole page. Please give some advise. Thank You.
$('.add-list-button').on('click', function() {
$('.add-list-button').hide();
$('.list-create').show();
document.getElementById("SAVE_LIST").focus();
});
$('.save-list').on('click', function() {
var listName = $('.list').text();
if (listName !== "") { //////////////////
$('.list').html("");
$('.add-list-button').hide();
$('.list-create').show();
document.getElementById("SAVE_LIST").focus();
createNewList(listName);
}
});
$('.close-list').on('click', function() {
$('.list-create').hide();
$('.add-list-button').show();
$('.list').html(""); ////////////////////////////////
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="create-list" id=L IST style="display: inline-block; width: 250px; background-color: #e2e4e6; border-radius: 3px; margin-left: 10px; margin-top: 40px; ">
<div class="add-list-button">
<b> Add </b>
</div>
<div class="list-create" style="display: none; min-height: 80px; border-radius: 3px; background-color: #e2e4e6; ">
<div class="list" id="SAVE_LIST" style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; margin-top: 5px; " contenteditable="true" data-placeholder="Add"></div>
<div style="width: 250px; height: 35px; margin-top: 5px;">
<input class="save-list" type="button" value="Save" style="cursor: pointer; width: 60px; height: 30px; background-color: gray; border-color: gray; margin-left: 10px; border-radius: 3px; vertical-align: top;">
<img class="close-list" src="public/media/images/icons/cls.png" width="27" height="27" style="cursor: pointer; margin-top: 3px; margin-left: 5px;">
</div>
</div>
</div>
Give a container class to your list items like this;
<div class="listcontainer">
//items
</div>
With a little bit styling, the container should scroll whenever the content size exceeds its size.
.listcontainer{height:200px;display:block}
change your jquery like this
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 80) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 81) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
html, body {
height: 4000px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width:50%;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="create-list" id=L IST style="display: inline-block; width: 250px; background-color: #e2e4e6; border-radius: 3px; margin-left: 10px; margin-top: 40px; ">
<div id="nav_bar" class="add-list-button">
<b style="color:white;"> Add </b>
</div>
<div class="list-create" style="display: none; min-height: 80px; border-radius: 3px; background-color: #e2e4e6; ">
<div class="list" id="SAVE_LIST" style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; margin-top: 5px; " contenteditable="true" data-placeholder="Add"></div>
I have three different span.class's that I want to show content for whenever they are clicked. Those div classes are:
<div id="one">
<span class="aboutme"> <p>About me</p></span>
<span class="skills"> <p>Skills</p></span>
<span class="goals"><p>My Goals</p></span>
</div>
I do want the span.aboutme to show on page load up, but hide whenever these other classes are clicked.
here's what I have so far in jsfiddle, but it's not working out.
https://jsfiddle.net/ispykenny/m4n8fzfp/
<div class="thirdwrapper">
<div class="wrapperthree">
<div id="one">
<span class="aboutme"> <p>About me</p></span>
<span class="skills"> <p>Skills</p></span>
<span class="goals"><p>My Goals</p></span>
</div>
<div id="two">
<span class="aboutmecontent">
<p>content for about me
</span>
<span class="skillscontent"> <p>content for skills</p> </span>
<span class="goalscontent"> <p>cotent for goals</p></span>
</div>
</div>
</div>
</div>
.thirdwrapper{
width: 100%;
height: auto;
min-height: 400px;
background-color: #F2F2F2;
margin-top: 0px;
padding-top: 0px;
}
.wrapperthree{
max-width: 1050px;
min-height: 400px;
min-width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
overflow: hidden;
margin-top: 0px;
padding-top: 0px;
}
.wrapperthree p{
margin-top: 0px;
padding-top: 0px;
}
#one{
max-width: 525px;
width: auto;
height: auto;
max-height: 400px;
border:1px solid white;
float: left;
font-size: 80px;
padding: 0;
margin: 0;
padding-top: 60px;
font-family: 'Lora', serif;
}
#one p{
text-align:center;
width:400px;
padding: 0;
margin: 0;
}
#two{
max-width: 525px;
width: auto;
height: auto;
min-height: 400px;
overflow: hidden;
margin-top: 0px;
padding-top: 60px;
padding-left: 60px;
}
span.aboutme p {
background-color:#666;
}
.skills p{
background-color: #999;
}
.goals p{
background-color: #333;
}
.skillscontent p{
display: none;
}
.goalscontent p{
display: none;
}
Here, you basically just need to check which class is being clicked, and first hide them, and then show the one you would actually like to show (if the classes always match up.)
fiddle: https://jsfiddle.net/m4n8fzfp/3/
$('#one span').click(function () {
var that = $(this);
var className = that[0].className;
console.log($(this)[0].className);
$('#two').children('span').children('p').hide();
$('#two').find('.' + className + 'content p').show();
})
So you basically want tabs. This can be easily achieved using jQuery:
https://jsfiddle.net/m4n8fzfp/4/
What you're basically doing is associating each content span with it's appropriate link using the data-tab directive and adding and removing the current class with the appropriate display attribute.
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/