I tried to use the following function in order to set the div's position to 100 px from top after scrolling 100 px.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(window).scroll(function(){
$("#header").css("top",Math.max(0,100-$(this).scrollTop()));
});
</script>
<div class="header" style="position:fixed;top:100px;background-color:red">something</div>
it is not working(the div stick to it's fixed position). it seems that the function is not relating to the div. what is my problem ?
Your problem ist that your div has the class header, not the id.
Try
<div id="header" style="position:fixed;top:100px;background-color:red">something</div>
$(document).ready(function(){
$('.header').scroll(function(){
$(this).css("top",Math.max(0,100-$(this).scrollTop()));
});
});
Related
i have problem with scroll. Its working fine, but i want to make it instantly without any animation, just then page refreshing be the same place as before without scrolling to the place.
my js code.
<script type = "text/javascript">
$(function() {
$(window).scrollTop( $("#col-6").offset().top)
});
</script>
My project structure for example.
First including css and html
<?php
include(html/css.php);
some code....
<div class=col-6>
some code....
</div>
include(footer.php);
?>
so in footer php after
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/5fbb5e690d.js" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
i use my js code.
And after page load its scrolling to col-6 div. But, i want instantly without any animation or scrolling be in what place.
What i try
<script>
$(window).on('beforeunload', function() {
$('body').hide();
$(window).( $("#col-6").offset().top)
});
</script>
any1 have solution for it ?
Since you use jQuery, your can use .animate() with an animation delay of zero milliseconds (instantaneous).
That is .animate([property], [delay], [callback]).
To make sure to hide the very quick scroll effect, you can hide the whole page (using the CSS opacity at zero), then after the scroll has completed, restore the opacity.
Documentation
$(document).ready(function() {
// hide the whole page
$("html").css({opacity:0})
// scroll and unhide the page using the complete callback
$("html").animate({
scrollTop: $("#scroll_to_me").offset().top
}, 0, ()=>$("html").css({opacity:1}))
})
.space {
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="space"></div>
<div id="scroll_to_me">HERE</div>
<div class="space"></div>
Let's say I have the div element, inside which there is some text. Is it possible to figure out the length of the text itself? Quite often the length of the div is a lot bigger than the length of the text inside? Here is the image of such div.
The pure javascript solution to that would be great!
Welp, your div is a block element, so if you use Javascript to get the width, it will be of the entire div. I would recommend wrapping your inner text with <span> (inline elements) then look at the width of the span.
<div><span id="foo">Lorem ipsum</span></div>
<script>var width = document.getElementById('foo').offsetWidth;</script>
BTW, I just copied the code from How do I retrieve an HTML element's actual width and height?.
Try this to get the length of text inside div
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
$(document).ready(function (){
if ($('#test').text().length > 0)
alert($('#test').text().length);
});
</script>
</head>
<body>
<div id='test'>28</div>
</body>
</html>
I'll explain what I mean in more detail:
There is a way to make the entire screen movable by either dragging it with the cursor, or touching it with your fingers. You're then in turn able to snap to the div closest to your location. The div is also able to adjust based on resolution and changing the screen size.
Here is the prime example: http://making.gene.com/1/start/
I'm interested in how you can accomplish this, and I've done research on the subject.
There are many jquery plugins that let you snap to a div, or move an object on the screen, but nothing to the degree i'm looking for.
This is my first post, so let me know if there is something I can add that will help you.
Here is an example of snapping to a div, the most i've been able to find out.
<script src="src/jquery.scrollsnap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap',
proximity: 50
});
});
</script>
This lets you snap to a div when you scroll near it, while also being able to change the proximity of when it snaps.
try this http://guidobouman.github.io/jquery-panelsnap/
this plugin snap the section
<!doctype html>
<html>
<head>
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.panelSnap.js"></script>
<script>
jQuery(function($) {
$('body').panelSnap();
});
</script>
</head>
<body>
<section>
...
</section>
<section>
...
</section>
<section>
...
</section>
</body>
</html>
you should start from here
$(function() {
$( "#draggable" ).draggable();
});
working demo: http://jqueryui.com/draggable/ and http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
I am relatively proficient in html and css, but am not with javascript and jquery. I am trying to get a div to move diagonally, however its not working.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);
});
</script>
<div id="box1"></div>
</body>
</html>
I know its probably something really stupid, but does anybody know what the problem is?
Thanks!
You have to first make it position: absolute or relative in CSS.
#box{
position: absolute;
}
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);
Oh yeah, do this:
$("div#box1") //correct
instead of:
$("#box1 div") //incorrect
DEMO: http://jsfiddle.net/DerekL/bwg8R/
To animate something using left and top the element needs to be positioned. either relative or absolute, otherwise left and top don't do anything to the element.
See my example here: http://jsbin.com/ayafup/edit#html,live
And target your #box1 element directly as $(#box1), not all child div's inside it as you're doing, $(#box1 div)
Also move your scripts down to the bottom before </body> for better performance and better practice in general.
Give your div some position because left and top are used after position is set
<div id="box1" style="position:absolute;">s</div>
And in javascript
$("#box1 div").animate({left: '+=150', top: '+=150'}, 1000);
Should be
$("#box1").animate({left: '+=150', top: '+=150'}, 1000);
Because the previos one was selecting child of #box1
Here is the best solution I find for animations effects.. I you don't have any constraint to support older version of browser than animation of you will be like eating a cake..
Try this http://daneden.me/animate/
Cheers...!!!
http://www.globalguideline.com/interview_questions/Questions.php?sc=C_Sharp_Programming_Language_Interview_Questions_A&page=6
In this URL, a user sees on the left side a Twitter picture move. How to do it. What's this technique name? How to do that?
Try to search for floating menu.
There are two types: with fixed and absolute positioning. If you want similar animation as in the example then go with absolute. And if I remember it right IE6 has some issues with fixed position.
Alternatively you can go with jQuery, here is a good example with sources.
You need to hook scroll event to keep content always visible.
Hope this helps you:
<html>
<head>
<title>fixed div</title>
<script src="js/jquery1.4.1.js" type="text/javascript"></script>
</head>
<body>
<div id="div1" style="float:left;left:10px;top:10px;z-index:5000;height:50px;
width:50px;clear:both;background-color:green;color:grey;
font-size:300%;">O</div>
a<br/> b<br/> b<br/> d<br/> e<br/> f<br/> g<br/> h<br/> i<br/>j<br/>
k<br/> l<br/> m<br/> n<br/> o<br/> p<br/> q<br/> r<br/>
<script type = "text/javascript">
$(function(){
var left = 10;
var top = 10;
var d=$("#div1");
$(window).scroll(function(){
var t=$(window).scrollTop() + top +"px";
d.animate({'margin-top':t},'slow');
});
});
</script>
</body>
</html>