Databases
StackOverflow2013
Postsdbo
POuse jquery css to change image size on click
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POuse jquery css to change image size on click
    primarykey
    data
    text
    <p>I've got an html table that contains videos and images in the list. If you click on any row it plays a video or shows the image in a div. </p> <p>I also have a size change link to adjust the size of the video or image when clicked.</p> <pre><code>&lt;div id="player" style="display:block;width:320px;height:240px;background-image:url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)"&gt;&lt;/div&gt; &lt;a id="toggleres" href="#"&gt;Change to 640x480&lt;/a&gt; &lt;table id="webcam-table" class="pretty"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Date Created&lt;/th&gt; &lt;th&gt;Length&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr class="videorow" data-url=http://www.extremetech.com/wp-content/uploads/2012/12/Audi-A1.jpg&gt; &lt;td&gt; testimages &lt;/td&gt; &lt;td&gt; 13 Jun 2013 22:01:37 &lt;/td&gt; &lt;td&gt; 1sec &lt;/td&gt; &lt;/tr&gt; &lt;tr class="videorow" data-url=http://metalstate.files.wordpress.com/2013/03/10-mclaren-p1-cars-to-wait-for-jpg_235623.jpg&gt; &lt;td&gt; testimages &lt;/td&gt; &lt;td&gt; 13 Jun 2013 22:01:37 &lt;/td&gt; &lt;td&gt; 1sec &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>You can see any image or play any video when you click the row in the table. At any point you can change the resolution (size) by clicking the link. </p> <pre><code> jQuery('#toggleres').click(function(event) { if (jQuery('#toggleres').text() == "Change to 320x240"){ jQuery(this).html("Change to 640x480"); jQuery('#player').css({'width':'320px', 'height':'240px', 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)'}); } else{ jQuery(this).html("Change to 320x240"); jQuery('#player').css({'width':'640px', 'height':'480px', 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)'}); } }); jQuery("#webcam-table").on("click", "tr.videorow &gt; td", function(e) { var parser = document.createElement('a'); parser.href = theUrl; //the right host, therefore it is an image if (parser.hostname == "myhost.com") { jQuery("#player").css("background", "url('" + theUrl + "')"); } else { flowplayer("player", "js/flowplayer/flowplayer-3.2.12.swf", { clip: { url: theUrl, provider: 'rtmp' }, plugins: { rtmp: { url: "js/flowplayer/flowplayer.rtmp-3.2.10.swf", netConnectionUrl: 'rtmp://'+window.location.host+'/recordings' } } }); } }); </code></pre> <p>This has worked great for videos without any special consideration, because it opens in a player that will adjust to the div size and keeps playing. Images are different. If you click on a image then try to change the size it just gets reset to the original background. I realize that is exactly what the code is doing but it was just great for videos.</p> <p>I'm struggling to figure out how I can make this work for both videos and images. Here is a <strong><a href="http://jsfiddle.net/LFBHv/4/" rel="nofollow">fiddle</a></strong> that illustrates the behavior (at least for images).</p> <p>Note that the #toggleres click event needs to exist. Someone should be able to toggle the size of the background image without ever clicking a row in the table. In other words if no image or video is clicked the main background placeholder image needs to be there.</p> <p>To summarize the expected behavior:</p> <ol> <li>A background image (320x240) is shown. Someone clicks on the the change resolution link and it will expand to (640x480) - this is currently working with the code below</li> <li>If someone clicks on a row in the table (which could be a video or image) it will change the background image (whether it is 320x240 or 640x480) - this is currently working with the code below</li> <li>If someone clicks another row in the table that image/video will change the background image - this mostly works but if you play a video you can't click another row with an image, it doesn't reset/remove the player</li> <li>Anytime there is a image or video on the screen (after clicking a table row) you can click on the change resolution to make the video or image bigger/smaller - this doesn't work as it will always reset to the background image (the fiddle illustrates this)</li> </ol>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTom
    1. USTom
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COCould explain a bit more what the intended behavior is?
      singulars
      1. POuse jquery css to change image size on click
      1. USGrampa
    2. CO@Grampa Added a summary of expected behavior. Hope it helps...
      singulars
      1. POuse jquery css to change image size on click
      1. USTom
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload