I'm trying to get a transparent image scrolling on top of my background image. I followed the tutorial located here: http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html
I altered the code a bit since I only need the overlay to scroll, instead of the background itself. Currently, I can see my overlay image on top of the background image, but it isn't moving.
Think of my background image being wine, and the overlay image being moving bubbles.
In the original tutorial, the background is moving and it's overlayed with the image (the bubbles). The changed I've (tried to) made is letting the overlay scroll instead of the background. Even though I've changed the values from $('#container').css("background-position", "50% " + offset + "px"); to $('#overlay').css("background-position", "50% " + offset + "px");, the image doesn't move. I left everything else the same in the .js-file.
Also, in the tutorial the overlay-div is incapsulated within the container-div. As you can see, I've now encapsulated the body-div within the overlay-div in my own HTML-file. Also, I've changed the position of the overlay in the CSS-file to relative.
My code:
HTML-page:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="resources/assets/styles.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
</head>
<body>
<div id="overlay">
<div class="body">
<div class="header">
...
</div>
</body>
</html>
My CSS-file:
body {
background-image: url("../images/background.jpg");
width: 1104px;
height: 976px;
display: block;
margin-left: auto;
margin-right: auto;
font-family: Verdana;
}
#overlay {
position:relative;
width:899px;
height:858px;
background:url("../images/overlay.png");
}
And my JS-file:
$(function() {
// Define the height of your two background images.
//The image to scroll
var backgroundheight = 1000;
// Create a random offset for both images' starting positions
offset = Math.round(Math.floor(Math.random()* 2001));
function scrollbackground() {
//Ensure all bases are covered when defining the offset.
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// Put the background onto the required div and animate vertically
$('#overlay').css("background-position", "50% " + offset + "px");
// Enable the function to loop when it reaches the end of the image
setTimeout(function() {
scrollbackground();
}, 100
);
}
// Initiate the scroll
scrollbackground();
// Use the offset defined earlier and apply it to the div.
$('#overlay').css("background-position", "50% " + offset + "px");
});
Can anyone see what I'm doing wrong here?
My links to my JavaScript resource where faulty. If people are interested how this concept works, check out my Fiddle: http://jsfiddle.net/YuBpA/. Original tutorial comes from http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html, make sure to take a look there.
Related
I use this code to check whether user has scrolled to the bottom code or not but it don't work on Google Chrome but it successfully works on Microsoft Edge.
In Google Chrome when i scroll to bottom and again scroll to top then it works but I don't know why.
Here is the code i am using.
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
</script>
<!decotype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div style="height: 4000px">Scroll down!</div>
</body>
</html>
Assuming you use a div to load some data... (Because of #load_data)
You need to get 3 values on scroll:
The scrolled position
The div height
The div scrollable height
This last one is an element property of the real element height, including its overflow.
Additionnally, you need to define what's near the bottom... In pixels.
So... In the below example, I'm faking an Ajax request. Just look for the code you need.
$(document).ready(function() {
// Function to replace Ajax in this demo.
function createContent(n){
var fakeContent = "";
for(i=0;i<n;i++){
fakeContent += i+"<br>";
}
$("#load_data").append(fakeContent);
}
// Simulate initial content...
createContent(100);
// The code you need
var near = 20; // pixels buffer yet to be scrolled when the Ajax triggers.
$("#load_data").on("scroll",function(){
if( $(this).scrollTop() + $(this).height() + near > this.scrollHeight ){
console.log("Faking Ajax...");
createContent(50);
}
});
}); // END ready
#load_data{
height: 150px;
width: 300px;
border: 1px solid grey;
overflow-y:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
There is 100 (0-99) lines on load.<br>
<div id="load_data"></div>
The problem is when you use margin (top or bottom) you should use .outerHeight(true) instead of .height or the sum of height and margin in this case. If you have padding is the same issue.
$(window).scroll(function(){
if($(window).scrollTop()+$(window).height()>$("h3").outerHeight( true ) ){
alert("bottom!")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<h3 style="margin-top:2000px">hello world</h3>
</body>
<html>
About .outerHeight()
Get the current computed outer height (including padding, border, and
optionally margin) for the first element in the set of matched
elements or set the outer height of every matched element
.
I need to find the absolute coordinates of the html element as per the screen. I know i can use getBoundingClientRect().top and getBoundingClientRect().left method to compute the coordinates as per the view port. How do i find the absolute coordinates? Another question is does window.screenX takes into account url and tab bar into account? Help is appreciated.
UPDATE
Added a special measurement:
var offset = window.outerHeight - window.innerHeight
This is the top of the browser to the bottom of the browser bar (or top of viewport). The new coords called UselessXY takes the height of the browser's bar and adds it to the Y coord. If the browser is resized, then it needs to be refreshed in order to get the new offset. This works best if the browser is maximized.
I made a function that'll display clientX, clientY, screenX, and screenY. And offset and uselessXY
Just click anywhere to get coordinates.
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>COORDS</title>
<style>
*, *:before, *:after { margin: 0; padding: 0; }
body { width: 100vw; height: 100vh; position: relative; }
#display { width: 40ex; height: 50px; border: 1px solid grey; padding: 3px; position: absolute; }
</style>
</head>
<body onmousedown="coords(event)">
<figure id="display" onmouseover="this.style.left = '50%'" onclick="this.style.left = '0'">
<figcaption><u>Coordinates(X,Y)</u></figcaption>
<output id="xy"></output>
</figure>
<script>
function coords(evt) {
document.getElementById('xy').textContent = "screenXY: " + evt.screenX + ", " + evt.screenY +" | clientXY: " + evt.clientX + ", " + evt.clientY+" | Offset: "+offset+" | UselessXY: "+evt.screenX+", "+(evt.screenY + offset);
}
var offset = window.outerHeight - window.innerHeight;
</script>
</body>
</html>
How do i find the absolute coordinates?
use offsetTop
Suppose element's id is
var d = document.getElementById("socialChange");
var topPos = d.offsetTop;
Another question is does window.screenX takes into account url and tab
bar into account?
No, check the documentation here. Area covered by browser's controls are excluded out of the window.screenX and window.screenY.
x_axis = window.screenX + (window.outerWidth - window.innerWidth) + element.getBoundingClientRect().left
The above will get the absolute length from the left of the screen.
Similar case can be done for the y axis.
For the conceptual point of view, this picture can be used.
I am developing this javascript application that when you open there a few svg components that have click listeners. The idea is that most (maybe all) of them will need to display information at the same time and I would like the user to choose what information he can see simultaneously because certainly all will not fit in the screen. So my idea was to use a div that you can drag but also interact with the content (and multiple of these divs could be open at any time.
I have tried some of the jQuery UI stuff but that does not seem to do the trick, the closest thing I could find there was a pop-up that blocks the rest of the site content.
I decided to go for interactjs that basically just gives me draggable and resizable divs, which is great! Unfortunately, I could not find how to make just certain parts of the divs draggable (like the top of the window that actually drags the window in your regular OS) and how to allow the user to interact with the content inside the div window (since everything is just the click-to-drag area). I mainly used the code from the example http://interactjs.io/ (pasting here for reference):
<div class="resize-container">
<div class="resize-drag">
Resize from any edge or corner
</div>
</div>
and here is the js:
interact('.resize-drag')
.draggable({
onmove: window.dragMoveListener
})
.resizable({
preserveAspectRatio: true,
edges: { left: true, right: true, bottom: true, top: true }
})
.on('resizemove', function (event) {
var target = event.target,
x = (parseFloat(target.getAttribute('data-x')) || 0),
y = (parseFloat(target.getAttribute('data-y')) || 0);
// update the element's style
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.textContent = Math.round(event.rect.width) + '×' + Math.round(event.rect.height);
});
I think I figured it out in a very simple way. My problem is just this: How to make only parts of a div draggable? Usually when you do something like:
<div id="draggable" class="ui-widget-content">
<div> I want to be dragged if this is clicked </div>
<div> I do not want to be dragged if this is clicked</div>
</div>
The whole #draggable div is set to draggable so you cannot really interact with the contents of the div. However, with jQuery I did the following:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<div style="border: 4px solid black" onmouseover="$( '#draggable' ).draggable('enable');" onmouseout="$( '#draggable' ).draggable('disable');">
click here to drag this thing
</div>
<p>Do not want to drag if click here</p>
</div>
</body>
</html>
When your mouse is over the top div the draggable is enabled and you are able to move the div. Otherwise is just like any other div with content.
I'm working on a website of an artist, so galleries are really important. I'm using Bootstrap for the website, and Lightbox for Bootstrap plugin for the galleries. It works fine adjusting the width of the image to any resolution (I want to make it as responsive as possible). But, as you can observe if you click on any vertical photo (for example, the one in the second row, second column), when it opens, it's bigger than the screen and it can't be seen without scrolling.
So, I want to get rid of this problem, adjusting the maximum height of the image to the height of the screen. But I can't find the way to do this. Any ideas for doing it in a simple way? I've uploaded the website to a server so you can see the problem: http://mural.uv.es/ivape2/es/galeria.html
Thank you.
I had a similar problem and tinny77's answer was the only thing that approached a solution.
Here is a working snippet of what I ended up with
$().ready(function() {
$('[data-toggle="lightbox"]').click(function(event) {
event.preventDefault();
$(this).ekkoLightbox({
type: 'image',
onContentLoaded: function() {
var container = $('.ekko-lightbox-container');
var image = container.find('img');
var windowHeight = $(window).height();
if(image.height() + 200 > windowHeight) {
image.css('height', windowHeight - 150);
var dialog = container.parents('.modal-dialog');
var padding = parseInt(dialog.find('.modal-body').css('padding'));
dialog.css('max-width', image.width() + padding * 2 + 2);
}
}
});
});
});
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
</head>
<body>
<p>Click Image</p>
<a href="http://lorempixel.com/400/1920" data-toggle="lightbox">
<img height="200" src="http://lorempixel.com/400/1920"/>
</a>
</body>
</html>
I solved it this way by editing the Javascript:
onContentLoaded: function() {
var imgh = $(".ekko-lightbox-container").find("img").height();
var winh = $(window).height();
if ((imgh+200)>winh)
{
$(".ekko-lightbox-container").find("img").css("height",winh-150).css("width","auto").css("margin","0 auto");
}
}
See the JSFiddle
.container {
height:100%;
width: 100%;
border: 1px solid #000000;
}
.item {
max-height: 90%;
max-width: 90%;
border: 1px solid #000000;
}
Assuming you have a .container width a given width/height. I've put both width and height at 100% for the .container
Then you just create a class and asign it max-width: 80%; which will output the image to be 80% the width of the .container
Try adding this
.ekko-lightbox.modal.fade.in div.modal-dialog{
max-width:27%;
}
This is just simple solution, best it will be to make media-queries for different resolution
This has been solved (commit on github) by calculating the maximum image height (80% of viewport height) in the preload function but currently it is not part of the base branch.
I have a grid generator, it uses Javascript and jQuery to generate blocks in a grid that are displayed with HTML and CSS. I am trying to set up a button that will change the :hover behavior of the blocks (specifically, change their background-color). I am unable to do this and I'm not sure why my code is not working. I will copy and paste it here and I apologize that it is very long. You can see it in action here: http://codepen.io/anon/pen
HTML
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript" src="script.js"></script>
<title> Odin #2 by Max Pleaner </title>
<link rel="stylesheet" type="text/css" href='stylesheet.css'>
</head>
<body>
<p> Welcome to my Odin Project #2 page. This is me showing off my basic JS and jQuery skills. If you move your mouse through the blocks you can see frogs come out of hiding. If you press the clear button below you can select a new number of blocks to fill the same space.</p>
<button id="button"> Generate a number of blocks of your liking that will position themselves to all fit in the 960px by 960px grid. </button>
<button id="button2"> <strike> Click here to generate new blocks and make hovering on blocks produce random colors.</strike> Why isn't this button working?! It's drawing new blocks fine, but not changing the :hover style as intended. </button>
<div id="square_holder">
</div>
<img src="Q6w802v.jpg" alt="froggy" ></img>
</body>
</html>
CSS
body {
background-color: grey;
}
p {
color: aqua;
}
#square_holder {
width: 960px;
}
.block {
background-color: green;
display:inline-block;
border: 1px solid black;
width: 232px;
height: 232px;
}
.block:hover {
background-color: blue;
//background-image:url("Q6w802v.jpg");
background-size: contain;
}
JS
$(document).ready(function(){
draw_grid(4);
$('#button').click(function(){
get_input();
});
$('#button2').click(function(){
get_input();
$('.block:hover').css("background-image", "none").css("background-color", get_random_color());
});
});
var draw_grid = function (blocks) {
var totalno = Math.pow(blocks, 2);
var dimension = (960 - 1 -(blocks * 2))/blocks;
for(var i = 0; i < totalno; i++){
$("#square_holder").append("<div class='block' id=" + i + "></div>");
};
$(".block").css("height", dimension).css("width", dimension);
}
var get_input = function(){
alert('Do you want to change the number of boxes?<b></b>');
$('#square_holder').empty();
var user_entry = prompt("What number do you choose?");
alert("Watch in awe as the grid fills ..... ");
draw_grid(user_entry);
}
var get_random_color = function() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
};
You need to use background, not background-color. Taken from the MDN page for background-image:
The CSS background-image property sets one or several background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.
This translates into a declaration of background-image at all (even as none) will sit on top of background-color. Therefore, if you set background instead of background-color, it will supercede all other property-specific declarations.