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
341 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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
 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

777 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