javascript - Bootstrap template - Change portfolio text -


ok downloaded bootstrap template - freelancer: https://blackrockdigital.github.io/startbootstrap-freelancer/

i changed stuff main code still there. how page looks: enter image description here when click on of 3 cards (html or php or android) displays picture , title ok, but description of course wrong, html text. enter image description here

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 tried adding @ popup:

    // popup initialization var popup = new popup(); if(popup.title=="android"){   popup.setcontent(androidtext);  }; 

this did not work.

how set different descriptions every popup ?

this full html:

    <!doctype html> <html>  <head>   <title>team logic education center</title>    <!-- support 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 , 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 , js -->   <link rel="stylesheet" href="css/course.css">   <script src="js/coursebox.js"></script>    <!-- contact css , js -->   <!-- <link href="css/contact.css" rel="stylesheet">   <script src="js/contact.js"></script> -->    <!-- modal css , js -->   <link href="css/modal.css" rel="stylesheet">   <script src="js/modal.js"></script>    <!-- popup css , 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 modal) --> <div id="modal">   <!-- content inserted via js --> </div>  <div class="content">    <!-- in-page link 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 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 section -->   <a class="inlink" id="onama"></a>    <!-- 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 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&euro;</td>           <td>90 min / 1 mesec</td>         </tr>         <tr>           <td>php</td>           <td>100&euro;</td>           <td>90 min / 1 mesec</td>         </tr>         <tr>           <td>android</td>           <td>150&euro;</td>           <td>90 min / 1 mesec</td>         </tr>       </table>     </p>   </div>    <!-- in-page link 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>       <a href="https://www.facebook.com/teamlogiccomputers/"> facebook </a>&nbsp; | &nbsp; <a href="https://www.linkedin.com/in/nemanja-jovanovic-1a769b143"> linkedin </a>&nbsp; | &nbsp; <a href="skype:jovanovic.108?userinfo"> skype </a><br>       © 2017 teamlogic. sva prava zadržana.      </footer>   </div>  </div>  </body>  <script>  // header initialization (using data.js) var header = new header("header"); for(var = 0; < 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 = 0; < 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(); });  // 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 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 = "&times;";    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 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(); }); 

Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -