We Keep Coding

How to load HTML after content has been loaded

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

Bootstrap: move div from one column to another, order counts for mobile devices

<div class="row">
<div class="col-lg-7">
<div>block1 with IDs and classes</div>
<div>block2 with IDs and classes</div>
</div>
<div class="col-lg-5">
<div>block3 with IDs and classes</div>
</div>
</div>
How to make it look like
block1
block3
block2
for mobile?
P.S. Of course I took a look at this questions before I asked mine:
SO: How do I change Bootstrap 3 column order on mobile layout?
It doesn't help.
Also, adding hidden-xs and visible-xs for two blocks of
<div>block2 with IDs and classes</div>
in different places doesn't help as IDs should be unique on the page.
Any suggestions? Thank you.
Example:
IMPORTANT: block 3 may be (and it is) taller (the height is bigger) than block1.

No need to use push/pull. Just think "mobile-first"..
<div class="row">
<div class="col-lg-7">
<div>block1</div>
</div>
<div class="col-lg-5">
<div>block3</div>
</div>
<div class="col-lg-7">
<div>block2</div>
</div>
</div>
http://www.codeply.com/go/jgvSJrMOnk
In the case where block 3 is taller than the other columns, create a special class to float it to the right on large screens..
#media (min-width:1200px) {
.pull-lg-right {
float:right;
}
}
Related:How do I change Bootstrap 3 div column order
Bootstrap with different order on mobile version (Bootstrap 4)

using push and pull properties of grid will do your work try this the push and pull will be only applied for small device
<div class="row">
<div class="col-lg-3">block1 with IDs and classes</div>
<div class="col-lg-3 col-sm-push-12">block2 with IDs and classes</div>
<div class="clearfix visible-lg-block"></div>
<div class="col-lg-6 col-sm-pull-12">block3 with IDs and classes</div>
</div>
Edit clearfix added for large device

Element unexcpectedly hidden on some instances of Safari, always appears in Firefox, Chrome

I've created an angular app the acts as "bounce" page for a social iOS application, that is in public beta.
Users can share their profiles among each other as a link to the site.
If the page is opened on an iOS device, and the app is installed, it opens the app using the app's URL scheme. Otherwise it redirects to the App Store.
For all other devices, android, desktop, etc it just renders a simple information page.
The problem:
On one instance of Safari, two elements of the page are not rendered.
Missing elements:
"Instruments" label below the profile name does not appear.
Copyright, privacy and terms and conditions does not appear.
On all other instances of Safari, also Chrome and Firefox, it appears correctly as follows:
The site is implemented using Angular + Bootstrap.
Page source for the section with the missing instruments label is:
<div ng-show="vm.loaded">
<div class="row">
<div class="col-sm-4 col-sm-offset-4 profile-container">
<div class="row">
<div class="col-xs-12" style="min-width: 300px !important;">
<div class="card hovercard">
<div class="photo-container">
</div>
<div class="useravatar">
<img ng-src="{{vm.profile.coverPhotoURL}}" vpr-load="vm.onImageLoaded()">
</div>
</div>
</div>
<div class="col-xs-12 text-center" style="margin-top: -10px">
<span class="profile-title">{{vm.titleText()}}</span>
</div>
<div class="col-xs-12 text-center" style="margin-top: 8px">
<span class="profile-sub-title">{{vm.instruments()}}</span>
</div>
<div class="col-xs-12 text-center" style="padding-bottom: 20px">
<span class="profile-genres">{{vm.genres()}}</span>
</div>
</div>
</div>
</div>
And the footer is as follows:
<footer class="vFooter hidden-xs">
<div class="container">
<div class="row">
<div class="col col-xs-6 text-center" style="height: 80px">
<div class="vertical-center">
<p class="copyright vertical-center" style="margin-top: 20px; margin-bottom: 20px">
<span class="text-nowrap">© Vampr Pty Ltd 2016 | <vpr-link-bar></vpr-link-bar></span>
</p>
</div>
</div>
(etc, etc)
(some closing <div> tags not shown in source snippet above)
Question:
Without having access to the machine where the problem occurs, how can I debug and correct the issue?
I found a similar problem on another instance of Safari that seemed to be caused by AdBlock - disabling it made the elements appear correctly. However the elements in question were different once - the social media buttons.

The problem appears to have been caused, simply, by an unescaped ampersand '&' character in the HTML source. Fixing this solved the problem. I'm not sure why the issue occurred only on one particular instance of Safari out of many others.

