JavaScript - How: Make Only Part Of A Div Clickable?

Hello..

I have seen this somewhere, but I don't know how to make it - possibly with a JavaScript integrated with the HTML code to create a submit button.

What I want is once the page is loaded, I want the submit button to count down from 5 to 0, and when it's reached 0, the button is clickable - but before that, nothing happens when you click it obviously.

How can I obtain this?
Whether if it's created in JavaScript or jQuery doesn't matter, I use both...

Thanks

Hi,
Im having a weird issue...
I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable...

And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float

[it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...]

Code:

<script language="javascript" type="text/javascript">
        var floating_header = function() {

            this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];

            this.getXY = function(o) {
                var y = 0;
                var x = 0;
                while (o != null) {
                    y += o.offsetTop;
                    x += o.offsetLeft;
                    o = o.offsetParent;
                }
                return { "x": x, "y": y };
            }

            this.setheader = function() {
                if (window.header == undefined) {
                    floating_header();
                }
                var screenpos = this.scrollTop;
                var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight;
                if (screenpos > window.theady - 100 && screenpos < theady_max) {
                    window.header.style.position = 'absolute';
                    window.header.style.top = this.offsetTop;
                    window.header.style.display = 'block';
                    window.headerOffsetTop = this.offsetTop;
                }
                else {
                    if (screenpos != undefined && window.header != undefined) {
                        window.header.style.position = '';
                        window.header.style.top = '';
                        window.headerOffsetTop = undefined;
                        window.header = undefined;
                    }
                    else {
                        if (window.headerOffsetTop) {
                            window.header.style.position = 'absolute';
                            window.header.style.top = window.headerOffsetTop;
                            window.header.style.display = 'block';
                        }
                    }
                }
            }
            document.getElementById("divcn").onscroll = this.setheader;
            this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode;
            this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
        };
        floating_header();        
    </script>

I have created a slideshow before but I want to create a slideshow where a person clicks on a link and it goes to a certain picture which might have one or more links embedded into the picture something like this:

http://www.myeloma.org.uk/


any guides on how to do this?


help much appreciated

Hello all,

I am using an editable iframe to change the style of the text as a person enters text depending on what they type in. Sometimes the text needs to be a link, and while inserting a link works, I can't click on it. I was wondering if anyone knows how to get links in an editable iframe to click through. I've researched this for a while now without getting anywhere.

Right now I'm guessing that I need to somehow find out if the user is hovering over a link and turn "designMode" off for that section of text, or the whole iframe, I'm not completely sure.

Anyway, any help would be greatly appreciated!

Hi! Not sure if this is the right forum for this, but I'm using Javascript so it kinda made sense

I have some Javascript that is selecting text from a form textarea and copying it to the clipboard:

Code:

document.myForm.myTextarea.focus();
document.myForm.myTextarea.select();
document.execCommand( 'Copy' );

