JQuery :: Animating A Horizontally And Vertically Centered DIV

Feb 9, 2010

i've been wrestling with this issue for the last hour. I can't seem to get thiscentreddiv to animate properly.What it currently does:A small div, (10x2px) expands to full 100% width and 100% height. However, it expands in the bottom right hand corner of the screen.

What I am trying to get it to do: To expand equally in all four directions.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

[Code].....

View 2 Replies


ADVERTISEMENT

JQuery :: Make Animation Happen Only Vertically Instead Of Vertically AND Horizontally?

Jan 18, 2010

I'm using the following piece of code to create a link that, when clicked, uses jquery animation to slowly display a paragraph of text. The trouble is that the animation goes both vertically and horizontally, making it look a little too busy/cluttery. How can I tweak my code to make it only animate vertically?

View 2 Replies View Related

JQuery :: Center ClueTip Image Content Vertically And Horizontally

Jul 6, 2009

I'm trying to get some thumbnail images that are displayed with ClueTip to be centered vertically & horizontally. The images are various sizes, though none is larger than 150px on a side, so I set ClueTip to have a width & height of 200px. The images are wrapped in a div so that I can have them display: none by default, yet assign display: block to the images themselves.
div.DownloadStatsThumb { display: none; vertical-align: middle; }
img.DownloadStatsThumb { display: block; margin: auto; }
The markup looks like so:
<a href="#" rel="#thumb_456" title="">foo</a>
<div class="DownloadStatsThumb" id="thumb_456">
<img src="/path/to/some/image.jpg"
width="150" height="101" alt="thumbnail image"
class="DownloadStatsThumb" />
</div>

The images are always aligned left & top. Eventually, I figured out that it was div#cluetip-inner that was the culprit. While the outer div has a height and width, the inner div has display:inline-block and so was shrinking down to the img size, essentially. I then added:
onActivate: function(e){
$('#cluetip-inner')
.css('display', 'block')
.css('width', '186px')
.css('height', '186px')
.css('vertical-align', 'middle')
.css('background-color', '#000');
return true;
}
The 186px is to avoid getting scrollbars and the BG color is to assure myself that it's resizing ok. However, the images remain centered horizontally only. Is there something else I've missed?

View 1 Replies View Related

Fix Div Horizontally, But Not Vertically?

Jun 29, 2011

Originally posted this in the CSS/HTML forum but I was recommended to posting it in here as it seems the solution I'm after would be JS based.Here's the build site so far, a little messy but you should be able to see what I'm after.[URL]...When you click the SHOWS link, I have a scrollto that scrolls horizontally to another (unfinished) div. What I want is for the logo box & navigation box to scroll along with the page, fixed horizontally. But when the user scrolls vertically through content, such as the stuff on the home div, I don't want the logo & nav to scroll.

I found this [URL]... via googling, but I can't make much sense of it as I'm very much a JS noob. I've tried to change element id to that of mine but it didn't do anything.

View 5 Replies View Related

Fix Element Vertically But Not Horizontally?

Aug 10, 2011

I'm working on a blog design. (See code below.) I'd like to fix #title vertically so that when people scroll down the blog, it stays in view in the window. I couldn't think of a CSS way to do it. Using position:fixed doesn't work because if someone is viewing the site from a netbook, or simply from a downsized browser on their normal computer, #title is either cut off -- if it's positioned relative to the left -- or it overlaps the blog content -- if it's positioned relative to the right.

I've read suggestions to use Javascript but my Javascript skills are practically non-existent. The suggestions were to use an onscroll handler, and to use scrollTop. This is what I wrote but (probably for obvious reasons) it isn't working:

Code:
window.onscroll = verticalFix();
function verticalFix() {
var sidebar = document.getElementById("title");
sidebar.style.top = .scrollTop(30);

[Code]...

View 5 Replies View Related

Results Posted Vertically And Not Horizontally With Commas In Between?

May 23, 2011

so just a simple questions maybe someone can help me out. I know nothing about java first of all but i do know in this code how to get rid of the comma - the only thing i need to change is to make it paste email results vertically instead of horizontally because it helps me collect emails from some older emails i have

here is the code and the link for the code:

[Code]...

View 3 Replies View Related

When Inspected It Using Firebug Have Noticed That Other Images Are Coming Below Vertically Not Horizontally?

Jun 27, 2011

We have jcarousel on our forum site which rotates automatically. It is vbulletine forum. In fact originally it was working fine with old design and rotating images automatically in horizontal direction with a set of 5 images visible at a time and total 12 images in set.But we have upgraded our forum design in last week and I started getting issues with Jcarousel scroller.[URL] At new design when we implemented jcarousel scroller it is showing only one image in a horizontal row at jscroller and it disappears immediately and after 3-4 min it do reappear again. When I inspected it using firebug I have noticed that other images are coming below vertically not horizontally, really strange. Also I noticed another thing is that it is not updating width at element.style in firebug for UL tag. It is showing fix width 220 px all time. I think due to that all images appearing vertically one after one rather than horizontally.

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 0px;

[code].....

View 2 Replies View Related

MooTools Scroller - Ticker Scrolls Horizontally At Times - Vertically At Times

Feb 11, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Is it just extraneous code possibly? It seems to be ok (from right to left) in Firefox 3 but using IE and Opera, it scrolls from btm to top and I cannot figure out why.

View 1 Replies View Related

JQuery :: Animating Background Colors Does Not Stop Animating?

Aug 12, 2009

what I'm trying to do is, when a user hover overs an element, in this case, a li within a div, I want the background color to animate to a different color besides the background color of the body (in this case, black).

It works, but the behavior is erratic. For instance, yes, the color will change when I hover over the element but it when I'm within the div ul li, and hover over for instance the paragraph, the background color of the element will animate 2-3 times.

Actually when I move around any element within that UL the animation will flicker, how would I go about stopping that?

Also sometimes, not all the times, on pageLoad, the animation will fire.

Here's the code.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[Code].....

View 1 Replies View Related

JQuery :: Cycle Plugin - How To Get Spans Centered Within DIV

Oct 2, 2010

I have a div wrapped around spans, and each span containing nothing but text (client testimonials)... I'm trying to get the spans to cycle through and it works wonders, except the Cycle plugin causes my spans not to be centered within the div.So I looked through the plugin source and noticed:
$slides.css({position: 'absolute', top:0, left:0}).hide()
I figured the absolute positioning was my problem and changed left:0 to left:50%and although it centers, the slide is broken and all my spansappear at once.

View 1 Replies View Related

JQuery :: Jdmenu Second Level Positioned Centered?

May 11, 2011

For one project i am suing jdMenu to power up the drop down menu system. I am interested for the second level of the menu to position the <ul> at 50% on the parent <li>, like on[URL]...

Using css this is not possible since the ul has the size in em and the parent li have the size in %. So have to use a different method...

View 1 Replies View Related

JQuery :: MSIE Not Showing Big Centered Image

Jun 20, 2011

I have a problem with internet explorer to show images. Please take a look at: [URL] and click into any image. Using FF, chrome and safari clicking an image show a big centered image with position fixed. Using internet explorer is a full wrong.

View 2 Replies View Related

JQuery :: How To Set Dialog Buttons Horizontally Placed

Mar 31, 2011

The buttons in my dialogs are vertical. Do you know how to set it so that it is horizontally placed.
[ok][cancel] into [cancel] [ok]
I know I can absolute position them. But is there another setting I can change?

View 2 Replies View Related

JQuery :: Horizontally Scroll A Table?

Jun 17, 2009

Is there a plugin somewhere that will allow a table to horizontally scroll within a set width? I could swear I saw this once but can't
find it now. Basically I'm looking for an Excel-like setup. I have a div that's 990px wide and need to constrain a table within that to
keep from going off and having the whole thing scroll horizontally. Bonus points for freezing one or more columns on the left.

View 4 Replies View Related

Jquery :: Simplest Way To Scroll Horizontally

Nov 29, 2009

I want to slide horizontally a bunch of images using JQuery or some plugin of JQuery. Attached is the particular example I want to accomplish.

View 4 Replies View Related

JQuery :: First Click Shows Popup At Bottom Of Page Instead Of Centered

Apr 20, 2011

I am using Fancybox plugin and works well but for an ajax call the first few calls the popup/modal appears at the bottom of the window but later corrects itself and then is centered.

Here is an example:

Example Link

Click on the 'Foliage', 'Base' or 'Trunk' boxes in the right side column.

Anyone seen this before and know a fix?

View 3 Replies View Related

JQuery :: Keeping Full Width Slideshow Centered On Window Resize

Aug 9, 2011

I have a site that I'm building at [URL] which use the jquery cycle plugin for a slideshow. I won't post the code here because it's all there with view source at the above address. It's a work in progress. The slideshow is full width (the images in it are actually 2000px wide but looks full width), and works fine apart from when the browser window is resized. This is most noticable when you start with a smaller browser window and then resize it to be bigger.

The slides stay the same width as when the page loaded - I need them to adapt to the new width. I need the slideshow to be centered at all widths, so I've put the images in as backgrounds to divs with center positioning on them. I've tried getting the window width on resize and then applying it to the slides using jQuery, but the original calculated size overrides it when the slide changes.

View 1 Replies View Related

JQuery :: Superfish - Display The Third Level (tier) Horizontally?

Sep 12, 2011

I`m using superfish menu. Could you please help me out with it? I need to display also the third level on horizontal, not vertical as it is now. I used the instruction on superfish page so the second level uses now sf-navbar and now it is displayed horizontally. how to display the third level (tier) horizontally?

View 1 Replies View Related

JQuery :: Animating BackgroundPosition In IE

Jan 4, 2011

I recently got very interested in jQuery and found my way into it but I'm now facing this problem where I can't animate the position of a background image in IE. I've tested it in Google Chrome, FireFox, Safari, Opera and Internet Explorer. It works in the first 4 browsers but not in IE and that is a pretty big problem since a lot of people are (still ) using IE, I think.

Here is the animation:

As I mentioned, it works in every major browser except for Internet Explorer.

View 1 Replies View Related

JQuery :: Animating Div And Fade In?

May 17, 2011

The code below works just great, ie when the page loads the div "box" fades in, then when you click on the div it slides nicely to the left. In addition to the above I want the div to move from left to right as it fades in. I've experimented with different code combinations but can't quite work it out.

$(document).ready(function() {
$('#box').fadeIn(2000);
$('#box').click(function() {

[Code].....

View 6 Replies View Related

JQuery :: Animating Div When The Mouse Is Over

May 3, 2009

I have a couple of images with width = 280px and I would like to display, when the page is loaded, only a piece of them (the left 240px) and all the image once the mouse goes over the image. This is the html (for 1 image)

<div class="badge" style="width: 240px; height:78px; overflow:
hidden;"><img src="badge_1.gif" /></div>
And here my script
$(document).ready(function(){

[Code].....

View 4 Replies View Related

JQuery :: Img Disappears When Animating In IE6?

Aug 23, 2010

I tried to create a simple pagination-style presentation and when I start the animation my img tags disappear.As far as I can tell it's not an overflow problem.

View 2 Replies View Related

JQuery :: Scroll Bar When Animating?

Jul 4, 2010

I'm having a problem with the scroll bar appearing as a div larger than the screen size appears. Because the scroll bar changes the window size all the content gets shifted slightly when the bar appears/disappears. Any advice on how to deal with this?

View 2 Replies View Related

JQuery :: Animating Append From Json?

Oct 16, 2010

Using json to gather some data. Here's abridged version:

var ids = new Array(1,2,3,4,5,6,7);
for(var i=0;i<ids.length;i++) {
var site = '/ajax/get_feed' + '/<?=isset($dashboard) ? $dashboard : ''?>/' + ids[i];
var divID = ids[i];
getJSON(site, divID);

[Code]...

I remove the ajax loader image, then append data.result, where result is an html string. I want to animate the new content... I've never done something like the following,

$('#twitter img.ajaxloader').fadeOut(); $('#twitter').addClass('lefttext').append(data.result).fadeIn('slow'); I know this doesn't work. Essentially what I'd love to see is for my $('div.row') (the html string returned is wrapped inside a div with a class='row') to animate much like an accordion does when it opens. Just not sure how to get there.

View 1 Replies View Related

JQuery :: Animating The Css3 Transforms?

Aug 8, 2010

is it possible to animate eg. -moz-transform: rotate(90deg) ?I tried something like:$('div').animate({ '-moz-transform': 'rotate(90deg)', '-webkit-transform': 'rotate(90deg)', '-o-transform': 'rotate(90deg)' }), but it didn't work.$('div').css( ... ) of course works.

View 2 Replies View Related

JQuery :: Animating Div Height On Rollover?

Oct 3, 2010

All I needs is for one div to have an animated height when another div is rolled over.Example:

<div class="button"></div>
<div class="animatedBox"></div>

So basically, I want the "animatedBox" div to have an animated expansion in height when the "button" div is rolled over. When the "button" div is rolled out, I would for the "animatedBox" div to go back to the original height. Let's go ahead and say the original height is 20px and when the "button" div is rolled over, the height changes to 50px.

View 14 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved