Learn VBA & Macros in 1 Week!

JavaScript - Looking For This Exact Zoom / Lightbox

Full Excel VBA Course - Beginner to Expert

Looking For This Exact Zoom / Lightbox	View Content

I've seen a bunch of these around but most of them take over the screen, etc. We found the perfect one and wondered if anyone knows of any scripts that are like this one:

http://www.panic.com/transmit/

(See "Screenshots" towards the bottom for the zoom lightbox effect).

Full Excel VBA Course - Beginner to Expert

Disabling Zoom In And Zoom Out

Similar Tutorials

View Content

Hi 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;
var ctrlKey = 17, vKey = 189, cKey = 187;

$(document).keydown(function(e)
{

if (e.keyCode == ctrlKey) ctrlDown = true;
}).keyup(function(e)
{
if (e.keyCode == ctrlKey) ctrlDown = false;
});

$(document).keydown(function(e)
{
//alert(ctrlDown);

if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey))
return false;
});
});

Please provide me do you have any other code to do this?

Thanks,
Jagadeesh.

Jwplayer :: Exact Postition With Getposition()

Similar Tutorials

View Content

HI

I was able to get the position of the video by using the jwplayer().getPosition() function but I get something like 171.97 but the timer on the video showed me 2:51. How can I exactly get the position as 2:51 instead of 171.97?

Screenshot: http://i.imgur.com/NzMxk.png

My Code:

Code:

<script type="text/javascript">
		jwplayer("mediaplayer").setup({
			flashplayer: "player.swf",
			file: "mane.mp4",
			image: "preview.jpg",
                        events: {
                         onPlay: function(event) {
                            timeMsg();
                         }
                        }
		});


                function timeMsg()
                {
                    var t=setTimeout("alertMsg()",100);
                }
                function alertMsg()
                {
                    var timeline =  ( jwplayer().getPosition());
                    $('#position').text(timeline);
                    timeMsg();
                }

	</script>

Any help is appreciated.

Beginner Help, Functions/classes/objects Hard To Explain My Exact Problem

Similar Tutorials

View Content

Hello,

I'm taking Computer Logic in college. I only am truly familiar with HTML and CSS and minimal web hosting stuff. I REALLY want to learn how to program, however. Anyway, we are doing classes/objects and functions. I am trying to figure out how to do this exercise. She starts with having us make this page that has a form that lets you select one of three radio buttons that will change the background color of the web page, along with that there is two text boxes to put a first name and last name. Then there is a button to click which puts your full name concatenated in another box below. All of this, is done, and I pretty much THINK I understand what is going on. Here is the code that we did to get this to happen:

Code:

<html>
<head>
<title>Computer Logic in class</title>
<script type="text/javascript">
var nextColor = "";
var BR = "<br />";

function setColor(newColor)
{
	nextColor = newColor;
}

function changeColor()
{
	document.body.bgColor = nextColor;
}

function displayName()
{
	var firstName = document.ColorAndText.firstName.value;
	var lastName = document.ColorAndText.lastName.value;
	document.ColorAndText.fullName.value = firstName + " " + lastName;
}

</script>
</head>
<body bgcolor="red">
<form name="ColorAndText" action = "">

<input type="radio" name="colors" value="Blue" onclick="setColor(this.value)"/> Blue <br />
<input type="radio" name="colors" value="LightYellow" onclick="setColor(this.value)"/> Light Yellow <br />
<input type="radio" name="colors" value="Yellow" onclick="setColor(this.value)"/> Yellow <br />

<input type="button" name="changeButton" value="changeColor" onclick="changeColor()" /> <br />

<input type="text" name="firstName" value="First Name" size="40" /><br />
<input type="text" name="lastName" value="Last Name" size="40" /><br />
<input type="text" name="fullName" readonly="true" size="40" /><br />

<input type="button" name="displayButton" value="Display name" onclick="displayName()" /> <br />
</form>
</body>
</html>

Okay, now, I have and can do that. Seems to make sense. Now, then, the actual program I need to make is from the following exercises:

Activity 3-4 The owner of a flower shop wants you to develop a form for use on the shop's web site. The form should have a single text box for the user to enter his or her name. Under the text box should be a group of radio buttons for three different kinds of flowers: Roses, Carnations, and Daisies. Below the radio buttons should be a button labeled Request Info, with a read-only text box under it for thanking the user for requesting information. This program doesn't need any functions or onclick attributes for the graphical elements.

Okay, here is the code that does that, very simple HTML.

Code:

<html>
<head>
<title>Computer Logic in class</title>
<script type="text/javascript">
var nextFlower = "";
var BR = "<br />";

function setFlower(newFlower)
{
	nextFlower = newFlower;
}

function displayMessage()
{
	var firstName = document.Flowers.nameBox.value;
	document.Flowers.fullName.value = firstName + "," + nextFlower;
}

</script>
</head>
<body bgcolor="white">
<form name="Flowers" action = "">

<input type="text" name="nameBox" value="Namebox" size="60"><br />

<input type="radio" name="flowers" value="Roses" onclick="setFlower(this.value)"/> Roses <br />
<input type="radio" name="flowers" value="Carnations" onclick="setFlower(this.value)"/> Carnations <br />
<input type="radio" name="flowers" value="Daisies" onclick="setFlower(this.value)"/> Daisies <br />


<input type="button" name="displayButton" value="Request Info" onclick="displayMessage(this.value)" /> <br /><br />
<input type="text" name="thankyou" readonly="true" size="100" value="Thanks for using this program" /> 
</form>
</body>
</html>

Okay, now is where I'm stuck. The following exercise is as follows:

The flower shop owner in the previous activity wants to see where you can make the form interactive and asks you to have the form display a message in the bottom text box that includes the user's name, a comma, and the words "thank you for your inquiry about" followed by the flower name the user selected. Write a function named displayMessage() that accesses the user's name from the first text box and displays the message in the read-only text box. You also need to make the Request Info button call the displayMessage() function when it's clicked. Using Javascript, make this form active by including event triggers and functions.

My teacher has said that I should be able to do this by just referencing these two previous pages of code that I have already pasted. I feel like I am missing something, that I need to be doing something and it's just not working for me. I'm actually really really stuck on this. I haven't even gotten to the second half of the exercise (where I have to have it display about what flower you select) because I cant get this function to work. What am I missing? Also, the exercise we did before these two had us make a very basic account class and object. We don't have to do that at all in this anywhere, but I do know how to do it, in case I need to make a class or something.

ANY AND ALL HELP GREATLY APPRECIATED!!! I just don't know what I'm supposed to do, I can't get it to work.

Zoom Problem Using Vml

Similar Tutorials

View Content

The problem is I am drawing vml shapes on my webpage, at 100%
everything is fine, click events works fine, mouseover also works
fine, but when I zoom it to less than 90% or greater than 100%. Everything messess up.
Click works, but away, like if there are 2 shapes together and I click
on one, the other one will show the data. same with mouseover, I take
the mouse over the shape, but before reaching the shape, it starts
showing the effects of that mouseover.
I tried to tackle this on window resize event. But it dont work.

I wonder, If anyone has encountered this type of problem before & have
a solution.

Image Zoom

Similar Tutorials

View Content

I think this is done by Javascript.

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.
Could anyone tell me 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://www.next.co.uk/shopping/homew...roomdecor/17/4

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.

All help will is much appreciated

Zoom In/out Issues

Similar Tutorials

View Content

Hello,

I have been trying to make a script that will enlarge some images while the mouse passes over them.. though the script i wrote does not work..

Can someone please tell me what is wrong with it?

What did i do wrong?

Here is the script i wrote:

Code:

<script type="text/javascript" >
        var img1 = "img1.jpg";

        function zoomin()
        {
            document.getElementById('img1').style.height = 220;
            document.getElementById('img1').style.width = 200;
        }
        function zoomout()
        {
            document.getElementById('img1').style.height = 60;
            document.getElementById('img1').style.width = 50;
        }
    </script>

