Related
If anyone remembers the Apple product page for the cylindrical Mac Pro, the site had a feature that had each layer of the Mac Pro slide off as you continue to scroll down.
I have been looking everywhere for possible indication as to how to code this dynamic page, but I have been unsuccessful.
You can create the animation with CSS class and #keyframes rule, then add the class to your element once it reaches the scroll threshold you set in the conditional within a scroll event listener. Below is not an exact replica of Apples animation, however it will illustrate how one could achieve this with vanilla JS and CSS animations tween.
I further explain how I have done this in the code below...
// get the selector nodes we wish to animate
const images = document.querySelectorAll('#main img');
// create a function and pass in the selector node and the top
// fold position (how far off the top fold you wish to slideOut) as a param
const slideOut = (images, foldPos) => {
// run each element in the nodeList through a loop
images.forEach((el) => {
// add a scroll eventlistener on the window
window.addEventListener('scroll', () => {
// define each elements position using the forEach loop
// el.getBoundingClientRect and get the top position
let elPos = el.getBoundingClientRect().top;
// get the unique ID that was set in the elements we wish to animate
// we'll use this to get the element selector using its ID
let elId = el.id;
// conditional that checks the top position in
// relation to the top fold of page, this will pass
// as a parameter in the main function slideOut()
if (elPos < foldPos) {
// lets target the id selector of the animated element
// that has reached the set threshhold
let slideEl = document.getElementById(el.id);
// lets add our class to the element so the CSS can
// do its animation using an #keyframes rule
// * see the css code `.slideoff` and its `#keyframes` `slideoff` rule
slideEl.className = 'slideoff';
// optional, remove element from display using a timeOut()
// set to work in conjuntion with the CSS animation duration
setTimeout(() => slideEl.style.display = 'none', 500)
}
})
})
}
// call function and pass in the paramter (nodeList, topFoldThreshold)
slideOut(images, 125)
#main {
position: relative;
}
p {
max-width: 50%;
}
#main img {
width: 50%;
height: 50%;
}
.slideoff {
position: relative;
animation: slideoff 1s ease-in-out;
left: 50;
opacity: 0;
height: 50%;
width: 50%;
}
#keyframes slideoff {
0% {
opacity: 1;
top: 0;
left: 0;
}
50% {
opacity: 0;
top: 500px;
}
100% {
left: 10000px;
}
}
SCROLL DOWN
<p> Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam id
ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec interdum elit. Praesent eu dui mi. Vestibulum facilisis elit in mi convallis, eget consectetur arcu vehicula. Pellentesque ultricies elit tellus, non ultrices erat volutpat at.
Ut dui dolor, tempor nec porta at, aliquet eget urna. Etiam congue vestibulum ante. In et diam sapien. Suspendisse mattis eros eget ex convallis, nec tempor risus lobortis. Quisque ullamcorper libero arcu, quis ultrices magna aliquet non. Donec et ornare
eros. Proin viverra metus enim, vitae egestas tellus lacinia eu. Aenean molestie sollicitudin augue, placerat cursus enim consequat eu. Aenean semper pellentesque augue. Phasellus vel dictum neque. Donec vel imperdiet nisi. Ut sapien turpis, mattis
quis lobortis ut, placerat eget metus.
</p>
<div id="main">
<img id="first" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Background.jpg">
<p>Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam
id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
<img id="second" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Backgrounds.jpg">
<p>Ut vel mi facilisis, mattis diam sit amet, consectetur elit. Nam mollis vestibulum enim, posuere blandit sem. Quisque euismod odio est, vel maximus metus efficitur quis. Morbi ac dignissim massa, in egestas ex. Proin efficitur feugiat libero nec ornare.
Duis vel sapien molestie, efficitur lacus et, ullamcorper tortor. Vestibulum sodales viverra porta. Aenean tincidunt velit nisi, non tempus odio vulputate ut. Praesent accumsan urna et turpis pharetra, vitae consequat diam tempor. Vestibulum sed odio
sem.
</p>
<img id="third" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Images.jpg">
<p>Aliquam sed quam id velit mattis molestie. Aliquam id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
<img id="fourth" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Picture.jpg">
<p>Proin viverra metus enim, vitae egestas tellus lacinia eu. Aenean molestie sollicitudin augue, placerat cursus enim consequat eu. Aenean semper pellentesque augue. Phasellus vel dictum neque. Donec vel imperdiet nisi. Ut sapien turpis, mattis quis lobortis
ut, placerat eget metus. Vestibulum neque ante, lobortis id accumsan a, pellentesque quis nisl. Quisque ac ante ut arcu faucibus molestie sit amet ac dui. Fusce elit nisi, ullamcorper eu eros eget, tempus suscipit purus. Aenean sed nibh urna. Vestibulum
vehicula dapibus ante at viverra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed purus urna, condimentum sed dictum quis, blandit vel tellus. Sed pretium elit eros, sed congue lectus dictum in. In auctor diam sit amet augue congue
blandit. Vivamus ut enim in mauris venenatis vulputate. Nulla felis tellus, vestibulum at hendrerit auctor, porta a purus. Aenean ac ante vitae turpis rutrum hendrerit eget nec ante. Phasellus bibendum egestas nisi, ac aliquet mi sollicitudin ac.
Sed bibendum quam et mi bibendum ultricies. Pellentesque nec ante viverra, dictum turpis ac, sollicitudin dolor. Vestibulum ut interdum neque. Cras aliquet porta dui, sit amet luctus mauris egestas et. Aliquam quis imperdiet sapien, sollicitudin facilisis diam. Fusce at commodo sapien. Nam at erat nisl. Sed placerat risus vel consequat congue. Nam ultricies ultricies suscipit. Nunc ultrices, dui ut blandit porta, lorem sem dapibus diam, vitae porta tellus nisi ac nibh. Cras pulvinar laoreet dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p> Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
</div>
In the below snippet, there is a block of large text and a block of small text. How would I go about making the small text "hug" the big text?
<p style="float: left;margin: 0px;font-size: 300%;max-width: 15rem;">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque pharetra velit, sed pretium mauris consectetur quis. Donec ut dolor id ipsum bibendum egestas id eu est. Fusce egestas hendrerit neque et laoreet. Etiam tempus, sem in consectetur gravida, sapien enim accumsan tortor, non molestie ipsum ex vel nulla. Vivamus a nisi commodo, hendrerit augue vel, pulvinar sapien. Morbi lobortis, velit feugiat gravida venenatis, lorem magna fringilla lacus, ac posuere velit mi eget ex. Nam iaculis pellentesque ullamcorper. Vestibulum condimentum efficitur urna eget semper. Nam velit velit, vulputate at justo sed, sollicitudin efficitur sapien.
<br>
Curabitur egestas orci et vulputate mattis. Nunc vehicula semper porta. Pellentesque mattis magna felis, vitae rutrum quam condimentum vel. Morbi hendrerit suscipit purus. Proin ullamcorper nec est a iaculis. Nullam et lacus odio. Morbi ut tortor feugiat, volutpat nisl maximus, aliquam libero.
<br>
Fusce iaculis enim elit, in commodo nisl feugiat at. Integer mauris mauris, finibus quis tempus et, euismod et lorem. Morbi finibus urna orci, ac vehicula enim luctus at. Maecenas blandit posuere nisi eget commodo. Maecenas quis turpis porttitor, fringilla nisi non, interdum diam. Nunc ipsum enim, lobortis sit amet velit elementum, maximus pretium erat. Ut sollicitudin urna quis felis molestie suscipit. Fusce ultrices eleifend velit, eu aliquam libero pharetra id. Nulla suscipit in purus sit amet tincidunt.
<br>
Suspendisse nec porttitor erat. Nam nulla ex, mattis rhoncus semper ut, malesuada quis mauris. Cras fringilla accumsan ligula scelerisque pharetra. Vivamus luctus, magna a rhoncus posuere, nisi neque fringilla risus, id maximus elit sapien at libero. Morbi lectus nulla, hendrerit at tortor sed, aliquam dapibus elit. Aenean sodales, neque in convallis rhoncus, nisl neque commodo nisi, a bibendum justo mi at libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam commodo, est a ornare sagittis, massa odio porttitor enim, in dignissim ipsum massa sed diam. Nunc scelerisque lorem nec lacus mattis auctor. In eu arcu id dui convallis ultricies. Maecenas viverra condimentum velit. Integer posuere ipsum ut ante aliquet, euismod bibendum augue gravida. Sed ultrices aliquam faucibus. Aenean vel mauris ac tellus euismod fringilla. Aliquam lobortis molestie ipsum, at imperdiet leo scelerisque id.
</p>
I am willing to be as hacky as possible.
Is this what you mean? Does this help?
<style>
.float_txt {
position: fixed;
margin: 0px;
font-size: 300%;
max-width: 15rem;
}
.main_cnt {
padding-left: 240px;
}
</style>
<p class="float_txt">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
<p class="main_cnt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque pharetra velit, sed pretium mauris consectetur quis. Donec ut dolor id ipsum bibendum egestas id eu est. Fusce egestas hendrerit neque et laoreet. Etiam tempus, sem in consectetur gravida, sapien enim accumsan tortor, non molestie ipsum ex vel nulla. Vivamus a nisi commodo, hendrerit augue vel, pulvinar sapien. Morbi lobortis, velit feugiat gravida venenatis, lorem magna fringilla lacus, ac posuere velit mi eget ex. Nam iaculis pellentesque ullamcorper. Vestibulum condimentum efficitur urna eget semper. Nam velit velit, vulputate at justo sed, sollicitudin efficitur sapien.
<br>
Curabitur egestas orci et vulputate mattis. Nunc vehicula semper porta. Pellentesque mattis magna felis, vitae rutrum quam condimentum vel. Morbi hendrerit suscipit purus. Proin ullamcorper nec est a iaculis. Nullam et lacus odio. Morbi ut tortor feugiat, volutpat nisl maximus, aliquam libero.
<br>
Fusce iaculis enim elit, in commodo nisl feugiat at. Integer mauris mauris, finibus quis tempus et, euismod et lorem. Morbi finibus urna orci, ac vehicula enim luctus at. Maecenas blandit posuere nisi eget commodo. Maecenas quis turpis porttitor, fringilla nisi non, interdum diam. Nunc ipsum enim, lobortis sit amet velit elementum, maximus pretium erat. Ut sollicitudin urna quis felis molestie suscipit. Fusce ultrices eleifend velit, eu aliquam libero pharetra id. Nulla suscipit in purus sit amet tincidunt.
<br>
Suspendisse nec porttitor erat. Nam nulla ex, mattis rhoncus semper ut, malesuada quis mauris. Cras fringilla accumsan ligula scelerisque pharetra. Vivamus luctus, magna a rhoncus posuere, nisi neque fringilla risus, id maximus elit sapien at libero. Morbi lectus nulla, hendrerit at tortor sed, aliquam dapibus elit. Aenean sodales, neque in convallis rhoncus, nisl neque commodo nisi, a bibendum justo mi at libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam commodo, est a ornare sagittis, massa odio porttitor enim, in dignissim ipsum massa sed diam. Nunc scelerisque lorem nec lacus mattis auctor. In eu arcu id dui convallis ultricies. Maecenas viverra condimentum velit. Integer posuere ipsum ut ante aliquet, euismod bibendum augue gravida. Sed ultrices aliquam faucibus. Aenean vel mauris ac tellus euismod fringilla. Aliquam lobortis molestie ipsum, at imperdiet leo scelerisque id.
</p>
<!-- Spacing to show effect -->
<div style="height:500px;"></div>
For simplicity, lets have two paragraphs
<p>Paragraph 1, on the left</p>
<p>Paragraph 2, on the right</p>
The issue is, they are not next to each other yet.
By default, HTML makes the paragraph as wide as the screen. We do not want that. We want that paragraph to only be part of screen and the other paragraph to fill the other side of the screen.
We can do this by giving both paragraphs a specific width. If we give each paragraph 50% of the width of the window, we have room to put them together.
<p style="width: 50%">Paragraph 1, on the left</p>
<p style="width: 50%">Paragraph 2, on the right</p>
But that doesn't work yet. Why? HTML automatically puts elements under one another..unless we tell them otherwise. Every element defaultly floats to the left...So lets just tell paragraph 2 to float: right;.
<p style="width: 50%">Paragraph 1, on the left</p>
<p style="width: 50%; float: right;">Paragraph 2, on the right</p>
Problem solved. If you want paragraph 1 to fill more of the screen, change the widths to add to 100%. p1's width could be 80% and p2's width could be 20% for example.
If this is solution works for you, please mark this as the accepted answer. Thank you.
I have 2 paragraphs, I styled them with CSS in a way that they would have vertical scrollbars.
When I wheel up or down on one paragraph box, I want the wheel event to also happen on the other paragraph box.
I've done a lot of research and I've read a lot of questions regarding wheel and scroll events.
Here's my code:
document.onload = function() {
document.getElementById("p1").addEventListener("wheel", function(e) {
var n = new Event("wheel");
n.deltaY = e.deltaY;
p2.dispatchEvent(n);
});
}
p {
width: 200px;
height: 200px;
overflow: auto;
}
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Libero id faucibus
nisl tincidunt eget nullam non. Donec et odio pellentesque diam. Consequat ac felis donec et odio pellentesque.
Pellentesque id nibh tortor id aliquet lectus proin. Dolor sed viverra ipsum nunc aliquet bibendum enim
facilisis. Sed vulputate odio ut enim blandit. Erat nam at lectus urna duis convallis convallis. Ipsum dolor sit
amet consectetur adipiscing elit. Mattis molestie a iaculis at erat. Risus sed vulputate odio ut. Neque egestas
congue quisque egestas diam in arcu cursus euismod. Blandit massa enim nec dui. Orci nulla pellentesque
dignissim enim sit.
Aliquam purus sit amet luctus. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Vehicula ipsum a arcu
cursus vitae congue mauris rhoncus. Amet dictum sit amet justo. Semper auctor neque vitae tempus quam
pellentesque nec nam aliquam. Viverra nam libero justo laoreet sit amet. Porta lorem mollis aliquam ut
porttitor. Cursus metus aliquam eleifend mi in nulla. Lorem ipsum dolor sit amet consectetur adipiscing elit
pellentesque. Malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et. Faucibus et
molestie ac feugiat sed lectus. Eget nunc lobortis mattis aliquam. Laoreet id donec ultrices tincidunt arcu non
sodales neque.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Libero id faucibus
nisl tincidunt eget nullam non. Donec et odio pellentesque diam. Consequat ac felis donec et odio pellentesque.
Pellentesque id nibh tortor id aliquet lectus proin. Dolor sed viverra ipsum nunc aliquet bibendum enim
facilisis. Sed vulputate odio ut enim blandit. Erat nam at lectus urna duis convallis convallis. Ipsum dolor sit
amet consectetur adipiscing elit. Mattis molestie a iaculis at erat. Risus sed vulputate odio ut. Neque egestas
congue quisque egestas diam in arcu cursus euismod. Blandit massa enim nec dui. Orci nulla pellentesque
dignissim enim sit.
Aliquam purus sit amet luctus. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Vehicula ipsum a arcu
cursus vitae congue mauris rhoncus. Amet dictum sit amet justo. Semper auctor neque vitae tempus quam
pellentesque nec nam aliquam. Viverra nam libero justo laoreet sit amet. Porta lorem mollis aliquam ut
porttitor. Cursus metus aliquam eleifend mi in nulla. Lorem ipsum dolor sit amet consectetur adipiscing elit
pellentesque. Malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et. Faucibus et
molestie ac feugiat sed lectus. Eget nunc lobortis mattis aliquam. Laoreet id donec ultrices tincidunt arcu non
sodales neque.</p>
The event doesn't dispatch and nothing happens.
Manually dispatching events can trigger the associated event listeners, but I don't believe they can be used in this case to trigger an actual content scroll.
A scroll event is dispatched as a consequence of the content scroll happening. A scroll event does not cause the content scroll, it results from it.
An easier way is to just manually measure and set the scrollTop values of the relevant elements:
<script>
document.onload = function(){
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
p1.addEventListener("scroll", function(e){
p2.scrollTop = p1.scrollTop;
});
}
</script>
Note you should also use the scroll event, not wheel, because there are other ways of scrolling a content box aside from the mouse wheel i.e. with the keyboard.
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
p1.addEventListener("scroll", function(e){
p2.scrollTop = p1.scrollTop;
});
div {
display: flex;
flex-grow: 1;
border: 1px solid black;
}
p {
max-height: 100px;
overflow: scroll;
}
<div><div><p id="p1">
Nulla sit amet est. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nunc sed turpis. Vivamus laoreet.
Sed in libero ut nibh placerat accumsan. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam quis ante. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo.
Praesent blandit laoreet nibh. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Aenean imperdiet. Nulla porta dolor. Vestibulum ullamcorper mauris at ligula.
Nullam accumsan lorem in dui. Etiam sit amet orci eget eros faucibus tincidunt. Nulla consequat massa quis enim. In hac habitasse platea dictumst. Vivamus laoreet.
Donec id justo. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Donec mollis hendrerit risus. Fusce ac felis sit amet ligula pharetra condimentum. Vivamus consectetuer hendrerit lacus.
</p></div><div><p id="p2">
Nulla sit amet est. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nunc sed turpis. Vivamus laoreet.
Sed in libero ut nibh placerat accumsan. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam quis ante. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo.
Praesent blandit laoreet nibh. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Aenean imperdiet. Nulla porta dolor. Vestibulum ullamcorper mauris at ligula.
Nullam accumsan lorem in dui. Etiam sit amet orci eget eros faucibus tincidunt. Nulla consequat massa quis enim. In hac habitasse platea dictumst. Vivamus laoreet.
Donec id justo. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Donec mollis hendrerit risus. Fusce ac felis sit amet ligula pharetra condimentum. Vivamus consectetuer hendrerit lacus.
</p></div></div>
I am trying to figure out how to have a scrollable div scroll to the top of the most recently appended child div.
The html of the chatbox is as follows
<div class="character-chat-log">
<div class="character-chat-message"><strong>Test 1:</strong> test</div>
<div class="character-chat-message"><strong>Test 1:</strong> test</div>
<div class="character-chat-message"><strong>Test 1:</strong> hey</div>
<div class="character-chat-message"><strong>Test 1:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac dictum est. Ut auctor feugiat lectus, consectetur adipiscing lacus scelerisque eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed dignissim, tortor sit amet feugiat feugiat, ante urna luctus est, ut varius velit diam sed sem. Etiam ut eleifend risus. Maecenas vulputate arcu ipsum, ut tempus lectus pulvinar non. Donec non tellus sed diam semper tempus et eget eros. Mauris quis auctor lorem, non sodales urna. Ut dui dolor, ultricies sit amet lacinia in, ultrices eu mauris. Donec eros tellus, laoreet sagittis hendrerit id, scelerisque id mi. Praesent fringilla ligula id suscipit malesuada. Vivamus risus magna, lobortis a congue sit amet, consequat eget lorem. Vestibulum imperdiet ultricies rutrum. Donec a blandit enim, nec euismod ante. Phasellus dignissim molestie urna.</div>
</div>
Currently I am trying to scroll to the top of the latest "character-chat-message" as follows:
var newMessage = $(
'<div class="character-chat-message"><strong>'
+ sender
+ ':</strong> '
+ messageText
+ '</div>').appendTo(_messageBoxes[sender]);
_messageBoxes[sender].scrollTop(newMessage.position());
However this of course does not work at all.
It sounds like you're doing something similar to this question
Is that right?
How can I create links that will expand a particular accordion section and then scroll to a particular DIV within that section?
I'm using the latest jQuery UI library as well as jquery.multi-accordion-1.5.3.js, and developing for IE8 or later
I've been able to successfully implement both multiAccordion and by parsing a query string I can manipulate which section to be expanded, and scroll to the first hash anchor.
Strangely, this seems to work only for the first link, for any other link it scrolls past the corresponding hash anchor, and overall it acts erratically.
I came across a few threads mentioning IE having issues recognizing hash anchors in a query string like this index.php?page=page1#section3 , ie...Why does Internet Explorer not support bookmarks with both a querystring and a hash/anchor? Firefox works properly but I have not come across one solution...
Has anyone have a solution for this? Any alternatives?
Here is my code (or if it's more legible for you - the fiddle with the same code http://jsfiddle.net/3QSmq/1/)
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery UI Multi Open Accordion</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.9.custom/jquery-ui-1.8.9.custom.css" />
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="jquery.multi-accordion-1.5.3.js"></script>
<style type="text/css">
/*demo page css*/
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
</style>
</head>
<body>
SOMETHING<br />
SOMETHING1
<div id="multiAccordion">
<h3>tab 1</h3>
<div>Text here
</div>
<h3>tab 2</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
<p id="something" style="color:red">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</div>
<h3>tab 3</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
<p id="something1" style="color:red">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu mauris nulla, at cursus nulla. Morbi venenatis, risus sit amet ultricies pharetra, lorem purus tempor risus, vel tincidunt lectus nisi sit amet neque. Aenean sit amet nibh orci, a gravida eros. Pellentesque dignissim, libero eu congue semper, mauris metus molestie nisi, vitae posuere felis leo ac lectus. Mauris a nisi eget sapien varius eleifend vel vel nibh. In placerat commodo blandit. Vivamus sagittis ante sed nisl sodales id luctus diam dapibus. Proin a felis tristique nulla rhoncus sollicitudin. Nullam sit amet neque augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce at nisi sapien.
</div>
<h3>tab 4</h3>
<div>Text Here
</div>
</div>
JavaScript
$(function(){
$('#multiAccordion').multiAccordion({
active: [1, 2],
click: function(event, ui) {
//console.log('clicked')
},
init: function(event, ui) {
//console.log('whoooooha')
},
tabShown: function(event, ui) {
//console.log('shown')
},
tabHidden: function(event, ui) {
//console.log('hidden')
}
});
$('#multiAccordion').multiAccordion("option", "active", [y]);
});
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
var x = getQueryVariable("page");
switch (x){
case(x = "tab1"):
y = 0;
break;
case(x = "tab2"):
y = 1;
break;
case(x = "tab3"):
y = 2;
break;
case(x = "tab4"):
y = 3;
break;
case(x = false):
y = "";
break;
default:
y ="";
break;
}
Any suggestions?
P.S. Here is THE closest description of my issue elsewhere on the web but no answer...Another thread
Instead of including the tab with the page, just target the ID from the hash. So your links will look like this:
SOMETHING<br />
SOMETHING1
Then you can include this code to find the ID from the hash, find the correct tab and open it. Here is the complete code & demo:
$(function() {
var updateAccordion = function(hash) {
hash = hash || window.location.hash;
var content, tab;
// look for a hash
if (hash && $(hash).length) {
// find accordion content
content = $(hash).closest('.ui-accordion-content');
if (content.length) {
// find "tab#" from <a> inside of accordion header (h3)
tab = parseInt(content.prev('h3').find('a').attr('id').replace('tab',''), 10) - 1;
$('#multiAccordion').multiAccordion("option", "active", [tab]);
}
}
};
// intercept all clicked links and look for a hash
$('a').click(function(){
if (this.hash) {
updateAccordion(this.hash);
}
});
$('#multiAccordion').multiAccordion({
active: [1],
click: function(event, ui) {
//console.log('clicked')
},
init: function(event, ui) {
//console.log('whoooooha')
},
tabShown: function(event, ui) {
//console.log('shown')
},
tabHidden: function(event, ui) {
//console.log('hidden')
}
});
// open up accordion to correct tab after initialization
updateAccordion();
});
Try using document.location.hash to access directly the hash parameters.
In your example :
index.html?page=tab2#something
document.location.search will be ?page=tab2
document.location.hash will be #something
You are trying to parse the wrong value, so I guess the JQuery plugin scroll to the bottom of the page when it's trying to open a tab that doesn't exists.