I'm currently working on an UI using HTML5 and jQuery. I try to make a load screen for my app, thus select a div in the onload event and fade it out, once the page is fully loaded.
My coding looks like this:
jQuery:
$(document).ready(myApp.init);
$(window).on("load", function () {
console.log("load");
$("div.loadScreen").fadeOut();
});
HTML:
<div class="container">
<form method="POST">
...
</form>
</div>
<div class="loadScreen">
<span>loading...</span>
</div>
CSS:
div.loadScreen {
opacity: 1;
background: #123;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
It shows the log message "load", but the selection of the div doesn't work.
Do you have an idea how to solve this issue?
Thanks :)
I removed the first line of your jQuery/js and it worked:
https://codepen.io/anon/pen/yXaoER?editors=1111
$(window).on("load", function () {
console.log("load");
$("div.loadScreen").fadeOut();
});
div.loadScreen {
opacity: 1;
background: #123;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form method="POST">
...
</form>
</div>
<div class="loadScreen">
<span>loading...</span>
</div>
Hope this helped!
It seems there was no problem
$(window).on("load", function () {
console.log("load");
$("div.loadScreen").fadeOut();
});
div.loadScreen {
opacity: 1;
background: #123;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form method="POST">
...
</form>
</div>
<div class="loadScreen">
<span>loading...</span>
</div>
in first line of code you use $(document).ready(myApp.init);, are you sure before loaded completely do any change in html file?
in your browser see console log for error that prevent to run successfully or if not seen , add more detail of your code in question.
Related
I am trying to implement a new behavior when the user click on the button .employers-button I am going to scroll down to the form #contactin JS.
I implemented a function with window.scrool and the current top is top: 200 (as it as to be a value).
It is working but how can I replace the top: 2000 by top: contact? I tried to put contact instead of 2000 but it is not going down at all since it was to be an int
const goToContact = () => {
const button = document.getElementsByClassName("employers-button")[0];
const contact = document.getElementById("contact");
button.addEventListener("click", ()=>{
event.preventDefault();
window.scroll({
top: 2000,
behavior: 'smooth'
});
});
}
Use element.scrollIntoView() with behavior:smooth to scroll to specific element and to avoid any hacks.
codepen:https://codepen.io/murliprajapati/pen/RwwLYyR
function scrollToElement() {
var elmnt = document.getElementById("content");
elmnt.scrollIntoView({behavior:'smooth', block:'start'});
}
#myDIV {
height: 250px;
width: 100%;
overflow: auto;
background: green;
}
#content {
margin-top:500px;
height: 800px;
width: 100%;
background-color: coral;
}
<html>
<head>
</head>
<body>
<div id="myDIV">
<button onclick="scrollToElement()">Scroll</button>
<div id="content">
Some text inside an element.
</div>
</div>
</body>
</html>
You can use anchor tags
.big-space{
height:2000px;
}
Button that scroll
<div class="big-space">
</div>
<form id="myForm">
<label>form here</label>
<input type="text" />
</form>
For the smooth transition, I made the following fiddle. The property you were looking for is offsetTop. Hope this help!
const button = document.getElementById("employers-button");
const contact = document.getElementById("contact");
button.addEventListener("click", ()=>{
window.scroll({
top: contact.offsetTop,
behavior: 'smooth'
});
});
html,
body {
height: 3000px;
background-image: linear-gradient(red, yellow);
}
#contact {
margin-top: 1800px;
height: 200px;
background-color: green;
}
<button id="employers-button">Let's scroll!</button>
<div id="contact">Contact</div>
Did you try something like:
VANILLA
top: contact.offsetTop;
Or JQUERY
top: contact.offset().top;
// but if you want it positioned relative to the closest positioned parent:
top: contact.position().top
Contact, in this case, is a DOM element, and as you rightly mentioned the top property of window.scroll expects a number.
I'm trying to show a modal window on top of the screen when user submits the form.
I want to disable form (show some loading icon) to show that button was clicked and action is being processed, because sometimes on mobile it's not so clear for our users
On PC browsers (Firefox, IE, Opera) everything works fine, but on Android or WP 8.1 div overlay is not shown after submitting the form.
Do you have any idea how to resolve this issue?
Maybe some other approach?
My sample code:
<script type="text/javascript">
function ShowLoadingPanel() {
document.getElementById('loadingPanel').style.display = 'block';
document.getElementById('overlay').style.display = 'block'
}
</script>
<body>
<div id="loadingPanel" class="loadingPanelStyle"></div>
<div id="overlay" class="blackOverlay"> </div>
<form id="form1" runat="server" onsubmit="return ShowLoadingPanel();">
//some content
<asp:Button runat="server" ID="xNext" Text="Next" OnClick="xNext_Click" />
</form>
</body>
And some CSS for modal window
.loadingPanelStyle
{
display: none;
position: fixed;
background:url(../img/load2.gif) no-repeat center center;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
font-size: small;
z-index: 1002;
overflow: auto;
}
.blackOverlay
{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
After some hints from #Velimir Tchatchevsky I found solution which is working.
function ShowLoadingPanel() {
document.getElementById('loadingPanel').style.display = 'block';
document.getElementById('overlay').style.display = 'block';
setTimeout(function(){
document.getElementById('form1').submit();
}, 100);
return false;
}
But it's weird that on WP8.1 (Internet Explorer) and Android 4 (Default browser) it's mandatory to use setTimeout() function, to postpone submit action.
Is it some mobile optimization or what?
Thank you all for help!
Please try with this. Remove javascript and add jquery function.
$("#loadingPanel").show();
$("#overlay").show();
You should put .preventDefault() to stop the form from submitting
<script type="text/javascript">
function ShowLoadingPanel(e) {
e.preventDefault();
document.getElementById('loadingPanel').style.display = 'block';
document.getElementById('overlay').style.display = 'block'
setTimeout(function(){
$(this).submit();
}, 3000);
}
</script>
I'm trying to use jQuery for the first time. I have some images that are loaded via an ajax call (not jQuery related). The page is made the way that if you refresh the page, the images loaded, stay.
I found this code somewhere else:
$(document).ready(function(){
$(".svg_chart").click(function(){
var address = $(this).attr("src");
address = address.replace(\'height=80\', \'height=300\');
$("#popup").fadeIn("slow");
$("#lightbox").attr("src",address);
});
$("#lightbox").click(function(){
$("#popup").fadeOut("fast");
});
});
<div id="popup">
<div id="center">
<img id="lightbox" src="images/blank.jpg" >
</div>
</div>
</div>
The code works fine on images already loaded when the page is loaded, but not on images fetched on the fly with Ajax, although they get the same class added. I guess it is because the doc.ready function only knows about content, after the initial page has loaded.
What can I do to make jQuery know about new content being added?
Dropping jQuery for this. It's overkill and doesn't work!
<img id="svg_1" class="svg_chart" style="float: left" width="49%" ondblclick="expand_me(this.id)" alt="" />
<div id="popup">
</div>
<div id="center">
<img onclick="expand_me(true)" id="lightbox" src="images/blank.jpg" />
</div>
<script type="text/javascript"><!-- // --><![CDATA[
function expand_me(el)
{
if (el !== true)
{
link = document.getElementById(el).src;
link = link.replace(\'height=80\', \'height=300\');
document.getElementById(\'popup\').style.display = "block";
document.getElementById(\'center\').style.display = "block";
document.getElementById(\'lightbox\').src = link;
}
else
{
document.getElementById(\'popup\').style.display = "none";
document.getElementById(\'center\').style.display = "none";
}
}
// ]]></script>
The css part:
#popup
{
background:#000000;
height:100%;
width: 100%;
position:fixed;
top: 0;
left: 0;
display: none;
opacity: 0.9;
}
#center
{
height:100%;
width: 100%;
max-width: 1200px;
position:fixed;
top: 0;
margin: 6% auto;
display: none;
}
#lightbox
{
width: 100%;
cursor: pointer;
}
I am building a mobile website. I need the header to be position:fixed (but being mobile that is not supported) so I am using iScroll4 because it seems to be what I am looking for. For some reason I am not able to figure out how to implement it.
Here is my HTML:
<html>
<head>
<!--includes the iscroll.js file-->
</head>
<body>
<div id="header">
<!--header contents-->
</div>
<div id="wrapper">
<div id="scroller">
<!--a bunch of html that you probably don't care to see-->
</div>
</div>
Here is my CSS:
#scroller {
position: absolute;
}
#wrapper {
position: absolute;
width: 100%;
top: 0px;
left: 0;
overflow: auto;
}
#header {
background: #4B92DB;
border: none;
height: 175px;
opacity: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
And here is my Javascript:
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
If you have any ideas they would be greatly appreciated.
Where's your loaded() being called? This (or something like it) might help:
<body onload="loaded()">
Reading iScroll4 official page might help you. http://cubiq.org/iscroll-4
Section: Getting started. There are 3 ways to make it work:
onDOMContentLoaded event to trigger iscroll
onLoad event to trigger
inline, place the code below the html bit you want to scroll
All codes are just on the page mentioned.
I want to do the same slideshow like in this site: http://groupme.com/iphone
I would like to do exectly the same with an iphone image and 5 different images inside of it that change with the same effects.
Some example code will be helpful or a jquery library as well.
Thanks.
How about this? I can refine/add dots if you want.
<html>
<head>
<style>
.mask {
position: absolute;
left: 31;
top: 122;
width: 239;
height: 342;
overflow: hidden;
}
.canvas {
position: relative;
width: 2195;
height: 342;
}
.page {
width: 239;
height: 342;
float:left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $canvas
$(function(){
$canvas=$("div.canvas")
setInterval(scroll, 5000);
});
function scroll(){
if ($canvas.position().left!=-956){
$canvas.animate({left: "-=239"});
}else{
$canvas.animate({left: 0});
}
}
</script>
</head>
<body>
<img src="http://groupme.com/images/apps/iphone.png">
<div class="mask">
<div class="canvas">
<div class="page">a</div>
<div class="page">b</div>
<div class="page">c</div>
<div class="page">d</div>
<div class="page">e</div>
</div>
</div>
</body>
</html>
What's wrong with viewing their source?