JavaScript - Anyone Give Me A Slide Function?
Hi! Can anyone help me make this spoiler slide open and close instead of just appear and disappear? I'd be really grateful
Code: <html> <head> <link href="http://fallscountanywhere.com/bbcodes/spoiler.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript"> function showSpoiler(btn, show) { var node = btn; while ( node.className == null || node.className != "spoiler" ) { node = node.parentNode; if ( node == null ) { alert("The html for spoiler is invalid"); return; } } var inners = node.getElementsByTagName("div"); inners[0].style.display = show ? "none" : "block"; inners[1].style.display = show ? "block" : "none"; } </script> </head> <body> <div class="spoiler"> <img src="http://i.imgur.com/6Uq7Y.png" align="right"> <div class="inner"> <input type="button" onclick="showSpoiler(this, true);" value="Show" /> </div> <div class="inner" style="display:none;"> <input type="button" onclick="showSpoiler(this, false);" value="Hide" /> <div class="text">{param}</div> </div> </div> </body> </html> Similar TutorialsHi, The purpose of a function newValue() is to get the value of input text field at the moment the 'roll' button is clicked. It is also necessary to give the value of the the_value variable out of newValue() function. This is to store the value in another variable, so that a moment later it is possible to know what was the value at the time the 'roll' button was clicked. It does not work the way it is at the moment, since always when newValue() function is called, it knows the present value in the text field but not the one at the time of the click. Cookies could do if everyone allows them, so in this case they will not work. Any ideas how to give a value out of the function / (to another function)? [CODE] <script type="text/javascript"> function newValue() { var the_value; the_value = document.the_form.text_name.value; } </script> <form name="the_form" > <input type="text" name="text_name" value="117" size="5" maxlength="3" /> <input type="button" name="button_name" value="roll" onclick="newValue();rollNumbers();" /> </form> [CODE] <script> function calculateamt() { //var ckdp122 = parseFloat(document.getElementById('ckdp').value,2); var ty = parseFloat(document.getElementById('t1').value,2); var zx = parseFloat(document.getElementById('t3').value,2); var zy = parseFloat(document.getElementById('t2').value,2); var zz = parseFloat(document.getElementById('t4').value,2); //var zz = parseFloat(document.getElementById('t3').value,2); //var eey=(((ty)-(zz))/(ty))*100; //var deey=eey.toFixed(2); var qq=(ty)*(zx); var rr=(zy)*(zz); //document.getElementById('diffob').value=deey; var r=(qq)+(rr); document.getElementById('ta').value=r; } function calculateamt1() { //var ckdp122 = parseFloat(document.getElementById('ckdp').value,2); var ty1 = parseFloat(document.getElementById('t11').value,2); var zx1 = parseFloat(document.getElementById('t15').value,2); var zy1 = parseFloat(document.getElementById('t12').value,2); var zz1 = parseFloat(document.getElementById('t14').value,2); //var zz = parseFloat(document.getElementById('t3').value,2); //var eey=(((ty)-(zz))/(ty))*100; //var deey=eey.toFixed(2); var qq=(ty1)*(zx1); var rr=(zy1)*(zz1); //document.getElementById('diffob').value=deey; var r1=(qq)+(rr); document.getElementById('tb').value=r1; } </script> <body> <p> </p> <form id="form1" name="form1" method="post" action=""> <table width="688" height="64" border="1"> <tr> <td width="62">Fork</td> <td width="146"><label> <input type="text" name="t1" id="t1" /> </label></td> <td width="146"><label> <input type="text" name="t3" id="t3" /> </label></td> <td width="140"><label></label></td> <td width="160"><label> <input type="text" name="ta" id="ta" /> </label></td> </tr> <tr> <td> </td> <td><label> <input type="text" name="t2" id="t2" /> </label></td> <td><label> <input type="text" name="t4" id="t4" onkeyup="calculateamt()" /> </label></td> <td> </td> <td><label> <input type="text" name="textfield6" id="textfield6" /> </label></td> </tr> <tr> <td width="62">Brake</td> <td width="146"><label> <input type="text" name="t11" id="t11" /> </label></td> <td width="146"><label> <input type="text" name="t15" id="t15" /> </label></td> <td width="140"><label></label></td> <td width="160"><label> <input type="text" name="tb" id="tb" onkeyup="calculateamt1()" /> </label></td> </tr> <tr> <td> </td> <td><label> <input type="text" name="t12" id="t12" /> </label></td> <td><label> <input type="text" name="t14" id="t14" /> </label></td> <td> </td> <td><label> <input type="text" name="textfield6" id="textfield6" /> </label></td> </tr> </table> </form> i have written 2 functions for the above ta and tb calculations but tb and tb are same calculations so what i want to do is only one funcntion to calculate both values plz help me to do this using one function plzzzzzzzzzzzz help me i am trying to slide multiple elements in my page at the same time. I wrote a script that can do one element at a time: Code: var count; var obj; function slide(elem,endy,endx,time){ obj=elem; count=time; currenty=obj.style.top.split('p')[0]; currentx=obj.style.left.split('p')[0]; deltay=endy-currenty; deltax=endx-currentx; yrate=deltay/time; xrate=deltax/time; framey=0; framex=0; fooy=setInterval("movey(obj)",1); foox=setInterval("movex(obj)",1); } function movex(obj){ framex++; currentx=currentx*1+xrate; obj.style.left=Math.floor(currentx); if(framex==count){ clearInterval(foox); } } function movey(obj){ framey++; currenty=currenty*1+yrate; obj.style.top=Math.floor(currenty); if(framey==count){ clearInterval(fooy); } } is their anyway to modify this code so it does not use global variables and can run multiple instances simulatnuasly. Hi, I'm a complete novice using javascript. I'm trying to get a mootools plugin to work with a slide in/slide out javascript using multiple divs. Here's the page: http://pawsdogs.com/test/Site/work2.htm The mootools code (Noobslide) slides a main image on the right when you click thumbnails on the left, which are wrapped in a thumb mask using CSS. The first row of thumbnails works perfectly, but when it's passed on to the next div the mask isn't passed on and the effect breaks down. Thanks so much if anyone can help! Here's the html: Code: <li><a href="#" id="slidecontrol_2" class="slidecontrol">Click Here</a> <div id="slidedisplay_2" style="display:none;"> <div id="thumbs7"> <div class="thumbs"> <div><img src="images2/img4.jpg" alt="Photo Thumb" /></div> <div><img src="images2/img5.jpg" alt="Photo Thumb" /></div> <div><img src="images2/img6.jpg" alt="Photo Thumb" /></div> </div> <div id="thumbs_mask7"></div> <p id="thumbs_handles7"> <span></span> <span></span> <span></span> </p> </div> </div></li> <li><a href="#" id="slidecontrol_3" class="slidecontrol">asdf</a> <div id="slidedisplay_3" style="display:none;"> <div id="thumbs7"> <div class="thumbs"> <div><img src="images2/img2.jpg" alt="Photo Thumb" /></div> <div><img src="images2/img3.jpg" alt="Photo Thumb" /></div> </div> <div id="thumbs_mask7"></div> <p id="thumbs_handles7"> <span></span> <span></span> </p> </div> </div> The javascript: Code: $(document).ready(function () { $('a.slidecontrol').click(function(){ var $this = $(this); var divID = $this.attr("id").replace("slidecontrol_", "slidedisplay_"); var $div = $('#'+divID); if ($div.is(':visible')) { $div.slideUp(500); } else { $div.slideDown(500); } return false; }); }); The CSS: Code: #thumbs7{ position:relative; width:200px; clear:both; height:41px; overflow:hidden; } #thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{ position:absolute; top:0; width:100%; height:41px; } #thumbs7 .thumbs div, #thumbs_handles7 span{ display:block; width:60px; height:41px; margin:0; float:left; cursor:pointer; } #thumbs7 .thumbs div img{ width:54px; float:right; } #thumbs_handles7 span{ background:url(../images2/thumb_invisible.gif) no-repeat; } #thumbs_mask7{ width:1200px; background:url(../images2/thumbs_mask.gif) no-repeat center top; } I need some goals/projects because without them, it is very hard to stay interested. Does anyone have any interesting/fun projects that I can work out so I can learn some more javascript? Thanks coders! Hello, I have a image which need to be cropped from edges slightly to give a hexagon shape. Please see the attached image to see how the appear ance should be. Would lik to crop images while loading on to this frames/boxes. can we do using javascript, can someone help. Thanks. Hi, i have a page with lots of checkboxes and hidden fields. When i tick a checkbox i want it to give the hidden filed a value. But give it no value if it is not ticked. For every checkbox i have a hidden field is with it. Both the checkbox and the hidden field send information. I have used some js scripts but they don't seem to work with more than one checkbox. Please can you help. Example: <input type="checkbox" name="box1" id="box1" value="4th July 2009,"> <input type="hidden" name="price1" id="price1" value="0"> So when box1 is ticked it then gives price1 a value. But if not ticked then the value remains at 0. I want it to give a value of 699. There will be about 100 checkboxes and hidden fields on the page. Also onclick behaviours do not work because it may still send the information if the checkbox is not checked. So for the next checkbox and hidden field i use box2 and price2. Thanks for your help. I'm trying to allow a user to download a file off my server without opening a new page. How would I do that with JavaScript? Thanks! Hello everybody I have a page where I have several input text fields (the number of fields is variable), the input text fields are disable , only the first one is enable, as the user goes filling out the text fields, the next text field becomes available, each time the user fills out an input text field, the form is submitted. As I said, the number of text fields is variable, some times I have only one and other time I can have 7. I would like to create a javaScript function to put the next available text field ready to star writing, without having to click in the text field first. The id of my form is "reports" , the id of the table is,"run_params" and the id of my input texts is "inputp". I am using JSF, the HTML output generated for each field is id="reports:run_params:1:input" , the number 1 indicated that is the first input text, this number can go from 1 to 20. I have tried to create a code where I can read how many input fields I have and then create a loop that checks all of them and search for the field that is enable and empty, and put that field on focus. But so far my code doesn't work. I don't have too much experience with javaScript and I already have tried many different ideas, without success, I have not idea how to achieve this objective, because I don't know very well javascript's capabilities, so I don't know what it is possible and what it is not. Any help????!!! Thanks in advance Hi, am newbie in this domain ,so i appreciate any help of you. Am making a site for tattoos and i see somewhere an application in Java for changing text, it was simple text box where you write the text you want and down you choose the Font and down you have the text you want in the wanted fond. Thank you!
Hi, my javascript calculates a total figure. It rounds it up though and I want it to give me a decimal (x2) total. Please help. Here is my code so far: Code: <script type="text/javascript"> function calculateText() { var op1=document.getElementById('Age02'); var op2=document.getElementById('Girl35'); var op3=document.getElementById('Boy35'); var op4=document.getElementById('Girl610'); var op5=document.getElementById('Boy610'); var op6=document.getElementById('Age11'); var op7=document.getElementById('Guest'); var op8=document.getElementById('VIP'); var op9=document.getElementById('School'); var op10=document.getElementById('3DFilm'); var op11=document.getElementById('BFast'); var op12=document.getElementById('PNGift'); var op13=document.getElementById('PStand'); var op14=document.getElementById('PLrg'); var op15=document.getElementById('PReP'); var op16=document.getElementById('KyMg'); var op17=document.getElementById('SnwGlb'); var op18=document.getElementById('PBbl'); var op19=document.getElementById('USB'); var op20=document.getElementById('SantaL'); var op21=document.getElementById('SantaK'); var op22=document.getElementById('FreeP'); var op23=document.getElementById('PUpgrd'); var op24=document.getElementById('StaffP'); var op25=document.getElementById('CompEntry'); var op26=document.getElementById('241'); var op27=document.getElementById('50Percent'); var op28=document.getElementById('Voucher'); var result=document.getElementById('Total'); if(op1.value=="" || op1.value!=parseFloat(op1.value)) op1.value=0; if(op2.value=="" || op2.value!=parseFloat(op2.value)) op2.value=0; if(op3.value=="" || op3.value!=parseFloat(op3.value)) op3.value=0; if(op4.value=="" || op4.value!=parseFloat(op4.value)) op4.value=0; if(op5.value=="" || op5.value!=parseFloat(op5.value)) op5.value=0; if(op6.value=="" || op6.value!=parseFloat(op6.value)) op6.value=0; if(op7.value=="" || op7.value!=parseFloat(op7.value)) op7.value=0; if(op8.value=="" || op8.value!=parseFloat(op8.value)) op8.value=0; if(op9.value=="" || op9.value!=parseFloat(op9.value)) op9.value=0; if(op10.value=="" || op10.value!=parseFloat(op10.value)) op10.value=0; if(op11.value=="" || op11.value!=parseFloat(op11.value)) op11.value=0; if(op12.value=="" || op12.value!=parseFloat(op12.value)) op12.value=0; if(op13.value=="" || op13.value!=parseFloat(op13.value)) op13.value=0; if(op14.value=="" || op14.value!=parseFloat(op14.value)) op14.value=0; if(op15.value=="" || op15.value!=parseFloat(op15.value)) op15.value=0; if(op16.value=="" || op16.value!=parseFloat(op16.value)) op16.value=0; if(op17.value=="" || op17.value!=parseFloat(op17.value)) op17.value=0; if(op18.value=="" || op18.value!=parseFloat(op18.value)) op18.value=0; if(op19.value=="" || op19.value!=parseFloat(op19.value)) op19.value=0; if(op20.value=="" || op20.value!=parseFloat(op20.value)) op20.value=0; if(op21.value=="" || op21.value!=parseFloat(op21.value)) op21.value=0; if(op22.value=="" || op22.value!=parseFloat(op22.value)) op22.value=0; if(op23.value=="" || op23.value!=parseFloat(op23.value)) op23.value=0; if(op24.value=="" || op24.value!=parseFloat(op24.value)) op24.value=0; if(op25.value=="" || op25.value!=parseFloat(op25.value)) op25.value=0; if(op26.value=="" || op26.value!=parseFloat(op26.value)) op26.value=0; if(op27.value=="" || op27.value!=parseFloat(op27.value)) op27.value=0; if(op28.value=="" || op28.value!=parseFloat(op28.value)) op28.value=0; result.value=0; result.value=parseInt(result.value); result.value=parseInt(result.value)+parseInt(op1.value*5)+parseInt(op2.value*5)+parseInt(op3.value*5)+parseInt(op4.value*5)+parseInt(op5.value*5)+parseInt(op6.value*5)+parseInt(op7.value*0)+parseInt(op8.value*8.50)+parseInt(op9.value*3.75)+parseInt(op10.value*0)+parseInt(op11.value*10)+parseInt(op12.value*5)+parseInt(op13.value*3)+parseInt(op14.value*4)+parseInt(op15.value*2)+parseInt(op16.value*4)+parseInt(op17.value*5)+parseInt(op18.value*3)+parseInt(op19.value*5)+parseInt(op20.value*4)+parseInt(op21.value*3)+parseInt(op22.value*0)+parseInt(op23.value*1)+parseInt(op24.value*0)+parseInt(op25.value*0)+parseInt(op26.value*4)+parseInt(op27.value*2)-parseInt(op28.value); } </script> I currently am using a mootools popup on www.Hope1st.com to play his music videos.....and its working really well...only thing is on some computers (mac with firefox browser) when someone pauses the video ...the draggable box gets stuck on their mouse weird right? yea i know... so i thought of a solution...instead of the whole box being draggable why not just the black titlebar be draggable? i have absolutely no idea on how to do this....but i do have the entire JS code....are you ready? its a mouthful....a million thanks to whoever is talented enough to help me Code: var mooSimpleBox = new Class({ options: { width: 300, height: 200, opacity: '0.8', btnTitle: "Ok", closeBtn: null, boxTitle: "messageBox", boxClass: 'mainBox', id: 'myID', fadeSpeed: 500, box: null, addContentID:null, addContent: null, boxTxtColor: '#000', isVisible: false, isDrag: true }, initialize: function(options){ this.isVisible = false; if(options['isDrag']) this.isDrag = options['isDrag']; if(options['width']) this.width = options['width']; if(options['height']) this.height = options['height']; if(options['opacity']) this.opacity = options['opacity']; if(options['btnTitle']) this.btnTitle = options['btnTitle']; if(options['boxTitle']) this.boxTitle = options['boxTitle']; if(options['boxClass']) this.boxClass = options['boxClass']; if(options['boxTxtColor']) this.boxTxtColor = options['boxTxtColor']; if(options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed']; if(options['id']) this.id = options['id']; if(options['closeBtn']) this.closeBtn = $(options['closeBtn']); if(options['addContentID']) this.addContentID = options['addContentID']; if(options['addContentID']) { this.addContent = $(this.addContentID).innerHTML; $(this.addContentID).setStyle('visibility','hidden'); $(this.addContentID).remove(); } this.createBox(); }, createBox: function(){ this.box = new Element('div'); this.box.addClass(this.boxClass); }, clickClose: function(){ $(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){ }).start(this.opacity,0); this.box.setStyle('display','none'); this.isVisible = false; }, fadeOut: function(){ if(this.isVisible){ $(this.box).effect('opacity',{ wait:true, duration:this.fadeSpeed, transition:Fx.Transitions.linear }).chain(function(){ }).start(this.opacity,0); this.isVisible = false; } }, fadeIn: function(){ if (document.documentElement && document.documentElement.clientWidth) { theWidth=document.documentElement.clientWidth; }else if (document.body) { theWidth=document.body.clientWidth; } if (window.innerHeight) { theHeight=window.innerHeight; }else if (document.documentElement && document.documentElement.clientHeight) { theHeight=document.documentElement.clientHeight; }else if (document.body) { theHeight=document.body.clientHeight; } var top = window.getScrollTop(); var boxTop = (theHeight - this.height) / 2 ; boxTop = (boxTop + top); var boxLeft = (theWidth - this.width) / 2; this.box.setStyle('top',boxTop); this.box.setStyle('left',boxLeft); this.box.setStyle('position','absolute'); this.box.setStyle('width',this.width); this.box.setStyle('height',this.height); this.box.setStyle('opacity',this.opacity); this.box.setStyle('cursor','move'); this.box.setStyle('z-index','999990000'); this.box.setAttribute('id', this.id); this.box.setStyle('visibility','hidden'); this.box.injectInside(document.body); if(this.isVisible == false){ this.box.effect('opacity',{ wait:true, duration: this.fadeSpeed, transition: Fx.Transitions.linear }).start(0,this.opacity); this.addHT(); this.isVisible = true; } }, addHT: function(){ this.closeBtn = new Element('button', { styles: { 'border': 'none', 'background-image':'url(modules/mod_moopopup/moopopup/images/bg_button.gif)', 'color':'#fff', 'position':'absolute', 'bottom':'3px', 'right':'3px', 'width':'44px', 'height':'19px', 'font-size':'13px', 'font-weight':'bold', 'font-family':'arial', 'cursor':'pointer' } }) var width = this.width.toInt() + 5; if(window.ie){ var titleBar = new Element('div', { styles: { 'width' : width, 'height': 'auto', 'background-repeat': 'repeat-x', 'background-position': 'right top', 'line-height': '20px', 'padding': '5px 5px 5px 10px', 'position': 'absolute', 'clear': 'both', 'margin-bottom': '10px', 'top': '0px', 'left': '0px', 'color': '#eee' } }) }else{ var titleBar = new Element('div', { styles: { 'width' : width, 'height': 'auto', 'background-repeat': 'repeat-x', 'background-position': 'right top', 'line-height': 'auto', 'padding': '5px 5px 5px 10px', 'position': 'absolute', 'clear': 'both', 'margin-bottom': '10px', 'top': '0px', 'left': '0px', 'color': '#eee' } }) } $(titleBar).innerHTML = this.boxTitle; var insideDiv = new Element('div',{ styles: { 'padding':'10px' } }); insideDiv.setAttribute('id','myContent'); this.box.innerHTML = ""; insideDiv.injectInside(this.box); insideDiv.innerHTML = this.addContent; this.closeBtn.innerHTML = this.btnTitle; $(this.closeBtn).addEvent('click',this.clickClose.bindWithEvent(this)); titleBar.injectInside(this.box); this.closeBtn.injectInside(this.box); if(this.isDrag == 'true'){ this.box.makeDraggable(); } } }); mooSimpleBox.implement(new Options, new Events); Dear friends, I was looking for some help on getting all the ten digits mobile numbers in the current webpage and assign an onclick event to it just by a click of a button. Likewise, Suppose there are mobile numbers Code: <p>9876543210 Blah....Blah...Any other content.9654321000</p> <input type="button" value="Get 10 digit mobile numbers" onclick="getnumbers();" /> in the current webpage. and the user clicks on a button. Then all the ten digit mobile numbers(in this case two numbers 9876543210 and 9654321000) gets the html as Code: <p><span onclick="openpopup('9876543210')">9876543210</span> Blah....Blah...Any other content.<span onclick="openpopup('9654321000')">9654321000</span></p> I am a PHP guy and probably suck at JS. Tried experimenting with the following code but didn't got it to work. Code: var html = document.getElementsByTagName('body')[0].innerHTML; and match = new RegExp("/\d{10}/"); replaceWith = "<span style='text-decoration:underline;' onclick=\"openpopup('--NUMBER--')\" >--NUMBER--</span>", replaced = html.replace(pattern,replaceWith); Please get me out of this glitch as it is getting harder for me to do it. If number is more than 24 digits, modulus operator is not giving correct output here attached sample code [code]<script type="text/javascript"> var a=10000000000000000000000.0; var b=10.0; var c=a % b; alert("c"+c); </script>[code] please tel me solution Good Day: I am very interested in a slide show as seen on this website (www.linksyssolutions.com). Can anyone direct me as to where I could find a script for this slideshow to use on my site. Thanks very much in advance. I am using ASP.NET and AJAX here. basically what I want is a nice little slide effect to show the next batch of images in a mini slide show. Example: << prev [image1] [image2] [image3] [image4] Next >> << prev [image5] [image6] [image7] [image8] Next >> so when the user presses next or previous, it will SLIDE to the left/right. the databinding is done at the server side end and in an update panel so it does an async postback when they press next/prev. how can I go about doing this type of effect? I have the following 3 buttons on my page. I need when on hover on each respective button, the button to light up with a bg image and a slide out rollover in the top direction. How can I achieve this? <div style="padding-left:45px;width:852px;"> <a href=".html" class="Button"> <div style="text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat"> <span id="homeButtonText">Question 1</span><br /> </div> </a> <a href="" class="Button"> <div style="margin-left:18px;text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat"> <span id="homeButtonText">Question 2</span><br /> </div> </a> <a href="" class="Button"> <div style="text-align:center;padding-top:15px;float:right;width:270px;height:45px;background-image:url(images/homeBG.png);margin-right:5px;background-repeat:no-repeat"> <span id="homeButtonText">Question 3</span><br /> </div> </a> </div> I need a sort of slide show feature for my page (specifics below). I've spent a lot of time researching this and have not found what I'm looking for. I'm new to jquery and not sure how big of a chore this will be, but here goes: 1. There will be a title bar placed within a right and left arrow on either side. 2. The right and left arrows should cycle through a list of titles (when the right/left arrow is clicked, the title bar will change to the next/previous title in the list). 3. When each title bar is moused over, a new image will fade in above, and then fade out on mouse out. I hope this all makes sense. I'm not looking for some fancy predesigned slideshow, I'll be using my own layout and images. I just need the basic code to perform these actions. Any help would be most appreciated.. Hello guys! :-) So, this is my first post so bare with me I'm currently under education as a webdesigner/developer, and for my exams i need this slide-in function, of a <div> i made. It has to be javascript, and as simple as possible :-) I've found alot of working scripts, but with all sorts of useless junk I can't have in my final result. So: Does any of you know a simple method of making an object slide-in from the side on MO, and slide back out when mouse is removed? Ty in advance! :-) |