I am trying to make a div visibe only after a certain scroll length.
There are already some threads here on Stackoverflow about it and so I have tried to use the suggested scripts listed in the answers, but no one of them seems to work.
So, I suppose that I don't know how to use them.
I have put this block into the head, surrounded by the two script tags:
function scroll_bar() {
if (document.body.scrollTop > 700) {
document.getElementById("navigation_bar").show();
}
else
{
document.getElementById("navigation_bar").hide();
}
}
And in the body, I have a div (the one that I want to make visible/hidden) with these attributes:
<div onload="scroll_bar();" class="container" id="navigation_bar" style="position: fixed; z-index: 1; background-color: white; height: 50px; width: 100%;"></div>
What is wrong over here?
(I am using Bootstrap anyway, that "container" class comes from it.)
You have to add an event listener to the 'scroll' event: window.addEventListener('scroll', scroll_bar). Also in your handler I would use window.pageYOffset instead of document.body.scrollTop.
Instead of putting your <script> in your <head>, put in just before your closing body tag (</body>). This will make sure that content is loaded before the script and therefore your script should run correctly.
<p>I'm some content!</p>
<script>console.log('JavaScript!');</script>
</body>
Also, you need to make sure that your script function fires on the body scroll event.
Are U sure it's good??
document.getElementById("navigation_bar").show();
"document.getElementById("navigation_bar")." is javascript.
"show()" is jquery.
try:
document.getElementById("navigation_bar").style.display = 'block'/'none'
or
$("#navigation_bar").show();
You misplaced your event to div.
please move your event BODY
code
<body onload="scroll_bar();" >
<div class="container" id="navigation_bar" style="position: fixed; z-index: 1; background-color: white; height: 50px; width: 100%;"></div>
</body>
Related
Through this great forum I have managed to find a solution for expanding an iframe with a click through HTML and Jquery.
But it does not solve my problem completely. Where I am now I manage to expand the iframe using a text, but I want to use the input fields in the iframe as the trigger for the function.
I found this thread on how to use the iframe window itself as a trigger and it seems to use this plugin (iFrame Tracker): https://github.com/vincepare/iframeTracker-jquery
Sadly, this does not seem to work on mobile or other touch devices. Therefore, a click on the input field would be the optimal solution.
This is where I am now with a simple text that expands the height of the iframe when clicked:
HTML:
<iframe class="frame" iframe id="bestillframe"
src="iframe source goes here"
height="200px" width="200px"></iframe>
<div id=kilden>
Click here to enlarge the iframe
</div>
Javascript:
$(function(){
$('#kilden').click(function(){
$('#bestillframe').animate({'height':'300'})
})
});
Fiddle with iframe link and mentioned input fields.
http://jsfiddle.net/b6qfJ/51/
Does anyone know how I can get this to work with a click on the input field?
Thanks to the great help of #zer00ne I managed to work this out.
The only issue was that the above section seemed to scale along with the iframe automatic without proper formatting. This lead to an issue where all elements below the iframe would be overlapped and not moved accordingly downwards.
The solution was to give the section an ID and add another .animate function in the expand function so that they both would be triggered at the same time. Not sure if this is the correct way, but it works. And the solution would then be
Solution
Javascript
$(function() {
$('section').on('click', expand);
});
function expand(e) {
$('#ramme').animate({
'height': '300'
})
$('#iframe').animate({
'height': '300'
}).css('pointer-events', 'auto');
$('section').off('click', expand);
}
HTML
<section id=ramme>
<iframe id="iframe" src="iframe source goes here" height="200"
width="900" scrolling="no";></iframe>
</section>
CSS
section {
position: relative;
height: 200px;
width:600px;
padding: 0;
}
#iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none;
}
DEMO
From fiddle:
http://jsfiddle.net/b6qfJ/92/
This is a great forum. Thanks!
I reread the question and realized that your objective is different than what I initially thought.
Just wrap the iframe in a block element and
make sure that the first thing the user clicks is the block element containing the iframe and not the iframe itself by making it unclickable with pointer-events:none.
Once the iframe has successfully enlarged, remove the click handler and enable the iframe to be clickable with pointer-events:auto.
Also, it helps to keep container and iframe together by using position: relative on the container and position:absolute on the iframe.
I'm well aware that you wanted the actual inputs to be event.target but besides the fact that it's impractical, the fact that at a height of 200px the user doesn't even see any inputs in the first place.
Demo
$(function() {
$('section').on('click', expand);
});
function expand(e) {
$('#iframe').animate({
'height': '300'
}).css('pointer-events', 'auto');
$('section').off('click', expand);
}
section {
position: relative;
height: 200px;
width: 200px;
padding: 0;
outline: 1px dashed red
}
#iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
pointer-events: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<iframe id="iframe" src="iframe source goes here" height="200" width="200"></iframe>
</section>
I have been trying to check when a file is being dragged on to my website using javascript. I have tried putting a "hitbox" div covering the whole site:
<div id="Drag-File-Hitbox" ondragover="BGDragFileOver()">
</div>
<style>
#Drag-File-Hitbox {
position: absolute;
width: 100%;
height:100%;
margin: 0;
padding:0;
z-index: 999999999;
}
</style>
Whenever I drag a file to my website it does what I want but I cant click stuff in the background such as my navigation bar. I have also tried putting the ondragover event on the body tag but that didn't work either.
I fixed it by using jQuery instead, here is the code below that worked for others who might stumbleupon the same issue.
$(document).ready(function(){
$(window).on('dragenter', function(){
do stuff
});
});
I have spent 10 hours on this issue but I am still unable to solve it. I am using bootstrap 3 with disqus comments. Somehow disqus comments are overlapping my footer. See following picture.
I have tried many tricks but none of them worked.
Following is my HTML code:
<div class="wrapper">
<div class="sections">
<div class="row">
.... truncated unnecessary code
<div id="comments">
<div id="disqus_thread"></div>
</div>
</div>
</div>
</div>
<footer>
.....
</footer>
CSS
.wrapper {
width:100%;
min-height: 100%;
height: auto !important;
height: 100%;
}
.sections {
width: 100%;
padding-top: 20px;
border-bottom: #d8d8d8 solid 1px;
height: auto !important;
}
#comments {
width: 100%;
min-height: 350px;
height: auto !important;
}
Here is what I have done so far:
Changed iframe size using js but it does not work
setInterval(function() {
$('#comments').css({
'height': $('#disqus_thread').height() + 'px'
});
}, 1000);
Changed disqus_thread height to 400px but it does not change the height when new comments are posted
Used disqus onReady event to change the height of iframe but this one is also not working. Perhaps, disqus comments are loading after calling onReady event?
JS Code
this.callbacks.onReady = [function() {
resizeIframeWidth($('#disqus_thread iframe'));
}];
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}
You can handle the loaded events like this
// called by disqus
function disqus_config() {
this.callbacks.onReady = [function() {
// if your code respond to this event to resize the sidebar
$(window).trigger('resize');
}]; }
There are a heap of things it could be and you'd need to provide a link to your site where this occurs to diagnose properly. A code sample just isn't enough as the problem will becoming from your site's CSS (most likely).
Probably culprits:
no "clear:both" property on or between the comments and your footer.
alternatively, try clear:both; to #comments
the footer element has some crazy negative top margin, or has position: absolute.
I understand that it's jQuery that is causing a dynamically loaded object to break things. But the solution will actually be bullet proof CSS in my opinion.
Ensure that the following CSS properties:
clear:both;
width: 100%;
display:block;
float: none;
Are applied to the footer & comments ID's/elements or alternatively, that you have a full width block clearing element between the main area and the comments AND the comments and the footer. Alternatively, you might just get away with applying these to the #comments div (ie: just making it self clear, regardless of how high it goes).
If this STILL isn't working, put overflow:hidden on your #comments. It won't be wonderful, but at least it will stop the behaviour you describe :)
I solved this problem by removing position:relative from .sections css rule.
I wasn't sure how to correctly word the title, but here's what I have going on. I have two images in the body of the html.
<img src="http://www.narm.org.uk/home/images/Daylight%20design.jpg" id="b1" alt="day" />
<img src="http://www.aphoenix.ca/photoblog/photos/NighttimeColours.jpg" id="b2" alt="night" />
The corresponding css is as follow (basically makes one of them the background):
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
Here is the javascript:
window.onload = function() {
setBackground();
}
function setBackground() {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
//setTimeout(function() {setBackground()}, 1000);
}
What currently happens now is that one image will display briefly because I"m waiting until the page has loaded to hide both the backgrounds. How would I go about hiding the backgrounds before the page has completely loaded?
Maybe with css on your images:
display: none;
So, styles will be like:
#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
display: none;
}
I think you want to use jQuery.ready:
jQuery(function($) {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
});
The window.onload function is fired when all external sources is loaded (styles, scripts, images, etc..)
jQuery's ready method is fired when the DOM is ready.
A little article about the difference
Take the function out of the window.onload call, and move it to between two script tags at the top of the page. The browser reads from top to bottom, so it will execute the code as soon as it sees it.
so make your code look something like this:
<head>...
<script>
setBackground();
</script>
...</head>
i think you have to create a custom functions for this, you can have all your content hidden, once the page is ready .load() you hide you background then show the new background and the content
If I understand correctly, you want to preload the images and keep them hidden until you need them.
Rather than JavaScript, css seems to be the way to go here. However if you use display:none; some browsers might decide to delay the image load. My suggestion is to move the images offscreen:
#b1, #b2 {
left: -9999px;
top: -9999px;
z-index: -1;
position: absolute;
}
[Update] Here is a test page for display:none:
http://www.quirksmode.org/css/displayimg.html
It mentions that Opera will not load the images.
PROBLEM:
The contents of my div are positioned 'absolute' and the width of the contents are larger than the div.
As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !
I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}
I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?
You must use
$("element").on('mousedown', function(e) {}
Just change live to on