i have no idea why this is happening.
I replicated a accordion with html, css and jquery, i followed this guide and i adapted it to my website
"http://demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/"
My jquery is the same, my html and css is a bit different because i customized it, but its basicly the same.
HTML:
<div class="plan-container" style="flex: 0 0 25%;">
<div class="plan-header-mec">
<h2 style="color: #fff; font-weight: lighter; margin: 0; padding-top: 0.625em;">Blabla</h2>
</div>
<div class="plan-details">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-1" class="accordion-section-content">
<p>Information.</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-2" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-3" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-4">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-4" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-5">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-5" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
</div>
<!--end .accordion-->
<p>Conclusion</p>
</div>
</div>
CSS:
#media handheld (min-width: 480px) {
.plan-container {
display: inline-block;
}
}
#media (min-width: 992px) {
.plan-container {
display: table-cell;
}
}
#media (min-width: 1200px) {
.plan-container {
display: table-cell;
}
}
.plan-container {
width: 50%;
overflow: hidden;
border-radius: 5px;
background-color: #fff;
position: relative;
top: 0;
-webkit-transition: all 1s;
transition: all 1s;
}
.plan-container .plan-header-mec {
padding: 50px 0;
border-radius: 5px 5px 0 0;
background-image: url(../img/mv-ber-vantagens-mecanico.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
}
.plan-container .plan-header p {
margin: 0;
color: #447F71;
}
.plan-container .plan-details {
margin: 0 auto;
padding: 60px;
background: url("http://raventools.com/wp-content/themes/raven-wp-theme-2014/images/plan-bottom-border.png") top center no-repeat;
}
.plan-container .plan-details ul {
padding-left: 0;
list-style: none;
}
.plan-container .plan-details ul li span {
font-weight: lighter;
/*color: #777777;*/
}
.plan-container .plan-details p {
background-color: #f4f4f4;
margin: 2em 0;
padding: 1.25em;
font-size: 0.75em;
line-height: 1.8;
color: #777777;
}
/* Test accordion */
.accordion,
.accordion * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.accordion {
overflow: hidden;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 3px;
background: #f7f7f7;
background-image: url(../img/fibra-carbono.jpg);
}
/*----- Section Titles -----*/
.accordion-section-title {
width: 100%;
padding: 15px;
display: inline-block;
border-bottom: 2px solid #333333;
/*Carbon Fiber Background*/
/*Carbon Fiber Background*/
transition: all linear 0.15s;
/* Type */
font-size: 20px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 0px #1a1a1a;
color: #fff;
}
/*.accordion-section-title.active, .accordion-section-title:hover {
background:#4c4c4c;
}*/
.accordion-section:last-child .accordion-section-title {
border-bottom: none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding: 15px;
display: none;
}
/* Test accordion */
/* Check Mark Color*/
.fa ul {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.fa-check {
display: block;
}
.fa-check::before {
color: #66ff33;
}
/* Check Mark Color*/
And finally my jQuery
/*Accordion*/
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if ($(e.target).is('.active')) {
close_accordion_section();
} else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
Ok now, my problem is. What i want is:
When i click Title 1, Information 1 dropdown. (works)
If i click Title 2. while information 1 is showing, information 1 closes and opens information 2 (works)
Now my problem is, if Information 2 is open and i want to close it, when i click on the Title, on the letters of the tittle the dropdown closes and opens again... If i click outside the letters it works properly.
In the jquery
if($(e.target).is('.active')) {
I changed the e.target to .accordion-section-title and what happends is, it opens and closes when i click anywhere, letters or outside the letters, but if a information box is openned and i click on another one, the other one doesn't open, but the opened one closes.
I have no idea what else to do, if you can help, i would apreciate it
Probably your e.target sometimes is the wrong element, infact it depends on where you actually click on.
For instance, if you click on a child element (like the <li> element in your case) the condition $(e.target).is('.active') will fail
Try with this code instead:
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var target = $(e.target).closest(".accordion-section-title");
var currentAttrValue = $(target).attr('href');
if($(target).is('.active')) {
Not exactly an answer (not yet 50 reputation so I can't comment, sorry), but is there any (good ?) reason to not using JQueryUI accordion ?
If you don't want to use all the jQueryUI (and I can understand) you can "isolate" just the accordion pluggin on the custom download section.
I may be simplest than what you're trying to write imho.
Related
I am trying to get an element inside an anchor tag and set a CSS class called active on it to style the particular element, but I am getting an error that the element is undefined. I can't figure out what the issue is.
I tried using different selectors like featuresLinks.document.querySelectorAll("h3"), but I still get the undefined error. I am not sure what javascript method or selector I need to use to get the h3 element inside the specific link I click on.
let featuresLinks = document.querySelectorAll(".features-link");
featuresLinks.forEach(featuresLink => {
featuresLink.addEventListener("click", function(e){
e.preventDefault();
active();
})
})
function active(){
let featuresLinkHeading = featuresLinks.firstChild;
if(!featuresLinkHeading.classList.contains("features-active")) {
featuresLinkHeading.classList.add("features-active")
}
};
:root {
--primary-blue: hsl(231, 69%, 60%);
--primary-red: hsl(0, 94%, 66%);
--neutral-blue-100: hsl(229, 8%, 60%);
--neutral-blue-900: hsl(229, 31%, 21%);
--neutral-100: hsl(0, 0%, 100%);
--neutral-900: hsl(0, 0%, 0%);
}
.features a {
text-decoration: none;
color: var(--neutral-blue-100);
font-size: 19.5px;
font-weight: 400;
}
body {
font-family: 'Rubik', sans-serif;
font-size: 18px;
margin: 0%;
text-align: center;
}
.features-border::after {
content: "";
display: block;
margin: 0 auto;
width: 52%;
padding-top: .85em;
border-bottom: 4px solid var(--neutral-100);
}
.features-border.features-active::after {
content: "";
display: block;
margin: 0 auto;
width: 52%;
padding-top: .85em;
border-bottom: 4px solid var(--primary-red);
}
a .features-active {
color: var(--neutral-blue-900);
}
<body>
<section>
<div class="content features">
<h2>Features</h2>
<p>Our aim is to make it quick and easy for you to access your favourite websites.
Your bookmarks sync between your devices so you can access them on the go.</p>
<hr>
<a class="features-link" href="">
<h3 class="features-border features-active">Simple Bookmarking</h3>
</a>
<hr>
<a class="features-link" href="">
<h3 class="features-border">Speedy Searching</h3>
</a>
<hr>
<a class="features-link" href="">
<h3 class="features-border">Easy Sharing</h3>
</a>
<hr>
</div>
</section>
</body>
I suggest you delegate from the container
window.addEventListener('DOMContentLoaded', () => { // when page has loaded
const container = document.querySelector('.features');
const featureLinks = container.querySelectorAll('a.features-link');
container.addEventListener("click", function(e) {
const tgt = e.target.closest("a");
if (!tgt || !tgt.matches("a")) return; // we did not click a link or a child of a link
e.preventDefault();
const tgtHeader = tgt.querySelector('h3');
featureLinks.forEach(link => {
const header = link.querySelector('h3');
header.classList.toggle('features-active', header === tgtHeader); // toggle off unless clicked
});
});
});
:root {
--primary-blue: hsl(231, 69%, 60%);
--primary-red: hsl(0, 94%, 66%);
--neutral-blue-100: hsl(229, 8%, 60%);
--neutral-blue-900: hsl(229, 31%, 21%);
--neutral-100: hsl(0, 0%, 100%);
--neutral-900: hsl(0, 0%, 0%);
}
.features a {
text-decoration: none;
color: var(--neutral-blue-100);
font-size: 19.5px;
font-weight: 400;
}
body {
font-family: 'Rubik', sans-serif;
font-size: 18px;
margin: 0%;
text-align: center;
}
.features-border::after {
content: "";
display: block;
margin: 0 auto;
width: 52%;
padding-top: .85em;
border-bottom: 4px solid var(--neutral-100);
}
.features-border.features-active::after {
content: "";
display: block;
margin: 0 auto;
width: 52%;
padding-top: .85em;
border-bottom: 4px solid var(--primary-red);
}
a .features-active {
color: var(--neutral-blue-900);
}
<section>
<div class="content features">
<h2>Features</h2>
<p>Our aim is to make it quick and easy for you to access your favourite websites. Your bookmarks sync between your devices so you can access them on the go.</p>
<hr>
<a class="features-link" href="">
<h3 class="features-border features-active">Simple Bookmarking</h3>
</a>
<hr>
<a class="features-link" href="">
<h3 class="features-border">Speedy Searching</h3>
</a>
<hr>
<a class="features-link" href="">
<h3 class="features-border">Easy Sharing</h3>
</a>
<hr>
</div>
</section>
As I have issue with URL Structure within the tabs. if I have selected the tab-2 and the url is changed to https://example.com/#tab-2 and for tab-3 https://example.com/#tab-3 and so on.
The issue is if I have entered in this https://example.com/#tab-4 or any other, in search bar, it always shows me https://example.com/#tab-1 as current.
But, I would like to do https://example.com/#tab-4 the current shows me tab-4 selected. How would I implement in my current code?
$('.projects_select').click(function(){
var tab_id = $(this).attr('data-tab');
$('.projects_select').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
// window.location.href = window.location.href+"#tab_id";
});
.tab-content {
display: block; /* undo display:none */
height: 0; /* height:0 is also invisible */
overflow: hidden; }
.tab-content.current {
height: auto; /* let the content decide it */ }
.projects_select {
font-weight: 400;
letter-spacing: 1px;
text-align: center;
color: #333;
padding: 17px 0;
width: 16.66%;
float: left;
cursor: pointer;
border-style: solid;
border-width: 1px 1px 1px 0px;
font-style: normal;
font-weight: 700; }
.projects_select.current {
font-weight: 500;
position: relative;
color: #fff;
background: #313641; }
.projects_select.current:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #333;
border-width: 20px;
margin-left: -20px;
}
.tab_Menu{
padding: 35px 10.7% 75px;
background: #efefef; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper tab_Menu">
<a class="projects_select tab-link current" data-tab="tab-1" href="#tab-1"> Tab-1 </a>
<a class="projects_select tab-link" data-tab="tab-2" href="#tab-2"> Tab-2 </a>
<a class="projects_select tab-link" data-tab="tab-3" href="#tab-3"> Tab-3 </a>
<a class="projects_select tab-link" data-tab="tab-4" href="#tab-4"> Tab-4 </a>
<a class="projects_select tab-link" data-tab="tab-5" href="#tab-5"> Tab-5 </a>
</div>
<div class="tab-content current" id="tab-1"> Tab-1 </div>
<div class="tab-content" id="tab-2"> Tab-2 </div>
<div class="tab-content" id="tab-3"> Tab-3 </div>
<div class="tab-content" id="tab-4"> Tab-4 </div>
<div class="tab-content" id="tab-5"> Tab-5 </div>
You can get the hash with window.location.hash. So in your script you can do something like this:
$(document).ready(function(){
if($('.tab-link[href=' + window.location.hash + ']')){
$('.tab-link[href=' + window.location.hash + ']').addClass('current');
}
else {
$('.tab-link[href=#tab1]').addClass('current');
}
});
Not tested this code tho. You don't need to set current class in HTML anymore. You can remove it there.
I am using a jQuery plugin that enables a smoothscroll effect. However, the problem now is that the mousewheel doesn't move the scroll in the div. On my actual page, it does move but it moves the main page scroll along with it. What could be the causes of this? I'm not well versed with javascript, mainly html and css which is why this is such a pain for me and I end up using jquery stuff.
http://codepen.io/jzhang172/pen/dGpmoj
$(function(){
var $window = $(window);
var scrollTime = .5;
var scrollDistance = 170;
$window.on("mousewheel DOMMouseScroll", function(event){
event.preventDefault();
var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = $window.scrollTop();
var finalScroll = scrollTop - parseInt(delta*scrollDistance);
TweenMax.to($window, scrollTime, {
scrollTo : { y: finalScroll, autoKill:true },
ease: Power1.easeOut,
overwrite: 5
});
});
/*Stop mousewheel */
});
#import url("http://fonts.googleapis.com/css?family=Ubuntu+Condensed");
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html{
background: url('img/congruent_pentagon.png');
}
body{
margin:0px;
}
#wrapper{
height: auto;
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
margin-top: 2em;
margin-bottom: 2em;
height: 700px;
background: transparent;
font: 25px/24px normal 'Ubuntu Condensed', sans-serif;
}
a{
text-decoration: none;
}
.social{
display: inline-block;
position: relative;
width: 100%;
padding: 16px;
margin-bottom: 16px;
margin-right: 16px;
background-color: rgba(231, 231, 231, 0.6);
box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.25);
}
nav{
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline;
}
nav ul li a:hover{
opacity: 0.7;
}
nav ul li a.email{
border-left: 50px solid #c9182c;
color: #c9182c;
}
nav ul li a.twitter{
border-left: 50px solid #00a0d1;
color: #00a0d1;
}
nav ul li a.facebook{
border-left: 50px solid #365998;
color: #365998;
}
nav ul li a.github{
border-left: 50px solid #4183c4;
color: #4183c4;
}
nav ul li a.google{
border-left: 50px solid #db4a39;
color: #db4a39;
}
nav ul li a.instagram{
border-left: 50px solid #634d40;
color: #634d40;
}
nav ul li a.tumblr{
border-left: 50px solid #34526f;
color: #34526f;
}
nav ul li a.scriptogram{
border-left: 50px solid #0088cc;
color: #0088cc;
}
nav ul li a.linkedin{
border-left: 50px solid #0e76a8;
color: #0e76a8;
}
.container{
width:100%;
text-align:center;
padding-top:20px;
padding-bottom: 20px;
}
.container h1{
font-family: 'EB Garamond', serif;
font-size:55px;
width:500px;
margin:0 auto;
border-top:1px solid black;
border-bottom:1px solid black;
font-weight:0px;
}
.container span{
width:100px;
height:300px;;
}
h2{
font-family: 'Lora', serif;
text-align:center;
font-size:25px;f
font-weight:normal;
color:#0B437D;
}
#headline{
font-size:10px;
}
span img{
height: 70px;
position: relative;
top: 10px;
}
.announcements{
width:500px;
height:500px;
min-height:500px;
background:rgba(152, 170, 179, 0.44);
border:1px solid #B1F6CB;
border-radius:20px;
padding-top:10px;
margin:0 auto;
}
.announcements h2{
font-size:20px;
font-family: 'Josefin Slab', serif;
font-weight:800;
background:#0B437D;
width:100%;
color:#F9F9F9;;
}
span.date{
font-family: 'Slabo 27px', serif;
}
span.important{
font-size:20px;
font-weight:800px;
color:red;
}
.sectionwrapper{
width:100%;
padding:50px;
margin:0 auto;
height:390px;
overflow:auto;
padding-top:0px;
position:relative;
}
span.new-policy{
background:#2184BF;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.news{
background:#168C4B;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.advisory{
background:#AD2626;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.patches{
background:#6126AD;
color:#F3F3F3;
border:1px solid black;
font-size:14px;
font-family: 'Lato', sans-serif;
}
span.description{
font-family: 'Lato', sans-serif;
font-size:14px;
}
.section a{
color:black;
}
.section a:hover{
color:#23A6D0;
transition:.1s ease;
}
a img{
height:40px;
width:40px;
margin-left:-60px;
margin-right:20px;
}
/*----------------------------------FOOTER ------------------ */
.bodywrapper{
margin:0 auto;
width:100%;
/*height:100vh; Removed for sticky footer*/
min-height:100%;
margin-bottom:-500px;
}
.bodywrapper:after{
content:"";
display:block;
height:500px;
}
#footer{
width:900px;
margin-top:20px;
height:470px;
background:rgb(230, 255, 237);
margin:0 auto;
padding:20px;
max-height:500px;
}
/*----------------------------------FOOTER ------------------ */
.location{
float:left;
height:180px;
max-width:180px;
}
#footer h1{
font-size:13px;
padding-top:5px;
width:100%;
height: 20px;
text-align:left;
font-family: 'EB Garamond', serif;
position:relative;
margin:0 auto;
text-decoration:italics;
font-weight:800px;
color:#06255F;
font:23px normal 'Ubuntu Condensed', sans-serif;
}
#first h1{
margin-left:100px;
}
#third h1{
margin-left:100px;
}
#footer .location ul{
width:100px;
}
#footer ul{
list-style:none;
padding-top:-20px;
font-size:14px;
width:200px;
margin:0 auto;
}
.location ul li{
margin-left:-35px;
}
#footer ul li a{
color:#737373;
font-family: 'Slabo 27px', serif;
font: 14px normal 'Ubuntu Condensed';
}
#footer ul li a:hover{
color:#067DFF;
}
#footer hr{
width:200px;
border-color:#194E54;
}
.footersection{
float:left;
width:100px;
}
.location#veryfirst{
width:150px;
max-width:150px;
height:100%;
}
.footersection#first{
width:400px;
max-width:500px;
}
.footersection#second{
width:200px;
min-width:200px;
}
.footersection#third{
width:400px;
}
.footersection#fourth{
width:160px;
height:220px;;
}
.footersection#fifth{
width: 660px;
font-family: 'Slabo 27px', serif;
padding-left: 100px;
/* font-family: 'EB Garamond', serif; */
font-size: 13px;
border-top: 1px solid black;
margin-top: 10px;
padding-top: 5px;
}
.footersection#sixth{
width:160px;
}
.footersection#second ul{
}
ul.cities{
padding-left: 20px;;
}
li b{
font-family: 'EB Garamond', serif;
font: 15px normal 'Ubuntu Condensed', sans-serif;
}
span.privacy{
color: #005AA9;
font-size: 14px;
margin-left: 10px;;;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bodywrapper">
<div class="container">
<h1><span><img src="img/logo.png"></span>!</h1>
</div>
<h2>!</h2>
<!--<div id="headline">
<p>I'm a message that is flown from left to right by a christmas helicopter</p>
</div>
-->
<div class="announcements">
<h2>!</h2>
<div class="sectionwrapper" id="container">
<div class="section">
<span class="date">12/20/15</span><br><span class="important">!</span>
<span class="new-policy"> New Policy </span>
<span class="description"> <b>Paid Week Time Off each Month</b> <br>Every month, choose any week for paid time off for that entire week. Spend time with your loved ones. Go travel som...</span>
</div>
<hr>
<div class="section">
<span class="date">12/05/15</span><br>
<span class="news"> News </span>
<span class="description"> <b>Merry Christmas and Happy New Year!</b> Daily current events posting will resume on January 11th. Read here about Christmas...</span>
</div>
<hr>
<div class="section">
<span class="date">12/05/15</span><br>
<span class="news"> News </span>
<span class="description"> It's been in the works for a while. We all know about it and it's finally about to happen. <b>We are opening up expansions in Toronto, Tokyo and Hirako.</b></span>
</div>
<hr>
<div class="section">
<span class="date">11/30/15</span><br><span class="important">!</span>
<span class="advisory"> Advisory </span>
<span class="description"> Winter Storm Golaith is making it's way across the East Coast. Please stay home if you feel you cannot make it or you don't want to chance it. <b>Stay safe.</b></span>
</div>
<hr>
<div class="section">
<span class="date">11/20/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/19/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/18/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/17/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/16/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
<hr>
<div class="section">
<span class="date">11/15/15</span><br>
<span class="patches"> Patches </span>
<span class="description"> <b>Patch 5.21</b> - Settle into our last patch of the year with Snowdown and another round of preseason followup changes! Read up on the newest changes.</span>
</div>
</div>
</div>
</div>
<div id="wrapper">
<nav>
<ul>
<li><a class="social tumblr" href="#" target="_blank"><img src="img/svg/home.svg">Home</a></li>
<li><a class="social google" href="#" target="_blank"><img src="img/svg/prod.svg">Products</a></li>
<li><a class="social google" href="#" target="_blank"><img src="img/svg/about.svg">About</a></li>
<li><a class="social facebook" href="#" target="_blank"><img src="img/svg/fb.svg">Facebook</a></li>
<li><a class="social twitter" href="#" target="_blank"><img src="img/svg/twitter1.svg">Twitter</a></li>
<li><a class="social instagram" href="#" target="_blank"><img src="img/svg/insta.svg">Instagram</a></li>
</ul>
</nav>
</div>
</div>
<footer id="footer">
<div class="location" id="veryfirst">
<h1>LOCATION</h1>
<hr>
<ul>
<li><b>North America</b></li>
<ul class="cities">
<li>California</li>
<li>New York</li>
<li>Vienna</li>
<li>Wyoming</li>
</ul>
<li><b>Canada</b></li>
<ul class="cities">
<li>Montreal</li>
</ul>
<li><b>Asia</b></li>
<ul class="cities">
<li>Bali</li>
<li>Beijing</li>
<li>GuangZhou</li>
<li>Henan</li>
<li>South Korea</li>
<li>Tokyo</li>
</ul>
<li><b>Europe</b></li>
<ul class="cities">
<li>Italy</li>
<li>London</li>
<li>Paris</li>
<li>South Wales</li>
</ul>
<li><b>South America</b></li>
<ul class="cities">
<li>Argentina</li>
<li>Brazil</li>
<li>Peru</li>
</ul>
</div>
<div class="footersection" id="first">
<h1>PRODUCTS</h1>
<hr>
<ul>
<li>A-Class</li>
<li>P-Class</li>
<li>S-Class</li>
<li>Featured</li>
<li>Gear</li>
<li>Hiraku Edition</li>
<li>Limited</li>
<li>Miscellaneous</li>
<li>Network Protection</li>
</div>
<div class="footersection" id="second">
<h1>CONNECT</h1>
<hr>
<ul>
<li>Comments | Concerns</li>
<li>E-mail</li>
<li>Help|Support Articles</li>
<li>Help Desk</li>
<li>Phone (703) 473 4198</li>
</div>
<div class="footersection" id="third">
<h1>DOWNLOADS</h1>
<hr>
<ul>
<li>Wallpaper</li>
<li>Images</li>
<li>Videos</li>
</div>
<div class="footersection" id="fourth">
<h1>About Apple</h1>
<hr>
<ul>
<li>Terms of Use</li>
<li>Policies</li>
<li>Events</li>
<li>Press Info</li>
<li>Investors</li>
</div>
<div class="footersection" id="fifth">
Copyright © 2015 Traceon Inc. All rights reserved. <span class="privacy">Privacy Policy | Terms of Use | Site Map</span>
</div>
Don't process wheel scroll if it's over that div. Replace this:
event.preventDefault();
... with this:
var target = event.originalEvent.target;
target = target && $(target).parents('.announcements')[0];
if (target)
return true;
event.preventDefault();
Sample here.
You need to handle the scrolling separately for that div. At the minute the issue is that you're calling event.preventDefault(); when you scroll on the window, and it's stopping the scroll event of the div from firing.
The target used on TweenMax.to() was always $window, however when scrolling on #container, the target should be #container itself.
So, determine which element should be used into TweenMax.to() is the key point.
Here is the code:
$(function(){
var $window = $(window);
var scrollTime = .5;
var scrollDistance = 170;
$window.on("mousewheel DOMMouseScroll", function(event){
var target = $(event.originalEvent.target).parents('#container')[0];
if(!target) {
target = $window; // not scroll in #container
} else {
target = $(target); // create a jQuery object of #container
}
event.preventDefault();
var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
var scrollTop = target.scrollTop(); // Replace $window with target
var finalScroll = scrollTop - parseInt(delta*scrollDistance);
TweenMax.to(target, scrollTime, { // Replace $window with target
scrollTo : { y: finalScroll, autoKill:true },
ease: Power1.easeOut,
overwrite: 5
});
});
/*Stop mousewheel */
});
Here is the Demo.
I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.
my problem is in my website,when I load the page and click Home,if article is visible on screen, the js I've written hides it smoothly and great with no problem.but when I click the About Us Link,it shows the article but with broken css position while its act is finished.
here is the code:
HTML:
<nav>
<ul class="sf-menu sf-vertical">
<li><a href=# onclick=home()>Home</a></li>
<li><a href=#about onclick=about()>About Us</a></li>
<li><a href=#>Cuisines</a>
<ul>
<li><a href=#starters>Starters</a></li>
<li><a href=#>Main Dishes</a></li>
<li><a href=#>Desserts</a></li>
<li><a href=#>Mezes</a></li>
</ul>
</li>
<li><a href=#>Wine List</a></li>
<li><a href=#gallery>Gallery</a></li>
<li><a href=#contacts>Contacts</a></li>
</ul>
</nav>
<article class=vanished id=about>
<h1>About Us</h1>
<div class="main-wrapper scroll">
<div class="wrapper clearfix">
<img src=img/bazar-place.png alt=bazar-place width=222 height=150 class=about-img>
<h4>Our Restaurant</h4>
<p>Bazar is a restaurant located between the districts Haga and Vasastaden in Gothenburg with a focus on Turkish and Persian food of the best quality that creates opportunities for an exciting mix all the way, from appetizer to dessert.</p>
</div>
<div class="wrapper clearfix">
<img src=img/belly.jpg alt=belly-dancing width=222 height=167 class=about-img id=belly>
<h4>Events</h4>
<p>Every Saturday from 21, we have Belly dancing at Bazar.</p>
</div>
<div class="wrapper clearfix">
<img src=img/food.jpg alt=food-services width=222 height=167 class=about-img id=food>
<h4>Food Services</h4>
<p>Taste our famous pasta dish to the human price of 69 :- We offer 10% discount for take-away at our entire menu.</p>
<p>At lunchtime you can choose from three Turkish pasta dishes or among two or three different main dishes. Ask about vegetarian options! Drinking, salad and coffee / tea included. Lunch can also be picked up.</p>
</div>
<div class="wrapper last clearfix">
<img src=img/extra.jpg alt=extra-services width=222 height=167 class=about-img id=extra>
<h4>Extra Services</h4>
<p>We can help with everything from after work, kick-off to the birthday called with food and drink that lasts all night. Do you want more entertainment we can arrange live music and belly dancing.</p>
</div>
</div>
</article>
JAVASCRIPT:
function home(){
if ($(".active") == [])
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
}
}
function about(){
if ($(".active") == [])
{
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
else
{
if ($("#about").attr("class") == "active")
{
return ;
}
else
{
var active = $(".active");
active.css("display","inline-block");
active.hide("slide",{direction:"left"},700);
active.attr("class","vanished");
var hidden = $("#about");
hidden.css("display","inline-block");
hidden.show("slide",{direction : "right"},700);
hidden.attr("class","active");
}
}
}
CSS:
article{
position: absolute;
width: 550px;
height: 100%;
background-image: url("../img/blockBG.png");
z-index: 1;
left: 235px;
border-left: 1px solid #4A4A4A;
border-right-color: #7b7b7b;
border-right-style: solid;
border-right-width: thick;
padding-right: 40px;
padding-left: 40px;
text-align: center;
}
.vanished{
display:none;
}
.main-wrapper{
position:relative;
z-index:1;
width: 100%;
height: 590px;
display:block;
}
.wrapper{
border-bottom:1px solid #4A4A4A;
margin-bottom: 15px;
}
.last{
border: none;
}
h4{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:'Yeseva One',cursive;
font-size: 17px;
font-weight: normal;
margin-bottom: 10px;
margin-top: 0;
line-height: 19px;
}
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
p{
color: #efefef;
text-decoration: none;
text-align: left;
font-family:Arial, sans-serif;
font-size: 12px;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
The problem is with the <h1> margin-top only being correctly applied at the end of the animation.
Try turning the distance top into a padding instead of margin, it should fix it:
h1{
position: relative;
font-family:'Yeseva One',cursive;
font-size:60px;
z-index: 2;
color: white;
margin-top: 0;
padding-top: 90px;
padding-bottom: 41px;
margin-bottom: 20px;
font-weight: normal;
border-bottom:1px solid #4A4A4A;
}
Alternatively, you could give the parent <article> a padding or border top. This will prevent the <h1> margin from collapsing outside it's container while the animation runs.