JavaScript - Point Me In The Right Direction To Do Something Like This

Hello everyone,

I am currently going through the process of learning JavaScript and I am enjoying it. I also know enough about HTML & CSS and I am learning more and more each day. I started doing this because I figured that finding a technical co-founder is extremely hard and I have always been interested in web and app development, so why not learn...

I was wonding whether someone could direct me?

I want to be able to develop websites such as scan.me or gumroad.com (similar concepts). Which code stack are these websites generally made up of (e.g php, HTML CSS and java).

I'm hoping to develop my own platform/concept in the future but I am just trying to get a general idea of the direction I am going down.

Thanks,
Paul

I am using the jquery megamenu from the javascriptkit.com site, for multiple buttons, and I am having an issue where one menu on the right hand side of the page wants to start the menu at the left end of the button, heading right (which is the default), and ends up forcing a 3 column menu into a 2 column one when the resolution is set to 1024 wide, because it would disappear off the page otherwise.
I want instead for that one menu to END at the right hand side of the button so that the 3 columns remain intact.

I do not know enough about javascript to totally follow the logic of the code and my attempts to fix this issue have produced mixed results. Any one any suggstions?


[CODE]
alignmenu:function($, e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $anchor=megamenu.$anchorobj
var $menu=megamenu.$menuobj
var menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu
//var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheight
var menutop=megamenu.offsety+megamenu.anchorheight //get y coord of menu
$menu.css({left:menuleft+"px", top:menutop+"px"})
this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
},
[CODE]

Hi everyone, I'm curious if this is something simple. I'm working on a wordpress site using a plugin that is based off of the code from javascript kit called "highlighter scroller script". The plugin js is almost identical: http://javascriptkit.com/script/cut57.shtml

What is causing it to wipe from left to right? I'm racking my brains trying to figure it out (and googling unsuccessfully it seems). All I'm trying to do is make it wipe instead from right to left. I'm sure it's something simple, but I don't know which variable to change.

Can anyone point me in the right direction?

THANKS!

I'm developing a simple game that involves a system of interconnected nodes with unidirectional travel between nodes (similar to the circulation system!). The goal of the game is to get from a starting node to an ending node, which can be a variable number of nodes away.

The program picks a random starting point, then randomly chooses one of its connecting nodes (cNodes) and pushes it onto a pathArray. A cNode is randomly chosen from this new node and it is pushed onto the pathArray. This continues for a designated number of turns, thus generating a pathArray (invisible to the player). The last element in the pathArray is the endNode and the goal of the puzzle.

At each node the player is given two options of travel (though there may be more than two ways to go). One of these options MUST be the correct way if the player has not deviated from the path up until that point. If the player has deviated, this option can be any cNode. The other node is any cNode that does not lead to the endNode.

The following code contains a simplified list of nodes that represents the content in my game. The function, however, is taken word for word. In this snippet, the pathArray & startNode have already been generated and I am trying to resolve how to assign "nodeChoice" as either the correct direction of travel (for a player on the correct path) or any random cNode (for a player who has deviated from the path). Keep in mind that the pathArray and cNodes lengths can be any size.

Code:

<script>

//NODES:
var nodeA = {name:"A"};
var nodeB = {name:"B"};
var nodeC = {name:"C"};
var nodeD = {name:"D"};
var nodeE = {name:"E"};
var nodeF = {name:"F"};
var nodeG = {name:"G"};
var nodeH = {name:"H"};
var nodeI = {name:"I"};
var nodeJ = {name:"J"};
var nodeK = {name:"K"};
//An array of all nodes in the system:
var systemArray = [nodeA, nodeB, nodeC, nodeD, nodeE, nodeF, nodeG, nodeH, nodeI, nodeJ, nodeK];

//Connecting Nodes (cNodes):
//(uni-directional, but cyclical)
nodeA.cNodes = [nodeB, nodeC];
nodeB.cNodes = [nodeD, nodeE, nodeF];
nodeC.cNodes = [nodeF, nodeG];
nodeD.cNodes = [nodeI, nodeH];
nodeE.cNodes = [nodeJ];
nodeF.cNodes = [nodeK];
nodeG.cNodes = [nodeK];
nodeJ.cNodes = [nodeA];
nodeK.cNodes = [nodeA];
nodeI.cNodes = [nodeA];
nodeH.cNodes = [nodeA];

//The path chosen (generated from code not included here)
var pathArray = [nodeA, nodeB, nodeE, nodeJ];

