Add a char to the links in table of contents - javascript

I found this script that exactly meets my requirements. I would now like to add a >> char to the link.
It should not just be a list symbol before the link, it should be a part of the link. Can someone give me a tip on how I can do this?
$(document).ready(function() {
$(tocSide).empty();
var prevH2Item = null;
var prevH2List = null;
var index = 0;
$("h2").each(function() {
//insert an anchor to jump to, from the TOC link.
var anchor = "<a name='" + index + "'></a>";
$(this).before(anchor);
var li = "<li><a href='#" + index + "'>" + $(this).text() + "</a></li>";
if( $(this).is("h2") ){
prevH2List = $("<ul></ul>");
prevH2Item = $(li);
prevH2Item.append(prevH2List);
prevH2Item.appendTo("#tocSide");
} else {
prevH2List.append(li);
}
index++;
});
});

Related

Setting text input as a variable in Javascript

I'm trying to use my text input as a string variable and use that variable as a part of a URL to pull up JSON data but I can't seem to get it to work properly.
I don't know if I'm setting the variables incorrectly but any help would be appreciated. Thank you!
$(document).ready(function() {
var p = document.querySelector('p');
var input = document.getElementById('search').value;
$("#go").click(function() {
if (input === '') {
p.style.backgroundColor = 'transparent';
p.classList.add = 'hide';
p.innerHTML = '';
} else {
$.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=" + input + "&callback=?", function(data) {
p.innerHTML = "<br> Click the links below";
p.classList.remove('hide');
var i = 0
for (i; i < 5; i++){
if (data[3][i] !== undefined){
p.innerHTML += '<h2> <a href ="' + data[3][i] + '" target = "_blank">' + data[1][i] + '<br>' + '<h3>' + data[2][i] + '</h3>' + '</h2>'
} else {
p.innerHTML = ' <h2> No matching result </h2>';
}
}
});
}
});
});
At the time you assign the variable value, it is empty because it is run when the site is loaded and there is probably no text in the search box yet. You want the content at the time #go is clicked, so just assign it inside the click event handler:
$(document).ready(function() {
var p = document.querySelector('p');
// the text field value is empty at this point
$("#go").click(function() {
// this is run when user clicks #go
var input = document.getElementById('search').value;
if (input === '') {
p.style.backgroundColor = 'transparent';
p.classList.add = 'hide';
p.innerHTML = '';
}
else {
// encode user input
$.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=" + encodeURIComponent(input) + "&callback=?", function(data) {
p.innerHTML = "<br> Click the links below";
p.classList.remove('hide');
var i = 0
for (i; i < 5; i++){
if (data[3][i] !== undefined){
p.innerHTML += '<h2> <a href ="' + data[3][i] + '" target = "_blank">' + data[1][i] + '<br>' + '<h3>' + data[2][i] + '</h3>' + '</h2>'
}
else {
p.innerHTML = ' <h2> No matching result </h2>';
}
}
});
}
});
});
Additionally, you should always encode user input if you include it in a URI. Otherwise you'll experience unexpected behaviour when using any non alphanumerical character (including whitespace) in the search box. For a more detailed explanation of how and why, see the documentation.

How to add additional functionalities?

