I have a problem, when i reload my page, page starting at left, but I need this at center. How should i do this?
Next, when it will be in center, it should scroll to left until it 20px and so at right. Top and bottom doesnt matter.
2.JPG resolution is 2743 width, 768 height.
here is my code:
css:
* {
margin-left:-90px;
margin-top:-10px;
padding:-60px;
}
body {
background:white;
}
.bg {
background:url("2.JPG");
background-repeat:no-repeat;
height:768px;
width:2743px;
display:block;
}
connected^jquery 1-7 min js
javascript
$(document).ready(function(){
$(this).bind('mousemove',function(e){
$("#bg").css({ "margin-top":e.pageY/100, "margin-left":e.pageX/6 });
});
setTimeout(function() {
$('#top').cycle({
delay: -1500
});
$('.pics img').css({
opacity: 0.5
});
}, 0);
setTimeout(function(){
$('#bottom').cycle({
delay: -3000
});
$('.pics img').css({
opacity: 0.5
});
}, 0);
});
this is my html:
<div class="bg" id="bg"> </div>
Thank you very much and sorry for my English and my design knowledge :)
You can easily do it by onmousemove event of javascript
or you can try this for your problem i hope it will work
http://css-tricks.com/auto-moving-parallax-background/
Related
I'm trying to dim the background while slide-opening the left menu to right.
Here is the link and jsfiddle.
At first run, when the dimmer code is commented out, it hides sliding to left and after the 2nd click its working okay. When the dimmer code is included, it doesn't remove the class='dimmer' and I can't click again.
Here is the jQuery:
jQuery(document).ready( function(){
jQuery(".x-btn-navbar").click(function(){
//if (jQuery('#dimmer').hasClass('dimmer')){
//jQuery('#dimmer').removeClass('dimmer');
//} else {
//jQuery('#dimmer').addClass('dimmer');
//}
jQuery('.nav-animate').fadeIn(500);
jQuery('.nav-animate nav').toggle('slide', {direction:'left'}, 500);
});
});
Any help is appreciated, thanks for your time.
Done, I guess...
Changes in HTML
<div class="x-navbar-wrap" style="z-index:999;">
<div class="x-navbar x-navbar-fixed-left">
<div class="x-navbar-inner">
<div class="x-container max width">
<a data-target=".x-nav-wrap.mobile" class="x-btn-navbar" href="#">
<span style="margin:-17px;font-size:20px;">MENU</span>
</a>
<!------- You didn't had these closing tags ---->
</div>
</div>
</div>
CSS changes
#dimmer {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
JavaScript
jQuery(document).ready( function(){
jQuery('.nav-animate nav').hide('slide', {direction:'left'}, 500);
jQuery(".x-btn-navbar").click(function(){
jQuery('#dimmer').fadeIn(250, function(){
jQuery('#dimmer').fadeOut(250);
})
jQuery('.nav-animate').fadeIn(500);
jQuery('.nav-animate nav').toggle('slide', {direction:'left'}, 500);
});
});
Working Fiddle
Maybe this will help you:
jQuery('.nav-animate nav').css({
opacity: 0,
left: -$('.nav-animate nav').outerWidth()
});
jQuery(".x-btn-navbar").click(function () {
if (jQuery('#dimmer').hasClass('dimmer')) {
jQuery('#dimmer').removeClass('dimmer');
jQuery('.nav-animate nav').animate({
opacity: 0,
left: -$('.nav-animate nav').outerWidth()
}, 500);
} else {
jQuery('#dimmer').addClass('dimmer');
jQuery('.nav-animate nav').animate({
opacity: 1,
left: $('.x-btn-navbar').outerWidth()
}, 500);
}
});
JSFiddle Demo: http://jsfiddle.net/kq5vo508/2/
i hope i got your question right, but from the link you attached it seems that you have a problem with the first click on the menu button and that later on confuse the dimmer status.
in your HTML you have the nav section
<section class="nav-animate">
<nav style="height:auto;" class="x-nav-wrap mobile cbp-spmenu cbp-spmenu-vertical cbp-spmenu-push">
And your css sets .nav-animate to not be displayed, try removing that setting and instead set the inner nav tag to display:none;
I'm trying to make two buttons that slide when clicked and push the other button out of the viewport. For example:
Before clicked - [ blue | grey ]
Click blue - [ all blue ]
Get it? I have the html and css set up perfectly (I think), but I just can't get this jQuery code to animate and change the positioning of the element that contains the two buttons. It's driving me nuts. What I have so far is:
<div id='container'>
<div id='wrapper'>
<a id='wrapper_photo' href=""></a>
<a id='wrapper_video' href=""></a>
</div>
</div>
<style>
#container{
width:760px;
height:25px;
background:#000000;
overflow:hidden;
}
#wrapper {
width:1520px;
height:25px;
background-color:#0F0;
position:relative;
left:-380px;
}
#wrapper_photo{
width:760px;
height:25px;
background-color:#666666;
float:left;
}
#wrapper_video {
width:760px;
height:25px;
background-color:#0000CC;
float:left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper_photo').click(function() {
$('#wrapper').animate({
left:"-=380"},
5000);
});
});
</script>
I stopped when I couldn't get the left side to work.
here you go: DEMO
$(function(){
$('#wrapper_photo, #wrapper_video').click(function() {
$(this).animate({
width:"100%"},
5000);
$(this).siblings('a').animate({
width:'0px'
},5000);
});
});
I'm not sure if this new value for left will be set, so you can use position() function to get value of left of #wrapper container and then calculate new value.
$(document).ready(function() {
$('#wrapper_photo').click(function() {
var leftVal = $('#wrapper').position().left - 380;
$('#wrapper').animate({
left:leftVal},
5000);
});
});
I have been using the ScrollTop JQuery so that when buttons are clicked in the right hand column, they scroll to the specific id in the left. It goes to the specific id when I first load the page, but after that it doesn't go to the other three, but glitches out going up or down slightly when buttons are clicked. I found that when I scroll to the top of the page and click the link it goes to the correct place, so it seems it it trying to find the top position of the left column and trying to go from there. No ideas as to how to fix this so would appreciate any thoughts.
CSS:
html,
body {
height: 100%;
margin: 0px auto;
}
#main,
#col_l,
#col_r
{
height: 100%;
}
div[id*="col"]{
float: left;
width: 50%;
overflow: auto;
}
#col_r{
overflow:hidden;
position:relative;
}
JS:
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo-1.4.3.1-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#stsp").click(function() {
$('#col_l').animate({
scrollTop: $("#lgg").offset().top}, 2000);
});
$("#fg").click(function() {
$('#col_l').animate({
scrollTop: $("#funny").offset().top}, 2000);
});
$("#covers").click(function() {
$('#col_l').animate({
scrollTop: $("#coverso").offset().top}, 2000);
});
$("#demo").click(function() {
$('#col_l').animate({
scrollTop: $("#mp3").offset().top}, 2000);
});
});
HTML:
<div id="col_r">
<div id="hb"><button id="demo">One × Fifteen (64mb) </button></div>
<div id="lg"><button id="stsp">Same Time Same Place</button></div>
<div id="fg"><button id="funny">Funny Games Funny Games</button></div>
<div id="c"><button id="covers">Covers Over Covers</button></div>
</div>
This was fixed this using the ScrollTo Jquery:http://flesler.com/jquery/scrollTo/
I'm not sure why I was having problems with the ScrollTop Jquery.
html:
<div id="container">
<div id="header">
<div id="animate">
cartagena
</div>
</div>
what I want to do is to move the "animated" div to the center using Jquery.
my current js:
$(document).ready(function() {
$("#animate").animate({left: "+=512"}, 2000);
});
and now I'd like to make it to the center instead of just 512 px to the right.
I am assuming that the position of #animate is absolute. To center the element in its parent element just add the half of its parent's width minus the half of its own width to left:
$("#animate").animate({
left: $("#animate").parent().width() / 2 - $("#animate").width() / 2
}, 2000);
I created a demo using jsFiddle.
You can use it this way to center it to the screen,
Jquery
$(document).ready(function() {
$("#animate").animate({left: $(window).width() / 2}, 2000);
});
css
<style type="text/css">
div
{
height: 50px; width: 50px; background-color: Red;position:absolute; top:0; left:0;
}
</style>
html
<div id="container">
<div id="header">
<div id="animate">
cartagena
</div>
</div>
</div>
Asuming you want to center to window, use this code:
$("#myJQUIDialog").parent().position({
my: "center",
at: "center",
of: window,
using: function (pos, ext) {
$(this).animate({ top: pos.top }, 600);
}
});
This center the dialog, and animate at the same time, resulting in a smooth centering
Here it is other example, maybe it should be useful.
I am using 'scroll' to make the effects.
Hope it could help or be useful :)...
<http://jsfiddle.net/p609dm7y/2/>
I want is to move my pagination to the left and to the right after clicked on #prev_pag and #next_pag. how is it and solve my problem?
Eg: http://jsfiddle.net/szVKD/5/
$('#next_pag').click(function() {
$('#pagination').animate({
left: '-=100px'
},
500);
});
$('#prev_pag').click(function() {
$('#pagination').animate({
left: '+=100px'
},
500);
});
});
Needed to delete the last line for javascript to compile and added "position: relative;" to #pagination div.
http://jsfiddle.net/szVKD/9/
This is a CSS issue. You need to set #pagination to position:relative; in order to animate the left css property.