slider - Isolating jQuery to only contained elements -

-

I'm looking for a while, and I'm new to zoom and javascript to know that I'm wrong Where am i Any help will be greatly appreciated. I have the script below, which works very well for an element, how can I modify it to work with many elements? If I have many elements on the page then the slider will scroll everything, not just the elements of a container. I know that I can technically create new variables and new class names for each method, but it is messy and I know that there must be a smart way. 

  & lt; Script type = "text / javascript" charset = "UTF-8" & gt; Window.onload = function () {var Container = $ ('div.sliderGallery'); Var al = $ ('ul', container); Var itemwind = ul.innerWidth () - container.outerWidth (); $ ('Slider', container). Slider ({Min: 0, Max: Items Wideth, Handle: '.', 'Stop: Function (Event, UI) {ul.animate ({' left ': ui.value * -1}, 500);}, Slide: Function (Event, UI) {ul.css ('left', ui.value * -1);}}); }; & Lt; / Script & gt;

And here is html. 

  & lt; Div class = "sliderGallery" & gt; & Lt; Ul id = "audio-download" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div class = "slider" & gt; & Lt; Div class = "handle" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "slider gallery" & gt; & Lt; Ul id = "audio-download" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Audio title & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div class = "slider" & gt; & Lt; Div class = "handle" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;

Update Also saw that You are using window.onload . In JQuery, you get a $ (document) .ready () or its nickname $ (function ()) .

should use each () to run through the elements of Slider Gallery : / P> 

  $ (function () {// place your window.Open function wrapper $ ('div.sliderGallery'). Each (function () {var ul = $ ('ul', this ); Var itemsWidth = ul.innerWidth () - $ (this) .outerwidth (); $ ('. Slider', this). Slider ({Minimum: 0, Max: items Wideth, Handle: '.dilled', stop : Function (event, UI) {ul.animate ({'left': ui.value * -1}, 500);}, slide: function (event, u E) {ul.css ('left', ui.value * -1);}})}}}}}

each callback function, this = in the current dome node. If you need a jQuery object in that context, then use $ (this) .


Comments

Post a Comment

Popular posts from this blog

c# - How to capture HTTP packet with SharpPcap -

-
I would like to capture all incoming HTTP packets on my machine. To do this, I am using SharpPcap which is a WinPcap The cover is. SharpPcap works very well, but it captures TCP packets and what it wants to do for me is a very low level. Does anyone know how can I easily get full HTTP requests / reactions from all these TCP packets? Thanks SharpPcap is already able to capture the packet in the same way That's what the virus does (just in the code instead of the GUI). And you can either either parse them directly or you can put them in the drive in the common .pcap file format. The steps to parse the capture are: Open a connection at any time Loop a while Or start capturing using an event callback Parsing the raw packet for the type you want If you are reading .PPP dump files In addition to calling you an offline capture reader is almost the same, there is no need to select an interface, and you can set the majority There is no need to do the modes. All st...
Read more

php - Multiple Select with Explode: only returns the word "Array" -

-
By using Wordpress I have created a multiple selection box so that users can select categories to exclude. When the page is initially loaded, I see my predefined default option. However, when I select a new value and I save ... I only see the word "Array" and have not chosen anything else? & lt; Class = "amultiple" id = "& lt; php echo $ value ['id'] ;? gt;" name = "& gt; php echo $ value ['id'] ;; gt; []" Multiple = "multiple" size = "8" & gt; & Lt ;? Php global option; Foreign currency ($ value as value $) {if (get_settings ($ value ['id']) === FALSE {$$ value ['id'] = $ value ['std']; } And {$$ value ['id'] = get_settings ($ value ['id']); }} $ Ranges = & amp; Amp; Categories ('type = post & orderbiz = name & amp; hide_empty = 1'); If ($ ranges) {$ ex_cat = implode (',', $ tt_cat_exclude); Forex Currency ($ range a...
Read more

php - jQuery AJAX Post not working -

-
I do not understand why this script does not work. It has something to do within AJAX PostScript / Function. Right now, when I submit my form, it runs php code on the same page. What it should do, send the values ​​of the form for Project_Azax.fp, then there will be a refund of success on the page which is correct or false. $ (document) .ready (function () {$ ('div # didIt'). Hide (); $ ('form [name = adminForm]'). Submit (function () ($ {'.post' ('/ project_ajax.php', {action: $ ('[name = action]') Val (), pId: $ ('[name = pId]'). Val (), name ('[Name = name]'. Val (), url: $ ('[url = url]'). Val (), summary: ('[summary = summary]'). Val ()}, Function (data) {if (data.success) {$ ('div # didIt') .Sliddown ('slow');} and {warning ('unsuccessful SA!');}}, 'Jason'); return false ;});}); What is the code for project_ajax.php below ... if ($ _ POST ['action'] == ...
Read more