Develop Reference

Send_keys long text so slowly (Python + Selenium)

I'm using element.send_keys("Long text") to fill textarea, but it takes very much time and the script has to fill it in fast.
I tried some different method.
Execute javascipt:
browser.execute_script('document.getElementsByClassName("inputarea")[0].value="Long text"')
but nothing happened
I can't using clipboard because my server doesn't have GUI.
Here is my HTML:
<div data-mprt="3" class="overflow-guard" style="width: 954px; height: 268px;"><div class="margin" style="position: absolute; will-change: transform; top: 0px; height: 268px; width: 68px;" role="presentation" aria-hidden="true"><div class="glyph-margin" style="left: 0px; width: 0px; height: 268px;"></div><div class="margin-view-zones" style="position: absolute;" role="presentation" aria-hidden="true"></div><div class="margin-view-overlays" style="position: absolute; width: 68px; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; line-height: 20px; letter-spacing: 0px; height: 268px;" role="presentation" aria-hidden="true"><div style="position:absolute;top:0px;width:100%;height:20px;"><div class="current-line" style="width:68px; height:20px;"></div><div class="line-numbers lh-even" style="left:0px;width:42px;">1</div></div></div></div><div class="monaco-scrollable-element editor-scrollable vs-dark" role="presentation" style="position: absolute; overflow: hidden; left: 68px; width: 886px; height: 268px;" data-mprt="5"><div class="lines-content monaco-editor-background" style="position: absolute; overflow: hidden; width: 1000000px; height: 1000000px; touch-action: none; will-change: transform; top: 0px; left: 0px;"><div class="view-overlays" style="position: absolute; height: 0px; width: 886px;" role="presentation" aria-hidden="true"><div style="position:absolute;top:0px;width:100%;height:20px;"><div class="current-line" style="width:886px; height:20px;"></div></div></div><div role="presentation" aria-hidden="true" class="view-rulers"></div><div class="view-zones" style="position: absolute;" role="presentation" aria-hidden="true"></div><div class="view-lines" style="position: absolute; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; line-height: 20px; letter-spacing: 0px; width: 886px; height: 268px;" role="presentation" aria-hidden="true" data-mprt="7"><div style="top:0px;height:20px;" class="view-line"><span><span> </span></span></div></div><div data-mprt="1" class="contentWidgets" style="position: absolute; top: 0px;"><div class="lightbulb-glyph" title="Show Fixes (Ctrl+.)" style="position: absolute; visibility: hidden; max-width: 886px;" widgetid="LightBulbWidget"></div></div><div role="presentation" aria-hidden="true" class="cursors-layer cursor-line-style cursor-solid"><div class="cursor " style="height: 20px; top: 0px; left: 0px; font-family: "Droid Sans Mono", "monospace", monospace, "Droid Sans Fallback"; font-weight: normal; font-size: 14px; line-height: 20px; letter-spacing: 0px; display: block; visibility: hidden; width: 2px;"></div></div></div><div role="presentation" aria-hidden="true" class="invisible scrollbar horizontal" style="position: absolute; width: 880px; height: 10px; left: 0px; bottom: 0px;"><div class="slider" style="position: absolute; top: 0px; left: 0px; height: 10px; will-change: transform; width: 880px;"></div></div><canvas class="decorationsOverviewRuler" style="position: absolute; will-change: transform; top: 0px; right: 0px; width: 6px; height: 268px;" aria-hidden="true" width="6" height="268"></canvas><div role="presentation" aria-hidden="true" class="invisible scrollbar vertical" style="position: absolute; width: 6px; height: 268px; right: 0px; top: 0px;"><div class="slider" style="position: absolute; top: 0px; left: 0px; width: 6px; will-change: transform; height: 268px;"></div></div></div><div role="presentation" aria-hidden="true" style="width: 954px;"></div><textarea data-mprt="6" class="inputarea" autocorrect="off" autocapitalize="none" autocomplete="off" spellcheck="false" aria-label="Editor content;Press Alt+F1 for Accessibility Options." role="textbox" aria-multiline="true" aria-haspopup="false" aria-autocomplete="both" style="font-size: 1px; line-height: 20px; top: 0px; left: 68px; width: 0px; height: 0px;" wrap="off"></textarea><div style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px;"></div><div data-mprt="4" class="overlayWidgets" style="width: 954px;"><div class="accessibilityHelpWidget" style="display: none; position: absolute;" role="dialog" aria-hidden="true" widgetid="editor.contrib.accessibilityHelpWidget"><div role="document"></div></div></div><div data-mprt="8" class="minimap slider-mouseover" style="position: absolute; left: 0px; width: 0px; height: 268px;" role="presentation" aria-hidden="true"><div class="minimap-shadow-hidden" style="height: 268px;"></div><canvas style="position: absolute; left: 0px; width: 1px; height: 268px;" width="1" height="268"></canvas><div style="position: absolute; will-change: transform; width: 0px;" class="minimap-slider"><div style="position: absolute; width: 0px; height: 0px;" class="minimap-slider-horizontal"></div></div></div></div>
Edited
I want the method different from the method send_keys(), because send_keys() so slow.

