JQuery :: Customize The Product Before Moving Forward
May 5, 2011
I want to build a site where the user can customize the product before moving forward. For example: Start with a stock car. User uses drop down menu to change car color (image changes to reflect change) Then User uses drop down menu to change tires (image changes to reflect change while keeping first selection) I know xhtml & css only. Before diving into a new language and library, I'd like to know if I'm even in the right toolbox.
I've just finished another slideshow, but is there a possibility to make a slidehow go to the fist DIV without sliding back. It should be way better when it appears to slide forward just as the other animations.
If you mouseOver a thumbnail of a product, a larger picture appears fading in and doing a quick slide at the same time. On mouseLeave, it does the reverse.
I'm currently trying to move a div that holds a text message forward pixel by pixel and eventually I'll write the code for it to go backwards and repeat.
But I am not quite understanding what I've done wrong. It seems like a simple task, but It's not going anywhere.
I call a function from the xhtml document like so:
I am wondering how Back, Forward browser button works for iframes. Does it bring back/forward iframe or top window? I remember I had before a problem because I wanted to bring back iframe and not top window as it did. But today I tested my Facebook app and was surprised to see it works as I need which means it brings back/forward iframe window and not top. Is it possible that Facebook has some javascript code which does that or is this normall behaviour?
I am a jQuery beginner and have managed to install basic plugins, but I still have some problems with customization. I am working with the Roundabout plugin and I would like to trigger the Roundabout animation with a mouseover. On the Roundabout website there is an explanation for how to trigger the animation with buttons, but I need an explanation for triggering the animation with a mouseover. I would like to "focus" the image with the mouse rather than a click.
My work in progress is located here and here is the basic code that I am using:
I'm using the validation plugin and tries to get the invalid errors to appear like I want to. If the form isn't valid, I would like to change the invalid elements placeholder text to a different color. That's it. I don't want to show any message somewhere. Is this possible? How?
I have problem about mouse hover in JQuery, the problem is that the main image not change when I move from additional image 1 to additional image 2. My site sample : [URL]. It work when I move to other additional with move mouse slowly.
This my code : $(document).ready(function(){ $('#thumbs a').hover( function() { var currentBigImage = $('#image img').attr('src'); var newBigImage = $(this).attr('href'); var currentThumbSrc = $(this).attr('rel'); switchImage(newBigImage, currentBigImage, currentThumbSrc); }, function() { var currentBigImage = $('#image img').attr('src'); var newBigImage = '[URL]'; var currentThumbSrc = $(this).attr('rel'); switchImage(newBigImage, currentThumbSrc, currentBigImage); } ); function switchImage(imageHref, currentBigImage, currentThumbSrc) { var theBigImage = $('#image'); if (imageHref != currentBigImage) { theBigImage.fadeOut(250, function(){ theBigImage.attr('src', imageHref).fadeIn(250); var newImageDesc = $("#thumbs a img[src='"+currentThumbSrc+"']").attr('alt'); }); } } });
I sort of see examples in how to lazy load via AJAX request for the jCarousel.But the examples here are geared toward specific APIs such as Fickr.URL...So basically what I'm trying to do is make a jQuery ajax request to one of our URLs that goes to an HttpHandler and spits back XML in the response.Obviously this is our own custom XML so I looked at the source examples on some of what he did with calling the Flickr url to defer loading but I don't know how hard it would be to tweak this plug-in or what to tweak in order to parse my own incoming XML in the response and then get the list items to show dynamically in the <ul></ ul> So I don't know where to start on this. I guess I can look at the source of this plug-in but man, I will still need some assistance on this.
I am having problems with a template I bought. When I customize the menu, and the items have many sub items. the white background slides down way too much. I am learning jquery and canĀ“t find where to correct this URL...See the items: "Diplomados" "Servicios a alumnos" and "convenios".
I'm working on a site which lists a group of products and when you click on an "expand" button it loads the rest of the product details and displays the rest of the product information directly below the div that was expanded.Each product summary has a div with the id of "#moreinfo" that expands to show the product details. The link that causes the expansion is this one: ".product5 .moreinfo a".However, only the first div expands when I click any of the products. It does display the correct product info, but always after the first product.My jquery is below. How can I make it expand the correct '#moreinfo div'
$(document).ready(function() { var hash = window.location.hash.substr(1); var href = $('.product5 .moreinfo a').each(function(){
I have a Cycle Plugin carousel of 20 product thumbs split into 4 slides of 5 thumb images each slide. This scrolls horizontally forwards and backwards with left/right navigation. This carousel is situated below the products being displayed. The user can navigate forwards and backward through these 4 slides, however, when they pick a product to look at the carousel always resets itself back to the first slide. How can I set it so that when an image in one of the 4 slides is clicked and we move to that product's page, that slide stays active when the page loads? It's annoying to have to scroll back through the 4 slides to find the one that had the active product on it.
My first foray in using JQuery - trying to customize navigation in SharePoint 2010. Have adapted some jquery found online through various sources to meet needs. However, having an ID assigned to the <ul> element that drives my menu is required. SP, while dynamically building menu does not assign and ID to the ul element. Been trying, unsuccessfully thus far, to use jquery to add and ID tag to the proper ul... just wanted to see if that is in fact possible and for any tips in implementing.
Output is <ul class="root static"> and I would like to replace it with <ul class="root static" id="menu">
I have been successfully in simply replacing the cssclass (which doesn't actually help me) and in replacing regular text in the body, but just can't get that ID added to the element.
make a scroller that could scroll continuously/constant both forward and backward (from left to right and right to left).
The instance shouldn't scroll unless holding down a link (arrows left&right) outside the scroller. (using onmousedown and stop onmouseup) and it would be great if it's not possible to scroll past the last and first item. (i don't want any empty space) But I guess I could do that with offset and exclude (:
I don't have any code for you, but if you want me to try some more first, I'll do that and send you if I got anything good out of it!
(I also tried the HoverScroll plugin, but since the arrows is implemented in the jquery/js-code I wasn't abled to tweak it as I wanted. That plugin is possibly the nearest already made scroller I've so far seen. However I want the buttons to be outside the scrollerarea, and I also want to be able to change the styling on the whole thing. and I want it to use onmousedown and onmouseup instead of onmouseover.)
I've tried with scrollable and ScrollTo/SerialScroll, but I'm not a code wizard so how to do this.. ;O These plugins seems really great, and I have used them in other projects, so I'm a bit familiar with how they work.
I'm using this to change some tabs around. Is there a way to add hashes to the URL too or some way that i can enable back/forward buttons functions and link to a particular tab?
$(document).ready(function(){ $(".buttons").click(function () { if ($(this).hasClass("current_tab_button")){ //is it the tab that's already displayed
I have a few document ready functions on my page. I don't want the functions to get executed if the page is loaded because the user clicks on the browser forward/back button. Is there a way to prevent the document ready functions from getting executed if the user clicks on the forward/back button?
Id like to control scrolling of two divs with one scrollbar as in this example here
[URL]
At the same time i want to customize the scrollbar. Ive been using Flexcroll which work fine on a single div. But as soon as i insert flexcroll.js to head of document in the example, the sync of the two divs breaks and only the div with Flexcroll attached scrolls.
Anyone know how to solve this? You can find the code im using in the example or i can post.I dont have to use Flexcroll, so if you know of any other application that can customize scrollbar and control scroll on two divs at the same time.
i need to make my alert box stand out a bit more i have looked everywhere but can't find anything! i was looking to do stuff like Bold, Italics, Underline, Fonts, Sizes, Borders, Backgrounds maybe something that flashed!i'm not asking you to do it for me just tell me how and were to put the different codes!
I want to use htaccess for entry to protected pages, but for a large group of users. Is there a way to change the color of the popup box to blend with the site?