Solved

Changing Image Source From Link References

Posted on 2009-05-04
8
474 Views
Last Modified: 2012-05-06
Is it possible to have the reference from a link determine what the source of an image will be?

I currently have a page with 30 links.  The HTML follows this methodology:

<li><a href="#0001">Link 1</a></li>
<li><a href="#0002">Link 2</a></li>
...
<li><a href="#0030">Link 30</a></li>

With that, I'm wanting to change the source of the image.  For instance, if someone clicks on Link 1, I want the image URL to be ../image0001.jpg.  Link 2 being ../image0002.jpg etc.

Any ideas as to how I would do this with javascript?

Thanks in advance.
0
Comment
Question by:WavyGravy
  • 4
  • 4
8 Comments
 
LVL 8

Expert Comment

by:mkosbie
ID: 24293757
Why do you want to make the links this way?  Why not just put the actual full image path in the links?

Anyways, to answer the question, attach a click handler to all the <a> tags on the page, then in the function that processes it, manually handle the redirect.  Something like this maybe.
<html>

<head>

<script type="text/javascript">

window.onload = function() {

    var as = document.getElementsByTagName("A");

    for(i=0;i<as.length;i++) as[i].onclick = processClick;

};
 

function processClick(e) {

    if(!e) e=window.event;

    var t = e.target ? e.target : e.srcElement;
 

    var redirect = "../image" + t.href.substring(1,4) + ".jpg";

    document.location.replace(redirect);

}

</script>

</head>

<body>

<a href="#0001">Link 1</a>

<a href="#0002">Link 2</a>

</body>

</html>

Open in new window

0
 
LVL 8

Expert Comment

by:mkosbie
ID: 24293777
Sorry, that won't work reliably cross-browser.  Try with this correction.
<html>

<head>

<script type="text/javascript">

window.onload = function() {

    var as = document.getElementsByTagName("A");

    for(i=0;i<as.length;i++) as[i].onclick = processClick;

};
 

function processClick(e) {

    if(!e) e=window.event;

    var t = e.target ? e.target : e.srcElement;
 

    var redirect = "../image" + t.href.split("#")[1] + ".jpg";

    document.location.replace(redirect);

}

</script>

</head>

<body>

<a href="#0001">Link 1</a>

<a href="#0002">Link 2</a>

</body>

</html>

Open in new window

0
 
LVL 1

Author Comment

by:WavyGravy
ID: 24293802
Things have to be this way because it's a limitation of the iUI library for iPhone web application development.  To further explain things I am developing a web application that displays the feed from traffic cameras.  Because there are over 100 of them, I figured it would be a lot easier have one page (or div tag in this case) handle the camera view and other information, and that information could come from the link bringing it there.

I've attached a code snippet to give you the gist of things.  Let me know if it helps, and if you'd recommend a different solution because of it.

Thanks for the help thus far though.  :-)
<!-- Main Menu -->

    <ul id="mainMenu" title="Main Menu" selected="true">

		<li><a href="#cameras">Traffic Cameras</a></li>

		<li><a href="#about">About</a></li>

    </ul>

	

	<!-- Traffic Cameras-->

	<ul id="cameras" title="Traffic Cameras">

		<li><a href="#i64">I-64</a></li>

		<li><a href="#i65">I-65</a></li>

		<li><a href="#i71">I-71</a></li>

		<li><a href="#i264">I-264</a></li>

		<li><a href="#i265">I-265</a></li>

		<li><a href="#downtown">Downtown</a></li>

	</ul>

	<!-- I-64 -->

	<ul id="i64" title="I-64">

		<li class="group">High Traffic Areas</li>

		<li><a href="#i64_22nd">22nd St.</a></li>

		<li><a href="#i64_grinstead">Grinstead Dr.</a></li>

		<li><a href="#i64_ofr">Oxmoor Farm Rd.</a></li>

		<li class="group">Intersections</li>

		<li><a href="#i64_i264">I-264</a></li>

		<li><a href="#i64_i265">I-265</a></li>

	</ul>

	<div id="i64_22nd" title="22nd Street" class="panel">

		<img src="http://trimarc.org/images/snapshots/CCTV028.jpg" width="300" height="225" align="center"><br /><br />

		<h2>More Information</h2>

		<fieldset>

			<div class="row">

				<label>Mile Marker: 3.2</label>

			</div>

			<div class="row">

				<label>CCTV No.: 028</label>

			</div>

		</fieldset>

	</div>

Open in new window

0
 
LVL 8

Expert Comment

by:mkosbie
ID: 24293880
I'm not entirely clear on what the navigation scheme is here.  You want the user to click a link, and be redirected to a new page?  Or you want them to click a link and have it update the current page accordingly?  Based on the code you provided, I think you mean the latter.  You will run into a small problem of differentiating between links that should update the image and those that don't.  I would just drop a class onto the ones that do.

Same base code as before, but here's one with some added in stuff to update the local page based on the href value.  Note that you MUST return false at the end of the handler function to avoid redirecting the page.
<html>

<head>

<script type="text/javascript">

window.onload = function() {

    var as = document.getElementsByTagName("A");

    for(i=0;i<as.length;i++) if(as[i].className=="imgUpdater") as[i].onclick = processClick;

};
 

function processClick(e) {

    if(!e) e=window.event;

    var t = e.target ? e.target : e.srcElement;
 

    var imgToUpdate = document.getElementById("imgToUpdate");

    imgToUpdate.src = "../image" + t.href.split("#")[1] + ".jpg";
 

    return false;

}

</script>

</head>

<body>

<img src="myimg.jpg" id="imgToUpdate" />

<br>

<a href="#0001" class="imgUpdater">Link 1</a>

<a href="#0002" class="imgUpdater">Link 2</a>

<br>

<a href="http://www.google.com">Google</a>

</body>

</html>

Open in new window

0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 1

Author Comment

by:WavyGravy
ID: 24293983
Uh oh, I think I've made this more complicated than it needed to be.  With that said, I'm EXTREMELY appreciative for your help so far.  To clarify, here's why everything is structured the way it is.

The part of the iPhone UI that I'm emulating is when it generates lists and and a selection is made, it "slides" to the next set of options.  You can see the app I'm working on at http://mrgravy.com/iphone.  Firefox should emulate it to an extent, at least enough to give you an idea.

With that said, the old version of this app had each camera with it's own "panel," or div element.  For the sake of better coding, I want to use one div element, called "cameraView"  This cameraView panel contains the most current image from the webcam, and it's mile marker location.  I figured that javascript would allow me to write a function that can alter the image URL of the image and text label with the mile marker info, depending on which camera in the list is clicked.  It's just I have no clue how to do it for the time being...
0
 
LVL 1

Author Comment

by:WavyGravy
ID: 24293987
...so in other words, ALL camera links must point to "#cameraView"  I've tried <a href="#cameraView" onClick='document.getElementById("imgToUpdate").src="http://trimarc.org/images/snapshots/CCTV020.jpg"'> to no avail though...
0
 
LVL 1

Author Comment

by:WavyGravy
ID: 24294077
Mother of God.  I'm starting to lose my mind now.  ANY help here would save the day.

What I've attached below is the function I created to change the URL of the image that will display the webcam.  In theory it makes sense.  However, when testing it in Firefox and on the iPhone, nothing happens when the camera link is clicked.  However, in IE8, it works fine.  That's besides the point though, because it needs to work on the iPhone's Safari.

In order to get the iPhone UI goodness, I'm having to use the iUI library, which has it's own javascript as well.  It's attached as well, and it's making me think that there's a conflict somewhere.  A conflict that one of you javascript guru's could pick up on in less than a few minutes.

So please, any help to get me going again will be GREATLY appreciated!

Thanks in advance!




<!-- Javascript Function -->

<script type="text/javascript">

	function theCamera(wci, mm)

	{

		var trafficCamera;

		var mileMarker;

		trafficCamera = document.getElementById("imgToUpdate");

		trafficCamera.src = wci;

		mileMarker = mm;

	}

</script>
 

<!-- Traffic Camera Link -->

<li><a href="#displayCamera" onclick="theCamera('http://trimarc.org/images/snapshots/CCTV020.jpg', 'nothingYet')">Camera 20</a></a></li>
 

<!-- Element showing the camera -->

<div id="#cameraView" title="" class="panel">

	<img id="imgToUpdate" src="" width="300" height="225" align="center"><br /><br />

		<h2>More Information</h2>

		<fieldset>

			<div class="row">

				<label>Mile Marker: 18.6</label>

			</div>

			<div class="row">

				<label>CCTV No.: 045</label>

			</div>

	</fieldset>

</div>
 

<!-- Evil iUI Javascript -->

/*

   Copyright (c) 2007-9, iUI Project Members

   See LICENSE.txt for licensing terms

 */
 
 

(function() {
 

var slideSpeed = 20;

var slideInterval = 0;
 

var currentPage = null;

var currentDialog = null;

var currentWidth = 0;

var currentHash = location.hash;

var hashPrefix = "#_";

var pageHistory = [];

var newPageCount = 0;

var checkTimer;

var hasOrientationEvent = false;

var portraitVal = "portrait";

var landscapeVal = "landscape";
 

// *************************************************************************************************
 

window.iui =

{

    showPage: function(page, backwards)

    {

        if (page)

        {

            if (currentDialog)

            {

                currentDialog.removeAttribute("selected");

                currentDialog = null;

            }
 

            if (hasClass(page, "dialog"))

                showDialog(page);

            else

            {

                var fromPage = currentPage;

                currentPage = page;
 

                if (fromPage)

                    setTimeout(slidePages, 0, fromPage, page, backwards);

                else

                    updatePage(page, fromPage);

            }

        }

    },
 

    showPageById: function(pageId)

    {

        var page = $(pageId);

        if (page)

        {

            var index = pageHistory.indexOf(pageId);

            var backwards = index != -1;

            if (backwards)

                pageHistory.splice(index, pageHistory.length);
 

            iui.showPage(page, backwards);

        }

    },
 

    showPageByHref: function(href, args, method, replace, cb)

    {

        var req = new XMLHttpRequest();

        req.onerror = function()

        {

            if (cb)

                cb(false);

        };

        

        req.onreadystatechange = function()

        {

            if (req.readyState == 4)

            {

                if (replace)

                    replaceElementWithSource(replace, req.responseText);

                else

                {

                    var frag = document.createElement("div");

                    frag.innerHTML = req.responseText;

                    iui.insertPages(frag.childNodes);

                }

                if (cb)

                    setTimeout(cb, 1000, true);

            }

        };
 

        if (args)

        {

            req.open(method || "GET", href, true);

            req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            req.setRequestHeader("Content-Length", args.length);

            req.send(args.join("&"));

        }

        else

        {

            req.open(method || "GET", href, true);

            req.send(null);

        }

    },

    

    insertPages: function(nodes)

    {

        var targetPage;

        for (var i = 0; i < nodes.length; ++i)

        {

            var child = nodes[i];

            if (child.nodeType == 1)

            {

                if (!child.id)

                    child.id = "__" + (++newPageCount) + "__";
 

                var clone = $(child.id);

                if (clone)

                    clone.parentNode.replaceChild(child, clone);

                else

                    document.body.appendChild(child);
 

                if (child.getAttribute("selected") == "true" || !targetPage)

                    targetPage = child;

                

                --i;

            }

        }
 

        if (targetPage)

            iui.showPage(targetPage);    

    },
 

    getSelectedPage: function()

    {

        for (var child = document.body.firstChild; child; child = child.nextSibling)

        {

            if (child.nodeType == 1 && child.getAttribute("selected") == "true")

                return child;

        }    

    },

    isNativeUrl: function(href)

    {

        for(var i = 0; i < iui.nativeUrlPatterns.length; i++)

        {

            if(href.match(iui.nativeUrlPatterns[i])) return true;

        }

        return false;

    },

    nativeUrlPatterns: [

        new RegExp("^http:\/\/maps.google.com\/maps\?"),

        new RegExp("^mailto:"),

        new RegExp("^tel:"),

        new RegExp("^http:\/\/www.youtube.com\/watch\\?v="),

        new RegExp("^http:\/\/www.youtube.com\/v\/")

    ]

};
 

// *************************************************************************************************
 

addEventListener("load", function(event)

{

    var page = iui.getSelectedPage();

    if (page)

        iui.showPage(page);
 

    setTimeout(preloadImages, 0);

    setTimeout(checkOrientAndLocation, 0);

    checkTimer = setInterval(checkOrientAndLocation, 300);

}, false);
 

addEventListener("unload", function(event)

{

	return;

}, false);

    

addEventListener("click", function(event)

{

    var link = findParent(event.target, "a");

    if (link)

    {

        function unselect() { link.removeAttribute("selected"); }

        

        if (link.href && link.hash && link.hash != "#")

        {

            link.setAttribute("selected", "true");

            iui.showPage($(link.hash.substr(1)));

            setTimeout(unselect, 500);

        }

        else if (link == $("backButton"))

            history.back();

        else if (link.getAttribute("type") == "submit")

            submitForm(findParent(link, "form"));

        else if (link.getAttribute("type") == "cancel")

            cancelDialog(findParent(link, "form"));

        else if (link.target == "_replace")

        {

            link.setAttribute("selected", "progress");

            iui.showPageByHref(link.href, null, null, link, unselect);

        }

        else if (iui.isNativeUrl(link.href))

        {

            return;

        }

        else if (!link.target)

        {

            link.setAttribute("selected", "progress");

            iui.showPageByHref(link.href, null, null, null, unselect);

        }

        else

            return;

        

        event.preventDefault();        

    }

}, true);
 

addEventListener("click", function(event)

{

    var div = findParent(event.target, "div");

    if (div && hasClass(div, "toggle"))

    {

        div.setAttribute("toggled", div.getAttribute("toggled") != "true");

        event.preventDefault();        

    }

}, true);
 

function orientChangeHandler()

{

  var orientation=window.orientation;

  switch(orientation)

  {

    case 0:

        setOrientation(portraitVal);

        break;  

        

    case 90:

    case -90: 

        setOrientation(landscapeVal);

        break;

  }

}
 

if (typeof window.onorientationchange == "object")

{

    window.onorientationchange=orientChangeHandler;

    hasOrientationEvent = true;

    setTimeout(orientChangeHandler, 0);

}
 

function checkOrientAndLocation()

{

    if (!hasOrientationEvent)

    {

      if (window.innerWidth != currentWidth)

      {   

          currentWidth = window.innerWidth;

          var orient = currentWidth == 320 ? portraitVal : landscapeVal;

          setOrientation(orient);

      }

    }
 

    if (location.hash != currentHash)

    {

        var pageId = location.hash.substr(hashPrefix.length);

        iui.showPageById(pageId);

    }

}
 

function setOrientation(orient)

{

    document.body.setAttribute("orient", orient);

    setTimeout(scrollTo, 100, 0, 1);

}
 

function showDialog(page)

{

    currentDialog = page;

    page.setAttribute("selected", "true");

    

    if (hasClass(page, "dialog") && !page.target)

        showForm(page);

}
 

function showForm(form)

{

    form.onsubmit = function(event)

    {

        event.preventDefault();

        submitForm(form);

    };

    

    form.onclick = function(event)

    {

        if (event.target == form && hasClass(form, "dialog"))

            cancelDialog(form);

    };

}
 

function cancelDialog(form)

{

    form.removeAttribute("selected");

}
 

function updatePage(page, fromPage)

{

    if (!page.id)

        page.id = "__" + (++newPageCount) + "__";
 

    location.href = currentHash = hashPrefix + page.id;

    pageHistory.push(page.id);
 

    var pageTitle = $("pageTitle");

    if (page.title)

        pageTitle.innerHTML = page.title;
 

    if (page.localName.toLowerCase() == "form" && !page.target)

        showForm(page);

        

    var backButton = $("backButton");

    if (backButton)

    {

        var prevPage = $(pageHistory[pageHistory.length-2]);

        if (prevPage && !page.getAttribute("hideBackButton"))

        {

            backButton.style.display = "inline";

            backButton.innerHTML = prevPage.title ? prevPage.title : "Back";

        }

        else

            backButton.style.display = "none";

    }    

}
 

function slidePages(fromPage, toPage, backwards)

{        

    var axis = (backwards ? fromPage : toPage).getAttribute("axis");

    if (axis == "y")

        (backwards ? fromPage : toPage).style.top = "100%";

    else

        toPage.style.left = "100%";
 

    toPage.setAttribute("selected", "true");

    scrollTo(0, 1);

    clearInterval(checkTimer);

    

    var percent = 100;

    slide();

    var timer = setInterval(slide, slideInterval);
 

    function slide()

    {

        percent -= slideSpeed;

        if (percent <= 0)

        {

            percent = 0;

            if (!hasClass(toPage, "dialog"))

                fromPage.removeAttribute("selected");

            clearInterval(timer);

            checkTimer = setInterval(checkOrientAndLocation, 300);

            setTimeout(updatePage, 0, toPage, fromPage);

        }

    

        if (axis == "y")

        {

            backwards

                ? fromPage.style.top = (100-percent) + "%"

                : toPage.style.top = percent + "%";

        }

        else

        {

            fromPage.style.left = (backwards ? (100-percent) : (percent-100)) + "%"; 

            toPage.style.left = (backwards ? -percent : percent) + "%"; 

        }

    }

}
 

function preloadImages()

{

    var preloader = document.createElement("div");

    preloader.id = "preloader";

    document.body.appendChild(preloader);

}
 

function submitForm(form)

{

    iui.showPageByHref(form.action || "POST", encodeForm(form), form.method);

}
 

function encodeForm(form)

{

    function encode(inputs)

    {

        for (var i = 0; i < inputs.length; ++i)

        {

            if (inputs[i].name)

                args.push(inputs[i].name + "=" + escape(inputs[i].value));

        }

    }
 

    var args = [];

    encode(form.getElementsByTagName("input"));

    encode(form.getElementsByTagName("textarea"));

    encode(form.getElementsByTagName("select"));

    return args;    

}
 

function findParent(node, localName)

{

    while (node && (node.nodeType != 1 || node.localName.toLowerCase() != localName))

        node = node.parentNode;

    return node;

}
 

function hasClass(self, name)

{

    var re = new RegExp("(^|\\s)"+name+"($|\\s)");

    return re.exec(self.getAttribute("class")) != null;

}
 

function replaceElementWithSource(replace, source)

{

    var page = replace.parentNode;

    var parent = replace;

    while (page.parentNode != document.body)

    {

        page = page.parentNode;

        parent = parent.parentNode;

    }
 

    var frag = document.createElement(parent.localName);

    frag.innerHTML = source;
 

    page.removeChild(parent);
 

    while (frag.firstChild)

        page.appendChild(frag.firstChild);

}
 

function $(id) { return document.getElementById(id); }

function ddd() { console.log.apply(console, arguments); }
 

})();
 

<!-- More Evil Javascript -->

(function(){var _1=20;var _2=0;var _3=null;var _4=null;var _5=0;var _6=location.hash;var _7="#_";var _8=[];var _9=0;var _a;var _b=false;var _c="portrait";var _d="landscape";window.iui={showPage:function(_e,_f){if(_e){if(_4){_4.removeAttribute("selected");_4=null;}if(hasClass(_e,"dialog")){showDialog(_e);}else{var _10=_3;_3=_e;if(_10){setTimeout(slidePages,0,_10,_e,_f);}else{updatePage(_e,_10);}}}},showPageById:function(_11){var _12=$(_11);if(_12){var _13=_8.indexOf(_11);var _14=_13!=-1;if(_14){_8.splice(_13,_8.length);}iui.showPage(_12,_14);}},showPageByHref:function(_15,_16,_17,_18,cb){var req=new XMLHttpRequest();req.onerror=function(){if(cb){cb(false);}};req.onreadystatechange=function(){if(req.readyState==4){if(_18){replaceElementWithSource(_18,req.responseText);}else{var _1b=document.createElement("div");_1b.innerHTML=req.responseText;iui.insertPages(_1b.childNodes);}if(cb){setTimeout(cb,1000,true);}}};if(_16){req.open(_17||"GET",_15,true);req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");req.setRequestHeader("Content-Length",_16.length);req.send(_16.join("&"));}else{req.open(_17||"GET",_15,true);req.send(null);}},insertPages:function(_1c){var _1d;for(var i=0;i<_1c.length;++i){var _1f=_1c[i];if(_1f.nodeType==1){if(!_1f.id){_1f.id="__"+(++_9)+"__";}var _20=$(_1f.id);if(_20){_20.parentNode.replaceChild(_1f,_20);}else{document.body.appendChild(_1f);}if(_1f.getAttribute("selected")=="true"||!_1d){_1d=_1f;}--i;}}if(_1d){iui.showPage(_1d);}},getSelectedPage:function(){for(var _21=document.body.firstChild;_21;_21=_21.nextSibling){if(_21.nodeType==1&&_21.getAttribute("selected")=="true"){return _21;}}},isNativeUrl:function(_22){for(var i=0;i<iui.nativeUrlPatterns.length;i++){if(_22.match(iui.nativeUrlPatterns[i])){return true;}}return false;},nativeUrlPatterns:[new RegExp("^http://maps.google.com/maps?"),new RegExp("^mailto:"),new RegExp("^tel:"),new RegExp("^http://www.youtube.com/watch\\?v="),new RegExp("^http://www.youtube.com/v/")]};addEventListener("load",function(_24){var _25=iui.getSelectedPage();if(_25){iui.showPage(_25);}setTimeout(preloadImages,0);setTimeout(checkOrientAndLocation,0);_a=setInterval(checkOrientAndLocation,300);},false);addEventListener("unload",function(_26){return;},false);addEventListener("click",function(_27){var _28=findParent(_27.target,"a");if(_28){function unselect(){_28.removeAttribute("selected");}if(_28.href&&_28.hash&&_28.hash!="#"){_28.setAttribute("selected","true");iui.showPage($(_28.hash.substr(1)));setTimeout(unselect,500);}else{if(_28==$("backButton")){history.back();}else{if(_28.getAttribute("type")=="submit"){submitForm(findParent(_28,"form"));}else{if(_28.getAttribute("type")=="cancel"){cancelDialog(findParent(_28,"form"));}else{if(_28.target=="_replace"){_28.setAttribute("selected","progress");iui.showPageByHref(_28.href,null,null,_28,unselect);}else{if(iui.isNativeUrl(_28.href)){return;}else{if(!_28.target){_28.setAttribute("selected","progress");iui.showPageByHref(_28.href,null,null,null,unselect);}else{return;}}}}}}}_27.preventDefault();}},true);addEventListener("click",function(_29){var div=findParent(_29.target,"div");if(div&&hasClass(div,"toggle")){div.setAttribute("toggled",div.getAttribute("toggled")!="true");_29.preventDefault();}},true);function orientChangeHandler(){var _2b=window.orientation;switch(_2b){case 0:setOrientation(_c);break;case 90:case -90:setOrientation(_d);break;}}if(typeof window.onorientationchange=="object"){window.onorientationchange=orientChangeHandler;_b=true;setTimeout(orientChangeHandler,0);}function checkOrientAndLocation(){if(!_b){if(window.innerWidth!=_5){_5=window.innerWidth;var _2c=_5==320?_c:_d;setOrientation(_2c);}}if(location.hash!=_6){var _2d=location.hash.substr(_7.length);iui.showPageById(_2d);}}function setOrientation(_2e){document.body.setAttribute("orient",_2e);setTimeout(scrollTo,100,0,1);}function showDialog(_2f){_4=_2f;_2f.setAttribute("selected","true");if(hasClass(_2f,"dialog")&&!_2f.target){showForm(_2f);}}function showForm(_30){_30.onsubmit=function(_31){_31.preventDefault();submitForm(_30);};_30.onclick=function(_32){if(_32.target==_30&&hasClass(_30,"dialog")){cancelDialog(_30);}};}function cancelDialog(_33){_33.removeAttribute("selected");}function updatePage(_34,_35){if(!_34.id){_34.id="__"+(++_9)+"__";}location.href=_6=_7+_34.id;_8.push(_34.id);var _36=$("pageTitle");if(_34.title){_36.innerHTML=_34.title;}if(_34.localName.toLowerCase()=="form"&&!_34.target){showForm(_34);}var _37=$("backButton");if(_37){var _38=$(_8[_8.length-2]);if(_38&&!_34.getAttribute("hideBackButton")){_37.style.display="inline";_37.innerHTML=_38.title?_38.title:"Back";}else{_37.style.display="none";}}}function slidePages(_39,_3a,_3b){var _3c=(_3b?_39:_3a).getAttribute("axis");if(_3c=="y"){(_3b?_39:_3a).style.top="100%";}else{_3a.style.left="100%";}_3a.setAttribute("selected","true");scrollTo(0,1);clearInterval(_a);var _3d=100;slide();var _3e=setInterval(slide,_2);function slide(){_3d-=_1;if(_3d<=0){_3d=0;if(!hasClass(_3a,"dialog")){_39.removeAttribute("selected");}clearInterval(_3e);_a=setInterval(checkOrientAndLocation,300);setTimeout(updatePage,0,_3a,_39);}if(_3c=="y"){_3b?_39.style.top=(100-_3d)+"%":_3a.style.top=_3d+"%";}else{_39.style.left=(_3b?(100-_3d):(_3d-100))+"%";_3a.style.left=(_3b?-_3d:_3d)+"%";}}}function preloadImages(){var _3f=document.createElement("div");_3f.id="preloader";document.body.appendChild(_3f);}function submitForm(_40){iui.showPageByHref(_40.action||"POST",encodeForm(_40),_40.method);}function encodeForm(_41){function encode(_42){for(var i=0;i<_42.length;++i){if(_42[i].name){args.push(_42[i].name+"="+escape(_42[i].value));}}}var _44=[];encode(_41.getElementsByTagName("input"));encode(_41.getElementsByTagName("textarea"));encode(_41.getElementsByTagName("select"));return _44;}function findParent(_45,_46){while(_45&&(_45.nodeType!=1||_45.localName.toLowerCase()!=_46)){_45=_45.parentNode;}return _45;}function hasClass(_47,_48){var re=new RegExp("(^|\\s)"+_48+"($|\\s)");return re.exec(_47.getAttribute("class"))!=null;}function replaceElementWithSource(_4a,_4b){var _4c=_4a.parentNode;var _4d=_4a;while(_4c.parentNode!=document.body){_4c=_4c.parentNode;_4d=_4d.parentNode;}var _4e=document.createElement(_4d.localName);_4e.innerHTML=_4b;_4c.removeChild(_4d);while(_4e.firstChild){_4c.appendChild(_4e.firstChild);}}function $(id){return document.getElementById(id);}function ddd(){console.log.apply(console,arguments);}})();

Open in new window

0
 
LVL 8

Accepted Solution

by:
mkosbie earned 500 total points
ID: 24296888
It's an iPhone UI conflict.  You're linking to #displayCamera like you're supposed to, but you've then id'ed the div as "#displayCamera".  It should be "displayCamera" (w/out the # first).  I copied the code of your test site, made a couple of changes to insert what you have here, and have am posting a complete version.  Seems to work fine to me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>TRIMARC</title>

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

<link rel="apple-touch-icon" href="./trimarc.png" />

<meta name="apple-touch-fullscreen" content="YES" />

<style type="text/css" media="screen">@import "./lib/iui/iui.css";</style>

<script type="application/x-javascript" src="./lib/iui/iui.js"></script>

<script type="text/javascript">

function setCamera(wci, mm) {

    var imgCamera = document.getElementById("imgCamera");

    var mmText = document.getElementById("txtMM");
 

    imgCamera.src = wci;

    mmText.innerHTML = mm;

}

</script>

</head>

<body>

    <!-- Top toolbar -->
 

	<div class="toolbar">

        <h1 id="pageTitle"></h1>

        <a id="backButton" class="button" href="#"></a>

		<a class="button" href="#mainMenu">Home</a>

    </div>

    

	<!-- Main Menu -->

    <ul id="mainMenu" title="Main Menu" selected="true">

		<li><a href="#cameras">Traffic Cameras</a></li>
 

		<li><a href="#incidents">Incident Reports</a></li>

		<li><a href="#about">About</a></li>

    </ul>

	

	<!-- Traffic Cameras-->

	<ul id="cameras" title="Traffic Cameras">

		<li><a href="#i64">I-64</a></li>

		<li><a href="#i65">I-65</a></li>
 

		<li><a href="#i71">I-71</a></li>

		<li><a href="#i264">I-264</a></li>

		<li><a href="#i265">I-265</a></li>

		<li><a href="#downtown">Downtown</a></li>

	</ul>

	

	<!-- I-64 -->

	<ul id="i64" title="I-64">
 

		<li class="group">High Traffic Areas</li>

		<li><a href="#displayCamera" onclick="setCamera('http://trimarc.org/images/snapshots/CCTV020.jpg','mm');">22nd St.</a></li>

		<li><a href="#i64_grinstead">Grinstead Dr.</a></li>

		<li><a href="#i64_ofr">Oxmoor Farm Rd.</a></li>

		<li class="group">Intersections</li>

		<li><a href="#i64_i264">I-264</a></li>
 

		<li><a href="#i64_i265">I-265</a></li>

	</ul>

	

	<!-- I-65 -->

	<ul id="i65" title="I-65">

		<li class="group">High Traffic Areas</li>

		<li><a href="#i65_arthur">Arthur St.</a></li>

		<li><a href="#i65_fernvalley">Fern Valley Rd.</a></li>
 

		<li><a href="#i65_grade">Grade Ln.</a></li>

		<li><a href="#i65_hc">Hospital Curve</a></li>

		<li><a href="#i65_outerloop">Outer Loop</a></li>

		<li class="group">Intersections</li>

		<li><a href="#i65_i264">I-264</a></li>

		<li><a href="#i65_i265">I-265</a></li>
 

		<li><a href="#i65_sg">Spaghetti Junction</a></li>

	</ul>

	<!-- I-71 -->

	<ul id="i71" title="I-71">

		<li class="group">High Traffic Areas</li>

		<li><a href="#i71_adams">Adams St.</a></li>

		<li><a href="#i71_frankfort">Frankfort Ave.</a></li>
 

		<li><a href="#i71_zorn">Zorn Ave.</a>

		<li class="group">Intersections</li>

		<li><a href="#i71_i264">I-264</a></li>

		<li><a href="#i71_i265">I-265</a></li>

	</ul>

	<!-- I-264 -->

		<ul id="i264" title="I-264">
 

			<li><a href="i264_crums">Crums Ln.</a></li>

			<li><a href="i264_dixie">Dixie Hwy.</a></li>

			<li><a href="i264_freedom">Freedom Way</a></li>

			<li><a href="i264_newburg">Newburg Rd.</a></li>

			<li><a href="i264_poplar">Poplar Level</a></li>

			<li><a href="i264_river">River Park Dr.</a></li>
 

			<li><a href="i264_taylor">Taylor Blvd.</a></li>

			<li><a href="i264_westport">Westport Rd.</a></li>

			<li></li>

		<li class="group">High Traffic Areas</li>

		<li class="group">Intersections</li>

			<li><a href="i264_i71">I-71</a></li>
 

	</ul>

	<!-- I-265 -->

		<ul id="i265" title="I-265">

		<li class="group">High Traffic Areas</li>

		<li class="group">Intersections</li>

	</ul>

	<!-- Downtown -->

	

	

	<!-- Camera Page -->
 

	<div id="displayCamera" title="" class="panel">

		<img id="imgCamera" src="" width="300" height="225" align="center"><br /><br />

		<h2>More Information</h2>

		<fieldset>

			<div class="row">

				<label>Mile Marker: <span id="txtMM">18.6</span></label>

			</div>

			<div class="row">
 

				<label>CCTV No.: 045</label>

			</div>

		</fieldset>

	</div>

</body>

</html>

Open in new window

0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

You should read OS supplied guidelines before developing. I can't stress that enough. The guidelines will help you understand the reasons mobile app developers do what they do.  Apple is very particular when they review appstore submissions.
What is Backup? Backup software creates one or more copies of the data on your digital devices in case your original data is lost or damaged. Different backup solutions protect different kinds of data and different combinations of devices. For e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now