Try the below way:
((JavascriptExecutor) driver).executeScript("arguments[0].value = arguments[1];", driver_tmp.findElement(By.id("text_id")), text);

Maybe, it can be work to use XPATH.
textarea_field = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.XPATH, '/html/body/div/textarea'))).send_keys("Long text")

Please share a little bit of your code cause send_keys fills the area under 1 second in my experience
My code just works fine :
import selenium
from selenium import webdriver
from selenium.webdriver import Firefox
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
browser = webdriver.Firefox()
browser.get('YOUR_URL')
area = browser.find_element(by=By.<Your Choice>, value=<Name or Xpath or ...>)
area.send_keys('Your Text')

How to stop modal from scrolling up when closing it?

I'm trying to make a modal using pure CSS and HTML. So far I have this
[id^=modal] {
display: none;
position: fixed;
top: 0;
left: 0;
}
[id^=modal]:target {
display: block;
}
input[type=checkbox] {
position: absolute;
clip: rect(0 0 0 0);
}
.popup {
width: 100%;
height: 100%;
z-index: 99999;
}
.popup__overlay {
position: fixed;
z-index: 1;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000000b3;
}
.popup__wrapper {
position: fixed;
z-index: 9;
width: 80%;
max-width: 1200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
padding: 58px 32px 32px 32px;
background: #fff;
}
.popup__close {
position: absolute;
top: 16px;
right: 26px;
}
Open modal 1
<div class="popup" id="modal1">
<a class="popup__overlay" href="#"></a>
<div class="popup__wrapper">
<a class="popup__close" href="#">Close icon here</a>
<p>POPUP 1 : CONTENT HERE</p>
</div>
</div>
The problem now is when I'm closing this modal, it's scrolling up. I think this is due to href="#". Is there any other way to close this modal using CSS that would not make it scroll up?
If it's not possible, how can I do it with as little javascript as possibe?

Instead of href = "#" use href = "#!". Your example is below:
[id^=modal] {
display: none;
position: fixed;
top: 0;
left: 0;
}
[id^=modal]:target {
display: block;
}
input[type=checkbox] {
position: absolute;
clip: rect(0 0 0 0);
}
.popup {
width: 100%;
height: 100%;
z-index: 99999;
}
.popup__overlay {
position: fixed;
z-index: 1;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #000000b3;
}
.popup__wrapper {
position: fixed;
z-index: 9;
width: 80%;
max-width: 1200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
padding: 58px 32px 32px 32px;
background: #fff;
}
.popup__close {
position: absolute;
top: 16px;
right: 26px;
}
Open modal 1
<div class="popup" id="modal1">
<a class="popup__overlay" href="#!"></a>
<div class="popup__wrapper">
<a class="popup__close" href="#!">Close icon here</a>
<p>POPUP 1 : CONTENT HERE</p>
</div>
</div>

