Databases
StackOverflow2013
Postsdbo
POHow to specify which element to change background color jquery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to specify which element to change background color jquery
    primarykey
    data
    text
    <p>I have made a simple website where I have a slideshow.</p> <p>The pictures slide is automatic and on the right side of the page I have a menu with 6 buttons. When I press "button1" the picture for "button1" appears, when I click on "button2" the picture for "button2" appears etc.</p> <p>What I want to do:</p> <p>When my slideshow changes that one of the 6 buttons gets their background color change to indicate that the picture that is being displayed has a relation to that button.</p> <p>Example:</p> <pre><code>Slideshow: picture1 appears -----&gt; button1 gets background color changed picture2 appears -----&gt; button2 gets background changed etc. </code></pre> <p>My code for this:</p> <pre><code>$(".showcase-thumbnail-content").removeClass("active, passive"); $(".showcase-thumbnail-content").addClass("active"); </code></pre> <p>This works with the problem that all the buttons get their color changed not just one at the time. </p> <p>All buttons are in the <code>div</code> with class <code>showcase-thumbnail-content</code> I have thought about creating a separate <code>div</code> for each button but my main question is:</p> <p><strong>How do make it so that only "button1" gets the background color changed when "picture1" is displayed on the slideshow??</strong></p> <p>I have tried being as through as I can, if more info is needed just ask.</p> <p>Edit:</p> <p>Since there is alot of code on the page i don´t exaactly know what parts would be most relevant here so if any1 would take the time and look here:</p> <p><a href="http://showcase.awkwardgroup.com/index2.html" rel="nofollow">http://showcase.awkwardgroup.com/index2.html</a></p> <p>I am working with demo 2, with my own modifications.</p> <p>The following changes have been done:</p> <p><strong>css:</strong></p> <pre><code>.showcase-thumbnail-content { /* padding: 10px; text-align: center; padding-top: 25px; */ background: #ededed; padding: 5px 15px; border: 1px solid #dcdcdc; border-radius: 6px; color: #777; text-decoration: none; font: bold 0.8em arial, sans-serif; width: 120px; font-size: 130%; cursor: hand; cursor: pointer; } } .showcase-thumbnail-content:hover { color:#F77B0F!Important; } .active { background: red; } </code></pre> <p><strong>html changes:</strong></p> <p><strong>showcase-slide:</strong></p> <pre><code>&lt;div class="showcase-slide"&gt; &lt;!-- Put the slide content in a div with the class .showcase-content. --&gt; &lt;div class="showcase-content"&gt; &lt;img src="images/01.jpg" alt="01" /&gt; &lt;/div&gt; &lt;!-- Put the thumbnail content in a div with the class .showcase-thumbnail --&gt; &lt;div class="showcase-thumbnail"&gt; &lt;!-- &lt;img src="images/01.jpg" alt="01" width="140px" /&gt; --&gt; &lt;!-- The div below with the class .showcase-thumbnail-caption contains the thumbnail caption. --&gt; &lt;p class="showcase-thumbnail-content"&gt;First&lt;/p&gt; &lt;!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. --&gt; &lt;!-- &lt;div class="showcase-thumbnail-cover"&gt;&lt;/div&gt; --&gt; &lt;/div&gt; &lt;!-- Put the caption content in a div with the class .showcase-caption --&gt; &lt;div class="showcase-caption"&gt; &lt;h2&gt;Be creative. Get Noticed!&lt;/h2&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>// This is done for all the six elements(exactly the same)</p> <p>The script code is the same as in demo2 with the modification that i have shown above.</p> <p>If more info is needed just ask.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSmamatti
    1. USThunD3eR
    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
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to specify which element to change background color jquery
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to specify which element to change background color jquery
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to specify which element to change background color jquery
      1. This table or related slice is empty.
      1. VTUpMod
    1. COyes.. more codes... :)
      singulars
      1. POHow to specify which element to change background color jquery
      1. USbipen
    2. CO@user1862808, you should add revelant parts of you markup / JS code or even better provide a jsFiddle.
      singulars
      1. POHow to specify which element to change background color jquery
      1. This table or related slice is empty.
    3. COcheck edit please
      singulars
      1. POHow to specify which element to change background color jquery
      1. USThunD3eR
 

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