Remove Preloaded - javascript

I have some problem to remove preloader from my html template when i remove code from html file and js file preloader removed but also slideshow not showing up, so please provide proper way to remove preloader from my website, here is the code
Html page code
http://metroz.in/K/
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
and here was js file script
http://metroz.in/K/js/custom.js
$win.load(function(){
$('#status').fadeOut(defaults.speedAnimation);
$('#preloader').delay(defaults.speedAnimation)
.fadeOut(defaults.speedAnimation/2, function() {
that.fSize();
that.activate();
that.sliders();
setTimeout(function(){
that.fMiddle();
}, 10);
setTimeout( function(){
that.fNum();
$('.layer').height(
$doc.height()
);
}, defaults.speedAnimation/2);
that.chars();
that.bars();
that.histLine();
that.headerScroll();
that.ytVideo();
if (!onMobile){
$win.stellar({
horizontalScrolling: false
});
}
});

you can use : $("#preloader").remove(); to remove the div.

Related

how to hide content div after page reloading

I am using this javascript for collapsing and expanding a div in which is some information. The div has class .info.
After page reloading, you can see first that the div is visible, but within a second, when the js is loaded, it disappears.
How can i achieve that when reloading the page, also at the very first second time the div is not visible?
$( document ).ready(function() {
var $accordionIO = $('.accordion .toggle-button');
$accordionIO.prev('div').hide();
$(".accordion .toggle-button").click(function () {
//Inner
var jqInner = $('.info', $(this).parent());
if (jqInner.is(":visible"))
{
jqInner.slideUp();
$(this).find('.button-switch').html('Information');
}
else
{
jqInner.slideDown();
$(this).find('.button-switch').html('Close');
}
});
});
The html:
<!-- Start toggle script -->
<div class="accordion">
<div class="info">
<?php
include('includes/information.txt');
?>
</div>
<div class="toggle-button"><span class="button-switch">Information</span> </div>
</div>
Please try adding inline style attribute. See example below:
<div style="display:none;"></div>

Gif wont animate on hover

I saw this post and I tried to replicate the code: Stop a gif animation onload, on mouseover start the activation. I can't seem to get it to work though. My goal is to swap the image with a gif on hover. Does someone know why the image isn't swapping?
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "images/portfolio/form.gif");
},
function() {
$(this).attr("src", "images/portfolio/form.jpg");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp">
<div data-content="Project 1" class="image">
<a class="a-block" href="#">
<img id="imgAnimate" src="images/portfolio/form.jpg">
</a>
</div>
</div>
</div>
Here is a live link to my example: http://fosterinnovationculture.com/dcc/index.html
From what your page is saying jQuery is undefined. So either you are trying to execute jquery code before jquery is executed.
I executed this code on your site just to testing things out and it seems to be working
function mousein () {
$(this).attr("src", "images/portfolio/form.gif");
console.log('hello')
}
function mouseout () {
$(this).attr("src", "images/portfolio/form.jpg");
}
console.log($('#imgAnimate').hover(mousein, mouseout));
I did notice though that because of some styling issues the hover was never actually hitting the img it was actually hitting the .image:after css psuedo selector so you need to reorganize your html or change the way you select the element you want to switch the src of.
just to test in your html move the image outside of
<div class="image">image</div>
Yes its correct as told by #madalin ivascu, you need to add jquery at header and it will work.
Like this,
HTML
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgAnimate").hover(
function() {
$(this).attr("src", "banana.gif");
},
function() {
$(this).attr("src", "banana.png");
});
});
</script>
</head>
<body>
/* include your html part here */
<a class="a-block" href="#">
<img id="imgAnimate" src="banana.png" alt="">
</a>
</body>
Try this, Instead of using hover, try that using mouseenter and mouseleave.
$(document).ready(function(){
$(".row").find('img').mouseenter(function(){
if($("#imgAnimate").attr('src','form.jpg')){
$("#imgAnimate").attr('src','form.gif');
}
$(this).mouseleave(function(){
if($("#imgAnimate").attr('src','form.gif')){
$("#imgAnimate").attr('src','form.jpg');
}
});
});
});

Call function if or after an element has been Loaded

My question is how to trigger or call a function after an element has been loaded or element on the page and don't want to wait for the full page load.
Example Fiddle: http://jsfiddle.net/8bJUc/275/
Problem Fiddle: http://jsfiddle.net/8bJUc/274/
Call JS:
document.getElementsByClassName("owlCarousel").onLoad = function(){
// do stuff
$("#owl-demo").owlCarousel({
navigation: true,
pagination: true,
lazyLoad: true
});
};
HTML:
<span class='slide'>
<div id="owl-demo" class="owl-carousel"> <!-- If .owl-carousel has been loaded -->
<div>
<!-- Contents -->
</div>
</div>
</span>
So i mean that if .slide has .owl-carousel class then call function will be work.
Expecting suggestions?
The div is loaded almost inmediately when the body loads. It has no onload event and the only way to execute a script just after it finished loading is appending the script just after it in the DOM (as some other answers suggested).
Fiddle with this option implemented.
Note that you need to wrap the script in the header of your page in order to make things work (look at the jsfiddle options I set)
In your HTML it'd look like
<head>
... rest of your stuff ...
function launchScript() {
// do stuff
$("#owl-demo").owlCarousel({
navigation: true,
pagination: true,
lazyLoad: true
});
}
</head>
And then:
<div id="owl-demo" class="owl-carousel"> <!-- If .owl-carousel has loaded-->
...
</div>
<script>
launchScript();
</script>
How about this:
$(function(){
if ($('.slide .owl-carousel').length){
//call function
}
});
If it needs to be done as soon as possible, you could manually invoke it immediately after the element it relies on is defined.
function asap() {
// ...
}
<div id="owl-demo" class="owl-carousel">
<!-- ... -->
</div>
<script>
asap();
</script>
Example fiddle (open your console)

Javascript loading / spinning image/icon while loading the search results

I just want to understand more of the previous post from this site and w3school, where the loading image/icon is displayed while loading the page content.
Here's the script I've re-used -
<script type="text/javascript">
$(document).ready(function(){
$('#Btn_5').click(function() {
$('#spinner').show();
});
});
</script>
Here's the form section and script -
<form id="iform" method="get" action="">
Search: <input type="text" id="search_box"><br>
<div id="Btn_5" class="btn">Search</div>
</form>
<br>
<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="http://www.w3schools.com/jquery/demo_wait.gif" alt="Loading"/>
</div>
<br>
<body>
<script type="text/javascript">
...
$( "div.content:contains('"+ filterarray[i] +"')").css( "display", "block" );
$("#results").append(results);
...
</script>
<div id="results"></div>
</body>
I have this loading icon spinner, but it doesn't work after the results are displayed. It only spins when button (Btn_5) is clicked and loading icon disappears when the page reloads.
QUESTION: I want to run the loading/spinning icon from the start of the button click until all content under the are displayed. Is there a way to do this?
I hope I am understanding correctly.
But, you want to show the spinner before:
$("#results").append(results);
and hide it after the results are appended?
If that is the case, then you should just be able to do;
$('#spinner').show(); //show spinner
$( "div.content:contains('"+ filterarray[i] +"')")
.css( "display", "block" ); //not sure what you are doing here
$('#results').append(results); //append results, which you have not defined in example
$('#spinner').hide(); //hide spinner
Use that as
//before load
window.onbeforeunload = function () { $('#spinner').show(); }
//after loaded
$(window).load(function() {
$('#spinner').hide();
});

jquery loading spinner or loading message while JS running

Is there a way to show a loading spinner while my javascript is running?
I want toshow something to the user while the page is waiting.....
This is taking about 5-6 secs..so I want to show a spinner or box while its waiting
$.each(ARRAY, function(key, item){
//IM DOING SOME LOGIC HERE
});
Add a hidden loading image in your page, display it when you start you function and hide it again when the function completes.
<img src="loading image " id="loading">
function(){
$("#loading").show();
your logic
$("#loading").hide();
}
This is just the first thing that came to mind. Probably not the best solution. But it does the job.. You could define a loading div and hide it by default. Then, while the each is doing its thing, show the loading div. So something like:
CSS:
.hidden{display:none;}
HTML:
<div class="loading hidden"></div>
JavaScript:
function(){
$('.loading').removeClass('hidden');
$.each(ARRAY, function(key, item){
});
}
Try this. Works for me with a bootstrap 5.2 spinner, with the following referenced in the html:
bootstrap 5.2 stylesheet
referencing the bootstrap bundle script
jquery script
$function doLogic() {
$("#loadingImg").css('visibility','visible');
setTimeout(function() { // allow spinner to load before work starts
// logic here to load page
$("#loadingImg").hide();
},5000); //5000ms = 5secs
}
#loadingImg {
width: 3rem;
height: 3rem;
align-self: center;
visibility: hidden;
}
<div id="spinnerContainer">
<div id="loadingImg" class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
This may be helpful for AJAX logic:
<img id="loadingImg" src="loding.gif"/>
$('#loadingImg')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
The ajaxStart/ajaxStop functions will fire whenever you do any AJAX calls and displays the loading spinner.
Alternatively, this may be helpful too:
function doLogic() {
$('#loadingImg').show();
setTimeout(function() { // allow spinner to load before work starts
// logic here
},500);
$('#loadingImg').hide();
}

Categories