This is a weird question. I have one page that is centered via the same method all of my other pages are centered but ONLY on my iPhone, it has decided to left justify.
I narrowed it down to this line of code that is causing the problem:
<websitesnext><img src="graphic_elements/1-2.png" width="41" height="22" /> <img src="graphic_elements/next-icon.png" width="32" height="22" /></websitesnext>
That line is wrapped in a div titled "div id=websites", and is located just below a table. Here is the CSS for that wrapping div, and the CSS for the problem div:
#websites {
position: absolute;
top: 282px;
left: 72px;
width: 878px;
}
websitesnext {
position: absolute;
left: 418px;
width: 878px;
top: 350px;
z-index: 6;
}
Here is the javascript that that line is referencing:
<script type="text/javascript"> //this is for the top gallery buttons
$(document).ready(function() {
var option = 'websites2';
var url = window.location.href;
option = url.match(/option=(.*)/)[1];
showDiv(option);
});
function showDiv(option) {
$('.hidden').hide();
$('#' + option).show();
$('#websites').hide(); //this hides the default gallery, which in this case is the first "websites" gallery page
}
</script>
I also noticed that again, just on this page, my viewport settings are being ignored! Any idea why this is causing ALL of my page contents to left justify on an iPhone? Thanks in advance!
Related
I am trying to integrate the code from here to change image of my slide show on click (credit to cssyphus):
$(function() {
$("input:button").click(function() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").fadeIn()
});
});
});
function Forward() {
$("img:first").fadeToggle("slow", function() {
$(this).appendTo(".frame").fadeIn(800)
});
}
function Backward() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").fadeIn()
});
}
.frame {
position: relative;
left: 35%;
}
img {
position: absolute;
max-width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>
<input type="button" value="PrependTo" />
<button onclick="Forward()">Go Forward</button>
<button onclick="Backward()">Go Backward</button>
</h1>
<div class="frame">
<img src="http://placeimg.com/240/180/animals">
<img src="http://placeimg.com/240/180/nature">
<img src="http://placeimg.com/240/180/people">
<img src="http://placeimg.com/240/180/sepia">
</div>
The issue arise due to the effect depending position:absolute to stack the images on top of one another. Switching it to position:relative unstack the images and they are next to one another. Using position:absolute throws off all other elements in the code to integrate into. How can I remedy this problem?
It's a little difficult to imagine how the layout is affected by the slideshow, but from looking at your code I would try one of two things:
Remove the left: 35%; css from the .frame - I'm unsure why this is there but it will push the whole frame container of the slideshow over
.frame {
position: relative;
}
Adjust the CSS for the img so it only affects the nth-children after the first one, so they will be stacked on top of one another while the first one is inherit/relative:
img {
position: relative;
}
img:nth-child(n+2) {
position: absolute;
top: 0;
left: 0;
}
This site I am developing is using HTML5, CSS3, Bootstrap 4, and Jquery. I would like to have a scroll effect on a full-screen background-image that is at the very top of my page (100vh hero banner type thing). I am trying to gradually increase the contrast (css filter: contrast(some%)) of an image as the user scrolls down (its fine if the image is completely unrecognizable by the time it leaves viewport).
I have some Jquery that somewhat does the effect I am looking for, however I would like the effect to be more gradual.
The main issue I am having is that when the user scrolls back to the top of the page the contrast value gets set to 0% leaving a completely grayed out image. What I would like is for the contrast to gradually decrease back to normal (100%) as the user scrolls back up all the way to the top of the page.
I have set up a very simplified codepen. I couldn't get a css background-image url value to reference an external link from codepen, so I am targeting the effect on a full screen image ().
Thanks!
Link to the Pen: [codepen-link][1]
[1]: http://codepen.io/wdzajicek/pen/MVovZE
See code below in snippet
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = $(window).scrollTop();
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
There is the main problem in $(window).scrollTop(); it will return 0 value
that's why contrast value gets set to 0% leaving a completely grayed out image
var pixelstop = $(window).scrollTop();
replace the code with
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
don't just copy this code please understand thanks.
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
console.log(pixelstop);
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
100 is default value of filter contrast not 0. that's why the background is grey out because it reaches zero.
I have a small problem. I can do a fadout fadin on an entire page by clicking html links. But I want to change the images that correspond with my links in array.
Below my code to fadeIn and fadeOut between pages html:
Script
$(window).load(function(){
$("#overlay").fadeOut(1500);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#overlay").fadeIn(1000, function() {
window.location = linkLocation;
return false;
});
});
});
Css
#overlay {
position: fixed;
top: 0; left: 0;
background: #fcc916 url(img/logo/blablabla.png) no-repeat center center;
/*background: #ffffff;*/
width: 100%;
height: 100%;
z-index: 314159;
}
html
<div id="overlay"></div>
I know I have to do a array with images and retrieve them in getElementByld but I do not know how ...
Thanks for your precious help and sorry for my english
Try ...
$("#overlay")
.attr("style", "background: #fcc916 url(img/logo/" + fromarray[i] + ".png) no-repeat center center");
... this will change the background image via jQuery. the .png portion could be coming from the array, as well.
I ran into a unique request for a HTML page. I needed one image to link to a website and an second image which would sit on top of the first that opens the same website in a new window. In effect, the second image is a quasi-maximize button placed in the top right-hand corner.
The trick is the "maximize button" needs to only appear when hovering over the first image.
Special thanks to these two posts. I was able to piece together a solution. I am sharing my work below in the approved answer.
Show div on hover with only CSS
How do I position one image on top of another in HTML?
Here is a sample of the CSS, JavaScript and HTML I used to get the desired effects I wanted. Please let me know where I can improve.
Note: I used JavaScript to guarantee the link would open in a new window. If you know a better way to do this. Please share. It bugs me that I have anchor tags using onClick events.
<html>
<head>
<style type="text/css">
.bannerContainer
{
position: relative;
left: 0;
top: 0;
display:inline;
}
.myBanner
{
position: relative;
top: 0;
left: 0;
}
.myBanner:hover + .newWindowButton
{
display: inline;
}
.newWindowButton
{
display: none;
}
.newWindowButton:hover
{
display: inline;
}
.newWindowButton img
{
/*This positions the maximize button. You will have to play with the positioning to get it just right for your work. This is what worked for me.*/
position: absolute;
top: -106px;
left: 170px;
width:30px;
height:30px;
}
.pointer
{
cursor: pointer;
}
</style>
<script type="text/javascript>
function myLinkClick(Url, isInNewLimitedWindow) {
if (isInNewLimitedWindow) {
window.open(environmentUrl, "_blank", "toolbar=no, scrollbars=no, menubar=no, resizable=yes");
}
else {
window.open(environmentUrl);
}
}
</script>
</head>
<body>
<div class="bannerContainer">
<a class="myBanner pointer" onclick="myLinkClick('http://myWebsite.com', false)">
<img src="firstImage">
</a>
<a class="newWindowButton pointer" onclick="myLinkClick('http://myWebsite.com, true')">
<img src="secondImage">
</a>
</div>
</body>
</html>
I have created a simple webpage with several images, but when a user visits it, the browser loads the images one at a time, instead of all at once.
I want instead to first show a "loading" gif in the center of the page and then, when all the images are downloaded, show the entire webpage to the user at once..
How can I do this?
You can show a loader image by putting it somewhere im <img> tag and use below js code to hide it later on when all images are shown:
window.onload = function(){
var el = document.getElementById('elementID');
el.style.display = 'none';
};
Where elementID is supposed to be the id of loader element/tag.
The load event fires when all images/frames/external resources are loaded, so by the time that event fires, all images are loaded and we therefore hide the loading message/image here.
Edit: I defer to Keltex's answer. It's a much better solution. I'll leave mine here for posterity (unless I should delete the content and my answer entirely? I'm new here).
Another solution, which was used fairly frequently in the past, is to create a landing page that preloads all of your images. When the preloading is done, it redirects to the actual site. In order for this to work, you'd need to get the URLs to all of the images you want to load, and then do something like this:
# on index.html, our preloader
<script type='text/javascript'>
// add all of your image paths to this array
var images = [
'/images/image1.png',
'/images/image2.png',
'/images/image3.png'
];
for(var i in images) {
var img = images[i];
var e = document.createElement('img');
// this will trigger your browser loading the image (and caching it)
e.src = img;
}
// once we get here, we are pretty much done, so redirect to the actual page
window.location = '/home.html';
</script>
<body>
<h1>Loading....</h1>
<img src="loading.gif"/>
</body>
You can do this with JQuery. Say your page looks like this:
<body>
<div id='loader'>Loader graphic here</div>
<div id='pagecontent' style='display:none'>Rest of page content here</div>
</body>
You can have a JQuery function to show pagecontent when the entire page is loaded:
$(document).ready(function() {
$(window).load(function() {
$('#loader').hide();
$('#pagecontent').show();
});
});
HTML
<div id="preloader">
<div id="loading-animation"> </div>
</div>
JAVASCRIPT
<script type="text/javascript">
/* ======== Preloader ======== */
$(window).load(function() {
var preloaderDelay = 350,
preloaderFadeOutTime = 800;
function hidePreloader() {
var loadingAnimation = $('#loading-animation'),
preloader = $('#preloader');
loadingAnimation.fadeOut();
preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
</script>
CSS
#preloader {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
position: fixed;
background-color: #fff;
}
#loading-animation {
top: 50%;
left: 50%;
width: 200px;
height: 200px;
position: absolute;
margin: -100px 0 0 -100px;
background: url('loading-animation.gif') center center no-repeat;
}
Create a div with class name preloader and put a loader inside that div.
style the class preloader just like below
.preloader {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: white;
/* background-color is would hide the data before loading
text-align: center;
}
Html
<div class="preloader">
Any loader image
</div>
Jquery
$(window).load(function(){
$('.preloader').fadeOut(); // set duration in brackets
});
A simple page loader is ready....