This works great. However there is a problem when I try to paste the text somewhere else. Assuming that the text that is being copied is a URL ( ie. http://www.google.com ), I would like it to be pasted as a link.

When I grab a URL from the address bar inside a web browser and paste it somewhere ( such as an e-mail ), it automatically shows up as a clickable link. When I put a URL into my form textarea and run the javascript, it gets pasted as a plain text ( ie. not underlined and not clickable ).

Why are these two different? I've tried running a program to see what is actually copied into the clipboard and I don't see any differences. There must be something that denotes the URL copied from the address bar as a link and therefore makes it clickable when pasted. Is there a way to force this in order to make what is copied to the clipboard from my form textarea a clickable link?

Thanks!

I have called a table through XML with four fields. One of them is Excel file name. I like to make a clickable link with Excel file name to open it.
XML code:

Code:

<?xml version="1.0" encoding="ISO-8859-1" ?> 
<searchable_index>
  <item name="Ana" title="Data" link="doc\ana.xls">Member</item> 
  <item name="Ana" title="Data" link="doc\ana.xls">Member</item> 
  <item name="Ana" title="Data" link="doc\ana.xls">Member</item> 
  <item name="Ana" title="Data" link="doc\ana.xls">Member</item> 
  </searchable_index>


Javascript code
document.write('<table border="1" style="width: 100%;">');
		document.write('<tr><th>name</th><th>title</th><th>link</th></tr>');
		for(var i=0; i<results.length; i++) {
		 document.write('<tr>');
		 document.write('<td>' + results[i].getAttribute("name") + '</td>');  
		 document.write('<td>' + results[i].getAttribute("title") + '</td>');
		 document.write('<td>' + results[i].getAttribute("link")" > + '</td>'); //<a href="url">Link text</a> 
		 
			 
			
			document.write('</tr>');
		}
		document.write('<table>');
		document.close();

My slideshow links will only open inside my inline frame. I'm sure there's something simple I need to change in the code to make it open full screen. Here is my code. Any help would be so much appreciated! Thank you.

Shawnel


<head>
<style type="text/css">
.style1 {
vertical-align: top;
}
</style>
</head>

<script type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="Images/Picture Box/PictureBox1.jpg"
var image2=new Image()
image2.src="Images/Picture Box/PictureBox2.jpg"
var image3=new Image()
image3.src="Images/Picture Box/PictureBox3.jpg"
var image4=new Image()
image4.src="Images/Picture Box/PictureBox4.jpg"
var image5=new Image()
image5.src="Images/Picture Box/PictureBox5.jpg"
//-->
</script>

<body style="margin-top: 0">

&nbsp;<a href="javascript:slidelink()"><img src="Images/Picture Box/PictureBox1.jpg" name="slide" border="0" width="539" height="314" class="style1" /></a>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",3000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="learnmore.htm"
else if (whichimage==2)
window.location="contactus.htm"
else if (whichimage==3)
window.location="hungerheroes.htm"
else if (whichimage==4)
window.location="donate.htm"
else if (whichimage==5)
window.location="volunteer.htm"
}
//-->
</script>

Hi im using this php code right here for a search function that opens url's in an iframe PHP Code:
$text = $_POST['text'];
switch($_POST['engine']) {
case 1:
      for($i=0;$i<strlen($text);$i++) { if($text[$i]==" ") { $text[$i]="+"; } }
      $data = "http://www.yahoo.com".$text;
      break;
case 2:
      $data = "http://www.google.com".$text;
      break; 


Code:

<FORM name="search" ACTION='search.php' METHOD='POST' target="frame">
				   <input TYPE='text' NAME="text" id="text" class="search" /> 
					   &nbsp;<font face="verdana">
					   <input type='submit' name="submit" value="Go" class="button" /><br />
					   Select Engine: </font><br />
					   <select name="engine" size="26">
                              
                              <option value="1">yahoo</option>
					                                <option value="2">google</option>
</select>
</form>

what i want to do is instead of using the option form i want to make clickable tables or divs, that when clicked opens the url in the iframe. can anybody help me with this?

Hello all,

I've been attempting to have a popup window open upon clicking a specific table cell. So far I've not been able to make any headway except that I'd like for the popup to be a Modal window.

Here's the code I have for the page so far:

Code:

<?
    include('include/queries/getCustomerOrderInfo.php');
	
	// now run the queries...
	if($_SESSION['issuperuser']){
		//var_dump($sqlGetOrderInfo);
	}
	$qryGetOrderInfo = mysql_query($sqlGetOrderInfo, $connection_id);
	
?>
<link href="css/dropshipetc.css" rel="stylesheet" type="text/css">
<span class="smokeytext bold letterspacing_1px">ORDER INFO</span>
<hr>
<div id="OrderInfoTableHeader" style="margin-top:10px; width:550px;">
	<table style="border-collapse:collapse; width:528px;" border=0>
		<tr>
			<!---<td style="width: 114px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">PO No.</td>--->
			<td style="width:  75px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">Status</td>
			<td style="width:  77px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">Item No.</td>
			<td style="width: 151px; border-bottom: 1px solid; border-right: 1px solid;" class="oi_tableheader">Tracking No.</td>
			<td style="width: 222px; border-bottom: 1px solid;" class="oi_tableheader">Shipped To</td>
			<!---<td class="oi_tableheader"></td>--->
		</tr>
	</table>
</div>
<div id="OrderInfoWrapper" style="overflow:auto; width:550px; height:575px;">
	<!---<table style="border-collapse:collapse; width:533px;" border=1>--->
	<table style="border-collapse:collapse; width:528px;" border=0>
		<?
			$lastPurchaseNumber = '';
			while ($thisRow = mysql_fetch_assoc($qryGetOrderInfo)){
				$thisShippedToName = $thisRow['soshpname'];
				$thisPurchaseNumber = $thisRow['sopurchno'];
				$thisItemNumber = $thisRow['solnsvptno'];
				if(strlen($thisRow['solnkitno']) > 0){
					$thisItemNumber = $thisRow['solnkitno'];
				}
				if(strlen($thisItemNumber) == 10){
					$thisItemNumber = substr($thisItemNumber, 0, 6);
				}
				switch(strtolower($thisRow['orderstatus'])){
					case 'returned' :
						$thisStatus = 'Returned';
						$cellClass = 'redbackground';
						break;
					case 'pending' :
						$thisStatus = 'Pending';
						$cellClass = 'yellowbackground';
						break;
					case 'processing' :
						$thisStatus = 'Processing';
						$cellClass = 'orangebackground';
						break;
					case 'shipped' :
						$thisStatus = 'Shipped';
						$cellClass = 'greenbackground';
						break;
					default:
						$thisStatus = 'PENDING';
						$cellClass = 'yellowbackground';
						break;
				}
				$thisTrackingNumber = $thisRow['upstrackno'];
				if($thisPurchaseNumber != $lastPurchaseNumber){
					$lastPurchaseNumber = $thisPurchaseNumber;
		?>
					<tr>
						<td colspan=4 style="border-bottom: 1px solid;" class="smokeytext bold">PO#<? echo $thisPurchaseNumber; ?>
						
						</td>
					</tr>
				<?}?>
				<tr>
					<!---<td style="width: 114px; border-bottom: 1px solid; border-right: 1px solid;"></td>--->
					<td style="width: 76px; border-bottom: 1px solid; border-right: 1px solid; text-align:center;" class="<?echo $cellClass; ?>"><? echo $thisStatus; ?></td>
					<td style="width: 77px; border-bottom: 1px solid; border-right: 1px solid; text-align:center;"><? echo $thisItemNumber; ?></td>
					<td style="width: 150px; border-bottom: 1px solid; border-right: 1px solid; text-align:center;"><? echo $thisTrackingNumber; ?></td>
					<td style="width: 226px; border-bottom: 1px solid;"><? echo $thisShippedToName; ?></td>
				</tr>
				
			<?}
		?>
	</table>
</div>

This is the table cell I need clickable:

Code:

<td colspan=4 style="border-bottom: 1px solid;" class="smokeytext bold">PO#<? echo $thisPurchaseNumber; ?></td>

ANY help would be greatly appreciated!

Hey all.. I just finished a semester at the local junior college in javascript programming. Didnt teach us very well, but I learned several basics. I have skills in several different aspects of programming now, but none as an expert by any means. Now, I am working on a project for my wife's non-profit that she is involved in, and an wanting to create a thumbnail sized picture 'band' at the top of my website, with images of things that she wants the user to be able to click on to pop up a bigger picture into a new window, a popup window, mind you. This 'image gallery', needs to be able to be clicked on to move the images to the left or to the right, and display, maybe 5 to seven images at a time in about a 100px height band. I have seen this on other websites before, and I have the software to do my own programming, and I 'should have' developed the skills by now, lol, but, I just need some help getting started in the right direction in knowing how to start out. Like, what do I need to accomplish to do this? I already have a div set up for the container for it. The website is using a combination of html, css, php, mysql and javascript.

Thank you;
Ice

I'm very new at this and have very limited HTML/Java Script knowledge, but since my designer is very busy, I thought I'd take a look at some of this coding and see if I can learn how to do certain things myself.

I'm trying to create a clickable slide show. I read all the instructions given on www.javascriptkit.com and created the following:

Code:

 Slide Show Code

<script type="text/javascript">// <![CDATA[
//preload images
var image1=new Image()
image1.src="http://www.moxiecouture.com/images/princesspettiset2.jpg"
var image2=new Image()
image2.src="http://www.moxiecouture.com/images/princesspettiset2.jpg"
var image3=new Image()
image3.src="http://www.moxiecouture.com/images/daddysprincesstutuonesielarge.jpg"
// ]]></script>
<p><a href="javascript:slidelink()"><img src="../images/princesspettiset2.jpg" border="0" alt="" width="50" height="75" /></a></p>
<script type="text/javascript">// <![CDATA[
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<3)
step++
else
step=1
setTimeout("slideit()",1800)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://moxiecouture.com/category_3/Petti-Sets.htm"
else if (whichimage==2)
window.location="http://moxiecouture.com/category_3/Petti-Sets.htm"
else if (whichimage==3)
window.location="http://moxiecouture.com/category_2/TuTu-One-Pieces.htm"
}
// ]]></script>

