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.
View 11 Replies
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
_picGalImage.resizeTo(w,h)
_picGalImage.swapImage(_tempImg.src)
_picGalImage.show()
}
This is the function I am working on, but it really doesn't matter how I do
it.
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?
View 2 Replies View RelatedOn this page I'm given the impression that stopPropagation is a lot
like returning false:
http://www.brainjar.com/dhtml/events/default3.asp
"preventDefault() Can be used to cancel the event, if it is
cancelable. This prevents the browser from performing any default
action for the event, such as loading a URL when a hypertext link is
clicked. Note that the event will continue propagating along the normal
event flow.preventDefault() Can be used to cancel the event, if it
is cancelable. This prevents the browser from performing any default
action for the event, such as loading a URL when a hypertext link is
clicked. Note that the event will continue propagating along the normal
event flow."
But often, if I want to stop a hyperlink from working normally, I can
simply return false from whatever action I've attached to that
hyperlink. Suppose I have this link:
<a id="link1" href="index.htm">link text</a>
Suppose I attach the function "alertDanger" to this link:
function alertDanger() {
alert("Danger!");
return false;
}
Because I return false, the default behavior doesn't occur. Would there
ever be a benefit to doing this instead:
function alertDanger() {
alert("Danger!");
preventDefault();
}
Perhaps preventDefault is only for those occassions when the code can
not or should not return?
As it is shown in line 2 does everything perfectly, but I must declare the variable outside the function, as it implies the following code (line 1).
marcel
var
wert = "text";
$('#bChange'
).click(function() {
$.ajax({
url:"content/nextpage.php",
type:"POST",
timeout: 5000,
dataType:'html',
cache:false,
data: { rNeuRecht: wert },
success:function
(msg){
$("#leer").html(msg);
}});});
$('#bChange'
).click(function () {
$.ajax({
url:"content/nextpage.php",
type:"POST",
timeout: 5000,
dataType:'html',
cache:false,
data: { rNeuRecht: "text" },
success:function
(msg){
$("#leer"
).html(msg);
}});});
I have a VERY simple script to reload a page with fresh values when the value of a scroll menu changes. Trouble is, of course, NN 4.- freaks and closes the browser when this runs. No error warning, no error log?
The line..
<select name="Country" size="1" onChange="repopmenu(this,17)">
The script..
<script language="JavaScript">
<!--
function repopmenu(which,key)
{
n = which.value;
var url = ("eventedit.asp?country=" + n + "&key=" + key)
location.href = url;
}
//-->
</script>
What options do I need to specify for the Validation plugin to simply add the error class to a specified element such as a "required" em that shows all the time. And so on to remove the class when valid.
Say we have a text input that I want to have a red border when not valid and the red border to disappear once valid. So I do not want to generate an error label.
I am trying to implement my script into Wordpress but for some reasons it just doesn't simply work. And whenever I try to test it online, it doesn't work either.Only when I'm offline does it work.[code]
View 3 Replies View RelatedI have a very strange issue which happens only on the Mac/Firefox 2 (and 3 I believe) : [URL] The top left logo (ball) is a simple flash 'spin' animation, that is activated using javascript via the navigation (onmouseover effect). This works fine on Windows - Firefox, IE and Mac - Safari. However on Mac/Firefox, the logo ball on page load simply DOES NOT APPEAR. However, when you simply SCROLL down or if you move your mouse over the navigation (which calls the flash), then the logo appears. Basically, it's really odd because the logo ball is there, but Mac/Firefox does not show it until you do something to the page, like scroll.
View 1 Replies View RelatedOriginally 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:
window.onscroll = verticalFix();
function verticalFix() {
var sidebar = document.getElementById("title");
[code]....
So I know I've seen this, and I'm sure there's a tutorial somewhere, but I can't find it for the life of me. I'm looking to code one of those boxes that stays with you where ever you move on a page. Basically, I need a javascript that says "when the user scrolls, figure out the current scroll position, then change the top position of an absolutely positioned div accordingly, so that it moves along with the user vertically and is always visible in their screen".
View 7 Replies View RelatedI'm using a neat vertical text scroller the code for which I found here:
[URL]
It scrolls my text continuously. how to modify it to scroll my text just once?
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]...
I want to achieve a similar effect using jquery and in div's not tables,[URL]
View 2 Replies View RelatedI need to write text in the HTML page but I need it to appear vertically rotated not horizentally.
View 2 Replies View RelatedI'm trying to make my sidebar show 3 images then scroll to the next 3 automatically every 3 seconds or so. (vertically)
how to do it or show a snippet of code?
I've looked up various scripts for scrolling the pictures I have on the right vertically, but I can't seem to implement any of the ones I've found. I'm not trying to ask for you to code it all for me (unless you really want to)
Here's the site: [URL]
I was recommended to vertically align these list items using javascript. I am needing to vertically align the "identity" and "web presence" list items with each other: [URL]
View 9 Replies View RelatedI have a html list displayed in a div and I want to make the list cycle through items, i.e the first item in the list becomes the last item while the second one becomes the first, and this should continuously happen.
I wrote a small bit of jQuery to accomplish this, but the problem with this code is that is causes the block to continuously resize vertically. Does anyone know of a correction I could make to the code below to remove this glitch. Here is what I have written.
Code JavaScript:
$(document).ready(function() {
/**
* Removes the first element of the news-ticker elements and then calls
* addLast() to add it to the end of the list.
[Code].....
I'm trying to make my sidebar show 3 images then scroll to the next 3 automatically every 3 seconds or so. (vertically)Can anyone help me out with a reference I could look at how to do it or show a snippet of code?I've looked up various scripts for scrolling the pictures I have on the right vertically, but I can't seem to implement any of the ones I've found.
View 1 Replies View RelatedI'm trying to write a function to center a div within a parent div, and I'm having a little trouble. Horizontally, it works fine. Vertically, not so much.
This is my function:
function centerObject(idName, idParent) {
var parentLeft = $(idParent).position().left;
var parentWidth = $(idParent).width();
var parentWCenter = parentWidth / 2;
var parentTop = $(idParent).position().top;
var parentHeight = $(idParent).height();
var parentHCenter = parentHeight / 2;
var objWidth = $(idName).width();
var objWCenter = parentLeft + parentWCenter - (objWidth / 2);
var objHeight = $(idName).height();
var objHCenter = Math.abs(parentTop + parentHCenter - (objHeight / 2) - 20);
$(idName).css({left:objWCenter,top:objHCenter});
};
The line with the Math.abs call is necessary because without it, the given div ends up halfway off the page up at the top. At least this way it appears somewhere within the browser. The divs in question are all set to position: absolute, but I've tried setting them to all the other possibilities without luck. Or maybe I missed something. This happens in any browser... IE, FF, Chrome, Safari, etc.
On my website I have a Table with 2 columns, each column has a DIV in it. How can I make it so that each of the DIVs take up the entire space in the Table TD? I can post an example or link to the site itself...if that's allowed.
View 6 Replies View Relatedi'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].....
I'm using the fgMenu plugin [URL] to style our select menus. Does anyone know how to force the menu to open beneath where the menu is clicked to be opened? If you click on the first menu here ...
[URL]
you will notice that the menu opens above the click, and the top part is cut off. I would prefer the menu opens below the click, and someone can scroll to see all options.
Is it possible to rotate text so that is displays vertically using jQuery?
View 2 Replies View Related
