jQuery update

[quote name=‘zeke’]AJAX zoom is good, but with strange licensing policy.



.[/QUOTE]



Ah didn’t see that. Sorry Zeke.

[quote name=‘zeke’]

BTW, I can’t find lightbox script with ability to show thumbnails instead numbers and/or arrows in navigation, in the same way we use it in our custom script.[/QUOTE]



prettyPhoto looks pretty cool and it supports other file types:



prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes. It’s a full blown media lightbox.



It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6.



It also comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!

prettyPhoto looks very good!

I’m now officially happy that I have stayed with CS-Cart!



My recommendation for a Jquery plugin to handle images, video and nearly anything is Pretty Photo

It’s versatile, by far the nicest to look at (in my opinion) and so far has all of the features being discussed.



I’m pleased the time has come, it’s a great step forward.



Fleety

Yea, prettyPhoto looks good

[quote name=‘zeke’]Yea, prettyPhoto looks good[/quote]



Zeke, I’m uncertain exactly what you are planning for jquery integration (ie frameworks and such) however would it be possible to consider allowing the user to create an “image gallery” as a product feature?



I’m using a mix of shadowbox and hoverbox on my site currently and would prefer the ability to run both js frameworks for various reasons.

I vote for the calendar.

Also Please add a phone number to the shipping address. When sending gifts we need the recipients phone number. Not just the billing phone



:slight_smile:

Hi,



Could you please specify what you do not like in the current calendar script? Also can you post here some examples of the calendars you like?



Thanks,




[quote name=‘almondjjoy’]I vote for the calendar.

Also Please add a phone number to the shipping address. When sending gifts we need the recipients phone number. Not just the billing phone



:)[/QUOTE]

Ok, we’re ready to show you the early alpha (yes, it’s slow, not designed yet and has number of bugs :)) of this new CS-Cart. Here it is:



[url]http://labs.cs-cart.com/jquery/[/url]



And the changes list:

  • No iframes for product, category, page, etc pickers. They’re all displayed using AJAX now.
  • Search forms in pickers are hidden by default now. You can open such forms by clicking on the “Search” link in the dialog title
  • Tooltips: the “simpletip” library replaced with the jQuery “tools tooltip” library
  • easy drag, idrop, idrag, isortable libraries replaced with the jQuery UI framework
  • WYSIWYG editor replaced with the “elRTE” editor, based on jQuery and jQuery UI

    and it opens automatically when you click on the textarea element. I do not think it’s a good solution, so we’re still looking for good wysiwyg and the way how it should work (e.g. always displayed when page loads, load on click, etc).
  • The “autocomplete” library was replaced with the jQuery UI framework. Also the “Tags” addon is simplified, you can easily enter several tags, separated by comma.



    Example (you need to sign in first):

    [url]http://labs.cs-cart.com/jquery/index.php?dispatch=products.view&product_id=1061&selected_section=tags[/url]



    Start typing “mu” (without quotes), then “ha”.

Check this site: [url]http://www.titanmotorsports.com/boost-controllers.html[/url]

The site is done by Solid Cactus, webdesign company for yahoo stores.



What I like about this site is that product listing features a pop-up product detail page.

It is nice, since you can see more details about a product and at the same time you have below the product listing to review more products. Even you can have several detail page windows opened. YOu can place the order right there in the window.

[quote name=‘sixnin9’]For me, the existing look and feel of CS-Cart’s jQuery effects are fine. The problem with the current version is that I can’t use any modern jQuery plugins because they’re incompatible with CS-Cart’s “forked” obsolete jQuery version. Having an up-to-date AND unmodified jQuery in CS-Cart is the key improvement we need - fancy lightbox plugins can then be added by the users.[/QUOTE]



I agree with sixnin9 that whatever updates that cs-cart team do with jquery. Please ensure that the jquery library can be used untouched and unmodified. All other coding that make use of the jquery library can be separated into another file/library.



Instead of addons/more features now, a good start will be make the current CORE/basic functionality still works when the jquery library is used “unmodified” as-is at the latest version.



From then on, adding functionality/features will just be deciding which plugins are good to incorporate into cs-cart core package.

Hi Zeke,



The best calendar I’ve seen so far, both in functionality and design is this one:



[url]http://www.starwoodhotels.com/alofthotels/index.html[/url]



I’m not sure id there is a JQuery script out there that does the same thing but will be looking for it.

For a multi-vendor calendar in which the vendors will enter their daily availabilities and prices in the backend (see rental mod post), this seems to be the best one:



[url]Google Code Archive - Long-term storage for Google Code Project Hosting.

[quote]

[url]Google Code Archive - Long-term storage for Google Code Project Hosting.

[/quote]

Pretty darn SLOW

[quote name=‘colortone’]Check this site: [url]http://www.titanmotorsports.com/boost-controllers.html[/url]

The site is done by Solid Cactus, webdesign company for yahoo stores.



What I like about this site is that product listing features a pop-up product detail page.

It is nice, since you can see more details about a product and at the same time you have below the product listing to review more products. Even you can have several detail page windows opened. YOu can place the order right there in the window.[/QUOTE]



Check this site , this is what i want

popup



This is done with Mootools i think

Check out this jQuery plug-in:



[url]http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/[/url]



Nice - videos, html, ajax, images too.

[quote name=‘Bluemachine26’]Check out this jQuery plug-in:



[url]http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/[/url]



Nice - videos, html, ajax, images too.[/QUOTE]



That is PrettyPhoto which I mentioned here. Seems like a lot of people supported this choice as well.

Thought the whole point was to upgrade the JQuery environment so that people could plug in whatever they wanted. The developers can choose whatever they want for the default, but there should be an easy way for users to plug in other modules instead.

Jquery 1.4 is quite a bit faster than what we have now (plus Firebug keeps throwing errors at me regarding the current cs-cart js), so I think this is a good move.



One issue that I would like to see improved is with the implementation of the Jquery Tooltip plugin and it’s affect on CSS usage in CS-Cart.



Currently, the dropdown menus for select boxes such as the currency selector, or the sorting options (Sort by: Price, Name, etc) are absolutely positioned via inline CSS from the top left corner of the ENTIRE BROWSER WINDOW !!!



This is such an incredibly terrible way of doing things because it means you CAN NOT give any container element (such as the central column) a CSS position value of anything other than “static” (the default) because then it’s top left corner becomes the new central axis for positioning the dropdowns, even though those coordinates are still being calculated from the top left corner of the entire window. So then the popup gets positioned incorrectly.



Consider the following html:



[HTML]


logo nav etc








Sort by: Popularity



  • Default

  • Name

  • Price

  • Popularity

  • Bestselling









[/HTML]

The way things are now, if the "Sort By" selector (which is floated to the right by it's parent div), calculated to be positioned 250px from the top of the window and 1250px from the left edge of the browser window, is clicked on to choose a different sorting option, then the unorded list that gets "popped up" will have the following INLINE CSS added to it: style="display:block; position:absolute; top:250px; left:1250px;" (or something similar).

The reason this is bad is because any container that the popup happens to be within, CAN NOT have its CSS position set to anything other than "static", which is the default setting.

If the div.central-column is calculated to be positioned 170px from the top of the window and 560px from the left edge of the browser window (because it is pushed down by the header, and pushed to the left by a sidebar and the fact that the site is centered in the browser window), and you set it's CSS position to "relative", then the "Sort by" popup will get positioned an additional 170px down the page and 560px to the right, meaning it will end up being 420px from the top of the window and a whopping 1810px from the left edge of the browser window (off the screen for my monitor).

The reason this happens is because [B]setting an element's position to "absolute" will position it from the top left corner of the first parent element with a position attribute set to anything other than "static"[/B].

So not only can you NOT set the position attribute for a container like div.central-column (because you will bugger up the popup positions), but you can NOT absolutely position ANYTHING AT ALL, unless you also want to calculate it's position from the top left corner of the entire browser window (meaning yo uhave to use javscript instead of CSS)!!! Because in order to absolutely position something within a container, you have to set that container's position to something other than "static".

As far as I'm concerned, this is either a serious deep lack of comprehension of CSS, or an intentional plot to obfuscate the development of custom cs-cart themes, thus securing a steady stream of paying customization projects for the developers of cs-cart because others are unable to implement otherwise simple changes. Hay, what rant isn't complete without a good conspiracy theory thrown in?

Anyways, the solution ended up being easy once I was able to trace what was going on...

If you throw a wrapper div around the select box and the link that activates it, then you can EASILY calculate the position of this parent div from the top left corner of the screen (same as what is being done now for the popup), but then calculate the offset for the popup relative to the parent div instead of the entire window. Now just set the parent div's position to relative, and that's it. Your popups are positioned correctly, the javascript can still determine if the dropdown will extend past the screen boundaries and adjust it's position accordingly, and most importantly, you haven't disabled the ability to set CSS positions for other elements.

This only requires one extra div container in the html (or the use of an appropriately positioned parent, like div.right in the example above) and as far as I remember, only a few extra lines (5 or 6?) of javascript within core.js.

Why this wasn't done from the start is completely mind boggling to me.

The CSS positions attribute is a fundamental element for manipulating the layout of a webpage and should not have been rendered useless as it has in CS-Cart.

imho

[quote name=‘tbirnseth’]Thought the whole point was to upgrade the JQuery environment so that people could plug in whatever they wanted. The developers can choose whatever they want for the default, but there should be an easy way for users to plug in other modules instead.[/QUOTE]



i agree