JavaScript - Jquery Position Of <li> Tag
Theoretically this code was supposed to be ok isn't it? But nothing is happening! help! Similar TutorialsI'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome Code: <script type="text/javascript" > window.onscroll = function() { if( window.XMLHttpRequest ) { var x = 0 -document.documentElement.scrollTop; var toP = String(x); var toPP = toP + "px"; document.getElementById('fire').style.position = 'fixed'; document.getElementById('fire').style.top = toPP; } } </script> I need to convert a position:fixed element to position:absolute when the user resize their browser window below 1000px. Right now it does nothing. The element always keeps the fixed positioning even after resizing the window. Here's what I have right now: Code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <base href="http://www.area51entertainment.co/" /> <title>Emoto <?php echo "$section"; ?></title> <meta charset="UTF-8" /> <meta name="verify-v1" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="author" content="Andrew McCarrick" /> <meta name="robots" content="index, follow" /> <style type="text/css"> body,html { background: #FFFFFF; /* Old browsers */ color: #000000; font-family: Verdana; margin-right:auto; margin-left:auto; max-width:1000px; padding: 0px; margin-top: 0px; margin-bottom: 0px; } </style> <link rel="stylesheet" href="emoto/style.css" media="screen" /> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" /> <link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" /> <link rel="image_src" href="./logo.png" /> <script language="javascript" src="emoto/float.js"></script> </head> <body> <div class="wrapper"> <div id="header_float"> <div class="header_wrapper"> <div class="logo"> Picture </div> <div class="links"> Home | Settings | Notifications | Requests | Messages | Search Bar </div> <div class="links_right"> Profile Link/Sign-Out </div> </div> </div> <div class="content_wrapper"> Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2 </div> </div> </body> </html> style.css Code: a:link {color: #FFFFFF; text-decoration: none;} a:visited {color: #FFFFFF; text-decoration: none;} a:active {color: #FFFFFF; text-decoration: none;} a:hover {color: #3399FF; text-decoration: none;} .wrapper{ min-height: 2000px; min-width: 1000px; } #header_float{ width: 100%; min-width: 1000px; height: 35px; left:0; right:0; top:0; position: fixed; background: #49963A; z-index: 1000; } .header_wrapper{ width: 1000px; height: 35px; margin-right:auto; margin-left:auto; padding: 0px; margin-top: 0px; margin-bottom: 0px; color: #FFFFFF; } .logo{ float: left; width: 150px; height: 25px; font-size: 26px; position: relative; top: -1px; left: 8px; } .links{ float: left; width: 670px; height: 25px; position: relative; top: 7px; } .links_right{ float: right; width: 180px; height: 25px; position: relative; top: 7px; } .content_wrapper{ position: relative; top: 35px; width: 995px; min-height: 450px; } img{ border: 0px; } float.js Code: if (screen.availWidth<=999) document.getElementById('header_float').style.position = 'absolute'; else document.getElementById('header_float').style.position = 'fixed'; So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){ //References var change = $("#menu li a"); var loading = $("#loading"); var content = $("#content"); //Manage click events change.click(function(){ //show the loading bar showLoading(); //load selected section if(this.id == "home") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/index.php", hideLoading); content.slideDown(); } else if(this.id == "secondpage") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/secondpage.php", hideLoading); content.slideDown(); } else { //hide loading bar if there is no selected section hideLoading(); } }); //show loading bar function showLoading(){ loading .css({visibility:"visible"}) .css({opacity:"1"}) .css({display:"block"}) ; } //hide loading bar function hideLoading(){ loading.fadeTo(1000, 0); }; }); Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) { function load(num) { $('#content').load(num +".html"); } $.history.init(function(url) { load(url == "" ? "1" : url); }); $('#ajax-links a').live('click', function(e) { var url = $(this).attr('href'); url = url.replace(/^.*#/, ''); $.history.load(url); return false; }); }); hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?
What is "lb-position" and how is it used? It's used in a lightbox tutorial, and in looking for an explanation I've found it in a handful of places, but I don't know what it is or what it does. Thank you.
Hi, i am simply trying to alert the left position of a css layer. Javascript: Code: var Element = document.getElementById('box'); alert(Element.style.left); CSS Code: #box {position:absolute; left:150px; top:150px; background-color:blue; height:100; width:100;} HTML Code: <div id="box"> </div> The problem is the alert is blank and i can't understand why. thanks is it possible to make the mouse be at a given position on the screen using javascript for example i am writing a element resize script and i would like to have it so when u click on the resize button the cursor moves to the bottom right corner of the element for the starting position
So, here is my question: Is there some possibility to put the horizontal scroll bar of the web browser into the center if the "width" of web page are bigger then the "width" of the web browser screen? So I don't need to scroll to right if I open the page, but the horizontal scroll bar will be positioned in the center. That code should do the same think like I when I take the scroll bar and put it in the center position, but this should be happen when I load the page automatically. Or how can I do that? thanks to all . . . Hello I am hoping to position some JavaScript on a Web page. Would I use something like this: CSS Code: #diagram { margin-left: 200px; margin-top: 100px; } HTML <script>JavaScript code here</script> <div id="diagram" </div> Thanks for any advice. This code works great for splitting value to textbox.. However; It quits working in example 2 when I move the select outside the form tags Code: <!-- EXAMPLE 1 WORKS--> <script type="text/javascript"> function Split(sel,first) { if (sel.selectedIndex == 0 ) return; var temp = sel.value.split(","); sel.form["F"+first].value = temp[0]; sel.form["F"+(first+1)].value = temp[1]; sel.form["F"+(first+2)].value = temp[2]; } </script> <form method='post'> <input type="text" name="F1" value="" > <input type="text" name="F2" value="" > <input type="text" name="F3" value="" > <select onChange="Split(this,1)"> <option> ===Select Color ==== </option> <option value='000,000,000'>black</option> <option value='169,169,169'>grey</option> <option value='000,000,255'>blue</option> <option value='153 102,255'>aqua</option> </select> </form> Help with the onChange to work outside the form tags. Code: <!-- EXAMPLE 2 NEED HELP--> <script type="text/javascript"> function Split(sel,first) { if (sel.selectedIndex == 0 ) return; var temp = sel.value.split(","); sel.form1["F"+first].value = temp[0]; sel.form1["F"+(first+1)].value = temp[1]; sel.form1["F"+(first+2)].value = temp[2]; } </script> <form method='post' name="form1"> <input type="text" name="F1" value="" > <input type="text" name="F2" value="" > <input type="text" name="F3" value="" > </form> <!-- NEED TO MODIFY THE ONCHANGE TO WORK IN THIS POSITON?? --> <select onChange="Split(this.form1.value,1)"> <option> ===Select Color ==== </option> <option value='000,000,000'>black</option> <option value='169,169,169'>grey</option> <option value='000,000,255'>blue</option> <option value='153 102,255'>aqua</option> </select> hi! i would just like to say first of all, that i only use forums for help unless i've exacerbated all other forms of help as i am such a javascript noob! so please bear with my while i try to explain my problem... i've isolated the javascripts to this page > http://nang-nang.net/tumblr/blog/help.html in this example the plant image is using lightbox 2 and the bird.gif is using prototip2 to create a tooltip (that displays my latest tweet) (i should mention that these scripts will be used to pimp out my tumblr blog/portfolio http://bubblejam.tumblr.com eventually) the problem: i need the tooltip to stay put! i've managed to put the bird in a <div style="position:fixed..." etc so that's fine. but the tooltip isn't fixed and moves as the page scrolls down! can anyone take a look at what javascript i've got so far and fingers crossed there's a simple solution! thanks!! Hi, Im trying to change the position of a div when a button is clicked. The js is: Code: function curPos() { objDivStrip = document.getElementById('thumbview'); return objDivStrip.style.top; } function up(pos) { //get objects objImgStrip = document.getElementById('str'); objDivStrip = document.getElementById('thumbview'); //Get End position var totImg = (objImgStrip.height - 100) / 130; var endpos = totImg * 130; if (pos=endpos) { return false; } else { objDivStrip.style.top = pos - 130; } } and the html on the button is Code: <img id="arrow" src="images/arrow_up.jpg" onclick="up(curPos());" /> The code doesnt work but if anyone could point me in the direction to get it to work your help is greatly appreciated. Cheers Sol is there any way to fix the position of a draggable div in a table which is having fixed width and height??
I am creating calander control for the 1 year using javascript.the day in which click a table is pop up at absloute position . i want table is popup at relative position where selected date is click. Here is my code <script language="javascript" type="text/javascript"> var k=0; var month; var pagedata; var check=0; var tabledata = ''; var counter = 0; var editVal=0; var editRow=0; var selecteditemcode=""; var counter=0; function day_title(day_name) { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(String(day_name)); mycurrent_cell.appendChild(currenttext); } function makeArray(n) { this.length=n; for (var i = 1; i <= n; i++) this[i] = 0 return this } var flag=false; var index; var tempdata; var mybody ; var rowData = new Array(); var colData = new Array(); var mytable function fill_table(m_name,m_length,mm) { counter+=1; if(k==0) { alert(this_month); k=this_month; } else { alert(k); k +=1; if(k>12) { alert(k); alert(this_year); if(flag==false) { this_year+=1; flag=true; alert("IN "+k); alert("IN "+this_year); } } } mybody = document.getElementById('showtb'); mytable= document.createElement("table"); mytable.setAttribute("id",+String(m_name)+"_"+String(this_year)); mytablebody = document.createElement("tbody"); head_row = document.createElement("tr"); head_cell = document.createElement("td"); headtext = document.createTextNode(String(m_name)+"_"+String(this_year)); head_cell.appendChild(headtext); head_cell.setAttribute('colSpan','7'); head_row.appendChild(head_cell); head_cell.setAttribute('className','titlebar'); head_row.appendChild(head_cell); mytablebody.appendChild(head_row); mycurrent_row = document.createElement("tr"); counter+=1; mycurrent_row.setAttribute("id",String(counter)); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Sun"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Mon"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Tue"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Wed"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Thu"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Fri"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Sat"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mytablebody.appendChild(mycurrent_row); day=1 if(m_name=="February" ) { if((this_year%4)==0) { m_length +=1; } } pagedata=''; var ddl; counter +=2; mycurrent_row = document.createElement("tr"); mycurrent_row.setAttribute("id",counter); for (var i=1;i<start_day;i++) { if(start_day<8) { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(" "); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell.setAttribute('className','promptbox'); mycurrent_row.appendChild(mycurrent_cell); } } var blnFlagFirstline=false; for (var i=start_day;i<8;i++) { blnFlagFirstline=true; alert("this_day "+ this_day+ " i "+ i); if(blgFlagButtons==false) { if(this_day <=day) { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); blgFlagButtons=true; } else { if(blgFlagButtons==false) { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(""+String(day)); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } else { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } } } else { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } day++; } if(blnFlagFirstline==true) { mytablebody.appendChild(mycurrent_row); } counter+=1; mycurrent_row = document.createElement("tr"); mycurrent_row.setAttribute("id",counter); while (day <= m_length) { for (var i=1;i<=7 && day<=m_length;i++) { if(blgFlagButtons==false) { if(this_day <=day) { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); blgFlagButtons=true; } else { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(String(day)); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } } else { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } day++ } mytablebody.appendChild(mycurrent_row); counter+=1; mycurrent_row = document.createElement("tr"); mycurrent_row.setAttribute("id",counter); } mytable.appendChild(mytablebody); mybody.appendChild(mytable); mytable.setAttribute("border", "10"); //mytable.style.background="aliceblue"; mytable.style.fontFamily="Verdana"; //mytable.style.width="1000px"; mytable.setAttribute("className","promptbox"); mytable.style.fontSize="10pt"; start_day = i } var blgFlagButtons; function fnCalender() { blgFlagButtons=false; month=new makeArray(12) month[1]="January" month[2]="February" month[3]="March" month[4]="April" month[5]="May" month[6]="June" month[7]="July" month[8]="August" month[9]="September" month[10]="October" month[11]="November" month[12]="December" month_length = new makeArray(12) month_length[1]=31 month_length[2]=28 month_length[3]=31 month_length[4]=30 month_length[5]=31 month_length[6]=30 month_length[7]=31 month_length[8]=31 month_length[9]=30 month_length[10]=31 month_length[11]=30 month_length[12]=31 today = new Date() today= new Date("July 13, 2008");//'Wed Oct 29 00:00:00 UTC+530 2008' this_day = today.getDate() this_month = today.getMonth()+1 this_year = today.getYear() this_year = (this_year< 1000) ? this_year + 1900 : this_year; begin_date = new Date("July 01, "+this_year) if((this_year%4)==0) { start_day = begin_date.getDay()+1 } else { start_day = begin_date.getDay()+1 } var MhVal; if(this_day>1) { MhVal=this_month; for(var i=1; i<=13;i++) { mon[i]=month[MhVal]; monlen[i]=month_length[MhVal] MhVal +=1 if(MhVal==13) { MhVal=1; } } } else { MhVal=this_month; for(var i=1; i<=12;i++) { mon[i]=month[MhVal]; monlen[i]=month_length[MhVal] MhVal +=1 if(MhVal==13) { MhVal=1; } } } if (start_day == 1){ start_day = 8 } if(this_day>1) { for (var m = 1;m<=13;m++){ //alert('month[m] - '+mon[m]+' month_length[m] - '+monlen[m]+' m - ' +m); fill_table(mon[m],monlen[m],m) // tabledata += "id"+counter+"="+pagedata; } } else { for (var n = 1;n<=12;n++){ fill_table(mon[n],monlen[n],n) } } } </script> <script language="javascript" type="text/javascript"> function fnDivertedFlight() { prompt3('', 'Roster','Diverted Flight Detail </B>', 'fnDivertedValues'); } function prompt3(promptpicture, prompttitle, message, sendto) { var posx = 0; var posy = 0; var e = window.event; if(e!=null) { if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } } else { posx = 100; posy = 100; } promptbox = document.createElement('div'); promptbox.setAttribute ('id' , 'prompt') document.getElementsByTagName('body')[0].appendChild(promptbox) promptbox = eval("document.getElementById('prompt').style") promptbox.position = 'absolute' promptbox.top = posy promptbox.left = posx promptbox.width = 430 promptbox.border = 'outset 1 #bbbbbb' //Here I am open popup Tabletable } function fnDivertedValues(value1,value2,value3,value4,value6,value7,value5) { alert(value1+" , "+ value2+" , "+value3+" , "+value4+" , "+value5); I have a div tag that is contenteditable so that users can type in the div. There is a function that adds a link into the div when the user presses a button. I would like the caret to be positioned after the link so that users can continue to type. The link can be inserted many times. Example Code: Code: <div id="mydiv" contenteditable="true" tabindex="-1">before <a href="#">link</a> after</div> I require this code to work in: IE, Firefox, Opera, Safari and Chrome. Can anyone offer any help? Hello, I've been trying the find the (x,y) co-ordinates of an element. I've been using; Code: document.getElementById(element).style.top document.getElementById(element).style.left However this doesn't always work in my script. Now, I've googled how to find the position of an element. And come accross many scripts which supposedly all find the position of any object. Some are very long scripts and some are very short all using a variety of methods. Incidently none of which work, they all return (0,0). I have a question, why would someone create a script to do what one line of code can do? Am I missing something. If I understand why it may help me work out why my script isn't working. Thank you. |