We Keep Coding

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.

How can I link to a specific tab?

I am using a theme that has tabs (list items) that are only displayed when the class is "active". By clicking on a tab, it changes the tab's class to 'active' (li class="active"), and only displays the content in the 'active' tab.
If I wanted to link to a specific tab from a different page, how can I create a link (presumably via javascript) that will send you to the page, and change an elements class?
Here's the HTML for reference
<div class="q_tabs horizontal center" style="visibility: visible;">
<ul class="tabs-nav"><li class="active">First Tab</li><li class="">Second tab</li><li class="">Third tab</li></ul>
<div class="tabs-container">
<div id="tab-1428877498-1-88" class="tab-content" style="display: block;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>First tab text</p>
</div>
</div>
</div>
<div id="tab-1428877498-2-39" class="tab-content" style="display: none;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Second tab text</p>
</div>
</div>
</div>
<div id="tab-1428877529303-2-2" class="tab-content" style="display: none;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Third tab text</p>
</div>
</div>
</div> </div>
</div>`

As far as I know, sadly, there is no way with only Javascript to open up a tab in a new page. Fortunately, there are a few way to transfer information within the URL.
1. Using the # symbol
Send info within the URL without reloading the page.
For instance, yoursite.com/yoursecondpage#yourtabselection If you are to add the # plus the tab number, your page would not reload. With javascript, you could find the number using the .hash property. This is the easier way to do it.
2. Using the ? symbol
Send info within the URL with reloading the page.
For instance, yoursite.com/yoursecondpage?tab=2 If you are to add ?tab=tabnum to the end of the URL, your page would reload. With javascript, this method is a little bit harder to find. This is the harder way to do it.
I hope this helps!

how about you create a function that recive a tab id(as an argument) and it will show only that tab (as it also hides the others).
then if you want to link it from another page make sure to pass the id(of the tab) via the url so you'll be able to make a simple JS check if there is any request for a specific tab and then use the function (as I described before).
use jQuery it shouldn't take more then 5min'
good luck.

JQuery mobile collapsible content not appearing correctly

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>

foundation tabs with one up not working

I have two tabs on my page and I would like the page to init with both tabs closed. I cannot get it to work. If I switch to accordion I can get both to init closed.
Is there a different property for tabs?
Also I would assume closing a tab would occur if you click on a tab that is already open. However that is not the case.
<div class="section-container auto tabs" data-section data-options="one_up: false;">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
http://jsbin.com/omuvik/1/

I believe this was a design decision on the part of the Foundation team, as tabbed content normally has one section open at all times. If you resize a browser window with all accordion elements closed to the breakpoint where those become tabs, the first one will be forced open, which makes it seem like a deliberate behavior.
You can try setting a callback function in your data-options attribute: if you remove the "active" class from all tab sections, they'll all be closed.