Databases
StackOverflow2013
Postsdbo
POjQuery slider opacity error only on Google Chrome
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery slider opacity error only on Google Chrome
    primarykey
    data
    text
    <p>I have a custom built slider on a Magento site. It's responsive and have custom touch behaviour on it. The behaviour should be the following:</p> <ol> <li>Three images slider, the middle one should have opacity 1.0, the rest just 0.15</li> <li>On smaller resolutions, only show 2 images. The one on the right should have 1.0 the left image should have 0.15 opacity</li> <li>On mobile, show 1 image. The current shown image should have 1.0 opacity.</li> </ol> <p>I made it work with CSS/jQuery mix.</p> <p>HTML</p> <pre><code>&lt;ul class="more-views"&gt; &lt;li&gt;&lt;a href="someURL"&gt;&lt;img src=..... /&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="someURL"&gt;&lt;img src=..... /&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="someURL"&gt;&lt;img src=..... /&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="someURL"&gt;&lt;img src=..... /&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="someURL"&gt;&lt;img src=..... /&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>CSS .more-views ul li { opacity: .15; } .more-views ul li.active { opacity: 1.0; }</p> <p>JAVASCRIPT is long, you might want to inspect element. But the idea is the following. When you click NEXT arrow, the first element of the list is cloned, appended to the back of the and destroyed from the first position. Later on the active class is removed and added to the second <code>&lt;li&gt;</code> in the list. Something like this</p> <pre><code>&lt;ul&gt; &lt;li class="elem1"&gt;&lt;/li&gt; &lt;li class="elem2 active"&gt;&lt;/li&gt; &lt;li class="elem3"&gt;&lt;/li&gt; &lt;li class="elem4"&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>STEP 1</p> <pre><code>&lt;ul&gt; &lt;li class="elem1"&gt;&lt;/li&gt; &lt;li class="elem2 active"&gt;&lt;/li&gt; &lt;li class="elem3"&gt;&lt;/li&gt; &lt;li class="elem4"&gt;&lt;/li&gt; &lt;li class="elem1"&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>STEP 2</p> <pre><code>&lt;ul&gt; &lt;li class="elem2 active"&gt;&lt;/li&gt; &lt;li class="elem3"&gt;&lt;/li&gt; &lt;li class="elem4"&gt;&lt;/li&gt; &lt;li class="elem1"&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>STEP 3</p> <pre><code>&lt;ul&gt; &lt;li class="elem2"&gt;&lt;/li&gt; &lt;li class="elem3 active"&gt;&lt;/li&gt; &lt;li class="elem4"&gt;&lt;/li&gt; &lt;li class="elem1"&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Current small issue is the following: 1. If you click the right arrow (next arrow) one time, the first element in the list keeps the opacity as 1.0 (only on Chrome). 2. If you inspect the element is says it has an opacity of 0.15 3. If you resize the browser you'll see that the opacity is set to .15 again 4. If you enable/disable the opacity in Firebug it works like it should. 5. If you click 2 times on the next arrow the opacity error disappears.</p> <p>You can see the live example here: <a href="http://www.mackage.com/ca/en/jeffrey-black-leather-jacket" rel="nofollow">http://www.mackage.com/ca/en/jeffrey-black-leather-jacket</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USuser2141731
    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. This table or related slice is empty.
 

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