Databases
StackOverflow2013
Postsdbo
POjquery in iOS turning div background on/off (not supposed to) works on all desktop browsers
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery in iOS turning div background on/off (not supposed to) works on all desktop browsers
    primarykey
    data
    text
    <p>On a website I'm working on, I have the buttons ".page-about" and ".page-contact" expand a div to reveal content. If the div is expanded and you click on the other button, it fades content in and out. It's pretty simple.</p> <p>This works perfectly on desktops. On my iPhone, the div expands fine initially, but if it's already expanded and the other button is tapped, it turns the div background color off and then immediately back on (it's a gradient) while the content is transitioning. The content is fading in and out perfectly, it's just the background that is giving me trouble for some reason. Here is the javascript:</p> <pre><code>$('.page-about').click(function(e) { e.preventDefault(); if ($('#bb').hasClass('expand')) { if (contactvisible()){ $('#contact-p').removeClass().addClass('contact-hid'); $('#about-p').removeClass().addClass('about-vis'); } else { $('#bb').removeClass('expand'); } } else { $('#contact-p').removeClass().addClass('hidden'); $('#about-p').removeClass().addClass('show'); $('#bb').addClass('expand'); } }); $('.page-contact').click(function(e) { e.preventDefault(); if ($('#bb').hasClass('expand')) { console.log(aboutvisible()); if (aboutvisible()){ $('#about-p').removeClass().addClass('about-hid'); $('#contact-p').removeClass().addClass('contact-vis'); } else { $('#bb').removeClass('expand'); } } else { $('#about-p').removeClass().addClass('hidden'); $('#contact-p').removeClass().addClass('show'); $('#bb').addClass('expand'); } }); function aboutvisible(){ if ($('#about-p').hasClass('about-vis') || $('#about-p').hasClass('show')) { return true; } else { return false; } } function contactvisible(){ if ($('#contact-p').hasClass('contact-vis') || $('#contact-p').hasClass('show')) { return true; } else { return false; } } </code></pre> <p>The classes that are being added/removed are just changing opacity. They also have CSS3 transitions attached to them. Can anyone help me figure out why this is happening to the background? None of the CSS is touching it. </p> <p>Here is the HTML:</p> <pre><code>&lt;div class="bottom-border" id="bb"&gt; &lt;h1&gt;Hi, my name is &lt;span&gt;Blank.&lt;/span&gt;&lt;/h1&gt; &lt;div id="about-p" class="about-vis"&gt; &lt;p&gt;Filler text here&lt;/p&gt; &lt;p&gt;more filler text&lt;/p&gt; &lt;/div&gt; &lt;div id="contact-p" class="contact-vis"&gt; &lt;p&gt;This is how you can contact me&lt;/p&gt; &lt;div&gt;&lt;i class="ss-icon"&gt;email&lt;/i&gt;&lt;i class="ss-icon"&gt;dribbble&lt;/i&gt;&lt;i class="ss-icon"&gt;twitter&lt;/i&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>To clarify, the content is transitioning fine, but for some reason, it's affecting the background of the containing div (#bb).</p> <p>here is the CSS as well:</p> <pre><code>#about-p, #contact-p { position: absolute; width: 100%; } .about-hid, .contact-hid { opacity: 0; -webkit-transition: opacity .35s ease; -moz-transition: opacity .35s ease; -ms-transition: opacity .35s ease; -o-transition: opacity .35s ease; transition: opacity .35s ease; } .about-vis, .contact-vis { opacity: 1; -webkit-transition: opacity .35s ease; -moz-transition: opacity .35s ease; -ms-transition: opacity .35s ease; -o-transition: opacity .35s ease; transition: opacity .35s ease; } .hidden { opacity: 0; } .show { opacity: 1; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USyeyene
    1. USScott
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTDuplicate
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjquery in iOS turning div background on/off (not supposed to) works on all desktop browsers
      1. This table or related slice is empty.
      1. VTClose
    2. VO
      singulars
      1. POjquery in iOS turning div background on/off (not supposed to) works on all desktop browsers
      1. This table or related slice is empty.
      1. VTClose
    3. VO
      singulars
      1. POjquery in iOS turning div background on/off (not supposed to) works on all desktop browsers
      1. This table or related slice is empty.
      1. VTClose
    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