How to cycle through divs using left/right

JSFiddle: https://jsfiddle.net/d34pksmn/1/
HTML:
<div style="overflow: hidden; width: 100%; position: relative; height: 165px; background: #00AC00;">
<div class="dvSli" style="width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 4;">
</div>
<div style="overflow: visible; position: absolute; left: 2%; top: 75px; z-index: 10; padding: 10px;">
<span id="arrow-left"></span>
</div>
<div style="overflow: visible; position: absolute; right: 0; top: 75px; z-index: 10;">
<span id="arrow-right"></span>
</div>
<div style="overflow: hidden; height: 40px; width: 100%; text-align: center;">
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
<!-- Generate a letter for each occurance in `dCon` class DIV -->
</div>
<div class="dCon" style="overflow: auto; width: 6000000%; height: 125px;">
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
ONE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
TWO
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
THREE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
FOUR
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
FIVE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
SIX
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
SEVEN
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
EIGHT
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
NINE
</div>
<div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
TEN
</div>
</div>
</div>
How can I modify my HTML/CSS/JQuery so:
Clicking on left/right arrow will slide each DIV inside the dCon
class parent div, left if left is clicked and right if right is
clicked.
I wanted to achieve the image carousel without the use of any plugins.

I'm not 100% certain what you're asking for in part 2, can you be a bit more specific?
For the first part, here's an easy solution:
$(function() {
$("#arrow-left").click(function() {
$(".dCon div:first-child").appendTo(".dCon");
$(".dCon").remove(".dCon div:first-child");
});
$("#arrow-right").click(function() {
$(".dCon div:last-child").prependTo(".dCon");
$(".dCon").remove(".dCon div:last-child");
});
});
and the updated fiddle: https://jsfiddle.net/JSnoobDC16/d34pksmn/6/

How to count the number of times all divs in a page are clicked?