<img src="img1.jpg" id="img1" alt="" width="" height="" onMouseover="zoomin();" onMouseout="zoomout();"/>

Please help..

Thank you in advance.

Removing Zoom From This Script

Similar Tutorials

View Content

I have the following script that I'm using to make an overlay panel. I didn't write it, but am trying to remove the "zoom out" from it. Here's an example:
http://www.intelsystech.com/ab/SampleOverlay.html
That tiny little black scribble is my text. I don't want it to zoom the div contents, but instead to simply set height and width of the div.

Or better, does anyone know a javascript for a panel attached to the left, which has a resizer to make it wider, and a collapse/expand button? That's all I was looking for.

Thanks!

Script follows:

Code:

function Position(x, y)
{
  this.X = x;
  this.Y = y;
  
  this.Add = function(val)
  {
    var newPos = new Position(this.X, this.Y);
    if(val != null)
    {
      if(!isNaN(val.X))
        newPos.X += val.X;
      if(!isNaN(val.Y))
        newPos.Y += val.Y
    }
    return newPos;
  }
  
  this.Subtract = function(val)
  {
    var newPos = new Position(this.X, this.Y);
    if(val != null)
    {
      if(!isNaN(val.X))
        newPos.X -= val.X;
      if(!isNaN(val.Y))
        newPos.Y -= val.Y
    }
    return newPos;
  }
  
  this.Min = function(val)
  {
    var newPos = new Position(this.X, this.Y)
    if(val == null)
      return newPos;
    
    if(!isNaN(val.X) && this.X > val.X)
      newPos.X = val.X;
    if(!isNaN(val.Y) && this.Y > val.Y)
      newPos.Y = val.Y;
    
    return newPos;  
  }
  
  this.Max = function(val)
  {
    var newPos = new Position(this.X, this.Y)
    if(val == null)
      return newPos;
    
    if(!isNaN(val.X) && this.X < val.X)
      newPos.X = val.X;
    if(!isNaN(val.Y) && this.Y < val.Y)
      newPos.Y = val.Y;
    
    return newPos;  
  }  
  
  this.Bound = function(lower, upper)
  {
    var newPos = this.Max(lower);
    return newPos.Min(upper);
  }
  
  this.Check = function()
  {
    var newPos = new Position(this.X, this.Y);
    if(isNaN(newPos.X))
      newPos.X = 0;
    if(isNaN(newPos.Y))
      newPos.Y = 0;
    return newPos;
  }
  
  this.Apply = function(element)
  {
    if(typeof(element) == "string")
      element = document.getElementById(element);
    if(element == null)
      return;
    if(!isNaN(this.X))
      element.style.left = this.X + 'px';
    if(!isNaN(this.Y))
      element.style.top = this.Y + 'px';  
  }
}

function hookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.addEventListener)
  {
    element.addEventListener(eventName, callback, false);
  }
  else if(element.attachEvent)
    element.attachEvent("on" + eventName, callback);
}

function unhookEvent(element, eventName, callback)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
    return;
  if(element.removeEventListener)
    element.removeEventListener(eventName, callback, false);
  else if(element.detachEvent)
    element.detachEvent("on" + eventName, callback);
}

function cancelEvent(e)
{
  e = e ? e : window.event;
  if(e.stopPropagation)
    e.stopPropagation();
  if(e.preventDefault)
    e.preventDefault();
  e.cancelBubble = true;
  e.cancel = true;
  e.returnValue = false;
  return false;
}

function getMousePos(eventObj)
{
  eventObj = eventObj ? eventObj : window.event;
  var pos;
  if(isNaN(eventObj.layerX))
    pos = new Position(eventObj.offsetX, eventObj.offsetY);
  else
    pos = new Position(eventObj.layerX, eventObj.layerY);
  return correctOffset(pos, pointerOffset, true);
}

function getEventTarget(e)
{
  e = e ? e : window.event;
  return e.target ? e.target : e.srcElement;
}

function absoluteCursorPostion(eventObj)
{
  eventObj = eventObj ? eventObj : window.event;
  
  if(isNaN(window.scrollX))
    return new Position(eventObj.clientX + document.documentElement.scrollLeft + document.body.scrollLeft, 
      eventObj.clientY + document.documentElement.scrollTop + document.body.scrollTop);
  else
    return new Position(eventObj.clientX + window.scrollX, eventObj.clientY + window.scrollY);
}

function dragObject(element, attachElement, lowerBound, upperBound, startCallback, moveCallback, endCallback, attachLater)
{
  if(typeof(element) == "string")
    element = document.getElementById(element);
  if(element == null)
      return;

  var cursorStartPos = null;
  var elementStartPos = null;
  var dragging = false;
  var listening = false;
  var disposed = false;

  function dragStart(eventObj)
  {
    if(dragging || !listening || disposed) return;
    dragging = true;

    if(startCallback != null)
      startCallback(eventObj, element);

    cursorStartPos = absoluteCursorPostion(eventObj);

    elementStartPos = new Position(parseInt(element.style.left), parseInt(element.style.top));

    elementStartPos = elementStartPos.Check();

    hookEvent(document, "mousemove", dragGo);
    hookEvent(document, "mouseup", dragStopHook);

    return cancelEvent(eventObj);
  }

  function dragGo(eventObj)
  {
    if(!dragging || disposed) return;

    var newPos = absoluteCursorPostion(eventObj);
    newPos = newPos.Add(elementStartPos).Subtract(cursorStartPos);
    newPos = newPos.Bound(lowerBound, upperBound)
    newPos.Apply(element);
    if(moveCallback != null)
      moveCallback(newPos, element);

    return cancelEvent(eventObj);
  }

  function dragStopHook(eventObj)
  {
    dragStop();
    return cancelEvent(eventObj);
  }

  function dragStop()
  {
    if(!dragging || disposed) return;
    unhookEvent(document, "mousemove", dragGo);
    unhookEvent(document, "mouseup", dragStopHook);
    cursorStartPos = null;
    elementStartPos = null;
    if(endCallback != null)
      endCallback(element);
    dragging = false;
  }

  this.Dispose = function()
  {
    if(disposed) return;
    this.StopListening(true);
    element = null;
    attachElement = null
    lowerBound = null;
    upperBound = null;
    startCallback = null;
    moveCallback = null
    endCallback = null;
    disposed = true;
  }
  
  this.GetLowerBound = function()
  { return lowerBound; }
  
  this.GetUpperBound = function()
  { return upperBound; }

  this.StartListening = function()
  {
    if(listening || disposed) return;
    listening = true;
    hookEvent(attachElement, "mousedown", dragStart);
  }

  this.StopListening = function(stopCurrentDragging)
  {
    if(!listening || disposed) return;
    unhookEvent(attachElement, "mousedown", dragStart);
    listening = false;

    if(stopCurrentDragging && dragging)
      dragStop();
  }

  this.IsDragging = function(){ return dragging; }
  this.IsListening = function() { return listening; }
  this.IsDisposed = function() { return disposed; }

  if(typeof(attachElement) == "string")
    attachElement = document.getElementById(attachElement);
  if(attachElement == null)
    attachElement = element;

  if(!attachLater)
    this.StartListening();
}

function ResizeableContainer(contentID, parent)
{
  var MINSIZE = 38;
  var EDGE_THICKNESS = 7;
  var EDGEDIFFSIZE = 2*EDGE_THICKNESS + 3;
  var EDGEDIFFPOS = EDGE_THICKNESS + 1;
  var TEXTDIFF = EDGE_THICKNESS + 2;
  
  var _width = 38;
  var _height = 38;
  
  var _maxWidth = 900;
  var _maxHeight = 600;
  
  var _minWidth = MINSIZE;
  var _minHeight = MINSIZE;

  var _container = document.createElement('DIV');
  _container.className = 'reContainer';
  
  var _content = document.getElementById(contentID);
  _content.ResizeableContainer = this;
  _content.className = 'reContent';
  
  var _rightEdge = document.createElement('DIV');
  _rightEdge.className = 'reRightEdge';
  
  var _bottomEdge = document.createElement('DIV');
  _bottomEdge.className = 'reBottomEdge';
 
  var _cornerHandle = document.createElement('DIV');
  _cornerHandle.className = 'reCorner';
  
  var _leftCornerHandle = document.createElement('DIV');
  _leftCornerHandle.className = 'reLeftCorner';
  
  var _topCornerHandle = document.createElement('DIV');
  _topCornerHandle.className = 'reTopCorner';
  
  var _rightHandle = document.createElement('DIV');
  _rightHandle.className = 'reRightHandle';

  var _bottomHandle = document.createElement('DIV');
  _bottomHandle.className = 'reBottomHandle';
  
  var _topRightImageHandle = document.createElement('DIV');
  _topRightImageHandle.className = 'reTopRightImage';
  
  var _bottomLeftImageHandle = document.createElement('DIV');
  _bottomLeftImageHandle.className = 'reBottomLeftImage';
  
  var _leftEdge = document.createElement('DIV');
  _leftEdge.className = 'reLeftEdge';
  
  var _topEdge = document.createElement('DIV');
  _topEdge.className = 'reTopEdge';
  
  _cornerHandle.appendChild(_leftCornerHandle);
  _cornerHandle.appendChild(_topCornerHandle);
  
  _rightEdge.appendChild(_topRightImageHandle);
  _rightEdge.appendChild(_rightHandle);
  
  _bottomEdge.appendChild(_bottomHandle);
  _bottomEdge.appendChild(_bottomLeftImageHandle);

  _container.appendChild(_topEdge);
  _container.appendChild(_leftEdge);    
  _container.appendChild(_rightEdge);
  _container.appendChild(_bottomEdge);
  _container.appendChild(_cornerHandle);
  _container.appendChild(_content);
    
  var _rightHandleDrag = new dragObject(_rightEdge, null, new Position(0, 3), new Position(0, 3), moveStart, rightHandleMove, moveEnd, true);
  var _bottomHandleDrag = new dragObject(_bottomEdge, null, new Position(3, 0), new Position(3, 0), moveStart, bottomHandleMove, moveEnd, true);
  var _cornerHandleDrag = new dragObject(_cornerHandle, null, new Position(0, 0), new Position(0, 0), moveStart, cornerHandleMove, moveEnd, true);
  
  UpdateBounds();
  UpdatePositions();
  AddToDocument();
  
  function moveStart(eventObj, element)
  {
    if(element == _cornerHandle)
      document.body.style.cursor = 'se-resize';
    else if(element == _bottomEdge)
      document.body.style.cursor = 's-resize';
    else if(element == _rightEdge)
      document.body.style.cursor = 'e-resize';
  }
  
  function moveEnd(element)
  {
    UpdatePositions();
    document.body.style.cursor = 'auto'; 
  }

  function rightHandleMove(newPos, element)
  {   
    _width = newPos.X + EDGE_THICKNESS;
    UpdatePositions();
  }
  
  function bottomHandleMove(newPos, element)
  {
    _height = newPos.Y + EDGE_THICKNESS;
    UpdatePositions();
  }

  function cornerHandleMove(newPos, element)
  {
    _width = newPos.X + EDGE_THICKNESS;
    _height = newPos.Y + EDGE_THICKNESS;
    UpdatePositions();
  }

  function UpdateBounds()
  {
    _rightHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS;
    _rightHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS;
    _bottomHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS;
    _bottomHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS;
    _cornerHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS;
    _cornerHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS;
    _cornerHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS;
    _cornerHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS;
  }
  
  function UpdatePositions()
  {
    if(_width < _minWidth)
      _width = _minWidth;
    if(_width > _maxWidth)
      _width = _maxWidth;
    
    if(_height < _minHeight)
      _height = _minHeight;
    if(_height > _maxHeight)
      _height = _maxHeight;
    
    _container.style.width = _width + 'px';  
    _container.style.height = _height + 'px';
    
    _content.style.width = (_width - TEXTDIFF) + 'px';
    _content.style.height = (_height - TEXTDIFF) + 'px';
    _rightEdge.style.left = (_width - EDGEDIFFPOS) + 'px';
    _rightEdge.style.height = (_height - EDGEDIFFSIZE) + 'px';
    _bottomEdge.style.top = (_height - EDGEDIFFPOS) + 'px';
    _bottomEdge.style.width = (_width - EDGEDIFFSIZE) + 'px';
    _cornerHandle.style.left = _rightEdge.style.left;
    _cornerHandle.style.top = _bottomEdge.style.top;
    _topEdge.style.width = (_width - EDGE_THICKNESS) + 'px';
    _leftEdge.style.height = (_height - EDGE_THICKNESS) + 'px';
    
    
    _rightHandle.style.top = ((_height - MINSIZE) / 2) + 'px';
    _bottomHandle.style.left = ((_width - MINSIZE) / 2) + 'px';
  }
  
  function Listen(yes)
  {
    if(yes)
    {
      _rightHandleDrag.StartListening();
      _bottomHandleDrag.StartListening();
      _cornerHandleDrag.StartListening();
    }
    else
    {
      _rightHandleDrag.StopListening();
      _bottomHandleDrag.StopListening();
      _cornerHandleDrag.StopListening();
    }
  }
  
  function AddToDocument()
  {
    if(typeof(parent) == "string")
      parent = document.getElementById(parent);
    
    if(parent == null || parent.appendChild == null)
    {
      var id = "sotc_re_" + new Date().getTime() + Math.round(Math.random()*2147483647);
      while(document.getElementById(id) != null)
        id += Math.round(Math.random()*2147483647);
        
      document.write('<span id="'+ id + '"></span>');
      element = document.getElementById(id);
      element.parentNode.replaceChild(_container, element);
    }
    else
    {
      parent.appendChild(_container);
    }
    
    Listen(true); 
  }
  
  this.StartListening = function()
  { Listen(true); }
  
  this.StopListening = function()
  { Listen(false); }
  
  this.GetContainer = function()
  { return _container; }
  
  this.GetContentElement = function()
  { return _content; }
  
  this.GetMinWidth = function()
  { return _minWidth; }
  
  this.GetMaxWidth = function()
  { return _maxWidth; }
  
  this.GetCurrentWidth = function()
  { return _width; }
  
  this.GetMinHeight = function()
  { return _minHeight; }
  
  this.GetMaxHeight = function()
  { return _maxHeight; }
  
  this.GetCurrentHeight = function()
  { return _height; }
  
  this.SetMinWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _minWidth = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetMaxWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _maxWidth = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetCurrentWidth = function(value)
  {
    value = parseInt(value);
    if(isNaN(value))
      value = 0;
    
    _width = value;
    
    UpdatePositions();
  }
  
  this.SetMinHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _minHeight = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetMaxHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value) || value < MINSIZE)
      value = MINSIZE;
    
    _maxHeight = value;
    
    UpdatePositions();
    UpdateBounds();
  }
  
  this.SetCurrentHeight = function(value)
  {
    value = parseInt(value);
    if(isNaN(value))
      value = 0;
    
    _height = value;
    
    UpdatePositions();
  }
}

Auto Website Zoom

Similar Tutorials

View Content

Thanks in advance for any help. I am not very experienced at web design. I have spent a ton of time making a webpage with text in graphics (yes, I know, bad idea). The person I am making it for decided "on my bigger laptop, the text is too small. Can you fix that" So to save myself a ton of work, I'd like to set an automatic css zoom based on the browsers screen resolution.

e.g.

If 1024, then zoom: 100.
if 1440, then zoom 120.
If 1600, then zoom 150

or somethings like that. I can do some basic stuff in CSS, but seems like maybe javascript is required to pull this off. Help!

Zoom Image Slider

Similar Tutorials

View Content

Zoom Slider - A Javascript Slideshow I've been looking for some tutorials on how to make a zoom image slider like the one I posted as a link. Does anyone have any examples that I can use to help me. Thanks!

Zoom In/out Function On Jpgs?

Similar Tutorials

View Content

Hi,

I recently uploaded an interactive map which, for the most part, I'm happy with. However, I would like to add a zoom in/out function to the map; for example, when the mouse is scrolled the jpg zooms out.

What exactly would be the code for that? Thanks

Map can be viewed BY CLICKING HERE.

Problem With Javscript Zoom

Similar Tutorials

View Content

on http://d11882157.a148.awebforyou.com...14_1422_p.html