I got a simple JavaScript based blog . First have a look at the below codes and I will ask my question.
Index.html have the following codes in its body
<script language="javascript" type="text/javascript" src="blog/config.js"> </script>
<script language="javascript" type="text/javascript" src="blog/single.js"> </script>
<script language="javascript" type="text/javascript" src="blog/posts.js"> </script>
config.js has
//This is the configuration file of the blog system.
//change these variables to suit your style and needs
var head = "h2"; //the heading style, ex. h1, h2, ect. use "h2" rather than "<h2>"
var text = "text"; //the text style, from your style sheet, it's in a <div> tag
var divider = "<hr>"; //the division between posts
var newer = "newer"; //the class for the link to the next newest page
var older = "older"; //the class for the link to the next oldest page
var pageclass = "page"; //the class for the text that displays the page number
var dateclass = "date"; //the class for the date
var pagesize = 4; //the number of posts on each page
var navclass = nav; //the configuration for the navigation`
posts.js
var posts = 1; //add 1 to this after adding a post. should be equal to the id of the newest post.
initblog(posts);
var id = 1; //make sure that this number is one greater than the one below it
var date = "mm/dd/yyyy"; //The date of the post
var heading = "Post 1"; //The title
var entry = ""; //reset the string
//don't worry about formatting and stuff like that, the system takes care of it all for us.
//VV your entry VV
entry += "<p>Wow, this post is on another page, If you have this many real posts, congratulations!</p>";
//^^ The most important part ^^
add_entry(id,date,heading,entry); //adds the entry to the blog
single.js
var maxpost;
function initblog(posts){
maxpost = posts;
var address = window.location.search;
if (address.substring(0, 1) == '?') {
page = address.substring(1);
} else{
window.location = "post.html?" + posts;
}
page = parseInt(page);
if (page > maxpost){
page = maxpost;
}
if (page < 1){
page = 1;
}
}
function add_entry(id,date,heading,entry) {
for (i=page;i>page - 1;i--){
if (id == i){
var entrytext = "";
entrytext += "<div class=" + text + ">";
entrytext += "<" + head + ">";
entrytext += "<a name=" + id + "></a>";
entrytext += "<span class='date'>[" + date + "]</span> ";
entrytext += heading;
entrytext += "</" + head + ">";
entrytext += entry;
entrytext += "</div>" + divider;
document.write(entrytext);
}
}
}
function pages(){
entrytext = ""
entrytext += "<table class=\"nav\"><tr>";
entrytext += "<td width=25% class = " + newer + ">&nbsp";
if (page < maxpost){
entrytext += "<A HREF=javascript:prev()>Newer Posts </A>";
}
entrytext += "</td><td width=50% class = " + pageclass + "><br><A HREF=javascript:newest()> Back to Index</A></td>";
entrytext += "<td width=25% class = " + older + ">&nbsp";
if (page-1 > 0){
entrytext += "<A HREF=javascript:next()>Older Posts</A>";
}
entrytext += "</td></table>";
entrytext += "";
document.write(entrytext);
}
function next(){
page = page - 1;
if (page < 1) {
page = page + 1;
}
window.location = "post.html?" + page;
}
function prev(){
page = page + 1;
if (page > maxpost) {
page = maxpost;
}
window.location = "post.html?" + page;
}
function newest(){
window.location = "index.html?" + maxpost;
}
Well , this is the whole blog script . I ain't added styles and you may see the comments on each lines for simplicity.
This blog doesn't have options to add title and meta description , keyword etc. Due to the style of applying it can do nothing outside the body tag.
1 . How to add an option to take/load titles?
2 . How to add the feature to load meta tag?
Don't tell me to edit and add titles on the template (index.HTML) , because that make no sense
As you see the heading block is for the title of the blog. All you need is just making it more visible.
var entrytext = "";
entrytext += "<div class=" + text + ">";
entrytext += "<h1>" + heading + "</h1>";
entrytext += "<" + head + ">";
entrytext += "<a name=" + id + "></a>";
entrytext += "<span class='date'>[" + date + "]</span> ";
entrytext += "</" + head + ">";
entrytext += entry;
entrytext += "</div>" + divider;
document.write(entrytext);
document.title = heading;
This will solve your problem about titles.
Regarding to meta tags, usually (actually by standard) meta tags are written betweeen <head> tags in HTML. To make it SEO compilant you need add them into these tags. More detailed: http://www.w3schools.com/tags/tag_meta.asp
But, if this code is generated on client-side. There is no meaning to generate it, because search engine will not parse on-fly generated meta tags. Because it's executed on browser.

JavaScript performance issue, appending li into ul offline

