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?
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?
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>
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.
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);
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
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.
Can somoene give me an example of how to center a div, according to it's image size... I am using different images, and so I have to resize it in a functino according to the image's size. So I use a h and w vairable that give me the height and width of the current image, but I can't seem to come up with a simple freaking formula to center the image vertically and horozontally.
fnFullView = function () { var h var w var _tempImg = new Image() _tempImg. () { _tempImg.src = this.src h = this.height w = this.width } _tempImg.src = arPhotolog[currIndex].full
I'm using jquerytools overlay on a site and i cannot get the overlay (which pulls in content from a url) to center on the page. I simply cannot see why and my brain hurts. I've been trying different things for about a week now to no avail.The url of the site is (and the page in question) http://bruce.ourcollective.eu and the overlays are in the bottom right hand corner of the screen: Credits Contact and Copyright symbol.
I have a banner that has image navigation on the lower right. The navigation links are images which, when clicked, change the banner without reloading the page. The actual switching of the banner is working when each image is clicked.
However, my problem is this:
The page itself is long and must be vertically-scrolled to see the entire content. Because of the scrolling, the banner could appear anywhere vertically on the page. And whenever I click the banner navigation hrefs, the page "jumps" so that the banner is at the top. The page should really stay in the fixed position.
I'm not sure how to set it up so that no matter where the banner section is on the scrolled page, that the page stays in the same position when the navigation is clicked.
My href's in that navigation are set up as :
Do I need something in my script so that the page won't jump? Or am I missing something in the HTML?
<!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.
I am a noob when its comes to Javascript. I used two different coda like sliders for two of my sites, one of them expands vertically based on the content, the other does not. This is the site I created that will demonstrate the effect I am going for. It is a more robust coda script [URL] This is the site I am creating that DOES NOT expand vertically as I would like. I would like it to behave the same as the site above. (had to use a smaller script to function in wordpress CMS) [URL]
Im looking for something that would allow a user to click on a button / link that would then reveal hidden content by sliding the whole of the main site content / container down.
I found this which slides the page content to the left or right [URL]
But need something vertical, almost as if the whole site was a big vertical accordian.
Or like on twitter / facebook phone app when refreshing for new tweets etc.
I've been using the most recent version of cluetip 0.9.9.c and I have overridden error function in the cluetip, but I was wondering how I can hide the actual cluetip? I tried $(this).isActive = false but this didn't work.
error: function(xhr, textStatus) { /// HIDE THE TOOLTIP? }
Basically I got a check in the error function that checks whether to show the error or redirect to the login page in case I have forms authentication. So how can I hide the tooltip?
I've been having some problems getting cluetip to show an image. essentially i just want it to work like this: title="This is a description | <img src="image">" and then I need the whole thing to be linked as well.
I need to center (horizontally as well as vertically) a div on screen. It will be in front of everything else on the page and will include dynamic HTML content. (radio buttons, text input, etc.) Essentially it's an in-page popup. (Don't call me evil, this is for a game I'm making.) So far I can get FF to center it with this code:
function ShowBox(str,MsgBox){ MsgBox.innerHTML = str;
var style = gStyle(MsgBox,null); var h = parseFloat(style.height); var w = parseFloat(style.width);
Where gStyle is a cross-browser alias for getComputedStyle, str is the message I want displayed in the box, and MsgBox is the div that acts as the popup. Code:
I'm trying to flip an image horizontally on the client side. Is it possible to rotate or change the orientation of an image by using JavaScript or CSS2?
I have a page in which I need multiple JavaScipt popups. That part works fine, but the popup links, which are images, won't align horizontally. Instead, they line up vertically. I've tried putting them in tables but then the JavaScript doesn't work.
I am looking for a image gallery that will work where some photos are positioned horizontally and some are vertical. I hope it is possible. The photos are for an artist that I am working with. I hope someone will have an answer. It doesn't have to be fancy. Even a simple magnifyer would be fine. I guessed that javascript might be the most appropriate form.
I have a div column that has my projects that scroll vertically on each page. I want to have a functionality where I can have the user hover over the image on the left and a column beside that will appear some text that describes the project. That text would change when they hover over a different project. I don't know where to find this kind of thing.
This here is a script that I've used in a few different sites, namely art/graphic/image-related sites. It's designed to rotate through banner ads, images, text, or anything else. I've tried to make it as easy to use as possible, so let me know what you think. Efficiency and functionality improvement suggestions are always welcome. =)
Documentation is available (http://www.skyzyx.com/scripts/messagecenter.php), and you can download the script with a demo page at the bottom of this post.
One thing that I built-in is a user's ability to stop the content from rotating (assuming the web designer makes the function available on his/her website), which helps to conform to the Web Content Accessibility Guidelines about "no or uncontrollable screen flickering".
/************************************* MESSAGE CENTER 5.1 (c) 2002-03, Ryan Parman http://www.skyzyx.com Distributed according to SkyGPL 2.1, http://www.skyzyx.com/license/ *************************************/
/************************************* Updated September 2, 2003
v5.1 - Added Next() and Previous(). Also added "aliases" for many functions to help a coder's logical naming style. Changed Resume() into an alias for Start(). Streamlined and optimized code for efficiency.
v5.0 - Completely rewrote this script from the ground-up to be object- oriented in nature. Implemented Algorithm's OO Timeouts. Functions include addMessage(), start(), pause(), resume(), and clear(). *************************************/ function messageCenter(zSpanID, zDelayMS) { // INITIALIZATION var spanid=zSpanID; var delay=(zDelayMS) ? zDelayMS:4000; var messageArray=new Array(); var count=0; var tOut=new Timer(this); var tOutRef, tOutRev; var prevAcct=0; var nextAcct=0;
// ADD A MESSAGE // The parameter must be an HTML or text string. this.addMessage=function(zMessage) { messageArray[messageArray.length]=zMessage; }
// START MESSAGE CENTER // Usually this will be called on the onload of the BODY tag. this.start=function() { if (document.getElementById) { document.getElementById(spanid).innerHTML=messageArray[count]; count++; if (count > (messageArray.length-1)) count=0; } tOut.clearTimeout(tOutRev); tOutRef=tOut.setTimeout("start", delay); nextAcct=0; prevAcct=0; }
// PAUSE FUNCTION // This will pause the Message Center. Optionally, passing a String parameter will display that string while paused. this.pause=function(stopMessage) { this.stopMsg=(stopMessage) ? stopMessage:null; tOut.clearTimeout(tOutRef); if (this.stopMsg) document.getElementById(spanid).innerHTML=this.stopMsg; }
// CLEAR FUNCTION // This will stop the Message Center, and clear the element's contents. this.clear=function() { tOut.clearTimeout(tOutRef); document.getElementById(spanid).innerHTML='' count=0; nextAcct=0; prevAcct=0; }
// NEXT FUNCTION // This will skip to the next message, and pause the Message Center. this.next=function() { if (nextAcct == 0) { nextAcct=1; prevAcct=1 } else if (nextAcct != 0) count++; if (count > (messageArray.length-1)) count=0; if (count < 0) count=messageArray.length-1; tOut.clearTimeout(tOutRef); document.getElementById(spanid).innerHTML=messageArray[count]; }
// PREVIOUS FUNCTION // This will skip to the previous message, and pause the Message Center. this.previous=function() { if (prevAcct == 0) { prevAcct=1; count-=2; nextAcct=1; } else if (prevAcct != 0) count--; if (count > (messageArray.length-1)) count=0; if (count < 0) count=messageArray.length-1; tOut.clearTimeout(tOutRef); document.getElementById(spanid).innerHTML=messageArray[count]; }
/************************************* Utilizes Algorithm's Timer Class for Object-Oriented timeouts http://www.undefined.net *************************************/ function Timer() { this.obj = (arguments.length)?arguments[0]:window; return this; }
Timer.prototype.setInterval = function(func, msec) { var i = Timer.getNew(); var t = Timer.buildCall(this.obj, i, arguments); Timer.set[i].timer = window.setInterval(t,msec); return i; }
Timer.prototype.setTimeout = function(func, msec) { var i = Timer.getNew(); Timer.buildCall(this.obj, i, arguments); Timer.set[i].timer = window.setTimeout("Timer.callOnce("+i+");",msec); return i; }
For simplicity and debugging, I attempt to display an apple when the mouse passes over the center of an image.In IE, the mouseover hand shows as the mouse passes over the center of the image and the apple is displayed.In FF, the mouseover hand shows as the mouse passes over the center of the image but the apple does not display.(By the way, I'm certain the showhide function is fine,
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?
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.
