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: 
when click on of 3 cards (html or php or android) displays picture , title ok, but description of course wrong, 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 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€</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 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> | <a href="https://www.linkedin.com/in/nemanja-jovanovic-1a769b143"> linkedin </a> | <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 = "×"; 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
Post a Comment