I've been trying - and I'm at the point where I just don't know what to try anymore.
I'm trying to make my website's chat fill the entire page with this script
<script>
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('ul').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
</script>
I'm using this script for my chat's ul tag, and it fits the height so the script works, but I'm trying to figure out how to make it fill about 95% of the page, so I still have room for the content below. (Send message, settings and emotes.)
I have a div tag around the entire chat, but setting that in the script doesn't affect the list of messages.
Any ideas to my struggle?
dont bother with js/jquery, use css, pure css like this :
div {
position: fixed!important;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div id="container">
...
</div>
<script>
var container=document.getElementById('container');
var h=document.documentElement.clientHeight;
container.style.height=h+'px';
</script>
Related
I have two div in site body.I want to have fixed position to the left div...
but when scrolling to bottom it comes on my contact us div..this is the sample page:http://www.runsensible.com/legal/privacypolicy
here is my code:
.sticky {
position: fixed;
}
<div id="menu-privacy">
<div class="fusion-text">
<p>
– What information we collect from you
– How your information is used
– How your information is shared
– Terms of service
</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("menu-privacy").getElementsByClassName("fusion-text")[0];
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
What I suggest is instead of having a JavaScript function, we can use a CSS class for it.
NOTE: Based on the requirements of your specification, you can vary the size of width & height. And you can put this as class="fixed" for the div tag containing id="menu-privacy" as you can see below.
.fixed{
position: fixed;
top: 80px;
right: 0px;
width: 100px;
height: 150px;
}
1) give an id to footer or add a wrapper for footer section
2) let your function like this - you need to let condition by footer position
function myFunction() {
if (sticky < footerIdOffset) {// footerIdOffset is an offset for footer section
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
3) you need to subtract margin/gabs between footer and upper section to work in your point truth.
Good luck
I suggest you use position:sticky instead so this effect can be achieved with pure CSS rather than adding javascript. Looking at your site it's rather possible to do this
Here's what you need to do
Remove the javascript that add/remove the sticky class
Add this style in your div with id="menu-privacy", something like this
CSS
#menu-privacy {
position: sticky;
top: 80px;
}
note that you can play around the top value to achieve the gap that you like. Hope this helps!
You can try adding the attribute "z-index" to the contact div.
On "Contact Us" div set (z-index:10) .
Question:
If you are using
<img>
in html, how would you style that element in css to make a large image fit the browser window with no white space?
Situation:
I am working on a project that has me a bit stumped. The idea is a slideshow for the webpage background. In the .html file I have created the slideshow with javascript. The single image element is what javascript uses to shuffle through the five images that will be there. (I am just using one for now to get sizing right.)
My slideshow works but my image is huge and does not perfectly fit the browser window. :( This tells me that my other images will have the same problem when I plug them into the javascript array. (they are all quite large)
I am thinking that I may have to use a div container but I am not sure how. I'm the new guy.
Here is my javascript with for the slidesow:
<script type="text/javascript">
var images = [
"",
"",
"",
"",
"Raptor sand.jpg"
];
</script>
<div class="container">
<img src="Africa Twin Mountainside.jpg" id="slide" alt=""/>
</div>
<script>
var step = 0;
function slideit(){
document.getElementById('slide').src = images[step];
step++;
if(step>=images.length)
step=0;
setTimeout("slideit()", 2500);
}
slideit();
</script>
and here is my css
.container{
width: 100%;
height: 100%;
object-fit: contain;
}
<div style="background-image: url('http://placekitten.com/1200/800'); background-size: cover; position: fixed; top: 0; right: 0; bottom: 0; left:0"></div>
(inline styles because I'm being lazy. Obviously these should live in a stylesheet).
sub out url for correct image.
You can use jQuery to do this
<img src="picture.jpg" alt="My picture" id="target">
<script src="./jquery-3.1.0.js"></script>
<script>
$(document).ready(function() {
$( "#target" ).height( $( window ).height() );
$( "#target" ).width( $( window ).width() );
});
</script>
I'm using a simple code to display php files in a container without loading the page using .load with a function to display and hide a loading animated image
<style>
.loadingbg{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #84ffbf;
display: none;
}
.loadingbg img{width: 60px; height: 60px; position: absolute; left: 48%; top: 48%;}
</style>
<script>
$(document).on('click','a',function (e) {
$(".loadingbg").css('display','block');
e.preventDefault();
var url = $(this).attr('href');
$('#container').load(url+ '#content',function () {
$(".loadingbg").css('display','none');
});
});
</script>
<div class="loadingbg"><img src="images/page-loader.gif"></div>
contact
about
<div id="container">
<h1>index</h1>
</div>
so when i click on a link it displays the background and the small animated image to load the other page without changing the url but it fetches the text content fast and the loadingbg disappears and it starts loading the images in the new webpage. What i want is not to hide the loadingbg until the remote php file is totally loaded including images.
Demo
After you load the content, you have to make sure that all images are loaded.
In your load callback functions you can use imagesLoaded library (or any other library that validates image loading). Also on anchor click I hide the #container and when all the images are loaded - then show it again:
$(document).on('click','a',function (e) {
$(".loadingbg").css('display','block');
$("#container").hide();
e.preventDefault();
var url = $(this).attr('href');
$('#container').load(url+ '#content',function () {
$('#container').imagesLoaded( function() {
// images have loaded
$(".loadingbg").css('display','none');
$("#container").show();
});
});
});
I have to admit that I'm not 100% sure this will work...
But I would try this:
$(document).on('click','a',function (e) {
$(".loadingbg").css('display','block');
e.preventDefault();
var url = $(this).attr('href');
$('#container').load(url+ '#content',function () {
$('#container').on("load", function(){
$(".loadingbg").css('display','none');
});
});
});
Binding the "load" event to your #container in the .load() callback is supposed to "delay" the .loadingbg CSS change to the moment where all content has completely loaded.
I am using window.print function to print a div content and I need to add custom header and footer which shows on every page. can some one please guide me on this ?
I able to add a header and a footer but thats only at top and bottom of the print document
what i can do
I want to repeat them in each page
what I want
Usualy you are not allowed to overwrite header and footer. (defaulted by browser - optional on users choice)
Did you try something like this?
.footer { position: absolute; bottom: 0; }
.header { position: absolute; top: 0; }
try this:
var pageHeight = parseInt($('body').css('height'))
var offsetHeight=1230;
for(var i=0;i<pageHeight;i++){
if(i%offsetHeight==0 || i==0){
$('body').append('<div style="position: absolute;top:'+i+';">your header</div>')
}
}
yue can play with offsetHeight
i want to make a draggable image in jquery.
first of all my experience with jquery is 0. having said that let me describe what i want to achieve. i have fixed width/height div. and the image contained inside the div is large in size. so i want the image to be draggable inside that div so that the user can see the entire image.
can someone help. pls be a little elaborate about the procedure considering my jquery fluency.
You can use the following;
$(function() {
$("#draggable").draggable();
});
.container {
margin-top: 50px;
cursor: move;
}
#screen {
overflow: hidden;
width: 200px;
height: 200px;
clear: both;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
<div id="screen">
<img src="https://picsum.photos/200/200" class="drag-image" id="draggable" />
</div>
</div>
You want the jQuery Draggable UI tool. The code for this, as with all jQuery, is very simple:
$(document).ready(function(){
$("#draggable").draggable();
});
Will create a draggable object from a standard html tag (the IMG in your case). And for limiting it's mobility to a specific region, you would look into its containment option.
Update: "What is '#draggable' and 'ready'"?
'#draggable' represents the element that you want to be able to drag. The hash (#) symbol represents an ID. When you add your image tags, may give give it an id like the following:
<img src="myimage.jpg" id="draggable" />
That will make the javascript above make your image draggable, because it has the '#draggable' id that the jQuery is looking for.
'.ready()' is the method that is automagically raised by your browser once the page is finished loading. Developers are encouraged by the jQuery group to place all jQuery code within this method to ensure all of the elements on the page are completely loaded prior to any jQuery code attempts to manipulate them.
to limit to a region for this example, containment is not much of a help.
I have implemented this for vertical only scroll, needs enhancement for horizontal limit:
stop: function(event, ui) {
var helper = ui.helper, pos = ui.position;
var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
if (pos.top >= 0) {
helper.animate({ top: 0 });
} else if (pos.top <= h) {
helper.animate({ top: h });
}
}
$('#dragMe').draggable({ containment: 'body' });
This code will make it posible to drag the div with the ID of dragMe where ever you want inside the body of the document. You can also write a class or id as containment.
$('#dragMe').draggable({ containment: '#container' });
This code will make the div dragMe able to be draggable inside of the id container.
Hope this helps otherwise you should be able to find your answer here http://jqueryui.com/demos/draggable/
Expanding on the answer from PH. this will provide an elastic bounceback whenever the image is dragged to the point the underlying container is exposed:
stop: function(event, ui) {
var helper = ui.helper, pos = ui.position;
var h = -(helper.outerHeight() - $(helper).parent().outerHeight());
var w = -(helper.outerWidth() - $(helper).parent().outerWidth());
if (pos.top <= h) {
helper.animate({ top: h });
} else if (pos.top > 0) {
helper.animate({ top: 0 });
}
if (pos.left <= w) {
helper.animate({ left: w });
} else if (pos.left > 0) {
helper.animate({ left: 0 });
}
}