|
JavaScript - How To Load One Code, Then On Hover Change To Something Else?
Hello.
I'm trying to improve page loads times on my site and I've tracked the issue down to the share buttons we have. We load the Tweet Button, Facebook Like Button, and Google +1 button sometimes up to 25 times on one page. What I'd like to do is, on initial load, display an image that looks like the Tweet Button, for example, and then when hovering over a div, change to the actual Tweet Button code. I know how to do this in general, but the key is that the actual tweet button code doesn't load when the page loads, only when you hover over the div does the actual code load. Can someone please give me a general template and I can integrate it in with my site? Thanks. Similar Tutorialshi, i want to write a js function which will change images (i have an array of images) on mouse over till the time i have my mouse over the image. i have written function: Code: function changeImage(testImage,source)
{
var my_array=testImage.split("||");
var actualLen = my_array.length - 2;
for (i=0;i<my_array.length;i++)
{
document.getElementById("lrgPic" + source).setAttribute("src",my_array[i]);
setTimeout('',1000);
if(i == ( my_array.length - 1 ))
{ // i = (( my_array.length - 1 ) - i) - 1; // alert(i);
}
}
}
but the action i want is: on hovering over the image (location: "lrgPic" in above code) images should keep on changing grabbing the location from array ("my_array" above) and the image change should happen after every sec. i have tried "setTimeout" function; but it's not working as desired. with the code which is commented above.. i want to reset the loop so that images are continuously changed till "onmouseOut" is performed... any clues guys.. how can i improve on this code? with this code.. my script goes in infinite loop.. please help thanks in advance Instead of loading the data when the page loads (thus making the page load slower) I wanna make it load when you hover over the tool tip so how would I change this? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test Screenname</title> <style type="text/css"> body {color:#000;background-color:#FFF; font-family:Arial, Helvetica, sans-serif;} /*tooltip*/ div.tooltip { width: 200px; color: #fff; text-align: center; } div.tooltip h4 { color: #fff; font-weight: bold; text-shadow: 2px 2px 1px #222; margin: 0; padding: 13px 10px 5px; background: url(img/balloon.png) top left no-repeat !important; background: url(img/balloon.gif) top left no-repeat; font-size: 11px; } div.tooltip p { margin: 0; padding: 0 10px 15px; text-shadow: 2px 2px 1px #222; background: url(img/balloon.png) bottom left no-repeat !important; background: url(img/balloon.gif) bottom left no-repeat; font-size: 10px; } </style> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> window.onload=function() { /* setup tooltips */ var as = []; $S('a').each(function(a){ if (a.getAttribute('title')) as.push(a); }); new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25}); } </script> </head> <body> <a href="#" title=" <?php $url = "http://www.blockstatus.com/aim/status-checker/index.php"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL,$url); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS,"aimac=screenname"); curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); $result2 = curl_exec ($ch); curl_close ($ch); $data = $result2; $pattern = '/Status:<\/b>(.*?)<br.*?><\/td>/i'; preg_match($pattern, $data, $status); $output = str_replace("Status: ", "", $status[1]); $aimstatus = trim($output); echo "$aimstatus"; ?> ">Test tooltip</a> </body> </html> Hi all I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded. Is there a way to either: * Use javascript to make it so the image only loads when the link is hovered over? or * Allow the rest of the javascript on the page to run before the images are finished loading? I think i'd prefer the first solution if possible but i'm open to all ideas. Thanks in advance! Hello all. I'm sure this is really easy, but I have a question about being able to change a main image depending on a mouseover of particular text. I have a website where I am hosting a recipe, and I want to be able to show a 'main' picture that changes depending on where the user is hovering in the instructions. It would be very similar to this: http://piscesmike.com/Pages/recipes/onions.html The exception being that the top images are replaced by line by line instructions, and the main image changes depending on which instruction you are hovering on. Alternatively, I could also use a pop-up window with the image for the particular instruction, but could not get that to work either. I coded everything for the above link, but just cant seem to get this working. Any help is greatly appreciated. And, also feel free to try out the recipe's from PiscesMike.com, or to poke around. I know there are a few other errors (one being the day of the week deal) so once again, any input or help would be a tremendous help. Thanks and sorry for being such a noob! Right i need some help with some code, i have been trying 2 days to get it to work! basically the 3 image locations are in Variables in PHP $piclocation1 $piclocation2 $piclocation3 What i want is when you hover over the div class "breaking-news", i want the div ID "latest-news-image" to change to that specific image background. example the top "breaking-news" class is on hover and the image $piclocation1 should show in "latest-news-image". if the middle "breaking-news" class is on hover the image $piclocation2 should show in "latest-news-image". and so on if you could help me figure out a way around to get this to work i would be ever so greatfull, as i dont know if i got this in the right area as it would contain javascript, php and poss Css! and even if you could point me in the right direction would be helpful! this is the website page i am testing it on if you would like to look at if visually http://www.wolverhampton-wanderers.co.uk/text.php and here is the code: Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Stylesheet" type="text/css" href="./wolves.css"/>
<title>Untitled Document</title>
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 1;
while($row1 = mysql_fetch_array($news)){
if($counter == 1)
{
$picture1 = $row1['imageID'];
$getimage1 = "SELECT * FROM news_images WHERE imageID = $picture1";
$image1 = mysql_query($getimage1) or die(mysql_error());
$pic1 = mysql_fetch_array($image1);
$piclocation1 = $pic1['imageFile'];
}
if($counter == 2)
{
$picture2 = $row1['imageID'];
$getimage2 = "SELECT * FROM news_images WHERE imageID = $picture2";
$image2 = mysql_query($getimage2) or die(mysql_error());
$pic2 = mysql_fetch_array($image2);
$piclocation2 = $pic2['imageFile'];
}
if($counter == 3)
{
$picture3 = $row1['imageID'];
$getimage3 = "SELECT * FROM news_images WHERE imageID = $picture3";
$image3 = mysql_query($getimage3) or die(mysql_error());
$pic3 = mysql_fetch_array($image3);
$piclocation3 = $pic3['imageFile'];
}
$counter = $counter + 1;
}
?>
</head>
<body>
<div class="shaddow"><!-- This is the shaddow behind the content -->
<div class="content"> <!-- This is the content and main background -->
<div class="header"><img src="../images/header.jpg"/></div>
<div class="menu">
<div id="nav">
<?php
$cat = "SELECT * FROM `top-menu` ORDER BY 'category' ASC";
$category = mysql_query($cat) or die(mysql_error());
$start = 1;
while($row = mysql_fetch_array($category)){
$submenu = $row['sub-menu'];
if($submenu == '1'){
echo "</li><li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a>";
}
elseif($submenu == '2'){
if($start == 1){
echo "<ul>";
}
echo "<li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a></li>";
$start = $start + 1;
if($submenu !='2'){
echo "</ul></li>";
$start = 1;
}
}
}
echo "</ul></li><a class='nav-end'></a>";
?>
</div>
</div>
<div id="latest-news">
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 0;
echo "<div id='latest-news-image'></div>" .
"<div id='latest-news-header'>Breaking News</div>";
while($row1 = mysql_fetch_array($news)){
echo "<div class='breaking-news'><div class='breaking-news-header'><a href='#'>{$row1['title']}</a></div>" .
"<div class='breaking-news-info'>Posted on {$row1['date']}, by {$row1['author']}</div>" .
"<div class='breaking-news-desc'>{$row1['desc']}</div>" .
"<div class='breaking-news-readmore'><a href='#'>Read More</a></div></div>";
$counter = $counter + 1;
}
?>
</div>
</div>
</div>
</body>
</html>
Hello, I was wondering if anyone could help me with a personal website I am modifying for a friend. He basically has a list of links such as: Home Blog Pictures Links What I want to do is that whenever you roll over, say, "Blog", an image appears to the right of the links (the image will be a small screenshot of what the blog looks like). When you roll over "Pictures", a different image appears in it's place. I already know how to do this when rolling over images, but not rolling over text. I used document.getElementById and just set the src to the image, but how do I do this when I just have text to roll over? Is it possible/recommended to use the follow JQuery? http://ajax.googleapis.com/ajax/libs.../jquery.min.js Thank you for your time It must be a simple thing... I am trying to change an image source on page load depending on the contents of a cookie: Code: function goVisited(cookiename,img_name,img_src) {
var visited = readCookie(cookiename);
if (visited == "1"){
//alert("visited!");
document[img_name].src=img_src;
}}
<img onload="goVisited('main1','Introduction','img/Yellow.gif');" name="Introduction" border="0" src="img/Green.gif" width="250" height="18">
I need the page to check the cookie "main1" and if its value is 1, then change the image src from Green.gif to Yellow.gif. It almost works, but I get a stack overflow. Hi all, I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code i created is the following it's not working for some reason. html: Code: <div class="service_box box1" id="service_box1">
<a href="#" id="box1_trigger">
<h3>bla bla</h3>
<p>bla bla bla bla bla</p>
</a>
</div>
javascript: Code: <script type="text/javascript">
$(document).ready(function() {
$("#box1_trigger").hover(
function() {
$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");
},
function() {
$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");
}
);
});
</script>
css: Code: #service_box1{
width:318px; height:282px;
float:left;
background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
width:100%; height:100%;
float:left;
display:block;
}
Could you help me fix this please?? Hello, I need your help. Using Javascript, on mouseover/hover, I would like to change the boder color of my textbox from rgb(142, 142, 142) to black: rgb(0, 0, 0,) then when I move the mouse pointer off the textbox, I would like it to change from black back to rgb(142, 142, 142). I can't figure out where to start or how to get this going. A little help from the experts is needed here. Much thanks and appreciation for your time. Cheers, J Hello to all ... I am very basic on this of javascript, so someone could help me how to resolve this issue. I have a javascript (HTML internal), which fetches and executes a file in another web address... but I do not want it to do that, i want this script to execute is function directly from my local disk (file location). Here is the script; Code: <html>
<head></head>
<body>
<div style="WIDTH: 984px; HEIGHT: 443px" >
<script type="text/javascript">
var previewConfigs = [{
type: 'flash',
preview_url: "http://myflashtest.com/files/9083/preview.swf",
base: "http://myflashtest/files/9083/"
}];
</script>
<span id="large_item_preview">
<object style="visibility: visible; Z-INDEX: 0; WIDTH: 590px; HEIGHT: 300px; TOP: -51px; LEFT: -27px; " id="large_item_preview_container" data="srcs-ff/preview.swf"></object> </span>
<script type="text/javascript" src="srcs-ff/jquery.js">
</script>
<script type="text/javascript" src="srcs-ff/preview.js">
</script>
<script type="text/javascript">
if (typeof(previewConfigs) !== 'undefined') {
for (var i = 0; i < previewConfigs.length; i += 1) {
var preview = new ItemPreview(previewConfigs[i]);
preview.display();
};
};
</script>
<script type="text/javascript">
$(document).ready(function() {
$("tr[data-accessor=source]").click();
});
</script>
</div>
</body>
</html>
<b>What I want is to change this part;</b>; preview_url: "http://myflashtest.com/files/9083/preview.swf", base: "http://myflashtest/files/9083/" Hi guys, I am having an issue changing a piece of Javascript and hoped you guru's could help?I am not awful with Javascript but it is fair to say I am still at the beginning of my learning! I can't find the correct answer in forums and tutorials and you guys are literally my last hope! Here it is .... I have a drop-down menu on a website I am working on which is made up of HTML, CSS and a little bit of Javascript. At the moment it is set so that when the user hovers over the menu it operates the drop-down. This obviously does not work for iPads etc as there is no mouse to hover. I want to keep my menu but alter the Javascript so the menu drops when clicked instead. Here is my code: Javascript Code: <script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
HTML Code: <div id="menuPadding"> <div id="menu"> <ul id="nav"> <li id="m1"><a href="">HOME</a></li> <li id="m2">ABOUT US <ul> <li><a href="">Our Values</a></li> <li><a href="">Facilities</a></li> <li><a href="">Arena</a></li> <li><a href="">Jobs</a></li> </ul> </li> <li id="m3">SUCCESS <ul> <li><a href="">Jobs</a></li> <li><a href="">Results</a></li> <li><a href="">Awards</a></li> <li><a href="">Testimonials</a></li> </ul> </li> </div> </div> CSS Code: #menu {
margin-top: 16px;
width: 879px;
height: 30px;
z-index: 1000;
font-family: Verdana, Geneva, sans-serif;
font-size:11px;
font-weight:bold;
}
#menuPadding {
margin: 0px 0px 0px 0px;
padding: 10px 0px 10px 0px;
text-align:center;
z-index: 1000;
}
#menuPadding ul {
height: 29px;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
z-index: 1000;
}
#menuPadding ul li {
/* display: inline;*/
line-height: 29px;
padding:0px;
margin-left:1px;
display:block;
float:left;
font-weight:bold;
color:#fff;
z-index: 1000;
}
#menuPadding ul li a {
text-align:center;
z-index: 1000;
}
#menuPadding ul li li {
padding:0px;
margin:0px;
z-index: 1000;
}
#menuPadding ul li li a {
text-align:left;
padding-left:14px;
text-transform:uppercase;
z-index: 1000;
font-size:90%;
}
#menuPadding ul li li a.notupper {
text-transform:none;
z-index: 1000;
}
/* coloured menus */
#menuPadding ul li#m1 {
background:#FF0000;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m1 li {
background:#FF0000;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m2 {
background:#0099CC;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m2 li {
background:#0099CC;
width:166px;
z-index: 1000;
}
#menuPadding ul li#m2 li a {
width:166px;
z-index: 1000;
}
#menuPadding ul li#m3 {
background:#999999;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m3 li {
background:#999999;
width:176px;
z-index: 1000;
}
#menuPadding ul li#m3 li a {
width:176px;
z-index: 1000;
}
#menuPadding ul li#m4 {
background:#9966CC;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m4 li {
background:#9966CC;
width:156px;
z-index: 1000;
}
#menuPadding ul li#m4 li a {
width:156px;
z-index: 1000;
}
#menuPadding ul li#m5 {
background:#AAC619;
width:96px;
z-index: 1000;
}
#menuPadding ul li#m5 li {
background:#AAC619;
width:230px;
padding-right:20px;
z-index: 1000;
}
#menuPadding ul li#m5 li a {
width:230px;
z-index: 1000;
}
#menuPadding ul li#m6 {
background:#FF9900;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m6 li {
background:#FF9900;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m7 {
background:#FF0099;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m7 li {
background:#FF0099;
width:216px;
color:#fff;
z-index: 1000;
}
#menuPadding ul li#m7 li a {
width:216px;
color:#fff;
z-index: 1000;
}
#menuPadding ul li#m7 li li {
font-size:87%;
z-index: 1000;
}
#menu li ul ul { /* third-and-above-level lists */
margin: -30px 0 0 216px;
z-index: 1000;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
z-index: 1000;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
z-index: 1000;
}
#menuPadding ul li#m8 {
background:#660099;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m8 li {
background:#660099;
width:146px;
z-index: 1000;
}
#menuPadding ul li#m9 {
background:#A80017;
width:97px;
z-index: 1000;
}
#menuPadding ul li#m9 li {
background:#A80017;
width:146px;
z-index: 1000;
}
#menuPadding ul li a:link,#menuPadding ul li a:active,#menuPadding ul li a:visited {
color:#fff;
z-index: 1000;
}
#menuPadding ul li a:hover {
color:#000;
z-index: 1000;
}
/* suckerfish */
#menu, #menu ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;color:#fff;
}
#menu a {
display: block;
width: 96px;
}
#menu li { /* all list items */
float: left;
width: 96px; /* width needed or else Opera goes nuts */
border-top:1px solid #fff;
}
#menu li ul { /* second-level lists */
position: absolute;
background: orange;
width: 106px;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
font-size:90%;
}
#menu li ul ul { /* third-and-above-level lists */
/* margin: -1em 0 0 96px;*/
font-size:110%;
}
#menu li li {
font-size:100%;
color:#fff;
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
I realise that this must be quite an easy thing for you guys but - as I said - I am at the beginning of my learning and it is confusing the hell out of me! All of the things I have tried have not worked! Any help would be truly appreciated! Thanks in advance! I doubt this is possible, but I have no idea what actually happens when a page loads, so I thought I would give it a shot... if a js file that is loaded externally has parameters, is it possible to turn those parameters into variables, giving the user the option to select the variable's value after the page has loaded? maybe a concrete example would be better... in google maps, the api is loaded like this: Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> but if you wanted to specify that you want the api to function in Spanish, you load it like this: Code: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script> and that language=es is the one that I want to change. But I can't seem to make it into a variable on page load, like this: Code: <script type="text/javascript"> var lang="es"; </script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=lang"></script> much less make it changeable once the page has loaded. I have a feeling that this is a really dumb question, but can it be done without reloading the entire page? hello, iam kind of new at javascript, but iam trying my best to be better and better. so i have 3 divs (my_block, my_image, my_description) as you see in my code below Code: <div class = "my_block">
<div class = "my_image">
<img src="images/pic.jpg" width="600" height="600">
</div>
<div class = "my_description">
<a> Description goes here.... ! </a>
</div>
</div>
just i want to display the "my description" div only after the 100% image loading completion which exist in "my_image" div. so how can i get this done with Javascript please ?? thanks a lot I have a browser game that's coded with javascript. It's a basic question and answer game. A question is asked and if they type the right answer it brings them to a new page with a new question and continues on. Right now it's coded in a way that each question is a separate HTML page. I'm trying to find a way to get it so it's all on one page. Due to the nature of my code the best way I can think of is to have the content of those HTML pages load and replace a certain section of HTML code that's already on the page. Does this make any sense and if so is there such a solution? I need a code that will load multiple codes based on what minute it is. Example: If it's 12:31 it will load code A If it's 12:32 it will load code B (Lets just say there are only two codes) If it's 12:33 it will load code A If it's 12:34 it will load code B etc. I use to have this in a file somewhere, but over the course of the past few years I've misplaced it an am unable to find it. It would be much appreciated if I could get some help with this. Hi, I have a webpage structured as below and want the contents in the iframe to load prior to the code below it. At the moment the javascript(resizing stuff) in the iframe code delays the iframe from loading in full before the "streaming music player" code. This iframe javascript is on the page as opposed to an external file. I would have thought the iframe would have to load in full before the code below it would be executed. How do I make the iframe load in sequence or delay/hide the code below it until iframe is fully loaded? Thanks ####header#### flash ####header menu#### flash ####iframe#### lots of javascript and content from page on mywebsite (not external url) ###streaming music player##### embedded flash player linked to external site ####footer menu#### flash Basically, what I'm trying to do is set the left margin of an image based on the width of the image, because I want the image to appear centered relative to the link table above. I've been using this code: Code: function insertImageMargin()
{
var marg = getImageMargin();
document.getElementById("comic").style.marginLeft = marg + "px";
}
function getImageMargin()
{
var com = document.getElementById("comic");
return 440 - com.width / 2;
}
What happens is, the first time com.width is 0, but if I hit reload, it is the width of the image, and the code works correctly. How do I get this to work the first time, or can you suggest an alternate approach? Hi all, Just a quick question please, i'm a javascript & jquery newbie and need a little advice to what is probably an easy problem to fix. I'm trying to get this jquery product rotator to work. It advances automatically every 5 seconds with the following code: (there's 8 buttons below and above the main content window, clicking a button swaps the divs in the content window) $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true); }); All i need it to do is to advance automatically as above but also advance the slider when a user hovers/mouse over a button, so the relevant content is displayed in the main window. The code to the whole slider is below, minus the CSS. A demo of the slider is he http://demo.webdeveloperplus.com/fea...ontent-slider/ Many thanks. <!-- Links to Jquery. Do not touch --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <div> <!-- This Week's Offer Product Viewer Code Starts Here --> <script> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true); }); </script> <center> <div id="featured" > <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="/homepage/button1.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="/homepage/button2.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="/homepage/button3.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="/homepage/button4.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="/homepage/button5.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-6"><a href="#fragment-6"><img src="/homepage/button6.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-7"><a href="#fragment-1"><img src="/homepage/button7.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-8"><a href="#fragment-8"><img src="/homepage/button8.jpg" width="187" height="125" alt="" /></a></li> </ul> <!-- First Content --> <div id="fragment-1" class="ui-tabs-panel" style=""> <img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" /> </div> <!-- Second Content --> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/about-us-main.gif" width="760" height="500" alt="" /> </div> <!-- Third Content --> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button3.jpg" width="760" height="500" alt="" /> <div class="info" > <center><h2>Content </h2></center> </div> </div> <!-- Fourth Content --> <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button4.jpg" width="760" height="500" alt="" /> </div> <!-- Fifth Content --> <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" /> </div> <!-- Sixth Content --> <div id="fragment-6" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button6.jpg" alt="" width="760" height="500" /> </div> <!-- Seventh Content --> <div id="fragment-7" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button7.jpg" alt="" width="760" height="500" /> </div> <!-- Third Content --> <div id="fragment-8" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button8.jpg" alt="" width="760" height="500" /> </div> </div> I have a javascript for a tree view but i need to change it according to the requirement. Lets start with example with the treeview as follow: 1 Door phone 1.1 Ready Kits 1.1.1 Audioset 1.1.2 Videoset 1.2 Audio Kits 1.2.1 Elphone 1.2.2 Video Door phone 2 CCTV 2.1 Camera 2.1.1 Dome Camera 2.1.2 IP Camera 2.2 Others Now the thing is in the current treeview a single category is open at a time. like if 1.1.1 is open 1.1.2 will b closed and similarly if 1.1 is open...1.2 will b closed. But i want that when i click on 1(Door phone) ie Door phone...evry node should be opened instead of just one similary when i click on 2(CCTV), all its node should be opened. I hope it will be possible to achieve this and i would be helped. My succeeding post will be the javascript i need help with. Thanks Hi all, I'm trying to change our shopping cart code by making a small modification. When editing a product, there is a dimensions box which currently only allows numbers. We want it to allow numbers and letters (don't ask why). The code we have is the following which we think is related to why our shopping cart won't allow letters in the box. Could someone please edit the following code to allow letters? Thank you. Code: if(isNaN(dimensionsFormat(prodWidth.value)) && prodWidth.value != "" && !sellingDP) {
ShowTab(0);
alert("%%LNG_EnterWidth%%");
prodWidth.focus();
prodWidth.select();
return false;
}
if(isNaN(dimensionsFormat(prodHeight.value)) && prodHeight.value != "" && !sellingDP) {
ShowTab(0);
alert("%%LNG_EnterHeight%%");
prodHeight.focus();
prodHeight.select();
return false;
}
if(isNaN(dimensionsFormat(prodDepth.value)) && prodDepth.value != "" && !sellingDP) {
ShowTab(0);
alert("%%LNG_EnterDepth%%");
prodDepth.focus();
prodDepth.select();
return false;
}
|
|||||||