Related
I have a site with navigation like:
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
When a user clicks on any of the links, the main content from each of the urls will be loaded onto one page, and the page scrolls down to the relevant section. I've tried something like below but it doesn't seem like the best solution. Is there a better way of doing this? Thanks. Should also point out that the code below doesn't work correctly, it loads the content more than once and in a random order.
$( "ul > li > a" ).each(function(index) {
var newhref = $(this).attr('href');
$.get(newhref).done(function (html) {
$(".main-copy").append($(html).find(".main-copy"));
});
});
To begin with I would suggest that each link should be inside it's own -li- like this:
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
As for the JQuery, something like this should do the trick:
$( "ul > li > a" ).click(function(){
$(".main-copy").load($(this).attr('href'));
});
I hope that sets you on the right path
Are these links hard-coded or dynamically generated?
In either case, get all these links into a JavaScript Array:var links=['link1','link2'...]
Since you want to dump all the content by navigating through each of these links, you can loop-through links and append content
for(i=0;i<links.length;i++) {
var link = links[i];
$.ajax(link).done(function(htmlContent){
//set contents to some section or div
});
}
Now the links themselves can be a #href tags with-in the page.
My suggestion would be not to navigate using Jquery on UL -> LI path to get the list of links.
If the load thing is working, are you simply looking at the scrolling thing? Try something like this:
// Creating a dummy namespace, as I don't have content to actually load via ajax.
var myNameSpace = {
"link1": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>",
"link2": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>",
"link3": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>",
"link4": " <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget tortor risus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</p><p>Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit.</p><p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Proin eget tortor risus. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur aliquet quam id dui posuere blandit.</p>"
};
// Take each of the navigation elements, and use them to create the content sections
$("nav a").each(function() {
/***
* This would be where you'd first want to load
* your HTML content, rather than using the namespace.
***/
// Get the actual text of the anchor, we'll use that later
var target = $(this).attr("href").substring(1);
// create the section tag...
var myTargetEl = document.createElement("section");
// set the id for the link to use as a target
$(myTargetEl).attr("id", target).append("<h2>" + target + "</h2>").append(myNameSpace[target]);
// Add the section we've created to the content pane
$(".content-pane").append(myTargetEl);
// AND CHANGE THE ACTUAL LINK -- I don't want to reload
// this content every time!
$(this).attr("href", "#" + target);
});
$("nav a").click(function() {
var target = $($(this).attr("href"));
if (target.length) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
})
nav {
position: fixed;
left: 10px;
top: 10px;
float: left;
width: 100px;
background-color: #ccc;
}
.content-pane {
position: relative;
left: 120px;
width: 400px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
Content 1
Content 2
Content 3
Content 4
</nav>
<div class="content-pane">
</div>
As far as the load thing goes, simply load each link into its own section tag. In fact, use the link list to create the section blocks, so that if you add more navigation elements, they'll load dynamically.
Modified the code so that there are no sections being inserted manually, they're created by the link tags themselves. As to how you'd load them, you seem to be doing that all right -- all you're missing is the changing the link's HREF to point to the appropriate section each time.
I have a series of divs that on click, toggle the state of a collapsible div (like an accordion widget). That is working fine, but I want to be able to scroll to the top of the trigger div (the div with class name 'panelTab') when the user clicks. The problem is that when the panels are hidden, they take up no space so jQuery doesn't automatically 'know' the size of the page, and isn't able to calculate to the top of the element automatically. So what happens is that on click it scrolls, but it 'overshoots' the top of the window and lands in the middle of the paragraph content. I'm stuck - anyone know a simple solution? Thanks in advance.
<div class="panelTab first holder">
<div class="text-block"> <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div>
<div class="clearfix"></div> </div>
<div class="animatedPanel"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor. </p></div>
<div class="panelTab holder">
<div class="text-block" > <h3>LOREM IPSUM </h3><p class="sub- title">Lorem Ipsum Dolor</p> </div>
<div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor. </p></div>
<div class="panelTab holder"><div class="text-block" > <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div><div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor.</p></div>
<div class="panelTab holder">
<div class="text-block" > <h3>LOREM IPSUM</h3><p class="sub-title">Lorem Ipsum Dolor</p> </div><div class="clearfix"></div></div>
<div class="animatedPanel"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare ornare lectus in pulvinar. Donec tempor odio sit amet phare- tra commodo. Suspendisse sem libero, tempor vitae egestas eu, sagittis sit amet metus. Sed congue tristique quam in gravida. Sed cursus, lectus vel rhoncus bibendum, erat ante mattis mauris, ac pharetra erat mauris nec turpis. Sed tincidunt aliquam est eget rhoncus. Proin eget metus ex. Sed sit amet eros feugiat, dignissim purus eget, rhoncus augue. Vestibulum lacinia tellus vel turpis vestibulum pharetra. Lestie, viverra mauris nec, semper turpis. Nunc accumsan augue ut ligula iaculis auctor.</p></div>
And the jQuery:
$('.animatedPanel').hide();
$('.panelTab').click(function() {
$('.panelTab').removeClass('active');
$(this).toggleClass('active');
var panel = $(this).next()
$('.animatedPanel').not(panel).slideUp();
panel.slideToggle({
direction: "up"
}, 100);
$('html, body').animate({
scrollTop: $(this).offset().top
}, 200);
});
http://jsfiddle.net/rmLo2n07/
try changing the style of the hidden element
position:absolute, display: block, visibility:hidden
then calculate it height and restore its old style
Ive got a js that runs to see if a maximum amount of characters is reached. Its got text along with href, but when the max amount of characters is reached, the link doesnt work and converts it to just text. When the limit of less then 580 characters, link works. When it does reach the limit, the read more link does work. Any advice or help please and thanks
$(document).ready(function () {
var stylistText = $('#stylistText');
var stylistText2 = document.getElementById("stylistText").innerHTML;
var countActualText = stylistText2.valueOf().length;
var maxLength = 580;
var aElement = document.createElement('a');
var linkText = document.createTextNode(" ...Read more");
aElement.appendChild(linkText);
aElement.href = "#";
if (countActualText > maxLength) {
stylistText.text(stylistText.text().substring(0, 580));
stylistText.append(aElement);
}
});
here is the html
<div class="stylistInfo">
<img id="stylistPhoto" src="images/Test.jpg" alt="peekaboo beans stylist" />
<p id="stylistText">
This is supposed to be a link Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec mauris odio. Sed varius, felis eget rutrum scelerisque, enim ligula porta nulla, id rhoncus orci nisi at nunc. Fusce cursus, libero a sagittis viverra, arcu eros luctus arcu, sit amet euismod sapien purus quis nisl. Praesent aliquam aliquam ante ornare pulvinar. Mauris ultrices dictum quam, at ornare dui blandit id. Sed erat elit, fringilla quis diam at, euismod rhoncus massa. Curabitur at arcu nisl. Nullam tincidunt lacus sapien, sed porttitor odio sodales sit amet. Nunc tincidunt nisi et nulla aliquam cras amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec mauris odio. Sed varius, felis eget rutrum scelerisque, enim ligula porta nulla, id rhoncus orci nisi at nunc. Fusce cursus, libero a sagittis viverra, arcu eros luctus arcu, sit amet euismod sapien purus quis nisl. Praesent aliquam aliquam ante ornare pulvinar. Mauris ultrices dictum quam, at ornare dui blandit id. Sed erat elit, fringilla quis diam at, euismod rhoncus massa. Curabitur at arcu nisl. Nullam tincidunt lacus sapien, sed porttitor odio sodales sit amet. Nunc tincidunt nisi et nulla aliquam cras amet.
</p>
</div>
Change stylistText.text(stylistText.text().substring(0, 580));
to stylistText.html(stylistText.html().substring(0, 580));
However, truncating a block of text that contains HTML may cause other problems, especially if the truncation occurs in the middle of an element. I would recommend rethinking your whole strategy on this.
I'm using CKEditor on my site and I want to change text in the Image->Properties->Preview to English.
I want to change this text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.
Thanks
You can set this text using the config.image_previewText option.
E.g.
config.image_previewText = 'In publishing and graphic design, lorem ipsum is' +
'placeholder text (filler text) commonly used to demonstrate the graphic' +
'elements of a document or visual presentation';
try to change in path\ckeditor\plugins\image\dialogs and edit file image.js ,you can ctrl+f and search "Lorem ipsum dolor sit amet, consectetuer"
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.