I use a javascript zoom but it disables the users from clicking on the link above the zoom

is there any solution for this?

Need Help For Rotate And Zoom Image.

Similar Tutorials

View Content

Hi,
I need some help for rotate and zoom image as in link below. any one can help me?

http://kroppr.rborn.info/
http://crop.smally.net/

Zoom Image Javascript

Similar Tutorials

View Content

Please help. I am using Image Zoom JQuery script for one gift page because it is browser compatible and it works great. But they want me to add this script to the previous thumbnail page. So the thumbnails have to be a zoomable image as well as a clickable link to go to the next page. The JQuery script I can't seem to do both with but MojoZoom script you can except it does not do well in any browsers except Mozilla. It uses a data-zoomsrc to bring in the larger image. I just can't get it to work in anything but mozilla. I have tried messing with the .css and the .js file with no luck in controlling where the zoomed image falls on the page. In IE it shows way up above the thumbnail instead of directly next to the thumbnial. Please any help is appreciated. Or if you have another type of image zoom script that you are familiar with please suggest. I have seen other posts but not to do with the image being clickable and zoomable.

Zoom In/out Website Content

Similar Tutorials

View Content

I'm searching for a crossbrowser script to zoom in/out the full website content (not text only). Who can provide me a link to that kind of script?

Zoom Script Problem In Ff.

Similar Tutorials

View Content

Hello all.

This script is working fine in IE7 but FF is complaining about undeclared variables.

Can anybody assist to get this working in FF or do I need a new script?

Any and all advice is welcome.

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test ZOOM</title>

<script type="text/javascript">

//Image zoom in/out script- by javascriptkit.com
//Visit JavaScript Kit (http://www.javascriptkit.com) for script
//Credit must stay intact for use

var zoomfactor=0.05 //Enter factor (0.05=5%)

function zoomhelper(){
if (parseInt(whatcache.style.width)>10&&parseInt(whatcache.style.height)>10){
whatcache.style.width=parseInt(whatcache.style.width)+parseInt(whatcache.style.width)*zoomfactor*prefix
whatcache.style.height=parseInt(whatcache.style.height)+parseInt(whatcache.style.height)*zoomfactor*prefix
}
}

function zoom(originalW, originalH, what, state){
if (!document.all&&!document.getElementById)
return
whatcache=eval("document.images."+what)
prefix=(state=="in")? 1 : -1
if (whatcache.style.width==""||state=="restore"){
whatcache.style.width=originalW+"px"
whatcache.style.height=originalH+"px"
if (state=="restore")
return
}
else{
zoomhelper()
}
beginzoom=setInterval("zoomhelper()",100)
}

function clearzoom(){
if (window.beginzoom)
clearInterval(beginzoom)
}

</script>
</head>

<body>
<!-- CHANGE 99 to your image width, 100 to image height, and "office_map" to your image's name-->

<a href="#" onmouseover="zoom(100,63,'office_map_6','in')" onmouseout="clearzoom()">Zoom In</a> | 

<a href="#" onmouseover="zoom(100,63,'office_map_6','restore')">Normal</a> | 

