I'm using the latest version of JQuery and trying to animate a div to the left of the screen. It's just about fine, except that it jumps up noticeably before actually animating. I've set it up in jsFiddle here http://jsfiddle.net/ns6string/agY2z/
Be sure to click on either 'portfolio' or 'about' to see what I'm dealing with.
You can see the code I've set up (I tried to clean it up) but here it is again, in case anyone doesn't feel like hitting the jump ;)
HTML:
<body>
<div id="header">
HOME
</div>
<div id="menu">
<div id="portfolio">
<h3 class="menuitem" >Portfolio</h3>
</div>
<div id="about">
<h3 id="about" class="menuitem">About</h3>
</div>
</div>
</body>
CSS:
body{ right: 0px; left: 0px; bottom: 0px; top: 0px; position: fixed; color: #444444; margin: 0px; background-color: #c7c7c7; font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
#menu{ text-shadow: 1px 1px 3px white; position: fixed; margin-top:220px; width: 200px; margin-right: auto; margin-left: auto; right: auto; left: 47.5%; }
.menuitem{ display: inline-block; text-align: left; }
JS:
$(document).ready(function() {
//Hovering stuff went here, shouldn't be relevant
$(".menuitem").click(function() {
$("#menu").animate({
'top': '10%',
'left': '7%'
}, {
duration: 500,
queue: false
}, function() {})
});
});
Firstly: Very odd issue.
All you need to do is specify a css value for top: 5% on #menu (should be fine with any value if 5% is not what you want). This will stop the "shake" when you click it.
On a side note I noticed that you've specified values for right and left. I would suggest removing the right value.
Related
I have a simple site with two sections. Ideally the section at the top would load at a particular size, but then with the click of a button located at the bottom of this section, the section would increase size to fit screen. If clicked again the section would go back to its original size.
Functionality should be exactly as the one on this site:
http://www.urbandisplacement.org/map/la
I have a couple of questions:
What is the best way to accomplish this effect through JQuery/CSS?
How do I make sure the button stays fixed at the bottom of the growing/shrinking div and moves as the div does?
I've tried resetting the height of the top div when the button is clicked, using JQuery, but this neither animates nor keeps the button at the bottom of the div when it's used.
Thank you!
Here's a simple CSS only version:
https://jsfiddle.net/otenf0fy/
body,#wrapper {
height: 100%;
}
#expand {
display: none;
}
#top {
background: black;
color: white;
padding: 1em;
position: relative;
}
label {
background: blue;
color: white;
border-radius: .5em;
padding: 1em;
display: block;
width: 5em;
text-align: center;
cursor: pointer;
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-2.5em,0);
}
#expand:checked ~ #top {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<body>
<div id="wrapper">
<input id="expand" type="checkbox">
<div id="top">
<p>
This is just a test
</p>
<label for="expand">Expand</label>
</div>
</div>
</body>
I'm having some trouble with my Pagination nav that is display:none. When I check on inspect element it takes no space, but for some reason, where the pagination nav is, there's an empty space that is not supposed to be there.
I've tried adding overflow:hidden, visibility:none, height:0, but none of it it's working.
Maybe it's something to do with position relative and absolute, I don't understand it very well yet.
themeexp1.tumblr.com
Edit: It's not the 14px margin, it's a much bigger margin
Empty space: http://postimg.org/image/hiixhonoh/
HTML
<div id="content">
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="photo inner">
<a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a>
</div>
</div>
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li><a id="nextPage" href="{NextPage}">Next page</a></li>{/block:NextPage}
</ul>
</nav>
</div>
CSS
#content{
margin: 0 auto;
position: relative;
}
.container{
margin-bottom: 14px;
}
.container-overlay{
width: 100%;
height: 100%;
opacity: 0;
position:absolute;
}
.icons{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
text-align: center;
}
#pagination{
display: none;
position: absolute;
}
It's hard to tell what you want without a demo, but there is space at the bottom because your .container div has margin-bottom: 14px;.
Example Fiddle
Okay, I am a beginner at Javascript and jQuery, so this may be a very simple question, but I've tried researching it, and can't quite find any good answers.
On my website:
http://joeyellisdesign.com/testingspace/JE2
I have a rollover on the "work" section of my portfolio that I am trying to make only appear when you hover over the individual image.
To set up the animation, I have this code:
jQuery
$(document).ready(function(){
$(".project").hover(function(){
$(".projectdescription").animate({top:'4px'});
},function(){
$(".projectdescription").animate({top:'183.77px'});
});
});
Also, here is the CSS and HTML.
<div class="project">
<a class="workanchor" href="#">
<img src="files/workthumbs/finsons.jpg">
<div class="projectdescription">
<h4>FINSON'S BEARD PRODUCTS</h4>
<p>Packaging and Identity</p>
<img class="plus" src="files/plus.png" width="129" height="129">
</div>
</a>
</div>
.project {
width: 295px;
height: 240px;
margin: 0px 1.25% 7%;
padding: 0px;
float: left;
overflow: hidden;
position: relative;
}
#workcontainer .project .projectdescription {
background: #FFF;
margin: -4px 0px 0px;
padding: 0px;
width: 100%;
height: 240px;
position: absolute;
top: 183.77px;
}
#work #workwrapper #workcontainer .project .workanchor .projectdescription .plus {
margin: 30px 0px 0px 83px;
padding: 0px;
height: 129px;
width: 129px;
}
Thanks in advance for any and all help/and/or information that I know nothing. ;)
Try:
$(".project").hover(function(){
$(this).find(".projectdescription").animate({top:'4px'});
},function(){
$(this).find(".projectdescription").animate({top:'183.77px'});
});
$(".project").on('mouseenter mouseleave', function(e){
$(".projectdescription", this).animate({top: e.type=='mouseenter' ? '4px' : '183.77px'});
});
FIDDLE
I'm using jquery ui resizeable on a scrollable list. The jquery part worked well but the "grip" to resize it scrolls along with the list instead of staying positioned absolutely to the list even though the parent is already relative positioned.
I'm not sure what's wrong with the CSS.
Made a fiddle to illustrate: http://jsfiddle.net/2pg7r/
Would appreciate any help or hints!
$( "#unlNotification" ).resizable();
<div id="container">
<ul id="unlNotification"style="height: 127.7px;">
<li>qwe</li>
<li>qwe</li>
<li>qwe</li>
...
</ul>
</div>
.ui-icon {
background-color: black;
width: 20px;
height: 20px;
}
#container, .ui-resizable {
position: relative;
}
.ui-resizable {
overflow: auto;
}
ul, li {
list-style: none outside none;
}
.ui-resizable-se {
bottom: 1px;
cursor: se-resize;
height: 12px;
right: 1px;
width: 12px;
position: absolute;
}
Edit: Thanks everyone for your help! I realized what i did wrong by looking at both your codes and amended them to include the query part: http://jsfiddle.net/2pg7r/4/ in case anyone needs to use it like that.
I can only pick one as the correct answer so I'll just pick the first one since it's both the same (Sorry!) But thank you!
I placed div outside of ul and moved .ui.resizable-se 20px from right. Is this what you want?
<ul id="unlNotification"style="height: 127.7px;">
<li>qwe</li>
<li>qwe</li>
<li>qwe</li>
...
</ul>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
css
.ui-resizable-se {
right: 20px;
}
jsfiddle
it will help you
http://jsfiddle.net/2pg7r/3/
#container {
position: relative;
}
.ui-resizable-se {
bottom: 1px;
cursor: se-resize;
height: 12px;
right: 1px;
width: 12px;
position: absolute;
right:20px;
}
I have two divs that I want to show one and hide the other continuously. The code I have only shows the first one Mass_alert. What must I fix to show and hide both divs in turn.
Here is the HTML.
<div style="position: relative; top: 50px; width: 778px; margin: 0 auto;">
<div id="alerts" style="float: right; width:200px; height: 25px; background: goldenrod; border-radius: 3px 3px 3px 3px; font: 11px Arial; color: #404040; overflow: hidden;">
<div id="Mass_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px;"></div>
<div id="Devotion_alert" class="alert" style="position: relative; top: 5px; margin: 0 auto; text-align: center; width:100%; height: 20px; visibility: hidden;"></div>
</div>
</div>
The code to do the fade toggle is this one.
$(document).ready(function() {
show_next_Mass(channel_array_sort);
show_next_devotion();
setInterval("show_alerts()",10000);
var continuous = function () {
$("#Mass_alert").fadeToggle(600);
$("#Devotion_alert").fadeToggle(600);
};
setInterval(continuous,600);
});
Judging by this API doc, you need to use display: none; instead of visibility: hidden; for the hidden element.
When you watch what .fadeToggle() does you see the change to the following attributes
opacity: 0;
display: none;
(As also Alexander pointed out in his answer.)
So I've copied this to the style attribute for the second div. But it didn't work. My assumption is jQuery keeps in some way track of what it has done to the elements but not really recognise the initial CSS.
My idea is that jQuery somewhat keeps track of what it has done to the elements but not really recognise the style the HTML came already with. So I cleaned 2nd div's CSS from any hiding related attributes and put a .hide() in the "initialising function".
seems to work (#jsFiddle)