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.
Related
I'm utilizing the Owl Carousel library for a slider on a partner's page. It's working pretty well except for setting the frequency and speed of the transitions.
I've followed the documentation and have the script, but it doesn't seem to be working properly. Below is the HTML and JS that I'm using. I've also linked to the page here: http://www.circuitclinicaltesting.com/our-partners.php
Like I said, all I'm trying to do is change the speed and frequency of the slides but it doesn't seem to work.
HTML
<div class="owlcarousel">
<section class="partner_slider slider_section header_height">
<ul id="main-slider" class="owl-carousel main_slider">
<div class="display-table">
<div class="table-cell">1
<div class="container">
<div class="col-md-1"></div>
<div class="slider_content">
<h2 class="text-left txt_white">PARTNER PERSPECTIVE</h2>
<h3>"Circuit Clinical provides us with the opportunity to shift the current paradigm when it comes to clinical research. They have been able to integrate research within our practice without the upfront cost."</h3>
<h2 class="txt_white">Dr. Raul Vazquez, MD</h2>
<p>Urban Family Practice</p>
</div>
</div>
</div>
</div>
<div class="display-table">
<div class="table-cell">
<div class="container">
<div class="col-md-1"></div>
<div class="slider_content">
<h2 class="text-left txt_white">PARTNER PERSPECTIVE</h2>
<h3>“Until now, I haven't had the opportunity to participate in clinical research because we didn’t have the infrastructure in place to do so. Circuit Clinical has provided the tools and infrastructure while also bringing the trials to us so we can begin enrollment immediately.”</h3>
<h2 class="txt_white">Dr. Dennis B. Chugh, MD</h2>
<p>Northtowns Cardiology</p>
</div>
</div>
</div>
</div>
</ul>
</section>
</div>
</div>
JS
<script>
$(document).ready(function() {
$("#main-slider").owlCarousel({
slideSpeed : 10000,
autoPlay : true,
autoplaySpeed:10000
});
});
</script>
I managed to figure it out. It was looking for autoplayTimeout. Adding the following to the script settings solved the issue!
autoplayTimeout: 10000,
smartSpeed: 1000,
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
I need to put the scrolling behaviour on the body rather than the HTML, due to using CSS Parallax. However, I have got an issue with adding sticky classes to my header using JavaScript.
I need to be able to detect that the body has scrolled, this works fine, however i'm unable to get the offset that the user has scrolled to!
I have tried everything when is online, for example:
$('body').scrollTop()
document.body.scrollTop
document.getElementsByTagName('body')[0].pageYOffset
None of this is working, it always returns 0!
Edit:
I can't modify any of the HTML apart from what is between the comments.
<html>
<body>
<div itemscope itemtype="http://schema.org/AutoDealer">
<div id="main-wrap" class="parallax">
<div class="row">
<div class="main twelvecol">
<!-- Editable -->
<div>
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer"></div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer">
<p>This is all of the top level content</p>
</div>
</div>
</div>
</div>
</div>
<!-- END Editable -->
</div>
</div>
</div>
</div>
</body>
</html>
here is a codepen showing the various examples not working
https://codepen.io/anon/pen/RgPrQv
You are looking for
$(window).scroll(function() {
$(window).scrollTop();
});
Hey i am pretty new to both bootstrap and fullpage.js, the issue i am having is the want to load multiple images using the grid system from bootstrap within one of my sections, i currently have multiple sections working however this issue with images has proved a bump in my road.
<div class="section">
<div class="jumbotron">
<div class="container">
<h1>Tree Kangaroos</h1>
<p>What are they exactly?</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col1-sm-4">
<img src="images/face.png" />
</div>
<div class="row">
<div class="col1-sm4">
<img src="images/face.png" />
</div>
</div>
</div>
</div>
</div>
This is the code i am having trouble with, everything else implemented so far with fullpage is working and there is no java script included with bootstrap(to my knowledge) so i have not shown the entirety of my code as its rather large my jumbotron is also working so i'm guessing bootstrap is working as intended and the issue is with my coding itself.
The exact issue is that my images stack on top of each other rather than horizontally.
Your problem is with your columns those are not valid bootstrap classes..
Col-md-4 is what you are looking for.
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.