html - jQuery replaceWith if ID clicked -


i have basic website displays streams ip video cameras. 5 feeds displayed via table below '#main' feed inside div. want when 1 of feeds in table clicked, '#main' feed replaced feed it's displayed larger.

my js file testing first 2 cam feeds.

apologies if isn't formatted correct, it's first post here.

html:

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">      <head>         <meta http-equiv="content-type" content="text/html; charset=utf-8" />         <title>dsac cattle feed</title>         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">          </script>         <script type='text/javascript' src='camjq.js'></script>     </head>      <body>         <div id="main">             <p>cam 1</p>             <img width="640px" height="360px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />         </div>         <table>             <tr>                 <td>                     <p style="text-align:center">cam 1</p>                 </td>                 <td>                     <p style="text-align:center">cam 2</p>                 </td>                 <td>                     <p style="text-align:center">cam 3</p>                 </td>                 <td>                     <p style="text-align:center">cam 4</p>                 </td>                 <td>                     <p style="text-align:center">cam 5</p>                 </td>             </tr>             <tr>                 <td>                     <div id="cam1">                         <img width="128px" height="72px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />                     </div>                 </td>                 <td>                     <div id="cam2">                         <img width="128px" height="72px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />                     </div>                 </td>                 <td>                     <img id="cam3" width="128px" height="72px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />                 </td>                 <td>                     <img id="cam4" width="128px" height="72px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />                 </td>                 <td>                     <img id="cam5" width="128px" height="72px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />                 </td>             </tr>         </table>     </body>  </html> 

js:

$(document).ready(function(){ //cam1     jquery('#cam1').click(function(){         $(this).data('clicked', true);     });     if (jquery('#cam1').data('clicked'))          { $("#main").replacewith('<p> cam 1 </p><img width="640px" height="360px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />');         } //cam2     $('#cam2').click(function(){         $(this).data('clicked', true);     });     if ($('#cam2').data('clicked'))          { $("#main").replacewith('<p> cam 2 </p><img width="640px" height="360px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />');         } }); 

instead of replacewith() use .html()

$(document).ready(function () {     //cam1     $('#cam1').click(function () {         $("#main").html('<p> cam 1 </p><img width="640px" height="360px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />');     });     //cam2     $('#cam2').click(function () {         $("#main").html('<p> cam 2 </p><img width="640px" height="360px" src="http://ip/axis-cgi/mjpg/video.cgi" alt="real-time video feed" />');     }); }); 

additionally, don't need use .data()


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -