I am trying to use a div that is set to 100% of the initial browser window, with the Backstretch plug-in applied to it, and have it animate on a click to resize to a smaller dimension, while another div underneath it resizes as well, allowing them to share the screen. All the functionality seems to work, accept that the div will resize and the backstretch will go with it initially, but after the animate function is over, the backstretch will snap back to 100 percent of the window. Even weirder is that when the entire browser is resized by the user, the backstretch will snap into the correct position, and remain there.
I put this into a jsfiddle and the problem works exactly the same way that it does in my code. The click function resizes the div, and the backstretch snaps out of it until the browser is resized. Normally I love trying to figure this kind of thing out, however I think this might be over my head, and I have a hard and fast deadline coming up and this problem has been holding me up for 2 weeks. Any insight would be tremendously helpful.
Heres the code I'm working with:
HTML
<div id="fullbleed">
<div class="button">CLICK</div></div>
<div id="article"></div>`
CSS
html, body {
height:100%;
}
body {
margin:0;
padding:0;
}
.button{
width: 70px;
height: 30px;
background-color: fuchsia;
bottom: 190px;
position: absolute;
cursor: pointer;
font-family: 'Open Sans' sans-serif;
font-weight: bold;
text-align: center;
padding: 3px;
font-size: 21px;
left: 41px;
}
#fullbleed{
position:inherit;
top:0;
left:0;
height:100%;
width:100%;
}
#article {
height:0px;
overflow: hidden;
margin-top: 30px;
background-color:aqua;
}
JS
$("#fullbleed").backstretch("http://dl.dropbox.com/u/515046/www/coffee-light.jpg");
$(".button").click(function() {
$("#fullbleed").animate({
height: "200px",
}, 1000);
$(".button").css({
"visibility": "hidden"
});
});
$(".button").click(function() {
$("#article").animate({
height: 5000,
}, 1000);
});
Related
I'm trying to make a puzzle out of a background image with numbered pieces. The pieces will eventually be movable with javascript. Right now, I'm stuck simply trying to position the pieces of this image. The html has a div with id called puzzlearea, and I have appended children with javascript, which I know works because it displays the new div pieces and their numbers. The CSS refuses to move the pieces relative to this background, and my two test pieces are stuck in the top left corner, seemingly ignoring my background-position values. Here is the CSS:
body {
text-align: center;
font-family: cursive;
font-size: 14pt;
}
#puzzlearea {
width: 400px;
height: 400px;
margin: auto;
position: relative;
background-image: url("planck-image.png");
}
.tile {
font-size: 40pt;
color: red;
line-height: 70pt;
width: 90px;
height: 90px;
border: 5px solid black;
background-position: -200px -200px;
position: fixed;
}
Update: Screenshot.
Would you have any ideas as to why the positioning is not occurring?
You need position: absolute on .tilein order to be able to place them with the top/bottom/left/right parameters (and you need those too).
fixed position refers to the viewport, not the parent element.
this might be a weird one but what I am trying to do is make a div slide up from the bottom of the screen when someone clicks an image. To paint this clearer, imagine the Windows desktop, and if you click the start menu image/icon, instead of the start menu popping up from the button, the entire start menu bar would slide up exposing the entire div.
What I'm doing now (forgive me as I have just learned JS and jQuery from codecademy) is using the slideUp function. However, this is causing the div to slide down out of sight instead of up, exposing the entire div. The goal is that when you click the button the div slides up, and if you click the button again (or anywhere outside the div) it'll slide back down leaving the top 60px exposed like before.
Here's my JS/jQuery code:
$('#start').click(function() {
$('#nav').slideUp('slow');
});
My HTML
<div id="nav" class="nav">
<img id="start" src="img/btn_start.png">
</div>
My CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
font-family: Helvetica;
}
.nav {
width: 100%;
min-width: 100%;
height: 500px;
background: #000;
color: #fff;
position: absolute;
bottom: -440px;
text-align: center;
padding: 5px;
box-sizing: border-box;
overflow: auto;
}
.nav ul li {
display: inline;
}
.nav li {
padding: 20px;
margin-top: 80px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#start {
float: left;
}
Thanks, and I hope this isn't too ridiculous.
Instead of slideUp you should use
$('#start').click(function() {
$('#nav').animate({bottom: "0px"}, 1200);
});
...which will smoothly animate from the current location until the bottom is at 0px (i.e. aligned with the bottom of the containing element).
For even smoother results, checkout velocity.js (http://julian.com/research/velocity/), which does even smoother animation by synchronising with browser frame updates.
JsFiddle here: http://jsfiddle.net/11r46jnm/
You can also do this with CSS transitions instead. For stuff like this I like to hook my CSS into data attributes on the HTML:
<div id="nav" class="nav" data-nav-state="collapsed">
<img id="start" src="img/btn_start.png">
</div>
...use javascript to change the attributes...
$('#start').click(function() {
//toggle the nav element between two states
var currentState = $('#nav').attr("data-nav-state");
var newState = "collapsed";
if ( currentState === "collapsed" ) {
newState = "expanded";
}
$('#nav').attr("data-nav-state", newState);
});
Finally we use CSS to set the positions of the two states, and to ensure that transition is smooth. CSS transitions have much better performance than jQuery, so I recommend using them if you can:
#nav[data-nav-state=collapsed] {
bottom: -440px;
}
#nav[data-nav-state=expanded] {
bottom: 0px;
}
#nav {
transition: bottom 1.2s ease;
}
See this jsFiddle for a demo: http://jsfiddle.net/Lv2saepy/1/
I have a simple page containing 3 divs within a container like this:
<body>
<div id="mainContainer">
<div id="mainColumn1" class="bgColumn"></div>
<div id="mainColumn2" class="bgColumn"></div>
<div id="mainColumn3" class="bgColumn"></div>
</div>
</body>
They are meant to be 3 even columns that occupy entire page. Whenever you hover one of them it expands to 50%, and the others shrink to 25%.
It's hard to explain where the problem is so here's jFiddle:
http://jsfiddle.net/FWcC5/2/
If you move cursor quickly all over the place, you will notice white space appear on the right side. It happens in Firefox. Oddly enough in Chrome it behaves exactly as it should.
I tried using the same thing with flex-grid, which worked but the performance dropped drastically in Chrome.
Any help would be appreciated.
I'm not sure what the problem is with Firefox though I tried and can confirm there is an issue, however there is a better and less procedural way of achieving what you're currently doing.
You can shorten your javascript massively to:
$(document).ready(function () {
$('.bgColumn').hover(function(){
$('.bgColumn').width("25%").not($(this));
$(this).width("50%");
});
});
see fiddle
$(document).ready(function () {
$('.bgColumn').hover(function(){
$(this).width('50%');
$('.bgColumn').not(this).width('25%');
},
function(){
$('.bgColumn').width('33.3%');
});
});
html, body {
height: 100%;
margin: 0;
padding: 0;
background-repeat: no-repeat;
}
div {
position: relative;
background-position: center;
}
#mainContainer {
width: 100%;
height: 100%;
overflow: hidden;
white-space:nowrap;
}
.bgColumn {
position: relative;
background-repeat: no-repeat;
transition: all 0.1s linear;
height: 100%;
width: 33.333%;
display: inline-block;
}
#mainColumn1 {
background-color: gray;
float:left;
}
#mainColumn2 {
background-color: white;
float:left;
}
#mainColumn3 {
background-color: black;
float:right;
}
I Recently try out the div with expand and collapse. Everything works perfect. Here is the fiddle with I make the bar as fixed with expand and collapse button whenever i increase the font size of the div then the button doesn't comes with the div proportionally. Here is the fiddle what i am expect clearly.
http://jsfiddle.net/vicky081/GyG3w/1/
.btnn
{
width: auto;
height: auto;
cursor:pointer;
background-color:#02adea;
position: absolute;
border:solid;
margin-left:3%;
border-color:#ffffff;
border-top-color:#02adea;
top:36px;
text-align: center;
padding-top: 7px;
color:white;
}
You can see that button comes outside the div. Is there is a way to show the button which is attached to the div even if i change the font size.
Any suggestion would be great.
Thanks.
With a top value of 100% the button is always stuck to the container whatever the font-size.
See it live http://jsfiddle.net/LeBen/UCTgR/ (I also added a CSS Normalize)
$(document).ready(function () {
$(".text").hide();
$(".btn").click(function(e){
var txt=$(this).html();
var flag = txt==="open";
if(flag){
$(".text").show();
$(this).html("close");
}
else{
$(".text").hide();
$(this).html("open");
}
});
});
.banner{
font-size:1.2em;
position:fixed;
width:100%;
}
.text {
background:#02adea;
text-align:center;
width:100%;
}
.btn{
background:#02adea;
border:5px solid white;
border-top-color: #02adea;
color:white;
text-align:center;
width:2em;
}
http://jsfiddle.net/GyG3w/5/
I suppose this is the effect you wanted, in this you can change the fixed div's font size as much you want, the rest of the elements' will be resized accordingly and the layout will be preserved
You can use bottom: -49px; instead of top: 36px;
I'm having trouble animating this item using PHP and CSS and Javascript (with jQuery).
I want a div that slides out from the left side of the screen when its tab bar is hovered over.
I have three divs: the container, the contents, and the tab.
Here's the Javascript and HTML:
<div id="LeftSidebar">
<div id="LeftSidebarTab" class="">
Left sidebar tab
</div>
<div id="LeftSidebarContents" class="">
Left sidebar contents
</div>
<script type="text/javascript">
$("#LeftSidebar").mouseenter(function()
{
$("#LeftSidebar").animate(
{
left: 0px
});
});
$("#LeftSidebar").mouseleave(function()
{
$("#LeftSidebar").animate(
{
left: -100px
});
});
</script>
</div>
Here's the CSS:
#LeftSidebar
{
position: absolute;
display: block;
z-index: 12;
top: 220px;
left: 0px;
background-color: green;
height: 500px;
}
#LeftSidebarTab
{
float: right;
background-color: red;
width: 20px;
height: 100%;
}
#LeftSidebarContents
{
background-color: blue;
width: 100px;
height: 100%;
}
I'm new to Javascript, HTML, and et al.
The code isn't doing what I expect it to do.
I expect it to, when hovered over, gradually move the 'left' CSS property to 0px, and when the mouse moves off of the contents, move the 'left' CSS property to -100px.
When I hover over it, I see no visible change to the div. I can't even tell if the 'mouseenter()' or 'mouseleave()' functions are even being triggered.
Questions:
1) How can I check if the function is being triggered or not? Can I output some text or something, using Javascript? Maybe pop up a dialog box for debugging?
2) Will mouseenter/mouseleave be triggered for 'LeftSidebar', even though LeftSidebarContents and LeftSidebarTab completely cover every pixel of LeftSidebar?
3) Am I making any obvious mistakes in the above code that's causing it not to work as I expect?
You probably want to put some single quotes around the 0px.
Check this: http://api.jquery.com/animate/
Copy their example and get theirs working them modify it to your needs.
As for alerts to check if the event is being triggered:
alert("Thanks for visiting!");
Use ff with firebug or chrome to debug your script. Put a pointer on the functions, this will cause the browser to pauze execution of your script so you can step over it and see what happens.
A quick and dirty test to figure out if an event is being triggered is to use the alert function. For example:
$("#LeftSidebar").mouseenter(function()
{
alert("Mouse Enters Region");
});
Also this is how I would do your css file:
#LeftSidebar
{
position: fixed;
display: block;
z-index: 12;
top: 220px;
left: -100px;
background-color: green;
width:120px;
height: 500px;
}
#LeftSidebarTab
{
position:absolute;
background-color: red;
width: 20px;
height: 500px;
left:100px;
top:0px;
}
#LeftSidebarContents
{
background-color: blue;
position:absolute;
left:0px;
top:0px;
}
I would recommend learning more about the CSS Box Model and probably just reading up on HTML/CSS in general.