I found this question how to add pinterest hover button to FancyBox2
fancbybox pinterest jQuery
which works great, I just couldn't solve how to add description to the pin?
var pinUrl = a.attr('href') + '?url='+ encodeURIComponent(location.href)
+ '&media='+ encodeURIComponent(img.attr('src'))
+ '&description=' (what goes here??);
Not familiar with the API, but to appropriately add a description parameter and keep it encoded, you would do:
var pinUrl = a.attr('href') + '?url='+ encodeURIComponent(location.href)
+ '&media='+ encodeURIComponent(img.attr('src'))
+ '&description=' + encodeURI('I am some string of text');
Abstracting this:
function pinUrl(link, img, description) {
return link.attr('href') + '?url=' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(img.attr('src')) + '&description=' + encodeURI(description);
}
// Usage:
var myPinUrl = pinURL($("#somelink"), $("#someimage"), "Look at this cool text!");
// EDITED:
If you have a set of links with variable information, you might use the pinUrl function like so:
var pin_url_list = [];
$("#mydiv a").each(function() {
pin_url_list.push( pinUrl( $(this), $(this).find("img.featured"), $(this).attr("title") );
});
Another way to do it:
You could get the description from the title attribute of your link (or use a data-caption attribute) like :
$(".fancybox").fancybox({
helpers: {
title: {
type: 'inside'
}
},
beforeShow: function () {
this.title = this.title ?
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.location.href) +
'&media=' + encodeURIComponent(this.href) +
'&description=' + this.title + '" class="pin-it-button" count-layout="horizontal">' +
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>' +
'<span> ' + this.title + '</span></div>'
:
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.location.href) +
'&media=' + encodeURIComponent(this.href) +
'&description='+$(this.element).data("caption")+'" class="pin-it-button" count-layout="horizontal">' +
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>' +
'<span> </span></div>'
}
});
JSFIDDLE
Related
I am trying to outsource my inline javascript into an external one. The inline code looks like this and it works fine.
<script type="text/javascript">
$.getJSON('../servlets/solr/select?q=mods.genre:issue_a&state:published&rows=1&
fl=returnId,id,search_result_link_text,parentLinkText,mods.title&sort=modified
desc&wt=json',
function (data) {
$(data.response.docs).each(function(i, doc){
let ausgabe = "Ausgabe: ";
let titelmain = doc['search_result_link_text'];
let titelall = doc['mods.title'];
for (let i=0, item; item=titelall[i]; i++) {
if (item.indexOf(titelmain)>=0) {
titelall.splice(i,1);
}
}
let titel = titelall.join(' ' + '|' + ' ');
$('#periodicals').append($('<div class="modified"></div>')
.append('<p class="lastmod-p interline text-content">' +
'<span class="fa fa-arrow-right text-info" />' + ' ' +
'<span style="font-weight:bold">' + (doc['parentLinkText']) +
'</span>' + '<br/>' + '<a class="navbar-link" style="font-weight:bold" href="../receive/'+doc['returnId']+'">' + doc['search_result_link_text'] + '</a>' + '<br/>' + titel + '</p>' + '<p/>')
);
});
});
</script>
The external javascript (new.js) looks like this.
It is stored inside the same folder as the html (index.html) invoking it.
$(document).ready(function(){
jQuery.getJSON('http://localhost:8282/mir/servlets/solr/select?q=mods.genre:journal&state:published&rows=2&fl=id,search_result_link_text,mods.title,mods.title.main,sb_amt,sb_ort&sort=modified desc&wt=json',
function (data) {
$(data.response.docs).each(function(i, doc){
let amt = doc['sb_amt'] ? doc['sb_amt'] : ' ';
let ort = doc['sb_ort'] ? doc['sb_ort'] : ' ';
let alletitel = doc['mods.title'];
let titel = alletitel.slice(1);
titel = titel.join(' ' + '|' + ' ');
let meta = [titel,amt,ort];
let text = meta.join(' ' + '|' + ' ');
$('#periodicals').append($('<div class="modified"></div>')
.append('<p class="lastmod-p interline text-content">' +
'<a class="navbar-link" style="font-weight:bold" href="../receive/'+doc['id']+'">' + doc['search_result_link_text'] + '</a>' + '<br/>' + text + '</p>')
);
});
});
alert('New Documents');
});
I added alert to be sure that the external javascript is beeing resolved.
The alert text pops up correctly but there is no data displayed.
In my HTML Code I have this:
<script src="new.js"></script>
<div class="col-md-4">
<h4 class="text-dark font-weight-bold" style="">PERIODICALS</h4>
<div id="periodicals"></div>
<a style="vertical-align:top" href="../servlets/solr/select?q=mods.genre:journal&
state:published&sort=modified desc"></a>
</div>
I'm trying to make a website using jquery-1.11.1 where I want a <textarea> to be spawned whenever I click on the link which only shows on mouseenter on a div. But I'm getting an error in my console,
Uncaught ReferenceError: inputdivEditor is not defined (Please ignore JSFiddle errors)
I've absolutely no idea why I'm getting this. Here are my codes,
$(document).ready(function () {
$("[id^=divEditor-]").each(function () {
var content = $(this).html();
var targetID = $(this).attr('id');
var txtID = 'input' + targetID;
$('<textarea id="input' + targetID + '" name="' + txtID + '" >' + content + '</textarea>').insertBefore(this).css('display', 'none');
var button = "<a onclick='activateDivEditor(this, " + txtID + ")' class='custom-edit-button editDiv' id='active" + targetID + "'>Embed Code</a>";
$(this).on('mouseenter', function () {
$(this).prepend($(button));
$(this).css('position', 'relative');
});
$(this).on('mouseleave', function () {
$('.editDiv').remove();
});
});
});
function activateDivEditor(btn, txtId) {
var targetID = $(btn).parent().get(0).id;
var update = "<a onclick='deactivateDivEditor(this, " + txtId + ")' class='custom-edit-button updatediv' id='deactive" + targetID + "'>Update</a>";
var cancel = "<a onclick='cancelactivateDivEditor(this)' class='custom-edit-button cancel' id='cancelactive" + targetID + "'>Cancel</a>";
var targetClass = $('#' + targetID).attr('class');
var targetWidth = $('#' + targetID).width();
$('#' + targetID).css('display', 'none');
$('#input' + targetID).css('display', 'block').css('width', targetWidth - 2).css('height', '125px');
$('#input' + targetID).parent().css('position', 'relative');
$(update).prependTo($('#input' + targetID).parent());
$(cancel).prependTo($('#input' + targetID).parent());
}
JSFiddle Demo
How can I generate a textarea whenever I click on the button link? Need this help badly. Thanks.
In the following lines of code, I try to add a function inside html tag in javascript:
nuevo = "<p class='item'>" + res.tarea + "<button onclick = '" + return EliminarTareas(database) + (" + res.tarea +");'>" + "Eliminar" + "</button></p>";
$('#listatareas').append(nuevo);
function EliminarTareas(id, base) {
base.transaction(function(tx) {
tx.executeSql("DELETE tarea FROM Tareas WHERE tarea=?", [id], function () {
});
});
}
The main problem is this part +return EliminarTareas(" + database + ", " + res.tarea +");'>". It discards the second parameter since you closed the paranthesis ), and it also has quote problems.
It should be like this +" return EliminarTareas(" + database + ", " + res.tarea + ");'>"
However, I believe addressing this task with .data would be effective, and it may provide a better structure. Below is my version with some codes from yours (DEMO: https://jsfiddle.net/9q4hLs3a/):
var nuevo = $("<p class='item'><button data-var1='" + database + "' data-var2='" + res.tarea + "'>Eliminar</button></p>");
$('#listatareas').append(nuevo);
$(document).ready(function(){
$(document).on('click', '#listatareas button', function(){
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
EliminarTareas(var1 , var2 )
});
function EliminarTareas(id, base){
base.transaction(function(tx){
tx.executeSql("DELETE tarea FROM Tareas WHERE tarea=?", [id], function (){
});
}
I think this is what you wanted
"<p class='item'>"+ res.tarea +"<button onclick = 'EliminarTareas("+database+","+res.tarea +")'>Eliminar</button></p>";
I have made an really ugly code, but i was going to fix it when i was done with it.. But i didn't come that far >_<
i post my code here and some information under it.
$(document).on('click', '.cogwheel', function() {
var link = $(this).data('pageid');
$(".pages").not(".page" + link).hide();
$(".links").not("#link-" + link).show();
$("#link-" + link).toggle();
$(".page" + link).toggle();
});
$(document).on('click', '.deletecross', function() {
$(".deleteClass" + $(this).data('pageid')).remove();
var total = parseFloat($(".hiddenCounter").val()) - 1;
$(".hiddenCounter").val(total);
var this_val = $(".pagae" + $(this).data('pageid')).val();
this_val.replace($(".pagae" + $(this).data('pageid')).val(), "");
$(".pagae" + total).val(this_val);
});
$(document).on('keyup', '.pages', function() {
var pageID = $(this).data('pageid');
var pages = $(".pagae").val();
$(".pagae" + pageID).val($(this).val());
$(".pagetest" + pageID).html($(this).val());
$(".pagae").val(pages + $(this).val());
$("#link-" + pageID).html($(this).val());
});
message = new Array();
jQuery.fn.update_textarea = function(test) {
//for (i=0;i<test;++i) {
if (message[test]) { $(".MenuLinks").append('<tr><td width="150">Sida ' + test + '</td><td align="right"><span class="glyphicon glyphicon-cog"></span></td></tr>');$("#articles_textarea").append('<h2>askda</h2><textarea id="editor-1"></textarea>'); }
else {
message[test] = '';
var TDRow1 = '<tr class="deleteClass' + test + '"><td width="150">Sida ' + test + '<input type="text" name="pages[]" value="Sida ' + test + '" class="pages page' + test + '" data-pageid="' + test + '"></td>';
var TDRow2 = '<td align="right" width="20"><span class="glyphicon glyphicon-cog cogwheel" data-pageid="' + test + '" style="cursor:pointer;" title="Redigera"></span></td></tr>';
var TDRowRemove = '<td align="right" width="10"><span class="glyphicon glyphicon-remove deletecross" data-pageid="' + test + '" style="cursor:pointer;color: #ff0000;" title="Radera"></span></td>';
var TDFake = '<td></td>';
if (test != 1) {
var TRRow = TDRow1 + TDRowRemove + TDRow2;
}
else {
var TRRow = TDRow1 + TDFake + TDRow2;
}
$(".MenuLinks").append(TRRow); $("#articles_textarea").append('<div id="Sida' + test + '" class="tab-pane"><input type="hidden" class="pagae' + test + '" name="pagae[]" value="Sida ' + test + '"> <h2 class="pagetest' + test + '">Sida ' + test + '</h2><textarea name="editor[]" id="editor-' + test + '" class="editor" data-pageid="' + test + '"></textarea></div>');
$("#editor-" + test).wysibb({lang: "en"});
}
//}
}
/* If no textareas available add a new one */
if (message.length == 0) {
$(this).update_textarea(1);
$("#Sida1").addClass("active");
}
});
This code you can add a page with, delete a page and write a new name for the page, and im using bootstrap so they all got there own "tab"
I was going to use this script to make an article system, and when you post it should insert pages into an own table like pages. And content to another.
But my problem here is, when im trying to remove a "link/page" it removes the page from the menu and everything.
But i dont have a freaking clue how to change the hidden input that has all the names of the pages in it.. So when i post the hidden input i got all pages i have on the page and those i removed..
I know this is some slabby code and i know you could make it better then me..
If you got any ideas or any thing that i can make smaller let me know..
after Oyeme's advise, i have changed my code, but still cannot work. it can alert "testing" but cannot alert DBuser_name .
By the following coding, i can create a content like the image below. My problem is that, if the user click one of the people in the list, i would like to extract the student.data.user_name into localStorage. however, in my coding below, seems that i did wrong?
function getStudentList() {
$.getJSON('http://mydomain.com/getStudents.php?jsoncallback=?', function(data) {
$('#studentList li').remove();
$('#load').hide();
//students = data.user_name;
$.each(data, function(index, student) {
//$('#studentList').append('<li><a href="tutor_student_detail.html?user_name=' + student.data.user_name + '">' +
$('#studentList').append('<li><a href="tutor_student_detail.html">' +
'<h4>' + student.data.user_name + '</h4>' +
'<p>' + student.data.role + '</p>' +
'</a></li>');
$("li a").click(function() {
window.localStorage["view"] = $(this).data('user_name');
});
});
$('#studentList').listview('refresh');
});
}
Below are the coding of tutor_student_detail.html (js part)
function start(){
var localUsername=window.localStorage.getItem("view");
$.getJSON('http://mydomain.com/getStudent.php?user_name='+localUsername+'&jsoncallback=?', displayStudent);
alert("testing");
}
function displayStudent(data) {
var DBuser_name=data[0].data.user_name;
alert(DBuser_name);
var employee = data.item;
$('#username').text(student.data.user_name);
$('#pw').text(student.data.password);
$('#id').text(student.data.id);
$('#actionList').listview('refresh');
}
the output of json string is something like
?([{"data":{"id":"4","user_name":"studentB","book":"4567","role":"Student"}}]);
$('#studentList').append('<li><a href="tutor_student_detail.html"
data-name="'+student.data.user_name+'">' +
'<h4>' + student.data.user_name + '</h4>' +
'<p>' + student.data.role + '</p>' +
'</a></li>');
$("li a").click(function() {
window.localStorage["view"] = $(this).data('name');
});