ddantes
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.
I prefer not to start over with a different plugin for the scrolling image.
Use a background image on a div/span instead of an image.
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>
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.inde xOf('iPhon e') != -1)) {
document.getElementById("i mage1").sr c="images/ StWVTsmall .jpg";
} else {
document.getElementById("i mage1").sr c="images/ StWVT.jpg" ;
}
</script>
<ul id=scroller>
<li><img id="image1" src="" Alt="" Title="Pause Virtual Tour"></li>
</ul>
<script type="text/javascript">
if ((navigator.userAgent.inde
document.getElementById("i
} else {
document.getElementById("i
}
</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>
You will need to give the div a width and height.
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
ASKER
I click that link and I see an empty page with beige, textured background.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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")
If you need to do this when setting the background then just add etc
$('#image1').css("height",
ASKER
http://mauitradewinds.com/Test/StWVTx.htm Nice! Thanks for your patience.
I overlooked something about the <noscript> tag, but it's working now.
I overlooked something about the <noscript> tag, but it's working now.
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
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
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","i mages/StWV Tsmall.jpg ")
} else {
$('#image1').attr("src","i mages/StWV T.jpg")
}
</script>
<ul id=scroller>
<li><img id="image1" src="" Title="Pause Virtual Tour"></li>
</ul>
<script type="text/javascript">
if (navigator.userAgent.match
$('#image1').attr("src","i
} else {
$('#image1').attr("src","i
}
</script>
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.
You will have to stick with an img and use a blank 1px image as a src when the page is initialised.
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?
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?
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.
Will look back at the code now.
Try this for src
data:image/gif;base64,R0lG ODlhAQABAA D/ACwAAAAA AQABAAACAD s%3D
If that doesn't work then try
#
Will keep looking at it.
data:image/gif;base64,R0lG
If that doesn't work then try
#
Will keep looking at it.
ASKER
They both work, so I opted for "#".
Thanks for sticking with the question after points were already awarded.
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?
Also why not use a panorama viewer?
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.
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.
Base64 (data:image) is totally valid html.
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.
ASKER
Good news. Thanks.