I am using a php script where users click on the cells of a table to reveal their content. As part of my project, users are not allowed to click on more than 20 of the 100 cells. I would like to display on top of the page a countdown that will change each time they click on a div.
The page contains a table, and each cell of the table contains a DIV with an ID such as "a1_cont", "a2_cont", "a3_cont", ..., "a10_cont" for the first row. The second row is "b1_cont" to "b10_cont", and so on.
I would need the countdown to start at 20 and incrementally go down to 0 once the user has clicked 20 times. How would you advise me to do so?
Here is one row of the table. Don't yell at me about CSS, this is automatically generated by the mouselab web script, which is widely used in my field of research.
<TR style="background-color: green;">
<!--cell a0(tag:a0)-->
<TD align=center valign=middle><DIV ID="a0_cont" style="position: relative; height: 50px; width: 100px;"><DIV ID="a0_txt" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 1;"><TABLE><TD ID="a0_td" align=center valign=center width=95 height=45 class="actTD">2 years</TD></TABLE></DIV><DIV ID="a0_box" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 2;"><TABLE><TD ID="a0_tdbox" align=center valign=center width=95 height=45 class="boxTD">Years in Business</TD></TABLE></DIV><DIV ID="a0_img" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; z-index: 5;"><IMG NAME="a0" SRC="transp.gif" border=0 width=100 height=50></DIV></DIV></TD>
<!--end cell-->
<!--cell a1(tag:a1)-->
<TD align=center valign=middle><DIV ID="a1_cont" style="position: relative; height: 50px; width: 100px;"><DIV ID="a1_txt" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 1;"><TABLE><TD ID="a1_td" align=center valign=center width=95 height=45 class="actTD">7 min</TD></TABLE></DIV><DIV ID="a1_box" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 2;"><TABLE><TD ID="a1_tdbox" align=center valign=center width=95 height=45 class="boxTD">Call Handling Time</TD></TABLE></DIV><DIV ID="a1_img" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; z-index: 5;"><IMG NAME="a1" SRC="transp.gif" border=0 width=100 height=50></DIV></DIV></TD>
<!--end cell-->
<!--cell a2(tag:a2)-->
<TD align=center valign=middle><DIV ID="a2_cont" style="position: relative; height: 50px; width: 100px;"><DIV ID="a2_txt" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 1;"><TABLE><TD ID="a2_td" align=center valign=center width=95 height=45 class="actTD">Very High</TD></TABLE></DIV><DIV ID="a2_box" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 2;"><TABLE><TD ID="a2_tdbox" align=center valign=center width=95 height=45 class="boxTD">Representative Experience</TD></TABLE></DIV><DIV ID="a2_img" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; z-index: 5;"><IMG NAME="a2" SRC="transp.gif" border=0 width=100 height=50></DIV></DIV></TD>
<!--end cell-->
<!--cell a3(tag:a3)-->
<TD align=center valign=middle><DIV ID="a3_cont" style="position: relative; height: 50px; width: 100px;"><DIV ID="a3_txt" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 1;"><TABLE><TD ID="a3_td" align=center valign=center width=95 height=45 class="actTD">$0.17</TD></TABLE></DIV><DIV ID="a3_box" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 2;"><TABLE><TD ID="a3_tdbox" align=center valign=center width=95 height=45 class="boxTD">Cost per Minute</TD></TABLE></DIV><DIV ID="a3_img" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; z-index: 5;"><IMG NAME="a3" SRC="transp.gif" border=0 width=100 height=50></DIV></DIV></TD>
<!--end cell-->
<!--cell a4(tag:a4)-->
<TD align=center valign=middle><DIV ID="a4_cont" style="position: relative; height: 50px; width: 100px;"><DIV ID="a4_txt" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 1;"><TABLE><TD ID="a4_td" align=center valign=center width=95 height=45 class="actTD">Strong Encryption</TD></TABLE></DIV><DIV ID="a4_box" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; clip: rect(0px 100px 50px 0px); z-index: 2;"><TABLE><TD ID="a4_tdbox" align=center valign=center width=95 height=45 class="boxTD">Customer Data Security</TD></TABLE></DIV><DIV ID="a4_img" STYLE="position: absolute; left: 0px; top: 0px; height: 50px; width: 100px; z-index: 5;"><IMG NAME="a4" SRC="transp.gif" border=0 width=100 height=50></DIV></DIV></TD>
<!--end cell--><TD ID="btn_0" style="border-left-style: none; color: white;border-right-style: none; border-bottom-style: none;" align=center valign=middle><INPUT type="radio" name="mlchoice" value="btn1" onMouseOver="timefunction('mouseover','btn1','Alpha Co')" onClick="recChoice('onclick','btn1','Alpha Co')" onMouseOut="timefunction('mouseout','btn1','Alpha Co')">Alpha Co</TD>
</TR>

Without seeing your actual HTML, this is the best guess for a selector that would match all the div elements.
(function() {
var count = 20;
var counted = {};
$("div[id$='_cont']").click(function() {
// only count this click if we haven't already counted this div
if (!counted[this.id]) {
counted[this.id] = true;
--count;
// update on screen counter here
if (count == 0) {
// max clicks reached
// do whatever you want here
}
}
});
})();
Note, this is written to only count a click on a given div once so multiple clicks in a single div will only count once.

var count = 20;
$('div').click(function(){
count = count - 1;
if (count==0)
alert('Youre done!')
});

jquery mobile escape part of a page <div> (dynamically created)

