|
JavaScript - Vertically Align List Items
I was recommended to vertically align these list items using javascript. I am needing to vertically align the "identity" and "web presence" list items with each other: http://shilohcreative.gethifi.com/work#/esque
Thank you in advance! Similar TutorialsHi, I bought this theme in themeforest. I want to vertically align middle #silhouette and #pages the original developer gave this code var margin=$(window).height() / 100 * 15; $('#pages').css('margin-top',margin + 'px'); $('#silhouette').css('top',margin + 'px'); and asked to add in main.js in line 159 it still does'nt work perfectly and in higher or lower resolutions it does'nt get aligned in middle. Do i have to edit anything in CSS, can this JS code be optimised to work perfectly? Thanks I have a php web page with a list box. I select 4 items in the list and then submit to another php file to do some processing with those selected items. Then that script calls the original script - here's my question: Is there anyway to keep the four items selected when the original page is called again? Right now only one of the items is selected. I was thinking if the itemindex is 'remembered' then maybe the other items can be too? Or no? Thanks I want to compare items based on what the user picks there will be 3 drop down menus and the drop down menus should alter the HTML table each time it is changed, giving different option values and stuff. I am wondering how to go about this I have the basic stuff setup but I am not really sure how to add to a table that all 3 options use. Any help would be greatly appreciated. Here is my current code for the drop downs. Code: <form name="compare"> <select name="compare"> <option value="V1">Value 1</option> <option value="V2">Value 2</option> <option value="V3">Value 3</option> <option value="V4">Value 4</option> </select> <select name="compare2"> <option value="V1">Value 1</option> <option value="V2">Value 2</option> <option value="V3">Value 3</option> <option value="V4">Value 4</option> </select> <select name="compare3"> <option value="V1">Value 1</option> <option value="V2">Value 2</option> <option value="V3">Value 3</option> <option value="V4">Value 4</option> </select> <input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="Compare"> </form> I want the user to select one of the options from above and a table to show up showing the differences between the others for example; someone selects Value 1 for compare, and Value 2 for compare 2, and Value 3 for Compare 3, they should be shown a table which has the differences between Value 1, Value 2, Value 3. So lets say Value 1 and Value 3 offers you "Help" while value 2 doesn't. it should show a table that says Features Value 1 Value 2 Value 3 Help YES NO YES how would I go about doing this? I haven't been able to find anything about this on here or clear direction on the net, so I'm hoping y'all can help me out. I have a dropdown list that I use to navigate pages on an external website. Currently, my dropdown list will open a new page in my current window. I want to be able to open the page in a new window. I'm sure it's a simple fix, but being somewhat of a noob to Javascript I can't figure out how to solve it. Here's what I have for the navigation dropdown: Code: <FORM
ACTION="../cgi-bin/redirect.pl"
METHOD=POST onSubmit="return dropdown(this.gourl)">
<SELECT NAME="gourl">
<OPTION VALUE="">Make Your Selection
<OPTION VALUE="http://url1.html>Choice 1
<OPTION VALUE="http://url2.html>Choice 2
<OPTION VALUE="http://url3.html">Choice 3
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>
And here's what I have in the header: Code: <SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//-->
</SCRIPT>
Any ideas? Hi, please tell how to dynamically insert items in list box in javascript.That is . When ever new element in stored in oracle that should be listed in listbox Hi, I am looking for an efficient way to go thru all the list items I have in an unordered page and change an attribute. I know I should be able to do it using getElementsByTagName, but I can't seem to get it all working. Can someone please point me in the right direction? Thanks, Thad Originally posted this in the CSS/HTML forum but I was recommended to posting it in here as it seems the solution I'm after would be JS based. Here's the build site so far, a little messy but you should be able to see what I'm after. - http://www.kierangabriel.com/lvcrft/ When you click the SHOWS link, I have a scrollto that scrolls horizontally to another (unfinished) div. What I want is for the logo box & navigation box to scroll along with the page, fixed horizontally. But when the user scrolls vertically through content, such as the stuff on the home div, I don't want the logo & nav to scroll. I found this http://stackoverflow.com/questions/1...not-vertically via googling, but I can't make much sense of it as I'm very much a JS noob. I've tried to change element id to that of mine but it didn't do anything. Any ideas? Many thanks. Hi all, I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County). I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database. This piece of code is working well . . . . Code: <?php
$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');
if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}
if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}
?>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}
</script>
<form name="theForm" method="get">
<!-- County SELECTION BASED ON city VALUE -->
<?php
?>
<select name="County" onChange="autoSubmit();">
<option value=''</option>
<?php
//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city
$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);
while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}
?>
</select>
<?php
?>
<br><br>
<?php
if($County!= null && is_numeric($County))
{
?>
<select name="Region" onChange="autoSubmit();">
<?php
//POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County
$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);
while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}
?>
</select>
<?php
}
?>
What follows is my form where the javascript is not working - edited quite a bit to save on space! Code:
<head>
<script language="JavaScript">
function autoSubmit()
{
var formObject = document.forms['subform'];
formObject.submit();
}
</script>
</head>
<form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName">
<input type="hidden" name="MAX_FILE_SIZE" value="32768" />
<label for="Business_name">Business Name</label>
<input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;"
<id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br />
<label for="StreetAddress">Address</label>
<input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br />
<label for="Town">Town</label> <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br />
<?php
$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');
if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}
if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}
?>
<form name = "subform" method="get">
<select name="County" onChange="autoSubmit();">
<option value=''</option>
<?php
$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);
while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}
?>
</select>
<?php
?>
<br><br>
<?php
if($County!= null && is_numeric($County))
{
?>
<select name="Region" onChange="autoSubmit();">
<?php
$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);
while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}
?>
</select>
<?php
}
?>
<input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br />
<br/>
<input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/>
</form>
</body>
</html>
It's probably obvious to you guys!! Thanks in advance for your help. 09-01-10 Not sure exactly where to post this thread as it involves HTML, Javascript and embedded media players. It probably would be more appropriate here as there is much Javascript involved.... Hello, I am trying to construct a Jukebox for my website. I have spent considerable time all over the WEB and at this forum which addressed the issue in a 50 page thread. Please see: http://codingforums.com/showthread.php?t=50666 I got a lot of ideas from this thread but still cannot figure a way to do the following within the Jukebox. These are my main two questions for everything below: 1. How can I have the Jukebox cycle through all tunes and then start over from the beginning? 2. How can I allow the user to select a tune from a list but not a drop down list, have the Jukebox start from the user’s selection and then play all songs to the end. Then as in #1, start over from the beginning? Per this thread I came away with basically two ways to assemble the jukebox. One uses links in a drop down list which the user can choose from. The other is to use an .m3u playlist. The user can only select a “playlist” from the drop down. Below, I have included the code for each Jukebox. To see the Jukeboxes in action please go to my website where I have posted some test pages exhibiting the jukeboxes that I am referring to. The following is the Jukebox which utilizes an .m3u playlist. If I end up using this idea I would like the tunes in the .m3u playlist to be displayed and allow the user to be able to choose a tune in the list. Then have the list play to the end of all tunes in the list. Then start over from the beginning of the list. After this code is the .m3u playlist. Go to url removed and click on the link that says: “Media Player Using an .M3U Playlist” Jukebox utilizing an .m3u playlist: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
text-align:center;
}
</style>
<script type="text/javascript">
function PlayIt(what){
player.document.getElementById('music').innerHTML='<object width="300" height="300" '
+'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
+'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
+'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
+'<param name="url" value="'+what+'">'
+'<param name="uiMode" value="full">'
+'<param name="autoStart" value="true">'
+'<param name="loop" value="true">'
+'<embed type="application/x-mplayer2" '
+'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
+'showcontrols="true" uimode="full" width="300" height="45" '
+'src="'+what+'" autostart="true" loop="true">'
+'</object>';
}
</script>
</head>
<body>
<div id="music">
<object width="300" height="300"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<param name="url" value="">
<param name="uiMode" value="full">
<param name="autoStart" value="true">
<param name="loop" value="true">
<embed type="application/x-mplayer2"
pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
showcontrols="true" uimode="full" width="300" height="45"
src="" autostart="true" loop="true">
</object>
</div>
<br>
<br>
<select name="player" onchange="PlayIt(this.value)">
<option value="none">::Choose a Song::</option>
<option value="JukeboxList.m3u">Jukebox List</option>
</select><br>
</html>
Here is the .m3u playlist for the above code: Code: #EXTM3U #EXTINF:Bill Evans - G Waltz media/G Waltz.mp3 #EXTINF:Dan Pincus - In Your Time media/In Your Time.mp3 The following code is for the Jukebox that has a list of links in a dropdown list. If I go with this idea, I would like for the list not to be a dropdown list but just a list of tunes. The user should be able to click on any tune in the list and the player should start from that point, play all the remaining tunes in the list and then start from the beginning. Go to url removed and click on the link that says: “Media Player Using Links” Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
text-align:center;
}
</style>
<script type="text/javascript">
function PlayIt(what){
player.document.getElementById('music').innerHTML='<object width="300" height="300" '
+'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
+'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
+'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
+'<param name="url" value="'+what+'">'
+'<param name="uiMode" value="full">'
+'<param name="autoStart" value="true">'
+'<param name="loop" value="true">'
+'<embed type="application/x-mplayer2" '
+'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
+'showcontrols="true" uimode="full" width="300" height="45" '
+'src="'+what+'" autostart="true" loop="true">'
+'</object>';
}
</script>
</head>
<body>
<select name="player" onchange="PlayIt(this.value)">
<option value="none">::Choose a Song::</option>
<option value="media/GWaltz.mp3">G Waltz</option>
<option value="media/InYourTime.mp3">In Your Time</option>
<option value="http://urltosong3.mp3">Song 3</option>
<option value="http://urltosong4.mp3">Song 4</option>
<option value="http://urltosong5.mp3">Song 5</option>
</select><br>
<div id="music">
<object width="300" height="300"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
<param name="url" value="">
<param name="uiMode" value="full">
<param name="autoStart" value="true">
<param name="loop" value="true">
<embed type="application/x-mplayer2"
pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
showcontrols="true" uimode="full" width="300" height="45"
src="" autostart="true" loop="true">
</object>
</div>
</html>
Another idea I found on the WEB also uses an .m3u playlist. The good thing about it is that it lists all the tunes in the playlist which the user can then select from. This jukebox calls up an entire Windows Media Player. If I was to use this idea I would like to be able to disable the left side of the player where the user has options such as burning to CD, Media Guide, Radio Tuner etc… Go to url removed and click on the link that says: “Media Player Within an IFrame Using .m3u Playlist”” Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>JukeBox</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Expires" content="-1"> </head> <body> <IFRAME name="frame" src="JukeboxList.m3u" width="100%" height="347" scrolling="no" frameborder="0"> [Your user agent does not support frames or is currently configured not to display frames.] </IFRAME> </body> </html> Thanks! Dan I would like to make an ordered list, for example: 1. Airplane 2. Boat 3. Car I'd like one of the words to be displayed on my webpage, for example: Boat Then I'd want an up button, and a down button. The up button would display Airplane instead of Boat, and the down button would display Car instead of Boat. Once it got to Car, the same up button would change it back to boat. How do I do this? Thanks. Hi, I'm working on a blog design. (See code below.) I'd like to fix #title vertically so that when people scroll down the blog, it stays in view in the window. I couldn't think of a CSS way to do it. Using position:fixed doesn't work because if someone is viewing the site from a netbook, or simply from a downsized browser on their normal computer, #title is either cut off -- if it's positioned relative to the left -- or it overlaps the blog content -- if it's positioned relative to the right. I've read suggestions to use Javascript but my Javascript skills are practically non-existent. The suggestions were to use an onscroll handler, and to use scrollTop. This is what I wrote but (probably for obvious reasons) it isn't working: Code: window.onscroll = verticalFix();
function verticalFix() {
var sidebar = document.getElementById("title");
sidebar.style.top = .scrollTop(30);
}
Any advice? Also, .scrollTop is jQuery, right? So I have to link to jQuery? How do I do that, again? Thanks for your help! Here's my html and css: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
body,p,#title {
padding:0;
border:0;
margin:0;
}
body {
height:100%;
background-color:#fdf5a2;
min-width:1056px;
}
#content {
width:700px;
padding:15px;
border:0;
margin:0;
margin-left:16px;
background-color:white;
background-image:url('');
background-repeat:repeat-y;
}
#title {
background-color:white;
background-image:url('');
background-repeat:no-repeat;
position:absolute;
left:755px;
top:30px;
height:151px;
width:292px;
}
</style>
</head>
<body>
<a href=""><div id="title"> </div></a>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a sem vel nibh interdum egestas sit amet eu tortor. Donec vitae enim risus, quis ultrices metus. Donec vitae mi nibh. Morbi sed placerat metus. Curabitur auctor eros eget odio fermentum et fringilla ante hendrerit. Fusce at tempor libero. Maecenas et iaculis velit. Nulla sit amet lacus enim, vitae hendrerit metus. Donec a risus nunc. Etiam accumsan, ligula sit amet molestie dictum, turpis orci blandit justo, nec porttitor dui ante bibendum risus. Praesent luctus luctus tortor posuere tincidunt. Phasellus ante elit, sollicitudin id dignissim id, bibendum vel nulla.<br /><br />Vivamus vitae elit sed quam consequat interdum sed sit amet ante. Aliquam euismod ipsum non elit sagittis vulputate. Praesent id libero est. Aliquam eget hendrerit nibh. Donec ut sapien massa, vitae consectetur odio. Nunc ut convallis mauris. Donec nisi neque, cursus vitae faucibus a, sagittis et ipsum. Fusce vitae felis augue. Sed eu venenatis enim. Sed pharetra elementum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi tincidunt euismod vehicula. Sed facilisis imperdiet pellentesque. Suspendisse ac orci et odio dignissim sodales eget pharetra erat. Etiam arcu odio, adipiscing sed sollicitudin in, egestas et orci. Donec id diam eget libero ultrices tincidunt id et dolor. Etiam malesuada tortor in mi pretium ultricies. Sed faucibus, dolor aliquam pulvinar lobortis, nulla neque condimentum dolor, vel hendrerit lorem elit id ipsum.<br /><br />Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse fringilla luctus ipsum, a suscipit dolor volutpat vitae. Nunc feugiat magna quis lorem porttitor a accumsan mauris pharetra. Mauris eget lectus sit amet mauris tincidunt congue non vitae massa. Donec mi mi, iaculis ut congue ut, aliquam ut est. Ut varius ultricies vulputate. Proin aliquet massa ac nulla volutpat dictum. Donec aliquam diam vel odio rutrum vitae tincidu t felis dapibus. Donec diam velit, elementum eget rutrum sed, congue eget sapien. Integer aliquet cursus pulvinar. Sed varius diam rhoncus metus tristique semper. Donec mauris enim, porttitor a eleifend at, porttitor id nisl. Donec est tellus, pellentesque tempor egestas sed, eleifend id dui. Nulla euismod erat non tellus bibendum quis vehicula odio faucibus. Cras enim turpis, pulvinar ac facilisis sit amet, egestas eu metus. Fusce orci sapien, sagittis non iaculis pharetra, fermentum non augue. Aliquam velit erat, facilisis at faucibus ut, semper sed velit. Proin ac sapien magna.<br /><br />Duis vestibulum varius orci vel tempor. Maecenas id magna nibh, id aliquam mauris. Aliquam auctor metus eget metus hendrerit sed luctus nisi convallis. Mauris faucibus interdum felis ac vestibulum. Aenean ut quam quis velit imperdiet fringilla nec tempor magna. Nam vel neque a justo cursus varius. Nam in erat ante. In convallis mi in tellus tempus id mollis ipsum cursus. Nam a ultrices nulla. Nullam pellentesque interdum ligula, quis mattis ante pharetra et.<br /><br />Etiam nisi nibh, tempus eu tincidunt lobortis, cursus sed ligula. Nam vitae elit purus, id facilisis purus. Fusce lorem quam, porta eget sodales quis, luctus eget mi. Fusce scelerisque, justo vestibulum varius porta, tellus nulla bibendum mi, non adipiscing neque leo vitae mi. Donec posuere, lacus eu lobortis rutrum, eros nulla iaculis orci, sed mollis orci purus rhoncus sapien. Fusce ac enim diam, quis posuere enim. In faucibus, sem a tincidunt mollis, eros nisl faucibus diam, ut volutpat dolor arcu quis augue. Sed iaculis justo auctor nulla vestibulum congue. Cras venenatis, sem non ullamcorper eleifend, risus tellus semper sem, quis fermentum mi nulla id metus. Fusce at placerat lacus. Sed tristique, velit id ultrices sollicitudin, massa tellus vehicula neque, in dignissim sapien nisl a ante. Etiam varius tristique ante et eleifend. Aliquam erat volutpat. Mauris luctus tristique eros, vehicula pharetra purus convallis vitae. Suspendisse porta condimentum magna in luctus. Aliquam erat volutpat.<br /><br />In dui risus, consequat sed sagittis pretium, fringilla a est. Vivamus gravida, est vel cursus tristique, est est aliquet quam, quis fermentum quam neque et justo. Nulla eu urna eu sapien rutrum varius eget id odio. Sed lacinia tristique purus ac auctor. Nam ornare auctor mauris, ac pharetra nisl dignissim sed. In hac habitasse platea dictumst. Suspendisse potenti. Donec eleifend malesuada orci vitae posuere. Vivamus mattis vestibulum ante, mattis pellentesque magna sagittis id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum congue nunc ac felis volutpat vel vestibulum libero pulvinar. Duis rutrum dui non libero mollis ultrices. Vestibulum et sapien ac justo tristique rutrum. Duis nec nibh eros, eu pretium mauris. Ut tristique eleifend elementum. Duis id leo id nisl commodo sagittis at a elit. Cras aliquet, nibh a bibendum ultricies, nisl nisl posuere justo, in feugiat enim nunc non eros. Pellentesque vitae dui eget metus molestie sodales. Aenean id augue leo, a bibendum felis.<br /><br />Donec tristique laoreet lobortis. Aenean vestibulum congue mauris vitae suscipit. Maecenas in euismod orci. Suspendisse vel egestas leo. Vestibulum faucibus vestibulum felis at interdum. Cras vestibulum, augue quis convallis laoreet, ligula est suscipit turpis, a sodales nunc orci vitae risus. Nam eu tristique dolor. Vivamus nec aliquam neque. Integer magna eros, mattis non cursus ut, hendrerit eu orci. Morbi eu felis metus. Vivamus eu malesuada tortor. Vivamus eget lectus sit amet magna mattis adipiscing eu non magna. Praesent pretium tincidunt enim vel consectetur. Sed dictum vestibulum ligula, non dictum quam vulputate quis. Aliquam erat volutpat. Maecenas iaculis pharetra iaculis.</p>
</div>
</body>
</html>
I'm trying to make my sidebar show 3 images then scroll to the next 3 automatically every 3 seconds or so. (vertically) Can anyone help me out with a reference I could look at how to do it or show a snippet of code? I've looked up various scripts for scrolling the pictures I have on the right vertically, but I can't seem to implement any of the ones I've found. I'm not trying to ask for you to code it all for me (unless you really want to), but just need some help! Thanks! Here's the site: www.beunthinkable.org Hola! I'll give you a little background before I ask you guys my question! I have a Header, a rectangle of 800x100 and directly below that I have Spry Collabsible panels stacked on top of each other with my menu items 'Home' 'About us' etc. My question is... does anyone know of a way I could vertically center everything on the page, so that when the panels are closed it is nicely in the centre and when you open one, the header moves up to allow room for the content and the whole thing stays vertically centered on the page. I'm guessing this will need some kind of fancy javascript to make possible. Thanks in advance for any advice you can give! Adam hi guys, I need to implement an inline calendar showing multiple months(suppose 6 months) starting from current month in my web application. It should be possible to move to the previous months and next months. Also it should be possible to retrieve the date when a user clicks (onclick event) on a particular date. Is there any javascript source code available? could anyone please help me? thanks in advance I have two lists/menus that are start and end times and I want to make the end time list/menu advance 2 hours from whatever is chosen in start list/menu. The values in both of the list/menu are [CODE] <select name="Time" class="Body" id="Time"> <option value="">Choose Start Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC........ <select name="Time2" class="Body" id="Time2"> <option value="">Choose End Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC........ [ICODE] any ideas on how to accomplish this? you can find my file at http://www.crazywayno.com/startend.php ---------------------------------------------------------------- I also tried this javascript but it doesn't add the additional 2 hours it just repeats the first value. [CODE] <script type="text/javascript"> function cfunc() { document.getElementById("Time2").value=document.ge tElementById("Time").value } </script> <select name="Time" type="text" id="Time" onmouseup="cfunc()"> <option value="">Choose Start Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> <option value="07:30:00">7:30 am</option> ETC.......... <select name="Time2" class="Body" id="Time2"> <option value="">Choose End Time</option> <option value="06:00:00">6:00 am</option> <option value="06:30:00">6:30 am</option> <option value="07:00:00">7:00 am</option> ETC........... [ICODE] You can find this at http://www.crazywayno.com/2fields.php Thanks hi all, i have written a code for simple shopping cart with 4 items.when i selecting the quantity and clicking the add to cart button it is not taking the values.it is displaying the array values what i have given.kindly tell me what is the problem and how to solve it... below is my "index.html" [HTML] <!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> <title> JavaScript jQuery</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-1.6.2"></script> <script type="text/javascript"> $(document).ready(function() { // call the cart function $("#sc_cart").smartCart(); }); </script> <!--<link rel="stylesheet" type="text/css" href="css/cart.css" /> --> </head> <body> <center><h2>Select Your products</h2></center> <form method="post" action="results.php"> <div id="smartcart" class="Container"> <!-- open "contanier" class --> <div id="sc_productlist" class="ProductList"> <!-- open "ProductList" class" --> <div class="ProductListItem"> <!-- open apple Iphone --> <table border="0" cellpadding="2" cellspacing="2"> <tr> <td rowspan="3"><img width="100px" src="images/product0.jpg" /></td> <td><strong><span id="prod_name100">Apple IPhone 3G</span></strong></td> </tr> <tr> <td><label>Price:</label> $<span id="prod_price100" style="color:red">1450.75</span></td> </tr> <tr> <td><label>Quantity:</label> <input name="prod_qty" class="Text" id="prod_qty100" size="3" type="text"> <input type="button" rel="100" class="ItemButton Btn" value="Add Product"></td> </tr> </table> </div> <!-- close apple iphone --> <hr/> <div class="ProductListItem"> <!-- open icepot --> <table border="0" cellpadding="2" cellspacing="2"> <tr> <td rowspan="3"><img width="100px" src="images/product1.jpg" /></td> <td><strong><span id="prod_name101">Ice Pot</span></strong></td> </tr> <tr> <td><label>Price:</label> $<span id="prod_price101" style="color:red">10.25</span></td> </tr> <tr> <td><label>Quantity:</label> <input name="prod_qty" class="Text" id="prod_qty101" size="3" type="text"> <input type="button" rel="101" class="ItemButton Btn" value="Add Product"></td> </tr> </table> </div> <!-- close icepot --> <hr/> <div class="ProductListItem"> <!-- open "ProductListItem" style stand --> <table border="0" cellpadding="2" cellspacing="2"> <tr> <td rowspan="3"><img width="100px" src="images/product2.jpg" /></td> <td><strong><span id="prod_name102">Style Stand</span></strong></td> </tr> <tr> <td><label>Price:</label> $<span id="prod_price102" style="color:red">6.15</span></td> </tr> <tr> <td><label>Quantity:</label> <input name="prod_qty" class="Text" id="prod_qty102" size="3" type="text"> <input type="button" rel="102" class="ItemButton Btn" value="Add Product"></td> </tr> </table> </div> <!-- close style stand--> <hr/> <div class="ProductListItem"> <!-- for coffee maker --> <table border="0" cellpadding="2" cellspacing="2"> <tr> <td rowspan="3"><img width="100px" src="images/product3.jpg" /></td> <td><strong><span id="prod_name103">Coffe Maker</span></strong></td> </tr> <tr> <td><label>Price:</label> $<span id="prod_price103" style="color:red">120.35</span></td> </tr> <tr> <td><label>Quantity:</label> <input name="prod_qty" class="Text" id="prod_qty103" size="3" type="text"> <input type="button" rel="103" class="ItemButton Btn" value="Add Product"></td> </tr> </table> </div> <!-- close coffee maker --> <!-- end "ProductList" class" --> <!-- cart list--> <div id="sc_cart" class="Cart"> <select id="product_list" name="product_list[]" style="display:none;" multiple="multiple"> </select> <div class="CartListHead"> <table width='50%'> <tr> <td width='100px'>Product</td> <td width='100px'>Quantity</td> <td width='150px'>Amount($)</td> </tr> </table> </div> <div id="sc_cartlist" class="CartList"> </div> <div class="CartListHead"> <table width='100%'> <tr> <td><span id="message"></span></td> <td width='100px'>Subtotal($):</td> <td width='120px'><span id="subtotal"></span></td> </tr> </table> </div> </div> <br> <input style="width:200px;height:35px;float:right;" type="submit" class="Btn" value="Checkout"> </div> </div> </form> </body> </html> [/HTML] the array elements given here is displaying in the output.how to remove that one.below is my "results.php" 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>
<title> JavaScript jQuery</title>
<!-- <link rel="stylesheet" type="text/css" href="css/cart.css" /> -->
</head>
<body>
<center><h2>Selected Products</h2></center>
<div id="sc_cart" style="width:950px;" class="Container">
<?php
// creating product array
$product_array = array("100" =>array('product_id'=>'100', 'product_name'=>'Apple IPhone 3G', 'product_price'=>'1450.75', 'product_img'=>'images/product0.jpg'),
"101" =>array('product_id'=>'101', 'product_name'=>'Ice Pot', 'product_price'=>'10.25', 'product_img'=>'images/product1.jpg'),
"102" =>array('product_id'=>'102', 'product_name'=>'Style Stand', 'product_price'=>'6.15', 'product_img'=>'images/product2.jpg'),
"103" =>array('product_id'=>'103', 'product_name'=>'Coffee Maker', 'product_price'=>'120.35', 'product_img'=>'images/product3.jpg'));
// get the selected product array
// here we get the selected product_id/quantity combination as an array
$product_list = $_REQUEST['product_list'];
if(!empty($product_list))
{
?>
<div class="CartListHead">
<table width='100%'>
<tr>
<td> Product</td>
<td width='80px'>Quantity</td>
<td width='130px'>Amount($)</td>
</tr></table>
</div>
<?php
$sub_total = 0;
foreach($product_list as $product)
{
$chunks = explode('|',$product);
$product_id = $chunks[0];
$product_qty = $chunks[1];
$product_name = $product_array[$product_id]['product_name'];
$product_amount = $product_array[$product_id]['product_price']*$product_qty;
$sub_total = $sub_total + $product_amount;
?>
<div class="CartListHead">
<table width='100%'>
<tr>
<td> <?php echo $product_name; ?></td>
<td width='80px'><?php echo $product_qty; ?></td>
<td width='130px'><?php echo $product_amount; ?></td>
</tr>
</table>
</div>
<?php
}
?>
<div class="CartListHead">
<table width='100%'>
<tr>
<td><span id="message"></span></td>
<td width='100px'>Subtotal($):</td>
<td width='120px'><span id="subtotal"><?php echo $sub_total; ?></span></td>
</tr>
</table>
</div>
<br>
<form action="index.php" method="post">
<?php
if(isset($product_list))
{
foreach($product_list as $p_list)
{
$prod_options .='<input type="hidden" name="product_list[]" value="'.$p_list.'">';
}
echo $prod_options;
}
?>
<input style="width:200px;height:35px;float:left;" type="submit" class="Btn" value="Continue Shopping">
</form>
<?php
}
else
{
echo "<strong>Your Cart is Empty</strong>";
}
?>
</div>
</body>
</html>
here too below is my "index.php"..... 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>
<title> JavaScript jQuery </title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// call the cart function
$("#sc_cart").smartCart();
});
</script>
<!--<link rel="stylesheet" type="text/css" href="css/cart.css" /> -->
<?php
// creating product array
$product_array = array("100" =>array('product_id'=>'100', 'product_name'=>'Apple IPhone 3G', 'product_price'=>'1450.75', 'product_img'=>'images/product0.jpg'),
"101" =>array('product_id'=>'101', 'product_name'=>'Ice Pot', 'product_price'=>'10.25', 'product_img'=>'images/product1.jpg'),
"102" =>array('product_id'=>'102', 'product_name'=>'Style Stand', 'product_price'=>'6.15', 'product_img'=>'images/product2.jpg'),
"103" =>array('product_id'=>'103', 'product_name'=>'Coffe Maker', 'product_price'=>'120.35', 'product_img'=>'images/product3.jpg'));
// get the product list
$product_list = $_REQUEST['product_list'];
$prod_options ='';
if(isset($product_list)){
foreach($product_list as $p_list){
$prod_options .='<option value="'.$p_list.'" SELECTED></option>';
}
}
?>
</head>
<body>
<center><h2>Select Your products</h2></center>
<form action="results.php" method="post">
<div id="smartcart" class="Container">
<div id="sc_productlist" class="ProductList">
<?php
foreach($product_array as $p)
{
?>
<div class="ProductListItem">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td rowspan="3"><img width="100px" src="<?php echo $p['product_img']; ?>" /></td>
<td><strong><span id="prod_name<?php echo $p['product_id']; ?>"><?php echo $p['product_name']; ?></span></strong></td>
</tr>
<tr>
<td><label>Price:</label> $<span id="prod_price<?php echo $p['product_id']; ?>"><? echo $p['product_price']; ?></span></td>
</tr>
<tr>
<td><label>Quantity:</label>
<input name="prod_qty" class="scText" id="prod_qty<?php echo $p['product_id']; ?>" size="3" type="text">
<input type="button" rel="<?php echo $p['product_id']; ?>" class="ItemButton Btn" value="Add Product"></td>
</tr>
</table>
</div>
<?php
}
?>
</div>
<div id="sc_cart" class="Cart">
<select id="product_list" name="product_list[]" style="display:none;" multiple="multiple">
<?php
echo $prod_options;
?>
</select>
<div class="CartListHead">
<table width='100%'>
<tr>
<td> Product</td>
<td width='80px'>Quantity</td>
<td width='140px'>Amount ($)</td>
</tr>
</table>
</div>
<div id="sc_cartlist" class="CartList">
</div>
<div class="CartListHead">
<table width='100%'>
<tr>
<td><span id="message"></span></td>
<td width='100px'>Subtotal ($):</td>
<td width='120px'><span id="subtotal"></span></td>
</tr>
</table>
</div>
<br>
<input style="width:200px;height:35px;float:right;" type="submit" class="Btn" value="Checkout">
</div>
</div>
</form>
</body>
</html>
kindly tell me where went wrong and how to solve it....... I am looking for a way to add multiple items with a single URL to my shopping cart. any ideas? cheers, Essentially, I have an ASP.net page where I load a record set server side and upload it into a listbox. I'm trying to do all the movement functionalities of the listbox items client side. Specifically, I'm trying to figure out how to copy selected listbox items from one listbox to another -- on button click. I've searched for a while, but every example that I found moves the actual item into another listbox, I just want to copy the selected item to another listbox. I'm very new to JavaScript, so ff someone can provide an example or pseudo code, I would greatly appreciate it. |
|||||||