//nodeChoice will represent a cNode from any given node
var nodeChoice;

//chooseNode is supposed to assign nodeChoice the next element in pathArray if the player on on the right path (if at nodeB, nodeChoice = nodeE).
//However, if the user has taken a different path, its cNodes will not be in pathArray in which case a random cNode is assigned to nodeChoice
function chooseNode(_node) {
	//check each cNode to see if any are in pathArray
	for (var j = 0; j < _node.cNodes.length; j++) {
		//if a cNode is in pathArray, then we know to assign it nodeChoice...
		if (_node.cNodes[j] in pathArray) {
			nodeChoice = _node.cNodes[j];
			console.log("choiceNode CORRECT: " + nodeChoice.name); //(for debugging purposes only)
		}
		//...otherwise don't do anything in this forLoop/ifStatement
	};
	//if by this point nodeChoice is still undefined, meaning none of the current node's cNodes are in pathArray, assign it any one of its cNodes.
	if (nodeChoice == undefined) {
		nodeChoice = _node.cNodes[Math.floor(Math.random()* _node.cNodes.length)];
			console.log("choiceNode INCORRECT: " + nodeChoice.name);//(for debugging purposes only)
	};	
};

//Runtime:

chooseNode(nodeB);
//Result should be only nodeE.name since nodeD is not in the pathArray...
console.log(nodeChoice.name);

</script>

...however, nodeChoice is assigned either D, E or F randomly and we are given the troubleshooting statement "choiceNode INCORRECT: D (or) E (or) F", indicating that the if-in statement is always ignored.

I know that the if-in statement doesn't work but am not sure how else to write it so that each cNode is compared the each element in pathArray, both of which can be of variable lengths...

Hello all,

How to set decimal point in javascript ?
e.g.

var num1=23.12345;

I want output as 23.12

How can i do this ?

Please, guide me.

Thanks

Hey,

I was wondering if it is possible to make an image change whenever an anchorpoint on my page reaches the center or the side of the screen...

Thanks for your help!

I read somewhere (I think from Douglas Crockford) that void is a completely useless operator. What is its actual purpose? Is there anything it's good for?

I see lots of javascript:void(0) hyperlinks all over the place. From what I gather, it just disables the link's default behavior...buy why not just make the href="#" or return false from an onClick handler?

Can anyone enlighten me?

ok i need a bit of advice..

I have a webpage and i want to put a section of another website on to my own website..

i have a www.bebo.com profile and i only want to show the comment section on my website..

my profile is www.bebo.com/thegaadiscos

is there a way to only show the comments div of the bebo site on my own website?

What i want is a bit like the face book section of this website
http://www.alexandraburkeofficial.com/

How would this be done does anyone know..

function below will output price value in text field based on drop-menu option. It's working but I want it's always show value in 2 decimal point for variable 'price'. Can anyone help me with this problem?

function findPrice() {
if (document.getElementById("region").value == "blank") {
var price = document.getElementById("price");
price.value = "<?php echo 'Choose your region to get the price'; ?>";
}
if (document.getElementById("region").value == "Peninsular Malaysia") {
var price = document.getElementById("price");
price.value= '<?php echo $PM_Price; ?>';

}
if (document.getElementById("region").value == "Sabah/Labuan") {
var price = document.getElementById("price");
price.value = '<?php echo $SL_Price; ?>';
}
if (document.getElementById("region").value == "Sarawak") {
var price = document.getElementById("price");
price.value = '<?php echo $SR_Price; ?>';
}
}

Hi,

So, i'm using the jkpanel dropdown script in my functional prototype to show context-sensitive design notes for our integrators.

it's pretty cool, but i have an implementation question ..

i have many source html files that call the jkpanel script, and each page requires unique content to be loaded into the dropdown panel ..

but, what i see is that the drop-down content html file is hard-coded in the .js file.

in other words, i need to create a .js 'and' and html for every different set of content i want to load into the dropdown panel ..

so, if i have 12 html files to hold the drop down content, i also have to create 12 different versions of the .js file to point to them ..

this seems like overkill ..

is there a way to always point to the same jkpanel.js file in my <head>, but load a different html file to populate its content?

Thanks!

RL

How to fix a infowindow or a info template to a point so that when i drag the map the infowindow will no change place or move ...what is the code...and where shld i place it at?

this is my code :
var stX = "23319.3347409758";
var stY = "28825.7191286444";
var pt= new esri.geometry.Point(stX,stY,map.spatialReference);
//var strImage = "http://www.rw-designer.com/i/download48b.png";
var symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25,25);
var attr = {"PlaceName":"Peranakan musem of Singapore","PlaceAddr":"addr"};
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle("Building Name:");
infoTemplate.setContent(getInfoContent);
var graphic = new esri.Graphic(pt,symbol,attr,infoTemplate);
gLayer.add(graphic);
}

function getInfoContent(graphic){
var bc = new dijit.layout.BorderContainer({style: "font-size: 11pt; height: 520px; width:493px; background: #CCFFFF;"});
var c1 = new dijit.layout.ContentPane({
region: "top",
style: "height: 20px width: 100%",
content: "hello"
});
bc.addChild(c1);


//make a tab container
var tc = new dijit.layout.TabContainer({
region: "center",
style: "height: 65%; width: 100%; "
}, dojo.create("div"));

//display attribute information
var cp1 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>detail</font> ",
content: "sfdfsdfsdf"
});
tc.addChild(cp1);
bc.addChild(tc);
return bc.domNode;
}
dojo.addOnLoad(addSymbol);

hello! i am new here and i want help!
i have a problem with the scrollbar. i want to stay in a certain point after click in a onclick event. this is not happened and my scroll bar goes on the top of my page. what i can do?

my code is this:

<a><xsl:attribute name="href">#</xsl:attribute>
<xsl:attribute name="onClick" ><xsl:text>displaybody('</xsl:text><xsl:value-of select="fileDesc/sourceDesc/@n"/><xsl:text>')</xsl:text></xsl:attribute><div id="a" onclick="definesearchmode()" align="center"><b>click here.</b></div>
</a>

the function displaybody shows me what i want to see and the definesearchmode() has a code to hide the phrase (click here) when you click there.
thank you.

Hi. I am trying to make one small modification to a website. I just want to make an image that, when clicked, scrolls to a certain point. Pleeeeeeaaaaaase help!

This is the javascript that I think controls the scrolling:

var element_y;
var swiffy;
var cur_groupid;
var group_sortable = new Array();
var lightbox;
var content;

window.addEvent('load', function() {
checkScrollerWidth();
checkImages();
});

function checkImages() {
var check_w = window.getSize().x + 500;
var winh = window.getSize().y;

var divs = $$('.single_image_holder');
for(var i=0; i<divs.length; i++) {
if(divs[i].getChildren().length) continue;
if((parseInt($('main_images').getPosition().x) + parseInt(divs[i].get('xpos'))) >= check_w) return;
var img = new Element('img', {
'src': divs[i].get('source')
});
divs[i].adopt(img);
}
}

window.addEvent('resize', function(){
checkScrollerWidth();
});

function checkScrollerWidth() {
if($('scrollbar2') && $('content2') && $('handle2'))
makeScrollbar( $('content2'), $('main_images'), $('scrollbar2'), $('handle2'), true);
}

function makeScrollbar(content,checkContent,scrollbar,handle,horizontal,ignoreMouse){

if(checkContent.getScrollSize().x < scrollbar.getSize().x) {
handle.setStyle('display','none');
return;
}

handle.setStyle('display','block');

var steps = (horizontal?(content.getScrollSize().x - content.getSize().x)content.getScrollSize().y - content.getSize().y))
var slider = new Slider(scrollbar, handle, {
steps: steps,
mode: (horizontal?'horizontal':'vertical'),
onChange: function(step){
var x = (horizontal?step:0);
var y = (horizontal?0:step);
content.scrollTo(x,y);
checkImages();
}
}).set(230);
if( !(ignoreMouse) ){
$$(content, scrollbar).addEvent('mousewheel', function(e){
e = new Event(e).stop();
var step = slider.step - e.wheel * 30;
slider.set(step);
});
}
}

I am allowing my customers to use a rich text editor (wysiwyg) on a jsp page to create snippets of HTML code that can be used to describe their items. When they want to add an image, table or custom tag (something we wrote), they are presented with a properties box created using javascript on the same page just below the editor. Upon clicking 'Insert' button on the properties box, I use javascript to create an HTML string with the tag information and insert the string into the edited page where the cursor was. The problem is that I can't seem to find a reliable way to know where the cursor was.

More information:

I am a C programmer who morphed to a Java programmer who knows some javascript.

The JSP page looks like this:

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

Some text and text fields for some basic information


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


The javascript wysiwyg editor