I have a performance related issue : it takes 10sec to load my ul -it contains more than 1000 li-.
Can you point me where the problem is. What can I optimize ?
Moreover I have some much trouble to read the profile result.
NB: the DOM element template is offline until I send it to the sandbox
var displayAllHypotheses = function () {
console.time('displayAllHypotheses');
console.profile('displayAllHypotheses');
var $template = $(_template);
var $item_example = $template.find('#item-example').clone();
var $list = $template.find('.content-ask ul.select-hypothese');
$item_example.removeAttr('id');
$template.find('#item-example').remove();
_$template_item_selected = $template.find('.item-example').removeClass('item-example').clone();
for (var i in _data_game.Hypotheses) {
var $clone = $item_example.clone();
var $a_select_hypothese = $clone.find('a');
$a_select_hypothese.html(_data_game.Hypotheses[i].nom).data('hypotheseid', _data_game.Hypotheses[i].id);
$a_select_hypothese.attr('href', '#' + i);
if (!!_hypotheses_selected[_data_game.Hypotheses[i].id]) {
$a_select_hypothese.addClass('inDaList');
}
$clone.appendTo($list);
}
$list.find('a').click(function () {
$('#mod_hypothese .part-select .select-hypothese a').removeClass('selected');
$(this).addClass('selected');
displayChooseButton();
});
$item_example = null;
$a_select_hypothese = null;
$clone = null;
$list = null;
console.timeEnd('displayAllHypotheses');
console.profileEnd('displayAllHypotheses');
return $template;
};
var initTemplate = function (data) {
console.time('initTemplate hypothese');
console.profile('initTemplate hypothese');
_template = data;
var $template = displayAllHypotheses();
$template.find('.close-modal').click(function () {
_sandbox.notify('close hypothese', null);
});
_sandbox.setTemplate($template);
initSearchBox();
displaySelectedHypotheses();
$template = null;
console.timeEnd('initTemplate hypothese');
console.profileEnd('initTemplate hypothese');
};
EDIT
So I tried the string concatenation :
var displayAllHypothesesString = function () {
console.time('displayAllHypothesesString');
console.profile('displayAllHypothesesString');
var $template = $(_template);
var $list = $template.find('.content-ask ul.select-hypothese');
var lis = '';
_$template_item_selected = $template.find('.item-example').removeClass('item-example').clone();
for (var i in _data_game.Hypotheses) {
if (!_hypotheses_selected[_data_game.Hypotheses[i].id]) {
lis += '<li><a data-hypotheseid="' + _data_game.Hypotheses[i].id + '" href="#' + i + '">' + _data_game.Hypotheses[i].nom + '</a></li>';
} else {
lis += '<li><a class="inDaList" data-hypotheseid="' + _data_game.Hypotheses[i].id + '" href="#' + i + '">' + _data_game.Hypotheses[i].nom + '</a></li>';
}
}
$list.empty().append(lis);
$list.find('a').click(function () {
$('#mod_hypothese .part-select .select-hypothese a').removeClass('selected');
$(this).addClass('selected');
displayChooseButton();
});
console.timeEnd('displayAllHypothesesString');
console.profileEnd('displayAllHypothesesString');
return $template;
};
It's working fast enough !!
But now I have HTML snippet in my JS and if the web designer need to pimp the li he'll have to go to the JS file.
But I guess there is no workaround on this issue, is there ?
You can try creating a variable and store all the data in it. Once you completed the loop, append it to the element you want so you dont have to call append that many times.
var listData;
for(var i; i<data.length; i++)
listData += "<li>some data</li>"
$("#element").html(listData)
Something like that.

event.target.id.indexOf("foo") not working - Not working in IE

