JQuery mobile collapsible content not appearing correctly - javascript

I'm having some trouble with the JQuery Mobile collapsible content (http://jquerymobile.com/demos/1.2.0-rc.2/docs/content/content-collapsible.html)
This HTML:
<div data-role="collapsible" data-collapsed="true">
<h3>Address</h3>
<div id="address_container">
Some hidden content here
</div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>About Us</h3>
<div id="descriptions_container">
Some more hidden content here
</div>
</div>
Should be appearing like so:
Is looking like this:
In the broken example the buttons do not expand to show the hidden content. The html on the page is as in the example on the jquery mobile site. When the page loads it is initially fine, however in a moment the page flashes, and then displays incorrectly as above. What's worse is that it's not consistent. Sometimes it works and others it doesn't.
The HTML on the broken version shows that it's inserting an entire hidden content container inside the div that contains the hidden content. Here it is after load:
Any advice or ideas about what causes this and how it can be addressed would be greatly appreciated.
Edit:
Well I've stopped it happening. I had some debug text being Response.Written to the page outside of the HTML elements at the very beginning of the page and stopping this seems to have stopped the above issue occurring. I suppose JQuery Mobile must be throwing its toys out of the pram in an unusual way because of it.

As the example on jquerymobile.com shows, try using paragraph instead of div for the content. Your code would be
<div data-role="collapsible" data-collapsed="true">
<h3>Address</h3>
<p id="address_container">
Some hidden content here
</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>About Us</h3>
<p id="descriptions_container">
Some more hidden content here
</p>
</div>

Related

How can I select an Animatedmodal to display different demos using one ID

I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.

Adding background color in TurnJS

I have experienced problem I have never faced before and even googling it did not help.
I have basic code from the official page of script TurnJS, which is the problem I have with.
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
This works as it should but is has transparent background so when you have any text on pages it overlays themselves so you cannot read the text properly.
When I add
#flipbook div{
background: white;
}
It somehow breaks. Pages skew when hovered etc.
I cannot insert a jsfiddle example because the link for turnjs script is not https and I am not allowed to insert http links. And here it shows me error in code.
The skewed page is shown on image below.
Does someone know how to add a bg-colorto that flipbook?
I would aprreciate any comments.
You can add another class to your pages which specifies a background colour:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div class="pageStyle"> Page 1 </div>
<div class="pageStyle"> Page 2 </div>
<div class="pageStyle"> Page 3 </div>
...
And then specify everything you need in that class. The other method is to load background images for each page. This is generally how a magazine would be created in TurnJS as it's easier to automate.
Although I just went over their docs looking for this (I know it works, I've done it before) and couldn't find much about it.

materializecss collapsible panel with a different html structure

I'm trying to create a custom collapsible panel using materialize but I don't know why the button is not triggering and showing the panel body. I have created a fiddle with my custom example that doesn't work and one materilaize example with their structure that works.
From my inspect I saw that the active class is not being added on panel body while clicking on panel header which is quite strange.
So if anyone can help me with that please ... modifying materialize components is like a pain in the ass !
<div class="collapsible">
<div class="box">
<div class="1left">Left</div>
<div class="2center">Center</div>
<div class="3right">Right
<a class="collapsible-header">Colapse header</a>
</div>
</div>
</div>
<div class="collapsible-body">
This should be the body collapsed
</div
http://jsfiddle.net/zt5515zt/90/
In Materialize you need both collapsible-header and collapsible-body at the same level in order to make Collapsible work.
Just Change the level of you collapsible-body as shown below and it will work.
<a class="collapsible-header">Colapse header</a>
<div class="collapsible-body">
This should be the body collapsed
</div>
Hope this helps you solve the problem.

Tabs Not Working

I can't seem to get tabs to work. I copied and pasted the code from the Foundation docs, and the tabs show up properly, but the content does not change when I click on them. It just displays the content for the first tab.
This is the page I am working on.
If it helps to know, I am working on a child theme of Reverie.
EDIT: Here's the code from the Foundation Tabs page that I am using:
<dl class="tabs vertical" data-tab>
<dd class="active">Tab 1</dd>
<dd>Tab 2</dd>
<dd>Tab 3</dd>
<dd>Tab 4</dd>
</dl>
<div class="tabs-content vertical">
<div class="content active" id="panel1a">
<p>Panel 1 content goes here.</p>
</div>
<div class="content" id="panel2a">
<p>Panel 2 content goes here.</p>
</div>
<div class="content" id="panel3a">
<p>Panel 3 content goes here.</p>
</div>
<div class="content" id="panel4a">
<p>Panel 4 content goes here.</p>
</div>
</div>
The foundation file you have is ©2013, and 200+ lines. The current Foundation 5 file is ©2014 and 163 lines. Perhaps there is a version issue? Try to update the file with the most current F5 js file and see if that helps.
In searching the source of your "example" there is no mention of the actual "tabs-vertical" lass and the tabs containers... has it been removed? It's hard to test a page without the code actually on it...
Your code shown here is syntactically correct so the error must be within the JS file somewhere/somehow.
Click this link (Line 312) in the source to see the ©2013 Zurb file.
In addition.. you are calling two files so this may be the problem too...

Issues implementing simple 'toggle' / (show/hide) on div, on mouseclick, using JavaScript

So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});
It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!

Categories