Been trying to escape part of a page from jquery mobile since I already have a different plugin processing that part of the page turn.js but I can't seem to escape it... this is on a dynamic div that is processed by another jquery plugin. here is a fiddle:
http://jsfiddle.net/adamsurfari/DpQQV/ this is how the flipbook is supposed to work http://jsfiddle.net/blasten/A9a7E/
I am already using
<div data-enhance="false" data-role="none" id="flipbook">
</div>
but the images still does not appear. Is there a different way to escape divs and what is inside them from jquery mobile?
Configuration of the page:
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="zip/zip.js"></script>
<script type="text/javascript" src="zip/deflate.js"></script>
<script type="text/javascript" src="zip/zip-ext.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script type="text/javascript" src="turn.js"></script>
This is the normal output from turn.js:
<div data-enhance="false" id="flipbook"
style="position: relative; width: 1024px; height: 360px; -webkit-transform: translate3d(0px, 0px, 0px);">
<div class="turn-page-wrapper" page="1"
style="position: absolute; overflow: hidden; width: 512px; height: 360px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 56;">
<div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 626px; height: 626px; -webkit-transform-origin: 0% 100%;">
<div data-enhance="false" class="turn-page p1"
style="width: 512px; height: 360px; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; -webkit-transform-origin: 0% 100%;">
<img width="512px" src="filesystem:http://localhost:8080/persistent/LEGO/CATALOGO%202013_001.jpg"></div>
</div>
<div style="top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 512px; height: 360px; background-image: -webkit-gradient(linear, 100% 100%, 100% 100%, color-stop(0.8, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.298039)), to(rgba(0, 0, 0, 0))); display: none;"></div>
</div>
<div style="pointer-events: none; position: absolute; top: -50px; left: -8px; overflow: visible; z-index: auto; display: none;">
<div style="position: absolute; top: 50px; left: 520px; overflow: hidden; z-index: 56; width: 626px; height: 626px; -webkit-transform-origin: 0% 100%; -webkit-transform: translate3d(512px, -266px, 0px) rotate(-90deg); display: none;">
<div style="position: absolute; top: auto; left: 0px; overflow: visible; z-index: auto; width: 512px; height: 360px; right: auto; bottom: 0px; -webkit-transform-origin: 0% 100%; -webkit-transform: rotate(90deg) translate3d(0px, 360px, 0px);">
<div style="cursor: default; width: 360px; height: 512px; -webkit-transform-origin: 0% 0%; -webkit-transform: rotate(-90deg);">
<div data-enhance="false" class="turn-page p2"
style="width: 512px; height: 360px; -webkit-transform-origin: 0% 0%;">
<div class="turn-page p4" style="width: 200px; height: 300px;"> Page 2</div>
</div>
<div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 360px; height: 512px; background-image: -webkit-gradient(linear, 0% 0%, 0% 0%, from(rgba(0, 0, 0, 0)), color-stop(0.8, rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0.2)));"></div>
</div>
</div>
</div>
</div>
<div class="turn-page-wrapper" page="2"
style="position: absolute; overflow: hidden; width: 512px; height: 360px; top: 0px; left: 0px; right: auto; bottom: auto; z-index: 0; display: none;"></div>
<div class="turn-page-wrapper" page="3"
style="position: absolute; overflow: hidden; width: 512px; height: 360px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 55;">
<div data-enhance="false" class="turn-page p3" style="width: 512px; height: 360px;">
<div class="turn-page p4" style="width: 200px; height: 300px;"> Page 3</div>
</div>
</div>
This is the output with jquerymobile with data-enhanced="false", jquerymobile still messes around with the code that is inside the data-enhanced="false" DIV:
<div data-enhance="false" id="flipbook"
style="position: relative; width: 400px; height: 300px; -webkit-transform: translate3d(0px, 0px, 0px);">
<div class="turn-page-wrapper ui-page ui-body-c" tabindex="0"
style="position: absolute; overflow: hidden; width: 200px; height: 300px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 8;">
<div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 361px; height: 361px; -webkit-transform-origin: 0% 100%;">
<div class="hard turn-page p1"
style="width: 200px; height: 300px; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto; -webkit-transform-origin: 0% 100%;">
Turn.js
</div>
</div>
<div style="top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 200px; height: 300px; background-image: -webkit-gradient(linear, 100% 100%, 100% 100%, color-stop(0.8, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.298039)), to(rgba(0, 0, 0, 0))); display: none;"></div>
</div>
<div style="pointer-events: none; display: none; position: absolute; top: -193.1875px; left: -15px; overflow: visible; z-index: auto;">
<div style="position: absolute; top: 193.1875px; left: 215px; overflow: hidden; z-index: 8; display: none; width: 361px; height: 361px; -webkit-transform-origin: 0% 100%; -webkit-transform: translate3d(200px, -61px, 0px) rotate(-90deg);">
<div style="position: absolute; top: auto; left: 0px; overflow: visible; z-index: auto; width: 200px; height: 300px; right: auto; bottom: 0px; -webkit-transform-origin: 0% 100%; -webkit-transform: rotate(90deg) translate3d(0px, 300px, 0px);">
<div style="cursor: default; width: 300px; height: 200px; -webkit-transform-origin: 0% 0%; -webkit-transform: rotate(-90deg);">
<div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 300px; height: 200px; background-image: -webkit-gradient(linear, 0% 0%, 0% 0%, from(rgba(0, 0, 0, 0)), color-stop(0.8, rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0.2)));"></div>
</div>
</div>
</div>
</div>
<div class="turn-page-wrapper ui-page ui-body-c" tabindex="0"
style="position: absolute; overflow: hidden; width: 200px; height: 300px; top: 0px; left: 0px; right: auto; bottom: auto; z-index: 0; display: none;">
<div class="hard turn-page p2" style="width: 200px; height: 300px; -webkit-transform-origin: 0% 0%;"></div>
</div>
<div class="turn-page-wrapper ui-page ui-body-c" tabindex="0"
style="position: absolute; overflow: hidden; width: 200px; height: 300px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 7;">
<div id="page1-test" class="turn-page p3" style="width: 200px; height: 300px;"> Page 1 <a href="#"
data-role="button"
id="test-button">Dynamic
Button</a></div>
</div>
<div class="turn-page-wrapper ui-page ui-body-c" tabindex="0"
style="position: absolute; overflow: hidden; width: 200px; height: 300px; top: 0px; left: 0px; right: auto; bottom: auto; z-index: 0; display: none;">
<div class="turn-page p4" style="width: 200px; height: 300px;"> Page 2</div>
</div>
<div class="turn-page-wrapper ui-page ui-body-c" tabindex="0"
style="position: absolute; overflow: hidden; width: 200px; height: 300px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 0; display: none;">
<div class="turn-page p5" style="width: 200px; height: 300px;"> Page 3</div>
</div>
As is possible to see jqueryMobile still messes around with the code that is inside the div:
For instance:
<div class="turn-page-wrapper" page="1"
is transformed into:
<div class="turn-page-wrapper ui-page ui-body-c" tabindex="0"

Fix:
Change this:
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script type="text/javascript" src="turn.js"></script>
to this:
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="turn.js"></script>
mobileinit must be initialized before a jquery Mobile is initialized.
Example:
Working example: http://jsfiddle.net/Gajotres/UZwpj/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$(document).on('mobileinit', function () {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header" data-enhance="false">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
Test button
<!-- Every content inside this div will not be enhanced -->
<div data-enhance="false">
Test button
<div>
Test button
</div>
</div>
Test button
</div>
<div data-theme="a" data-role="footer" data-position="fixed" data-enhance="false">
<h3>
Footer
</h3>
</div>
</div>
</body>
</html>
Edit:
Only possible solution for dynamically added content is data-role="none" attribute because data-enhance="false"only works on a content loaded from the file.
Example: http://jsfiddle.net/Gajotres/eUH56/