Bootstrap template - Change portfolio text - javascript

Ok I downloaded this bootstrap template - Freelancer:
https://blackrockdigital.github.io/startbootstrap-freelancer/
I changed some stuff but the main code is still there. This is how the page looks:
When you click on any of the three cards (HTML or PHP or Android) it displays the picture and title ok, but the description of the course is wrong, it is always the html text.
I tried changing the:
// Popup initialization
var popup = new Popup();
popup.setContent(htmlText);
var popup2 = new Popup();
popup.setContent(phpText);
var popup3 = new Popup();
popup.setContent(androidText);
var modal = new Modal("modal", popup);
var modal2 = new Modal("modal", popup2);
var modal3 = new Modal("modal", popup3);
I also tried adding this at the Popup:
// Popup initialization
var popup = new Popup();
if(popup.title=="Android"){
popup.setContent(androidText);
};
This did not work.
How do I set different descriptions for every popup ?
This is the full html:
<!DOCTYPE html>
<html>
<head>
<title>Team Logic Education Center</title>
<!-- Support for Serbian Latin -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google font: Montserrat (400, 500, 600, 700) -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">
<!-- Google font: Lato (400, 700) -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"></head>
<!-- Body CSS -->
<link href="css/body.css" rel="stylesheet">
<!-- Header CSS and JS -->
<link href="css/header.css" rel="stylesheet">
<script src="js/header.js"></script>
<!-- Content CSS -->
<link href="css/content.css" rel="stylesheet">
<!-- Section CSS -->
<link href="css/section.css" rel="stylesheet">
<!-- Course CSS and JS -->
<link rel="stylesheet" href="css/course.css">
<script src="js/coursebox.js"></script>
<!-- Contact CSS and JS -->
<!-- <link href="css/contact.css" rel="stylesheet">
<script src="js/contact.js"></script> -->
<!-- Modal CSS and JS -->
<link href="css/modal.css" rel="stylesheet">
<script src="js/modal.js"></script>
<!-- Popup CSS and JS -->
<link href="css/popup.css" rel="stylesheet">
<script src="js/popup.js"></script>
<!-- Data -->
<script src="js/data.js"></script>
</head>
<body>
<!-- Header -->
<div id="header">
<!-- Content inserted via JS -->
</div>
<!-- Popup window (which is modal) -->
<div id="modal">
<!-- Content inserted via JS -->
</div>
<div class="content">
<!-- In-page link for logo section -->
<a class="inlink" id="pocetna"></a>
<!-- Logo section -->
<div class="section green">
<img class="logo" src="Images/TL.png">
<h1>Team Logic Education Center</h1>
</div>
<!-- In-page link for course section -->
<a class="inlink" id="kursevi"></a>
<!-- Course section -->
<div class="section white">
<h1>Kursevi</h1>
<hr>
<div id="courseBox">
<!-- Content inserted via JS -->
</div>
</div>
<!-- In-page link for about section -->
<a class="inlink" id="onama"></a>
<!-- About section -->
<div class="section green">
<h1>O Nama</h1>
<hr>
<p id="content" class="columns" style="max-width: 600px; margin: auto">
<!-- Content inserted via JS -->
</p>
</div>
<!-- In-page link for prices section -->
<a class="inlink" id="cenovnik"></a>
<!-- Prices section -->
<div class="section bluePrice">
<h1>Cenovnik</h1>
<hr>
<p id="contentCenovnik" class="columns" style="max-width: 600px; margin: auto">
<table align="center" style="font-family: Montserrat;">
<tr style="color:white; background-color: #17222c;">
<td>Kurs</td>
<td>Cena</td>
<td>Vreme trajanja</td>
</tr>
<tr>
<td>HTML + CSS + JS </td>
<td>100€</td>
<td>90 min / 1 mesec</td>
</tr>
<tr>
<td>PHP</td>
<td>100€</td>
<td>90 min / 1 mesec</td>
</tr>
<tr>
<td>Android</td>
<td>150€</td>
<td>90 min / 1 mesec</td>
</tr>
</table>
</p>
</div>
<!-- In-page link for contact section -->
<a class="inlink" id="kontakt"></a>
<!-- Contact section -->
<div class="section white">
<h1>Kontakt</h1>
<hr>
<div style="font-family: Lato; font-size: 20px; color: #2C3E50; max-width: 600px; margin: auto">
<div style="float:left;"> <img src="Images/MSG.png" style="vertical-align: middle;"> <span style="vertical-align: middle;"> email#blablac.com </span> </div>
<div style="float:right;"><img src="Images/MOB.png" style="vertical-align: middle;"> <span style="vertical-align: middle;"> +381 (0)63 44 21 56 </span> </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="map" style="width:100%;height:400px">
</div>
<!-- Information section -->
<!-- <div class="section lightBlue">
</div> -->
<!-- Footer section -->
<div class="section darkBlue">
<footer>
Facebook | Linkedin | Skype <br>
© 2017 TeamLogic. Sva prava zadržana.
</footer>
</div>
</div>
</body>
<script>
// Header initialization (using data.js)
var header = new Header("header");
for(var i = 0; i < links.length; i++) {
header.addLink(
links[i].text,
links[i].href,
links[i].className
);
}
// Popup initialization
var popup = new Popup();
popup.setContent(htmlText);
// var popup2 = new Popup();
// popup.setContent(lorem);
//
// var popup3 = new Popup();
// popup.setContent(phpText);
var modal = new Modal("modal", popup);
//
// var modal2 = new Modal("modal", popup2);
// var modal3 = new Modal("modal", popup3);
// Course box initialization (using data.js)
var courseBox = new CourseBox("courseBox");
for(var i = 0; i < courseItems.length; i++) {
courseBox.addItem(
courseItems[i].text,
courseItems[i].color
);
}
courseBox.setCallback(function (text, color) {
popup.setTitle(text);
popup.setCaption(text);
popup.setCaptionBgColor(color);
modal.open();
});
// About section initialization (using data.js)
var content = document.getElementById("content");
content.innerHTML = lorem;
// Prices section initialization (using data.js)
// var contentCenovnik = document.getElementById("contentCenovnik");
// contentCenovnik.innerHTML = cene;
// Google map
function myMap() {
var myCenter = new google.maps.LatLng(43.332859, 21.908850);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 15};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</body>
</html>
This is the popup.js :
function Popup() {
var self = this;
self.callback = null;
self.setTitle = function (title) {
self.popupTitle.innerHTML = title;
}
self.setCaption = function (caption) {
self.imgBoxCap.innerHTML = caption;
}
self.setCaptionBgColor = function (bgColor) {
self.imgBoxCap.style.backgroundColor = bgColor;
}
self.setContent = function (content) {
self.popupContent.innerHTML = content;
}
self.open = function() {
self.container.className = "popup";
}
self.close = function() {
self.container.className = "popup zoomOut";
}
self.onClose = function() {
if (self.callback != null) {
self.callback();
}
}
self.setCallback = function(callback) {
self.callback = callback;
}
self.crossItem = document.createElement("div");
self.crossItem.className = "cross";
self.crossItem.addEventListener("click", self.onClose);
self.crossItem.innerHTML = "×";
self.crossBox = document.createElement("div");
self.crossBox.className = "crossBox";
self.crossBox.appendChild(self.crossItem);
self.popupTitle = document.createElement("div");
self.bar = document.createElement("div");
self.bar.className = "bar";
self.bar.appendChild(self.popupTitle);
self.bar.appendChild(self.crossBox);
self.imgBoxCap = document.createElement("div");
self.imgBoxCap.className = "imgBoxCap";
self.imgBox = document.createElement("div");
self.imgBox.className = "imgBox";
self.imgBox.appendChild(self.imgBoxCap);
self.popupContent = document.createElement("p");
self.middle = document.createElement("div");
self.middle.className = "middle";
self.middle.appendChild(self.imgBox);
self.middle.appendChild(self.popupContent);
self.container = document.createElement("div");
self.container.className = "popup none";
self.container.appendChild(self.bar);
self.container.appendChild(self.middle);
}
Also tried this:
// Popup initialization
var popup = new Popup();
if(CourseBox.text=="Android"){
popup.setContent(phpText);
} else {
popup.setContent(htmlText);
};
But every description is now phpText...

