We Keep Coding

How to hide the div until the page load then show after the page completely loaded?

I want to hide the div till page load the i want show that div after the page is completely loaded, for that in my phtml file i tried this.
<div id='pilot' style="display : none">
<div class="trustpilot-widget" data-locale="en-US" data-template-id="5406e6b0d049e042d5f" data- businessunit-id="54c2a000ff00057c" data-style-height="28px" data-style-width="100%" data-theme="light">
Trustpilot
</div>
</div>
<script>
$(document).ready(function() {
$("#pilot").show();
});
</script>
But its not working, any help can be appreciated.

If your jQuery library is loaded in to the DOM and you can't see any errors on the console, then this code should work for 100% sure.
If this is your content all on the page, that will be rendered during milliseconds, so your jQuery code will be executed in no time. Make delayed showing the DIV, and in that case will seem like loaded after the page rendered.

Set page scroll position on page load of MVC view with javascript

I've been trying to automatically go to the bottom of the web page upon page load. On the get AND the post, in fact, no matter how the view has been called, it has to go automatically to the bottom of the page.
I want to do it with javascript.
Seemed like something simple, something I could find in here easily. Well this looks like it :
Set page scroll position on page load of MVC app
There is only one problem... The answer doesn't put the javascript solution in context. And without context... I have no idea where to put these line, no matter what I try...
I won't play all day to know how to accomplish this, so HERE'S A CONTEXT :
#model WhateverModelYouWant
#{
ViewBag.Title = "Formulaire de reprise";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
document.getElementById("ImportantStuff").scrollIntoView();
</script>
<h2> TITLE OF THE VIEW <h2>
<div> Lots of content here </div>
<div> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>
<input type="submit" value="ImportantButton" >
Needless to say this doesn't make the page scroll anywhere... Thanks in advance.
ERROR :

In your example nothing can be scrolled anyway because everything is in the visible area. Apart from that mituw16 already gave you the right solution. Here is an example how to use the scrollIntoView function.
<script type="text/javascript">
function scrollToImportantStuff() {
document.getElementById('ImportantStuff').scrollIntoView()
}
window.onload = scrollToImportantStuff;
</script>
<h2> TITLE OF THE VIEW <h2>
<input type="button" onclick="document.getElementById('ImportantStuff').scrollIntoView()" value="Scroll ImportantStuff into View" />
<div style="height:500px;"> Lots of content here </div>
<div style="height:500px;"> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>

This doesn't really have anything to with MVC. It is accomplished with javascript.
document.getElementById("ImportantStuff").scrollIntoView();
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

JavaScript uk-modal-close and reload page

Hi i am using http://getuikit.com/docs/modal.html on my site,
my code as below
Click to open modal
<div id="my_modal" class="uk-modal">
<div class="uk-modal-dialog">
<h1>Title</h1>
<p>...body ...</p>
<div class="uk-modal-footer">
Cancel <!-- Just close the modal -->
<!-- Call external link -->
</div>
</div>
</div>
i want to refresh background when some one click Cancel, i am noob in js but done some research and found
location.reload(true);
this will help in reload page but don't know how can i use it, can any one help
Answer . add this in end of page
<script>
$('.uk-modal').on({
'hide.uk.modal': function(){
location.reload(true);
}
});
</script>

As per the documentation here, you may use the hide.uk.modal event, which is trigged whenever the modal is closed. In the event handler, you can use the reload functionality. Include jQuery file as well.
$('.modalSelector').on({
'hide.uk.modal': function(){
location.reload(true);
}
});

Change html content and url without reloading the page

I see many websites such as gitHub changing it's html content and URL without refreshing pages.
I find one possible way to do this in HTML Histroy API.
Here is the code.
HTML
<div class="container">
<div class="row">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="row">
<div class="col-md-6">
<div class="well">
Click on Links above to see history API usage using <code>pushState</code> method.
</div>
</div>
<div class="row">
<div class="jumbotron" id="contentHolder">
<h1>Home!</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
home.html
This is home page
about.html
This is about page
contact.html
That one is content page
JAVASCRIPT
<script type="text/javascript">
jQuery('document').ready(function(){
jQuery('.historyAPI').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
// Getting Content
getContent(href, true);
jQuery('.historyAPI').removeClass('active');
$(this).addClass('active');
});
});
// Adding popstate event listener to handle browser back button
window.addEventListener("popstate", function(e) {
// Get State value using e.state
getContent(location.pathname, false);
});
function getContent(url, addEntry) {
$.get(url)
.done(function( data ) {
// Updating Content on Page
$('#contentHolder').html(data);
if(addEntry == true) {
// Add History Entry using pushState
history.pushState(null, null, url);
}
});
}
</script>
This code is working fine even you go back or forward in browser.
But the problem is that when you refresh page it only shows the file which is being refreshed. For example, if you refresh the about.html then only the following will show: This is the about page.
Unlike the gitHub it can't show the complete page. As you see in gitHub, even you refresh a page it will show the page same as how it was before refreshing.
How can I do that?
Thanks...

You may use Routie or Director to do the routing. And within their callback functions write the code to update the part of your HTML page, for this you may use Fragment.js.

You can change DOM anytime you want without loading the page.
Use fundamental XMLHTTPRequest or Ajax to contact the server without refreshing the browser.
There are many frameworks which offer convenient url routing which can change content automatically without page refreshes. Angular JS is my favorite such framework which offers great routing capability among many other things.

You have to check/set the value of your variable on the event onload of the page.

Your code does not work - when you click on a particular link the page does refresh. correct me if i am wrong.

JS - How to make Boxes collapsable in AdminLTE ( is using Bootstrap) when Content dynamical loaded

I'm using the AdminLTE Skin from https://almsaeedstudio.com/
I want to load the page content dynamically when clicking on the menu on the left side. I made this via jQuery:
<li><i class="fa fa-circle-o"></i>Test</li>
But when in Test.php is a collapsable box like this:
<div class="box box-primary">
<div class="box-header with-border">
<i class="fa fa-medkit"></i>
<h3 class="box-title">Test Box</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="box-body">TestContent</div>
</div>
The box is not collapsable when I click on the button nothing happens.
When I don't load the Content dynamically the button is usable. What is the matter here?
Thanks for your help.

I'm facing the same situation.
When I was looking for a workaround I've managed to discover what seems to be the real problem.
If you take a good look at app.js you'll see that there are many activate methods that scan the page to find out if a component is been used and then transforms or injects the behavior for the component.
That seems to be the case to boxes (Collapsable and closeable ones at least).
If you reload the script ($.getScript(app.js)) the box will work, but unfortunately other components will stop working (sidebar and control-sidebar).
If you want just the boxes to work inside de content-wrapper, one way is to call:
$.AdminLTE.boxWidget.activate();
You can do this on the $(document).ready() function of your content.
I'm still finding a better way to do this, but as far as boxes go, this should do the work.
Regards,
Jonatan Neves

I ran into the same issue, and ended up changing app.js so that the box widget listeners are on the document instead of the actual elements found when activate() is called. This guarantees dynamically added elements will be found:
$.AdminLTE.boxWidget = {
selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
activate: function () {
var _this = this;
//Listen for collapse event triggers
$(document).on('click', _this.selectors.collapse, function (e) {
e.preventDefault();
_this.collapse($(this));
});
//Listen for remove event triggers
$(document).on('click', _this.selectors.remove, function (e) {
e.preventDefault();
_this.remove($(this));
});
},
//...
}