JavaScript - Need Help, Point Me In The Right Direction. Image Map/browser
Someone please point me in the right direction. Basically what i'm trying to do is, Post up a nice image map up top of a page with several diff images (all same dimensions), and when the user clicks on one of the images, it loads down in a section below, without reloading the page.
I have drawn a small diagram to show you guys what i'm talking about. So far, all I've found, are scripts that use some sort of lightbox that covers the entire page. I would like to try to stay away from flash if I can. The main browser, does'nt necessarily have to be one big image with a map, but it would make it look so much better if it looked matched the games menu. I'm trying to replicate a stats game menu, inside my webpage, so ppl can browse just like they do in game. Example: What I'm trying to replicate: When a weapon on this menu is clicked, it loads up on the right, and gives a brief description. I"m just trying to replicate the functionality of this menu really. So are there any kind of scripts out there that already exist, where I could accomplish this? or how would i go about this. just need someone to point me in the right direction. Thanks a million Similar TutorialsI am well versed in ActionScript and I have done a lot of this already in As3.0 using XML Node Object. However my client wants this application to be more friendly with iphones/ipads. So we are going to have to restart this and go with Javascript which we know very little about. Basically the internet application is going to be a 'Build your own Itinerary' for a huge rock event, where we have to sort each band selected by the user based on [Date:4th or 5th of July] and [Time Playing]. Those are the only two nodes we need to check, the [date] is obviously going to split it into two groups, and the [Time] is when the band is playing in that group and there will need to be an if/then to check for conflicts. other nodes like [Name] would be used to just add each of the bands selected to that list with .append() I guess. And [Stage] is a somewhat irrelevant node stored and displayed with each item. So. In the professional opinion of those on this board... Where is a good place for a group of 'AS3.0 wise guy hacks' to start cracking at this with JavaScript? What would you suggest for rookies like us making an emergency jump to HTML/Javascript? Thanks so much in advance for the assistance. Hello I need to do a portfolio of paintings and i found a site similar of what i have in mind. The site is http://www.pikaboo.be/ It's great because its using javascript only. I just don't know how to start my reserach for that transitions and moving objects and that stuff Anyone can give me a few tips on how to start? I have been looking at jquery and mootools it does some stuff taht it's on this site but the movement of objects and the way as they appear on the screen one by one and all that pretty stuff i have no idea how to search. Anyone can help me on where to start and how to do something like this? THank you Hi im wanting to know how does the computer know whos scored more in a game? Thanks, Paul 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); }); } } Hello, I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document). Links: http://www.courtneyhunt.com.au/press_bg.html http://www.courtneyhunt.com.au/press_gallery.html I am a complete novice with JavaScript so if anyone could help that would be great. Thank you in advance. Hi, So here is my problem. I have a main image that has a bunch of images (e.g., stars) on top. I place the stars in absolute positions on top of the main image. If a user resizes the brower, then the position of the main image changes, so then the stars are off position (not on top of the main image). Should I: 1) make the main image be in an absolute position? or 2) do something else such that the main image moves around if the browser is resized? but then I don't know how to re-adjust the positions of the stars on the fly. hello, i have a question about changing the selected text direction using javascript . i had searched about it , but no result i found that execCommand('BlockDirRTL', false, null); execCommand('DirLTR'); execCommand('BlockDirLTR', false, null); execCommand('DirRTL'); unavailable till now , but it's executed for other controls (align left , paste , cut , .......) any recourses or help plz thanks in advance . Hi, So I have absolutely no experience or any skill in coding, so that's why I'm here. At the moment I just want to develop a program or a command string (Probably the wrong term) that let's say can open a program e.g Google chrome then type in my username then tab then my password. I.E I run this program and it opens my gmail account (Note I would do this without gmail's function of auto login.) Is javascript the right coding language to use for this sought of thing? 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 Hello All, How can I prevent a browser from letting an image drag. I've tried this snippet: Code: document.onmousemove = function() {return false}; Thanks in advance! Just curious if anyone has a crossbrowser version of the Popup Image Viewer script that's in the Post a JavaScript section. Seems that all of the ones in there (original and modifications) are browser specific, whereas I need something that will work for all browsers, or at least IE and firefox.
Basically, i have an image that i want it to be resized when i maximize and change browser size, so it is always centered. I have to use only javascript. I tried many window.resize functions but nothing works. Lets say the image is called 0000.jpg. Anyone has any ideas how to make this? Thank you in advance. 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] My question is twofold. First, is there a way to have a javascript file display an externally hosted image when opened with a browser? I mean such a way where the URL of the javascript file can be referenced by an html document and display an image? Furthermore, is there a way to have this be a different image depending on the time of day and timezone of the user, specifically one image in the morning and a different image in the evening? I apologize if I posted this in the wrong section, but I wasn't sure where else this could go. Hi. Sort of new to Javascript. I am implementing a zoom in feature, but actually tricking the user as a full screen image is simply being stretched. I plan to apply it to several pages, and don't really fancy working out the pixels for each. I believe that if you simply put width: 150% height 150% it will change the image size relative to the browser. I don't want that, I want it relative to the original image size. Could I do sort of height*1.5 or something? How would I write that if so? Thanks! Code: <script> $('#in').click(function() { $('#drag img').animate({ width: '150%', height: '150%', }, 5000, function() { // Animation complete. }); }); </script> 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 still struggling for a solution here. I have a background image that auto-resizes based on browser window / screen resolution. I want my top header menu, which requires links, to act in the same way and be in roughly the same position/size based on browser window. Is this possible? In the sample below, the image is just part of the background image to give you an idea of the look I am trying to duplicate. Is there a Javascript out there that will help me or will I be stuck having to rework my design? http://www.uberbotjones.com/sanny/test.html This site is really driving me crazy. Hi, I am a JavaScript novice, and appreciate any help you can give. For design reasons, we did not like the appearance of a still video on our web page. So I write a short little script to replace a picture that we selected, with the code for a flash player, once the image was clicked. The code works exactly as designed on IE and Chrome. It works *almost* as designed on Firefox and Safari -- but on those browsers the "fullscreen" button in the plugin doesn't work. It is *not* a problem with the FlowPlayer code. If I simply put the FlowPlayer code into a web page, it works fine. I think that somehow some browsers do not want to let the FlowPlayer expend outside of the JavaScript object box I created -- though that is just an hypthesis. If you have any insight or suggestions, I would appreciate it. The page is at http://sudval.org/test.html The code: Code: <div style="line-height: 12px;letter-spacing: 0px;"> <script type="text/javascript"> function changeText(){ var strOut; strOut = " <object id=\"videoplayer\" width=\"334\" height=\"204\" type=\"application/x-shockwave-flash\" data=\"http://app.provdn.com/flash/flowplayer.swf\">"; strOut = strOut + " <param name=\"movie\" value=\"http://app.provdn.com/flash/flowplayer.swf\" />"; strOut = strOut + " <param name=\"allowFullScreen\" value=\"true\" />"; strOut = strOut + " <param name=\"allowscriptaccess\" value=\"always\" />"; strOut = strOut + " <param name=\"flashvars\" value=\"config={\'playlist\':[{\'url\':\'http://cdn.provdn.com/4931/thumbnail/frame_0000.png\',\'scaling\':\'fit\'},{\'url\':\'http://app.provdn.com/output_videos/0e7c9ace9c16d4351b5108133cf1efaceebe89bb\',\'autoPlay\':true,\'scaling\':\'fit\'}],\'plugins\':{\'controls\':{\'url\':\'http://app.provdn.com/flash/flowplayer.controls.swf\',\'playlist\':false,\'backgroundColor\':\'#000000\',\'tooltips\':{\'buttons\':true,\'fullscreen\':\'Enter Fullscreen mode\'}},\'bwcheck\': { \'url\': \'http://app.provdn.com/flash/flowplayer.bwcheck-3.1.3.swf\', \'netConnectionUrl\': \'http://cdn.provdn.com/bitrate/test.mp3\', \'bitrates\': { \'http://app.provdn.com/output_videos/542539e49d4056ce6d3968958313be3dee94614b\':200, \'http://app.provdn.com/output_videos/d31b9a3562c35244cb2c2a28bb4a9aaa1edd1995\':600, \'http://app.provdn.com/output_videos/0e7c9ace9c16d4351b5108133cf1efaceebe89bb\':1000 }, \'urlPattern\': \'{1}\', \'urlExtension\': \'swf\' }}}\" />"; strOut = strOut + " <param name=\"bgcolor\" value=\"#000000\" />"; strOut = strOut + " <param name=\"wmode\" value=\"opaque\" />"; strOut = strOut + " <!--[if gt IE 6]><!-->"; strOut = strOut + " <object width=\"334\" height=\"204\" type=\"video/quicktime\">"; strOut = strOut + " <param name=\"src\" value=\"http://cdn.provdn.com/4931/thumbnail/frame_0000.png\" />"; strOut = strOut + " <param name=\"href\" value=\"http://app.provdn.com/output_videos/54339bc0f4a7c39dd0d746f52139d3a6b6c46375\" />"; strOut = strOut + " <param name=\"target\" value=\"myself\" />"; strOut = strOut + " <img src=\"http://cdn.provdn.com/4931/thumbnail/frame_0000.png\" width=\"334\" height=\"204\" alt=\"No Video\" title=\"No video playback capabilities.\" />"; strOut = strOut + " </object>"; strOut = strOut + " <!--<![endif]-->"; strOut = strOut + " </object>"; document.getElementById('boldStuff').innerHTML = strOut ; } </script> <b id='boldStuff' onclick='changeText()'><img src="images/videoimg.png" alt="no video" title="Introductory Video" width="334" height="204"></b> <p><A HREF="/08_cont_03.html"><img src="images/OH012211.jpg" alt="button" width="161" height="181" title="Open House!" BORDER="0" ALIGN="right" style="margin-left: 10px;"> </A></p> <font size="2" style="font-family:arial; font-size:80%; line-height:1.3;"> <p id='boldStuff' onclick='changeText()' align="left"> This video is a glimpse into the life of our school. Enter a world of young people who are exuberant about their lives, and are fully in control of their education. We hope you will enjoy their spirit, their focus, and above all their intensity in pursuing their passions. <br><img src="images/playvid.png" alt="Play Video" title="Play Video" width="100" height="25" style="margin-top:10px;"> </p> </font> </div> Let me start of by saying that I'm a designer, not a programmer so I'll apologize in advance for having very little knowledge of javascript. I found a free script for a auto-advancing slideshow that allows you to give each image in the slideshow a unique link. My problem is that when you click on one of the pictures the link opens in a new window instead of loading in the default browser window. I have tried to search google for an answer but my lack of javascript knowledge has left me scratching my chin. Here's the code in the head of my page: Code: <script language="JavaScript1.1"> <!-- /* JavaScript Image slideshow */ var slideimages=new Array() var slidelinks=new Array() function slideshowimages(){ for (i=0;i<slideshowimages.arguments.length;i++){ slideimages[i]=new Image() slideimages[i].src=slideshowimages.arguments[i] } } function slideshowlinks(){ for (i=0;i<slideshowlinks.arguments.length;i++) slidelinks[i]=slideshowlinks.arguments[i] } function gotoshow(){ if (!window.winslide||winslide.closed) winslide=window.open(slidelinks[whichlink]) else winslide.location=slidelinks[whichlink] winslide.focus() } //--> </script> and here's the Body code: Code: <script> <!-- //configure the paths of the images, plus corresponding target links slideshowimages("images/services/3d_meter.jpg", "images/services/3d_prototype.jpg", "images/services/3d_stage_renderings.jpg", "images/services/atsite.jpg", "images/services/netstar.jpg", "images/services/photo_manipulation.jpg", "images/services/powerpoint.jpg") slideshowlinks("/", "/", "/", "/", "/", "/", "/") //configure the speed of the slideshow, in miliseconds var slideshowspeed=8000 var whichlink=0 var whichimage=0 function slideit(){ if (!document.images) return document.images.slide.src=slideimages[whichimage].src whichlink=whichimage if (whichimage<slideimages.length-1) whichimage++ else whichimage=0 setTimeout("slideit()",slideshowspeed) } slideit() //--> </script> fooling around with it, I think I have determined that my problem is the window.open in the function gotoshow, but again, I'm a designer who has little knowledge of how this actually works. If it helps, here is a link to my site where I have the slideshow, http://gravescreativedesign.com/services.html All of the images link to the index page for my site at the moment for testing purposes, but these images will eventually link to different urls within my portfolio section of my website. 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... |