<a href="#" onmouseover="zoom(120,60,'office_map_6','out')" onmouseout="clearzoom()">Zoom Out</a>

<div style="position:relative;width:420;height:300">
	<div style="position:absolute"><img name="office_map_6" src="images/office_map_6.gif" width="100" height="63">
	</div>
</div>
</body>
</html>

low tech

Image Zoom Mouseover

Similar Tutorials

View Content

Hello folks, I'm new here.
This is just a question regarding a script I'm after that enlarges an image onmouseover and shrinks the other two images.

It is probably best I explain this by using drawings.
As you can see, in figure 1, I have a line of three images connected in boxes (although shape will probably change to something more complex later)

(Figure 1)

Then in figure 2, when the user rolls the mouse over the middle image, it enlarges, and the other two shrink, whilst still remaining very much side by side/in the same position.

(Figure 2)

The same action would apply when the user rolls their mouse over any of the three images, I'm just using the middle purely as an example!

Is there any way to do this or script I can use? My javascripting skills aren't brilliant!

Cheers.

Zoom To Fit All Markers On Google Maps Api V3

Similar Tutorials

View Content

I am trying to make google maps zoom to fit markers, I made this super simple example that should work but blows up when it comes time to create the LatLngList Array.

I'm using this guys code that everyone says works:http://blog.shamess.info/2009/09/29/...e-maps-api-v3/

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBFaOhZzSroCxheTo9stXtkicU3bNHwcho&sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var myOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title:"Hello World!"
    });
	//  Make an array of the LatLng's of the markers you want to show
	var LatLngList = array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017));
	//  Create a new viewpoint bound
	var bounds = new google.maps.LatLngBounds ();
	//  Go through each...
	for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
	//  And increase the bounds to take this point
	bounds.extend (LatLngList[i]);
	}
	//  Fit these bounds to the map
	map.fitBounds (bounds);

  }

</script>

</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:650px;height:550px;"></div>
</body>
</html>

Is It Possible To Imitate Browser Zoom With Javascript!?

Similar Tutorials

View Content

Does anyone have any idea how to imitate browser zoom with javascript?

I know you are not allowed to control browser's zoom capabilities, but perhaps there's a way to change all content dimensions with javascript?

In firefox, when you press ctrl+, the whole page resizes appropriately, even background images.

With this imitation JS zoom, background images would not zoom since there is no scale size numer or anything like that in CSS.

It would simply be cool to have a script that resizes everything on the page. That way, you can design highdefinition content that fits a 1280 * 960 browser frame, but can zoom out for smaller resolutions (1024 or 800).

That's be neato!!

Any ideas? Anyone know a script?

Single Click To Zoom On Google Map

Similar Tutorials

View Content

I am completely new to javascript programming. We had another company (out of business now) develop a mapping system that placed many different business locations on a Google map. However, the points overlap and hide each other. I would like the user to have to single click on the map (thus zooming the map in) before they can choose a business.

Is there a simple line of code that will do this? I want to remove the need to double click to zoom and make it a single click to zoom prior to selecting a business.

If you want to see the mapping code, I can post it. I wasn't sure what to do.

This is a fairly pressing matter as the nonprofit I am helping out is seasonal and ready to start the busy season soon.

THANKS!

Google Map Api Zoom / Center Around Markers ?

Similar Tutorials

View Content

I am no javascript coder so apologies for what may be a simple issue,

I have a php page that pulls MySQL marker locations

I have tried using examples for bounds etc but the map isn't centered or zoomed, it instead seems to center over the Pacific and minimum zoom level (For the url below it should be centered over the Devon region of the UK and zoomed in)

the page where you can see the end result is he
http://www.peugeotcentral.co.uk/modu...tches&Region=1

I did have some issues in my code whereby I was using deprecated function of GPoint for passing locations but one of the group mods kindly pointed this out and this was replaced with GLatLng but the fault is still there

any help much appreciated, I do have the source code for the php if required