Related
I'm facing a strange problem with mongodb database. In the following schema; i store in the field instructions a long text, and stragely sometimes i find that few words have disappeared from it.
const CourseSchema = new mongoose.Schema({
created: {
type: Date,
default: Date.now
},
title: {
type: String,
default: '',
trim: true,
required: 'Title cannot be blank'
},
instructions: {
type: String,
default: '',
trim: true
}
});
I'm sorry i dont have more details about the issue, so i need some suggestion or ideas that could help.
Thanks
UPDATE:
Here is an exemple:
The original value :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nulla pellentesque, consectetur velit pellentesque, consectetur dui. Nulla purus ante, eleifend vitae ornare ut, molestie quis metus. Nulla a augue ut orci fermentum blandit vel et elit. Pellentesque fermentum arcu erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae posuere libero. Etiam non ex non risus ornare laoreet ac in tortor. Quisque malesuada tortor vulputate neque bibendum, bibendum vestibulum lacus cursus. Sed ac condimentum purus. Pellentesque nec tincidunt odio. Mauris ac tellus interdum, luctus augue et, cursus ex. Duis vulputate arcu at enim tincidunt, ut hendrerit mauris dapibus. Vivamus ullamcorper eu nisl et fringilla. Sed vel ornare sem. Proin porta erat sit amet nulla rhoncus tincidunt.
after few days (moment or whatever), i found:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nulla pellentesque, consectetur velit pellentesque, consectetur dui. Nulla purus ante, eleifend vitae ornare ut, molestie quis metus. Nulla a augue ut orci fermentum blandit vel et elit. Pellentesque fermentum arcu erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec vitae posuere libero. Etiam non ex non risus ornare laoreet ac in tortor. Quisque malesuada tortor vulputate neque bibendum, bibendum vestibulum lacus cursus. Sed ac condimentum purus. Pellentesque nec tincidunt odio. Mauris ac tellus interdum, luctus augue et, cursus ex. Duis vulputate arcu at enim tincidunt, ut hendrerit mauris dapibus. Vivamus ullamcorper eu nisl et fringilla. Sed vel ornare sem. Proin porta erat sit amet
<div id="rightside">
<h1>Name Of Person</h1>
<p>1900-1950
<p>Learn More
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at
convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
<button>Pause</button>
</div>
my div looks like this. I want to replace it with data that I am getting from a JSON file. However I only want to show 1 entry at a time and make it animate between entries (does not need to be fancy).
My question is how can I get jQuery to change between my JSON data?
My JSON data looks like
[
{
"name": "Elizabeth Cady Stanton",
"image": "media/images/elizabeth.jpg",
"year": "1815 – 1902",
"wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton",
"article": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor. Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nil."
},
I would appreciate any help or links to examples.
Thanks
Added data-index to track data index that we are showing
<div id="rightside" data-index='-1'>..</div>
It will change your data after every 5 seconds in rotating manner.
setTimeout(function(){
var yourJsonData = [{"name":"Elizabeth Cady Stanton","image":""media/images/elizabeth.jpg"},{"name":"Elizabeth Cady Stanton","image":""media/images/elizabeth.jpg"}];
var currentIndex = $("#rightside").attr('data-index');
var totalLengthOfData = yourJsonData.length;
var indexToShow = currentIndex+1;
if(indexToShow > totalLengthOfData){
indexToShow=0;
}
$("#rightside").attr('data-index',indexToShow);
var dataToAppend = yourJsonData[indexToShow];
$("#rightside").children().remove();
$("#rightside").append("<h1>"+yourJsonData['name']+"</h1>").
append("<p>"+yourJsonData['year']+"</p><p><a href='"+yourJsonData['linktowiki']+"'>learn more</a></p>");
},5000);
haven't tested the code yet
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
var yourJsonData = '[{"name": "Elizabeth Cady Stanton","image": "media/images/elizabeth.jpg","year": "1815 – 1902","wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton", "article": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor. Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nil."}]'
var obj = JSON.parse(yourJsonData);
$('#rightside').find('h1:first').text(obj[0].name);
$('#rightside').find('p:first').text(obj[0].year);
$('#rightside').find('a:first').attr('href', obj[0].wikilink)
$('#rightside').find('p:eq(3)').text(obj[0].article)
});
</script>
<body>
<div id="rightside">
<h1>Name Of Person</h1>
<p>1900-1950
<p>Learn More
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at
convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
<button>Pause</button>
</div>
</body>
</html>
Your problem can be solved by this:
HTML:
<div id="rightside">
<h1 id="nameOfPerson"></h1>
<p id="year">
</p>
<a id="wikiLink">Learn More</a>
<p id="article"></p>
<p></p>
<button id="fill">Start</button>
</div>
JQuery :
var dataObject = [{
"name": "Elizabeth Cady Stanton",
"image": "media/images/elizabeth.jpg",
"year": "1815 – 1902",
"wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton",
"article": "Whole Article"
}];
$("#fill").click(function() {
setData(dataObject);
});
var setData = function(data) {
$.each(data, function(index, mainData) {
$("#nameOfPerson").text(mainData.name);
$("#year").text(mainData.year);
$("#wikiLink").attr("href",mainData.wikilink);
$("#article").text(mainData.article)
});
};
By this code your data will be rendered dynamically.
For Demo you can check my fiddle :
Fiddle Link Here
I am trying to make a button that when clicked points to a specific section of a different page.
For example a user is on his profile page and clicks on "change personal information" button. He/She should be redirected to the settings page and the browser should scroll down (or land) where the "Change your Personal Information" section is (at the bottom of that page for example).
I use something similar in which it scrolls down to a section of the same page by using this js lines:
function goToByScroll(id){
// Removing "link" from the ID
id = id.replace("link", "");
// Scroll
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
}
which animates down to the section.
Can something like that be done? If so, tips to the right direction would be really appreciated.
Simply place this code in the document ready event handler.
You can get the hash value from the window object:
$(document).ready(function(){
var id = window.location.hash.replace('link', '');
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
});
As advised above you may scroll to id extracted from window.location, or you can simply red href-attribute of you <a> element.
$('.scroll-trigger').click(function(e) {
e.preventDefault();
var $that = $(this);
var target = $that.attr('href');
$('html,body').animate({
scrollTop: $(target).offset().top
}, 'slow');
});
#aboutRabbits {
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Go to Rabbits
<div id="content">
<div>
<p>Some nonsense text here</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
</div>
<div id="aboutRabbits">
<p>Rabbits are small mammals in the family Leporidae of the order Lagomorpha, found in several parts of the world. There are eight different genera in the family classified as rabbits, including the European rabbit (Oryctolagus cuniculus), cottontail rabbits (genus Sylvilagus; 13 species), and the Amami rabbit (Pentalagus furnessi, an endangered species on Amami Ōshima, Japan). There are many other species of rabbit, and these, along with pikas and hares, make up the order Lagomorpha. The male is called a buck and the female is a doe; a young rabbit is a kitten or kit.</p>
</div>
<div>
<p>Some nonsense text here</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam.</p>
</div>
</div>
Step 1. Redirect to 'settings' page with div id in 'url'
Step 2. User url and get the div id from window.url using split().
Step 3. Use below function.
$(document).ready(function(){
var DivId = window.Url.split('#');
$('html,body').animate({
scrollTop: $("#"+DivID).offset().top},
'slow');
});
So I have to finish a task, and I'm a total javascript/jquery newb!
My problem is this:
We need to have several list items, outputed from a javascript. The list itsm contains only the tile.
Then when the use clicks on either of those list items, the full info appears somewhere else on the page, with more details.
I have to work with this:
var data={
"news":[
{
"id":"0",
"title":"Find the best deals",
"sub":"Featured Story",
"text":"0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.",
"image":"images\/home_img_4.jpg",
"link":"#NEWS_0",
},
{
"id":"1",
"title":"No one likes the grudge",
"sub":"Featured Story 1",
"text":"1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.",
"image":"images\/home_img_4.jpg",
"link":"#NEWS_1",
},
{
"id":"2",
"title":"Story time is on!",
"sub":"Featured Story2",
"text":"2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.",
"image":"images\/home_img_4.jpg",
"link":"#NEWS_2",
},
]
}
Also heres a better example for what im looking for:
jsfindle
Thanks!
George
When populating the UL list add an attribute "data-item" to the LI(s),
give it the value of the index of that item in the data array.
<ul class="mini-feed">
<li class="title" data-item="0">Test title</li>
<li class="title" data-item="1">Test title 1</li>
<li class="title" data-item="2">Test title 2</li>
<li class="title" data-item="3">Test title 3</li>
<li class="title" data-item="4">Test title 4</li>
</ul>
also give the elements in the display section IDs:
<div class="">
<img id="image" src="" class="image" />
<h1 id="title" class="title">Test title</h1>
<span id="body" class="sub">some tagline</span>
</div>
then add the following javascript (considering you are using jQuery)
$(document).ready(function(){
$('.title').click(function(){
var itemIndex = $(this).data('item');
popItemToScreen(data.news[itemIndex]);
});
});
function popItemToScreen(dataItem){
$('#image').src = dataItem.image;
$('#title').html(dataItem.title);
$('#body').html(dataItem.text);
}
this should do the trick
Fiddle: http://jsfiddle.net/j9QEM/11/
<ul id="mylist">
<li data-id="0">Title 1</li>
<li data-id="1">Title 2</li>
<li data-id="2">Title 3</li>
</ul>
<div id="content"></div>
<script>
/**
* get the data-index="" value and
* use it's id as an index to pick
* a particular item from the data[] array
*
* .html() populates #content with the given
* .text.
**/
$('#mylist li').on('click', function() {
$('#content').html( data.news[$(this).data('id')].text );
});
</script>
Within your comments, you mentioned about loading the page with Id in mind, you could after page load:
<script>
$(document).ready(function() {
//This will pre-load the Array's 3rd news piece.
$('#content').html( data.news[2].text );
});
</script>
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.