SetTimeOut - DHTML - CSS Driven Zoom Feature
May 25, 2010
I have a CSS driven zoom feature which shrinks a large image down to a specified size and when hovered over, the image enlarges to its full size. I need to be able to either make it stay opened (enlarged) when clicked, unless it is clicked to close OR to have the hovered (enlarged) image on a time delay to stay open for a specified amount of time.
I have already tried 2 scripts that I've found, but they are very over-complicated for what I need.
I thought, I'd only need to put something in the <a> tag or <img> tag, but I'm so new to Javascript and it is wearing me so out that I'm exhausted.
I did, however, get the effect that I wanted when I applied a:Active, instead of a:Hover) - It's just that can't get the image to close upon a second click.
My guess is that I need a js with an if open then onclick close it - but I'm not sure how to construct it or exactly where it wiill go.
Here is the CSS that operates the zoom (external CSS):
Code:
Here is the markup for the image:
Code:
The example can be seen here: [url]
View 8 Replies
ADVERTISEMENT
Sep 13, 2010
I'm not exactly sure as to whether this question should be posted here or on the php forum, but I think it mainly has to do with fancybox's zoom feature. My problem is this.
I'm doing SEO for an already established site and this site has a features area with about three different options that use the fancybox zoom script. These boxes all contain pertinent information (SEO heavy) about each option as well as links to different sites. All of the info displayed is pulled from a database via php.
I would like to be able to display the descriptions as searchable content, and be able to track how many people click on the external links, but as it is now none of this shows up on the source code. The fancybox zoom feature seems to open up another window within my main page.
My question is this. Is there anyway that I can retain fancybox and get the content to come up under the source code? Or does this maybe even sound like an unusual effect from fancybox.
I can send some code later, if anyone needs it. I just didn't want to throw everything in here all at once, because it's quite a bit of code involved.
View 4 Replies
View Related
Jul 20, 2005
Advanced DHTML Dropdown List component (Javascript,ASP,.NET,PHP)
enhances usability of large dropdown lists with type & select feature.
It suggests possible matches for entries you type in the input box.
Works in all browser with DIV, CSS and JavaScript support: IE5+,
Netscape6+, Mozilla, Opera. The script allows full customization with
style sheets, single and multiple select mode. Code:
View 2 Replies
View Related
Dec 29, 2005
I'm trying to code a feature for my website using DHTML where the person viewing the website can rotate between viewing the positive/negative points of the website being reviewed. This example was in the publication called Using HTML 4 by Lee Anne Phillips. Code:
View 5 Replies
View Related
Nov 4, 2010
On google maps I have several hundred markers for different countries and cities across the globe. It is just not practical to navigate through several hundred markers therefore I would like my browser to auto navigate to predefined multiple latitudes and longtitudes or cities, once the navigation for predefined cities completes, the navigation loop carries on. Also for certain cities or latitude / longitude can we set zoom level so when the browser is auto navigating it zooms in and zooms out for predefined cities. Is this possible, here is the code that I am using.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title/>Apache-Geo-Map Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=<my-api-key>"
[Code].....
I can see several hundred markers on the map, rather than navigating between each marker I would like my browser to auto navigate through predefined cities with auto zoom in and zoom out values.
View 3 Replies
View Related
Dec 14, 2011
I was not happy with the zoom scripts that I found on the net, so I wrote one myself, or one that simulates it. It has become an extremely simple one, and can be seen in action here (function toggleZoom). Click the images to zoom in and click to zoom out again.However, only the images with an initial width of >= 100 pixels will zoom out again. The ones width an initial width of < 100 (nrs. 4, 5 and 7) won't. Why is that, and how do I solve it?
View 2 Replies
View Related
Feb 1, 2011
i m using the below code to disable ctrl+ and ctrl- (zoom in/out using keyboard). The below code is working in firefox but it is not working in IE. The return false; is not working in IE. can you please some one help in this?
$(document).ready(function()
{
var ctrlDown = false;[code].....
View 3 Replies
View Related
Mar 31, 2010
I have seen a website that has a great image zoom function and would like to be able to add this function to my website. I'm afraid my Javascript isn't very good. where I can get a script to do this or how else if there is some free software that could do it? The webpage is: http:[url].....On this page if you click on Zoom on the left another image comes up on the right and when you mouse over the square on the left image it zooms the right image.
View 3 Replies
View Related
Jul 23, 2005
so is it really possible to have a javascript app that runs when a
"go" button is clicked (ie requiring a <FORM> tag) inside a form with
a "submit" button? seems so simple, can't figure it out without doing
illegal nested forms.
View 1 Replies
View Related
Sep 9, 2006
I have an associative array that I need to loop through, allbills,
however, each element in this array requires processing by the user and
I need to capture the users actions on the element and then return to
the next element in the list but suspend looping until I have the users
desired action...
For example,
for(mybill in allbills)
{
GetWhatToDo(mybill); // gets the information about what user wants to
do with the currentBill
}
The problem is that the function "GetWhatToDo" doesn't "block" so the
loop completes without waiting for the users input from GetWhatToDo...
So, my thought was I need to design things more 'event-driven' and
handle things like so:
function handleABill() {
mybill=GetNextBill();
GetWhatToDo(mybill);
}
A "Next" button inside the popup generated by GetWhatToDo will have an
onclick event that calls handleABill again...
The problem is that I can't figure out how to write GetNextBill so that
it maintains the state of the loop through 'allbills', especially since
'allbills' is an associative array and I can't keep track of the array
index. The only thing I can think of is to initialize a regular array
from the associative array and keep track of the index number.
View 1 Replies
View Related
Dec 6, 2010
jQuery and based on a tutorial for a toggle function I want to do a toggle with a dynamic content for the collapsed DIVs. My code looks like that:
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();
[code]....
View 4 Replies
View Related
Oct 18, 2010
What I'm trying to do is create a document which allows you to select a size of box from a drop down menu, and then select a size of product to go into the box on a second drop down. The products on the second drop down menu will be allocated based on the box size that you've selected to make sure that you can only choose products which will fit in the box you've selected.
In order to do this I've set up a 2D array, which lists each product and which boxes they will fit in using 0 for no and 1 for yes. When you select a box size from the drop down a value appears in a text box next to it (1, 2, 3, or 4) and what I need to do is use the number which appears in this text box to pull data from the array to populate the next drop down list. i.e. If option 2 appears from the first drop down selection then the second drop down should be populated with data from column 2 of array (In this example 1212, 1515, and 2020 would be shown in the second drop down)
Im having trouble with the Java script to pull the values from the html text box in order to manipulate the array. If you look at the function 'top_biochill_addOption_list()' you will see that the second drop is populated here from row [itop2][3] of the array, which means the second drop down is permenantly populated as if option 3 had been selected from the first drop down. I need to get the value selected from the first drop down as a variable and replace the '3' in the above statement with that variable to get this to work but I have no idea how to go about that.
Hopefully all will become clear when you see the code. As I say, I am very new to Javascript so I'm sure this code is probably messy and inefficient, but with that in mind I'd appreciate replies being in simplified terms so I can understand what you're getting at, or if anything gets re-written then a brief explaination of whats going on would be handy so I can understand what the code is actually doing!
<html>
<head>
<script type="text/javascript">
var linebreak = "<br />";
[code]...
View 9 Replies
View Related
May 27, 2009
Here is the link to a page on my work web: -
[URL]
You will see that I have three combo box objects on this form - one containing dates (Date) and the other two containing times (Time1 & Time2). Each time on each date is an available appointment.
I would like the content of the date combos to be read from a file whenever the page is opened - a text file with one record per row would be fine (by way of an example - but this may be insufficient). On the face of it this would seem fairly rudimentary but I don't code in JavaScript of PHP and, having found this site I can make a start. I used to be a VB coder.
On each date the following appointment times are available: -
10:00
11:00
12:00
14:00
15:00
This assumes that no appointments on a given day are taken.This leads me to conclude that each date should have records for each time - possibly as a CSV text file as follows: -
"29th May 2009","10:00"
"29th May 2009","11:00"
"29th May 2009","12:00"
[code]...
The second time combo should make unavailable the time selected in the first time combo and present only those times available on the chosen date in the CSV file on the server.When I confirm appointments, at present I have to edit the page objects and update the web - which is quite messy and slow whereas uploading a simple text file, whilst an imperfect solution, is much better than what I currently have.
I believe that a PHP or Javascript routine based on events on the three objects would remove the inherent problems and would provide a useful set of building blocks for other routines of a similar nature.The routine would trigger whenever the page is loaded (or refreshed) or the content of any one of the three objects gets or loses the focus or a selection is made in an object.
The Date Combo would need to look up the available dates - keeping the currently selected date selected or, if that date is no longer available defaulting to the first date in the list. The user then makes a selection or makes no change to the selected date.The Time1 Combo then reads the available times for that date, retains the currently selected time (if available) or the first available time (if the selected is not available) and the user makes a selection or accepts the current selection.The Time2 Combo does the same as the Time1 Combo and in addition it eliminates the time selected in the Time1 Combo from the available choices.
The result is that visitors are only offered available times on available dates (insofar as this solution provides).When the form is submitted I would receive the email and confirm the appointment with the client and, in addition, I would modify and upload the modified data file to the web server using Filezilla. The benefit is that there is a slim to none chance of two people wanting to book the same times on the same date at exactly the same time (though it is possible). In addition, I can add new dates and add new times if there is a demand and I can even add previously deleted times if there is sufficient demand to warrant bringing in a second consultant to take the meetings.
View 1 Replies
View Related
Jun 30, 2010
So here is my problem...I've been banging my head against the wall for days with this one.How do you send data through the URL to be handled by a script in page.html, where page.html processes the data and dynamically displays the data in a modal. I can get the script to execute without trying to display in a modal, but as soon as I attempt to display in a modal, all I get is the static HTML without the jquery dynamic html.I know some code should be given, but if anyone could just walk me through the logic of why static html might be shown but not the dynamic, I think i can figure it out.
View 1 Replies
View Related
Feb 1, 2010
I have a site which is rendering some CMS-driven content with empty paragraphs. I'd like to remove these spaces dynamically with jquery. I'm trying this but it doesn't work:
How to just replace all occurences of '<p> </p>' within nothing (i.e. remove them)?
View 1 Replies
View Related
Jul 12, 2010
I have the following function that's supposed to say "Please make a guess" 20 seconds after an initial confirmation is displayed. However, it's immediately displayed as soon as someone hits "Cancel". If I change it's time to 40000 (20 seconds after the initial function is called), it does do it 40 seconds total, so it kind of does what I want. So it seems that the second setTimeout is initiated from the time the script is called generally, but I'm looking for a way specifically to have the 20 seconds start only after the "cancel" button is hit.
[code]...
View 1 Replies
View Related
May 6, 2010
trying to find a good rotating box with SEO content.[URL]
View 5 Replies
View Related
Feb 17, 2007
I was playing around with the compose feature of gmail today and I noticed that it seemed to have an extremely intelligent auto-save feature. What intrigued me about it was that it only seemed to auto-save the document when you were not working on it and when there was actually something that needed to be done.
However the most interesting (i.e., bit that stumped me) was how while in the middle of auto-uploading a large attached file I am able to edit the e-mail and yet when it has finished uploading the attachment (and the page seemingly refreshes) the changes I made to the e-mail are still there.
Could anyone be so kind as to enlighten me as to just how exactly the auto-save feature works (as I am interested implementing something similar for my own site), especially in the region of attachment handling.
I know that they must have some kind of JavaScript on-key-press callback that detects when you are working on a document but that is about all I can extrapolate.
View 1 Replies
View Related
Jul 9, 2007
i am trying to get to work and i don't get why its not working so i am going to post it here and if someone who is smarter then me could come on and let me know why its not working and how i can fix it. if you have any questions let me know and i would be glad to answer them. Code:
View 10 Replies
View Related
Oct 2, 2006
I have a property site and would like users to be able to click a button or tick a box to enable them to save a listing & then when they have finished searching they can then click on a 'view saved properties' button and each listing, or a link to each listing will be displayed on a seperate page so they can then go back to all their saved listings.
View 2 Replies
View Related
Nov 22, 2009
Is there an easy way in JS or jQuery to zoom into and out of an HTML display and a canvas?
If not, is there a hard way?
I've already thought of one very inelegant way - put a magnification factor on every dimension and font in the program, and animate that.
I've seen it done nicely in Flash and ActionScript, but I don't want to go to proprietary programs.
View 2 Replies
View Related
Feb 9, 2006
We all know that feature detection technique works from very beggining
of user-agents supporting JavaScript. We can alway check if eg.
document has a write property or smth else:
if(document.write) {
}
We could do that for all of objects, so i have been surprised when i
found 'in' operator, which for above example would be used like this:
if("write" in document) {
}
So i have questioned myself what for ? I can always do:
if(document["write"]) {
}
or even
var prop = [...];
if(document[prop]) {
}
which is supported better then 'in' operator ('in' is supported since
W. IE 5.5 and NN 6 - around 2000 year). I can only guess that 'in' was
provided in W. IE 5.5 only for convenience... but that is my guess and
someone more knowlegable could write here some more opinions on this
operator...
View 22 Replies
View Related
Nov 22, 2006
Is it possible that first I make my window resizable,than if window is less than a fixed size I can make my window not resizable?Better to say can I change resizable feature during runtime?If possible,than how?
View 3 Replies
View Related
Jul 20, 2005
Can someone point me to a script that will allow me to implement a "back button" in an HTA, since there is no history for HTA's. Understand this requires an array, is there any sample code out there
?
View 1 Replies
View Related
Apr 15, 2009
I am trying to add a feature to one of my webpages where when you scroll over a specific word, a popup appears. However, for some reason the code I am using isn't working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL]"> <html xmlns="[URL]"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScript-based Pop-Up Div</title>
<style type="text/css"> body{
padding: 0; margin: 0; background: #fff;
} h1 {
font: bold 24px Arial, Helvetica, sans-serif;
color: #000; }
View 1 Replies
View Related
Mar 25, 2010
I am pretty new to javascript, I've made a php game and I am adding the last touches. Ive got. When I press m it goes to your mailbox. Now what I want is the alert feature. Now I have that. I want it to say. You have COUNT new message(s). How do I get my php variable into that javascript.
View 1 Replies
View Related
