Jump to content

Tab Issues


Tyrone
 Share

Recommended Posts

Good day all,

 

I had created a tabbed system which was designed to be responsive using showmobile and nomobile CSS tags, so that one version would appear on displays with more than 801px and more and another would appear on displays with 800px and less. I had the system working perfectly, but then I went to shift some content from one tab to another and its no longer working. At the moment the desktop version is working perfectly, but the version designed to show on the mobile won't change between tabs. I've also noticed that if I remove the show mobile attribute so they appear on the same page clicking on the tabs of the mobile layout will make the tab info appear in the tabcontent area for the desktop layout. Could someone please help me figure out how I've messed up. I've included the page code and screenshots for reference.

 

 

<h1>Species Guide</h1>
<p>All the info about the array of creatures available to play goes here.</p>
<p>&nbsp;</p>
<div class="nomobile">
<div class="flexcontainer2">
<ul class="nav nav-tabs" style="display: flex; flex-direction: column; flex-wrap: wrap; float: left; width: 10%; margin-right: 10px; margin-bottom: 10px;">
<li class="active" style="margin-bottom: 10px; background-color: #1e979b; text-align: center;"><a href="#civilian" data-toggle="tab">Civilian</a></li>
<li style="margin-bottom: 10px; background-color: #904226; text-align: center;"><a href="#creature" data-toggle="tab">Creature</a></li>
<li style="margin-bottom: 10px; background-color: #d52a2a; text-align: center;"><a href="#demon" data-toggle="tab">Demon</a></li>
<li style="margin-bottom: 10px; background-color: #c4d02f; text-align: center;"><a href="#ghost" data-toggle="tab">Ghost</a></li>
<li style="margin-bottom: 10px; background-color: #1e9b76; text-align: center;"><a href="#hunter" data-toggle="tab">Hunter</a></li>
<li style="margin-bottom: 10px; background-color: #772690; text-align: center;"><a href="#psychic" data-toggle="tab">Psychic</a></li>
<li style="margin-bottom: 10px; background-color: #575fa8; text-align: center;"><a href="#witch" data-toggle="tab">Witch</a></li>
</ul>
<div class="tab-content" style="display: flex; flex-flow: row wrap; width: 88%; float: right;">
<div id="civilian" class="tab-pane fade in active">Civilian Stuff goes here.</div>
<div id="creature" class="tab-pane fade">
<h3>Creature</h3>
Creature Stuff goes here.</div>
<div id="demon" class="tab-pane fade">
<h3>Demon</h3>
<div class="nomobile"><center><img src="../../../guidepages/demonhelp1.gif" /> <img src="../guidepages/demonhelp2.gif" /></center></div>
<div class="showmobile"><center><img src="../../../guidepages/demonhelp1mobile.gif" /> <img src="../guidepages/demonhelp2mobile.gif" /></center></div>
<p>Demons are the result of human souls going to Hell and being tortured until no humanity is left in them, thus turning into demons - dark, malicious spirits that revel in pain, chaos, and death. According to Ruby, most demons forget what it means to be human. Some have even forgotten that they were once human. In general, demons engage in torture and destruction because it is fun or to avoid being tortured themselves. Some demons, however, are true believers in Lucifer's agenda to "cleanse" Earth, and actually consider themselves morally superior to humans.</p>
<p>There are many ways of becoming a demon, from making a deal with a Crossroad Demon, to being a witch, and making a deal with another demon. They manifest on Earth in the form of a long, slender cloud of black smoke. Crowley appears as the only exception, appearing as a blood-red cloud. Their true forms have not been shown onscreen, however Dean has seen their true forms, before he was taken to Hell. He says they look horrible even going as far to call Ruby "one ugly broad."</p>
<p>Once a soul becomes a demon, it gains the basic demonic powers (possession, superhuman strength, etc.) and from there, it can work its way up the ladder to positions of greater authority and power within Hell. Often when a demon has used its powers, they leave a trace of sulfur in the nearby space, or if on a person, around the victim. This can give away the demon's presence, indicating to hunters that they are hunting a demon. Very powerful demons leave much more sulfur than average, as evidenced when Azazel kidnapped Sam. Some demons are sent back to Earth to accomplish certain tasks, such as causing disasters, spreading diseases, assassinating hunters, or manipulating people into committing crimes that will get them sent to Hell. To do this, they have to take a vessel or "meatsuit" in order to physically exist. While nearly all demons desire to escape Hell any chance they get, some demons actually prefer Hell, like Alastair,[2] and even have never left Hell after becoming a demon like Belphegor.[3]</p>
<p>When they possess humans, they usually enter through their mouths. On one occasion, a demon entered a human via the eyes (as seen in the episode Phantom Traveler). Possessed humans often look exactly the same as they did before possession, the only noticeable change being that their eyes will sometimes change color (black, red, white, grey, or yellow depending on the demon possessing them). Demon possession also causes a chemical change in the circulatory system of the host; demon blood is known to be a unique serum and has certain attributes when ingested. Whenever they use their powers, they leave a trace of sulfur in the form of yellow dust. Angels and other supernatural beings can see the true faces of demons underneath their vessels.</p>
<p>Often under possession the human begins speaking and acting like the demon would. Upon exorcism the human - if they survived - retains no memory of their time during possession (unless they have been "awake" during possession, in which case the time of possession is a nightmare for them). The possessed humans also gain the powers of whichever demon is possessing them. Unlike angels, whose possession of a human vessel has to be with the vessel's consent, demons forcibly possess humans. People suffering from stress, fear or panic can be vulnerable to demonic possession. Demons abhor the name of God (Christo), and will flinch and reveal the vessels black eyes if it hears the word.</p>
</div>
<div id="ghost" class="tab-pane fade">
<h3>Ghost</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="hunter" class="tab-pane fade">
<h3>Hunter</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="psychic" class="tab-pane fade">
<h3>Psychic</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="witch" class="tab-pane fade">
<h3>Witch</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="showmobile">
<div class="flexcontainer2">
<ul class="nav nav-tabs" style="display: flex; flex-direction: column; flex-wrap: wrap; float: left; width: 17%; margin-right: 10px; margin-bottom: 10px;">
<li class="active" style="margin-bottom: 10px; background-color: #1e979b; text-align: center;"><a href="#civilian" data-toggle="tab">Civilian</a></li>
<li style="margin-bottom: 10px; background-color: #904226; text-align: center;"><a href="#creature" data-toggle="tab">Creature</a></li>
<li style="margin-bottom: 10px; background-color: #d52a2a; text-align: center;"><a href="#demon" data-toggle="tab">Demon</a></li>
<li style="margin-bottom: 10px; background-color: #c4d02f; text-align: center;"><a href="#ghost" data-toggle="tab">Ghost</a></li>
<li style="margin-bottom: 10px; background-color: #1e9b76; text-align: center;"><a href="#hunter" data-toggle="tab">Hunter</a></li>
<li style="margin-bottom: 10px; background-color: #772690; text-align: center;"><a href="#psychic" data-toggle="tab">Psychic</a></li>
<li style="margin-bottom: 10px; background-color: #575fa8; text-align: center;"><a href="#witch" data-toggle="tab">Witch</a></li>
</ul>
<div class="tab-content" style="display: flex; flex-flow: row wrap; width: 81%; float: right;">
<div id="civilian" class="tab-pane fade in active">Civilian Stuff goes here.</div>
<div id="creature" class="tab-pane fade">
<h3>Creature</h3>
Creature Stuff goes here.</div>
<div id="demon" class="tab-pane fade">
<h3>Demon</h3>
<div class="nomobile"><center><img src="../../../guidepages/demonhelp1.gif" /> <img src="../guidepages/demonhelp2.gif" /></center></div>
<div class="showmobile"><center><img src="../../../guidepages/demonhelp1mobile.gif" /> <img src="../guidepages/demonhelp2mobile.gif" /></center></div>
<p>Demons are the result of human souls going to Hell and being tortured until no humanity is left in them, thus turning into demons - dark, malicious spirits that revel in pain, chaos, and death. According to Ruby, most demons forget what it means to be human. Some have even forgotten that they were once human. In general, demons engage in torture and destruction because it is fun or to avoid being tortured themselves. Some demons, however, are true believers in Lucifer's agenda to "cleanse" Earth, and actually consider themselves morally superior to humans.</p>
<p>There are many ways of becoming a demon, from making a deal with a Crossroad Demon, to being a witch, and making a deal with another demon. They manifest on Earth in the form of a long, slender cloud of black smoke. Crowley appears as the only exception, appearing as a blood-red cloud. Their true forms have not been shown onscreen, however Dean has seen their true forms, before he was taken to Hell. He says they look horrible even going as far to call Ruby "one ugly broad."</p>
<p>Once a soul becomes a demon, it gains the basic demonic powers (possession, superhuman strength, etc.) and from there, it can work its way up the ladder to positions of greater authority and power within Hell. Often when a demon has used its powers, they leave a trace of sulfur in the nearby space, or if on a person, around the victim. This can give away the demon's presence, indicating to hunters that they are hunting a demon. Very powerful demons leave much more sulfur than average, as evidenced when Azazel kidnapped Sam. Some demons are sent back to Earth to accomplish certain tasks, such as causing disasters, spreading diseases, assassinating hunters, or manipulating people into committing crimes that will get them sent to Hell. To do this, they have to take a vessel or "meatsuit" in order to physically exist. While nearly all demons desire to escape Hell any chance they get, some demons actually prefer Hell, like Alastair,[2] and even have never left Hell after becoming a demon like Belphegor.[3]</p>
<p>When they possess humans, they usually enter through their mouths. On one occasion, a demon entered a human via the eyes (as seen in the episode Phantom Traveler). Possessed humans often look exactly the same as they did before possession, the only noticeable change being that their eyes will sometimes change color (black, red, white, grey, or yellow depending on the demon possessing them). Demon possession also causes a chemical change in the circulatory system of the host; demon blood is known to be a unique serum and has certain attributes when ingested. Whenever they use their powers, they leave a trace of sulfur in the form of yellow dust. Angels and other supernatural beings can see the true faces of demons underneath their vessels.</p>
<p>Often under possession the human begins speaking and acting like the demon would. Upon exorcism the human - if they survived - retains no memory of their time during possession (unless they have been "awake" during possession, in which case the time of possession is a nightmare for them). The possessed humans also gain the powers of whichever demon is possessing them. Unlike angels, whose possession of a human vessel has to be with the vessel's consent, demons forcibly possess humans. People suffering from stress, fear or panic can be vulnerable to demonic possession. Demons abhor the name of God (Christo), and will flinch and reveal the vessels black eyes if it hears the word.</p>
</div>
<div id="ghost" class="tab-pane fade">
<h3>Ghost</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="hunter" class="tab-pane fade">
<h3>Hunter</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="psychic" class="tab-pane fade">
<h3>Psychic</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="witch" class="tab-pane fade">
<h3>Witch</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>

 

This is what it looks if the showmobile div class is removed. The content of the relevant tab appears in the first tabcontent area rather than the second while the second tabcontent area remains stuck on the content of the civilian tab.

 

speciesguidetabissue.png

Link to comment
Share on other sites

  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

I've been able to confirm that it is definitely an issue relating to the content appearing on the first tab-content area when the tabs of the second nav-tabs are clicked as it did the same behaviour in reverse when I swapped the showmobile and nomobile divs around. I just can't figure out how to get this working 😞

Edited by Tyrone
Link to comment
Share on other sites

  • Admin

@Tyrone

If the issue is with mobile CSS you need to also provide that.... Along with what software you're using for anyone to assist as each one is different.

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to comment
Share on other sites

Can this thread be marked as solved? I figured out a solution to this. I needed to change the ids of the second set of tabs so they were unique rather than identical to those of the first set. 

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.