I have a JavaScript function that loops through classes and gets an ID which I have wrapped in a div called 'item'. Once they click on a button it bubbles up through the div which I have wrapped information in and collected the ID. For Example:
output = "<div id='item" + json_output[i].id + "'>" +
"<div class = 'itemBoxes'>"+
"<h3 class ='itemTitle'>" +json_output[i].classname + "</h3>" +
"<div class = 'paddingBottom'></div>" +
"<p class = 'itemDesc'>" + json_output[i].classdescription + '</p>' +
"<div class ='itemInfo'>" +
"<div class ='bookingItems'> <img src = 'img/glyphicons-268-credit-card.png'</img> <p class = 'itemDetails'>£" + json_output[i].classprice + "</p></div> "+
"<div class ='bookingItems'> <img src = 'img/glyphicons-46-calendar.png'</img> <p class = 'itemDetails'>" + json_output[i].classdate + "</p></div>" +
"<div class ='bookingItems'> <img src = 'img/glyphicons-55-clock.png'</img><p class = 'itemDetails'>"+ json_output[i].classstarttime +"</p></div>" +
"<div class ='bookingItems'> <img src = 'img/glyphicons-44-group.png'</img><p class = 'itemDetails'>" + json_output[i].classparticipants + " spaces </p></div>" +
"</div>" +
"<p id ='bookingBox'> <input type='button' class='bookingSubmit' value='Book Now'/> </p>" +
"</div>" +
"</div>";
target.innerHTML += output;
The code I use to find the ID is:
var fetchModifyButton;
//Gets the button that says 'Modify'
fetchModifyButton = _c("bookingSubmit");
//Remove Button.
for (var i = 0, j = fetchModifyButton.length; i < j; i++) {
fetchModifyButton[i].addEventListener("click", function () {
var e, productID, newID;
//Bubbles up and finds the ID of the product they want to modify
e = event.target;
while (e.id.indexOf('item') == -1) {
e = e.parentNode;
}
productID = e.id;
//Removes everything but the numbers.
newID = productID.replace(/[^0-9.]/g, "");
getClassInfoForBooking(newID, newID);
});
}
This works perfectly in Google Chrome, IE11, and most other browsers.
It doesn't work in IE8,9 or 10.
The error message I get in is:
SCRIPT5007: Unable to get property 'id' of undefinded or null reference
Then it points to the line: while (e.id.indexOf('item') == -1) {
I wondered if anyone had any ideas why?
use event.srcElement for IE
var addEvent = window.addEventListener||window.attachEvent;
fetchModifyButton[i].addEvent("click", function () {
var e, productID, newID;
//Bubbles up and finds the ID of the product they want to modify
e = event.target||event.srcElement;
while (e.id.indexOf('item') == -1) {
e = e.parentNode;
}
productID = e.id;
//Removes everything but the numbers.
newID = productID.replace(/[^0-9.]/g, "");
getClassInfoForBooking(newID, newID);
});

Hiding <p> field in javascript

Here's my code for gathering titles/posts from reddit's api:
$.getJSON("http://www.reddit.com/search.json?q=" + query + "&sort=" + val + "&t=" + time, function (data) {
var i = 0
$.each(data.data.children, function (i, item) {
var title = item.data.title
var url = item.data.url
var id = item.data.id
var subid = item.data.subreddit_id
var selftext = item.data.selftext
var selftextpost = '<p id="post' + i + '">' + selftext + '</p><br>'
var post = '<div>' + '' + title + '' + '</div>'
results.append(post)
results.append(selftextpost)
i++
});
});
Basically every post (selftext) is assigned a different paragraph id (post0, post1, post2, etc) for every result that's pulled. I'm also going to create a "hide" button that follows the same id scheme based on my i variable (submit0, submit1, submit2, etc). I want to write a function so that based on which button they click, it will hide the corresponding paragraph. I've tried doing an if statement that's like if("#hide" + i) is clicked, then hide the corresponding paragraph, but obviously that + i doesn't work. How else can I tackle this?
Could you try something like the below?
showhide = $("<a class='hider'>Show/Hide</a>");
results.append(showhide);
$(showhide).click(function() {
$(this).next().toggle();
}
Alternatively:
$.each(data.data.children, function (i, item) {
var title = item.data.title
var url = item.data.url
var id = item.data.id
var subid = item.data.subreddit_id
var selftext = item.data.selftext
var selftextpost = '<p id="post' + i + '">' + selftext + '</p><br>'
var showhide = $("<a class='hider" + i + "'>Show/Hide</a>");
var post = '<div>' + '' + title + '' + '</div>'
results.append(post)
results.append(selftextpost)
results.append(showhide);
$(showhide).click(function() {
$(this).next().toggle();
});
i++
});

Categories