--------------------------------------------------------------------
The properties box (changes depending on the type of item being inserted)
--------------------------------------------------------------------

Submit button, etc. for the page (so the information can be persisted)


I have tried:

1. Seven days of searching the web for helpful hints.

2. Using a popup window to get the properties (doesn't work because in IE7, closing the popup also kills the session... I need to use some of the beans on the main window on the popup.)

3. Processing onMouseDown and onKeyDown events storing the element information in a global variable so I could use it later to know the point of insertion. (Has not been reliable and the arrow keys present real problems with where the cursor ends up as that is different from where it was pressed.)

I am frustrated because I don't seem to be gaining on the problem. I suspect it is because I have missed something very simple.

Does anyone have any ideas?

Thanks in advance.

Carl

Hey all,

I am having issues with below script. Firebug returns:
form[0] is undefined
[Break on this error] $(form[0].elements).each(function() {

I have this under my form:
<script>
var thisForm = $('#validateForm');
thisForm.validation();
</script>



Code:

(function($) {
    /*
    Validation Singleton
    */
    var Validation = function() {
        
        var rules = {
            
            email : {
               check: function(value) {
                   
                   if(value)
                       return testPattern(value,".+@.+\..+");
                   return true;
               },
               msg : "Enter a valid e-mail address."
            },
            url : {

               check : function(value) {

                   if(value)
                       return testPattern(value,"https?://(.+\.)+.{2,4}(/.*)?");
                   return true;
               },
               msg : "Enter a valid URL."
            },
            required : {
                
               check: function(value) {

                   if(value)
                       return true;
                   else
                       return false;
               },
               msg : "This field is required."
            }
        }
        var testPattern = function(value, pattern) {

            var regExp = new RegExp("^"+pattern+"$","");
            return regExp.test(value);
        }
        return {
            
            addRule : function(name, rule) {

                rules[name] = rule;
            },
            getRule : function(name) {

                return rules[name];
            }
        }
    }
    
    /* 
    Form factory 
    */
    var Form = function(form) {
        
        var fields = [];
    
        $(form[0].elements).each(function() {
            var field = $(this);
            if(field.attr('validation') !== undefined) {
                fields.push(new Field(field));
            }
        });
        this.fields = fields;
    }
    Form.prototype = {
        validate : function() {

            for(field in this.fields) {
                
                this.fields[field].validate();
            }
        },
        isValid : function() {
            
            for(field in this.fields) {
                
                if(!this.fields[field].valid) {
            
                    this.fields[field].field.focus();
                    return false;
                }
            }
            return true;
        }
    }
    
    /* 
    Field factory 
    */
    var Field = function(field) {

        this.field = field;
        this.valid = false;
        this.attach("change");
    }
    Field.prototype = {
        
        attach : function(event) {
        
            var obj = this;
            if(event == "change") {
                obj.field.bind("change",function() {
                    return obj.validate();
                });
            }
            if(event == "keyup") {
                obj.field.bind("keyup",function(e) {
                    return obj.validate();
                });
            }
        },
        validate : function() {
            
            var obj = this,
                field = obj.field,
                errorClass = "errorlist",
                errorlist = $(document.createElement("ul")).addClass(errorClass),
                types = field.attr("validation").split(" "),
                container = field.parent(),
                errors = []; 
            
            field.next(".errorlist").remove();
            for (var type in types) {

                var rule = $.Validation.getRule(types[type]);
                if(!rule.check(field.val())) {

                    container.addClass("error");
                    errors.push(rule.msg);
                }
            }
            if(errors.length) {

                obj.field.unbind("keyup")
                obj.attach("keyup");
                field.after(errorlist.empty());
                for(error in errors) {
                
                    errorlist.append("<li>"+ errors[error] +"</li>");        
                }
                obj.valid = false;
            } 
            else {
                errorlist.remove();
                container.removeClass("error");
                obj.valid = true;
            }
        }
    }
    
    /*
    Validation extends jQuery prototype
    */
    $.extend($.fn, {
        
        validation : function() {
            
            var validator = new Form($(this));
            $.data($(this)[0], 'validator', validator);
            
            $(this).bind("submit", function(e) {
                validator.validate();
                if(!validator.isValid()) {
                    e.preventDefault();
                }
            });
        },
        validate : function() {
            
            var validator = $.data($(this)[0], 'validator');
            validator.validate();
            return validator.isValid();
            
        }
    });
    $.Validation = new Validation();
})(jQuery);