• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 354
  • Last Modified:

write a div (or modify display from none to block ) IF an img with a specific name is present

without seeing html code, samples and such... I am curious if it is possible to trigger an event IF an image is rendered in the browser.

IF <img src="/img/subCat.gif"> EXISTS
document.write("div id="rightFloat")>
document.write("html contents")>
document.write("/div")>

the img does not have an ID
the img does not have a name=""

I need to see if the img src CONTAINS subCat.gif
If that exists ANYWHERE on the page...
then I need to write out the divs above.

The only other option is to modify the div to have display=none or display=block

However the IF condition for the javascript must be met.

I spent good money on trying other ways, so i'd only expect response if you know this is possible with knowing a SPECIFIC named image is present on screen/rendered in browser.

I have incredibly limited access to programming on a system that imports a header, left, footer into a disastrous CMS type commerce system.

Through javascript I am trying to cross promote but don't have access to the asp files.
On the group of pages I need this <div> to appear.. a specific image appears as a graphic.

Can this be done?
0
jmcreative
Asked:
jmcreative
  • 7
  • 4
2 Solutions
 
jmcreativeAuthor Commented:
For what it is worth.. I tried this route...

<div id="rightFloat" style="display: none">
<a href="#link"><img src="rightFloat.jpg"></a>
</div>

<script language="javascript" type="text/javascript">

var theform = document.forms('results_Content');

if(theform !=undefined && theform.elements !=undefined && theform.elements.length > 0)
{
      document.getElementById('rightFloat').style.display = "block";
      alert("div is now BLOCK");
}else{
      document.getElementById('rightFloat').style.display = "none";
      alert("div is now NONE");
}
</script>

NOTE: THe form <form name="results_Content"> DOES exist.. however this solution failed because the form element ON PAGE exists but is empty. it has no elements.. just is an empty form tag wrapped around table tags.

Additionally - I tried another route.. and that was using the location.href - but the urls turn out to not have any unique variables.

So the only item that is unique on the page is a form with NO form elements so I suppose DOM says that's undefined

And a lonely image "subCat.jpg" in a
<img src="subCat.jpg"> tag.

That's it unfortunately. Can javascript say "Hey - that's on the page - display=block or Hey - that's not on the page - display=none

Help is greatly appreciated since I am not a javascript person and have reached my limit here.
0
 
jainnaveenCommented:
Hi IMC,

you can acheive this using JQuery,

    <div id="rightFloat" >
        <a href="#link"><img src="rightFloat.jpg" alt="" /></a>
    </div>
            $(document).ready(function () {
                  var existing_image = $("#rightFloat a img").attr("src").toString();
                  if (existing_image.search("rightFloat") != -1) {
                        $("#rightFloat").css({ 'display': 'block' });
                  }
                  else
                        $("#rightFloat").css({ 'display': 'none' });
                  return false;
            });

0
 
Roman GhermanCommented:
Hi,

You can use jQuery for that like this:
<img src="/img/subCat.gif">

if ( $('img[src = "/img/subCat.gif"]').length)
{
//Your code here if the image with that src exists
.....
}

--------------------
You can find me on: www.extremedev.blogspot.com

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jmcreativeAuthor Commented:
Both solutions accurate and very helpful.
roma1123 was however exactly what I needed and what I ended up using due to simplicity


if ( $('img[src = "/titles/subcat.gif"]').length)
{
//if the image with that src exists
document.getElementById('rightFloat').style.display = "block";
}else{
      document.getElementById('rightFloat').style.display = "none";
}
0
 
jmcreativeAuthor Commented:
I have a question regarding the above.
I was so excited I accepted and awarded points but then fired up IE and noticed it is not showing in IE. Ahhh good old IE.

However - what on earth would cause this div never to show in IE ?

I noticed that I had to put the div in the header file that was included and the script in the footer file for the solution to work and in chrome and firefox it's perfect. IE the div does not ever appear.

In the header
    <div id="rightFloat" style="width:200px;float:right;position:absolute;top:200;right:10;margin-left:10px;display:none;">
        <a href="PROTECTION.aspx">
<img src="Floater_FallTech.jpg"></a>
    </div>
   
In the Footer ( the solution accepted )
<script language="javascript">
if ( $('img[src = "/customer/tabonutest/images/titles/subcat_t.gif"]').length)
{
//if the image with that src exists
document.getElementById('rightFloat').style.display = "block";
}else{
      document.getElementById('rightFloat').style.display = "none";
}
</script>

Does the guys who answered (or anyone)  have any idea why firefox and chrome would render this but the div never appears in IE?
0
 
jmcreativeAuthor Commented:
Addition
I added a document.write ("I work") and an document.write ("I am the else")

and output in chrome and firefox with the above solution is "I work"

and output in IE is actually "I am the else"

I thought it may have been CSS.. so it appears my question is specifically
The answer I accepted - why would this choke in IE and IE only trigger the else on this statement?

if ( $('img[src = "/customer/tabonutest/images/titles/subcat_t.gif"]').length)

(Admins - if I need to open a new question to award points, I will do so, I thought it was most relevant to here. Can I award more points if this answer is explained and solved in here?)
0
 
Roman GhermanCommented:
It works for me,
You are doing something wrong:

see here:
<!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>
     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

</head>
<div id="rightFloat" style="width:200px;float:right;position:absolute;top:200;right:10;margin-left:10px;display:none;">
        <a href="PROTECTION.aspx">
<img src="Floater_FallTech.jpg" /></a>
    </div>
    <img src='/customer/tabonutest/images/titles/subcat_t.gif' />
    <script language="javascript">
        if ($('img[src = "/customer/tabonutest/images/titles/subcat_t.gif"]').length) {
            //if the image with that src exists
            document.getElementById('rightFloat').style.display = "block";
        } else {
            document.getElementById('rightFloat').style.display = "none";
        }
</script>
</html>

Open in new window


You can find me on: www.extremedev.blogspot.com
0
 
jmcreativeAuthor Commented:
That's why I thought I would ask to check. I posted the code I was using and it's dead on.

However your example made me think.. let me check the jquery version.. you were pointing to 1.4 and I was pointing to a 1.3.. but that wasn't issue. You example worked with both.

Then I thought.. let me check doc type...
my system is outputting
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
your example uses the proper with the reference to the .dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Switching that line breaks jquery in IE ONLY !

Odd.. but I guess I have to figure out a way around it. Who would have figured that reference to the .dtd would prevent jquery from running that little script when I'm running jquery in so many other places successfully. Perhaps it has something do to with switching styling real time? Thought it worth noting.

thank you for your time. I may open that as an individual question because I am sure curious why this would happen.
THanks again!!!
0
 
Roman GhermanCommented:
you're welcome,

You can find me on: http://extremedev.blogspot.com
0
 
jmcreativeAuthor Commented:
By the way - Since this is so relevant... here was a solution offered on a new question...

Try and use the ends-with selector. See http://api.jquery.com/attribute-ends-with-selector/
Perhaps also check for length > 0. Because it returns the jquery object which always have a length property. Length being the number of elements matching the criteria.


if ($('img[src$="justj.jpg"]').length > 0)

This added into the solution you offered roma solved the IE/Doctype issue
0
 
Roman GhermanCommented:
wow,

Thanks, worth knowing, however I can't understand why it didn't work with different IE/Doctype - this is odd.

----------------------
You can find me on: http://extremedev.blogspot.com
0
 
jmcreativeAuthor Commented:
It's not even "doctype" change.
I can understand MAYBE switching from transitional to strict or something.
But referencing the transitional .dtd file or not break things?

I was able to recreate it exactly duplicating your solution removing the .dtd in IE 8.
I suppose I don't really understand the .dtd file reference and take for granted what it does.
Definitely worth knowing.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 7
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now