I wish to display some text dynamically below a series of images. I need to get the position of each image, and so I require some way of getting the position of an image in relation to the div holding the images.
I managed to get the position of the image in relation to the entire page, but this was no good for my purposes.
I'm currently working on this page. The problem I have is when you hover over each image it fade's into color, I also want the text below to go from one color to another. Also, I want the image to fade in/out if you hover over the text below the image.
I used this tutorial and I'm using the two image technique which has the following jquery:
<!--
// wrap as a jQuery plugin and pass jQuery in to our anoymous function
(function ($) {
$.fn.cross = function (options) {
[Code].....
#navigation li is the parent element, which is positioned relative.The ul element above that is also position relative. I previously tested a click function and was able to confirm I was getting the correct position back, so now I just need to set the CSS property correctly for all of those links.The reason I want to do this is I have a set of links that appear over a photo of a city skyline. When you hover over those items, I want them to be given a background image that is a blurred and lightened version of the same photo so it needs to line up (sort of like the tabs are made of frosted glass).
View 1 Replies View RelatedHTML parsing error:unable to modify the parent container element before the child element is closed(kb927917) My page is not getting displayed In IE although running good in chromr and mozilla.... And after refreshing in IE it is displayed properly.
View 1 Replies View RelatedI am preloading some images, so prior to the downloading I have:
In Mozilla: initially WxH = 0x0 ... after img downloaded WxH = good# x good# the div just stretches just the right amount to fit snuggly around the newly loaded image;
But the other browsers do different things;
My current solution, which works, uses a new Image().width approach where I manually resize the container div;
How to get the other browsers to automatically resize the container divs;
The bit of code in bold in the code below is giving me this error in IE: Error: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB)Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
[Code]....
i am working with a simple jQuery tabbed container and am wondering how to make the main body of the container use a background image instead of a background color. Here is the code:
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].....
But that obvioously does not work. what do I need to do to put a background image in there?
P.S. this code works other than that so you can throw it in a notepad doc to see the page in action.
I am using Lightbox 2.04. I would like to change the size of the image container for the large image. No matter what size I actually make the image, when it appears it always fills the containing box and is too big. It is portrait orientation and sometime the image needs vertical scrolling to see it all.
How do I change the size of the image container so it fits nicely within the screen and where do I find the code to do this? I want the container to be the size of the image. Does this happen automatically based on the actual size of the image? If so, mine doesn't do that.
The *small, medium fullsize* text will be off to the left (in IE8 or IE9, works fine in Chrome, FireFox) and will not be aligned with the left edge of the image.
Code [URL] Line 154:
Code JavaScript:
ShowView.prototype.setImageSrc = function (imagesrc) {
var image = $('img#image');
[code]...
From what I can tell the `container.width(imageWidth);` is not rendered in IE8 or IE9. If the page is refreshed then it works. Using the built in developer tool shows the correct value in the html but if you use selector tool in the developer tool outline does not reflect the changed width value.I've tried using vanilla javascript. That did not work. I've tried setting the image source twice. That did not work either.
I have 3 menus. In the first menu I select an email adress. According to the email selected, in the second menu appears a problem list with an option called "Free Text"
I would like that, ONLY when a user choose email1 with the second option "Free Text", OR when a user choose email2 with the unique option of "Free Text", in the third menu appears the voice "Choose priority ..." with the other two options: urgent, normal ..
With this code, now the goal is ok only for email1, with email2 happens nothing ...
<head>
I'm trying to bend my mind to insert a <div class="image_container"/> before the text in an list element
<li>text1</li>
<li>text2</li>
<li>text3</li>
should become:
<li><div class="image_container"></div>text1</li>
<li><div class="image_container"></div>text2</li>
<li><div class="image_container"></div>text3</li>
$('li', this).before('<div class="image_container"></div>')
makes<div class="image_container"></div><li>text1</li>
I tried other things, but I think I'm overlooking an obvious command.
I've seen several posts around this issue but nothing that seems like a definitive resolution.Cycle defaults to positioning the slides at top:0 and left:0 within the container div. I want them to be bottom:0 and left:0 within the container div.
[Code]...
I was editing some javascript code yesterday that happened to use jquery. Part of the code selected two elements via jquery. Then the original author used nodeIndex to determine the position of each of these nodes in their parents. I could not find any documentation on nodeIndex on the jQuery site or anywhere else on the internet. It seemed to work in IE8, but I did not see the property from FireBug in FireFox 3.5. So I removed the call to nodeIndex and used a for loop to calculate my own equivalent of the nodeIndex. Is nodeIndex officially supported or meant for internal use? Is it documented anywhere? [URL]
View 1 Replies View RelatedI'm looking to build a user form where the user can drag and drop markers onto an image and then retrieve/send the resulting new image with markers back to the server
for processing.
what UI functions / Framework will be in the right direction to achieve this?
Anyone familiar with some existing similar functionality?
I'm trying to use javascript to load an image on a webpage when another image is clicked on, just like an image gallery and just like this except I don't need any text: [URL] I copied the example above but when I click on the smaller image to load the larger one it works for a fraction of a second (I can see the image load in the right spot), but then the browser goes to the URL of the image instead (showing it on a blank page).
[Code]....
i,m trying to make a map who show me as position A and a target adress as point B.I have made it so i can choose adress a and adress b from a dropdown but i want to automaticly load my position as possition A then choose position B from a dropdownlist. How can i do this ?
[Code]....
I used the onchange event in select:
Code:
<select name="menu"
onchange="window.location.href='?codice='+this.options[this.selectedIndex].value;">
[code]....
i have a problem with position of image
i use this code in a "alert" function :
document.getElementById("lienx").offsetLeft + " , " + document.getElementById("lienx").offsetTop
with :
document.write("<style>.lienmenu { font-family: arial; font-size:1px; position: absolute; width:200px;visibility:hidden; z-index:2; background-color:red;}</style>");
i have 2 differents results with IE and mozilla Mozilla says 149,16 , IE says 162 ,0 any idea to help me?
I have this
var x = window.event.clientX;
var y = window.event.clientY;
i get the x and y coordinates on button click
i do this x = x+10;
y = y +10;
how can I now on this position X AND Y, pop up an imageon that position??
Do you know how to calculate position of image to move it to vertical center of screen? I mean especially the general problem of scrolling. The image doesn't change its absolute position, but when user scrolls or views a page with images, so he sees how the image gets more and more close to the top edge of screen, till the distance is 0. And now imagine the image is positioned absolute, 1000 from top. And on the screen it is at the position 0. How can I calculate its position from the top of screen?
View 3 Replies View Relatedbased on this script I wanted to know if it's possible for a div to change an image within it based on a certain x/y coordinate.For example if the div with the dog image here is moved to a certain point to the right, it would change to cat.jpg.
View 3 Replies View RelatedI need some help on how to reposition a layer depending on the position of an image? I know this should be somewhere in the forum, but I searched without success.
I mean like this:
<body onload="movemylayer()">
<img src="1.gif" id="myimage">
<div id="mylayer"></div>
</body>
...And when the page is loaded the layer moves infront of the image.
I'd like to insert an image with fixed position in all https pages. Is it possible? How?
View 3 Replies View RelatedWhat I am trying to do is randomize the position of a div that slides in from the left when you hover over an image.
Here is the script I am working with courtesy of Build Internet
Here is the css that goes with it
I would like to randomize the value of the top position in the css and the value of right:'30%' with values in a preset range.
I would like to be able to tween an image dynamically from it's current position on a mouse over event. A good example of what I want can be found here. (the nav cloud) I haven't been able to find anything on jquery or anywhere else, so here's what I've come up with so far:
[Code]...
I've been looking for an "Ajax CMS" but decided to learn jQuery to learn how to code it myself in order to earn some geek-girl cred among my male colleagues. I've learn a lot about jQuery in a week but as you can imagine I still have a lot to learn.
I have successfully animated an image (move to the left and increase opacity) when the mouse hovers a div and reset the image (move it back to its original position and reset the opacity) when the mouse move outside the div. So far so good...
Here comes the question: What I need to do -and don't know how to - is when the user clicks on the div the image should stay in the hover position while still being able to hover any other divs and activate the animation normally.
When a different div is clicked the previous "Clicked" div should return (animate) to its original position and the new "Clicked" div should stay in the hover position. Content will be loaded when the divs are clicked but there won't be page refresh since I'm loading the content by using the load funtion of jQuery.
I'm including the code: