Link to home
Start Free TrialLog in
Avatar of ddantes
ddantesFlag for United States of America

asked on

Avoiding an empty SRC attribute

I have a page at http://mauitradewinds.com/Test/StWVT.htm which has an empty src attribute (src="").   Because of the javascript plugin, and also a media query to serve a smaller image on iPhone, it seems I can't fill that src attribute without freezing, or disappearing the virtual tour.  I'm concerned that some browsers may behave poorly in response to an empty src attribute, and wondering if there is an alternative.

I prefer not to start over with a different plugin for the scrolling image.
Avatar of Gary
Gary
Flag of Ireland image

Use a background image on a div/span instead of an image.
Avatar of ddantes

ASKER

Thank you.  Could you please provide some specific code for that?
<div id="imagediv"></div>
<style>
#imagediv {
background:url('/somimage.jpg');
height:100px;
width:100px;
}
</style>

Open in new window

Avatar of ddantes

ASKER

I'm unsophisticated at coding -- sorry!  Here is the relevant code section of the page.  I don't see how to apply what you have instructed, in order to avoid the empty src attribute...

<ul id=scroller>
     <li><img id="image1" src="" Alt=""  Title="Pause Virtual Tour"></li>
</ul>

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') != -1)) {
    document.getElementById("image1").src="images/StWVTsmall.jpg";
} else {
    document.getElementById("image1").src="images/StWVT.jpg";
}
</script>
<ul id=scroller>
     <li><div id="image1"  Title="Pause Virtual Tour"></div></li>
</ul>

<script type="text/javascript">
var imgsrc= document.getElementById('image1');

if ((navigator.userAgent.indexOf('iPhone') != -1)) {
    imgsrc.style.background="images/StWVTsmall.jpg";
} else {
    imgsrc.style.background="images/StWVT.jpg";
}
</script> 

Open in new window

You will need to give the div a width and height.
Avatar of ddantes

ASKER

Thank you.  I did my best to copy that code to where it belongs, but nothing appears on the page, except the background.  http://mauitradewinds.com/Test/StWVTx.htm
Page Not Found
Avatar of ddantes

ASKER

I click that link and I see an empty page with beige, textured background.
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ddantes

ASKER

Thank you for persisting.  After the replacement, there is a momentary icon for a missing image, then just background.
http://mauitradewinds.com/Test/StWVTx.htm
You need to set an height/width
If you need to do this when setting the background then just add etc

$('#image1').css("height","100px")
Avatar of ddantes

ASKER

http://mauitradewinds.com/Test/StWVTx.htm     Nice!   Thanks for your patience.
I overlooked something about the <noscript> tag, but it's working now.
Avatar of ddantes

ASKER

Gary:  on iPhone there are two scolling images, one above the other.
Weird...
Try moving the scroller js below the navigator js.
I cannot see any reason for the two scrollers, and it's a bit hard to debug on an iphone.

There's also a stray > tag before your tracking code
Avatar of ddantes

ASKER

Moving that scroller js resulted on no image on the page.  I removed the stray >.
Looking at the source the ul is appearing twice - why I don't know...?
Change the code to this and let me know when done, it maybe a bug with the scroller and using a div but doesn't explain why it works in desktop browsers.

<ul id=scroller>
     <li><img id="image1" src="" Title="Pause Virtual Tour"></li>
</ul>

<script type="text/javascript">
if (navigator.userAgent.match(/(iPhone)/)) {
$('#image1').attr("src","images/StWVTsmall.jpg")
} else {
$('#image1').attr("src","images/StWVT.jpg")
}
</script>
Avatar of ddantes

ASKER

OK, it's done.
Must be a bug (iphone/safari) that it only hides a cloned img and nothing else
You will have to stick with an img and use a blank 1px image as a src when the page is initialised.
Avatar of ddantes

ASKER

Understood.  However, when I tried loading a 1px transparent png in that src attribute, the scroller didn't appear on desktop or iPhone.

It seems, if there is no actual image, but only a reference to one, then the scroller works.  So, which is the lesser evil:  a broken link to a missing image, or an empty src attribute?
Avatar of ddantes

ASKER

Gary: just checking to see if you got my last comment?
Was busy - back now, was just thinking why not use a panorama viewer instead of a slider?
Will look back at the code now.
Try this for src
data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D

If that doesn't work then try
#

Will keep looking at it.
Avatar of ddantes

ASKER

They both work, so I opted for "#".

Thanks for sticking with the question after points were already awarded.
Stick with the first one, the second one makes a call for the image (that doesn't exist)

Also why not use a panorama viewer?
Avatar of ddantes

ASKER

OK, but link validators report "unrecognized protocol" with that code.  Is that acceptable?

Regarding panorama viewers, I've tested tens of alternative methods of displaying this.  It's a large image, and the cross-browser performance of this plugin seems to outperform.
What link validators?
Base64 (data:image) is totally valid html.
Avatar of ddantes

ASKER

Yes, W3C validates the code.  But when I check links with Inspyder InSite, for example, it reports that error.  If it's not going to create any nuisance for visitors, I'm OK with that.
Don't worry about it, it's just expecting a url.
Avatar of ddantes

ASKER

Good news.  Thanks.