I have a parent div called lyricpadding, and inside I have a lot of <h4>'s with a unique ID. Anyways, what I need to do us, by using preferably Jquery or Javascript or CSS, is to keep the <h4> marked with the class of highlighted in the middle of the parent container, but I don't want it to stretch over the whole thing, I just want the text to be centered by an automatic scroll until it gets to the bottom. So the div with the class highlighted will always be visible, preferably in the center.
Here is a jQuery example. It uses position absolute and then adjusts according to the scroll position and window size. See this fiddle.
HTML:
<div class='lyricpadding'>
<h4 class='highlighted'>Highlighted</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
</div>
CSS:
.lyricpadding
{
height:1000px;
width:100%;
background-color:lightblue;
}
.highlighted
{
display:inline-block;
position:absolute;
}
jQuery:
function positionMiddle()
{
var $highlighted = $('.highlighted');
$highlighted.css({
left: ($(window).width() - $highlighted.outerWidth())/2,
top: $(window).scrollTop() + ($(window).height() - $highlighted.outerHeight())/2
});
}
$(window).resize(function(){
positionMiddle();
});
$(window).scroll(function(){
positionMiddle();
});
// To initially run the function:
positionMiddle();
Related
I'm having an issue resetting a div's left position with jquery after an animation. I'm trying to animate a div from off the screen(left) to on the screen. However, I only want to trigger this animation if the value of scrollTop of the window is greater than a certain value. once the value of scrollTop is less than the value, I want the div's position to change so that it is offscreen again. This is working but only sometimes and I'm not sure why. I am also setting the position of the div to absolute at the same time I am setting it to go off the screen and this change always works!. Below is the code as well as the CSS of the div I'm trying to animate. Thank you!
Function to change position on scroll
$(window).scroll(function() {
if( $(this).scrollTop() > 500 {
$(".animated-logo").css({position:'fixed'});
$(".animated-logo").animate({left: '20px'},500);
}
else{
$('.animated-logo').css({position: 'absolute',left:'-150px'});
}
});
CSS for the animated-logo element
.animated-logo
{
position:absolute;
top:0;
left:-150px;
width:100px;
z-index:2;
}
So first off, you have a syntax error.
I would approach this with using classes instead of doing it like this. At best you're going to have a buggy transition. You can adjust the css transition to make it your desired timing.
JS:
$(window).scroll(function() {
if( $(this).scrollTop() > 500) {
$(".animated-logo").addClass('visible');
}
else{
$(".animated-logo").removeClass('visible');
}
});
CSS:
.animated-logo{
position:absolute;
top:0;
left:-150px;
width:100px;
z-index:2;
transition:0.5s;
}
.animated-logo.visible{
position:fixed;
left:20px;
}
https://jsfiddle.net/783z9rhm/6/
When you say This is working but only sometimes and I'm not sure why, it's not sure what the problem is so I'll assume you are having issues with the animation after the first time it runs. The is maybe because you are firing it ON EVERY USER SCROLL ACTION, which is a lot. Using a flag to fire it only once every time the 500px threshold is crossed will get rid of the glitch
HIH
var visible = false;
$(window).scroll(function() {
if( $(this).scrollTop() > 500) {
if(!visible){
visible = true;
$(".animated-logo").css({position:'fixed'});
$(".animated-logo").animate({left: '20px'},500);
}
}
else{
visible = false;
$('.animated-logo').css({position: 'absolute',left:'-150px'});
}
});
.animated-logo
{
position:absolute;
top:0;
left:-150px;
width:100px;
height:100px;
z-index:2;
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animated-logo"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
I have a page which contains a relatively positioned div with absolute content. Here is a jsfiddle.
When I click #view1, I want #view2 to move to the top of the viewport. The debugger shows the click being handled but nothing changes in the display.
Can anyone help.
Here is the example:
$(document).ready(function(){
$("#view1").on("click", function (){
$("#view2").scrollTop(0);
});
});
</script>
<style>
body,div,img { padding:0; border:0; margin: 0; }
img, #view1 { position: absolute; }
#view2 {position: relative; }
</style>
</head>
<body>
<p>
Lots of stuff up here, so div below scrolls off page.
</p> ... more stuff
<div id="view2">
<div id="view1" > <img src="http://lorempixel.com/100/175/" /></div>
</div>
<p>
Lots more stuff down here ....
</p>
Of course it won't show any change. As you are not doing anything with $("#view2").scrollTop(0); . By the way, why you have put 0 inside the parenthesis ? It is not needed.
scrollTop()
It returns the vertical position of scrollbar (of matched element).
http://www.w3schools.com/jquery/css_scrolltop.asp
Write this alert($("#view2").scrollTop()); , instead of $("#view2").scrollTop(0);
It will return you an integer.
I'm trying to calculate width and height of elements, to set precise position in CSS with jQuery, but for some reason calculation for some IDs doesn't work (alert shows 0 or nothing) while working for other IDs and classes. Here's the jQuery code:
$(document).ready(function () {
$("#img1").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg1').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg1').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$(this).css({
"top": randomtop,
"left": randomleft,
"z-index": randomzindex
});
});
$("#img13").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg13').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg13').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
alert ($('#mimg13').outerHeight());
$(this).css({
"top": randomtop,
"left": randomleft,
"z-index": randomzindex
});
});
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
});
CSS:
html {width:100vw; height:100vh;}
body {margin:0; width:100vw; height:100vh; overflow:hidden;}
.pattern {width:100%; height:100%; margin:0; padding:0;}
.drag {overflow: visible; padding-bottom: 0px; cursor: move; position: absolute;}
.mood-img {position:absolute; display:none; margin:0; padding:0;}
HTML:
<body class="pattern-2">
<div class="pattern"></div>
<div id="img1" class="drag mood-img">
<img class="shadow moodimg1" src="mood/brick-mood-1.png">
<span class="mood-name shadow">
<nobr>A. Brickwork I</nobr>
</span>
</div>
<div id="img13" class="drag mood-img">
<img id="moodimg13" class="shadow moodimg" src="mood/brick-graphic-4.png">
<span class="mood-name shadow">
<nobr>6. Untitled</nobr><br>
<small>digital</small>
</span>
</div>
</body>
I have tried lot of different options but none of them worked and the problem is always (as it seems) is that JS doesn't calculate elements' sizes, so positions are also calculated wrong.
And also may be there's some more simple way to make all these calculation, cause I have 13 elements with different IDs (from img1 to img13 and from mimg1 to mimg13. May be I could use JS to get IDs by itself, with no need for me to write all IDs into JS?
IDEA
I have a page with a few div elements, one of them is visible, others are set to display:none. When particular span element is clicked, JS sets certain hidden div visible, changing its CSS to display:block. The div I have this problem with at first was an invisible container for several other divs with images and text elements and I wanted to position these contained elements against the container div (which had width and height set to 0 and margin top and left set to 50%) with margin-top and margin-left. Then I set the container to have 100% width and height and tried to position container's content with top and left. Then I removed the container and set its former inner elements to have position:absolute and tried to still position it with top and left properties calculated and set with jQuery. Actually those elements are images with some pop-up text, which should be randomly placed all over the page (overflow:hidden), and have z-index set randomly as well. I've spent three days trying to find the solution, but got no result — either it's not working at all (elements are placed all on top of one another in the same position (top left corner) either calculations are done wrong and some (or all) divs are positioned out of the page which creates scroll or hiding images when overflow is hidden. Hope I'm explaining it fine, so anyone could be able to understand what have I wanted to do.
You're calculating dimensions on page load - $(document).ready(... but unfortunately it doesn't mean the images are ready at this point. It's a common issue.
Since you already have your images wrapped with .each function, simply replace it with the load event handler
$("#img1").on('load', function () {
...
});
http://jsbin.com/iLIWOfa/2/edit
If the CSS of a parent element of a image is display: none, the image is not loaded and there is no width or height.
Just set opacity: 0 instead.
I have created a customized menu. See here. On click of this link I have a shadowbox popping up which has a long list of items. Now I want to have a "back to top" anchor link which takes me back to the top of the menu list.
I've set your lightbox with the #box id.
Html
<div id="box">
...
<!-- long content there -->
To Top
</div>
CSS (setting the width of elements)
#box {
position:relative;
width:200px;
height:250px;
overflow:auto;
}
#box #toTop {
position:absolute;
display:none;
left:150px;
top:10px;
}
jQuery
$('#box').bind('scroll', function(e) {
if ($(this).scrollTop() > 100) {
$('#toTop').fadeIn();
$('#toTop').css({'top' : $(this).scrollTop() + 100});
} else {
$('#toTop').fadeOut();
}
});
$(document).on('click', '#toTop', function(e) {
e.preventDefault();
//$('#box').scrollTop(0); //just go to top
$('#box').animate({scrollTop : 0},'slow'); //animate
});
Fiddle
Pretty easy with:
document.querySelector("iframe").contentWindow.scrollTo(0,0);
Now put a button on the page and call that on click. Oh, and omit the height:100% on your body of the iframe, this way you get rid of the second scrollbar.
You can try this out by just pasting the line above and executing it in the console of your browser with your webpage.
I need to flip a div panel left once a some item div get clicked and hide,once item div get clicked again. (exactly like new twitter reading panel).
i have tried several methods but i couldn't animate it smooth.
recently i identified it not happen smoothly because of the bad what have i done.i increased width of outter div and decrese width.
are there any good suggestion or code snippet to work my need??
Here is the code that i have used for animate and gt show the more read div panel
$("#more-item").animate({"width": "toggle"}, { duration: 500,specialEasing: {width: 'linear', height: 'easeOutBounce'} });
Here is the scenario that i need to see.
1. clicked on item div
2. more read div panel animate and flip to left and show the
3. click again item div
4. more read div panel animate and flip right and hide
when we at third point if we again click another item div just load content of recent clicked div instead animate and hide the more read div
here is the screen shot what my need functioning on new twitter reading panel.
You can easily do this by adding a fixed positioned <div> to the right, wrap your items in a container and animate the panel and the container's margin accordingly.
The trick is to use the top, bottom and right css properties to position the reading panel.
Here's a demo: http://jsfiddle.net/wUGaY/1/
HTML:
<div class="panel"></div>
<div class="container">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four: This contains a bit longer text to test if wrapping is working correctly.</div>
<div class="item">Five</div>
<div class="item">Six</div>
<div class="item">Seven</div>
<div class="item">Eight</div>
<div class="item">Nine</div>
<div class="item">Ten</div>
</div>
CSS:
.panel {
position:fixed;
top:0px;
bottom:0px;
right:0px;
width:200px;
padding:20px;
border:1px solid #eee;
background-color:white;
}
.item {
border:1px solid #eee;
padding:20px;
}
.active {
background-color: #eee;
}
Javascript:
$(function(){
function showPanel() {
// Show the panel and animate it into view
$('.panel').stop().show().animate({
right: '0px'
});
// Animate the container's margin to make room
// for the reading panel
$('.container').stop().animate({
marginRight: '232px'
});
}
function hidePanel() {
// Move the panel off the screen and hide it when done
$('.panel').stop().animate({
right: '-232px'
}, function(){
$(this).hide();
});
// Animate the container's margin back to normal
$('.container').stop().animate({
marginRight: '0px'
});
}
// Hide the panel initially and set its position
$('.panel').hide().css('right','-232px');
// What happens when they click on inactive items?
$('.container').delegate('.item:not(.active)', 'click', function() {
var $this = $(this);
// Make the current item the only active item
$('.active').removeClass('active');
$this.addClass('active');
// Add some content to the reading panel
$('.panel').html($this.html());
// Show the reading panel
showPanel();
});
// What happens when they click on an active item?
$('.container').delegate('.active', 'click', function() {
// Make it inactive
$(this).removeClass('active');
// Hide the reading panel
hidePanel();
});
});