Angular ng-click ordering

New to Angular, so far loving it. I've come so far in creating a list of thumbnails. I've added 3 sort buttons order the thumbnails by 3 different data values. All works great but to make it a little more less confusing for the user I would like to reset/turn of ordering for one data set when another order button is clicked. EG - https://jsfiddle.net/5wayfc4z/
From the fiddle you will notice when you click on country its becomes orederd by "country" when you then click on "a-z" it will sort the data by attraction but the "country" sorting will be still showing - to turn this off I need to click on country again. I only want to sort one field one at a time if that makes sense?
<div id="buttons" class="row">
<div class="col-sm-6 col-md-4">
a-z
</div>
<div class="col-sm-6 col-md-4">
Country/State
</div>
<div class="col-sm-6 col-md-4">
type of attraction
</div>
</div>
<article>
<div class="row">
<div ng-repeat="selfieObj in sticks | filter:searchAttraction | orderBy:predicate:reverse">
<div class="col-xs-12" ng-show="newGrouping($parent.sticks, 'country', $index);">
<h2 ng-show="villa">{{selfieObj.country}}</h2>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img ng-src="{{selfieObj.mainImage}}" alt="{{selfieObj.attraction}}" title="{{selfieObj.attraction}}">
<div class="caption">
<h3>{{selfieObj.attraction}}</h3>
<p class="text-center">
{{selfieObj.answer}} {{selfieObj.info}}
</p>
</div>
</div>
</div>
</div>
</div>
</article>
EDIT:
https://jsfiddle.net/5wayfc4z/ new fiddle to take away the styling so it does not confuse.
To see my issue click on "country/state" - you will see the filter work by sorting by country and adding the country name. Then click on "a-z" this works BUT you will notice the filter for "country/state" is still in effect - in order to remove the "country/state" you have to click that filter button again.

The sorting seems to work fine in your fiddle, so is this just a visual issue?
Just remove the initial states from the buttons:
class="btn btn-primary btn-block"
instead of adding active or inactive by default.
I have forked your fiddle with the fix: fiddle

Which one is the better way for performance to set a hover event on a div?

Which one is the better way for performance to set a hover event on a div with class 'con'?
Is there any difference?
$('.con').hover(func(){});
$('.content0.content.%etc%.con').hover(func(){});
var con = $('.con'); con.hover(func(){});
<script>
$('.con').hover(func(){});
</script>
<div class="content0">
<div class="content">
<div class="fl grad">
<div class="fl bor_rad bor_gray adver1">
<div class="clear">
<div class="fl left_ot">
<div class="bor_orang h150">
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

There's no significant difference between the three ways you listed, provided the two different selectors you've given select the same elements.
Note that the element lookup is done once, when you do the $("selector here") part. It's not repeated when the hover occurs.
Side note: Probably 95% of what I've seen people do in hover event handlers can, on modern browsers (e.g., not IE7 and earlier), be better achieved with CSS using the :hover pseudoclass. The other 5% can't, and you haven't said what you're doing and it may well be in that 5%, but I thought I'd point it out... :-)

1. $('.con').hover(func(){});
2. $('.content0.content.%etc%.con').hover(func(){}); var con =
3. $('.con'); con.hover(func(){});
all three work but they take time
because every time jQuery search in all document(DOM) then come to your selector
so use context by this we tell in jQuery that search not in all document but search form this element like below..
in your html
<div class="content0">
<div class="content">
<div class="fl grad">
<div class="fl bor_rad bor_gray adver1">
<div class="clear">
<div class="fl left_ot">
<div class="bor_orang h150">
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
<div class="w130 bgfff txc pab10 con">
More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
now if you write
$('.con').hover(func(){});
then it reach your selector by following way
first go to
document
|
body
|
content0(class)
|
content (class)
|....
...
then at last your selector '.con'
so it will take time
to get better result define context by this it know from where it search your selector like
$('.con','.content0').hover(func(){});
now it reach your selector by following way
first go to
content0(class)
....
...
then at last your selector '.con'
Context really helps when you have a much larger DOM that you are searching through. Searching for IDs is already very fast and context doesn't really help that much in that case. Where context can really make a difference is when you are selecting by tag name or class.
Try testing like this: http://jsbin.com/aciji4/4
you can really see the timing get better for context when you bump up number of items in the DOM like this: http://jsbin.com/aciji4/6
reference Performance of jQuery selector with context