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
344 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: 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!

 

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

688 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