|
JavaScript - A Bit Of Advice!
Hello! I have recently begun the creation of my online web designers portfolio and I have come across a small, yet easily correctable (I'm praying!) problem.
The main problem is that when my site is visited for the first time, the site takes to long to load/create the cache! I have done things such as kept everything in external stylesheets etc, but one thing I believe is the cause is the images, there are so many so its understandable, what I was wondering is if its possible to create a preloading page, that will create the cache for the entire website?? Bearing in mind I have only four pages! Similar TutorialsOn my home page, I have a video area. I have a Jquery script that adds a curtain overlay to the video and then draws the curtains open to reveal the video behind it. It works fine in Firefox, but not in IE or Safari, not sure about other browsers. Can someone help me fix this so it works in those browsers please? http://billboardfamily.com/?theme=DeepFocus Thanks. I currently have php site with a system of loading up 5 iframes on a page that target part of another website with recaptcha's so all 5 iframes auto scroll to the recaptcha box's. Now, my question is, is there any way to have it auto select the next iframe ready to type into the recaptcha box? Like, i have a list of 5 iframes & in iframe1 i type in the recaptcha words & press enter, then i want it to auto jump to the next iframe ready to type without having to click the text area box, is this possible & how? okay, so im planning on starting an online retail business and im fairly new to coding. i want to be able to sort the items for sale and then display them in order. i just need some help on where to start. i was thinking of using a server side script or xml or something to give the items values like rating=some number and then sort them from highest to lowest, then have the web page display the items in order. am i going about this in the right way? any suggestion would help
Hi, I have been downloading and examining "gallery building" software and I find none of it links to an e-commerce option. Does anyone out there know the quickest way I can create a truly simple sales website which supplies a payment procedure for photos in an online gallery, thereby allowing javascript to #1 display a larger hover on mousover and #2 (on mouseclick) link photos (my gallery material) to an e-commerce component which offers a "payment procedure" to people visiting my gallery, specifically "bank transfer, credit card, check, PayPal etc." and will allow them to purchase my photos. The photos would be not the "large hover" ones watermarked with my own logo, but would be #3 the (presumably cached) clean, downloadable photos of a higher resolution represented by the watermarked photos and intended for sale. This would I assume then include a "download photo" page as part of the e-commerce "payment procedure" allowing non-watermarked photos cached safely outside the viewable gallery to be purchased. It sounds like such a breeze, (#1,#2,#3) and I find javascripting with little fragments of these codes, (have even been admiring the free code offered by several programmers which opens thumbnails on hover etc.) but none of it (#1,#2,#3) all stitched together. Anyone capable of this? Hey, Im really new to Java and ideally i would love a java guru to have a quick look at this and help me. I am using this script i found he http://www.javascriptkit.com/script/...ownpanel.shtml It is a real good script and have set it up on my site fine. However, i am using it for a login portal. But when the user clicks on anything on the page that has been brought down, it pops back up and away. Obviously this is not good for a login box. So i need to limit the expand/contract feature to the button only. Rather than the whole box. Now im sure its just re-shifting code around or add/removing a few lines of code. Ive spent the past 2 hours trying to look at this and still no look, so im calling for an expert to have a look. This is in my jkpanel.js file: Code: //Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com
var jkpanel={
controltext: 'Login',
$mainpanel: null, contentdivheight: 0,
openclose:function($, speed){
this.$mainpanel.stop() //stop any animation
if (this.$mainpanel.attr('openstate')=='closed')
this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
else
this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
},
init:function(file, height, speed){
jQuery(document).ready(function($){
jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+jkpanel.controltext,+'</div></div>').prependTo('body')
kpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})
var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
$contentdiv.load(file, '', function($){
var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
$contentdiv.css({height: heightattr})
jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
$controldiv.css({cursor:'hand', cursor:'pointer'})
})
})
}
}
//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init('../ajaxexamples/login.html', '210px', 300)
This in in my made .html page. Code: <script type="text/javascript" src="../ajaxexamples/jquery-1.2.2.pack.js"></script>
<style type="text/css">
#dropdownpanel{ /*Outermost Panel DIV*/
position: absolute;
width: 100%;
left: 0;
top: 0;
visibility:hidden;
}
#dropdownpanel .contentdiv{ /*Div containing Ajax content*/
background: url(../images/sitestructure/dropdownbackup.png);
background-repeat: repeat;
color: white;
padding: 20px;
}
#dropdownpanel .control{ /*Div containing panel button*/
border-top: 5px solid black;
color: white;
font-weight: normal;
text-align: center;
background: transparent url("../ajaxexamples/panel.gif") center center no-repeat; /*change panel.gif to your own if desired*/
padding-bottom: 3px; /* 21px + 3px should equal height of "panel.gif" */
height: 21px; /* 21px + 3 px should equal height of "panel.gif" */
line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */
}
</style>
<script type="text/javascript" src="../ajaxexamples/jkpanel.js">
/***********************************************
* Drop Down Panel script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
Thanks, Hello New here and not a programmer by any stretch of the imagination .. need some help with the following code .. rather lots of help .. I apologise if this is ugly code .. but I don't know much yet. Code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var val3 = parseInt(document.getElementById("value3").value);
var val4 = parseInt(document.getElementById("value4").value);
var ansD = document.getElementById("answer");
ansD.value = val1 + val2 + val3 + val4;
}
function calc()
{
var val5 = parseInt(document.getElementById("value5").value);
var val6 = parseInt(document.getElementById("value6").value);
var val7 = parseInt(document.getElementById("value7").value);
var ansD = document.getElementById("answer2");
ansD.value = (val5 + val6 + val7)*100/(100-10);
}
function calc2()
{
var val8 = parseInt(document.getElementById("value8").value);
var val9 = parseInt(document.getElementById("value9").value);
var val10 = parseInt(document.getElementById("value10").value);
var ansD = document.getElementById("answer3");
ansD.value = (val8 + val9 + val10)*100/(100-20);
}
function addNumbers1()
{
var val11 = parseInt(document.getElementById("answer").value);
var val12 = parseInt(document.getElementById("answer2").value);
var val13 = parseInt(document.getElementById("answer3").value);
var ansD = document.getElementById("answer4");
ansD.value = (val11 + val12 + val13);
}
</script>
<HEAD>
<BODY
<FORM NAME="Calc">
<TABLE BORDER=1>
<TR>
<TD>
INCOME (GROSS)
<br>
Income = <input type="text" id="value1" name="value1" value=""/><br>
Income = <input type="text" id="value2" name="value2" value=""/><br>
Income = <input type="text" id="value3" name="value3" value=""/><br>
Income = <input type="text" id="value4" name="value4" value=""/><br>
<input type="button" name="Sumbit" value="TOTAL (GROSS)"onClick="javascript:addNumbers()"/> =
<input type="text" id="answer" name="answer" value=""/>
<br>
<br>
INCOME (NET) 10%
<br>
Income = <input type="text" id="value5" name="value5" value=""/><br>
Income = <input type="text" id="value6" name="value6" value=""/><br>
Income = <input type="text" id="value7" name="value7" value=""/><br>
<input type="button" name="Sumbit" value="TOTAL GROSSED (@ 10%)"
onClick="javascript:calc(2)"/> =
<input type="text" id="answer2" name="answer2" value=""/>
<br>
<br>
INCOME (NET) 20%
<br>
Income = <input type="text" id="value8" name="value8" value=""/><br>
Income = <input type="text" id="value9" name="value9" value=""/><br>
Income = <input type="text" id="value10" name="value10" value=""/><br>
<br>
<input type="button" name="Sumbit2" value="TOTAL GROSSED (@ 20%)"onClick="javascript:calc2()"/> =
<input type="text" id="answer3" name="answer3" value=""/>
<br>
<br>
<input type="button" name="TOTAL STATUTORY INCOME" value="TOTAL STATUTORY INCOME"onClick="javascript:addNumbers1()"/> =
<input type="text" id="answer4" name="answer4" value=""/>
<br>
<br>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
<HTML>
The first issue ... (as simply as possible .. remember very new to all this) how can I limit decimals to 2 places.. and prevent rounding. The second issue .. how can I get the TOTAL buttons to calculate without having to fill in numbers into each entry box... If it don't put "0s" it gives NaN. Ideally by the automatic entry of "0s" when the TOTAL button is pressed. Further issues as the coding progresses... Thanks.. Hello; I'll begin like so many others before me, and apologize now if this post is in the wrong place, but since I don't exactly know what type of code I need, I'm not sure where to post this query. Let me preface this request by stating the obvious; I have almost no knowledge of coding. I've been watching tutorials for help with building a site for my small service-type business. I need coding that will allow my visitors to input their zip code to see if they reside in my service area. After they enter the zip and click the submit button, a page should pop up with one of two messages when they either are or are not in my service area. (I would undoubtedly need to list [somewhere in the coding] all the zip codes that are within my service area, and any zip codes not listed would bring up a message that the visitor is outside my service area.) I hope this makes sense, and someone can point me in the right direction. Thank you, in advance to any and all who respond, and keep in mind that you may have to dumb-down your responses for me to be able to understand. Hey All, I've got the following site that loads great in FF and Chrome (no surprise), but is terribly slow in IE7. It's even quick in IE6, but not 7. Here's the site: http://www.hanshawengines.com/ Now I'm using JQuery in a couple places, but it's by no means nothing crazy. The page is fairly simple. I thought of preloading the main content images, but even after they are loaded in the cycle, the loading time is still slow. Any suggestions on how I could improve this would be greatly appreciated. Thanks. I'm new to programming in general and have had trouble deciding on a good starter project. I've decided to start with something that is (hopefully) pretty simple. I have about a dozen boxes full of vinyl records and would like to write a program to catalogue everything alphabetically by artist using prompts to ask for Album Title, Artist Title, and year. My question at this point is, is JavaScript a good way to do this? I have a fundamental knowledge of HTML, CSS, JavaScript and Ruby. I assumed JS would be the best way (that I know at this point) to do this project, but if I'm wrong, would love to hear it. What I don't understand at this point is how to output the information to a text file, or how to set up an interface to run the scripts. Any advice is very much appreciated. Hello everyone,im new to programming and have been learning a little bit of JavaScript.Im mostly learning it for a program called unity 3d,Its a game engine.And well,im stuck and can't figure this part out.i was wondering if anyone could help me. the script is to make the character move forward and shoot.but the character jumps instead of moving forward. any advice? Code: var speed = 3.0;
var rotateSpeed = 3.0;
var bullitPrefab:Transform;
function Update ()
{
var controller : CharacterController = GetComponent(CharacterController);
// Rotate around y - axis
transform.Rotate(0, Input.GetAxis ("Horizontal") * rotateSpeed, 0);
// Move Forward / backward
var forward = transform.TransformDirection(Vector3.forward);
var curSpeed = speed * Input.GetAxis ("Vertical");
controller.SimpleMove(forward * curSpeed);
if(Input.GetButtonDown("Jump"))
{
var bullit = Instantiate(bullitPrefab, GameObject.Find("spawnPoint").transform.position,
Quaternion.identity);
}
}
@script RequireComponent(CharacterController);
Hi, I need to create a subscription form with a pop up window. I would like to re-do the following html code so that it works with a JavaScript pop-up: Code: <form style="border:1px solid #ccc;padding:3px;text-align:center;" method="post" rel="nofollow" target="popupwindow" action="http://feedburner.google.com/fb/a/mailverify" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=PinkPigeon', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/><input type="hidden" value="PinkPigeon" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /></p><p>Pink Pigeon Feed</p></form>
if anyone can help that would be great thanks Will Hi All, I am looking to build a gallery similar to this one: http://www.designguru.co.za/pages/brand.php I am new to MooTools and don't know where to start, which plug ins etc.. Can anyone help me or just point me in the right directions Thanks in advance Hi all, I'm currently building a new search engine that will search around 15,000 products and would like some general advice as to the best way to approach it. I want to offer instant results, so the user will click an icon and the results change, no submit buttons or postbacks. My database is MS SQL and my frontend is ASP.Net, but for this I'm looking to develop the majority of the search functionality in JavaScript. What I'm asking really is what people recommend for the best way to approach providing instant results. My current thinking is an initial database query loads the data into XML, then use JavaScript and XSLT to filter the XML and display the results, then as filters change these can be handled by the JavaScript and XSLT rather than going back to the database. Does anyone have any general advice on the best performing way to provide this sort of functionality that ultimately will give the quickest results? Thanks in advance! Hello, I am creating a little script that allows me to scroll my content sections in and out though Ajax and CSS. I have have successfully made it slide in from the top but I have one problem, sliding out! I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I am not very good with javas cript anyone have any suggestions? My site is live with the working slide in at The Mind Company. Also I am having a load issue with some browsers and computers where the page must be refreshed in order to view proper, any suggestions? CSS: Code: header {
z-index:100;
position:relative;
display: block;
background-color: #272727;
height:100px;}
#contentBody {
min-height:48em;}
footer {
position:relative;
display: block;
background-color: #272727;
height:168px; }
#aboutPage {
display:none;}
#productPage {
display:none;}
#contactPage {
display:none;}
.aniIn {
z-index:0;
-webkit-animation-name: ANIMATEin;
-webkit-animation-duration: 0.25s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEin {
from {
margin-top:-4000px;
}
to {
margin-top:0px;
}
}
.aniOut {
-webkit-animation-name: ANIMATEout;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEout {
from {
margin-top:0px;
}
to {
margin-top:3000px;
}
}
Script: Code: function $_(IDS) { return document.getElementById(IDS); }
function ani(){
document.getElementById(classID).className ='aniOut';
}
function checkPage(classID, url){
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++){
if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
$_(classID).className ='aniIn';
sel[i].style.display = tmp;}
$_(classID).style.display = 'block';
loadContent(classID, url); }
function loadContent (classID, url){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(classID).innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","content/"+url,true);
xmlhttp.send();}
HTML: Code: <!-- Header Areas: (Constent visual)-->
<header>
<li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li>
<li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li>
<li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li>
</header>
<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
<section id="aboutPage"></section>
<section id="productPage"></section>
<section id="contactPage"></section>
</div>
<!-- Footer Area: (Constant visual)-->
<footer></footer>
I found a menu I really like at the top of the page at www-dot-sachscreative-dot-com but can't figure out how it works from the source code. Can someone tell me how to make something like it which is browser independent and uses javascript and/or CSS? It's been years since I did javascript work and I've forgotten must of what I used to know. Thanks.
Hi all, I have a small message board with TinyMCE (WYSIWYG) editor integrated into it. It works fine for everything except when someone tries to post code... especially content with the < or > characters. For example, a person may try to post an example of how to make red text in HTML. But when he does this: <span style="color:#ff0000;">Hello</span> Of course it comes out like this: Hello Or C code... #include <stdio.h> gets stripped off as INVALID HTML! So, I ended up making a Javascript filter that pre-processes pasted data and turns all < characters into "‹" and all > into "›" characters. BTW, those two characters look very similar to < and >. They look like this: ‹ and › so that, for example: ‹span style="color:#ff0000;"›Hello‹/span› is NOT interpreted as HTML. Similarly, I pre-convert <br /> to "↵" which is a little "down/left/arrow" symbol that is on most ENTER keys on a keyboard. After converting all the < and > characters, I then restore the ↵ back to <br /> (I do this to preserve the < and > in the br!). The resulting text is posted verbatim as a message, but if it's placed in a CODEBOX, then the codebox does an "onfocus="fix-it-back" meaning that the codebox innerHTML is converted back to < and > characters so it can be selected and copied as real code. All this seems to me to be complicated and convoluted. My gut tells me there is a simpler, better way to do it. Any suggestions or ideas please? Will be appreciated! Thanks! -- Roger I want to create an array of 1 - X (X could be 10, 20, 30 or any number) Then I want to randomly choose a number from 1 - X I now want to remove the random choice - and then do the same again twice Question 1: How do I create the array in the first place? Answer: var x=[0,1,2,3,4,5,6,7,8,9,10]; I'd much prefer it if I could do something like this: var x=[0...10]; This would create the same, except, I don't have to type out all the numbers! And if I needed to increase the number in the array, I could simply just change the last number I've just made the syntax up I was hoping something similar shorthand existed Or do I have to do this by creating a loop? Question 2: how do I pop an item from the middle or somewhere other than the beginning or end? I've googled and all I can find is how to remove the first and last items! The way I see it: - Get a solution for popping from the middle of an array I'm sure I'll find a solution to this if I looked - but is it optimal to be doing it this way? - Instead, maybe I could fill my array in a random order in the first place - and then just pop at the beginning or end?? Which is the best solution? Any code to start me off would be great Thanks OM I'm no coder, as you will soon discover. The web work I do is from a purely novice, even hobby standpoint and the sites I create and host are nothing more than favors for friends and acquaintances who have needed but have not had a presence on the web. This being explained, I am asking those with coding skills to please take a look at the site I've just completed for a little diner down the road. (They're just starting out and can't afford to pay a professional web designer and, unfortunately, are stuck with me.) The site is http://d-n-ddiner.com I'm the first to say that the mouseover sound would drive me crazy, but the guys who own the diner are enthusiastic and want it left as is. I have had to combine scripts in order to have the "black-and-white to color" image effect work simultaneously with sound. The sound script depends on uploaded files: soundmanager.js, soundcontroller.swf and sound-config.xml and its tags are found incorporated with each involved image, within the body. The image effects are just the result of playing around with bits and pieces I've seen, mucking about the Internet. Its script is found within the head and also within the body, in each involved image's area, in mouseover, mouseout and, of course when specifying "name=" (such as Img_1). I opted for providing the sound in this manner because I am able to use an .mp3 file, rather than having to weigh through the pros and cons of .au versus .wav, etc., and the fickle nature of different browsers and plug-in crashes. After having many test the site (friends with varying operating systems and browsers) it appears that this mp3 solution makes the mouseover sound available to a broader range of users. Success has been achieved with Firefox, Safari, Netscape, Omniweb and Chrome. However, Internet Explorer and Opera seem to be the holdouts for both Mac and PC users. All this brings me to two requests: Would someone take a look at the site (particularly with Firefox) to determine if something might be done to help the page load more smoothly? Secondly, is there some sleight-of-hand that might be incorporated into the script to help IE and Opera detect the mouseover sound or do you consider these two browsers essentially not worth the bother? I am attaching a zip of the sound files I mentioned. The mp3 is not included but any mp3 snippet would do for testing, provided the sound config file is edited to reflect its file name. My primary concern is smooth page-loading; the IE and Opera issue is of less importance. Thank you for your patience and for any assistance you would offer. Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance |
|||||||