I was testing out the DHTMLXscheduler module on my application. I followed all the steps which explained setting up the module on http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:how_to_start but couldnt get it to work.
I have implemented the js and css in my header file and implemented all the necessary code. After running my application, I end up with an empty screen without any errors in my console.
Did someone ever experienced the same like this?
The code i used to initialize is exactly the same as shown on their webpage which is:
<script type="text/javascript">
scheduler.init('scheduler',null,"week");
</script>
<div id="content">
<div id="scheduler" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
I have also tried calling the init method after the html content which resulted in the same result.
The problem is solved. I had to increase the height of the inner div #content.
Related
I am trying to get a list of the content on a website (this one if anyone is interested). The layout has changed recently and now they do not load the content all at once, but with magic (js probably). I'm currently using JSoup to analyze the HTML, but im open to suggestions.
This is what i am getting:
<div class="row" data-v-6e4dbe9e>
<div class="col-17 podcasts-group" data-v-6e4dbe9e>
<div class="loading-spinner" data-v-6e4dbe9e> //the devil himself
<div class="spinner" data-v-ac3cb376 data-v-6e4dbe9e>
<div class="rect1" data-v-ac3cb376></div>
<div class="rect2" data-v-ac3cb376></div>
<div class="rect3" data-v-ac3cb376></div>
<div class="rect4" data-v-ac3cb376></div>
<div class="rect5" data-v-ac3cb376></div>
</div>
</div>
<div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
//Here should be stuff!
</div>
</div>
</div>
the code that achieves this:
String selector = "div.podcasts-items";
Elements elem = Jsoup.connect(link).get().select(selector)
System.out.println("html: "+elem.html());
This is what i would like to see (copied from inspect element after the page has loaded all the content):
<div class="row" data-v-6e4dbe9e>
<div class="col-17 podcasts-group" data-v-6e4dbe9e>
<!----> //begone evil!
<div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
</div>
</div>
</div>
Google doesn't help much, because every content related to spinners etc. is about javascript.
solution:
due to the fact that JSoup only loads the HTML and does not execute any javascript the page never had a chance to load the content. You would have to use an actual browser engine or a webdriver like selenium to get the data to load.
For this specific problem I was able to get the content directly via loading the Json data through this webpage's API.
If I understood your question then your best bet is to use Selenium driver. Link to similar question
In my cordova application i used Jquery mobile(v 1.3.2) and thomas jbradly Sign plugin.In my application i have one signature field(canvas to draw sign) and some fields.
Like below code:
<div data-role="page" id="page1">
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<button>Button1</button>
</div>
<div class="ui-block-b" style='margin-top: 2%;'>
<b><label>Label 1</label></b>
</div>
</div>
<div data-role="fieldcontain"></div>
<div id="signaturePart">
<div class="sigPad">
<b><label>Put Your Sign Here</label></b>
<ul type="none">
<li class="clearButton">Clear</li>
</ul>
<div class="sig">
<canvas class="pad" width="550" height="200" id="mKundusskirt"></canvas>
<input type="hidden" name="output" class="output">
</div>
</div>
</div>
</div>
</div>
When put signature in canvas filed the duplicate of canvas field is displayed above the original field.
Before Signing the canvas:
After Signing the canvas:(Create duplicate of original canvas)
NOTE*:
When remove the Jquery mobile the signature field working fine.
For reference: Signature Css
Signature Js
Please help me to solve the problem..
try to apply the CSS overflow:hidden on the div which contains the class="sig".
In the HTML document there is script tag that contains some javascript function
<div class="container">
<div id="container2">
<div id="container3">
<script>
loadme ('main');
</script>
</div>
</div>
But when I do 'Inspect Element' on browser, instead of this, appears a block of tags.
<div class="container">
<div id="container2">
<div id="container3">
<div class="content">
<div class="contenthead">
Some Text
</div>
<div class="c1">
<div class="c2">
<form id="myForm">
<label>
Text
</label>
</form>
<div class="c3">
<a href="#" onclick="javascript:f1('Text', 0, 0)">
</a>
</div>
<div class="clear">
</div>
</div>
...
I want to get this block with my own app but I cannot. I use Delphi TWebBrowser to do this.
How can I get this HTML code using Delphi WebBrowser?
Yes, obviously. because while inspecting through Firefox Firebug or Chrome Firebug or IE Firebug, you can't see the script like the one you mentioned.
And you can see your script tag by viewing through Source Window (ctrl + u => shortcut to open source window for Chrome and Firefox. )
I have a relatively complex, but pretty typical I'd assume, layout using dojo 1.6.1.
It loads up quick enough but when I resize the browser, it take a bit of time for the layout to catch up. The strange thing is that the resizing is lightning fast on IE6 for a change.
The following is the partial HTML showing the structured:
<body class="claro">
<div dojoType="dijit.layout.BorderContainer" id="page">
<div dojoType="dojox.layout.ExpandoPane" region="top">
<div id="mainheader" dojoType="dijit.layout.ContentPane" region="top">Page Header</div>
</div>
<div dojoType="dijit.layout.BorderContainer" region="center">
<div dojoType="dojox.layout.ExpandoPane" region="left" style="width: 20em;">
<div id="mainnav" dojoType="dijit.layout.ContentPane" region="left">Page Nav</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="center">
<div dojoType="dijit.layout.BorderContainer" region="center">
<div dojoType="dojox.layout.ExpandoPane" region="top">
<div dojoType="dijit.layout.ContentPane" region="top">Main Top</div>
</div>
<div dojoType="dijit.layout.TabContainer" region="center" tabStrip="true">
<div id="maincontent" dojoType="dijit.layout.ContentPane" region="center" href="large_data.htm" title="Tab 1">
</div>
<div dojoType="dijit.layout.ContentPane" title="Tab 2"></div>
</div>
</div>
</div>
</div>
</div>
</body>
The effect is more dramatic as the data that gets loaded up into one of the tab panes, gets larger. It doesn't have to be too large - any sizable HTML table will do the job.
I know I have some redundant layout components in there which I can remove. But the speed gain isn't all that much.
If I put a single BorderContainer and a ContentPane and load up the data in there, the resize is obviously quick enough (although still not as fast as IE6!)
Note that I've tried using time-delayed resizing (i.e. debouncing) as well with not so much benefit.
If anyone can provide insights into why this happens or a workaround, I'd appreciate it.
I'm trying to get the jQuery gallerific plugin working at http://justrecip.es/ViewRecipes.aspx?recipeid=S9ML32WQO3&act=view . The gallery is loaded correctly, but neither the thumb grid nor the navigation (next/previous image) buttons work. There are no script errors, but it seems this is a JavaScript problem of some sort.
Try this
<div class="gallery-content">
<!-- Move controls above slideshow -->
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container">
<div class="photo-index"></div>
</div>
</div>
jsFiddle example