Solved

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

Posted on 2011-03-14
12
338 Views
Last Modified: 2012-06-21
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
Comment
Question by:jmcreative
  • 7
  • 4
12 Comments
 

Author Comment

by:jmcreative
ID: 35134910
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
 
LVL 2

Assisted Solution

by:jainnaveen
jainnaveen earned 150 total points
ID: 35135270
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
 
LVL 9

Accepted Solution

by:
Roman Gherman earned 350 total points
ID: 35135612
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
 

Author Closing Comment

by:jmcreative
ID: 35138316
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
 

Author Comment

by:jmcreative
ID: 35139241
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
 

Author Comment

by:jmcreative
ID: 35139292
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35139500
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
 

Author Comment

by:jmcreative
ID: 35140019
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
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35140055
you're welcome,

You can find me on: http://extremedev.blogspot.com
0
 

Author Comment

by:jmcreative
ID: 35151679
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
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 35154789
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
 

Author Comment

by:jmcreative
ID: 35156445
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Read about why website design really matters in today's demanding market.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

706 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

12 Experts available now in Live!

Get 1:1 Help Now