Fixed in:
courseBox.setCallback(function (text, color) {
console.log(text);
popup.setTitle(text);
//HERE
if (text=="HTML + CSS + JS") {
popup.setCaption(text);
popup.setContent(htmlText);
} else if(text=="PHP") {
popup.setCaption(text);
popup.setContent(phpText);
} else {
popup.setCaption(text);
popup.setContent(androidText);
};
popup.setCaptionBgColor(color);
modal.open();
});

Related

How to implement an image popup in jquery for firebase

I am in a bit trouble as I don't know how to implement the image popup in jquery for firebase. I have searched it on the internet but did not find the way how to implement it for the dynamic websites. I am having the following jquery code, can anyone help? I haven't found anything on stackoverflow also regarding this.
this is my html code
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>images</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="overrides.css">
</head>
<style>
.contentImage{
position: relative;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: 40%;
transition: .5s ease;
backface-visibility: hidden;
}
.image:hover {
opacity: 0.3;
}
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">here is the title</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Your images</li>
<li class="active">Public images</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container" id="contentHolder">
</div>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyB181Itkz9i9YjeJYLq9GbF94p8409wEfE",
authDomain: "farmyantra.firebaseapp.com",
databaseURL: "https://farmyantra.firebaseio.com",
storageBucket: "farmyantra.appspot.com",
messagingSenderId: "146534813177"
};
firebase.initializeApp(config);
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="timeline.js"></script>
</body>
</html>
and this is my js file
$(document).ready(function(){
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
var token = firebase.auth().currentUser.uid;
queryDatabase(token);
} else {
// No user is signed in.
window.location = "index.html";
}
});
});
function queryDatabase(token) {
firebase.database().ref('/Posts/').once('value').then(function(snapshot) {
var PostObject = snapshot.val();
var keys = Object.keys(PostObject);
var currentRow;
for (var i = 0; i< keys.length; i++) {
var currentObject = PostObject[keys[i]];
if (i % 4 == 0) {
currentRow = document.createElement("div");
$(currentRow).addClass("row");
$("#contentHolder").append(currentRow);
}
var col = document.createElement("div");
$(col).addClass("col-lg-3");
var image = document.createElement("img");
image.src = currentObject.url;
$(image).addClass("contentImage image hover ");
var p = document.createElement("p");
$(p).html(currentObject.caption);
$(p).addClass("contentCaption");
$(col).append(image);
$(col).append(p);
$(currentRow).append(col);
//create new row on every third entry
//col-lg-4
}
// ...
});
}
Well, your question is not clear. However let me try to answer as per my understanding. If you want to display images in a popup, add a bootstrap modal to html, and on click of each image that you are displaying from firebase database,show the bootstrap modal as explained below:
Add this modal div to your HTML:
<div id="imageModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Caption goes here..</h3>
</div>
<div class="modal-body">
<div id="image"> </div>
</div>
</div>
</div>
Now in your timeline.js file, add below code:
$('img').on('click', function () {
$('#imageModal #image').empty();
var imgUrl = $(this).attr('src');
var caption = $(this).siblings('.contentCaption').html();
$('#imageModal #image').append('<img width="100%" height="100%" src="' + imgUrl + '"></img>');
$('#imageModal .modal-title').text(caption);
$('#imageModal').modal('show');
});
Note: There is a small error in your queryDatabase function:
var image = document.createElement("img");
image = document.createElement("div")
image.src = currentObject.url;
You are creating an image element and assigning the same variable to a div element. So, the image element is overwritten by div element. Delete the second statement image = document.createElement("div") for you to display the image element.

