This question may seem as a duplicate one, but I cannot seem to find a solution for my problem.
I am fetching content from external websites using the iFramely API. Which works for almost all requested websites.
However, if I try to fetch for example a post from Reddit and display this in a sort of custom made 'preview box' the requested iFrame get rendered correctly, so far so good.
When I try to copy the HTML content of the 'preview box' in order to append it to another div using jQuery. It does not copy all HTML elements.
Complete function
$('#btn-add-extern-snippet').click(function() {
let embed_preview_container = $('#embed-preview');
let embed_target_number = $('#embed-target-number');
let target_number = $(embed_target_number).val();
$('.embed-no-' + target_number).html($(embed_preview_container).html());
...
});
I've tried the jQuery functions:
clone $('.embed-no-' + target_number).html($(embed_preview_container).clone());
html $('.embed-no-' + target_number).html($(embed_preview_container).html());
contents $('.embed-no-' + target_number).html($(embed_preview_container).contents());
using append $('.embed-no-' + target_number).append($(embed_preview_container).html());
But all of these functions do not seem the copy the full "innerHTML" of the mentioned 'preview box' (see pictures below).
The copied HTML content inside the 'other div' with an empty body & head.
The actual content in side the 'preview box'.
I must note here that this only seems to be te case for Reddit related content. It works for example with Soundcloud/Spotify/Bandcamp.
PS. I am using jQuery version 3.3.1
Code sample below:-
$("#copyToDiv").append($("#copyFromDiv").html());
Thanks
you can try this.
$('#copy').click(function(){
$('#div2').html($('#div1').html());
});
#div1{
background:green;
}
#div2{
background:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='copy'>Copy</button>
<div id='div1'>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
</p>
<div>
<h2>Lorem Ipsum</h2>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles
</p>
</div>
<div id='div2'></div>
Alright, so I've found the solution/workaround to my own problem. Instead of copying the contents of the 'preview box', I stored the fetched HTML in a temporary variable, and appended the contents of this variable inside an 'another div' (this works).
Noteworthy, something strange that occurred to me while debugging is that the browser (in this case Chrome), does not render/display HTML correctly (see picture) (note the empty iFrame).
This is exactly what .html() copied. So long story short the following code worked for me:
// temporary variable for storing html.
let currentSnippet = '';
$('#btn-add-extern-snippet').click(function() {
let embed_preview_container = $('#embed-preview');
let embed_target_number = $('#embed-target-number');
let target_number = $(embed_target_number).val();
$('.embed-no-' + target_number).html(currentSnippet);
...
});
Related
What I want my code to do is when I pass with my mouse on my text, the next letters of the alphabet appear. Not in the console, in the text on my website. How can i do that?
this is an exemple for what i want : the text become unreadable
var conteneur = document.querySelector('.texte2')
var textBalise = conteneur.textContent.replace(/(\S)/g,'<span class = x>$1</span>')
conteneur.innerHTML = textBalise
var $spans = document.querySelectorAll('span')
function nextLetter(ch) {
if (!ch.match(/[a-zA-ZäöüßÄÖÜ]/i)) return ch;
else if (ch === 'Z') return 'A';
else if (ch === 'z') return 'A';
return String.fromCharCode(ch.charCodeAt(0) + 1);
}
for (var $span of $spans) {
$span.addEventListener('mousemove',(e) => {
console.log(e.target)
console.log(nextLetter(e.target.textContent))
});
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Peut-on encore être graphiste au pays des Templates ?</title>
</head>
<body>
<div class ="texte2">
<p>Avec l’arrivée du numérique, on doit visionner les documents sur des machines et des écrans différents. Cette différence de support de visualisation est déjà bien connue avec le cinéma. En effet visionner un film en salle ou chez vous est totalement différent. Mais avec l’intermédiaire technique que sont nos ordinateurs, les différences se font encore plus importantes, différence de résolution, du nombre de couleur, de taille, de vitesse d’affichage… Nous avons un codage de l’information puis un décodage avec toutes les variations que cela peut entraîner.</p>
<p>L’arrivée du langage HTML, qui est qu’un langage de description de page. Ce langage donne des indications au navigateur, qui va lui-même interpréter ces pages afin de les afficher au mieux sur votre machine. Suivant votre navigateur, votre système d’exploitation, votre vitesse de connexion, votre écran, vos polices de caractères installées… la formalisation de la page peut être très différente (codage/décodage).</p>
<p>C’est la première fois dans l’Histoire (graphique) que le graphiste/typographe perd le contrôle du choix de la police de caractères. En effet en Html, c’est l’utilisateur final qui choisi sa police de caractère et sa taille dans les préférences de son navigateur.</p>
<p>L’arrivée des CSS a aussi précipité les choses. Dorénavant la forme est totalement séparée du contenu. Il est techniquement très facile de changer la formalisation d’un même contenu sur le Web (savoir si cela à du sens est une autre question). Un des exemples le plus célèbre est sans nul doute : le Zen Garden de Molly Holzschlag.</p>
<p>Dans le monde du jeux vidéos nous avons exactement le même processus, la résolution, l’aspect graphique, la vitesse… du jeu vont différer suivant votre machine. Les concepteurs de jeux ont pris en compte ce genre de contraintes depuis longtemps.
L’arrivée des Mods dans les jeux avec Counter Strike par exemple. Le jeu vendu est souvent une démo technique avec la possibilité de faire ses propres "maps". On donne alors à la communauté des joueurs la possibilité de prendre la parole (ou le fusil ;-) il devient alors coauteur d’un jeu. Attention quand je parle de coauteur, ce n’est pas au sens on nous pouvons le comprendre dans le domaine du cinéma ou de la littérature. De plus je vous passe les problèmes juridiques que cela peut engendrer, suis-je le propriétaire de ma Map, de mon avatar, de mon aventure… ?</p>
<p>Le succès (médiatique) de Second life est un autre un très bon exemple. Des développeurs ont mis à disposition un univers et des outils aux internautes. Petit à petit, les gens ont commencé à développer de petits univers, des objets, des animations… puis un biotope s’est développé presque naturellement (je vous passe mon jugement sur l’aspect formel de Second Life;-).
L’équipe de Linden lab (les créateurs de Second life), n’a pas imposé un univers fini, elle a au contraire juste posé les bases : un espace virtuel, un langage de script et la possibilité de sauvegarder et d’échanger vos créations virtuelles (vous faisant croire que l’on peut devenir riche sur Second Life, très grande idée Marketing). Pas d’histoires pas de scénario, pas de jeux, juste un grand espace vide, une sorte de grand Légo plein de promesse.
ps : Si Second Life vous intéresse, lisez absolument le roman de Neal Stephenson : Snow Crash (le ridicule titre français est Le samouraï virtuel). Vous aurez la source d'inspiration principale des créateurs de Second Life. Vous pouvez aussi jeter un ? il sur un des précurseurs français : le deuxième monde d’Alain et Frédéric Le Diberder + Cryo (à partir de 1994).</p>
<p>Il faut bien sûr citer les systèmes de blog, les Flickr, Ebay et autres MySpace permettant à presque n’importe qui de faire son propre site web, faire sa boutique en ligne et de diffuser photos, vidéos, texte ... très rapidement, facilement et gratuitement (dans la majorité des cas). Nous pourrions continuer longtemps les exemples.</p>
<p>Nous arrivons donc à un moment ou le commanditaire désire naturellement contrôler le contenu (ce qui est normal) mais aussi le contenant de A à Z sur son site web. Le graphiste/designer voit donc son « pouvoir » se déplacer et migrer vers d’autres responsabilités.</p>
<p>ps : Une autre raison peu avouable de cette récente demande de plus grand contrôle de la part des commanditaires, est l’abus de certaines Web Agency (pas de noms ;-) durant la période de la bulle internet (avant 2000), ayant franchement escroqué de nombreux clients en sur-facturant la moindre modification dans leurs sites web après la mise en ligne. Les commanditaires étaient souvent pieds et mains liés devant les agences, car ils n'avaient pas un accès technique direct à leurs sites (les agences donnant souvent des prétextes techniques totalement faux).</p>
</div>
</body>
</html>
.x:hover{
color : "red";
}
You are almost there!
Try:
e.target.innerHTML = nextLetter(e.target.textContent)
as the final line of your event listener function (ie after, or instead of, logging the output of nextLetter() to the console).
It certainly makes the words on the page nonsense pretty fast!
var conteneur = document.querySelector('.texte2')
var textBalise = conteneur.textContent.replace(/(\S)/g,'<span class = x>$1</span>')
conteneur.innerHTML = textBalise
var $spans = document.querySelectorAll('span')
function nextLetter(ch) {
if (!ch.match(/[a-zA-ZäöüßÄÖÜ]/i)) return ch;
else if (ch === 'Z') return 'A';
else if (ch === 'z') return 'A';
return String.fromCharCode(ch.charCodeAt(0) + 1);
}
for (var $span of $spans) {
$span.addEventListener('mousemove',(e) => {
console.log(e.target)
console.log(nextLetter(e.target.textContent))
e.target.innerHTML = nextLetter(e.target.textContent)
});
}
<div class ="texte2">
<p>Avec l’arrivée du numérique, on doit visionner les documents sur des machines et des écrans différents. Cette différence de support de visualisation est déjà bien connue avec le cinéma. En effet visionner un film en salle ou chez vous est totalement différent. Mais avec l’intermédiaire technique que sont nos ordinateurs, les différences se font encore plus importantes, différence de résolution, du nombre de couleur, de taille, de vitesse d’affichage… Nous avons un codage de l’information puis un décodage avec toutes les variations que cela peut entraîner.</p>
<p>L’arrivée du langage HTML, qui est qu’un langage de description de page. Ce langage donne des indications au navigateur, qui va lui-même interpréter ces pages afin de les afficher au mieux sur votre machine. Suivant votre navigateur, votre système d’exploitation, votre vitesse de connexion, votre écran, vos polices de caractères installées… la formalisation de la page peut être très différente (codage/décodage).</p>
<p>C’est la première fois dans l’Histoire (graphique) que le graphiste/typographe perd le contrôle du choix de la police de caractères. En effet en Html, c’est l’utilisateur final qui choisi sa police de caractère et sa taille dans les préférences de son navigateur.</p>
<p>L’arrivée des CSS a aussi précipité les choses. Dorénavant la forme est totalement séparée du contenu. Il est techniquement très facile de changer la formalisation d’un même contenu sur le Web (savoir si cela à du sens est une autre question). Un des exemples le plus célèbre est sans nul doute : le Zen Garden de Molly Holzschlag.</p>
<p>Dans le monde du jeux vidéos nous avons exactement le même processus, la résolution, l’aspect graphique, la vitesse… du jeu vont différer suivant votre machine. Les concepteurs de jeux ont pris en compte ce genre de contraintes depuis longtemps.
L’arrivée des Mods dans les jeux avec Counter Strike par exemple. Le jeu vendu est souvent une démo technique avec la possibilité de faire ses propres "maps". On donne alors à la communauté des joueurs la possibilité de prendre la parole (ou le fusil ;-) il devient alors coauteur d’un jeu. Attention quand je parle de coauteur, ce n’est pas au sens on nous pouvons le comprendre dans le domaine du cinéma ou de la littérature. De plus je vous passe les problèmes juridiques que cela peut engendrer, suis-je le propriétaire de ma Map, de mon avatar, de mon aventure… ?</p>
<p>Le succès (médiatique) de Second life est un autre un très bon exemple. Des développeurs ont mis à disposition un univers et des outils aux internautes. Petit à petit, les gens ont commencé à développer de petits univers, des objets, des animations… puis un biotope s’est développé presque naturellement (je vous passe mon jugement sur l’aspect formel de Second Life;-).
L’équipe de Linden lab (les créateurs de Second life), n’a pas imposé un univers fini, elle a au contraire juste posé les bases : un espace virtuel, un langage de script et la possibilité de sauvegarder et d’échanger vos créations virtuelles (vous faisant croire que l’on peut devenir riche sur Second Life, très grande idée Marketing). Pas d’histoires pas de scénario, pas de jeux, juste un grand espace vide, une sorte de grand Légo plein de promesse.
ps : Si Second Life vous intéresse, lisez absolument le roman de Neal Stephenson : Snow Crash (le ridicule titre français est Le samouraï virtuel). Vous aurez la source d'inspiration principale des créateurs de Second Life. Vous pouvez aussi jeter un ? il sur un des précurseurs français : le deuxième monde d’Alain et Frédéric Le Diberder + Cryo (à partir de 1994).</p>
<p>Il faut bien sûr citer les systèmes de blog, les Flickr, Ebay et autres MySpace permettant à presque n’importe qui de faire son propre site web, faire sa boutique en ligne et de diffuser photos, vidéos, texte ... très rapidement, facilement et gratuitement (dans la majorité des cas). Nous pourrions continuer longtemps les exemples.</p>
<p>Nous arrivons donc à un moment ou le commanditaire désire naturellement contrôler le contenu (ce qui est normal) mais aussi le contenant de A à Z sur son site web. Le graphiste/designer voit donc son « pouvoir » se déplacer et migrer vers d’autres responsabilités.</p>
<p>ps : Une autre raison peu avouable de cette récente demande de plus grand contrôle de la part des commanditaires, est l’abus de certaines Web Agency (pas de noms ;-) durant la période de la bulle internet (avant 2000), ayant franchement escroqué de nombreux clients en sur-facturant la moindre modification dans leurs sites web après la mise en ligne. Les commanditaires étaient souvent pieds et mains liés devant les agences, car ils n'avaient pas un accès technique direct à leurs sites (les agences donnant souvent des prétextes techniques totalement faux).</p>
</div>
Firstly i would say sorry because my english isn't so good but i will try my best.
So i will explain you my problem, i would like to show all my divs when the users click on a button. It's really complicate for me becase there is a lot of id. It's like a drop menu.
My code :
$("#content_caract_1").hide();
$("#content_caract_2").hide();
$("#content_caract_3").hide();
$("#content_caract_4").hide();
$('#btnd').click(function() { // Au clic sur un élément
$(".forbutton").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1').click(function() { // Au clic sur un élément
$("#content_caract_1").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis').click(function() { // Au clic sur un élément
$("#content_caract_1bis").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis2').click(function() { // Au clic sur un élément
$("#content_caract_1bis2").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis3').click(function() { // Au clic sur un élément
$("#content_caract_1bis3").toggle(400); // chache ou affiche a une vitesse constante (400)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnp" value="Tout plié">
<input type="button" id="btnd" value="Tout déplié">
<div id="caract1">
<h2>Etape 1 : Les enjeux et le parcours</h2>
</div>
<div class="forbutton">
<div id="content_caract_1">
<p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis
ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>
<div id="caract1bis">
1.1 Enjeux du programme Appolo</br>
</div>
<div id="content_caract_1bis">
<p>test</p>
</div>
<div id="caract1bis2">
1.2 Retour d'experience</br>
</div>
<div id="content_caract_1bis2">
<p>test</p>
</div>
<div id="caract1bis3">
1.3 Votre parcours
</div>
<div id="content_caract_1bis3">
<p>test</p>
</div>
</div>
</div>
There is 4 block like this, i would like to click on the button et show all the things inside the block.
Thanks to you had read me ! If you need more precision, im here to answer.
Thanks
Nico
You could assign a class to everything you need to be "toggable"
<div class="toggable">
one
</div>
<div class="toggable">
two
</div>
<button id="hide-stuff">
toggle
</button>
Then catch the all in one call like this
$('#hide-stuff').click(function() {
$('.toggable').toggle();
})
You are toggling your parent div on button click and hiding all its children on page load. Just toggle parent div on page load.
<script>
$(".forbutton").hide();
//$("#content_caract_1").hide();
//$("#content_caract_2").hide();
//$("#content_caract_3").hide();
//$("#content_caract_4").hide();
$('#btnd').click( function() { // Au clic sur un élément
$(".forbutton").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1').click( function() { // Au clic sur un élément
$("#content_caract_1").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1bis').click( function() { // Au clic sur un élément
$("#content_caract_1bis").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1bis2').click( function() { // Au clic sur un élément
$("#content_caract_1bis2").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1bis3').click( function() { // Au clic sur un élément
$("#content_caract_1bis3").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$("#content_caract_1").find("div").hide();
$('#btnp').click( function() { // Au clic sur un élément
$("#content_caract_1").find("div").show();// chache ou affiche a une vitesse constante (400)
});
$('#btnd').click( function() { // Au clic sur un élément
$("#content_caract_1").find("div").hide();// chache ou affiche a une vitesse constante (400)
});
I have my string like this :
[[{"en":"Search\r\n","fr":"Chercher","it":"Cercare"}],[{"en":"MORE INFORMATION:","fr":"PLUS D'INFORAMTION:","it":"Informazioni:"}],[{"en":"Why choose us ?","fr":"Pourquoi nous choisir ?","it":"Perché scegliere noi?"}],[{"en":"Here are the main values that will lead you to choose ELGATEK for your IT project:","fr":"Voici les principales valeurs qui vous amèneront à choisir ELGATEK pour votre projet Informatique :","it":"I valori chiave che portano a scegliere ELGATEK per il vostro progetto IT:"}],[{"en":"CREATIVITY & INNOVATION","fr":"CRÉATIVITÉ & INNOVATION","it":"Creatività e Innovazione"}]
I want to replace all occurrence this part string ],[ with comma.
I tried str.replace('],[',',') but it works only on the first occurrence.
Please help.
Another way to achieve that :
let s = "[[{\"en\":\"Search\\r\\n\",\"fr\":\"Chercher\",\"it\":\"Cercare\"}],[{\"en\":\"MORE INFORMATION:\",\"fr\":\"PLUS D'INFORAMTION:\",\"it\":\"Informazioni:\"}],[{\"en\":\"Why choose us ?\",\"fr\":\"Pourquoi nous choisir ?\",\"it\":\"Perché scegliere noi?\"}],[{\"en\":\"Here are the main values that will lead you to choose ELGATEK for your IT project:\",\"fr\":\"Voici les principales valeurs qui vous amèneront à choisir ELGATEK pour votre projet Informatique :\",\"it\":\"I valori chiave che portano a scegliere ELGATEK per il vostro progetto IT:\"}],[{\"en\":\"CREATIVITY & INNOVATION\",\"fr\":\"CRÉATIVITÉ & INNOVATION\",\"it\":\"Creatività e Innovazione\"}]]\n";
var result = s.split('],[').join(',');
You try:
str.replace(/],\[/g, ',')
Might be easier to just use JSON.parse, then map the array. You can still stringify it if you really need it as a string, however I suppose you want to get an array of objects anyway.
let s = "[[{\"en\":\"Search\\r\\n\",\"fr\":\"Chercher\",\"it\":\"Cercare\"}],[{\"en\":\"MORE INFORMATION:\",\"fr\":\"PLUS D'INFORAMTION:\",\"it\":\"Informazioni:\"}],[{\"en\":\"Why choose us ?\",\"fr\":\"Pourquoi nous choisir ?\",\"it\":\"Perché scegliere noi?\"}],[{\"en\":\"Here are the main values that will lead you to choose ELGATEK for your IT project:\",\"fr\":\"Voici les principales valeurs qui vous amèneront à choisir ELGATEK pour votre projet Informatique :\",\"it\":\"I valori chiave che portano a scegliere ELGATEK per il vostro progetto IT:\"}],[{\"en\":\"CREATIVITY & INNOVATION\",\"fr\":\"CRÉATIVITÉ & INNOVATION\",\"it\":\"Creatività e Innovazione\"}]]\n";
let p = JSON.parse(s).map(e => e[0]);
console.log(p);
// if you really need it as a string:
console.log(JSON.stringify(p));
your string should replace like this:
var str = '[[{"en":"Search\r\n","fr":"Chercher","it":"Cercare"}],[{"en":"MORE INFORMATION:","fr":"PLUS D\'INFORAMTION:","it":"Informazioni:"}],[{"en":"Why choose us ?","fr":"Pourquoi nous choisir ?","it":"Perché scegliere noi?"}],[{"en":"Here are the main values that will lead you to choose ELGATEK for your IT project:","fr":"Voici les principales valeurs qui vous amèneront à choisir ELGATEK pour votre projet Informatique :","it":"I valori chiave che portano a scegliere ELGATEK per il vostro progetto IT:"}],[{"en":"CREATIVITY & INNOVATION","fr":"CRÉATIVITÉ & INNOVATION","it":"Creatività e Innovazione"}]]';
console.log(str.replace(/\[\{/g, '{').replace(/\}\]/g, '}'));
Problem: After I input a name and hit enter, the hash changes to 'pag2', showing different content. I click the red link that goes to other website and, once I am on that website, I go back via back button in the browser. It still is www.luisalmerich.com#pag2, but shows the content from the empty location hash (the one you see entering directly).
If I have explained it badly:
www.luisalmerich.com -> I input the text and hit enter -> www.luisalmerich.com/#pag2 -> www.siroppe.com (red link on #pag2) -> Back button on browser -> www.luisalmerich.com/#pag2 but with the content from www.luisalmerich.com
This is the web: http://www.luisalmerich.com/
My code isn't anything weird. Here is all the JavaScript the website has (it's probably causing the problem):
$(document).ready(function () {
$('#input1').keypress(function (e) {
if(e.which == 13){
location.hash="pag2";
}
});
});
$(window).on('hashchange', function() {
if (location.hash == "#pag2") {
$('#pag1').css("display", "none");
$('#pag2').css("display", "block");
$('#pag3').css("display", "none");
} else if (location.hash == "#pag3") {
$('#pag1').css("display", "none");
$('#pag2').css("display", "none");
$('#pag3').css("display", "block");
} else {
$('#pag1').css("display", "block");
$('#pag2').css("display", "none");
$('#pag3').css("display", "none");
}
});
And here is the important html
<ul id="lista">
<li id="pag1">
<label id="label1" for="input1">
Hola, soy Luis.<br/>
Bienvenido a mi web personal.<br/>
Antes de nada,<br/>
¿podrías indicarme tu nombre?<br/>
</label>
<input type='text' id="input1" autofocus autocomplete='off'/>
</li>
<li id="pag2">
<label id="label2">
<span id='nombre'>Buenos días X.</span>
Me llamo Luis Almerich de Haro. Además de trabajar como creativo en la agencia <a href='http://siroppe.com/'>Siroppe</a>, estudio Publicidad y Relaciones Públicas en la universidad CEU de Valencia.</br>
Nací hace 21 años en un pequeño pueblo de la costa gaditana y, desde que era un niño, me ha fascinado el mundo de la publicidad. También tengo otras pasiones como la tecnología, música, lectura, deporte y arte.</br>
Me defino como una persona muy curiosa. Me encanta aprender cosas nuevas y, al igual que esta web, soy un lienzo en blanco en el que queda mucho por completar.</br>
¿Te interesaría saber algo más sobre mí?</br>
</label>
</li>
<li id="pag3">
<label id="label3">Voy a hablar un poco sobre mis cualidades. Tengo una actitud positiva hacia cualquier trabajo y gran facilidad para comunicarme y relacionarme con mis compañeros. Confianza en el trabajo, adaptabilidad dentro del entorno laboral y en el trabajo en equipo, auto-motivación y pasión en el entorno laboral.</br>También he participado en diversos voluntariados:<ul><li>Organización del festival de publicidad la Lluna 2014, a cargo de CSG Servicios.</li><li>Organización del cóctel de navidad del Colegio Publicitario 2014.</li><li>Miembro activo del Observatorio Beyond The Line desde Septiembre del 2014.</li><li>Colaborador de la marca Maru Cruz.</li></ul></br>Di mi gran paso al mundo laboral trabajando para <a href='http://www.estudihac.com/'>Estudi{H}ac</a> como New Business and Research.</p><p>Soy proactivo, me gusta participar en concursos, eventos y actividades. Durante el curso 2014/2015 participé en el concurso anual de publicidad Naranja Below, donde obtuve el segundo puesto. También participé en NASA Space Apps Challenge 2015, donde obtuve una mención especial por la mejor presentación y manera de vender un proyecto.</label>
</li>
</ul>
Right now I'm not using pag3 because of this problem. Also, I know about the ASCII problems, I will fix them as soon as I can :)
As you can see, nothing special. What am I doing wrong? I just want to show the content of pag2 even when the user is returning from other web.
The $(window).on('hashchange' event is not actually firing when you come back from another site. The hash it's just there, since the beginning.
You will need to check for the hash in document.ready:
$( document ).ready(function() {
if(window.location.hash) {
// Fragment exists, do your staff to use it
}
);
I have following data in JSON format and I want to parse in in JavaScript.
{"id":"897868990272958","posts":{"data":[{"id":"897868990272958_965738636819326","message":"As you are now aware, Federal elections have to be financed by personal donations only. To support my campaign, there is still tickets for my cocktail of Aug.27. at Balmoral's Community center. A 75% tax credit will be given for the net value of the ticket after expenses (+/- 33,75$ back into your pockets).\n\nComme vous le savez, les élections fédérales ne sont financées que par des dons personnels. Afin d'encourager ma campagne, il reste toujours des billets pour le cocktail du 27 août au centre communautaire de Balmoral. Un crédit d'impôt de 75% vous sera retourné sur la valeur net du billet après dépenses (+/- 33,75$ de retour dans vos poches).\n\nTo reserve tickets/pour réserver des billets: 753-6121.","comments":{"data":[{"id":"965738636819326_966081753451681","message":"je t'encourage mon rene mes indisponible ce soir"}],"paging":{"cursors":{"after":"MQ==","before":"MQ=="}}}},{"id":"897868990272958_965083470218176","message":"Hier, Haut-Madawaska !\n\nVisite d'entreprises et quelques poignées de mains à Clair et Baker Brook. Une visite éclaire à Saint-Hilaire et Edmundston puis, en soirée, rencontre avec le conseil municipal du Lac Baker. Le Haut-Madawaska est un exemple d'entrepreneurship et d'esprit d'initiative. Le chômage y est à zéro et on manque de travailleurs. Pas besoin d'envier la Beauce. À preuve, cette Coopérative qui vient de naitre à Clair et dont l'objectif ultime est de créer de l'emploi à partir de nos ressources à portée de main, et de miser sur la transformation. Bravo à tous ces convaincus et bénévoles qui ne jurent que par le mouvement coopératif et l'esprit communautaire.\n\nBravo aussi au conseil municipal et au maire suppléant du Lac Baker pour leur dévouement et l'énergie qu'ils mettent à protéger et développer ce bijoux de village.\n\nÀ entendre les gens que nous croisons, dans la rue ou dans les usines, nous recevons une oreille très attentive au Plan des libéraux, relativement à la classe moyenne. Il ne fait aucun doute, le vent tourne !"},{"id":"897868990272958_962429560483567","message":"Venez me rencontrer pour un cocktail !!!\nPour réserver votre billet, communiquez avec nous au quartier général libéral au 753-6121 (15 rue water, Campbellton NB)\n****************************************\nCome and meet me for a cocktail !!!\nTo reserve your tickets, please contact us at the liberal campaign office at 753-6121 (15 Water street, Campbellton NB)"},{"id":"897868990272958_961763833883473","message":"Hier, 18 août, visite de deux conseils municipaux coup sur coup !\n\nD'abord Balmoral. Comme d'autres municipalités de taille équivalente que j'ai déjà rencontrées, un conseil maitrisant ses dossiers avec des projets responsables et raisonnables à portée de réalisation. Il ne manque que la collaboration du fédéral qui n'est que trop absent. Bravo pour ce dynamisme.\n\nEnsuite Dalhousie. Comment ne pas lever son chapeau au maire Tremblay et ses conseillers et conseillères. Ils se battent pour notre petite ville du Restigouche-Est qui a subi des pertes de revenus «drastiques» suivant la fermeture du moulin et celle du plan thermique d'ÉNB. They are facing big challenges and they will have difficult decisions to take. We know the town's council will take those decisions in the best interest of it's community in mind. I will be there with an attentive ear to support their projets."},{"id":"897868990272958_961114093948447","message":"Aujourd'hui, Saint-Léonard au Rendez-vous des artistes !\n\nGrosse chaleur d'été, de beaux tableaux, de belles sculptures, des artistes extraordinaires et des gens qui nous laissent toujours entendre que... le vent tourne ! Je suis revenu à la maison avec ce tableau de circonstance en cette fin de semaine du 15 août. Merci à l'artiste-peintre Péruse. Surtout, toutes nos félicitations aux bénévoles qui ont encore fait un succès de ce rendez-vous des artistes.\n\nWarm day at «Le rendez-vous des artistes\". We saw beautiful paintings, sculpturs, and talked with interesting artists. And how pleasant it was to meet people. They surely let us know that the tide is turning ! I came back home with this beautiful painting right on the point for the ending weekend of the Acadian day. Thanks to artist-painter Péruse. Also, congratulations to all volunteers that made this artists gathering a success."}],"paging":{"previous":"https://graph.facebook.com/v2.4/897868990272958/posts?limit=5&fields=comments.limit%2815%29%7Bcomments%7Bmessage%7D,message%7D,message&since=1440606601&__paging_token=enc_AdD9KfoIkGsvwvKGKPHUvyEPbhuF2RoK63BKHTPw7tovNNMLZAZApH668RXKwpdMnnp7D6psZAc7wZAh0DlYIFoNPsjXjzfML0qyh30Oasasv9pyZAAZDZD&__previous=1","next":"https://graph.facebook.com/v2.4/897868990272958/posts?limit=5&fields=comments.limit%2815%29%7Bcomments%7Bmessage%7D,message%7D,message&until=1439765409&__paging_token=enc_AdDayGW6NPPTZA7gGT2HgRGZAVqinlc7ijLdPwYbZBexBpuBejfIzGdM42uW1GbO8epju5j8dDNv8qJ1lY8SMLZBZBQ3J0cIywdzQclw8KmqXv8HWlgZDZD"}}}
When I use the console of Google Chrome to do that it gives me an error. I want to write following lines:
var json = MY_DATA;
JSON.parse(json);
But when I want to assign my data to json the console gives me following error
Uncaught SyntaxError: Unexpected identifier(…)
What is the problem?
It looks like your JSON is already parsed to an object. You then try to parse it again and it is confused.
This is a pretty common mistake.
Some functionalities in jQuery automatically parse JSON and don't need to be explicitly told to.
#Adosi has already answered this correctly but I was adding an example so I'll include it anyway as it's too long for a comment. Add this to your code and open up your browser's console.
console.clear();
// your original data
var json = MY_DATA;
console.info("var json is a", typeof json);
console.log('json.id:', json.id);
// when json is stored as a string, it needs to be parsed.
// let's convert it back into a string and see what happens
var json_needing_parsing = JSON.stringify(json)
console.info("var json_needing_parsing is a", typeof json_needing_parsing);
console.log('json_needing_parsing.id:', json_needing_parsing.id); //undefined
// That didn't work. Let's parse it.
var json_parsed = JSON.parse(json_needing_parsing);
console.info("var json_parsed is a", typeof json_parsed);
console.log("json_parsed.id:", json_parsed.id);
Here it is in action. http://jsfiddle.net/qn9xkt7c/ (because the Stack Snippet editor was cross at me for the giant json object)