|
JavaScript - Java Script Slide With A Little Push From Php
Hi there
This is basically what I want to do: I want to have a slideshow that reads content of a folder and then shows the pictures and has a little fade animation between each image transition. to achieve this: I've done the following: 1. I'm using a php script to read the contents of a folder and spits out results in an array that I can use with my java script 2. im using jquery.cycle plugin to add the "fade" effect. Now my problem is My images are shown but i cant get the fade animation to work on my images. here is how my code looks like: My php file: PHP Code: <? //PHP SCRIPT: getimages.php header('content-type: application/x-javascript'); //This function gets the file names of all images in the current directory //and ouputs them as a JavaScript array function returnimages($dirname="./images") { $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ //if this file is a valid image //Output it as a JavaScript array element echo 'galleryarray['.$curimage.']="'.$file .'";' . "\n"; $curimage++; } } closedir($handle); } sort($files); return($files); } echo 'var galleryarray=new Array();' . "\n"; //Define array in JavaScript returnimages() //Output the array elements containing the image file names ?> My html file: Code: <html>
<meta http-equiv="refresh" content="1000"/>
<head>
<title>Media Signage Slideshow</title>
<style type="text/css">
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.picsimg {
padding: 0px;
border: 0px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
#slideshow { height: 100%px; width: 100%px; margin: auto }
#slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
#slide {width: 370px; height: 220px; padding: 0; margin: 0 auto; }
#myslides {
width: 370px;
height: 220px;
padding: 0;
margin: 0 auto;
}
#myslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 350px;
height: 200px;
top: 0;
left: 0
}
</style>
</head>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'fade',
speed: 5000,
timeout: 2000
});
});
</script>
<script type="text/javascript">
var curimg=0;
function rotateimages(){
galleryarray.sort();
document.getElementById("myslides").setAttribute("src", "images/"+galleryarray[curimg]);
curimg = (curimg+1) % galleryarray.length;
}
$('#myslides').ready(function() {
$('#myslides').fadeOut('slow', function() {
// Animation complete.
});
});
window.onload = function(){
setInterval("rotateimages()", 5000);
}
</script>
<script type="text/javascript" language="JavaScript" src="./code.php"></script>
<body>
<img id="myslides" src="100.jpg">
<?php echo $files ?>
<!-- <div id="myslides"> -->
<!--<img src="100.jpg" />
<img src="101.jpg" /> -->
</body>
</html>
Please tell me how to fix it. Similar TutorialsHey there. I'm creating my web-site now. I'm planing to have some slide/object change by itself. I know Java Script perform this task. I have get the code and apply to the image I want. It works. My idea is each of my image upper left corner have the representative number of the slide. When the slide1 go to slide 2 automatically, the number will change colour from 1 to 2. When the user click the number, the slide will change according to the number. Let said I have 3 slide. Each slide and have no 1 ,2 ,3 move forward, move backward icon on the upper left corner. I have slide1 ,slide2, slide3 change by itself within 2.5 second. When the user go thru slide 1, slide 2 and till slide3, user find out he/she interested on slide 1 and by clicking 1 on the upper left corner, the slide will change back to slide 1. Something like showing on the home page at www.easyjet.com.EN or http://www.thomascook.com/ . Both home page show a slide. This is what exactly I want. I learn HTML code before but not Java Script. I have borrow many Java Script reference book. but no idea how to inside the number on the upper left corner on each slide and how the number work accordingly with the slide. So sorry if you can't understand what I was talking about. But, anyone who understand me or have any idea how can I mortify the Java script to what I want. Just answer or email me to trista_soo@yahoo.com or facebook me on sym107@hotmail.com. Thanks for your time and efforts. Your help I really appreciate. Cheers! i hope this is the right section to post this in. wasnt sure if this question was client side or server side i have a javascript slideshow that i would like to add to my website. its free to use and it came with some coding when downloaded. my problem is that this is my first time EVER using java (ive fiddled with php tho ) and i cant get the slide show to work on my site. the coding it came with gives you an entire webpage ... i just need the slideshow to go inside a div container instead of being a whole page the following is an embedded style that you can simply copy and paste to notepad, save as an html file, and open in your browser. (im using firefox) all the images etc are already being hosted. so you have to do nothing but open it in your browser to see the script working. like i said, this is the code for an entire webpage ... i just need the slide show by it self in a div container 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TinySlider - JavaScript Slideshow</title>
<style all="media" title="YourConnexx Media" type="text/css">
* {margin:0; padding:0}
body {font:12px Verdana,Arial; color:#555; background:#222 url(images/bg.jpg) 50% 0 no-repeat}
p {line-height:1.4; margin-bottom:12px}
#wrapper {width:578px; margin:75px auto}
.sliderbutton {float:left; width:32px; padding-top:134px}
.sliderbutton img {cursor:pointer}
.sliderbutton img:hover {background:#666}
#slider {float:left; position:relative; overflow:auto; width:500px; height:300px; border:2px solid #fff; background:#fff}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:500px; height:300px; padding-right:10px}
.pagination {float:left; list-style:none; height:25px; margin:15px 0 0 32px}
.pagination li {float:left; cursor:pointer; padding:5px 8px; background:#666; border:1px solid #999; margin:0 4px 0 0; text-align:center; color:#222}
.pagination li:hover {background:#777; border:1px solid #bbb; color:#000}
li.current {border:1px solid #ccc; background:#888}
li#content {width:464px; height:270px; padding:15px 28px 15px 18px}
#content h1 {font:22px Georgia,Verdana; margin-bottom:15px; color:#036}
</style>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div>
<div class="sliderbutton"><img src="images/left.gif" width="32" height="38" alt="Previous" onclick="slideshow.move(-1)" /></div>
<div id="slider">
<ul>
<li id="content">
<h1>TinySlider - Simple JavaScript Slideshow</h1>
<p>This super lightweight (1.5 KB) sliding JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal).</p>
<p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p>
</li>
<li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /></li>
<li><img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></li>
<li><img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></li>
</ul>
</div>
<div class="sliderbutton"><img src="images/right.gif" width="32" height="38" alt="Next" onclick="slideshow.move(1)" /></div>
</div>
<ul id="pagination" class="pagination">
<li onclick="slideshow.pos(0)">1</li>
<li onclick="slideshow.pos(1)">2</li>
<li onclick="slideshow.pos(2)">3</li>
<li onclick="slideshow.pos(3)">4</li>
</ul>
</div>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:3,
resume:true,
vertical:false,
navid:'pagination',
activeclass:'current',
position:0
});
</script>
</body>
</html>
please show me what i need to get this slide show into a div container by it self. when i do it it doesnt work at all. it appears in the div container as a text area or something but it doesnt work at all. just shows the first slide and nothing else Hi, Im new to javascript. I want to add a similar function on my blog like on http://techcrunch.com/2011/08/04/gro...tartup-obtiva/ when you press on author. It is a drop down made with javascript. Anybody can help with a similar javascript as I was trying different implementations for the whole night with no luck. Maybe, anybody know a similar javascript online which I could modify? Thanks in advance! Hi, I have a script that shows/hides a div but rather than making it sort of snap I would like to make it glide/slide. I have looked at other scripts but can't make them work with mine. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css" media="screen">
/* CSS Reset */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color:#FF0000;
}
a:link {
color: #999999;
text-decoration: none;
letter-spacing: 3px;
font-size:14px;
}
a:visited {
color: #999999;
text-decoration: none;
letter-spacing: 3px;
font-size:14px;
}
a:hover {
color: #FF0000;
letter-spacing: 3px;
text-decoration: none;
font-size:14px;
}
a:active {
color: #FF0000;
font-size:14px;
letter-spacing: 3px;
}
#wrapper{
position:relative;
width:730px;
height:600px;
margin:0px auto;
}
#images{
width:730px;
height:552px;
overflow:hidden;
float:right;
position: absolute;
top: 48px;
}
#textbox{
position: absolute;
width:205px;
height:40px;
background-color: #FFFFFF;
top: 68px;
left: 20px;
z-index: 2;
padding: 10px;
border-bottom: 2px solid red;
}
#logo {
position: absolute;
width: 101px;
position: absolute;
left: 634px;
top: 19px;
padding: opx;
margin: 0px;
z-index: 2;
}
.more {
display: none;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
border-bottom: 2px solid red;
padding-left: 8px;
padding-right: 8px;
margin-left: -10px;
width: 209px;
padding-bottom:10px;
}
a.mo hover {
text-decoration: none;}
a.showLink, a.hideLink {
text-decoration: none;
font-size: xx-small;
color: #36f;
padding-left: 8px;
/*** background: transparent url(down.gif) no-repeat left;***/ }
a.hideLink {
/*** background: transparent url(up.gif) no-repeat left;***/ }
.drop1 {
font-size: 12px;
font-weight: bold;
}
.drop2 {
color: #666666;
font-size: smaller;
}
#apDiv1 {
position:absolute;
left:319px;
top:87px;
width:234px;
height:32px;
z-index:1;
}
.init_image, .inactive_class {
}
.hover_class, #active_id {
color:#F00;
}
</style>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "<img src=ShowProduct.jpg border='0'>";
}
else {
ele.style.display = "block";
text.innerHTML = "<img src=hideProduct.jpg border='0'>";
}
}
</script>
<script type="text/javascript">
// Reference URL to large images here
var Images = new Array(
"001.jpg",
"002.jpg",
"003.jpg",
"004.jpg"
);
function swap(el) {
var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='inactive_class'||timgs[i_tem].className=='hover_class')
timgs[i_tem].id=''
el.id='active_id'
document['imgMain'].src = Images[el.href.substr(el.href.lastIndexOf('#')+1)];
}
function init(){
var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='init_image'){
timgs[i_tem].className='inactive_class'
timgs[i_tem].onmouseover=function(){this.className='hover_class'}
timgs[i_tem].onmouseout=function(){this.className='inactive_class'}
timgs[i_tem].onclick=function(){swap(this);return false;}
}
swap(document.getElementById('first'));
}
</script>
</head>
<body onLoad="init();">
<div id="wrapper">
<div id= logo><img src="logo2.png" width="101" height="92" /></div>
<div id="textbox">
<div style="position:relative;">
<img style="padding-right:5px;" src="logo_dedon.png" alt=""/>
<a href="javascript:toggle();" id="displayText"><img src=ShowProduct.jpg border="0"></a>
<img style="padding-right:5px;" src="clear.gif" alt="" width="135" height="10" />
<a class="init_image" id="first" href="#0">1</a>
<a class="init_image" id="first" href="#1">2</a>
<a class="init_image" id="first" href="#2">3</a>
<a class="init_image" id="first" href="#3">4</a>
</div>
<div id="toggleText" style="display: none;" class="more">
<p><span class="drop1">BARCELONA</span><br />
<span class="drop2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non mi in urna hendrerit tincidunt. Maecenas eleifend erat et lacus. Sed tempor. Sed venenatis consequat neque. Sed massa. Donec quis orci sed lacus ullamcorper venenatis. </span></p>
</div>
</div>
<div id="images">
<div><img galleryimg="no" name="imgMain" src="img/big/1big.jpg" alt=""></div>
</div>
</div>
</body>
</html>
Can anyone advise a solution for this please? Thanks alot Joe Having problems sliding a table row using scriptaculous. Using the code new Effect.SlideUp('test1');, the table row gets hidden but without the animation effects. While trying to research this, I saw a post in stackoverflow and someone said it's really hard to create animated effect for table rows. There's a solution there but it's for jQuery. Another solution is probably to use <div id="test1"> inside the <tr> instead but that creates XHTML error. Code for table table row: Code: <tr id="test1"><td>Hello World!</td></tr> I need to assign a key in the javascript to actually make the javascript work,. I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. Thanks in advance ., Nani how to get first 4 digits of mobile number using substing method and then how to check that number in if condition using java script.that is i entered the mobile number 9688786064.i want to check first four digits 9688 .in that same check all the entered number only 9688 started nymber can allow to store data base..how can i develop the program..plz help me var ph1=document.getElementById('ph'); ph1=ph.substring(0,4) is it correct or not .if it is correct then tell further steps.if it wrong tell me the correct code Can someone help me with this javascript? It works fine with 10 images, but when I add the 11th it will not rotate the 11th image but still rotate the 1st 10. <br> <script type="text/javascript"> var imgs1 = new Array("/resource/resmgr/Ad_Banner/ad16.jpg","/resource/resmgr/Ad_Banner/ad13.jpg","/resource/resmgr/Ad_Banner/ad14.jpg","/resource/resmgr/Ad_Banner/ad8.jpg","/resource/resmgr/Ad_Banner/ad15.jpg","/resource/resmgr/Ad_Banner/ad18.jpg","/resource/resmgr/Ad_Banner/ad12.jpg","/resource/resmgr/Ad_Banner/ad19.jpg","/resource/resmgr/Ad_Banner/ad20.jpg","/resource/resmgr/Ad_Banner/ad21.jpg","/resource/resmgr/Ad_Banner/ad21.jpg","/resource/resmgr/ad_Banner/ad3.jpg"); var lnks1 = new Array("http://www.adamscollision.com","http://www.huntleyrealty.com","http://www.trinitycpraed.com","http://www.sccah.com/?page=SCFestival","http://www.blazekshomefurnishings.hdspd.com","http://www.sccah.com/?page=JB_Const","http://tgconsultantsinc.com/","http://blueskiespilotshop.com/index.html ","http://www.aaaglass.com/ ","http://www.carytravelexpress.com/","http://www.sccah.com/?page=Ad_Inquiry "); var alt1 = new Array("Adams Collision","Huntley Realty","Trinity","Sun City Arizona","Hunter Douglas Window Coverings and Custom Draperies","J&B Construction","TGI Consulting","Blue Skies","AAA Glass","Cary Travel Express","THIS COULD BE YOUR AD!!!"); var currentAd1 = 0; var imgCt1 = 11; function cycle1() { if (currentAd1 == imgCt1) { currentAd1 = 0; } var banner1 = document.getElementById('adBanner1'); var link1 = document.getElementById('adLink1'); banner1.src=imgs1[currentAd1] banner1.alt=alt1[currentAd1] document.getElementById('adLink1').href=lnks1[currentAd1] currentAd1++; } window.setInterval("cycle1()",4000); </script> <a href=""http://www.adamscollision.com"" id="adLink1" rel="nofollow" target="_blank"> <img src="/resource/resmgr/Ad_Banner/ad16.jpg" id="adBanner1" border="0" width="170" height="200"></a> hi i have this code i want to put a java script for this java scrip should be (amt1*amt2)+(amt3)*(amt4)=amt5 if (amt1*amt2)+(amt3)*(amt4) > amt5 should giver mesage on keyup of amount amt4 plzz help me how do i put javascript for this ...........plz help me Code: <table width="1113" height="99" border="0">
<tr bgcolor="#99FF66">
<td width="60"><div align="center"><strong>GROUP ID</strong></div></td>
<td width="46"><div align="center"><strong>PART ID</strong></div></td>
<td width="97"><div align="center"><strong>ITEM NAME</strong></div></td>
<td width="144"><div align="center"><strong>UNIT</strong></div></td>
<td width="144"><div align="center"><strong>a/b/c</strong></div></td>
<td width="144"><div align="center"><strong>Qty/Crtn</strong></div></td>
<td width="144"><div align="center"><strong>Nbr of Crtns</strong></div></td>
<td width="144"><div align="center"><strong>Nett Wt/Crt</strong></div></td>
<td width="152"><div align="center"><strong>Grs Wt/Crtn</strong></div></td>
</tr>
<?php
$noofrow=0;
$result10 = mysql_query("SELECT * FROM Ibws_Data WHERE Sc_No='$PcNo' AND Seq_No='$SeqNo' ");
// $row1000 = mysql_fetch_array( $result1000 );
//$Sub_Total="";
while($row10 = mysql_fetch_array( $result10 ))
{
//$ttlamt=mysql_number_format();
$noofrow++;
?>
<tr bgcolor="#99CC66">
<td><label>
<?php echo '<input name="Group_ID'.$noofrow.'" value="'.$row10['Group_ID'].'" type="text" size="8" maxlength="12" readonly="readonly" style="text-align:center" />' ; ?>
</label></td>
<td><label>
<?php echo '<input name="Part_ID'.$noofrow.'" value="'.$row10['Part_ID'].'" type="text" size="8" maxlength="12" readonly="readonly" style="text-align:center" />' ; ?>
</label></td>
<td><label>
<?php echo '<input name="Name'.$noofrow.'" value="'.$row10['Name'].'" type="text" size="20" maxlength="25" readonly="readonly" style="text-align:center" />' ; ?>
</label></td>
<td><label>
<?php echo '<input name="Unit'.$noofrow.'" value="'.$row10['Unit'].'" type="text" size="8" maxlength="25" readonly="readonly" style="text-align:center" />' ; ?>
</label></td>
<td><label>
<?php echo '<input name="cat'.$noofrow.'" value="a" type="text" size="8" maxlength="25" readonly="readonly" style="text-align:center" />' ; ?>
</label></td>
<td><label>
<?php echo '<input name="amt1'.$noofrow.'" value="a" type="text" size="8" maxlength="25" readonly="readonly" style="text-align:center" />' ; ?>
</label></td>
<td><label>
<?php echo '<input name="amt2'.$noofrow.'" value="a" type="text" size="8" maxlength="25" readonly="readonly" style="text-align:center" />' ; ?>
</label></td>
<td><label>
<?php echo '<input name="amt3'.$noofrow.'" value="a" type="text" size="8" maxlength="25" readonly="readonly" style="text-align:center" />' ; ?>
</label></td>
<td><label>
<?php echo '<input name="amt4'.$noofrow.'" value="a" type="text" size="8" maxlength="25" readonly="readonly" style="text-align:center" />' ; ?>
</label></td>
<td><label>
<?php echo '<input name="amt5'.$noofrow.'" value="a" type="text" size="8" maxlength="25" readonly="readonly" style="text-align:center" />' ; ?>
</label></td>
</tr>
<tr>
<td><label>
<input type="submit" name="button" id="button" value="Submit" />
</label></td>
<td><label></label></td>
<td><label></label></td>
<td> </td>
<td><label></label></td>
<td><label></label></td>
</tr>
</table>
<p> </p>
<p> </p>
</form>
plz help me with a sample java scrip code hi, i have a html form and i have three text boxes named Max Accessories: Accessory SKU: Accessory CPC ID: and i want a javascript functionality like, if the user enters in the max accessories text box value as 1, then the below two text boxes should update like automatically like below, AcceSsory 1 SKU ACCESSORY 1 CPC ID SIMILARLY if user enters Max accessories value as 2 in the text box, then the below two text boxes should update like automatically like below AcceSsory 1 SKU ACCESSORY 1 CPC ID AcceSsory 2 SKU ACCESSORY 2 CPC ID onchange of the key, for accessory it should call some function in the same page and dynamically update. can any one please provide, a solution for this , thanks. I was hoping someone could help me fix this javascript code. I have been working for hours and it does not work. <html> <head> <title>Moondoe's Coffee House</title> </head> <script type="text/javascript"> var drink, ounces; prompt( "Enter the drink type:espresso, latte, cappuccino, americano" ); prompt( "Enter the ounce size: 8, 12, 16" ); var shots = prompt ( "Enter the number of shots" ); if ( drink == "espresso") price = 1.40; if ( drink == "latte") || drink == "cappuccino" ) { if ( ounce == 8 ) price = 1.95; else if ( ounce == 12 ) price = 2.35; else if ( ounce == 16 ) price = 2.75; } if ( drink == "americano" ) price = 1.20 + ( ( (ounce/8) -1 ) * .30 ); price = price + ( (shots-1) * .50 ); price = price * 1.055; price = Math.round ( price*100 ) /100; alert ( "Your " + ounce + "oz. " + drink + "with " + shots + "\nshots of espresso costs: $ " + price ); alert( "drink = " + drink + "ounce = "ounce + "shots = "shots ); </script> </html> please hekp to sort this out.. .. The price of a ticket to a passenger on AOU-Airways is computed based on the following table: [9] Class Price First Class KD 300 Economy Class (with meal) KD 150 Economy Class (without meal) KD 130 Using nested if statements, write a JavaScript code which will work according to the following specifications: a. Read the class that the passenger wants to travel on. b. If the class is the first class, print the price of ticket. c. If the class is the economy class, ask the user if he/she wants a meal on the flight. Then print the price of the ticket according to the response of the passenger. The program should simply accept one possible strings the user enters; it is not required to work for all possible inputs such as First, first, FIRST or Yes , yes, YES. hi i want to implement this java script . This is the Original Java script page . Where you see if i click on the yahoo or | google buttons the new window is loading and the same page is displaying with a tab bar menu and close button. I want to implement the same on one of my documents where i created css and java script based drop down menus. But when i tried to implement the same java script on my own page its not working properly.Please help me fix it . I have changed the code only on Button -4 Link-1 only Hers the Live Demo of the page : Live Demo Of the page Heres the Java Script: Java Script Here's the CSS : Code: html,body {
padding:0;
margin: 0px;
background: #306f80;
}
#wrapper{
width: 1024px;
margin-right: auto;
margin-left: auto;
background: #FFFFFF;
height: 1000px;
}
#header{
height: 100px;
width: 1024px;
background: url(../images/header.png) repeat-x;
}
.icons_hold{
float: right;
height: 55px;
width: 200px;
position: relative;
top: 10px;
right: 10px;
}
.navestyle{
width: 1024px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
}
.navestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.navestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(../images/nav_bg.png) repeat-x center center; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
.navestyle ul li{
display: inline;
margin-right: 2px;
margin-left: 2px;
}
.navestyle ul li a{
color: #494949;
padding: 4px 45px 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}
.navestyle ul li a:hover, .navestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(../images/hover.png) repeat-x center center; /*THEME CHANGE HERE*/
color: #FFFFFF;
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px/18px Verdana, Arial, Helvetica, sans-serif;
z-index:100;
background-color: white;
visibility: hidden;
width: 200px;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
img
{
border: none;
}
.pagination{
padding: 0px 2px 2px;
clear: both;
}
.pagination ul{
margin: 0;
padding: 0;
text-align: center; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}
.pagination li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}
.pagination a, .pagination a:visited{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none;
color: #2e6ab1;
}
.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: #FFCC33;
}
.pagination a.currentpage{
background-color: #2e6ab1;
color: #FFF !important;
border-color: #2b66a5;
font-weight: bold;
cursor: default;
}
.pagination a.disablelink, .pagination a.disablelink:hover{
background-color: white;
cursor: default;
color: #929292;
border-color: #929292;
font-weight: normal !important;
}
.pagination a.prevnext{
font-weight: bold;
}
#demoArea
{
padding: 10px ;
height: 580px ;
background: #FFFFFF ;
/*border: 1px solid black ;*/
/*display: table ;*/
}
#demoLinks
{
width: 20% ;
border-right: 1px dotted blue ;
float: left ;
}
#demoBrowser
{
position: relative;
width: 950px;
margin-left: auto;
margin-right: auto;
}
#tabBrowser
{
position: absolute ;
width: 100% ;
}
/* --------------- TABS -------------------*/
#tabDemo
{
display: none
}
#tabContainer
{
display: block ;
}
#tabs
{
cursor: default ;
list-style-type: none ;
/*width: 560px ;*/
margin: 0 ;
padding: 0 ;
}
#tabs li
{
background: #FFFBF0 ;
border: 1px solid green ;
border-bottom: 0 ;
-moz-border-radius-topleft: 5px ;
-moz-border-radius-topright: 5px ;
float: left ;
width: 100px ;
min-width: 35px ;
height: 20px ;
margin: 0 2px 3px 0 ;
padding-left: 3px ;
}
.tabTitle
{
float: left ;
width: 80% ;
height: 100% ;
overflow: hidden ;
}
.closeTab
{
text-align: center ;
text-transform: uppercase ;
margin: 2px 3px 2px 80% ;
border: outset 1px #D40000 ;
}
.closeTab:hover
{
background: #000000;
}
/* --------------- BROWSER -------------------*/
#tabContent
{
position: relative ;
clear: both ;
width: 100% ;
}
#tabContent div
{
position: absolute ;
width: 100% ;
}
Here's the Mark Up : 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" lang="en" xml:lang="en">
<head>
<title>Testing page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="js/tabbed_browser.js"></script>
<script type="text/javascript" src="js/chrome.js">
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="icons_hold"><a href="#"><img src="images/home.png" title="home" /></a> <a href="#"><img src="images/help.png" title="help" /></a> <a href="#"><img src="images/sign_out.png" title="signe out" /></a></div>
</div>
<div class="navestyle" id="navemenu">
<ul>
<li><a href="#" title="chaitnyas testing page">Button-1</a></li>
<li><a href="#" title="chaitnyas testing page">Button-2</a></li>
<li><a href="#" title="chaitnyas testing page">Button-3</a></li>
<li><a href="#" rel="dropmenu1" title="chaitnyas testing page">Button-4</a></li>
<li><a href="#" rel="dropmenu2" title="chaitnyas testing page">Button-5</a></li>
<li><a href="#" rel="dropmenu3" title="chaitnyas testing page">Button-6</a></li>
<li><a href="#" title="chaitnyas testing page">Button-7</a></li>
<li><a href="#" title="chaitnyas testing page">Button-8</a></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a id="link1" onclick="openTab('link1')" href="http://yahoo.com." title="chaitnyas testing page" ><img src = "images/1.gif" /> Link-1</a>
<a href="link-2.htm" title="chaitnyas testing page"><img src = "images/2.gif" /> Link-2</a>
<a href="link-3.htm" title="chaitnyas testing page"><img src = "images/3.gif" /> Link-3</a>
<a href="link-4.htm" title="chaitnyas testing page"><img src = "images/4.gif" /> Link-4</a>
<a href="link-5.htm" title="chaitnyas testing page"><img src = "images/5.gif" /> Link-5</a></div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="#" title="chaitnyas testing page"><img src = "images/6.gif" /> Link-1</a>
<a href="#" title="chaitnyas testing page"><img src = "images/7.gif" /> Link-2</a>
<a href="#" title="chaitnyas testing page"><img src = "images/8.gif" /> Link-3</a></div>
<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="#" title="chaitnyas testing page"><img src = "images/9.gif" /> Link-1</a>
<a href="#" title="chaitnyas testing page"><img src = "images/10.gif" /> Link-2</a>
<a href="#" title="chaitnyas testing page"><img src = "images/11.gif" /> Link-3</a></div>
<script type="text/javascript">
cssdropdown.startchrome("navemenu")
</script>
<p><br />
<div id="demoBrowser">
<div id="tabBrowser">
<div id="tabContainer">
<ul id="tabs"><li id="tabDemo"><div class="tabTitle">Google</div><div class="closeTab">x</div></li>
</ul>
</div>
<div id="tabContent">
</div>
</div>
</div>
</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</p>
<div class="pagination">
<ul>
<li><a href="products.htm" class="currentpage" title="Products">1</a></li>
<li><a href="products1.htm" title="Products">2</a></li>
<li><a href="products2.htm" title="Products">3</a></li>
</ul>
</div><br />
</p>
</div>
</body>
</html>
Hey, so I have successfully used this tutorial; http://articles.sitepoint.com/articl...y-javascript/3 to create a web page that "smoothscrolls" down to a certain point of content on the page. So, I know the java works! My problem is, I have changed the website to be along the X axes and not the Y, so instead of it scrolling "down" the page, I would like it to scroll from left to right. i.e on the X axes not the Y. Is there anyway of doing this by editing that java file? All my buttons work and display the correct part of the website, but the java doesn't work slidiing sideways. Thank you in advance! Darren I have good knowledge in web designing like Coding Psd to Html format. But i don't have much knowledge in using JavaScript for in website designing like for basic animation using it with hover or drop down list etc. I am using JavaScript in the form's only for basic form submission. Can anyone suggest me some good resource to learn JavaScript.
i am getting error in document.createElement('input') index1 = { init: function() { var but=document.getElementById('button1'); index1.addEvent(but,'onClick',fun1,false); }, fun1: function(e) { var bo=document.getElementById('body1'); var in=document.createElement('input'); in.type="button"; in.value="songs"; in.id="song"; bo.appendChild(in); } } index1.addEvent(window,'load',index.init,false); I just started a job doing classic asp and only have experiance with asp.net and no java scrpt How can i debug javascript in classic asp pages? i have no clue so If you know, please give baby steps that are idiot proof Thanks~ Hi all. I am a newbie. I would like to know how I can get the following script to work on the web. I have produced a flyer in iWeb on my mac. I published it on line and then viewed the source while it appeared on my web browser. The code is below. I then copied this code into a webmail server panel that sends out emails to a list of people in a database. The flyer didn't appear. It just came back as the code I copied. No pictures, no colours etc. I noticed the term javascript in the code. Did some research and found that I might need to convert this to html. Am I right? Can anyone test this for me? js2html is a program that apparently does this for me. Is that what I should buy? Anyway, here's the script... <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="Generator" content="iWeb 2.0.4" /> <meta name="iWeb-Build" content="local-build-20100523" /> <meta name="viewport" content="width=700" /> <title>Blank</title> <link rel="stylesheet" type="text/css" media="screen,print" href="Blank_files/Blank.css" /> <!--[if IE]><link rel='stylesheet' type='text/css' media='screen,print' href='Blank_files/BlankIE.css'/><![endif]--> <script type="text/javascript" src="Scripts/iWebSite.js"></script> <script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script> <script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script> <script type="text/javascript" src="Scripts/iWebImage.js"></script> <script type="text/javascript" src="Blank_files/Blank.js"></script> </head> <body style="background: #ffffff; margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();"> <div style="text-align: center; "> <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: #ffffff; text-align: left; width: 700px; " id="body_content"> <div style="margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer"> <div style="height: 0px; line-height: 0px; " class="bumper"> </div> <div class="com-apple-iweb-widget-navbar flowDefining" id="widget0" style="margin-left: 35px; margin-top: 0px; position: relative; width: 630px; z-index: 1; "> <div id="widget0-navbar" class="navbar"> <div id="widget0-bg" class="navbar-bg"> <ul id="widget0-navbar-list" class="navbar-list"> <li></li> </ul> </div> </div> </div> <script type="text/javascript"><!--//--><![CDATA[//><!-- new NavBar('widget0', 'Scripts/Widgets/Navbar', 'Scripts/Widgets/SharedResources', '.', {"current-page-GUID": "FFEEE0B9-95FC-4891-B01D-849CD24582BC", "path-to-root": "", "isCollectionPage": "NO", "navbar-css": ".navbar {\n\tfont-family: Arial, sans-serif;\n\tfont-size: 1em;\n\tcolor: #666;\n\tmargin: 9px 0px 6px 0px;\n\tline-height: 30px;\n}\n\n.navbar-bg {\n\ttext-align: center;\n}\n\n.navbar-bg ul {\n\tlist-style: none;\n\tmargin: 0px;\n\tpadding: 0px;\n}\n\n\nli {\n\tlist-style-type: none;\n\tdisplay: inline;\n\tpadding: 0px 10px 0px 10px;\n}\n\n\nli a {\n\ttext-decoration: none;\n\tcolor: #666;\n}\n\nli a:visited {\n\ttext-decoration: none;\n\tcolor: #666;\n}\n\nli a:hover\r{\r\n \tcolor: #463C3C;\n\ttext-decoration: none;\r}\n\n\nli.current-page a\r{\r\t color: #463C3C;\n\ttext-decoration: none;\n\tfont-weight: bold;\r\r}\n"}); //--><!]]></script> <div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div> </div> <div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer"> <div style="height: 0px; line-height: 0px; " class="bumper"> </div> <div style="height: 1px; width: 630px; height: 0px; left: 35px; position: absolute; top: 3px; width: 630px; z-index: 1; " class="tinyText"> <div style="position: relative; width: 630px; "> <img src="Blank_files/shapeimage_1.jpg" alt="" style="height: 1px; left: 0px; position: absolute; top: 0px; width: 630px; " /> </div> </div> </div> <div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer"> <div style="height: 0px; line-height: 0px; " class="bumper"> </div> <div style="height: 497px; width: 703px; height: 497px; left: -2px; position: absolute; top: -53px; width: 703px; z-index: 1; " class="tinyText style_SkipStroke stroke_0"> <img src="Blank_files/BSC%20Banner%20May%202010.jpg" alt="" style="border: none; height: 497px; width: 704px; " /> </div> <div style="height: 480px; line-height: 480px; " class="spacer"> </div> </div> <div style="height: 150px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer"> <div style="height: 0px; line-height: 0px; " class="bumper"> </div> </div> </div> </div> </body> </html> Hi, I have a .js file for creating a menus..in that i have a menu called 'reserved', i just want to remove the name from the menu i want the menu size should be the same as earlier.. what i need to do? Hi, i have multiple check box and text box for each check box. the check box value is given as text box name ex Checkbox <input type="checkbox" name="cBx" value=" txtname1 "/> Textbox <input type="text" name=" txtname1 " /> how to get the text box value (txtname1) on calling the below function function get_textBox_value() { var c_chkBoxName = ""; var c_txtBoxValue = ""; for (var i=0; i < document.Formname.cBx.length; i++) { if (document.Formname.cBx[i].checked) { c_chkBoxName= document.Formname.cBx[i].value; //working fine... c_txtBoxValue = document.Formname. c_chkBoxName .value; // not working... how to pass the chkbox value for c_txtBoxName } } } |
|||||||