Uncaught ReferenceError: sendcard is not defined

Ok so i keep getting this error but have no idea why... And yes i have checked other similar posts but nothing helped. Here is the error:
Uncaught ReferenceError: sendcard is not defined
onclick # kikcards.html:102
which is:
<tr><td colspan=2 align=center><img src="/Images/generate.png" width=150 onclick="sendcard()"></td></tr>
All the code i have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kik Cards | Crazii</title>
<link rel="stylesheet" type="text/css" href="/-default.css"/>
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link id="kikicon" rel="kik-icon" href="kik.png"/>
<script src="/navOpen.js"></script>
<script src="https://cdn.kik.com/kik/2.0.5/kik.js"></script>
</head>
<body class="body">
<nav id="mainNav">
<div id="logo">
<span>C</span>razii<span> </span>
</div>
<div id="mobileToggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul id="mainMenu">
<li>
Home
</li>
<li>
About
</li>
<li>
PS3 Modding
</li>
<li>
PDFs
</li>
<li>
Kik Cards
</li>
</ul>
</nav>
<div class="mainContent">
<div class="content">
<article class="Content1">
<header>
<h2> Kik Cards</h2>
</header>
<footer>
<p class="post-info"> <br> </p>
</footer>
<content>
<p>
<table>
<tr><td style="text-align:right">Title:</td><td><input id="title"></td></tr>
<tr><td style="text-align:right">Text (optional):</td><td><input id="text"></td></tr>
<tr><td style="text-align:right">Main Title:</td><td><input id="maintitle"></td></tr>
<tr><td style="text-align:right">Little Icon (URL, optional):</td><td><input id="icon"></td></tr>
<tr><td style="text-align:right">Big Picture (URL, optional):</td><td><input id="pic">(If nothing is entered here, the default icon will be used)</td></tr>
<tr><td style="text-align:right">Redirect URL (optional):</td><td><input id="redirect"></td></tr>
<tr><td style="text-align:right">Big picture? (hides the title)</td><td><input type="checkbox" id="big"></td></tr> <!-- document.getElementById(big).checked -> bool -->
<tr><td style="text-align:right">Forward-able?</td><td><input type="checkbox" id="forward" checked=true></td></tr>
<tr><td colspan=2 align=center><img src="/Images/generate.png" width=150 onclick="sendcard()"></td></tr>
</table>
</p>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p> Copyright © 2015 <a href="#" title="Crazii"><b>Crazii</b></p>
</footer>
<script>
window.onload = function()
{
if (kik.message && kik.message['url']!="") {
window.location.replace(kik.message['url']);
}
var title = "";
var maintitle = "";
var body = "";
var display = "";
var bigpicture = "";
var forwardable = "";
var redirect = "";
function precede(str, check_for) {
return str.slice(0, check_for.length) == check_for;
}
function sendcard() {
title = document.getElementById("title").value;
maintitle = document.getElementById("maintitle").value;
if (maintitle=="") {
maintitle = "Kik Cards | Crazii";
}
body = document.getElementById("text").value;
document.getElementById("kikicon").href = document.getElementById("icon").value;
display = document.getElementById("pic").value;
if (display == "") {
display = "http://crazii.herobo.com/Images/kik.png";
}
bigpicture = document.getElementById("big").checked;
if (document.getElementById("forward").checked == true) {
forwardable = false;
} else {
forwardable = true;
}
redirect = document.getElementById("redirect").value;
if (precede(redirect, "http://")) {
redirect = redirect;
} else if (precede(redirect, "https://")) {
redirect = redirect;
} else if (redirect == "") {
redirect = "http://crazii.herobo.com";
} else {
redirect = "http://"+redirect;
}
document.getElementById("webtitle").innerHTML = maintitle;
kik.send({
title: title,
text: body,
pic: display,
big: bigpicture,
noForward: forwardable,
data: {'url': redirect}
});
}
}
</script>
</body>
</html>
In advance i appreciate any help i can get, thanks!
The function sendcard() is defined within the scope of the window.onload callback, as of that it is not visible in the global scope.
To self this you cab use addEventListener.
You need the be able to find your element, e.g. by adding an id to it:
<img src="/Images/generate.png" width=150 id="sendcard">
Then in your window.onload you search for that element, and add an event listener:
document.getElementById("sendcard").addEventListener("click",sendcard, false);
You could also think of moving the sendcard definition out of the callback, but then you would pollute the global scope which should be avoided.
Try this:-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kik Cards | Crazii</title>
<link rel="stylesheet" type="text/css" href="/-default.css"/>
<link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link id="kikicon" rel="kik-icon" href="kik.png"/>
<script src="/navOpen.js"></script>
<script src="https://cdn.kik.com/kik/2.0.5/kik.js"></script>
</head>
<body class="body">
<nav id="mainNav">
<div id="logo">
<span>C</span>razii<span> </span>
</div>
<div id="mobileToggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul id="mainMenu">
<li>
Home
</li>
<li>
About
</li>
<li>
PS3 Modding
</li>
<li>
PDFs
</li>
<li>
Kik Cards
</li>
</ul>
</nav>
<div class="mainContent">
<div class="content">
<article class="Content1">
<header>
<h2> Kik Cards</h2>
</header>
<footer>
<p class="post-info"> <br> </p>
</footer>
<content>
<p>
<table>
<tr><td style="text-align:right">Title:</td><td><input id="title"></td></tr>
<tr><td style="text-align:right">Text (optional):</td><td><input id="text"></td></tr>
<tr><td style="text-align:right">Main Title:</td><td><input id="maintitle"></td></tr>
<tr><td style="text-align:right">Little Icon (URL, optional):</td><td><input id="icon"></td></tr>
<tr><td style="text-align:right">Big Picture (URL, optional):</td><td><input id="pic">(If nothing is entered here, the default icon will be used)</td></tr>
<tr><td style="text-align:right">Redirect URL (optional):</td><td><input id="redirect"></td></tr>
<tr><td style="text-align:right">Big picture? (hides the title)</td><td><input type="checkbox" id="big"></td></tr> <!-- document.getElementById(big).checked -> bool -->
<tr><td style="text-align:right">Forward-able?</td><td><input type="checkbox" id="forward" checked=true></td></tr>
<tr><td colspan=2 align=center><img src="imgh.jpg" width=150 onclick="sendcard()" /></td></tr>
</table>
</p>
</content>
</article>
</div>
</div>
<footer class="mainFooter">
<p> Copyright © 2015 <a href="#" title="Crazii"><b>Crazii</b></p>
</footer>
<script>
if (kik.message && kik.message['url']!="") {
window.location.replace(kik.message['url']);
}
var title = "";
var maintitle = "";
var body = "";
var display = "";
var bigpicture = "";
var forwardable = "";
var redirect = "";
function precede(str, check_for) {
return str.slice(0, check_for.length) == check_for;
}
function sendcard() {
alert("sdf");
title = document.getElementById("title").value;
maintitle = document.getElementById("maintitle").value;
if (maintitle=="") {
maintitle = "Kik Cards | Crazii";
}
body = document.getElementById("text").value;
document.getElementById("kikicon").href = document.getElementById("icon").value;
display = document.getElementById("pic").value;
if (display == "") {
display = "http://crazii.herobo.com/Images/kik.png";
}
bigpicture = document.getElementById("big").checked;
if (document.getElementById("forward").checked == true) {
forwardable = false;
} else {
forwardable = true;
}
redirect = document.getElementById("redirect").value;
if (precede(redirect, "http://")) {
redirect = redirect;
} else if (precede(redirect, "https://")) {
redirect = redirect;
} else if (redirect == "") {
redirect = "http://crazii.herobo.com";
} else {
redirect = "http://"+redirect;
}
document.getElementById("webtitle").innerHTML = maintitle;
kik.send({
title: title,
text: body,
pic: display,
big: bigpicture,
noForward: forwardable,
data: {'url': redirect}
});
}
</script>
</body>
</html>
Remove :- window.onload = function()
{
and end image tag

"cannot read property length of null" - Google

I am writing a simple application using Flask. I am using Google API for drawing graphs. The first page displays correctly.
But in the next pages I am getting "cannot read property length of null" error.
My Code is as shown below:
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="refresh" content="100; URL=http://127.0.0.1:5000/">
<title>Test</title>
<!-- Bootstrap Core CSS -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/bootstrap-multiselect.css" rel="stylesheet">
<link href="static/css/new.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="static/lib/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<!-- JavaScript -->
<script src="static/js/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-multiselect.js"></script>
<script src="static/js/Chart.js-master/Chart.js"></script>
</head>
<body onload = onLoading()>
<div class="container">
<div class="col-xs-12">
<div class="page-header">
<h3><b>Test</b></h3>
</div>
<div class="carousel slide" id="myCarousel">
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
<!-- /.control-box -->
<!-- Slide1 -->
<div class="carousel-inner" id="imp">
<!-- /Slide1 -->
</div><!-- /Carousel inner -->
</div><!-- /#myCarousel -->
</div><!-- /.col-xs-12 -->
</div><!-- /.container -->
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 3000
})
});
function onLoading() {
//alert("Inside");
$.get("/load",function(calldata,status) {
//console.log(calldata);
//alert(calldata.length);
var num_nodes = calldata.length;
var loop = 0;
for (i=0;i<num_nodes;i++) {
if (i%4==0) {
if (i==0) {
var divoutput = document.getElementById("imp");
var divhtml = '<div class="item active" id="c'+(i/4)+'"></div>';
divoutput.innerHTML = divoutput.innerHTML+divhtml;
alert(i);
console.log(divoutput.innerHTML);
} else {
var divoutput = document.getElementById("imp");
var divhtml = '<div class="item" id="c'+(i/4)+'"></div>';
divoutput.innerHTML = divoutput.innerHTML+divhtml;
loop = i/4;
alert(loop);
console.log(divoutput.innerHTML);
}
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Errors');
data.addColumn('number', 'Statistics');
data.addRows([
['Success', calldata[i].errors.success],
['Authorization Failure', calldata[i].errors.auth_failure],
['Feature Failure', calldata[i].errors.feature_failure],
['FSOL Failure', calldata[i].errors.fsol_failure]
]);
var options = {
title: calldata[i].node_name,
is3D: true,
backgroundColor:'#ECECEA',
};
var output = document.getElementById("c"+loop);
//alert("***"+document.getElementById("c"+loop));
var html = '<div class="col-sm-6"><div class="fff"><div class="thumbnail" id="i'+i+'"></div></div></div>';
//alert(html);
output.innerHTML = output.innerHTML + html;
var tmp = "i";
var ele_id = tmp.concat(i);
//alert(ele_id);
if (calldata[i].errors.success < calldata[i].errors.auth_failure) {
document.getElementById("i"+i).style.backgroundColor = "red";
}
google.setOnLoadCallback(drawChart(ele_id,data,options));
}
});
}
function drawChart(ele_id,data,options)
{
google.load("visualization", "1", {packages:["corechart"]});
//alert(ele_id);
//alert("draw"+document.getElementById(ele_id));
var chart = new google.visualization.PieChart(document.getElementById(ele_id));
chart.draw(data, options);
}
</script>
</body>
</html>
I use bootstrap tabs and want to display a graph on a hidden tab and I get the same error as you
When I display the graph on an active table it show's up perfectly.
So I guess there is something linked to the DOM and hidden elements nothing to do with your data

How to Get a class with Jquery and perform a function

I am currently working on a project that deals with feed from a website.
I have successufully gotten the feed, but my challenge is getting the content and title of the feed when a user click on the feed link rather than taken the user to the feed site.
I have tried using different method to get the solution, but none works.
Below is my latest code (Jquery Mobile)
(function($){
$.fn.FeedEk=function(opt){
var def={FeedUrl:'', MaxCount:5, ShowDesc:true, ShowPubDate:true, ShowFullContent:true};
if(opt){
$.extend(def,opt)
}
var idd = $(this).attr('id');
if(def.FeedUrl==null || def.FeedUrl==''){
$('#'+idd).empty();
return;
}
var pubdate;
$('#'+idd).empty().append('<div style="text-align:center; margin: auto;"><img src="loader.gif" class="loader" /></div>');
$.ajax({
url:'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+def.MaxCount+'&output=json&q='+encodeURIComponent(def.FeedUrl)+'&callback=?',
dataType:'json',
success:function(data){
$('#'+idd).empty();
$('#post').empty();
var output = '<ul data-role="listview" data-filter="true">';
$.each(data.responseData.feed.entries,function(i,entry){
var i =new Array(i);
for(j=0;j<=i;j++)
{
var id = j;
}
var title =new Array(entry.title);
var content =new Array(entry.content);
for(t=0;t<title.length;t++){
for(c=0;c<content.length;c++){$('#post').append(title[t]+'<br/>'+content[c])}
}
//while(id ==
//if(i == id
//var post = '<div><h3>'+entry.title+'</h3></div>';
//post += '<div>Post content'+entry.content+'</div>';
output += '<li>';
output += ''+entry.title+'';
/*if(def.ShowPubDate){
pubdate=new Date(feed[0].entry.publishedDate);
output += '<br/><span class="ItemDate">'+pubdate.toLocaleDateString()+'</span';
}
if(def.ShowDesc){
output += '<br/><span class="ItemDesc">'+feed[0].entry.contentSnippet+'</span>';
}*/
output += '</li>';});
console.log(data.responseData.feed.entries);
output += '</ul>';
$('#'+idd).html(output);
if($('.'+id).click() == true){
$('#post').empty();
var postTitle = title[id];
var postContent = content[id];
$('#post').append('<div><h3>'+postTitle+'</h3></div><div>'+postContent+'</div>');
}
}
})
}
})
(jQuery);
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>News on the GO!</title>
<link href="theme/news.min.css" rel="stylesheet" />
<link href="theme/jquery.mobile.structure-1.2.0.min.css" rel="stylesheet" />
<link href="theme/FeedEk.css" rel="stylesheet" type="text/css" />
<script type="application/javascript" src="js/jquery1.7.2-min.js" ></script>
<script type="application/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="application/javascript" src="js/FeedEk.js"></script>
<link href="theme/custom.css" rel="stylesheet" type="text/css" />
<script type="application/javascript" src='js/main.js'></script>
<script type="application/javascript">
$(document).ready(function() {
//latest
$("#ipaid").FeedEk({
FeedUrl : 'http://ipaidabribenaija.com/news?format=feed',
MaxCount : 7,
ShowDesc : true,
ShowPubDate:true,
ShowFullContent:true
});});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-theme="a">
<h2>Recent News</h2>
About
</div><!-- /header -->
<div class="imghome">
<img src="images/news.png" alt="news" width="300" height="200" />
</div>
<nav data-role="navbar">
<ul>
<li><a href="#latest" data-theme="a" data-transition="flip" >Local News</a></li></ul>
</nav>
<!--<div data-role="content" >
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-theme="a"></div><!-- /footer -->
</div><!-- /Page home -->
<div data-role="page" id="latest" data-title="Local News">
<div data-role="header" data-position="fixed" data-id="ipaid_header" data-theme="a">
<h2>Local News</h2>
Back
</div><!-- /header -->
<div data-role="content" >
<div id="ipaid">
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="ipaid_footer" data-theme="a">
<div data-role="navbar" data-theme="a">
<ul>
<li>Home</li>
<li>Politics</li>
<li>Sports</li>
<li>Business</li>
</ul>
</div><!-- /Footernavbar --></div><!-- /footer -->
</div><!-- /Page Latest --></body>
</html>
As far as I understood. You want to show each news feed on a separate page on your webpage, and prevent the link from opening a new window (leaving your webpage).
You could do the following, of course it needs some tuning and CSS styling, which can be done easily. The below code, prevents opening the link a new window, - using preventDefault() - it copies feed details (title, image, full article..etc) and appending them to a new page dynamically.
Each page has an auto-generated ID, in case you want to navigate between them using Swipe events or any other methods.
Working example
Code:
var pageid = 0;
$('#ipaid').on('click', 'a', function (e) {
pageid++;
e.preventDefault();
var clicked = $(this);
var root = clicked.closest('li');
var linkto = clicked.attr('href');
var title = clicked.text();
var date = clicked.parent('div').next('div').text();
var linkdiv = root.find('div.itemTitle');
var datediv = root.find('div.itemDate');
var contentdiv = root.find('div.itemContent');
var image = contentdiv.first('div').find('img').attr('src');
var article = '';
contentdiv.find('p').each(function () {
article += $(this).text();
});
var newPage = $("<div data-role=page id='page" + pageid + "'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a><h1>" + title + "</h1></div><div data-role=content><p>Date:" + date + "</p><img src='" + image + "'></div><div class='article'><p>" + article + "</p></div></div></div");
newPage.appendTo($.mobile.pageContainer);
$.mobile.changePage('#page' + pageid);
});
I think you simple need jFeed. Sample code from the jFeed site:
jQuery.getFeed(options);
options:
* url: the feed URL (required).
* data: data to be sent to the server. See jQuery.ajax data property.
* success: a function to be called if the request succeeds.
The function gets passed one argument: the JFeed object.
Example:
jQuery.getFeed({
url: 'rss.xml',
success: function(feed) {
alert(feed.title);
}
});

Sliderjs with dynamic content or images

I'm heaving a problem and can't seem to find the/an answer. I use sliderjs from sliderjs.com to, obviously, create a slider panel. The script works great with hard coded html ( elements are rendered in a niceslideing panel).
Now I want to insert those ul, li elements dynamically with javascript. The problem is dat the sliderjs isn't formating the newly inserted code right. What am I doing wrong and what should I do to correct this. Any help is appreciated. The sliding panel only works on phone device.....
If I hardcode this than it works
<div id='slider' class='swipe' style='width:150px'>
<ul>
<li style='display:block'><div>1</div></li>
<li style='display:none'><div>2</div></li>
<li style='display:none'><div>3</div></li>
<li style='display:none'><div>4</div></li>
<li style='display:none'><div>5</div></li>
</ul>
</div>
This is my full code with the javascript that isn't working
<html>
<head>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" name="viewport" />
<style type="text/css">
html{background-color:transparent;height:100%;width:100%;}
body{background-color:transparent;font-size:11pt;font-family:helvetica;}
img{border:0px;} </style>
<link rel="stylesheet" href="BTA_Blog_Leather_colors/brown/BTA_Blog_Leather_brown.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
if ($(".date").text() === "--")
$(".datecontainer").hide();
if($('.thevideo iframe').attr('src') === ""){
console.log('11');
$(".videocontainer").hide();
}
var names = "http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg,http://www.deerns.nl/gfx/image.phtml?image=/images/_images_2012_website/employees/Nederland/Martijn%20Timmer_DIE2082.jpg&width=50&height=50&type=crop,http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg";
var namesArray = names.split(",");
var item, items = [];
for (var i = 0; i < namesArray.length; i++) {
item = {};
item.name = namesArray[i];
items.push(item);
}
var main = $("<ul>");
var str = "<li style='display:block;'><div><img src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/187660_100002435611825_501947_q.jpg' /></div></li>";
for (var i = 0; i < items.length; i++) {
str += "<li style='display:none;'><div><img src='" + items[i].name + "' /></div></li></ul>";
}
main.html(str);
$('#slider').append(main);
});
</script>
</head>
<body>
<div id="container">
<div class="navbar">
<div class="titlebox">
<div class="title">Gaat Europa het redden met de Euro? en met weet ik wat nog allemaal</div>
</div><!-- end titlebox -->
</div><!-- end navbar -->
<div id="body">
<div class="header">
<div class="theimage">
<div class="imagecontainer">
<div class="image"><!-- <img src="http://www.celfoon.nl/bt-addons/testimage130x130.png" /> -->
<div class="datecontainer">
<div class="monthcontainer">
<div class="dmonth">[[DATEMONTH]]
</div> <!-- en monthcontainer -->
<div class="daycontainer">
<div class="dday">[[DATEDAY]]
</div><!-- end daycontainer -->
<div class="yearcontainer">
<div class="dyear">[[DATEYEAR]]
</div> <!-- end yearcontainer -->
</div>
</div>
</div>
</div><!-- end datecontainer -->
</div>
</div>
</div><!--end theimage -->
</div><!-- end header -->
<div class="content">
<div class="introtextcontainer">
<div class="introtext">
<div id='slider' class='swipe'>
</div>
<a href='#' onclick='slider.prev();return false;'>prev</a>
<a href='#' onclick='slider.next();return false;'>next</a>
<br><br>
</div>
</div>
<div class="fulltextcontainer">
<div class="fulltext">
[[FULLTEXT]]
</div><!--end fulltext-->
</div><!--end fulltextcontainer-->
<div class="videocontainer">
<div class="thevideo">
<iframe allowfullscreen="" frameborder="0" height="174" src="[[YOUTUBE]]" width="280"></iframe>
</div><!-- end videocontainer -->
</div><!-- end thevideo -->
</div><!-- end content -->
</div><!-- end body -->
<div id="footer">
<div class="footertextcontainer">
<div class="footertext">[[FOOTERTEXT]]
</div>
</div>
</div>
</div><!-- end container -->
<script src='swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
new Swipe(document.getElementById('slider2'));
var slider = new Swipe(document.getElementById('slider'));
var slider3 = new Swipe(document.getElementById('slider3'));
var slider4 = new Swipe(document.getElementById('slider4'));
</script>
</body>
</html>

Categories