|
JavaScript - Fixed: Onclick Enlarged Images Are Not Centered
FIXED
Hi, I'm trying to this script: http://www.lukescoates.com/designs/plusimageviewer.js to display an enlarged image when a thumbnail is clicked - the page in question is: http://lukescoates.com/designs/portfolio.php. It seems to be working for the most part, however, when I first load the page, sometimes the "View Full Image" buttons don't align with the images, they bulk up together: http://screencast.com/t/r1cauKx6X When I reload the page, they align properly. The next problem is that when I first click on the "View Full Image", the popup is not centered on the page: http://screencast.com/t/4LYou1WfXXJ If I click it a second time, it centers perfectly. Any suggestions? The CSS also associated with this is: http://lukescoates.com/designs/plusimageviewer.css Really appreciate any help! Luke FIXED Similar TutorialsI have created a lightbox for user display on my site. The lightbox is triggered by an onclick link. Works great but I would like to make one switch to it. I would like the lightbox to appear position:fixed; top:10px; onclick. Then if the user scrolls I would like the lightbox to appear position:absolute; top:10px; You can see an example of this here on ESPN's website http://search.espn.go.com/first-take/videos/6. If you click any video it appears position fixed onclick but then position absolute on scroll. This is what I have so far. It shows it all position fixed onclick as I desire, but stays that way on scroll. PHP Code: <a href = "javascript:void(0)" onclick = "document.getElementById('light<?php echo $count;?>').style.display='block'; document.getElementById('light<?php echo $count;?>').style.position = 'fixed'; document.getElementById('light<?php echo $count;?>').style.top = '10px'; document.getElementById('fade<?php echo $count;?>').style.display='block'"> ... [link] ... </a> PHP Code: <div id="light<?php echo $count;?>" class="log-lightbox-content-wrapper"> ... [lightbox content] ... </div> PHP Code: <style> .log-lightbox-content-wrapper {display: none; position:absolute; top: -45px; left: 50%; margin-left: -456px; width: 900px; padding: 16px;background-color: white;z-index:1002; overflow: auto; border-color:#666; border-radius:5px; border-style:solid; border-width:5px; min-height:600px; height: auto !important; height:600px;} </style> Progress: http://instride.info/admin - Click tab that says log - Then click any log post to view light box Hello all I want to use javascript to open a small div as an enlarged one using a fade effect when doing so, anyone can pls help? refer to my attached image for what i want to do (example is when click on the small 'contact us' it opens as an enlarged div at the bottom, same for the other 2 divs) Hey guys, I'm new to the forums, so if i post anything wrong let me know. I'm trying to use links to hide all the images, and show just ones from a certain category. I've used the img name attribute to group them and tried to do a function that shows only one img. here's the script... <script language="javascript"> function showone(x) { document.getElementByName('a').style.display='none'; document.getElementByName('b').style.display='none'; document.getElementByName('c').style.display='none'; document.getElementByName(x).style.display='block'; } </script> and the code... <a href="#" onClick="showone('a'); ">show CAT. A</a><br> <a href="#" onClick="showone('b'); ">show CAT. B</a><br> <a href="#" onClick="showone('c'); ">show CAT. C</a><br> <a href="#">show all cats</a><br> <br> <img name="a" src="imgs/a1.jpg" /><br> <img name="b" src="imgs/b1.jpg" /><br> <img name="a" src="imgs/a2.jpg" /><br> <img name="a" src="imgs/a3.jpg" /><br> <img name="b" src="imgs/b2.jpg" /><br> <img name="c" src="imgs/c1.jpg" /> Here's what it looks like... http://mattfalcone.com/tests/showhide.html except the links don't work like they should, and I can't figure out why. I'm an idiot with javascript, so if feel free to make fun of me, and if anyone knows how to get this simple function to work, please let me know and I'de appreciate it. I have an image gallery with about 10 images. Its a very simple image gallery, basically you have "A" "B" "C" "D" etc, and for each letter you click on, JavaScript changes the relative image from hidden to block. The problem I have is that all of the 10 images load in the background, despite the user not clicking on the corresponding letter, which wastes a ton of bandwidth. I have isolated and placed the image gallery code into a HTML file and included 3 pics so you can see it working: http://www.maxsurl.com/link.php?ref=rk925Lzd48 I don't know much about JavaScript, but I hope this code I just made up gives you can idea of what I am trying to achieve: Code: <SCRIPT type="text/javascript">
function pic1() {
load.pic('src="pic1.png"')
}
function pic2() {
load.pic('src="pic2.png"')
}
function pic3() {
load.pic('src="pic3.png"')
}
</SCRIPT>
<SPAN onclick="return pic1()">PIC 1</SPAN>
<SPAN onclick="return pic2()">PIC 2</SPAN>
<SPAN onclick="return pic2()">PIC 3</SPAN>
<IMG id="pic">
Does anyone have a suggestion on how I could achieve what I would like to do? If so, could you please show me a basic example of code so I can make sense of it (I am a visual learner). I have a html page with a lot of thumbnails. The idea is that when the user clicks on an image the onClick event is to display another detailed form and deliver to that form the name of the image in a variable. In the detailed php-form there is a query to MySQL to retrieve a record. The record will be retrieved by a Query based on the name of the picture. Apparently the PHP cannot do the job. I had an idea to make the thumbnail page as a form and to use use a hidden field with the thummnail name which should be carried on with the $_POST array through the submit button but i do not want to have a submit button. The more elegant way is just by clicking the picture the detailed page is opened and the variable is transferred where my php code can make use of the variable for the query. I have never used java before so you have to excuse for the lack of knowledge. Can anyone gie me an idea how i should implemnt this Best regards MSP I am a Javascript newbie. I'm trying to code a page that has thumbnails of smaller images that when each image is clicked a larger image will load above the thumbnails, plus text within a div will change, plus more Javascript behind a shopping cart button will change. I'm not sure if this is even possible and have been searching and experimenting with the code without success. To view the webpage I'm working on: http://toymakerpress.com/website/Fre.../TestPage.html If you click on the dog image you can see where I'm headed (I also haven't had any luck loading the shopping cart button with it's unique Javascript code). Here is my code so far: The shopping cart button (I would like this code to swap out everytime I load a new image): Code: <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=A0085&cl=82487&ejc=2" rel="nofollow" target="ej_ejc" class="ec_ejc_thkbx" onclick="javascript:return EJEJC_lc(this);"><img src="../images/addtocart1.gif" border="0" alt="Add to Cart"/></a> The code I'm working on for each thumbnail image: Code: <td><div align="center">
<a href="javascript:changeImage('../images/FreePlans/littledog-4Lg.jpg') "javascript:="javascript:"" onClick="load_content('orderform','more content') "><img src="../images/FreePlans/littledog-4.jpg" width="140" height="140" border="0" /></a></div></td>
Thanks! I have a html page with a lot of thumbnails. The idea is that when the user clicks on an image the onClick event is to display another detailed form and deliver to that form the name of the image in a variable. In the detailed php-form there is a query to MySQL to retrieve a record. The record will be retrieved by a Query based on the name of the picture. Apparently the PHP cannot do the job. I had an idea to make the thumbnail page as a form and to use use a hidden field with the thummnail name which should be carried on with the $_POST array through the submit button but i do not want to have a submit button. The more elegant way is just by clicking the picture the detailed page is opened and the variable is transferred where my php code can make use of the variable for the query. I have never used java before so you have to excuse for the lack of knowledge. Can anyone gie me an idea how i should implemnt this Best regards MSP I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. I am adding the below text/javascript to an HTML page and I need to get the resulting image centered on the page. Can anyone tell me what and where to add it, thanks <p> <script type="text/javascript"> he_width=750 he_height=500 he_maptype=k he_show_others = 1; he_zoom = 9; he_lat=39.0517 he_lng=-95.0456 </script> <script type="text/javascript" src="http://aprs.fi/js/embed.js"> </script> </p> 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>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay {
background-color: #ccffcc;
display: none;
margin-left: -400px;
position: absolute;
top: -250px;
left: 50%;
width: 800px;
height: 500px;
visibility: visible
}
#container{
color: white;
background-color: #0ff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
visibility: visible;
display: block
}
</style>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript">
//<![CDATA[
function hide() {
document.getElementById("overlay").style.display = "none";
}
function show() {
document.getElementById("overlay").style.display = "block";
swfobject.embedSWF("helpdeskApp_three.swf", "flashcontent", "800", "500", "9.0.0", "expressInstall.swf");
}
//]]>
</script>
</head>
<body>
<div id="container"> <div id="overlay"><div id="flashcontent">fdgfdg</div>
<a href="#" onclick="hide();">Click me</a> to close.</div></div>
<div><a href="#" onclick="show();">Click me</a> to show the hidden content.</div>
</body>
</html>
I got some of this code from these forums. Thank you. It works great, however I'll be using this code with a school's website's template. The problem is that the "overlay" div tags would be placed within the container div tags of the template,therefore confining to these dimensions. How can I modify my code to have my div tags not affected by the templates div tags... and have the overlay be center in the browser.. Thanks Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. Hello guys was just wondering if you might be able to help me out im looking for a javascript code that will open a window in 100% width, no toolbars, no menubars, no statusbar, nothing but the page conent basically but for it to all be centered on the screen vertically This is compound. Code: //compound interest
function checkNumber2(input, min, max, msg)
{
msg = msg + " field has invalid data: " + input.value;
var str = input.value;
for (var i = 0; i < str.length; i++)
{
var ch = str.substring(i, i + 1)
if ((ch < "0" || "9" < ch) && ch != '.')
{
alert(msg);
return false;
}
}
var num = parseFloat(str)
if (num < min || max < num)
{
alert(msg + " not in range [" + min + ".." + max + "]");
return false;
}
input.value = str;
return true;
}
function computeField2(input)
{
if (input.value != null && input.value.length != 0)
input.value = "" + eval(input.value);
computeForm(input.form);
}
function computeForm2(form)
{
if ((form.payments.value == null || form.payments.value.length == 0) ||
(form.interest.value == null || form.interest.value.length == 0) ||
(form.principal.value == null || form.principal.value.length == 0))
{
return;
}
if (!checkNumber(form.payments, 1, 480, "# of payments") ||
!checkNumber(form.interest, .001, 99, "Interest") ||
!checkNumber(form.principal, 0, 10000000, "Principal"))
{
form.payment.value = "Invalid";
return;
}
var i = form.interest.value;
if (i > 1.0)
{
i = i / 100.0;
form.interest.value = i;
}
i /=12;
var pow=1;
for (var j=0; j < form.payments.value; j++)
pow=pow * (1 + i);
money="" + .01* Math.round(100*(form.principal.value * pow * i) / (pow - 1));
dec=money.indexOf(".");
dollars = money.substring(0,dec);
cents=money.substring(dec+1,dec+3);
cents=(cents.length < 2) ? cents + "0" : cents;
money=dollars + "." + cents;
form.payment.value = money;
}
function clearForm2(form)
{
form.payments.value = "";
form.interest.value = "";
form.principal.value = "";
}
//STOP compound interest
I'm not a mathmatician (or english major). what do I need to change to make this for fixed interest? Thanks in advance and I didn't know she was your sister in advance. Hello everyone! I just thought this might require some javascript, so I posted this here. Anyway, how do I create an element that is absolutely positioned first, and then, when it goes to the top of the page, it becomes fixed? Thanks Lucas First off by let me stating that I am not a great web devloper nor am I a good with css / javascript. I am creating this website for a friend of mines company and I have one problem. The problem is that the navigation menu on the right side will not remain fixed how i want it to be. I spoke with many people and they all said that this cannot be done with css considering your layout and because it needs to dodge the headers and the footer. I basically want this div (sidenav on the right) to scroll along the page as users scroll up or down but it can not interfere with the header or footer. Could someone please post an example or if anyone has the time please tell me exactly what code I need to add to get this to work? keep in mind that i do not want the right side navigation to go over the content or out of the wrapper. I want it to stay in the same position in all aspects - left / right / top / bottom. Here is a link to the site http://www.collisionbodyworks.com/Pl...tic/index.html Any help would be greatly appreciated. Thank you in advance Hi, i've been searching this for a while now. I need to make a website for a school exercise and i'm looking for the next thing: i have 2 rows of 4 iframes on my site, which shows an image. u can combine these images by scrolling the iframes. but what i want is that it scrolls fixed. i have a preview of this right he http://toliademidov.ru/p/ i just need to know how to make it not scroll, but 'switch' to a next piece of image by scrolling. Thanks!! Mathieu fixed it.
Hey everyone! I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click. I've uploaded the progress he http://www.aldousmassie.com/newprogress I'm using this code at the moment to scroll through the background: Code: <!-- SCRIPT FOR CHANGING BG ON CLICK -->
<script type="text/javascript">
imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==3) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->
<script type="text/javascript">
imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==5) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick? I'd appreciate any tips that point me in the right direction. Thank you. Hi there, I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help. All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that. What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones. It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them. I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images. I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image. Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time. Need a little help with the final code on my project. I'm multiplying 3 drop downs to give me a total sq ft. I then want to take that variable and multiply it by a fixed number. i.e. qty*width*length equals a total of 8 sq ft, then take that 8 and multiply it by a fixed number (8*1.75), I want it to calculate without any submit buttons and show the total sq ft and the final value. thanks in advance for any assistance. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=unicode">
<form>
<meta content="MSHTML 6.00.2900.5921" name="GENERATOR"></head>
<body><strong>Quantity:</strong> <select id="qty" onchange="Calculate();" size="1"
name=qty><option value="1" selected>1</option> <option value="2">2</option>
<option value="3">3</option> <option value="4">4</option> <option
value=5>5</option> <option value="6">6</option> <option value="7">7</option>
<option value="8">8</option> <option value="9">9</option> <option
value=10>10</option> <\SELECT></select> <strong>Banner
Width:</strong> <select id="height" onchange="Calculate();" size="1"
name=height><option value="2" selected>2</option> <option value="3">3</option>
<option value="4">4</option>
<\SELECT></select> <strong>Banner Length:</strong>
<select id="length" onchange="Calculate();" size="1" name="length"><option value="4"
selected>4</option> <option value="5">5</option> <option value="6">6</option>
<option value="7">7</option> <option value="8">8</option>
<\SELECT></select> <strong>Total sq ft: <font
size=4><label id="lblRes"><!-- a Label to locate result in it -->8
</label></form></font></span></span></font>
<p></p></span></span></font></font></strong>
<div></div>
<script language="javascript">
function Calculate()
{
var h = document.getElementById('height').value;
var l = document.getElementById('length').value;
var q = document.getElementById('qty').value;
var result = h * l * q;
document.getElementById('lblRes').innerHTML = result;
}
</script>
</font></strong></body></html>
|
|||||||