CSS or jQuery not working inside javascript -
i working on website in header try inspire people text changing javascript. 1 of lines appear among text includes link video, supposed modal video, somehow fails load while other videos outside of javascript work fine. here video of problem.
i not sure, isn't working here. css or jquery?
<!doctype html> <html lang="en-us"> <head> <!-- load latest jquery 3.1.1 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .modal.fade.in { top: 20%; } .fade.in { opacity: 1; } .modal.fade { -webkit-transition: opacity .3s linear, top .3s ease-out; -moz-transition: opacity .3s linear, top .3s ease-out; -o-transition: opacity .3s linear, top .3s ease-out; transition: opacity .3s linear, top .3s ease-out; top: -25%; } .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .hide { display: none; } .modal { position: fixed; top: 10%; left: 50%; z-index: 1050; width: 560px; margin-left: -280px; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; outline: none; margin-top: 10px; margin-bottom: 10px; overflow-y: hidden; } .modal-header { padding: 9px 15px; border-bottom: 1px solid #eee; } .modal-header .close { margin-top: 2px; } .close { float: right; font-weight: bold; line-height: 20px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); font-size: 45px; height: 50px; cursor: pointer; } .modal-body { position: relative; max-height: 80%; overflow-y: visible; padding: 5px; margin-bottom: -4px; } .modal-body.modal-body-video iframe { height: 400px; width: 100%; } .modal-backdrop, .modal-backdrop.fade.in { opacity: 0.8; filter: alpha(opacity=80); } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000000; } .modal-header .link { white-space: normal; margin-left: 5px; } @media (max-width: 767px) { .modal.fade.in { top: 20px; } .modal { position: fixed; top: 20px; left: 20px; right: 20px; width: auto; margin: 0; } } @media (max-width: 480px) { .modal { top: 10px; left: 10px; right: 10px; } } body{ margin: 0; padding-left: 10%; padding-right: 10%; padding-top: 2%; padding-bottom: 1%; } #moto{ margin-top: -20px; font-size: 1.7vw; text-align: center; height: 5vw; opacity: 0.8; } .boxspace { overflow: hidden; } .box { float: left; position: relative; width: 16.6666%; padding-bottom: 16.6666%; } .boxinner { position: absolute; left: 2%; right: 2%; top: 2%; bottom: 2%; overflow: hidden; border: thin solid #969696; border-radius: 4%; } .boxinner .titlebox { position: absolute; /*no top border*/ bottom: 0; left: 0; right: 0; /*we push square down*/ margin-bottom: -20%; background: #000000; background: rgba(0, 0, 0, 0.8); color: #ffffff; padding-top: 2%; padding-bottom: 2%; padding-left: 2%; padding-right: 2%; text-align: center; font-size: 1.2vw; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .boxinner .titlebox header{ color: #ffffff; font-size: 1.4vw; } .boxinner .titlebox p{ color: #ffffff; font-size: 1.0vw; } body.no-touch .boxinner:hover .titlebox, body.touch .boxinner.touchfocus .titlebox { margin-bottom: 0px; } </style> <!--video-scripts--> <script type="text/javascript"> /// <reference path="../jquery.min.js" /> //force strict mode "use strict"; /* modal video pluggin. * handles videos in mp4 using html5 native controls && youtube videos * handles modal click events */ //scope safe constructor function modalvideooptions(callbackonmodalopenclick) { if (this instanceof modalvideooptions) { this.callbackonmodalopenclick = callbackonmodalopenclick; this._videotype = undefined; //we freeze object if possible if (object.freeze) object.freeze(this.videoenum); } else { return new modalvideooptions(callbackonmodalopenclick); } } modalvideooptions.prototype = { constructor: modalvideooptions, //getters , setters videotype getvideotype : function () { return this._videotype; }, setvideotype : function (value) { if (typeof value != "number") { throw new error('invalid argument: value. argument must number.'); } var videotypeitem; //loop in enum properties for(videotypeitem in this.videoenum) { var enumvalue = this.videoenum[videotypeitem]; if (value == enumvalue) { this._videotype = enumvalue; } } if (this._videotype == undefined) throw new error('invalid argument: value. argument must in range of videoenum.'); }, //enum videoenum : { mp4: 0, youtube: 1 } }; /** * javascript function match (and return) video id * of valid youtube url, given input string. * @author: stephan schmitz <eyecatchup@gmail.com> * @url: http://stackoverflow.com/a/10315969/624466 */ function ytvidid(url) { var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\s+)?$/; return (url.match(p)) ? regexp.$1 : false; } (function ($) { function showmodal(options) { //mask doesn't exist if ($('#mask').length == 0) { //we create $('body').prepend("<div id='mask' class='modal-backdrop fade in'></div>"); } var dialogcontainer = $('#dialog-container-video'); //popup not created yet if (dialogcontainer.length == 0) { //we create var dialogcontainer = $("<div id='dialog-container-video' class='modal fade in'></div>"); $('body').prepend(dialogcontainer); } var dialogcontent; if (options.getvideotype() == options.videoenum.mp4) dialogcontent = "<div id='dialog-content' class='modal-body'><video width='100%' src='" + options.link + "' controls></video></div>"; else if (options.getvideotype() == options.videoenum.youtube) dialogcontent = "<div id='dialog-content' class='modal-body modal-body-video'><iframe src='https://www.youtube.com/embed/" + options.youtubeid + "' frameborder='0' allowfullscreen></iframe></div>"; if(dialogcontent) dialogcontainer.append(dialogcontent); //transition effect $('#mask').show(); $("#dialog-container-video").show(); //modal must visible, hide scrollbars $('body').css('overflow', 'hidden'); //add here transition effect hide modal window var closepopup = function () { $('#mask').hide(); $('#dialog-container-video').hide(); //we unbind @ closing of modal window $("#mask").unbind("click", closepopup); $('#dialog-container-video a.close').unbind("click", closepopup); $(document).unbind("keyup", esckeyclosepopup); $('#dialog-content').remove(); //we display scrollbars again if needed $('body').css('overflow', 'auto'); }; $('#mask').on("click", closepopup); $('#dialog-container-video a.close').on("click", closepopup); var esckeyclosepopup = function (e) { //escape key if (e.keycode == 27) { closepopup(); } }; $(document).keyup(esckeyclosepopup); } $.fn.modalvideo = function (options) { if ((options instanceof modalvideooptions) == false) throw new error('invalid argument: options. argument must instance of modalvideooptions.'); //force strong-typed object if (!options || $.isemptyobject(options)) { options = new modalvideooptions(); } //every link selector found $(this).each(function (i) { //get url of link var link = $(this).prop("href"); //no href property ? leave if (typeof link == "undefined") { return true; } var youtubeid = ytvidid(link); //youtube id detected if (youtubeid != false) { //console.log('youtube id : ' + youtubeid); options.setvideotype(options.videoenum.youtube); options.youtubeid = youtubeid; } //test if link ends '.mp4' else if (link.indexof('.mp4', link.length - '.mp4'.length) != -1) { options.setvideotype(options.videoenum.mp4); } //no mp4 or youtube video, continue next link else return true; options.link = typeof options.link == "undefined" ? link : options.link; //binding click event. cancel trigger('click') event. $(this).click(function (e) { e.preventdefault(); showmodal(options); //open modal event if (typeof options.callbackonmodalopenclick == "function") { options.callbackonmodalopenclick(); } }); }); } })(jquery); </script> <script type="text/javascript""> "use strict"; $(document).ready(function () { //each video has need own instance of modalvideooptions $('a[href]').each(function(){ $(this).modalvideo(new modalvideooptions()); }); }); </script> <script type="text/javascript""> var _gaq = _gaq || []; _gaq.push(['_setaccount', 'ua-36251023-1']); _gaq.push(['_setdomainname', 'jqueryscript.net']); _gaq.push(['_trackpageview']); (function() { var ga = document.createelement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(ga, s); })(); </script> </head> <body class="no-touch"> <div id="moto"></div> <script type="text/javascript"> var text = ["line 1",'line 2 , nonworking <a href="./video/test.mp4">video</a>.']; var counter = 0; var elem = document.getelementbyid("moto"); changefunction(); setinterval(changefunction, 3000); function changefunction() { var moto = text[counter++]; $(elem).fadeout('slow', function() { $(elem).html(moto); $(elem).fadein('slow'); }); if(counter >= text.length) { counter = 0; } } </script> <div class="boxspace"> <div class="box"> <div class="boxinner"> <div class="titlebox"> <header> header title </header> <a href="./video/test.mp4">video</a> </p> </div> </div> </div> </div> </body> </html>
the problem replace html in each rotation. when replace html create new dom elements, including a tag. code $(this).modalvideo(new modalvideooptions()); not apply it.
you have 2 options:
- run line in each rotation (like did snippet).
- do rotation using show/hide. mean, in first place, add "slides" in html , show/hide (or fade, never mind) them.
let me know if not clear.
<!doctype html> <html lang="en-us"> <head> <!-- load latest jquery 3.1.1 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .modal.fade.in { top: 20%; } .fade.in { opacity: 1; } .modal.fade { -webkit-transition: opacity .3s linear, top .3s ease-out; -moz-transition: opacity .3s linear, top .3s ease-out; -o-transition: opacity .3s linear, top .3s ease-out; transition: opacity .3s linear, top .3s ease-out; top: -25%; } .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; -moz-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .hide { display: none; } .modal { position: fixed; top: 10%; left: 50%; z-index: 1050; width: 560px; margin-left: -280px; background-color: #ffffff; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, 0.3); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -webkit-background-clip: padding-box; -moz-background-clip: padding-box; background-clip: padding-box; outline: none; margin-top: 10px; margin-bottom: 10px; overflow-y: hidden; } .modal-header { padding: 9px 15px; border-bottom: 1px solid #eee; } .modal-header .close { margin-top: 2px; } .close { float: right; font-weight: bold; line-height: 20px; color: #000000; text-shadow: 0 1px 0 #ffffff; opacity: 0.2; filter: alpha(opacity=20); font-size: 45px; height: 50px; cursor: pointer; } .modal-body { position: relative; max-height: 80%; overflow-y: visible; padding: 5px; margin-bottom: -4px; } .modal-body.modal-body-video iframe { height: 400px; width: 100%; } .modal-backdrop, .modal-backdrop.fade.in { opacity: 0.8; filter: alpha(opacity=80); } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000000; } .modal-header .link { white-space: normal; margin-left: 5px; } @media (max-width: 767px) { .modal.fade.in { top: 20px; } .modal { position: fixed; top: 20px; left: 20px; right: 20px; width: auto; margin: 0; } } @media (max-width: 480px) { .modal { top: 10px; left: 10px; right: 10px; } } body{ margin: 0; padding-left: 10%; padding-right: 10%; padding-top: 2%; padding-bottom: 1%; } #moto{ margin-top: -20px; font-size: 1.7vw; text-align: center; height: 5vw; opacity: 0.8; } .boxspace { overflow: hidden; } .box { float: left; position: relative; width: 16.6666%; padding-bottom: 16.6666%; } .boxinner { position: absolute; left: 2%; right: 2%; top: 2%; bottom: 2%; overflow: hidden; border: thin solid #969696; border-radius: 4%; } .boxinner .titlebox { position: absolute; /*no top border*/ bottom: 0; left: 0; right: 0; /*we push square down*/ margin-bottom: -20%; background: #000000; background: rgba(0, 0, 0, 0.8); color: #ffffff; padding-top: 2%; padding-bottom: 2%; padding-left: 2%; padding-right: 2%; text-align: center; font-size: 1.2vw; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .boxinner .titlebox header{ color: #ffffff; font-size: 1.4vw; } .boxinner .titlebox p{ color: #ffffff; font-size: 1.0vw; } body.no-touch .boxinner:hover .titlebox, body.touch .boxinner.touchfocus .titlebox { margin-bottom: 0px; } </style> <!--video-scripts--> <script type="text/javascript"> /// <reference path="../jquery.min.js" /> //force strict mode "use strict"; /* modal video pluggin. * handles videos in mp4 using html5 native controls && youtube videos * handles modal click events */ //scope safe constructor function modalvideooptions(callbackonmodalopenclick) { if (this instanceof modalvideooptions) { this.callbackonmodalopenclick = callbackonmodalopenclick; this._videotype = undefined; //we freeze object if possible if (object.freeze) object.freeze(this.videoenum); } else { return new modalvideooptions(callbackonmodalopenclick); } } modalvideooptions.prototype = { constructor: modalvideooptions, //getters , setters videotype getvideotype : function () { return this._videotype; }, setvideotype : function (value) { if (typeof value != "number") { throw new error('invalid argument: value. argument must number.'); } var videotypeitem; //loop in enum properties for(videotypeitem in this.videoenum) { var enumvalue = this.videoenum[videotypeitem]; if (value == enumvalue) { this._videotype = enumvalue; } } if (this._videotype == undefined) throw new error('invalid argument: value. argument must in range of videoenum.'); }, //enum videoenum : { mp4: 0, youtube: 1 } }; /** * javascript function match (and return) video id * of valid youtube url, given input string. * @author: stephan schmitz <eyecatchup@gmail.com> * @url: http://stackoverflow.com/a/10315969/624466 */ function ytvidid(url) { var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\s+)?$/; return (url.match(p)) ? regexp.$1 : false; } (function ($) { function showmodal(options) { //mask doesn't exist if ($('#mask').length == 0) { //we create $('body').prepend("<div id='mask' class='modal-backdrop fade in'></div>"); } var dialogcontainer = $('#dialog-container-video'); //popup not created yet if (dialogcontainer.length == 0) { //we create var dialogcontainer = $("<div id='dialog-container-video' class='modal fade in'></div>"); $('body').prepend(dialogcontainer); } var dialogcontent; if (options.getvideotype() == options.videoenum.mp4) dialogcontent = "<div id='dialog-content' class='modal-body'><video width='100%' src='" + options.link + "' controls></video></div>"; else if (options.getvideotype() == options.videoenum.youtube) dialogcontent = "<div id='dialog-content' class='modal-body modal-body-video'><iframe src='https://www.youtube.com/embed/" + options.youtubeid + "' frameborder='0' allowfullscreen></iframe></div>"; if(dialogcontent) dialogcontainer.append(dialogcontent); //transition effect $('#mask').show(); $("#dialog-container-video").show(); //modal must visible, hide scrollbars $('body').css('overflow', 'hidden'); //add here transition effect hide modal window var closepopup = function () { $('#mask').hide(); $('#dialog-container-video').hide(); //we unbind @ closing of modal window $("#mask").unbind("click", closepopup); $('#dialog-container-video a.close').unbind("click", closepopup); $(document).unbind("keyup", esckeyclosepopup); $('#dialog-content').remove(); //we display scrollbars again if needed $('body').css('overflow', 'auto'); }; $('#mask').on("click", closepopup); $('#dialog-container-video a.close').on("click", closepopup); var esckeyclosepopup = function (e) { //escape key if (e.keycode == 27) { closepopup(); } }; $(document).keyup(esckeyclosepopup); } $.fn.modalvideo = function (options) { if ((options instanceof modalvideooptions) == false) throw new error('invalid argument: options. argument must instance of modalvideooptions.'); //force strong-typed object if (!options || $.isemptyobject(options)) { options = new modalvideooptions(); } //every link selector found $(this).each(function (i) { //get url of link var link = $(this).prop("href"); //no href property ? leave if (typeof link == "undefined") { return true; } var youtubeid = ytvidid(link); //youtube id detected if (youtubeid != false) { //console.log('youtube id : ' + youtubeid); options.setvideotype(options.videoenum.youtube); options.youtubeid = youtubeid; } //test if link ends '.mp4' else if (link.indexof('.mp4', link.length - '.mp4'.length) != -1) { options.setvideotype(options.videoenum.mp4); } //no mp4 or youtube video, continue next link else return true; options.link = typeof options.link == "undefined" ? link : options.link; //binding click event. cancel trigger('click') event. $(this).click(function (e) { e.preventdefault(); showmodal(options); //open modal event if (typeof options.callbackonmodalopenclick == "function") { options.callbackonmodalopenclick(); } }); }); } })(jquery); </script> <script type="text/javascript"> "use strict"; $(document).ready(function () { //each video has need own instance of modalvideooptions $('a[href]').each(function(){ $(this).modalvideo(new modalvideooptions()); }); }); </script> </head> <body class="no-touch"> <div id="moto"></div> <script type="text/javascript"> var text = ["line 1",'line 2 , nonworking <a href="./video/test.mp4">video</a>.']; var counter = 0; var elem = document.getelementbyid("moto"); changefunction(); setinterval(changefunction, 3000); function changefunction() { var moto = text[counter++]; $(elem).fadeout('slow', function() { $(elem).html(moto); $(elem).fadein('slow'); $(elem).find('a').modalvideo(new modalvideooptions()); }); if(counter >= text.length) { counter = 0; } } </script> <div class="boxspace"> <div class="box"> <div class="boxinner"> <div class="titlebox"> <header> header title </header> <a href="./video/test.mp4">video</a> </p> </div> </div> </div> </div> </body> </html>
Comments
Post a Comment