I have the below code set up to move certain objects upon clicking an object, but you'll see in Safari and Chrome that the animation for the boxes is a bit off, whereas Firefox shows it correclty.
Is there a way to fix this bug?
http://coreytegeler.com/jg/
$(function(){
$("#nav li").click(function() {
$("#nav").css({
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'margin-top' : '-175px',
'margin-left' : '0px',
'left' : '10px',
'top' : '50%',
'height' : '370px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'top' : '100px'
} , 500, 'swing');
});
$("#nav li#a").click(function() {
$(".set#a").animate({
'opacity' : '1' ,
'top' : '50%',
'margin-top' : '-200px'
}, 500, 'swing');
});
});
What you are experiencing is the way that webkit handles conversion of an inline element into a fixed element. No matter what, it is going to default the left to 0 when you change the element to fixed, even if you explicitely tell it otherwise. You can ready more about how to work around it here: Center a position:fixed element
Basically you need to set the left position of the element to 50%, then calculate the a negative margin of 1/2 the width of the element.
Good luck and perhaps look at rewriting your code. You should check out JQuery chaining as some of your code is redundant. Also, since you are only targeting one element, you can drop the .each() as they are not needed. You would only use .each when you want to loop through a selector that could have returned more than one element. In your case, your selectors only target the one element. I've rewritten your code a bit to be more readable, less redundant:
$(function(){
$("#nav ul li").click(function() {
$("#nav ul").css({
'position' : 'fixed',
'left' : $(this).position().left + 'px',
'top' : $(this).position().top + 'px'
})
.animate({
'left' : '10px',
'top' : '50%',
'margin-top' : '-140px',
'height' : '280px',
'width' : '70px'
}, 500, 'swing');
$("#name").css({
'top': $(this).position().top + 'px'
})
.animate({
'position' : 'fixed',
'top' : '100px'
} , 500, 'swing');
});
$("#nav ul li#a").click(function() {
$(".set#a").animate({
'opacity' : '1' ,
'top' : '50%'}, 500, 'swing');
});
});
Related
So my question is how would i make my header which already sticks to top on scroll only work on certain device width?
function fixDiv() {
var $div = $("#header-full-top");
if ($(window).scrollTop() > $div.data("top")) {
$('#header-full-top').css({
'position': 'fixed',
'top': '0',
'width': '100%'
});
} else {
$('#header-full-top').css({
'position': 'static',
'top': 'auto',
'width': '100%'
});
}
}
$("#header-full-top").data("top", $("#header-full-top").offset().top); // set original position on load
$(window).scroll(fixDiv);
Fiddle
function fixDiv() {
var getWindowWidth = $(window).width();
//approximate above medium screen widths includes large and medium screens.
//exactly not sure, from where the medium screen sizes starts from, just you need to change 767 in order to checkout your result
if(getWindowWidth>767) {
$('#header-full-top').css({
'position': 'fixed',
'top': '0',
'width': '100%'
});
}
else {
$('#header-full-top').css({
'position': 'static',
'top': 'auto',
'width': '100%'
});
}
}
fixDiv();
$(window).resize(fixDiv);
check the above code, $(window).width() returns the window width on which your web page or document is being called. accordingly you can utilize the width value to conditionally apply css using jquery or other statements according to window width.
https://jsfiddle.net/L5xxjbn2/2/
I am new to jQuery widget and trying to learn it, I create a widget for displaying a dialog, the widget's _create() method does the following:
Adds a mask dialog for hiding the user screen.
Adds a close "button" which is a div with a handler for click event
Displaying the dialog to the user
When I click the close div I can remove the widget instance with the following command -
$(this).parent().remove();
I do not find a way to hide the screen masking div I create in the _create method.
Code for the create and close methods follows -
_create: function () {
var handle = this;
if (this.options.Height == 0) this.options.Height = this.element.height();
if (this.options.Width == 0) this.options.Width = this.element.width();
$(document.body).css({ margin: 0, padding: 0 });
this.wrapper = $("<div class='wrapperClass'>").css({
'height': this.options.Height,
'width': this.options.Width,
'position': 'absolute',
'left': '50%',
'margin-left': -1 * this.options.Width / 2,
'top': '50%',
'margin-top': -1 * this.options.Height / 2,
'border': '3px solid red',
'border-radius': this.options.Radius,
'z-index': this.options.Zindex
});
//create the screen masking background
this.maskScreen = $('<div />').css({ 'height': '100%', 'width': '100%', 'position': 'absolute', 'top': 0, 'left': 0, 'background-color': this.options.bgColor, 'z-index': this.options.Zindex - 1, 'display': 'block', 'opacity': this.options.bgOpacity, 'margin': 0, 'padding': 0 });
$('body').append(this.maskScreen);
this.element.css('display', 'block');
this.wrapper.html(this.element);
$('body').append(this.wrapper);
if (this.options.addClose) this._addClose();
},
_addClose: function () {
this.closeButton = $('<div />')
//add close class
.addClass("closeClass").css("z-index", this.options.Zindex + 1);
this.closeButton.on("click", function () {
$(this).parent().remove();
});
this.wrapper.append(this.closeButton);
},
How can I reference the screen masking div I created in the _create() method?
You should make use of the jqueryUI widget _destroy method to do the cleanup for you, that way you can refer all the variables and elements that you have added in the _create method and remove them all in the right order to restore the environment as it was.
In this case your closeButton should simply call the _destroy method of your widget instance and not doing any removal itself.
If you can post a working jsFiddle, I will show you the actual code.
This code is suppose to center the element, it works perfectly on resize but not when DOM is first ready. I have to resize the window to get desired results. I can't figure out what was causing this...It is the same function.
$(document).ready(center);
$(window).on('resize', center);
function center(){
$('#vid').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : -$('#vid').width()/2,
'margin-top' : -$('#vid').height()/2
});
}
I created the notification bar with the text effect everything seems ok but when i add the text effect like moving from left to right in that it seems work when in first time and after that it looks like this way see the FIDDLE
jQuery('.text').animate({
'right': '300px'
}, 'slow', 'linear').animate({
'left': '300px'
}, 'slow', 'linear').animate({
'left': '0',
'right': '0',
});
For the second time when i click expand it appears from center to right when i refreshing the page itself it appear properly for the first time.
Is there is a way to show the message as from left to right to center whenever i open the bar.
Thanks in Advance.
jQuery('.text').animate({
'right': '300px',
}, 'slow', 'linear').animate({
'left': '300px'
}, 'slow', 'linear').animate({
'left': '0',
'right': '0',
});
jQuery('.text').css('right', 'auto')
jQuery('.text').css('left', 'auto')
});
working demo : http://jsfiddle.net/UCTgR/12/ (Note: this demo has partial functionality yo just show what u missed, to check click on the banner)
Hello i have this code:
function goto(id, t){
//animate to the div id.
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 500);
// remove "active" class from all links inside #nav
$('#nav a').removeClass('active');
// add active class to the current link
$(t).addClass('active');
}
this code active the horizontal-scroll of the slideshow, and inside the single page of slideshow are presents more div (div1 , div2 , div3) and at each of div is attached this code:
$("#div1").hover(function() {
var $this = $(this);
$this.css({'z-index' : '10', 'boxShadow' : '1px 3px 6px #444', 'position': 'fixed' }).animate({
'height': "390",
'width' : "840",
'marginTop' : "-12",
'marginLeft' : "-12",
});
},
function() {
var $this = $(this);
$this.css({'z-index' : '1', 'boxShadow' : '0px 0px 0px ', 'position': 'static' }).animate({
'height': "350",
'width' : "800",
'marginTop' : "0",
'marginLeft' : "0"
});
});
this is the code in HTML:
<a href="#" onClick="goto('#about', this); return false; " >
<div id="div2" style="background-color:#fff; width:250px;border:1px solid #000;min-height:250px; color:black;">
ABOUT
</div></a>
the problem is that when I click on a div that is present in the page One of slideshow, for example div1, and I need it to move horizontally on the second page,having the mouse inside the div latter moves with the scroll and don't stay in the page One, how can I avoid this?
I wish that when I click the system goes to the second page of the slideshow, but not with him also drag the div I clicked to move to the second page.
Changed the following code, inside the goto(). Here I am check if #div2 is in the hovered state.
If yes, then I take it back to it's original state AND ONLY THEN I move to the next page.
if (parseInt($("#div2").css("z-index"), 10) > 1) {
$("#div2").css({
'z-index': '1',
'boxShadow': '0px 0px 0px ',
'position': 'static'
}).animate({
'height': "250",
'width': "250",
'marginTop': "0",
'marginLeft': "0"
}, function(){
$(".contentbox-wrapper").animate({
"left": -($(id).position().left)
}, 600);
});
}
else {
$(".contentbox-wrapper").animate({
"left": -($(id).position().left)
}, 600);
}
Check it here
UPDATE:
Just add an else condition, check the update code above.
Link