is there a way to download images inside an HTML page before showing the page? Because I got an issue where the div underneath doesn't show up correctly. I am pretty sure that it is due to the image loading after the page was shown. I have no issue locally, but once I deploy it with Heroku, I have a visual error like so:
The local version:
Would anyone have an idea on how to download them before showing the rest of the page? I tried to use the following JavaScript but it didn't work:
preload([
'./webapp/dist/images/chantier1.jpg',
'./webapp/dist/images/chantier2.jpg',
'./webapp/dist/images/chantier3.jpg'
]);
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
Thank you for your help and time
a fast way to do it, by the way i think it's really strange that an image load delay can create this kind of view problem:
$(window).load(function() {
$('.loader').fadeOut(1000);
});
img{
width: 100%
}
.loader{
position: fixed;
height: 100vh;
width: 100%;
background-color: white;
top: 0px;
left: 0px;
}
p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://images.unsplash.com/39/wdXqHcTwSTmLuKOGz92L_Landscape.jpg">
<img src="https://static.pexels.com/photos/1029/landscape-mountains-nature-clouds.jpg">
<div class="loader">
<p> loading </p>
</div>
Please try to set the height of the images container and the width and height on img tags.
Related
// JavaScript Document
$('.page').hide();
$(".btns").click(function(e){
e.preventDefault(); //this method stops the default action of an element from happening.
var $me = $(this); //$(this) references .btns, the object in local scope.
var $myContent = $($me.attr('href')); //pulls href of page 01, 02, or 03.
$('.page').hide(); //hides all pages
$myContent.fadeIn();//fades in clicked href connected to btn
$(".btns").removeClass('selected');//
$me.addClass('selected');
});
*{
border-spacing: 0px;
}
body{
margin: 0px;
padding: 0px;
}
.circle-container {
position: relative;
width: 24em;
height: 24em;
padding: 2.8em;
/*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
border: dashed 1px;
border-radius: 50%;
margin: 1.75em auto 0;
}
.circle-container a {
display: block;
position: absolute;
top: 50%; left: 50%;
width: 4em; height: 4em;
margin: -2em;
}
.circle-container img { display: block; width: 100%; }
.deg0 { transform: translate(12em); }
<div class="body_content">
<div class="page" id="page_01">
<h2>1. Category 1</h2>
</div>
</div>
<div class="circle-container">
<nav class="navigation">
<a href="#page_01" class="btns deg0" >
<img id="one" src="imgs/button.png" alt="page01"/>
</a>
</nav>
</div>
I have a unique situation that I would like to discuss with you all. I am trying to create a web page that has a circular navigation, as shown here enter image description here
Each one of these buttons would display content when clicked, like an in-page link. The JQuery is as shown enter image description here
The concept seems simple enough, force all content to hide, when a user clicks a button, the page content linked to that button shows. It works when the links are inline or block display, but when in a circle, the links don't work, the button content doesn't show. Has anyone worked with a similar issue? Or would anyone have a potential solution? I apologize for the vagueness of the questions but the issue seems multi-faceted. Any advice or ideas would be greatly appreciated.
Are you sure your jQuery reference is working? I don't see any issue with the code, the click event should fire when you click on the links. Check the console for any errors, I strongly believe jQuery might not get loaded.
So I have this carousel from http://kenwheeler.github.io/slick/. I decided with my carousel that once you click the image-a video appears. Well I want this video to load into a Modal Image-with a closeout function. The first line of code for div id....is the image onced clicked the video appears. The rest below it I'll just copy and paste the first part. (Repeat of the same image/video four times-until I decide to switch things out)
<section class="center slider">
<div id="video" style="display:none;"><iframe width="560" height="315" src="https://www.youtube.com/embed/36_e3qbYhEs" frameborder="0"></iframe></div>
<a href="javascript:document.getElementById('video').style.display = 'block'; document.getElementById('videopic').style.display = 'none'; void(0);">
<img id="videopic" src="images/350x300.png" alt="Video Picture" /></a>
<div>
<img src="http://placehold.it/350x300?text=2">
</div>
<div>
<img src="http://placehold.it/350x300?text=3">
</div>
<div>
<img src="http://placehold.it/350x300?text=4">
</div>
</section>
I have the JS and CSS all working fine I just can't implant a function where you click the image the "image(video)" will open in a new window. Sorry about my wording. I am beginner and learning as I go. I know what I want it to do but can't figure out how.
Please let me know if I need to provide anything further.
I think the term you're looking for that might help you in Googling would be that you want your video to open in a lightbox.
Answering specifically how to do this in your particular circumstance is too broad for this site, even if you give us more code to look at. But generally the way you can accomplish this is to use JavaScript to toggle a class on one or more elements when your slideshow images are clicked, and adding that class would trigger the video to show up, while clicking the exit button would remove the class so things go back to their original appearance.
Here is a really basic example, but you can basically take this concept and make it as simple or complicated as you want. You could, for example, toggle a class on the html or body tag of your page and then adjust the CSS of a bunch of stuff on the page based on whether that class is applied.
If you're using jQuery, there are plugins designed exactly for this purpose that will automatically give you a ton of settings to do things like automatically size and perfectly center your lightbox in the viewport and take care of mobile functionality and whatnot. Fancybox and Colorbox are a couple examples.
var lightboxImg = document.getElementsByTagName('img')[0];
lightboxImg.addEventListener('click', function(){
this.parentNode.classList.toggle('lightbox');
});
document.getElementById('exit').addEventListener('click', function(){
lightboxImg.parentNode.classList.toggle('lightbox');
});
/* relevant stuff */
#iframe {
display: none;
position: absolute;
top: -100px;
left: -100px;
}
#exit {
position: absolute;
top: 10px;
right: -290px;
padding: 5px;
background-color: white;
}
section div.lightbox #iframe {
display: block;
}
img:hover, #exit:hover {
cursor: pointer;
}
/* just for display purposes */
html, body {
height: 100%;
}
section {
width: 400px;
height: 300px;
background-color: gold;
position: relative;
left: calc(50% - 200px);
top: calc(50% - 150px);
}
section div {
position: relative;
top: 50px;
left: 50px;
width: 300px;
height: 200px;
}
<section class="center slider">
<div>
<img src="http://placehold.it/300x200?text=click%20me">
<div id="iframe"><img src="http://placehold.it/600x400?text=your%20iframe"><span id="exit">X</span></div>
</div>
</section>
Situation:
I am looking for a jquery/ajax loader and found this thread helpful.
Now I am using this fiddle as my loader.
Everything works fine but I only have one concern.
Below the js code, 'responseTime' is fixed to 2.5 secs.
$.mockjax({ url: "/mockjax", responseTime: 2500 });
So if my page loads more than 5 secs, the loader only runs at 2.5 secs.
Question:
How am I going to depend the loader's time to my page's unpredictable loading time?
Your help is very much appreciated. Thanks!
You can show loader gif until window loads completely by
$(window).load(function(){
}
And do it like:
$(window).load(function(){
$('#cover').fadeOut(1000);
});
#cover {
background: url("http://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center #FFF;
position: absolute;
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="cover"></div>
<img src="https://i.ytimg.com/vi/lklDJ5VRQao/maxresdefault.jpg" />
It will start with showing gif and will be faded out once content gets loaded completely.
I found what I'm looking for from this site.
Below is the code I use.
$(document).ready(function(){
$("#spinner").bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxStop", function() {
$(this).hide();
}).bind("ajaxError", function() {
$(this).hide();
});
$('#button-upload').click(function() {
$('#spinner').show();
});
});
.spinner {
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
text-align:center;
z-index:1234;
overflow: auto;
width: 100px;
height: 102px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="http://sampsonresume.com/labs/pIkfp.gif" alt="Loading"/>
</div>
<input type = "submit" value = "Upload" id="button-upload" />
The loader is indefinite in this snippet, but it runs perfectly on my site.
Thanks guys for the help anyway =)
I'm starting to learn Ajax for a project but I got some problems... This is my situation so far:
1- I have a navbar with different buttons to show content.
2- I have a div container where goes the selected content.
3- When clicked the desired content it never ends loading.
$(function(){
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img width='50px' src='https://berkeleyloop.ridecell.com/static/common/images/loading-circle.gif'/>";
var loadUrl1 = "http://fullhdpictures.com/wp-content/uploads/2015/04/Beautiful-Pagani-Zonda-Wallpapers.jpg";
$("#load1").click(function(){
$("#result").html(ajax_load).load(loadUrl1);
});
var loadUrl2 = "http://fullhdpictures.com/wp-content/uploads/2015/04/Most-Beautiful-Pagani-Zonda-Wallpapers.jpg";
$("#load2").click(function(){
$("#result").html(ajax_load).load(loadUrl2);
});
});
#navbar {
position: fixed;
left: 0;
top: 0;
width: 48px;
height: 100%;
background: #181818;
overflow: hidden;
}
#result {
position: relative;
left: 50px;
width: calc(100% - 48px);
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<button id="load1">1</button>
<button id="load2">2</button>
</div>
<div id="result"></div>
What did I missed? Please help me to achieve the desired effect!
you can't load content from different web site by using load. to do that you has to be rights. if you check your console you will see this
"No 'Access-Control-Allow-Origin'"
edit:
i think this will help
codepen.io/airsakarya/pen/zqLVZo?editors=1010
I've got some code which is supposed to make an image go smaller until it disappears from the screen. If I have the image in a div it will not work properly. If I take it out of the div it will work fine.
However I need it to work in a div. How can I fix this?
The code works fine if the img is not in a div, but when it is it screws up.
setTimeout(function(){
$("#thrid").show('fast').animate({
top : '-=-300',
width: 0,
height: 0
},
{duration: 1000});
},2000);
CSS:
#thrid{
display:none;
position:absolute;
left: 592px;
top: 160px;
}
HTML:
<div id="thrid">
<img src="images/thrid.png" alt="thrid">
</div>
This is what it does with the div:
http://jsfiddle.net/xMV5Q/3/
This is what I want it to do:
http://jsfiddle.net/xMV5Q/1/
Try setting the img's width and height to 100%:
#city2 img {
height: 100%;
width: 100%;
}
The image re-appears because the div overflow is still visible
#city2 {
display: none;
overflow: hidden;
position: absolute;
}
I just tried your example (http://jsfiddle.net/will_moore/g6fYT/) and it seems to work OK for me, even with the div.
I'm guessing you've got some styles associated with the div that are causing problems. I don't see what your -=-300 is doing. Don't you mean '-=300'?.