Re: [jQuery] tabs in one line, on small resolution
Your problem is more related to CSS than jquery tabs. The element containing the tabs needs to be wide enough to contain them all in one line - it sounds like your containing element's width is set to the width of the browser window, so on smaller resolutions where the window is narrower, your containing element is not wide enough to contain the tabs on one line. To ensure that all your tabs are on one line, you could: 1. Find the width of each tab using jquery, and set the container width to the sum of the tab widths (or set the container width in CSS so that it can contain them easily). This will mean that you will probably have to settle on a fixed or minimum width design which will scroll at lower resolutions. 2. Limit the size of each tab at runtime to a fraction of the width of the window. If you find you have a lot of tabs which can't fit on, say, a 1024x768 resolution, maybe you should think of using a different style of navigation. NMarcu wrote: > > Hello all. I'm using jquery tabs, and I have 6 tabs. On a big > resolution, everithing is OK, but on 800x600, the last tab, go to > second line. How can I set tabs, to remain in one line, not depending > by resolution, or of the number of tabs? > > -- View this message in context: http://old.nabble.com/tabs-in-one-line%2C-on-small-resolution-tp27140777s27240p27141612.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] keep executing the script after a few seconds
setInterval(function(){alert("hello");},9); http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/ runrunforest wrote: > > Say i want the alert message "hello" appear every 90 seconds, how can > i do it ? > > -- View this message in context: http://old.nabble.com/keep-executing-the-script-after-a-few-seconds-tp27138586s27240p27141453.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Help with getting variable
Hi Dave, Use a regular expression to split your form element names like this: var regex = /^(\w+)\[(\w+)\]\[(\w+)\]$/i; var str = "data[User][username]"; var matches = regex.exec(str); // matches[2] now contains "user" Dave Maharaj :: WidePixels.com wrote: > > > Hoping for some simple help here. > > I have this structure in my forms > > name="data[User][username]" > > But depending on the form it the ['User'] section will change throught the > site. How can I pull the User as a variable? > > The script has something like this: > > $.post('/ajax_validate/users/', { > field: fieldName, > value: fieldValue > }, > > Where I want to add the variable like > > $.post('/ajax_validate/'+myVarHere, { > field: fieldName, > value: fieldValue > }, > > Thanks, > > Dave > > > -- View this message in context: http://www.nabble.com/Help-with-getting-variable-tp25429729s27240p25451239.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Hide/Show based on radio button selected
Hi, In the following example, all the radio controls have the name attribute set to "myradio", and the "#offices_checkboxes" part of the document is shown when the radio with id 'radioOne' is checked. Your example probably didn't work because of the syntax you used in your attribute selector (no @ symbol is neccessary in the latest jQuery - this would only work in 1.2 and lower) $(function(){ $('#offices_checkboxes').hide(); $('input:radio[name=myradio]').click(function() { if ($(this).attr("id")==='radioOne') { $("#offices_checkboxes").show(); } else { $("#offices_checkboxes").hide(); } }); }); Rick Faircloth wrote: > > > Just off the top of my head, but may work... > > $(document).ready(function() { > > $('#offices_checkboxes').hide(); > > $('input:radio[name=radioName]:checked').click(function() { > $('#offices_checkboxes').show(); > }); > > $('input:radio[name=radioName]:not(:checked)'.click(function() { > $('#offices_checkboxes').hide(); > }); > > }); > > This code makes use of the name of the radio button group, as well. > > hth, > > Rick > > -Original Message- > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On > Behalf Of mtuller > Sent: Monday, September 14, 2009 11:14 AM > To: jQuery (English) > Subject: [jQuery] Hide/Show based on radio button selected > > > I am trying to create a script that will display content based on if a > radio button is selected, and if the other is selected would hide the > content. Now, each of these radio buttons are part of a radio group, > so their names are the same. Most examples show input:radio > [...@name=item] Since I have 2 items that have the same name, I can't use > name, so I thought I would try id or value. It isn't working. If I add > only the show, whenever you select either radio button, it shows, and > if I add the hide code, it doesn't work at all. > > Here is what I have right now. > > $(document).ready(function(){ > $('#offices_checkboxes').hide(); > $("input:rad...@value=1]").click(function() { > $("#offices_checkboxes").show(); > }); > $("input:rad...@value=0]").click(function() { > $("#offices_checkboxes").hide(); > }); > > }); > > Anybody have an idea of how I could get this to work? > > > > > > -- View this message in context: http://www.nabble.com/Hide-Show-based-on-radio-button-selected-tp25437679s27240p25450984.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: which submit button was clicked?
Hi, As far as I can tell, it is not possible to get the details of which submit button was clicked from the submit event of the form, as the event target will always be the form element. The way to implement this would be to assign a class to each submit button, then attach a click event to them, like this example: http://jsbin.com/inuha/edit badtant-2 wrote: > > > Hi! > > I have a submit-event attached to my form. The form contains a few > different submit-buttons and I wan't to chech which one of them that > triggered the submit. Shouldn't be to hard but i can't find out how to > do it. > > Thanks > > -- View this message in context: http://www.nabble.com/which-submit-button-was-clicked--tp25449810s27240p25450711.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: trim string
Try this: function filterArray(arr) { var newArr = []; for (var i = 0; i < arr.length; i++) { newArr.push(arr[i].replace(/[0-9\-.]/g, '')); } return newArr; } runrunforest wrote: > > > Hi, > > I have an array like this cat=(com12, com1, cop233, com1.1, sap-12-1) > > I want to take out all the numbers and "." and "-" signs > > the desire result is cat=(com, com, cop, sap) > > how can i do that please ? > > -- View this message in context: http://www.nabble.com/trim-string-tp25433275s27240p25436583.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: animate : animable properties
Try this: function filterInanimate(obj) { var newObject = {}; var goodProps = ['width','height','left','right','top','bottom','margin','background']; for (prop in obj) { if ($.inArray(prop, goodProps) != -1) { newObject[prop] = obj[prop]; } } return newObject; } the goodProps array stores all the properties which you would like to be able to animate. Feed the object which you want filtering into the function to have the filtered object returned: var filteredObject = filterInanimate(myObject); MisterV wrote: > > > Hi, > > I'm coding a jQuery plugin to draw modal windows. In this plugin, I > make animations to show and hide the modal window. > I'd like my plugin to be as much customizable as possible. So I want > the animations to be customizable also. To do this, I have one option > for the general css properties (the style of the window), one for css > properties before "showing" animation, and one for css properties > after "hidding" animation. > > To make the "show" animation, I start by applying general style + > before styles (before styles overwrites general styles). Than I get > the difference between before styles and general styles,, and I use > this object as the animation properties. > > To make the "hide" animation, the general styles are already applied, > I just launch an animation using the "after hiding styles" as the > animation properties. > > All this works very well, but I have just one small problem : All css > properties can't be used as animation properties. And if I try to > launch an animation with a "non-animable" css property, than the > animation bugs. > So I have to filter the properties I give to the animate function, to > remove all "non-animable" properties. But to do this, I have to get a > list of "animable" css properties. > > Does someone knows how I can manage to get this list ? is there > something like this in jQuery ? > > Nico > > -- View this message in context: http://www.nabble.com/animate-%3A-animable-properties-tp25297303s27240p25436295.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Determine content type in $.post callback
You don't have any problems here - ajaxSubmit can use all the options that $.ajax can, so all you need to do is place a "complete" callback in your ajaxSubmit options. As far as I can tell from the docs, the "complete" callback is your only option as it gets the XHR object as a parameter - but you will need to check that the request was a success if you use this callback (it will be called even if the request fails). Peter dnagir wrote: > > > Hi, > > So the XHR is ONLY available from $.ajax and there's really no way to > get it from methods ($.post)? > I actually need this data in the ajaxSubmit callback of AjaxForm plug- > in. > > This sounds like I have no option except to abandon the plug-in and do > the work manually (or modify it)? > > Cheers. > > -- View this message in context: http://www.nabble.com/Determine-content-type-in-%24.post-callback-tp24371141s27240p24494117.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Determine content type in $.post callback
What you need is access to the XMLHttpRequest object used in the request so I suggest you use $.ajax instead of $.post. The "complete" callback for $.ajax receives the XHR and textstatus as parameters, so this should get you the headers: $.ajax({url:'your.url',data:{'data1':'one','data2':'two'},complete:function(xhr,textstatus){ // xhr.responseText contains the response from the server var allheaders = xhr.getAllResponseHeaders(); // this will get all headers as a string - if you want them as an object... var eachheader = allheaders.split('\n'); var headers = {}; for(i = 0; i < eachheader.length; i++) { if ($.trim(eachheader[i]) !== '') { headersplit = eachheader[i].split(':'); headers[headersplit[0]]=$.trim(headersplit[1]); } } }); dnagir wrote: > > > Hi Peter, > >> var ContentTypeHeader = this.contentType; > > "this.contentType" is the content type of the REQUEST. > I need to get the ContentType of the RESPONSE. > > No chance of getting it? > > Cheers, > Dmitriy. > > -- View this message in context: http://www.nabble.com/Determine-content-type-in-%24.post-callback-tp24371141s27240p24484476.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: generated content(PHP) into DIV?
Hi there, Here is a very simple implementation of what you are talking about - it assumes you have three divs in the markup with IDs 'place', 'house', and 'level', and that you load content for these from 'places.php', houses.php' and 'levels.php' respectively. It also assumes that the PHP files simply return HTML fragments (lists). $(function(){ // load the first list when the document loads $('#place').load('places.php',{},function(){ // 'this' holds a reference to the dom content loaded, so attach a click handler to each list item $('li', this).click(function(){ // when a list item is clicked, pass the text of the item to houses.php, and load in #house $('#house').load('houses.php',{'place':$(this).text()},function(){ // do the same thing with the loaded list $('li', this).click(function(){ // do the same again when this level is clicked $('#level').load('levels.php',{'house':$(this).text()}, function(){ // now you need logic to handle clicks on elements in the #level list items }); }); }); }) }); }); Although this is a working example / proof of concept, I'm sure there has to be a more elegant way of doing it (with a plugin?) Tony-182 wrote: > > > Hello Everyone! > > I have 3 DIV's next to each other. I want that the first div is loaded > over jquery with a php file which outputs an unordered list in html. > > When I click on a list item in the first DIV I want that jquery sends > the parameters from the list to a second php file for making an > unordered list which is loaded this time into the second DIV. > > The same should happen from the second DIV into the third DIV whith a > third php file. > > > All php files connect to a mysql database which has three tables > (Place, House, Level). The tables have three columns(id, name, > location). location is always linked to the next table's id (ex. > "sesame street 1" has id 37 then tabel Place would have folowing > entry: id=1 name=Stockholm location=37 ) > > The purpose of this script is to navigate though houses in different > places. The 3 DIV's contain following. > DIV 1 = Place (ex. Stockholm, Berlin, Barcelona) > DIV 2 = House (sesame street 1, sesame street 2, sesame street 3) > DIV 3 = Level (Floor 1, Floor 2, Floor 3) > > I really tried all things in jquery from appendTo to $.ajax but I just > dont get it working! The three divs are easy to create but getting the > content dynamically into them seems quite impossible. Please help me, > I tride really long to solve this problem but I just don't seem to get > it, hope someone can help me :( > > -- View this message in context: http://www.nabble.com/generated-content%28PHP%29-into-DIV--tp23318863s27240p23325009.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: How to get file name
This will only get you the first image filename in the document - to get all of them, use something like this: var filenames = []; $('img').each(function(){ filenames.push($(this).attr('src').split('/').pop()); }); now filenames contains the filenames of all the images in the page David .Wu wrote: > > > I got it, thanks everyone. > $('img').attr('src').split('/').pop(); > > > On 4月28日, 下午6時39分, Remon Oldenbeuving > wrote: >> I dont think there's a real jQuery way, you could use regular >> expressions, or maybe split the string with .split('/') >> >> On 28 apr 2009, at 10:36, "David .Wu" wrote: >> >> >> >> > images/xxx.gif >> >> > $('img').attr('src') -> This will get images/xxx.gif >> > How to get xxx.gif by jQuery? > > -- View this message in context: http://www.nabble.com/How-to-get-file-name-tp23272719s27240p23275342.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: detect quicktime?
Jack, I've used the following code in the past and found it to work - it is from http://www.dithered.com/javascript/quicktime_detect/index.html where you can check out documentation, use cases, and download it (along with a redirection script if you need one). It is quite old, but should work. I used it once as a basis for a port of flashObject (http://blog.deconcept.com/flashobject/) to do the same for Quicktime, but unfortunately I can't find what I did any more... // Quicktime Detection v1.0 // documentation: http://www.dithered.com/javascript/quicktime_detect/index.html // license: http://creativecommons.org/licenses/by/1.0/ // code by Chris Nott (chris[at]dithered[dot]com) var quicktimeVersion = 0; function getQuicktimeVersion() { var agent = navigator.userAgent.toLowerCase(); // NS3+, Opera3+, IE5+ Mac (support plugin array): check for Quicktime plugin in plugin array if (navigator.plugins != null && navigator.plugins.length > 0) { for (i=0; i < navigator.plugins.length; i++ ) { var plugin =navigator.plugins[i]; if (plugin.name.indexOf("QuickTime") > -1) { quicktimeVersion = parseFloat(plugin.name.substring(18)); } } } // IE4+ Win32: attempt to create an ActiveX object using VBScript else if (agent.indexOf("msie") != -1 && parseInt(navigator.appVersion) >= 4 && agent.indexOf("win")!=-1 && agent.indexOf("16bit")==-1) { document.write(' \n'); document.write('on error resume next \n'); document.write('dim obQuicktime \n'); document.write('set obQuicktime = CreateObject("QuickTimeCheckObject.QuickTimeCheck.1") \n'); document.write('if IsObject(obQuicktime) then \n'); document.write(' if obQuicktime.IsQuickTimeAvailable(0) then \n'); document.write(' quicktimeVersion = CInt(Hex(obQuicktime.QuickTimeVersion) / 100) \n'); document.write(' end if \n'); document.write('end if \n'); document.write(' \n'); } // Can't detect in all other cases else { quicktimeVersion = quicktimeVersion_DONTKNOW; } return quicktimeVersion; } quicktimeVersion_DONTKNOW = -1; Jack Killpatrick wrote: > > > Hi All, > > I'm looking for a jquery plugin (or vanilla method) for detecting > quicktime, so I can decide whether to embed a QT movie or not. Did some > googling, but most of the methods seems really old and I didn't see any > jQuery plugins dedicated to detection. > > Any links/advice? > > Thanks! > > - Jack > > > -- View this message in context: http://www.nabble.com/detect-quicktime--tp23248106s27240p23251745.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: iframe ang jQuery
If you want a website loaded in a div, then that would be a little bit difficult - I was really talking about loading content from another website (not the whole thing with stylesheets, images, video, scripts, etc.). I think it would be possible if you could run scripts in both the parent document and the one in the iFrame, which means you would have to have access to both sites. I'm presuming you don't have access to the site which you are planning to embed, so I don't think this is possible. themba-2 wrote: > > > Thanks, guys, basically, I want an iframe auto-resize, how can use use > Ajax to load the other website in a div. I want to embed a php driven > page in a asp.net website. > > I found this script online, but the script does not work: > > > > http://www.kaali.co.uk/article-Cross-bowser-iframe-auto-resize-script-94.htm > > 2009/3/28 bjorsq : >> >> >> Have you thought of using AJAX to embed the remote page within a >> instead of using an iFrame? I know you would have to use JSONP to get it >> to >> work across domains, so it kind of depends on how much control you have >> over >> each site. Another way of doing it would be using a proxy script to fetch >> the page, then use AJAX to fetch it from the proxy. >> >> Otherwise, the only way I can think you would do this is by loading the >> page in an iframe which is the correct width (set the height to 1px or >> something), waiting for the page to load, getting the height of the page >> in >> the iframe, then destroying the iframe and re-creating it with the >> correct >> height. You then have the problem that if the user changes the font size, >> you get a scrolling iframe again. >> >> hth >> >> >> themba-2 wrote: >>> >>> >>> Hi Guys is it possible to embed a php website on an asp website using >>> jQuey or is possible to create a dynamic height iframe for embedding >>> another website running a different technology? >>> >>> Thank you. >>> >>> >> >> -- >> View this message in context: >> http://www.nabble.com/iframe-ang-jQuery-tp22748742s27240p22757539.html >> Sent from the jQuery General Discussion mailing list archive at >> Nabble.com. >> >> > > -- View this message in context: http://www.nabble.com/iframe-ang-jQuery-tp22748742s27240p22772265.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: iframe ang jQuery
Have you thought of using AJAX to embed the remote page within a instead of using an iFrame? I know you would have to use JSONP to get it to work across domains, so it kind of depends on how much control you have over each site. Another way of doing it would be using a proxy script to fetch the page, then use AJAX to fetch it from the proxy. Otherwise, the only way I can think you would do this is by loading the page in an iframe which is the correct width (set the height to 1px or something), waiting for the page to load, getting the height of the page in the iframe, then destroying the iframe and re-creating it with the correct height. You then have the problem that if the user changes the font size, you get a scrolling iframe again. hth themba-2 wrote: > > > Hi Guys is it possible to embed a php website on an asp website using > jQuey or is possible to create a dynamic height iframe for embedding > another website running a different technology? > > Thank you. > > -- View this message in context: http://www.nabble.com/iframe-ang-jQuery-tp22748742s27240p22757539.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Ajax loading of HTML
Try taking out the dot in the URL you are loading and use an absolute URL - the "./" refers to a local filesystem path, which would explain it working locally but not online. davidnext wrote: > > > Hi All, > > I am having a problem with loading an HTML file to populate a dropdown > as follows with names of states in the USA: > > $("select[name=step_2]").load("./includes/usa.html"); > > The HTML it is going into is as follows: > > * STEP 2) Select your State/ > Province: > > Inserted dropdown goes here. > > > > When running the script I get the message in Firebug: > > Syntax error:[Break on this error] _block_windowOpen(); function > (X) {\n > xpopup.js (line 80) > > This works when running on a local wamp server but fails on remote > servers...any ideas? Thanks. > > -- View this message in context: http://www.nabble.com/Ajax-loading-of-HTML-tp22321628s27240p22326038.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Dealing with Date Comparison
To do this in JavaScript, you need to extract the text representation of the date you have in the div, parse it, and set up a new JavaScript Date object to compare against the current date/time. If your dates are formatted like [day]/[month]/[year] (I'm in the UK), then this should work (but will need some error checking in it to cope with blank or malformed dates): $(document).ready(function() { var now = new Date(); $('td.yui-dt0-col-LastActivity div').each(function() { var divdate = new Date(); /* split the text date in the div */ var dateparts = $(this).text().split('/'); /* set the properties of the Date object *for US format dates [month]/[day]/[year] the array indexes for months and days need switching */ divdate.setDate(parseInt(dateparts[0])); /* months are zero indexed! */ divdate.setMonth((parseInt(dateparts[1])-1)); divdate.setYear(parseInt(dateparts[2])); /* compare dates - 14 days = (14*24*60*60*1000) milliseconds */ if (divdate.getTime() > (now.getTime() - (14*24*60*60*1000))) { $(this).addClass('highlight'); } }); }); Bob O-2 wrote: > > > Can any one point me in the right direction for my issue. > > I have a div with a text value pulled in from a database 01/01/2009 > > Im trying to write a javascript that can take that value and compare > it against new Date(); > > $(document).ready(function() { > now = new Date(); > lastActivityDivs = $('td.yui-dt0-col-LastActivity div'); > lastActivityDivs.each(function() { >if ($(this).val() == (now < 14)) { >$(this).addClass('.highlight'); > } > }); > }); > > i know this isnt correct, but it gives you an idea of what im trying > to accomplish.. > > Any help would be great. > > Thank you > > -- View this message in context: http://www.nabble.com/Dealing-with-Date-Comparison-tp21841297s27240p21842945.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: iterate over json
Try something like this (if you can't re-structure the JSON Object): $.each(myJSONObject.formValues, function(i,item) { var itemtxt = 'Object details for formValues['+i+']:\n\n'; for (prop in item) { itemtxt += prop + ': ' + item[prop] + '\n'; } alert(itemtxt); }); For the type of data you are using in your example, the previous reply gives a better way of doing it. bob-301 wrote: > > > How do I dynamically access json values? > > var myJSONObject = {"formValues": [ > {'name': 'Frank'}, > {'city': 'London'}, > {'age': 25} > ] > }; > > The following gives me undefined. > > > $.each(myJSONObject.formVals, function(i,item){ > > alert('i = ' + i + ' item0 = ' + item[0] + ' item1 = ' + item > [1]); > }); > > -- View this message in context: http://www.nabble.com/iterate-over-json-tp21304386s27240p21308189.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Draggable and Fadeto
I think what is happening here is you are binding the mouseover and mouseout functions to the #navigation , so when your mouse passes over the and elements inside it, the mouseout function is triggered (the mouse moves out as far as the is concerned, and over its child elements). You need to be more specific and target the elements within the #navigation you are looking for, by giving them a class. If you give the elements the class, you will end up with the same problem when it comes to nested lists, so target the and elements of the top level menu items. One other thing is that fadeTo forms a queue so if you frantically move the mouse about over the elements, you will see the results in the form of "ghosting" for a while afterwards - not sure how you would correct this. msm.stef wrote: > > > Hello, > > I still have problem. > Here my page for example: http://msmfarcry02.free.fr/test/menu_demo.html > > When mouse over, function over/out work continuously. > When drag, same. > > here is the script : http://msmfarcry02.free.fr/test/jscript.js > and the css: http://msmfarcry02.free.fr/test/presentation.css > > Many thanks for your help > > > Stephan > > On 11 juin, 05:48, "Richard D. Worth" <[EMAIL PROTECTED]> wrote: >> Here's a way to do with bind/unbind: >> >> function over() { $(this).fadeTo("slow", 1.0); } >> function out() { $(this).fadeTo("slow", 0.6); } >> >> function unBind() { >> $("#navigation").unbind("mouseover", over).unbind("mouseout", out);} >> >> function reBind() { >> $("#navigation").bind("mouseover", over).bind("mouseout", out); >> >> } >> >> reBind(); >> >> $("#navigation").draggable({ start: unBind, stop: reBind }); >> >> In this case you want to use the start callback, not the drag callback as >> drag is called continuously (for each mousemove) during the drag. >> >> - Richard >> >> On Tue, Jun 10, 2008 at 10:52 AM, msm.stef <[EMAIL PROTECTED]> wrote: >> >> > Thank for this, but it doesnt works. >> >> > I try to use this : >> >> >$("#navigation").hover(function () { >> > $(this).fadeTo("slow", 1.0); >> > },function(){ >> > $(this).fadeTo("slow", 0.6); >> >}); >> >> > $("#navigation").draggable({ >> >drag: function() { $(this).unbind("hover"); }, >> >stop: function() { $(this).bind("hover"); } >> >}); >> >> > but, not good !!! >> >> > Have you a solution for me ? >> > Thanks >> >> > Stephan > > -- View this message in context: http://www.nabble.com/Draggable-and-Fadeto-tp17752714s27240p17776225.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: simple horizontal slide panel - IE7 DOM, Jquery
I have managed to get this to work - although probably not the best solution, by placing the panel and panel reveal link in a wrapper div, and placing them off screen. Your positioning was all a bit messed up - only the panel needs to have absolute positioning. The animate function slides the anel on and off screen by checking first whether the panel is shown or not. Here is the code I'm using: JS $(document).ready(function(){ $(".btn-slide").click(function(){ var targetX = $("#panelwrapper").css("left") == "0px"? '-340px': '0px'; $("#panelwrapper").animate({"left": targetX, "opacity": 0.8}, { duration: "slow" }); return false; }); }); CSS: body { margin: 0; padding: 0; width: 670px; font: 75%/120% Arial, Helvetica, sans-serif; } #panelwrapper { position:absolute; top:0; left:-340px; height:600px; width:400px; z-index:1; } #panel { float:left; margin:0; padding:20px; background:yellow; height:600px; width:300px; } #content { position:relative; margin-left:50px; } .slide { float:left; width:1em; height:520px; margin:0; padding:40px 0; border-left:4px solid #422410; } .btn-slide { font:bold 160%/2em Arial, Helvetica, sans-serif; color:orange; text-decoration:none; } HTML: Phasellus ut libero. Nulla in libero non enim tristique sollicitudin. Ut tempor. Phasellus pellentesque augue eget ante. Mauris malesuada. Donec sit amet diam sit amet dolor placerat blandit. Morbi enim purus, imperdiet in, molestie sit amet, pellentesque eu, mauris. In vel erat vel ipsum bibendum commodo. Curabitur accumsan. Nam sed metus. Etiam tristique bibendum justo. # S L I D E P A N E L Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In commodo lorem sed nisl. Aliquam commodo urna non lacus. Cras auctor sapien sodales massa. Integer et sem. Pellentesque dolor sapien, lacinia sit amet, imperdiet at, pretium in, neque. Nullam euismod commodo orci. Aliquam est dolor, scelerisque non, sodales nec, tempor sit amet, lacus. Nullam ut nisl. Donec congue neque in metus. Proin et nisi. Praesent porttitor semper purus. Nam velit nulla, vulputate a, porta quis, dapibus a, purus. Aenean vitae erat a urna bibendum tincidunt. Nullam tincidunt fermentum elit. Fusce diam. Ut tempor. Sed sed est sit amet tortor hendrerit pulvinar. Aenean eu pede id lorem ornare blandit. Duis justo lorem, laoreet quis, ullamcorper ut, hendrerit non, augue. Morbi malesuada nisi non tortor pulvinar vulputate. two7s_clash wrote: > > > Hi all, > > I am working on slide panel: > http://f1shw1ck.com/activity_viewer/slider.html# > > Problem: The panel which slides across pushes all the div' s in the > page to the right when viewed in IE. > > Expected: The panel should act as an overlay on the current page > without pushing any div's. > > Things tried: > > I wrapped the panel and button in a div with absolute positioning, but > now the "slide panel" button doesn't move from place. > > Both URLs work as desired in Firefox. > > Thanks for any help you can provide. > > -- View this message in context: http://www.nabble.com/simple-horizontal-slide-panel---IE7-DOM%2C-Jquery-tp17766819s27240p17773253.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: attr('form') not work in firefox
As the previous reply stated, there is no attribute "form" on the input element, but there is a "form" property on the input object which can be used to identify the form which the input is an ancestor of. If you need the form object in your example, all you need to do is select it using $('#myForm'), or if you need to get it from the input, you could use $('#a').parent('form')[0] (I'm sure there must be a better way of doing this...) [EMAIL PROTECTED] wrote: > > > This is my html: > > > > and javascript: >
[jQuery] Re: Can jquery change the period in an OL to a hypen?
Try this: $(document).ready(function() { $('ol li').each(function() { $(this).html($(this).html().replace('/\./', ' -')); }); }); What this does is go through all li elements of all ol lists and perform a String.replace() on the existing content ($(this).html()) and replace the existing content with the result. The regex replaces the first period with a space, followed by a hyphen. To replace all periods, use the g modifier (/\./g), or you could be more specific for your example by requiring the year (/^([0-9]{4})\./ - I know this only matches 4 digit numbers, so doesn't validate years, but this is just an example!) EricC-3 wrote: > > > So the title says it all pretty much. I have a design and I need to > have some running numbers along the side of a list. An ol would be > perfect and it is rendering: > > 1998. Item 1 > 1999. Item 2 > > To match the designs I need it to be: > > 1998 - Item 1 > 1999 - Item 2 > > I could just make a table but it would be cooler if I could change it > somehow. I have spent an hour or so looking around and there does not > seem to be a CSS/HTML way. > > Cheers. > > -- View this message in context: http://www.nabble.com/Can-jquery-change-the-period-in-an-OL-to-a-hypen--tp17290680s27240p17292847.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Defining regular expressions with # selector ??
If you want to get a set whose IDs start with "div1.", then you can use: $('[EMAIL PROTECTED]') You could also filter the result set with a regex like this: $('div').filter(function(){ return /^div1\./.test(this.id); }) Orcun Avsar-2 wrote: > > > Is it possible to define a regex with a # selector that will allow > select multible idies. > For example i want to select tags with idies those start with "div1." > or some idies with more complexed match that can be find through a > regexp expression > > -- View this message in context: http://www.nabble.com/Defining-regular-expressions-with---selectortp17252437s27240p17255180.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Sortserialize returns nothing!
I've recently updated my setup to jquery 1.2.3 and am using sortables from UI 1.5b. I couldn't get the serialize option to work either - something to do with the way options are parsed - by default it tries to match the ids of all sortable items to (/(.+)[-=_](.+)/) so I guess your IDs need to have a -, =, or _ in them for it to work(?). Anyway, I've written a function to help me do what I want: $(document).ready(function(){ $("#myList").sortable({ update : function(e, ui) { serialize("#myList"); } }); }); function serialize(s) { var str = []; var key = 'myKey[]='; var delimiter = '&' $(s + "> *").not('.ui-sortable-helper').each(function() { str.push(key+this.getAttribute('id')); }); $("#serialized").html(str.join(delimiter)); }; ul { list-style: none; } li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; } Item 1 Item 2 Item 3 Item 4 The serialize function above grabs all the children of the container apart from the helper $("#myList> *).not('.ui-sortable-helper') and stuffs their id attributes into an array. I've added something to display the results below the list. Adjust the key and delimiter variables in the body of the function to make a hash out of them to your liking. chrille112 wrote: > > I'm stuck! I have followed the examples there is, but I can't make this > work. My code below just generates an empty alert box: > > > $(document).ready(function(){ > $("#myList").sortable({ > update : function(e, ui) > { > serialize("#myList"); > } > }); > }); > > function serialize(s) > { > serial = jQuery.SortSerialize(s); > alert(serial.hash); > }; > > ul { list-style: none; } > li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; > font-size: 10px; font-family: Arial; padding: 3px; } > > > > > Item 1 > Item 2 > Item 3 > Item 4 > > -- View this message in context: http://www.nabble.com/Sortserialize-returns-nothing%21-tp15362349s27240p15459595.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Sortserialize returns nothing!
I'm using interface 1.2 with jquery 1.2.2, and this is what works for me: $(document).ready(function(){ $("#myList").Sortable({ accept : "sortableitem", onStop : function(e, ui) { serialize("myList"); } }); }); function serialize(s) { var serial = $.SortSerialize(s); alert(serial.hash); alert(serial.o[s]); }; ul { list-style: none; } li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; } Item 1 Item 2 Item 3 Item 4 Changes: Sortable requires a class for all sortable items, so I've added the "sortableitem" class to them and assigned it to the accept option. Calls to SortSerialize take the id of the sortable without the preceding #. I don't really like the hash it returns, so I use the object instead (serial.o['myList'] in this case). chrille112 wrote: > > I'm stuck! I have followed the examples there is, but I can't make this > work. My code below just generates an empty alert box: > > > $(document).ready(function(){ > $("#myList").sortable({ > update : function(e, ui) > { > serialize("#myList"); > } > }); > }); > > function serialize(s) > { > serial = jQuery.SortSerialize(s); > alert(serial.hash); > }; > > ul { list-style: none; } > li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; > font-size: 10px; font-family: Arial; padding: 3px; } > > > > > Item 1 > Item 2 > Item 3 > Item 4 > > -- View this message in context: http://www.nabble.com/Sortserialize-returns-nothing%21-tp15362349s27240p15444333.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.