My issue with this is that it's not rotating the images. Of course, there is something I'm missing even though I tried to read the instructions carefully. Can anyone help me understand what I'm doing wrong?

Thanks!

So i purchased a template from template monster for wordpress.

http://www.templatemonster.com/demo/28861.html

On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link.

My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain.
---------------------------------------------------------------------
<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>


------------------------------------------------------------------------

Full code below


<div id="thumbs" class="navigation">

<ul class="thumbs noscript">

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" />

</a>

<div class="caption">

<div class="indent1">in grey</div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" />

</a>

<div class="caption">

<div class="indent1">in grey </div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li class="last">

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

</ul>

</div>



</div>

</div>

I got some updates on my progress... still no results.

(quoting my previous thread)

Quote:
I need desperate help with a homework!

Here's the task:

First of all I need to define an array of 3 elements. Each element is associated with a different first name.

Then I shall realize a first function to add a name in the table. The function takes as parameter the table previously created and return it containing an additional element whose value is the name that the visitor wants to add. I must use the dialog box prompt so that the user can specify the name he wishes to add in the table.

I shall also perform a second function which will display the name that is included in the different array elements. This function will also take the table in parameters and proceed with setting the display name with a dialog box alert type that contains all of the name separated by ";".


Here's what I've done so far:
Code:

<html>
<head>
<title>
Task #4
</title>
</head>
<body>
<script language="javascript">
function addName()
{
	var names=new Array(3);
	names[0]="John";
	names[1]="Patrik";
	names[2]="Jane"; 
	document.open();
	document.write(names[3].join());
	document.close(); 
	if(names==new Array);
	{
	prompt("What name do you want to add?"+"");
	}
        return addName
}
</script>
<noscript>
<h1>
You're browser doesn't support Javascript
</h1>
</noscript>
</body>
</html>

Updates:

Code:

<html>
<head>
<title>
Task #4
</title>
<script language="javascript">
function addName()
{
	var names=new Array(3);
	names[0]="John","Brian";
	names[1]="Patrik","Gene";
	names[2]="Jane","Sophie"; 
	document.open();
	document.write(names.join(";"));
	document.close(); 
	if(names==new Array);
	{
		var addToArray=prompt("What name do you want to add?","")
		names.push(addToArray)
	}
}
function displayNames(addName)
{
	alert(addName);
}
</script>
<noscript>
<h1>
You're browser doesn't support Javascript
</h1>
</noscript>
</head>
<script language="javascript">
<body onLoad="displayNames(addName)">
</body>
</script>
</html>

My problem is relates to getting part of the text from a div, then pass this on to a variable which then acts upon it.
This is a short summary in detail:
http://jsfiddle.net/defencedog/W9Fsw/
Above simulates a Forum like environment (PHPBB3). here user can't insert html in posts thus a customised BBcode ([doc])is made in which is placed the required src attribute, unique to every SCRIBD document.
The goal is to get the text within the two [doc] & that will be something like (discarding the two BBCodes)
Code:

src="http://www.scribd.com/embeds/2942002/content?start_page=1&view_mode=list&access_key=key-sxlnrfvqu5s22kzi5xb"

then pass it on as a variable named src, which will then replace the contents to achieve desired output.
Notice the two problems
1] how do I select the div upon which the action is to take place I.e that contains [doc]. Remember there occurs other divs as well in a posted message?
2] How do I select the desired text?

Plz do giv me some suggestions

css:


Code:

        #nav{
                width: 960px;
                margin: 0 auto;
            }
            ul li{
                float: left;
                margin-right:50px;
                list-style: none;
            }
      .sub-menu{
          display: none;
    
      }

jquery code:



Code:

              $(function(){
                ("#nav ul li").hover(function() {
                (".sub-menu").css("display","block");
       });

html code:

Code:

 <div id="nav">
      <div class="left"></div>
      <div class="right"></div>
      <ul>
        <li><a href="/" class="current">Home</a></li>
        <li><a href="/cpanel.html" class="">cPanel</a>
          <div class="sub-menu">
              <h2>test</h2>
              <p>
                  <a href="#">test</a> <a href="#">test</a> <a href="#">test<</a>
              </p>
                <p>
                  <a href="#">test</a> <a href="#">test</a> <a href="#">test<</a>
              </p>
          </div>

i am sorry, i am new of jquery.i want to show the sub nav part when the mouse hover on the `li` part. but my code doesn't work.how to correct it. thank you