|
JavaScript - Why Onmousedown Event Works For Hidden Div?
Hello,
If you will open: joketube.tv (please use admin as username and admin as password) and have a look on the top menu you will find UPLOAD link. Please click on it and you will see 'popup window'. Everything is ok with except that all parts of the window is dragable... I was expecting following. After placing some container DIV element (none transparent) with higher z-index over dragable background DIV. This region (with higher z-index) would become NONE dragable! BUT what I got is that even if DIV is hidden behinde other DIV elements, onmousedown is still working for that hidden DIV. Why this happened and how can I solve this problem? Thank you in advance for any suggestion Similar TutorialsI have some code which looks like this. Code: <script type="text/javascript">
function links(){
var links=document.getElementsByTagName("A");
for(var i=0;i<links.length;i++){
links[i].onmousedown=function(i){
return Showalert(links[i]);
};
}
}
function Showalert(link){
alert("link: "+link);
}
</script>
What I want to know is how I can pass the number which 'i' is of the current link being clicked so like this - links hi // i = 0 hello // i = 1 dude // i = 2 so from the for loop I want the i to be passed into the function which "links[i].onmousedown" is outputting so when the user clicks any link on the page the function within the mousedown call can read the number of the link? can anyone help? EDIT: Don't worry I've done it. When a user pushes their mouse down on a DOM element I want to allow them to move it, so I would like to setup an on mouse move function. The code i have is: Code: var newHeader = document.createElement("div");
newHeader.id = "header" + tabID;
newHeader.className = "windowHeader";
newHeader.onmousedown = 'desktop.onmousemove = moveWindow('+tabID+');';
newHeader.onmouseup = 'desktop.onmousemove = null;';
newWindow.appendChild(newHeader);
However it doesn't work hence why I'm here... Any help appreciated! on my page: http://www.jbiddulph.com/john-drag.html I want to be able to show the TOP and LEFT position on the textboxes below when I move the box?! Please help?! thanks J I have 9 boxes which I can drag around an invisible grid however when the onMouseDown function is called for the first time on each of the boxes, they behave erratically, then once all boxes have been clicked once, the entire script works as it should. I've tried using default values when declaring the variables however it doesn't seem to do anything. Does this happen with anyone else, anything obvious I'm missing. Code: <html>
<head>
<script language="javascript">
var x;
var y;
var org_top;
var org_left;
var diff_org_top;
var diff_org_left;
var element;
var element2;
var being_dragged = false;
var newleft;
var newtop;
function mouse_move(event)
{
if(event.offsetX || event.offsetY)
{
x=event.offsetX;
y=event.offsetY;
}
else
{
x=event.pageX;
y=event.pageY;
}
if(being_dragged = true)
{
document.getElementById(element).style.top = y-diff_org_top +'px';
document.getElementById(element).style.left = x-diff_org_left +'px';
}
}
function mouse_down(ele_name)
{
being_dragged = true;
element = document.elementFromPoint(x, y).id;
org_top = document.getElementById(element).style.top;
org_left = document.getElementById(element).style.left;
diff_org_top = y-org_top.substring(org_top.length-2,org_top);
diff_org_left = x-org_left.substring(org_left.length-2,org_left);
}
function mouse_up()
{
being_dragged = false;
newtop = Math.floor((y-diff_org_top+100)/200) * 200;
newleft = Math.floor((x-diff_org_left+100)/200) * 200;
if (newtop<0)
{
newtop = 0;
}
else if (newtop>400)
{
newtop = 400;
}
if (newleft<0)
{
newleft = 0;
}
else if (newleft>400)
{
newleft = 400;
}
document.getElementById(element).style.display = 'none';
if (document.elementFromPoint(newleft+100, newtop+100).id != '')
{
element2 = document.elementFromPoint(newleft+100, newtop+100).id;
document.getElementById(element2).style.top = org_top;
document.getElementById(element2).style.left = org_left;
element2 = null
}
document.getElementById(element).style.display = 'block';
document.getElementById(element).style.top = newtop +'px';
document.getElementById(element).style.left = newleft +'px';
element = null;
}
</script>
<style type="text/css">
.box
{
float:left;
display:block;
width:190;
height:190;
margin:5;
position:absolute;
}
.red
{
background:red;
top:0;
left:0;
}
.blue
{
background:blue;
top:0;
left:201;
}
.yellow
{
background:yellow;
top:0;
left:401;
}
.green
{
background:green;
top:201;
left:0;
}
.violet
{
background:violet;
top:201;
left:201;
}
.orange
{
background:orange;
top:201;
left:401;
}
.maroon
{
background:maroon;
top:401;
left:0;
}
.lime
{
background:lime;
top:401;
left:201;
}
.indigo
{
background:indigo;
top:401;
left:401;
}
</style>
</head>
<body onMouseMove="mouse_move(event)">
<div id="one" class="red box" onMouseDown="mouse_down('one')" onMouseUp="mouse_up()">
</div>
<div id="two" class="blue box" onMouseDown="mouse_down('two')" onMouseUp="mouse_up()">
</div>
<div id="three" class="yellow box" onMouseDown="mouse_down('three')" onMouseUp="mouse_up()">
</div>
<div id="four" class="green box" onMouseDown="mouse_down('four')" onMouseUp="mouse_up()">
</div>
<div id="five" class="orange box" onMouseDown="mouse_down('five')" onMouseUp="mouse_up()">
</div>
<div id="six" class="violet box" onMouseDown="mouse_down('six')" onMouseUp="mouse_up()">
</div>
<div id="seven" class="maroon box" onMouseDown="mouse_down('seven')" onMouseUp="mouse_up()">
</div>
<div id="eight" class="lime box" onMouseDown="mouse_down('eight')" onMouseUp="mouse_up()">
</div>
<div id="nine" class="indigo box" onMouseDown="mouse_down('nine')" onMouseUp="mouse_up()">
</div>
</body>
</html>
I have created a drag script and am having a problem with the cursor. When I hover over the div, the cursor becomes "move" as I want it to be. But if I click, then drag it changes to the I-beam cursor. I am wondering what I can do to get it to stay "move" or whatever I'd like it to be. I know things like onselectstart, etc, but that doesn't seem to do anything. Thanks for your time.
Hi forum, I am trying to attach an event to a dynamically produced button, and then use stopPropagation and preventDefault. Code: function chapter12_nodeOne() {
//create an element
var element = document.createElement('input');
//set some attributes
element.setAttribute('type', 'button');
element.setAttribute('value', 'submit');
element.setAttribute('id', 'myBtn');
//appendd the element into a DIV
document.getElementById('myDiv').appendChild(element);
//uses EventUtil to attach an event listener
EventUtil.addHandler(element, 'click', function() {
alert('event attached');
});
var flag = confirm('prevent default behavior of button?');
if (flag) {
var el = document.getElementById('myBtn');/////////////////////////(1)
var ev = el.onclick;
}
}
var EventUtil = {
addHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = null;
}
}
};
But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?! PS:the event is attached, when I click on the button I get an alert message is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event. for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked. thanks I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though. How can retrieve the clientX and clientY in ondrag event? Hi all I believe this to be a JS quesiton, but perhaps there is something here of CSS too? I have an "ecard" which is: - a <div id="outer_ecard"> wrapping an <iframe>... - is hidden by default (via a JS function that fires onload of the parent doc), .. - that gets its display and visibility turned on when the user clicks a link in the parent doc, ... - and then gets its display and visibility turned off again via a call to that same JS function in the parent doc that hid it in the first place by default. here is just the relevant snip of the hiding JS function - Code: elementToSet.style.display = "none"; elementToSet.style.visibility = "hidden"; everything works fine, *BUT* this issue: after the <div> disappears (the 2nd time, when the above snip is triggered in the iframe's parent via an onload event in the iframe doc)... then hyperlinks (in the parent file) that are geographically positioned underneath the <div id="outer_ecard"> do not work (i.e. they still think the ecard div is sitting on top of them (z-index:1). Can anyone advise me here? I need the links underneath the ecard to behave as though that div was never there. Thanks! -Govinda After searching the web most of the day, nothing has resolved this issue: Code: <!-- ALERT IS NEVER HIT -->
<html>
<input type="hidden" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info').value;
alert(me);
</script>
</html>
Code: <!-- ALERT SAYS "null" -->
<html>
<input type="hidden" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info');
alert(me);
</script>
</html>
Code: <!-- WORKS GREAT, BUT I NEED THE INPUT FIELD HIDDEN -->
<html>
<input type="text" id="info" name="info" value="testInformation"/>
<script type="text/javascript">
var me = document.getElementById('info').value;
alert(me);
</script>
</html>
Any idea how I can keep the input value "hidden" and have javascript still see the value? And yes, I've even tried using the "defer" method. Hello. The link below is the result of a product search on a website. It displays 2 results. However, the actual results (picture & information) that are displayed on the web page are not present in the "Page Source". For example, if you search the page source for the string '860723' (which is one of the product numbers visible on the web page) it is not there. What is going on here? It looks to me like dummy images & information in the HTML are first loaded by the browser, and then that dummy info gets replaced by the real information via a javascript function. Is that what's going on? http://www.lightsamerica.com/metro/s...mber:SL9469-8; I'm trying to retrieve that information by downloading the source in my PHP program. The problem is that the information I want isn't present in the source. It stands to reason that the information is somehow being sent to the browser because I can see it... any ideas? Thanks for your time, -Scott Need to append a hidden value to a floating div that is made via javascript. I tried the most obvious way but I am getting mismatch error in debug. .HTML Code: <input type="hidden" id="desc1" value="blah blah blah" /> .JS Code:
var item;
var image;
var description;
function one(){
item = document.getElementById("product1");
image = document.getElementById("i1");
description = document.getElementById("desc1");
expand();
}
function expand() {
//changes css of the div
item.innerHTML = "";
item.style.position = "absolute";
item.style.top = "27%";
item.style.left = "21.3%";
item.style.width = "952px";
item.style.height = "610px";
item.appendChild(image);
image.height = "300";
image.width = "400";
image.align = "left";
image.id = "cenimage";
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "form.html");
ifrm.setAttribute("frameborder", "0");
ifrm.setAttribute("scrolling", "no");
ifrm.style.width = 950+"px";
ifrm.style.height = 300+"px";
item.appendChild(ifrm);
// mismatch error !!
var x = description.value;
item.appendChild(x);
}
Hey guys! How are ya? Gettin' right to the point, I need a help! I already created a javascript code to hide my div when click on close "[x]". What I need to do is get it movin' around the website here's the code: it's between <head></head> Code: <script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'visible';
}
else { // IE 4
document.all.hideShow.style.visibility = 'visible';
}
}
}
</script>
and it's between <body></body> Code: <div id="hideShow"> <img src="../imagens/tela01CQ_07.jpg" alt="teste"/><a href="javascript:hidediv()">[x]</a></div> and it's in CSS Code: #hideShow {
position:absolute;
margin: 300px 110px;
}
thx! hello, This seems very basic, but I am running into a complication. What I would like to do is check if a certain div is displayed or hidden (really doesnt matter which) then set a map zoom level based upon that. here is my current function. function closeDirections(){ gdir.clear(); if(document.getElementById("river").style.display="none"){ map.setZoom(16); hideID('river'); showID('main'); } if(document.getElementById("main").style.display="none"){ map.setZoom(12); hideID('main'); showID('river'); } } Also here is a link to my map, just in case. map I have tried several variations, but from what I can tell with every instance, it only examines the first and never considers the second "if". I thought to rememdy this issue by using if/else...same issue. The only thing I could think is a nested if statements, but I am not sure what to use as a parent if. I have searched for a while, but cannot seem to find something like an .is_hidden(). Something that I could see if its true/false. Any help would be very much appreciated. My website contains a ton of hidden divs. I thought this would make everything easier for the user because now they can stay on one page and view tons of content but it is making my page load very slowly. Is there a way to not load the pages hidden content until the user clicks the link and makes it visible? I see various tutorials online but I am having trouble learning how to translate that to my site. So again this content is hidden, and an onclick makes it visible, but I would like the onclick to make it visible and load for the first time. Thank you for reading, link to site and code below. Source: By clicking the info or photo tabs you will see the toggle for hidden divs Code for my tabs: PHP Code: <?php if( $page <= 1 and !$public ) { ?> <div id="mngl-profile-tab-control"> <ul> <li id="mngl-board-tab-button" class="dark"><a href="javascript:mngl_set_active_tab('board');"><span><?php _e('Board', 'mingle'); ?></span></a></li> <li id="mngl-info-tab-button"><a href="javascript:mngl_set_active_tab('info');"><span><?php _e('Info', 'mingle'); ?></span></a></li> <li id="mngl-log-tab-button"><a href="javascript:mngl_set_active_tab('log');"><span><?php _e('Log', 'mingle'); ?></span></a></li> <li id="mngl-fav-tab-button"><a href="javascript:mngl_set_active_tab('fav');"><span><?php _e('Favorites', 'mingle'); ?></span></a></li> <li id="mngl-display-photo-tab-button"><a href="javascript:mngl_set_active_tab('display-photo');"><span><?php _e('Photos', 'mingle'); ?></span></a></li> <li id="mngl-video-tab-button"><a href="javascript:mngl_set_active_tab('video');"><span><?php _e('Videos', 'mingle'); ?></span></a></li> </ul> </div> <?php } ?> Code for one of the tabs content. The class mngl-hidden is just a display:none PHP Code: <div id="mngl-fav-tab" class="mngl-profile-tab mngl-hidden"> <div style="color:#171717; font-weight:bold;"><?php echo $user->first_name . "'s Favorites >> For Motivational Posts You Enjoy"?></div> <?php //require_once(MNGL_MODELS_PATH . "/MnglUser.php"); foreach ($fav_posts as $fav_post) { $author = MnglUser::get_stored_profile_by_id($fav_post->author_id); $owner = MnglUser::get_stored_profile_by_id($fav_post->owner_id); if($author and $owner) $this->display_board_post($fav_post,$public); } /*$this->display_board_post('5705',$public);*/ //echo count($fav_posts).'--'.$page_size; ?> <?php if( count($fav_posts) >= $page_size ) { ?> <!-- <div id="mngl-older-posts"><a href="javascript:mngl_show_older_posts( <?php echo ($page + 1) . ",'" . (($public)?'activity':'boards') . "','" . (($public)?$mngl_user->screenname:$owner->screenname) . "'"; ?> )"><?php _e('Show Older Posts', 'mingle'); ?></a></div>--> <?php } ?> </div> Javascript that Sets Active Tab Code: function mngl_set_active_tab( tab )
{
jQuery('#mngl-profile-tab-control li').removeClass('mngl-active-profile-tab');
jQuery('#mngl-' + tab + '-tab-button').addClass('mngl-active-profile-tab');
jQuery('.mngl-profile-tab').hide();
if((tab != 'board') && (tab != 'fav')){
jQuery('.mngl-board-post').hide();
} else {
jQuery('.mngl-board-post').show();
}
jQuery('#mngl-' + tab + '-tab').show();
}
I have a script that brings up an overlay box onclick that needs to be on top of everything else on page, however I can't get it to show on top of the navigation tabs. I tried calling the overlay script at the very beginning of the head section as well as tried to call it at the end but it doesn't seem to matter. Is there something I can add to the script to force it on top of every other object on the page? I have a hidden field whose value is a text string, "xyz". I want to write the value to the page so that the user can see it but not edit it. Can't I just use document.write(form.field.value)? Why isn't it working?
Hi guys, I have a javascript drop-down navigation bar on my website. While I am creating the website, the drop-down have no problem overlaying the javascript (embed with flash) photo gallery in Firefox. But when I tested it in IE, it did not overlay the javascript script and the drop-down was covered by the photo gallery instead. I tried methods like Z-index, using Div etc but it still doesn't work on Internet Explorer. I tested on Safari, Opera and Firefox doesn't seem to have any problem. Here is my links to my CSS use for my website. Really need help, have no idea what I did wrong. Can anyone advise me what to do? Thank you so much!!!! Much appreciated!!! Working Website: http://17thstop.sg/demo CSS Files: http://17thstop.sg/demo/styles.css http://17thstop.sg/demo/css/default.advanced.css http://17thstop.sg/demo/css/default.css http://17thstop.sg/demo/css/dropdown.css Code: <!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">
<!-- #BeginTemplate "index.dwt" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" ></link>
<link rel="icon" type="image/gif" href="animated_favicon1.gif" ></link>
<title>Four Musketters Studio</title>
<script type="text/javascript" src="gallery/swfobject.js"></script>
<!-- Menu CSS and JS -->
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
<!-- End of Menu and JS -->
</head>
<body>
<div id="content">
<h1><a href="index-blueprint.htm"><span>Four Musketeers</span> Studio</a></h1></div>
<!-- Start of Menu -->
<div id="contentmenu"><ul id="nav" class="dropdown dropdown-horizontal">
<li><a href="index.htm">Home</a></li>
<li class="dir">About Us
<ul>
<li><a href="about_us.htm">The Four Musketters</a></li>
<li class="dir">The Team
<ul>
<li><a href="darren.htm">Darren</a></li>
<li><a href="jon.htm">Jonathan</a></li>
<li><a href="hweek.htm">Hwee Key</a></li>
<li><a href="gavin.htm">Gavin</a></li>
</ul>
</li>
<li><a href="./">Clients</a></li>
<li><a href="./">Testimonials</a></li>
<li><a href="./">Press</a></li>
<li><a href="./">FAQs</a></li>
</ul>
</li>
<li class="dir">Services
<ul>
<li><a href="cne.htm">Event & Commercial Photography</a></li>
<li><a href="portrait.htm">Portrait Photography</a></li>
<li><a href="wedding.htm">Wedding Photography</a></li>
<li><a href="studio.htm">Rental of Studio</a></li>
<li><a href="./">Training & Consulting</a></li>
</ul>
</li>
<li><a href="gallery3/gllery.htm">Gallery</a></li>
<li><a href="./">Events</a></li>
<li><a href="./">Careers</a></li>
<li><a href="./" class="dir">Contact Us</a>
<ul>
<li><a href="contact.htm">Enquiry Form</a></li>
<li><a href="locationc.htm">Contact Us & Location</a></li>
</ul>
</li>
</ul>
</div>
<!-- End of Menu -->
<div id="content1">
<!-- #BeginEditable "BodyContent" -->
<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>
<!-- #EndEditable -->
<script type="text/javascript">
var fo = new SWFObject("gallery/autoviewer.swf", "autoviewer", "100%", "100%", "8", "#181818");
fo.addVariable("xmlURL", "gallery/gallery.xml");
//Optional Configuration
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
//fo.addVariable("xmlURL", "gallery/gallery.xml");
fo.write("flashcontent");
</script></div>
<div id="footer">
<p id="links">
Copyright © 2010 − Four Musketters Studio · Your Number 1 Choice.
</p>
<p>
<a href="#">Home</a>
<a href="#">Practice</a>
<a href="#">Attorneys</a>
<a href="#">Accidents</a>
<a href="#">News</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</p>
</div>
</body>
<!-- #EndTemplate -->
</html>
I have a simple script connect to a radio button. Based on which option, the matching div appears with a text box - and one with a radio button. If they change their mind and click another radio button, it'll switch to the new div, but keep the content in the old. How do I clear that out? I looked for a snippet, but they're all for clearing default text in a field when you click it. I want something a little different. Here's what I'm using: Code: <script>
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='hear']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
</script>
<input type="radio" name="hear" value="dcranch"> DC Ranch Community <br />
<input type="radio" name="hear" value="friend"> From a friend <br />
<div style="display: none;" id="dcranch" class="desc"> <input type="checkbox" value="Yes" name="resident" /> If so, are you a DC Ranch resident? )</div><br />
<div style="display: none;" id="friend" class="desc"> Name? <input type="text" name="how1" /></div><br />
What did I do wrong? I would like to have an anchor link with hidden text. When I click on the anchor link, I want to see a text drop below showing the Keep trying information. It keeps giving me "object expected" error message. What object I need to put in there. Thanks. Here is the code: Code:
<body>
<a href="#" onclick="showDiv('divFundamentals');return false;">Javascript Fundamentals</a>
<div id="divFundamentals" style="display:none;">
Basic - Javascript
Keep trying:
Keep trying
- Try hard 1
- Try hard 2
- Try hard 3
- Try hard 4
- Try hard 5
</div>
<script>
function showDiv(id)
{
$('#' + id).show();
}
</script>
</body>
|
|||||||