[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
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
Medium Priority
?
352 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 600 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 1400 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
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.

 

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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

649 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