[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Onclick Disable

Posted on 2009-04-30
9
Medium Priority
?
846 Views
Last Modified: 2012-08-13
Hi All,

I just ran into small issue that maybe some of you can help me on.

Currently I just got my background to be clickable but any link on top of the background ends up opening up the background link and it's own link.

So basically I'm trying to hyperlink the background (which I got working) while avoiding everything within my Frame to make the same JS  onClick Call.
<!--Skin Start-->
<div id="dropshadow" onClick="skintarget()">
 
     <div id="frame"> 
          <!--all body elements are located in this area-->
     </div>
 
</div>
 
 
<!--------- External JS calls --------->
function skinTarget()
{
  fwnd = window.open('http://www.norelco.com');
  fwnd.focus();
}
document.getElementById('dropshadow').onclick=skinTarget;
document.getElementById('dropshadow').style.cursor="pointer";

Open in new window

0
Comment
Question by:rurth24
  • 4
  • 3
  • 2
9 Comments
 
LVL 2

Expert Comment

by:td234
ID: 24274168
You would have to add the same onClick method on any elements in the foreground.
0
 

Author Comment

by:rurth24
ID: 24274287
td234,

How do you disable the onClick for foreground elements?


<div id="frame"> 
          <!--all body elements are located in this area-->
</div>
 
 
 
function disableTarget()
{
  <!-- disable onclick code -->
}
document.getElementById('frame').onclick=disableTarget;

Open in new window

0
 
LVL 2

Expert Comment

by:td234
ID: 24274324
You would not disable it, you would have to put elements on top of the background and give them their own onClick. Thus, hiding the background onClick, but you can not selectively disable areas that have an onClick. I would not recommend the method yo have chosen. There is probably a better way to have large areas clickable.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:rurth24
ID: 24274390
Got any other ideas on how to make backgrounds clickable without effecting foreground elements?

0
 
LVL 2

Expert Comment

by:td234
ID: 24274519
0
 
LVL 10

Expert Comment

by:bugada
ID: 24275012
what you're experiencing is called "bubbling". If you dont' want that internal links will execute the onclick event of the container just put the stopBubble() function on their onclick function:


   function stopBubble(e) {
      if (e && e.stopPropagation) 
         e.stopPropagation(); // W3C compliant
      else
         window.event.cancelBubble = true; //IE
   }
 
<div id="dropshadow" onClick="skintarget()">
 
     <div id="frame"> 
         <a href="#" onclick="stopBubble();">AAA</a>
     </div>
 
</div>

Open in new window

0
 
LVL 10

Accepted Solution

by:
bugada earned 2000 total points
ID: 24275160
In addition, if you can't alter the internal code, for example in case of inlcusion, you can avoid the stobBubble function, adding few lines to your original function. This code will check the id of the originating element so you can execute your code only if you element is the background div.

Remember to add the "e" parameter to the funcion to be cross browser compatibile.


function skinTarget(e)
{
      e = e || window.event;
      var elem = e.target || e.srcElement;
      
      if (elem.id == "dropshadow")  {
          fwnd = window.open('http://www.norelco.com');
          fwnd.focus();
      }
}

Open in new window

0
 

Author Comment

by:rurth24
ID: 24279433
Hey bugada,

Thanks for the help...

I tried the code below and it didn't work. I'm still getting norelco site to popup regardless of where I click in the frame.

I also tried a variation of

<div id="frame" onclick="stopBubble();">
<div id="frame" onclick="stopBubble(e);">

I'm about to try the second part you posted... I'll let you know the outcome.
function skinTarget()
{
  fwnd = window.open('http://www.norelco.com');
  fwnd.focus();
}
 
document.getElementById('dropshadow').onclick=skinTarget;
document.getElementById('dropshadow').style.cursor="pointer";
 
function stopBubble(e) {
      if (e && e.stopPropagation) 
         e.stopPropagation(); // W3C compliant
      else
         window.event.cancelBubble = true; //IE
   }
 
<!------------------------------------------>
 
<div id="dropshadow" onclick="skinTarget();">
            <div id="frame" onclick="stopBubble();">

Open in new window

0
 

Author Comment

by:rurth24
ID: 24279466
The second piece of code you posted seems to work but I haven't tested it across all browsers yet.. more to come.

Thanks again.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 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