Solved

Avoiding an empty SRC attribute

Posted on 2013-06-04
30
285 Views
Last Modified: 2013-06-05
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.
0
Comment
Question by:ddantes
  • 15
  • 15
30 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39220288
Use a background image on a div/span instead of an image.
0
 

Author Comment

by:ddantes
ID: 39220308
Thank you.  Could you please provide some specific code for that?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39220314
<div id="imagediv"></div>
<style>
#imagediv {
background:url('/somimage.jpg');
height:100px;
width:100px;
}
</style>

Open in new window

0
 

Author Comment

by:ddantes
ID: 39220783
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>
0
 
LVL 58

Expert Comment

by:Gary
ID: 39220862
<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.
0
 

Author Comment

by:ddantes
ID: 39220922
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39220927
Page Not Found
0
 

Author Comment

by:ddantes
ID: 39220946
I click that link and I see an empty page with beige, textured background.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39221942
Replace
<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


with
<script type="text/javascript">
if (navigator.userAgent.match(/(iPhone)/)) {
$('#image1').css("background-image","url('images/StWVTsmall.jpg')")
} else {
$('#image1').css("background-image","url('images/StWVT.jpg')")
} 
</script> 

Open in new window

0
 

Author Comment

by:ddantes
ID: 39222900
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39222934
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")
0
 

Author Comment

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

Author Comment

by:ddantes
ID: 39223231
Gary:  on iPhone there are two scolling images, one above the other.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39223284
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
0
 

Author Comment

by:ddantes
ID: 39223307
Moving that scroller js resulted on no image on the page.  I removed the stray >.
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 58

Expert Comment

by:Gary
ID: 39223337
Looking at the source the ul is appearing twice - why I don't know...?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39223366
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>
0
 

Author Comment

by:ddantes
ID: 39223383
OK, it's done.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39223416
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.
0
 

Author Comment

by:ddantes
ID: 39223465
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?
0
 

Author Comment

by:ddantes
ID: 39223670
Gary: just checking to see if you got my last comment?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39223918
Was busy - back now, was just thinking why not use a panorama viewer instead of a slider?
Will look back at the code now.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39223973
Try this for src
data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D

If that doesn't work then try
#

Will keep looking at it.
0
 

Author Comment

by:ddantes
ID: 39224137
They both work, so I opted for "#".

Thanks for sticking with the question after points were already awarded.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39224153
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?
0
 

Author Comment

by:ddantes
ID: 39224177
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39224208
What link validators?
Base64 (data:image) is totally valid html.
0
 

Author Comment

by:ddantes
ID: 39224227
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39224239
Don't worry about it, it's just expecting a url.
0
 

Author Comment

by:ddantes
ID: 39224261
Good news.  Thanks.
0

Featured Post

Highfive Gives IT Their Time Back

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

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
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…

708 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