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.
Related
I'm a senior programmer but novice to javascript and CSS posibilities. Next is the description of what I have and what I want:
Layout
My folders:
Test_portal : contains the iNat_main.html file and 2 subfolders:
• iNat_files: contains html files to be loaded into “submenu” div
or “obs” div according to selection.
• iNat_images: contains images to be loaded within the html file that is loaded into the “obs” div according the selected “submenu” item.
Issues:
When I select a “menu” item it is loaded into the “submenu” div, but it doesn’t use the full area as shown in the layout. The scrollbars are too short.
When I select a “submenu” item it is loaded into an “obs” div, but
it is displayed in submenu area of the layout (left side of the page) instead in the obs area of the layout (right side of the page).
iNat_main.html
function load_menu(htmname){
document.getElementById("submenu").setAttribute("style","height:600px");
document.getElementById("submenu").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}
function load_data(htmname){
document.getElementById("obs").setAttribute("style","height:600px");
document.getElementById("obs").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: lightgreen;
padding: 2px;
text-align: center;
font-size: 8px;
color: black;
}
.inline-block-child {
float: left;
}
ul {
list-style-type: none;
text-align: right;
margin: 0;
padding: 0;
overflow: hidden;
background-color:yellow;
}
li {
float: right;
border-right: 2px solid #000;
}
li a {
display: block;
font-size: 20px;
padding: 20px;
}
.bggrey {
background-color: lightgrey;
overflow-x: scroll;
}
.bgdata {
background-color: cyan;
}
.float-container {
border: 3px solid #fff;
padding: 5px;
}
.float-child_l {
background-color: lightgrey;
width: 35%;
float: left;
padding: 5px;
border: 2px solid black;
}
.float-child_r {
width: 65%;
float: left;
padding: 5px;
border: 2px solid green;
}
</style>
<body>
<header role="banner">
<h1>My nature pictures</h1>
<h4> Origin=https://israel.inaturalist.org/observations?place_id=any&user_id=shmuelabinun&verifiable=any</h4>
</header>
<br>
<div id="menu">
<p dir="rtl"> Select what to show </p>
<ul>
<li><a href="#submenu" onclick=load_menu("./iNat_files/B_menu.html")>Birds</a></li>
<li><a href="#submenu" onclick=load_menu("./iNat_files/R_menu.html")>Reptiles</a></li>
</ul>
</div>
<section class='container'>
<div class='float-container'>
<div id ="submenu" class='float-child_l bggrey' width=40% scrollHeight="400px";>
<p><dir="rtl" style="center"> ID=SubMenue </p>
</div>
<div id="obs" class='float-child_r bgdata' width=58% >
<h2><text-align="right"> ID=obs for Data Selected </text-align></h2>
</div>
</div>
</section>
</body>
</html>
B_menu.html
function load_data(htmname){
document.getElementById("obs").setAttribute("style","height:600px");
document.getElementById("obs").innerHTML="<object type='text/html' data=" + htmname + "></object>";
}
<body>
<object>
<p align=center><b> List of Birds</p>
<br>
<div>
<div id ="submenu" width=40%>
<section>
<p align=center><b> Select item to display </p>
<ol>
<li> <a href="#obs" onclick=load_data("./BID125.html")>אנפית בקר = Bubulcus ibis</a></li>
<li> <a href="#obs" onclick=load_data("./BID64.html")>אנפת לילה = Nycticorax nycticorax</a></li>
<li> <a href="#obs" onclick=load_data("./BID124.html")>ברכיה = Anas platyrhynchos</a></li>
<li> <a href="#obs" onclick=load_data("./BID72.html")>צוצלת = Streptopelia senegalensis</a></li>
<li> <a href="#obs" onclick=load_data("./BID126.html")>שלדג גמדי = Alcedo atthis</a></li>
</ol>
</section>
<br>
<div id="obs" class='child inline-block-child bgdata' width=58% >
<h2><text-align="right"> ID=obs for Data Selected </text-align></h2>
</div>
</div>
</object>
</body>
BID125.html
<style>
* {
box-sizing: border-box;
}
[class*="col-"] {
border: 1px solid green;
}
.col-1 {width: 60%; padding: }
.col-2 {width: 40%; padding: }
.col-3 {width: 20.0%; padding: 0.5%;}
.zoomA {
width: 20.0%; padding: 0.5%;
height: auto;
transition: transform ease-in-out 0.3s;
}
.zoomA:hover {
transform: scale(5.0);
}
</style>
<body>
<p align=center><b> Selected item data</p>
<div id ="obs" width=65%>
<p align=center><b>Birds</p>
<br>
<colgroup><col width:"50.0%;"/><col width:"50.0%;"/></colgroup>
<table cellpadding="0" cellspacing="0" border="1px" style="width:100%;">
<tr>
<th align="left" class=col1>Bubulcus ibis</th>
<th align="right" class=col2>ציפורים - אנפית בקר</th>
</tr>
</table>
<p align="right" dir="rtl"> #125 אגמון החולה 08/11/2018 בדרגת-מחקר </p><br>
<table cellpadding="0" cellspacing="0" border="3px" style="width:70%;">
<colgroup><col width:"33.3%;"/><col width:"33.3%;"/><col width:"33.3%;"/></colgroup>
<tr>
<img src=../iNat_images/img125.jpg class="zoomA">
<img src=../iNat_images/img125_1.jpg class="zoomA">
</tr>
</table>
<br>
</div>
</body>
Two IBIS images
To load data like that you need to use Ajax. <object> is not intended for loading HTML like that (in an edge case <iframe> could be used, but I would not recommend that either).
Here is a basic example of how external HTML can be loaded into a <div>. I use the Fetch API for loading.
You can see that I'm using plain HTML in the HTML document and use JavaScript and eventlisteners to control what is going to happen.
The content of the document page1.html would just be the snippet of HTML need (so not body, head etc.).
var menu, content;
const loadhtml = href => {
fetch(href)
.then(response => response.text())
.then(html => {
content.innerHTML = html;
});
};
const onmenuclick = e => {
e.preventDefault();
if (e.target.nodeName == 'A') {
let href = e.target.attributes['href'].value;
loadhtml(href);
}
};
document.addEventListener('DOMContentLoaded', e => {
menu = document.getElementById('menu');
content = document.getElementById('content');
menu.addEventListener('click', onmenuclick);
});
<ul id="menu">
<li>Page 1</li>
<!--
here I'm replacing the reference to an external HTML document
with a data URL so that you can see how it works in this Stackoverflow snippet.
-->
<li>Page 2</li>
</ul>
<div id="content"></div>
Thanks to all contributors. With a local help, all issues were solved.
I had to install Microsoft Internet Information Services (IIS), edit the configuration file and launch it. Final working code is attached:
index.html -
function load_menu(htmname) {
fetch(htmname /*, options */)
.then((response) => response.text())
.then((html) => {
document.getElementById("submenu").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}
function load_detailed_data(htmname) {
fetch(htmname /*, options */)
.then((response) => response.text())
.then((html) => {
document.getElementById("obs").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.top_banner {
background-color: lightgreen;
text-align: center;
}
.top_banner h1 {
font-size: xx-large;
}
.top_banner h4 {
font-size: smaller;
}
.inline-block-child {
float: left;
}
* {
box-sizing: border-box;
}
[class*="col-"] {
border: 1px solid green;
}
.zoomA {
width: 20.0%;
padding: 0.5%;
height: auto;
transition: transform ease-in-out 0.3s;
}
.zoomA:hover {
transform: scale(3.0);
}
ul {
list-style-type: none;
text-align: right;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
}
.main_menu li {
float: right;
border-right: 2px solid #000;
}
.main_menu li a {
display: block;
font-size: 20px;
padding: 20px;
}
.submenu {
height:100%;
width:100%;
direction:rtl;
}
.submenu p {
padding-right:20px;
}
.submenu li {
width:100%;
direction:rtl;
}
.float-container {
border: 3px solid #fff;
padding: 5px;
}
.main_pane {
width:70%;
height:100%;
float: left;
background-color: cyan;
}
.menu_pane {
width:30%;
height:100%;
float: right;
background-color: lightgrey;
}
.details {
width:100%;
direction:rtl;
}
.details h2 {
padding-right:20px;
}
.details img {
width:25%;
}
</style>
<html lang="he">
<head>
<meta charset="utf-8">
<title>iNat_main_v2.html</title>
<body>
<div class="top_banner">
<h1>Mine nature pictures</h1>
<h4> Origin=https://israel.inaturalist.org/observations?place_id=any&user_id=shmuelabinun&verifiable=any</h4>
</div>
<div id="menu" class="main_menu">
<ul>
<li><a href="#submenu" onclick=load_menu("./iNat_files/P_menu.html")>Plants</a></li>
<li><a href="#submenu" onclick=load_menu("./iNat_files/B_menu.html")>Birds</a></li>
<li><a href="#submenu" onclick=load_menu("./iNat_files/M_menu.html")>Mammals</a></li>
</ul>
</div>
<div class='float-container'>
<div class='main_pane' id="obs">
<h2>ID=obs for Data Selected</h2>
</div>
<div class='menu_pane' id="submenu">
<p>ID=SubMenue </p>
</div>
</div>
</body>
</html>
B_menu.html - Birds menu
<div class="submenu">
<p> Birds to select </p>
<ol>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID125.html")>אנפית בקר = Bubulcus ibis</a></li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID64.html")>אנפת לילה = Nycticorax nycticorax</a>
</li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID124.html")>ברכיה = Anas platyrhynchos</a></li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID68.html")>דרור הבית = Passer domesticus</a>
</li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID71.html")>דררה קרמר = Psittacula krameri</a>
</li>
<li><a href="#obs" onclick=load_detailed_data("./iNat_files/BID131.html")>חסידה לבנה = Ciconia ciconia</a>
</li>
</ol>
</div>
BID25.html - Ibis data to display:
<div class="details">
<h2> Birds </h2>
<h2> Bubulcus ibis - אנפית בקר </h2>
<img class="zoomA" src="./iNat_images/img125.jpg"/>
<img class="zoomA" src="./iNat_images/img125_1.jpg"/>
</div>
4)Images used to display the Ibis data:
img125.jpg
img125_1.jpg
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.
I've got a problem with my sticky header not sticky in the fullpage.js environment.
I've got a site where I did get it to work but the way it worked can't be correct because it's full of errors and bad coded pieces.
Now Question is do I look at the css part for the fixed position or does my problem finds itself in the javascript.
Code:
<script type="text/javascript">
var $window = $(window);
var nav = $('#main-navigation');
$window.scroll(function(){
if ($window.scrollTop() >= 300) {
nav.addClass('fixed-header');
}
else {
nav.removeClass('fixed-header');
}
});</script>
<script type="text/javascript">
$(function(){
$('#topnav ul li a').on('click', function(e){
e.preventDefault();
var scrolldiv = $(this).attr('href');
$(scrolldiv).animatescroll({padding:50});
});
});
</script>
#CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* Custom CSS
* --------------------------------------- */
body{
font-family: arial,helvetica;
color: #333;
color: rgba(0,0,0,0.5);
}
.wrap{
margin-left: auto;
margin-right: auto;
width: 960px;
position: fixed;
}
h1{
font-size: 6em;
}
p{
font-size: 2em;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.section{
text-align:center;
}
/*StickyHeaderNavigationMenu*/
header{position:fixed;bottom:0;z-index:99900; width:100%;
}
.fixed{
position: fixed;
bottom:0; left:0;
width: 100%;
z-index:10000; }
.fixed-header {
position:fixed;
top:0px; left:0;
width: 100%;
}
nav {
width:100%;
height:60px;
background:#36A8B5;
postion:fixed;
z-index:10000;
bottom:0px;
left:0;
}
nav ul {
list-style-type: none;
margin: 0 auto;
padding-left:0;
text-align:center;
width:100%;
}
nav ul li {
display: inline-block;
line-height: 60px;
margin-left: 35px;
}
nav ul li a {
text-decoration: none;
color: #FFFFFF;
}
<header>
<div class="header">
<nav id="main-navigation">
<ul>
<li>Schools</li>
<li>Gallery</li>
<li>About Us</li>
<li>About Us</li>
<li>Snorkeling</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<div id="fullpage">
<div class="section " id="section0">
<div class="layer2"></div>
<div class="layer">
<h1>Fixed elements</h1>
<p>Create your own headers and footers</p>
</div>
<video autoplay loop muted controls id="myVideo">
<source src="imgs/flowers.mp4" type="video/mp4">
<source src="imgs/flowers.webm" type="video/webm">
</video>
</div>
<div class="section" id="section1">
<div class="slide" id="slide1"> <h1>We provide the best high level snorkel gear for great value!</h1></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"><h1>Make your own great experience and enjoy New Zealand’s unique underwater Sea Life!</h1></div>
<div class="slide" id="slide4"><h1>After a day on the beach, relax in our Garden Café and Restaurant and recharge your batteries with some awesome food to your liking.
Your adventure starts here!</h1></div>
<div class="slide" id="slide5"></div>
<div class="slide" id="slide6"><h1>
Not a strong swimmer? – No worries, we offer:<br/>
<ul style:"list-style-type:none">
<li> 5 mm wetsuits – fitted to your needed size</li>
<li> masks, snorkels, weight belts, fins</li>
<li> optical masks available</li>
</div>
<div class="slide" id="slide7"></div>
<div class="slide" id="slide8"></div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Enjoy it</h1>
</div>
</div>
</div>
I've added other pieces of the side to show the hierarchy in the section and to make it scrollable.
I am struggling a bit with this, I can hide/show/fadin/fadout all day long but I am trying to get my head round the logic of targetting an element in my and pulling its specific description on mouseover, I have come close to getting this but feel like im missing something, below is my HTML:
<ul id="menu" class="menu">
<li>Home</li>
<li id="menu1" class="menu-link">LINK1</li>
<li id="menu2" class="menu-link">LINK2</li>
<li id="menu3" class="menu-link">LINK3</li>
<li id="menu4" class="menu-link">LINK4</li>
</ul>
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
and here is my CSS, the idea is to position the description just above its corresponding element btw:
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
display:inline;
clear:both;
position:relative;
overflow:hidden;
}
.menu li a{
float:left;
width:6em;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
position: absolute;
right: 407px;
margin-left: 5px;
top: 15px;
}
and finally here is the jquery:
$(document).ready(function() {
$('div.menuDescription').hide();
$('li.menu-link').bind('mouseover', function() {
$('#' + $(this).attr('id') + 'content').prependTo("li.menu-link").fadeIn();
})
.mouseout(function() {
$('#' + $(this).attr('id') + 'content').fadeOut();
});
});
WHen you have a one-to-one relationship between 2 sets of elements and their order in each set matches, is generally easier to use indexing rather than parsing ID
var $content= $('div.menuDescription');
var $links=$('.menu-link').hover(function(){
/* "this" is element being hovered*/
var index= $links.index(this);
$content.stop().hide().eq(index).fadeIn();
},function(){
/* not sure if you want to leave current content visible if user leaves menu, if so do nothing here*/
})
DEMO
I have updated and simplified your fiddle to make it work: Working Fiddle. Here is the simplified code without any JS:
HTML:
<ul id="menu" class="menu">
<li>
Home
</li>
<li id="menu1" class="menu-link">
LINK1
<div id="menu1content" class="menuDescription">
Description for "menu1"
</div>
</li>
<li id="menu2" class="menu-link">
LINK2
<div id="menu2content" class="menuDescription">
Description for "menu2"
</div>
</li>
<li id="menu3" class="menu-link">
LINK3
<div id="menu3content" class="menuDescription">
Description for "menu3"
</div>
</li>
<li id="menu4" class="menu-link">
LINK4
<div id="menu4content" class="menuDescription">
Description for "menu4"
</div>
</li>
</ul>
CSS:
.menu{
font-family: 'LeagueGothicRegular';
position: absolute;
top:25px;
overflow:hidden;
right:100px;
float:right;
}
.menu ul{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.menu li{
float:left;
margin: 0 5px;
position:relative;
overflow:hidden;
width: 120px;
height: 30px;
}
.menu li a{
position: absolute;
bottom: 0;
}
.menu li .menuDescription {
display: none;
}
.menu li:hover .menuDescription {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
}
.menuDescription {
font-size: 11px;
color: rgb(0, 0, 0);
}
Let me know if you need any explanations and I'll edit my answer.
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.